From 4b6f2d727c4c67928dd583d915ca81e9b494934d Mon Sep 17 00:00:00 2001 From: Flavio Fois Date: Mon, 9 Feb 2026 22:45:56 +0100 Subject: [PATCH] feat: add reduce motion settings and update related UI components --- frontend/messages/en.json | 5 +++- frontend/messages/it.json | 5 +++- frontend/src/lib/stores/settings.svelte.ts | 1 + frontend/src/lib/types.d.ts | 1 + frontend/src/routes/(app)/+layout.svelte | 12 +++++--- .../src/routes/(app)/settings/+page.svelte | 30 ++++++++++++++++++- 6 files changed, 47 insertions(+), 7 deletions(-) diff --git a/frontend/messages/en.json b/frontend/messages/en.json index 6dfb4e2..7b4c0a4 100644 --- a/frontend/messages/en.json +++ b/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." } diff --git a/frontend/messages/it.json b/frontend/messages/it.json index c56c8dc..870899e 100644 --- a/frontend/messages/it.json +++ b/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." } diff --git a/frontend/src/lib/stores/settings.svelte.ts b/frontend/src/lib/stores/settings.svelte.ts index cc2450e..61e0de9 100644 --- a/frontend/src/lib/stores/settings.svelte.ts +++ b/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", }; diff --git a/frontend/src/lib/types.d.ts b/frontend/src/lib/types.d.ts index 43c6e2f..715d447 100644 --- a/frontend/src/lib/types.d.ts +++ b/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"; } diff --git a/frontend/src/routes/(app)/+layout.svelte b/frontend/src/routes/(app)/+layout.svelte index e21c881..23fa439 100644 --- a/frontend/src/routes/(app)/+layout.svelte +++ b/frontend/src/routes/(app)/+layout.svelte @@ -319,11 +319,9 @@ -
- - {#if $sidebarOpen} +
+ sidebarOpen.set(v)}> - {/if}
@@ -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; diff --git a/frontend/src/routes/(app)/settings/+page.svelte b/frontend/src/routes/(app)/settings/+page.svelte index 42bc6d9..46d0865 100644 --- a/frontend/src/routes/(app)/settings/+page.svelte +++ b/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 @@ {m.settings_appearance_title()} {m.settings_appearance_description()} - + Info: {m.settings_theme_hint()}
+ + + + +
+
+
+
+ {m.settings_reduce_motion_label()} +
+
+ {m.settings_reduce_motion_hint()} +
+
+ +
+

+ {m.settings_reduce_motion_info()} +

+