1.1.4 - Design tweaks

frontend/src/components/AppSidebar.svelte

@@ -21,186 +21,136 @@
   export let open = true;
   export let collapsed = false;
   export let isMobile = false;
+
+  const navItems = [
+    { id: "scanner", label: "Scanner", icon: Scan },
+    { id: "automation", label: "Automations", icon: Zap },
+    { id: "history", label: "History", icon: History },
+    { id: "library", label: "Library", icon: Library },
+    { id: "settings", label: "Settings", icon: Settings },
+  ];
 </script>
 
 <aside
-  class={`fixed inset-y-0 left-0 z-40 h-screen w-[--sidebar-width] border-r border-border bg-[color:var(--bg-primary)] bg-gradient-to-b from-white/12 via-white/5 to-transparent text-text-primary transition-transform duration-200 ease-out md:sticky md:top-0 ${
+  class={`fixed inset-y-0 left-0 z-40 h-screen w-[--sidebar-width] border-r border-border bg-[color:var(--bg-secondary)] text-text-primary transition-transform duration-200 ease-out md:sticky md:top-0 flex flex-col ${
     !open && isMobile
       ? "-translate-x-full pointer-events-none"
       : "translate-x-0"
   }`}
 >
-  <div class="flex h-full min-h-0 flex-col">
-    <div
-      class={`relative flex items-center gap-3 py-5 ${collapsed ? "px-2" : "px-4"}`}
+  <!-- Logo area -->
+  <div
+    class={`relative flex items-center gap-3 py-5 border-b border-border ${collapsed ? "px-2 justify-center" : "px-4"}`}
+  >
+    {#if collapsed}
+      <div class="h-8 w-8 rounded-lg overflow-hidden">
+        <img
+          src={sublogueLogo}
+          alt="Sublogue"
+          class="h-full w-full object-cover"
+        />
+      </div>
+    {:else}
+      <div class="flex items-center -ml-5 flex-1 min-w-0">
+        <img
+          src={sublogueLogo}
+          alt="Sublogue"
+          class="h-8 w-auto max-w-[200px] object-contain"
+        />
+      </div>
+    {/if}
+    <button
+      class="shrink-0 h-7 w-7 rounded-lg flex items-center justify-center text-text-tertiary hover:text-text-primary hover:bg-bg-hover transition-all duration-150"
+      on:click={onToggleSidebar}
+      aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
     >
       {#if collapsed}
-        <div
-          class="relative flex h-9 w-9 items-center justify-center rounded-lg border border-white/10 bg-black/40 overflow-hidden"
-        >
-          <span class="absolute inset-0 rounded-lg bg-blue-500/10 blur-md"
-          ></span>
-
-          <img
-            src={sublogueLogo}
-            alt="Sublogue"
-            class="relative h-full w-full object-cover"
-          />
-        </div>
+        <ChevronRight class="h-3.5 w-3.5" />
       {:else}
-        <div class="flex items-center -ml-6">
-          <img
-            src={sublogueLogo}
-            alt="Sublogue"
-            class="h-9 w-auto max-w-[220px] object-contain"
-          />
-        </div>
+        <ChevronLeft class="h-3.5 w-3.5" />
       {/if}
+    </button>
+  </div>
+
+  <!-- Navigation -->
+  <nav
+    class={`flex-1 min-h-0 overflow-y-auto py-3 space-y-0.5 ${collapsed ? "px-2" : "px-2"}`}
+  >
+    {#each navItems as item}
+      {@const isActive = currentView === item.id}
       <button
-        class="absolute right-3 top-1/2 -translate-y-1/2 h-8 w-8 rounded-full border border-white/10 bg-white/5 text-text-secondary hover:text-white hover:bg-[color:var(--bg-hover)] transition-colors"
-        on:click={onToggleSidebar}
-        aria-label={collapsed ? "Show sidebar" : "Hide sidebar"}
+        class={`w-full flex items-center gap-2.5 rounded-lg text-[13px] font-medium transition-all duration-150 relative
+          ${collapsed ? "justify-center px-0 h-9" : "px-3 h-9"}
+          ${
+            isActive
+              ? "bg-bg-hover text-text-primary"
+              : "text-text-secondary hover:text-text-primary hover:bg-bg-hover/60"
+          }`}
+        on:click={() => onNavigate(item.id)}
+        aria-current={isActive ? "page" : undefined}
       >
-        {#if collapsed}
-          <ChevronRight class="h-4 w-4 mx-auto" />
-        {:else}
-          <ChevronLeft class="h-4 w-4 mx-auto" />
+        {#if isActive && !collapsed}
+          <span
+            class="absolute left-0 top-1/2 -translate-y-1/2 h-4 w-0.5 rounded-full bg-accent"
+          ></span>
+        {/if}
+        <svelte:component this={item.icon} class="h-4 w-4 shrink-0" />
+        {#if !collapsed}
+          <span>{item.label}</span>
         {/if}
       </button>
-    </div>
+    {/each}
+  </nav>
 
-    <nav
-      class={`sidebar-nav flex-1 min-h-0 overflow-y-auto py-3 ${collapsed ? "px-1.5" : "px-3"} space-y-1`}
-    >
-      <Button
-        variant="ghost"
-        className={`w-full rounded-md py-1.5 text-[13px] font-semibold leading-none ${
-          collapsed ? "justify-center px-0" : "justify-start px-2 gap-2"
-        } ${
-          currentView === "scanner"
-            ? "bg-[color:var(--bg-hover)] text-white font-bold"
-            : "text-text-secondary hover:text-white hover:bg-[color:var(--bg-hover)]"
-        }`}
-        on:click={() => onNavigate("scanner")}
-        aria-current={currentView === "scanner" ? "page" : undefined}
-      >
-        <Scan class="h-4 w-4" />
-        {#if !collapsed}
-          Scanner
-        {/if}
-      </Button>
-
-      <Button
-        variant="ghost"
-        className={`w-full rounded-md py-1.5 text-[13px] font-semibold leading-none ${
-          collapsed ? "justify-center px-0" : "justify-start px-2 gap-2"
-        } ${
-          currentView === "automation"
-            ? "bg-[color:var(--bg-hover)] text-white font-bold"
-            : "text-text-secondary hover:text-white hover:bg-[color:var(--bg-hover)]"
-        }`}
-        on:click={() => onNavigate("automation")}
-        aria-current={currentView === "automation" ? "page" : undefined}
-      >
-        <Zap class="h-4 w-4" />
-        {#if !collapsed}
-          Automations
-        {/if}
-      </Button>
-
-      <Button
-        variant="ghost"
-        className={`w-full rounded-md py-1.5 text-[13px] font-semibold leading-none ${
-          collapsed ? "justify-center px-0" : "justify-start px-2 gap-2"
-        } ${
-          currentView === "history"
-            ? "bg-[color:var(--bg-hover)] text-white font-bold"
-            : "text-text-secondary hover:text-white hover:bg-[color:var(--bg-hover)]"
-        }`}
-        on:click={() => onNavigate("history")}
-        aria-current={currentView === "history" ? "page" : undefined}
-      >
-        <History class="h-4 w-4" />
-        {#if !collapsed}
-          History
-        {/if}
-      </Button>
-
-      <Button
-        variant="ghost"
-        className={`w-full rounded-md py-1.5 text-[13px] font-semibold leading-none ${
-          collapsed ? "justify-center px-0" : "justify-start px-2 gap-2"
-        } ${
-          currentView === "library"
-            ? "bg-[color:var(--bg-hover)] text-white font-bold"
-            : "text-text-secondary hover:text-white hover:bg-[color:var(--bg-hover)]"
-        }`}
-        on:click={() => onNavigate("library")}
-        aria-current={currentView === "library" ? "page" : undefined}
-      >
-        <Library class="h-4 w-4" />
-        {#if !collapsed}
-          Library
-        {/if}
-      </Button>
-
-      <Button
-        variant="ghost"
-        className={`w-full rounded-md py-1.5 text-[13px] font-semibold leading-none ${
-          collapsed ? "justify-center px-0" : "justify-start px-2 gap-2"
-        } ${
-          currentView === "settings"
-            ? "bg-[color:var(--bg-hover)] text-white font-bold"
-            : "text-text-secondary hover:text-white hover:bg-[color:var(--bg-hover)]"
-        }`}
-        on:click={() => onNavigate("settings")}
-        aria-current={currentView === "settings" ? "page" : undefined}
-      >
-        <Settings class="h-4 w-4" />
-        {#if !collapsed}
-          Settings
-        {/if}
-      </Button>
-    </nav>
-
-    <div class={`pb-5 space-y-3 ${collapsed ? "px-2" : "px-3"}`}>
-      <Separator className="bg-white/10" />
-      {#if !collapsed}
+  <!-- Footer -->
+  <div
+    class={`border-t border-border pb-4 pt-3 space-y-2 ${collapsed ? "px-2" : "px-2"}`}
+  >
+    {#if !collapsed}
+      <div class="px-1">
         <ThemeSelector className="w-full" />
-      {/if}
-      <div
-        class={`flex items-center px-3 py-2 text-xs ${collapsed ? "justify-center" : "justify-between"}`}
-      >
-        {#if !collapsed}
-          <Badge className="text-text-secondary">Version: v1.1.3</Badge>
-        {:else}
-          <Badge className="text-text-secondary">v</Badge>
-        {/if}
       </div>
-      <div
-        class={`flex items-center px-3 py-2 text-xs ${collapsed ? "justify-center" : "justify-between"}`}
-      >
-        {#if !collapsed}
-          <span class="text-text-tertiary">&copy; 2026 ponzischeme89</span>
+    {/if}
+    <div
+      class={`flex items-center px-1 ${collapsed ? "justify-center" : "justify-between"}`}
+    >
+      {#if !collapsed}
+        <span class="text-[11px] text-text-tertiary"
+          >&copy; 2026 ponzischeme89</span
+        >
+        <div class="flex items-center gap-2">
+          <Badge
+            variant="outline"
+            class="text-[10px] text-text-tertiary border-border py-0"
+            >v1.1.4</Badge
+          >
           <a
             href="https://github.com/ponzischeme89/Sublogue"
             target="_blank"
             rel="noopener noreferrer"
-            class="inline-flex items-center text-text-tertiary hover:text-white transition-colors"
+            class="text-text-tertiary hover:text-text-primary transition-colors"
             aria-label="GitHub"
           >
-            <Github class="h-4 w-4" />
+            <Github class="h-3.5 w-3.5" />
           </a>
-        {:else}
-          <span class="text-text-tertiary">&copy;</span>
-        {/if}
-      </div>
+        </div>
+      {:else}
+        <a
+          href="https://github.com/ponzischeme89/Sublogue"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-text-tertiary hover:text-text-primary transition-colors"
+          aria-label="GitHub"
+        >
+          <Github class="h-3.5 w-3.5" />
+        </a>
+      {/if}
     </div>
   </div>
 </aside>
 
 <style>
-  .sidebar-nav {
+  nav button {
     letter-spacing: -0.01em;
   }
 </style>

frontend/src/components/SettingsPanel.svelte

@@ -18,11 +18,11 @@
   let successMessage = null;
 
   const sections = [
-    { id: "general", label: "General", icon: "settings" },
-    { id: "folder-rules", label: "Folder Rules", icon: "folder" },
-    { id: "cleanup", label: "Cleanup", icon: "wand" },
-    { id: "integrations", label: "Integrations", icon: "plug" },
-    { id: "tasks", label: "Tasks", icon: "bolt" },
+    { id: "general",      label: "General",      icon: Settings },
+    { id: "folder-rules", label: "Folder Rules",  icon: Folder },
+    { id: "cleanup",      label: "Cleanup",        icon: Wand2 },
+    { id: "integrations", label: "Integrations",   icon: Plug },
+    { id: "tasks",        label: "Tasks",           icon: Bolt },
   ];
 
   onMount(async () => {
@@ -81,98 +81,80 @@
       <Skeleton className="h-6 w-32 mb-2" />
       <Skeleton className="h-4 w-64" />
     </div>
-    <div class="flex gap-12">
-      <div class="w-48 space-y-2">
-        <Skeleton className="h-10 w-full" />
-        <Skeleton className="h-10 w-full" />
-        <Skeleton className="h-10 w-full" />
+    <div class="flex gap-10">
+      <div class="w-44 space-y-1.5">
+        {#each Array(5) as _}
+          <Skeleton className="h-9 w-full rounded-lg" />
+        {/each}
       </div>
       <div class="flex-1 space-y-4">
-        <div class="rounded-lg border border-border bg-card p-6 space-y-3">
+        <div class="rounded-xl border border-border bg-card p-6 space-y-3">
           <Skeleton className="h-4 w-40" />
           <Skeleton className="h-10 w-full" />
           <Skeleton className="h-4 w-2/3" />
         </div>
-        <div class="rounded-lg border border-border bg-card p-6 space-y-3">
+        <div class="rounded-xl border border-border bg-card p-6 space-y-3">
           <Skeleton className="h-4 w-32" />
           <Skeleton className="h-9 w-full" />
           <Skeleton className="h-9 w-full" />
         </div>
-        <div class="rounded-lg border border-border bg-card p-6 space-y-3">
-          <Skeleton className="h-4 w-28" />
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-5/6" />
-        </div>
       </div>
     </div>
   </div>
 {:else}
   <div class="space-y-8">
     <div>
-      <h2 class="text-xl font-bold mb-2 text-text-primary">Settings</h2>
+      <h2 class="text-xl font-bold mb-1.5 text-text-primary">Settings</h2>
       <p class="text-[13px] text-text-secondary leading-relaxed">
         Configure metadata sources, cleanup rules, and scheduled scans.
       </p>
     </div>
 
-    <div class="flex flex-col lg:flex-row gap-8 lg:gap-12">
+    <div class="flex flex-col lg:flex-row gap-8 lg:gap-10">
       <!-- Sidebar Navigation -->
-      <aside class="w-full lg:w-48 flex-shrink-0">
+      <aside class="w-full lg:w-44 shrink-0">
         <nav class="space-y-0.5">
           {#each sections as section}
+            {@const isActive = currentSection === section.id}
             <button
-              class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left transition-all border
-                   {currentSection === section.id
-                ? 'bg-white text-black border-white'
-                : 'text-text-secondary hover:text-white hover:bg-bg-hover border-transparent'}"
+              class={`w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-left text-[13px] font-medium transition-all duration-150 relative
+                ${isActive
+                  ? "bg-bg-hover text-text-primary"
+                  : "text-text-secondary hover:text-text-primary hover:bg-bg-hover/60"
+                }`}
               on:click={() => (currentSection = section.id)}
             >
-              {#if section.icon === "settings"}
-                <Settings class="w-4 h-4" />
-              {:else if section.icon === "calendar"}
-                <Calendar class="w-4 h-4" />
-              {:else if section.icon === "bolt"}
-                <Bolt class="w-4 h-4" />
-              {:else if section.icon === "wand"}
-                <Wand2 class="w-4 h-4" />
-              {:else if section.icon === "plug"}
-                <Plug class="w-4 h-4" />
-              {:else if section.icon === "folder"}
-                <Folder class="w-4 h-4" />
+              {#if isActive}
+                <span class="absolute left-0 top-1/2 -translate-y-1/2 h-4 w-0.5 rounded-full bg-accent"></span>
               {/if}
-              <span class="text-[13px] font-medium">{section.label}</span>
+              <svelte:component this={section.icon} class="w-4 h-4 shrink-0" />
+              <span>{section.label}</span>
             </button>
           {/each}
         </nav>
       </aside>
 
       <!-- Main Content -->
-      <div class="flex-1 min-w-0">
+      <div class="flex-1 min-w-0 space-y-4">
         {#if error}
-          <div
-            class="mb-6 px-5 py-4 bg-red-500/5 border border-red-500/20 rounded-xl"
-          >
+          <div class="px-4 py-3 bg-red-500/8 border border-red-500/20 rounded-xl">
             <p class="text-[13px] text-red-300">{error}</p>
           </div>
         {/if}
 
         {#if successMessage}
-          <div
-            class="mb-6 px-5 py-4 bg-green-500/5 border border-green-500/20 rounded-xl"
-          >
-            <p class="text-[13px] text-green-300">{successMessage}</p>
+          <div class="px-4 py-3 bg-emerald-500/8 border border-emerald-500/20 rounded-xl">
+            <p class="text-[13px] text-emerald-300">{successMessage}</p>
           </div>
         {/if}
 
-        <div
-          class="rounded-xl border border-border bg-card/60 p-6 lg:p-8 shadow-sm"
-        >
+        <div class="rounded-xl border border-border bg-card shadow-[0_2px_8px_rgba(0,0,0,0.3),0_0_0_1px_rgba(255,255,255,0.04)] p-6 lg:p-8">
           {#if currentSection === "general"}
             <GeneralSettings {settings} {saving} onSave={handleSave} />
           {:else if currentSection === "folder-rules"}
             <FolderRulesSettings {settings} />
           {:else if currentSection === "scheduled"}
-            <ScheduledScansSettings {settings} />
+            <TasksSettings />
           {:else if currentSection === "cleanup"}
             <FilenameCleaningSettings {settings} {saving} onSave={handleSave} />
           {:else if currentSection === "integrations"}