diff --git a/apps/todo/apps/web/src/lib/components/TodoToolbar.svelte b/apps/todo/apps/web/src/lib/components/TodoToolbar.svelte index 01dce8b12..8d3c89ab8 100644 --- a/apps/todo/apps/web/src/lib/components/TodoToolbar.svelte +++ b/apps/todo/apps/web/src/lib/components/TodoToolbar.svelte @@ -1,848 +1,103 @@ - + + {#snippet collapsedIcon()} + + + {/snippet} - - -
e.stopPropagation()}> -
- - - - -
+ - - {#if showQuickAddOptions || inputValue.trim()} -
- -
- - - {#if showDatePicker} -
e.stopPropagation()}> - {#each dateOptions as option} - - {/each} -
- {/if} -
- - -
- - - {#if showPriorityPicker} -
e.stopPropagation()}> - {#each PRIORITY_OPTIONS as priority} - - {/each} -
- {/if} -
- - -
- - - {#if showProjectPicker} -
e.stopPropagation()}> - - {#each projectsStore.activeProjects as project} - - {/each} -
- {/if} -
- - - -
- {/if} -
- - - - - goto('/kanban')} title="Kanban-Ansicht"> - - - - - - - - -
e.stopPropagation()}> - { - showFilterDropdown = !showFilterDropdown; - closeAllDropdowns(); - }} - active={activeFilterCount > 0} - title="Filter" + {#snippet rightActions()} + - {/each} -
- - -
-
Projekt
- -
- - {#if activeFilterCount > 0} - + + {#if isSidebarMode} + + + {:else} + + {/if} - - {/if} - - - - - - - - - - - - - - - - + + + {/snippet} + diff --git a/apps/todo/apps/web/src/lib/components/TodoToolbarContent.svelte b/apps/todo/apps/web/src/lib/components/TodoToolbarContent.svelte new file mode 100644 index 000000000..047f37c1d --- /dev/null +++ b/apps/todo/apps/web/src/lib/components/TodoToolbarContent.svelte @@ -0,0 +1,414 @@ + + + + +
+ + goto('/kanban')} title="Kanban-Ansicht"> + + + + + + {#if !vertical} + + {/if} + + +
e.stopPropagation()}> + { + showFilterDropdown = !showFilterDropdown; + }} + active={activeFilterCount > 0} + title="Filter" + > + + + + {#if activeFilterCount > 0} + {activeFilterCount} + {/if} + + + {#if showFilterDropdown} +
e.stopPropagation()}> +
+
Priorität
+
+ {#each priorities as priority} + + {/each} +
+
+ +
+
Projekt
+ +
+ + {#if activeFilterCount > 0} + + {/if} +
+ {/if} +
+ + {#if !vertical} + + {/if} + + + + + {#if !vertical} + + {/if} + + + + + + + +
+ + diff --git a/apps/todo/apps/web/src/lib/stores/navigation.ts b/apps/todo/apps/web/src/lib/stores/navigation.ts index f4072e926..d61bbd81e 100644 --- a/apps/todo/apps/web/src/lib/stores/navigation.ts +++ b/apps/todo/apps/web/src/lib/stores/navigation.ts @@ -2,3 +2,4 @@ import { writable } from 'svelte/store'; export const isSidebarMode = writable(false); export const isNavCollapsed = writable(false); +export const isToolbarCollapsed = writable(true); diff --git a/apps/todo/apps/web/src/routes/(app)/+layout.svelte b/apps/todo/apps/web/src/routes/(app)/+layout.svelte index 4b8ce2cd6..69d1e5494 100644 --- a/apps/todo/apps/web/src/routes/(app)/+layout.svelte +++ b/apps/todo/apps/web/src/routes/(app)/+layout.svelte @@ -13,7 +13,6 @@ PillNavItem, PillDropdownItem, QuickInputItem, - QuickAction, CreatePreview, } from '@manacore/shared-ui'; import { authStore } from '$lib/stores/auth.svelte'; @@ -26,7 +25,9 @@ import { isSidebarMode as sidebarModeStore, isNavCollapsed as collapsedStore, + isToolbarCollapsed as toolbarCollapsedStore, } from '$lib/stores/navigation'; + import TodoToolbar from '$lib/components/TodoToolbar.svelte'; import { THEME_DEFINITIONS, DEFAULT_THEME_VARIANTS, @@ -54,13 +55,6 @@ let { children } = $props(); - // QuickInputBar quick actions - const quickActions: QuickAction[] = [ - { id: 'kanban', label: 'Kanban', icon: 'kanban', href: '/kanban' }, - { id: 'stats', label: 'Statistik', icon: 'chart', href: '/statistics' }, - { id: 'settings', label: 'Einstellungen', icon: 'settings', href: '/settings' }, - ]; - // QuickInputBar search - search tasks async function handleSearch(query: string): Promise { if (!query.trim()) return []; @@ -116,6 +110,7 @@ let isSidebarMode = $state(false); let isCollapsed = $state(false); + let isToolbarCollapsed = $state(true); // Use theme store's isDark directly let isDark = $derived(theme.isDark); @@ -252,6 +247,16 @@ } } + function handleToolbarCollapsedChange(collapsed: boolean) { + isToolbarCollapsed = collapsed; + toolbarCollapsedStore.set(collapsed); + try { + localStorage?.setItem('todo-toolbar-collapsed', String(collapsed)); + } catch { + // localStorage not available or quota exceeded + } + } + function handleToggleTheme() { theme.toggleMode(); } @@ -332,6 +337,17 @@ // localStorage not available } + // Initialize toolbar collapsed state from localStorage + try { + const savedToolbarCollapsed = localStorage?.getItem('todo-toolbar-collapsed'); + if (savedToolbarCollapsed === 'false') { + isToolbarCollapsed = false; + toolbarCollapsedStore.set(false); + } + } catch { + // localStorage not available + } + // Register Service Worker for PWA if ('serviceWorker' in navigator) { try { @@ -436,7 +452,6 @@ + + + {/if} diff --git a/apps/todo/apps/web/src/routes/(app)/+page.svelte b/apps/todo/apps/web/src/routes/(app)/+page.svelte index 17bfcb7ab..01b88780c 100644 --- a/apps/todo/apps/web/src/routes/(app)/+page.svelte +++ b/apps/todo/apps/web/src/routes/(app)/+page.svelte @@ -8,7 +8,6 @@ import TaskList from '$lib/components/TaskList.svelte'; import CollapsibleSection from '$lib/components/CollapsibleSection.svelte'; import TaskEditModal from '$lib/components/TaskEditModal.svelte'; - import TodoToolbar from '$lib/components/TodoToolbar.svelte'; import { TaskListSkeleton } from '$lib/components/skeletons'; import type { Task, UpdateTaskInput } from '@todo/shared'; @@ -158,9 +157,6 @@

Alle deine Aufgaben auf einen Blick

- - - {#if isLoading || tasksStore.loading} {:else if tasksStore.error} diff --git a/apps/todo/apps/web/src/routes/(app)/kanban/+page.svelte b/apps/todo/apps/web/src/routes/(app)/kanban/+page.svelte index c448392fd..162f1e5ef 100644 --- a/apps/todo/apps/web/src/routes/(app)/kanban/+page.svelte +++ b/apps/todo/apps/web/src/routes/(app)/kanban/+page.svelte @@ -1,8 +1,6 @@