feat: add reduce motion settings and update related UI components

frontend/messages/en.json

@@ -198,5 +198,8 @@
 	"settings_toast_install_failed": "Failed to launch installer",
 	"settings_danger_update_checker_label": "Enable Update Checker",
 	"settings_danger_update_checker_hint": "Check for application updates from network share",
-	"settings_danger_update_checker_info": "Info: When enabled, the app will check for updates from your configured network share. Disable this if you manage updates manually or don't have network access."
+	"settings_danger_update_checker_info": "Info: When enabled, the app will check for updates from your configured network share. Disable this if you manage updates manually or don't have network access.",
+	"settings_reduce_motion_label": "Reduce Motion",
+	"settings_reduce_motion_hint": "Disable transition animations for interface elements like the sidebar.",
+	"settings_reduce_motion_info": "Info: When enabled, animations such as the sidebar slide transition will be removed for a snappier feel or to reduce visual distractions."
 }

frontend/messages/it.json

@@ -198,5 +198,8 @@
 	"settings_toast_install_failed": "Impossibile avviare l'installazione",
 	"settings_danger_update_checker_label": "Abilita controllo aggiornamenti",
 	"settings_danger_update_checker_hint": "Controlla aggiornamenti applicazione dalla condivisione di rete",
-	"settings_danger_update_checker_info": "Info: Quando abilitato, l'app controllerà gli aggiornamenti dal percorso di rete configurato. Disabilitalo se gestisci gli aggiornamenti manualmente o non hai accesso alla rete."
+	"settings_danger_update_checker_info": "Info: Quando abilitato, l'app controllerà gli aggiornamenti dal percorso di rete configurato. Disabilitalo se gestisci gli aggiornamenti manualmente o non hai accesso alla rete.",
+	"settings_reduce_motion_label": "Riduci Movimento",
+	"settings_reduce_motion_hint": "Disabilita le animazioni di transizione per gli elementi dell'interfaccia come la barra laterale.",
+	"settings_reduce_motion_info": "Info: Quando abilitato, le animazioni come la transizione della barra laterale verranno rimosse per un'esperienza più reattiva o per ridurre le distrazioni visive."
 }

frontend/src/lib/stores/settings.svelte.ts

@@ -15,6 +15,7 @@ const defaults: EMLy_GUI_Settings = {
     useDarkEmailViewer: true,
     enableUpdateChecker: false,
     musicInspirationEnabled: false,
+    reduceMotion: false,
     theme: "dark",
 };
 

frontend/src/lib/types.d.ts

@@ -11,6 +11,7 @@ interface EMLy_GUI_Settings {
     useDarkEmailViewer?: boolean;
     enableUpdateChecker?: boolean;
     musicInspirationEnabled?: boolean;
+    reduceMotion?: boolean;
     theme?: "light" | "dark";
 }
 

frontend/src/routes/(app)/+layout.svelte

@@ -319,11 +319,9 @@
     </div>
   </div>
 
-  <div class="content">
-    <Sidebar.Provider>
-      {#if $sidebarOpen}
+  <div class="content" class:reduce-motion={settingsStore.settings.reduceMotion}>
+    <Sidebar.Provider open={$sidebarOpen} onOpenChange={(v) => sidebarOpen.set(v)}>
         <AppSidebar />
-      {/if}
       <main>
         <!-- <Sidebar.Trigger /> -->
         <Toaster />
@@ -752,6 +750,12 @@
     max-height: 100% !important;
   }
 
+  /* Disable sidebar transitions when reduce-motion is active */
+  :global(.content.reduce-motion [data-slot="sidebar-gap"]),
+  :global(.content.reduce-motion [data-slot="sidebar-container"]) {
+    transition-duration: 0s !important;
+  }
+
   ::-webkit-scrollbar {
     width: 6px;
     height: 6px;

frontend/src/routes/(app)/settings/+page.svelte

@@ -41,6 +41,7 @@
     enableAttachedDebuggerProtection: true,
     useDarkEmailViewer: true,
     enableUpdateChecker: false,
+    reduceMotion: false,
     theme: "dark",
   };
 
@@ -77,6 +78,7 @@
       enableUpdateChecker: runningInDevMode
         ? false
         : (s.enableUpdateChecker ?? defaults.enableUpdateChecker ?? true),
+      reduceMotion: s.reduceMotion ?? defaults.reduceMotion ?? false,
       theme: s.theme || defaults.theme || "light",
     };
   }
@@ -89,6 +91,7 @@
       !!a.enableAttachedDebuggerProtection === !!b.enableAttachedDebuggerProtection &&
       !!a.useDarkEmailViewer === !!b.useDarkEmailViewer &&
       !!a.enableUpdateChecker === !!b.enableUpdateChecker &&
+      !!a.reduceMotion === !!b.reduceMotion &&
       (a.theme ?? "light") === (b.theme ?? "light") &&
       JSON.stringify(a.previewFileSupportedTypes?.sort()) ===
         JSON.stringify(b.previewFileSupportedTypes?.sort())
@@ -402,7 +405,7 @@
         <Card.Title>{m.settings_appearance_title()}</Card.Title>
         <Card.Description>{m.settings_appearance_description()}</Card.Description>
       </Card.Header>
-      <Card.Content>
+      <Card.Content class="space-y-4">
         <RadioGroup.Root
           bind:value={form.theme}
           class="flex flex-col gap-3"
@@ -440,6 +443,31 @@
           <strong>Info:</strong>
           {m.settings_theme_hint()}
         </div>
+        
+
+        <Separator />
+
+        <div class="space-y-3">
+          <div
+            class="flex items-center justify-between gap-4 rounded-lg border bg-card p-4"
+          >
+            <div>
+              <div class="font-medium">
+                {m.settings_reduce_motion_label()}
+              </div>
+              <div class="text-sm text-muted-foreground">
+                {m.settings_reduce_motion_hint()}
+              </div>
+            </div>
+            <Switch
+              bind:checked={form.reduceMotion}
+              class="cursor-pointer hover:cursor-pointer"
+            />
+          </div>
+          <p class="text-xs text-muted-foreground mt-2">
+            {m.settings_reduce_motion_info()}
+          </p>
+        </div>
       </Card.Content>
     </Card.Root>