From bf0e788cbaa792ad937eeb747fa8e2e5b4170a7a Mon Sep 17 00:00:00 2001 From: Till-JS <101404291+Till-JS@users.noreply.github.com> Date: Mon, 2 Feb 2026 19:16:56 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(todo,contacts):?= =?UTF-8?q?=20remove=20sidebar=20mode=20from=20PillNavigation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Simplify navigation by removing unused sidebar mode from both apps: Todo App: - Remove isSidebarMode state, handlers, and localStorage persistence - Remove sidebar-related CSS classes and styles - Simplify TodoToolbar to pure wrapper component Contacts App: - Remove isSidebarMode state, handlers, and localStorage persistence - Remove sidebar-related CSS from ContactsToolbar and ContactAlphabetView - Always show view-mode-pill (no longer conditional on sidebar mode) This removes ~250 lines of unused code across 5 files. --- .../src/lib/components/ContactsToolbar.svelte | 108 +++++++++--------- .../views/ContactAlphabetView.svelte | 37 +----- .../apps/web/src/routes/(app)/+layout.svelte | 73 +----------- .../web/src/lib/components/TodoToolbar.svelte | 73 +----------- .../apps/web/src/routes/(app)/+layout.svelte | 97 +--------------- 5 files changed, 66 insertions(+), 322 deletions(-) diff --git a/apps/contacts/apps/web/src/lib/components/ContactsToolbar.svelte b/apps/contacts/apps/web/src/lib/components/ContactsToolbar.svelte index c77dfca75..c01d76216 100644 --- a/apps/contacts/apps/web/src/lib/components/ContactsToolbar.svelte +++ b/apps/contacts/apps/web/src/lib/components/ContactsToolbar.svelte @@ -7,11 +7,10 @@ import type { Contact } from '$lib/api/contacts'; interface Props { - isSidebarMode?: boolean; contacts: Contact[]; } - let { isSidebarMode = false, contacts }: Props = $props(); + let { contacts }: Props = $props(); // Use store for collapsed state let isCollapsed = $derived(contactsFilterStore.isToolbarCollapsed); @@ -25,7 +24,6 @@ @@ -33,58 +31,56 @@ -{#if !isSidebarMode} -
- - - -
-{/if} +
+ + + +
diff --git a/apps/todo/apps/web/src/routes/(app)/+layout.svelte b/apps/todo/apps/web/src/routes/(app)/+layout.svelte index c2f931231..1acb64552 100644 --- a/apps/todo/apps/web/src/routes/(app)/+layout.svelte +++ b/apps/todo/apps/web/src/routes/(app)/+layout.svelte @@ -22,11 +22,7 @@ import { labelsStore } from '$lib/stores/labels.svelte'; import { tasksStore } from '$lib/stores/tasks.svelte'; import { theme } from '$lib/stores/theme'; - import { - isSidebarMode as sidebarModeStore, - isNavCollapsed as collapsedStore, - isToolbarCollapsed as toolbarCollapsedStore, - } from '$lib/stores/navigation'; + import { isToolbarCollapsed as toolbarCollapsedStore } from '$lib/stores/navigation'; import TodoToolbar from '$lib/components/TodoToolbar.svelte'; import { THEME_DEFINITIONS, @@ -106,8 +102,6 @@ }); } - let isSidebarMode = $state(false); - let isCollapsed = $state(false); let isToolbarCollapsed = $state(true); // Use theme store's isDark directly @@ -166,28 +160,10 @@ { href: '/feedback', label: 'Feedback', icon: 'chat' }, ]; - // Navigation items (base items + dynamic label items in sidebar mode, filtered by visibility settings) - const navItems = $derived.by(() => { - // Start with base items, filter out hidden ones (with fallback for guest mode) - let items = filterHiddenNavItems('todo', baseNavItems, userSettings.nav?.hiddenNavItems || {}); - - // In sidebar mode, add tags as sub-items if available - if (isSidebarMode && labelsStore.labels.length > 0) { - const tagItems: PillNavItem[] = labelsStore.labels.slice(0, 5).map((label) => ({ - href: `/tag/${label.id}`, - label: label.name, - icon: 'tag', - })); - - // Insert tag items after "Tags" nav item - const tagsIndex = items.findIndex((i) => i.href === '/tags'); - if (tagsIndex !== -1 && tagItems.length > 0) { - items = [...items]; - items.splice(tagsIndex + 1, 0, ...tagItems); - } - } - return items; - }); + // Navigation items filtered by visibility settings (with fallback for guest mode) + const navItems = $derived( + filterHiddenNavItems('todo', baseNavItems, userSettings.nav?.hiddenNavItems || {}) + ); // Navigation shortcuts (Ctrl+1-6) - use base items for consistent shortcuts const navRoutes = baseNavItems.map((item) => item.href); @@ -223,26 +199,6 @@ } } - function handleModeChange(isSidebar: boolean) { - isSidebarMode = isSidebar; - sidebarModeStore.set(isSidebar); - try { - localStorage?.setItem('todo-nav-sidebar', String(isSidebar)); - } catch { - // localStorage not available or quota exceeded - } - } - - function handleCollapsedChange(collapsed: boolean) { - isCollapsed = collapsed; - collapsedStore.set(collapsed); - try { - localStorage?.setItem('todo-nav-collapsed', String(collapsed)); - } catch { - // localStorage not available or quota exceeded - } - } - function handleToolbarCollapsedChange(collapsed: boolean) { isToolbarCollapsed = collapsed; toolbarCollapsedStore?.set(collapsed); @@ -292,28 +248,6 @@ goto(userSettings.startPage, { replaceState: true }); } - // Initialize sidebar mode from localStorage (with error handling for private browsing) - try { - const savedSidebar = localStorage?.getItem('todo-nav-sidebar'); - if (savedSidebar === 'true') { - isSidebarMode = true; - sidebarModeStore.set(true); - } - } catch { - // localStorage not available (private browsing, quota exceeded, etc.) - } - - // Initialize collapsed state from localStorage - try { - const savedCollapsed = localStorage?.getItem('todo-nav-collapsed'); - if (savedCollapsed === 'true') { - isCollapsed = true; - collapsedStore.set(true); - } - } catch { - // localStorage not available - } - // Initialize toolbar collapsed state from localStorage try { const savedToolbarCollapsed = localStorage?.getItem('todo-toolbar-collapsed'); @@ -365,10 +299,6 @@ homeRoute="/" onToggleTheme={handleToggleTheme} {isDark} - {isSidebarMode} - onModeChange={handleModeChange} - {isCollapsed} - onCollapsedChange={handleCollapsedChange} desktopPosition={userSettings.nav?.desktopPosition || 'bottom'} showThemeToggle={true} showThemeVariants={true} @@ -410,10 +340,8 @@ {/if} @@ -424,12 +352,7 @@ onToggle={() => todoSettings.toggleImmersiveMode()} /> -
+