From 81f77c424c7d5412532104742e845bb9ed58fb7c Mon Sep 17 00:00:00 2001 From: Till-JS <101404291+Till-JS@users.noreply.github.com> Date: Fri, 12 Dec 2025 13:13:45 +0100 Subject: [PATCH] feat(calendar): improve navigation layout controls and sidebar integration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add layout control icons (sidebar/bottom-bar) for better UX - Position FABs on right side for consistent minimization direction - Fix app switcher dropdown direction (opens up when nav at bottom) - Add isToolbarCollapsed store for toolbar state management - Create CalendarToolbarContent component for reusable toolbar elements - Improve sidebar toolbar integration with proper vertical layout - Hide PillViewSwitcher sliding indicator in vertical mode - Add scrollbar to sidebar toolbar content - Ensure all toolbar buttons are full-width and left-aligned in sidebar 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- .../calendar/CalendarToolbarContent.svelte | 195 ++++++++++++++++++ .../apps/web/src/lib/stores/navigation.ts | 1 + .../src/navigation/PillNavigation.svelte | 58 +++++- .../src/navigation/PillToolbar.svelte | 1 + .../shared-ui/src/quick-input/InputBar.svelte | 16 +- 5 files changed, 261 insertions(+), 10 deletions(-) create mode 100644 apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbarContent.svelte diff --git a/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbarContent.svelte b/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbarContent.svelte new file mode 100644 index 000000000..dd5d4461d --- /dev/null +++ b/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbarContent.svelte @@ -0,0 +1,195 @@ + + +
+ + + + {#if !vertical} + + {/if} + + + settingsStore.set('showOnlyWeekdays', !settingsStore.showOnlyWeekdays)} + active={settingsStore.showOnlyWeekdays} + title="Nur Wochentage anzeigen (Mo-Fr)" + > + Mo-Fr + + + + settingsStore.set('filterHoursEnabled', !settingsStore.filterHoursEnabled)} + labelFormat="range" + /> + + {#if !vertical} + + {/if} + + + +
+ + diff --git a/apps/calendar/apps/web/src/lib/stores/navigation.ts b/apps/calendar/apps/web/src/lib/stores/navigation.ts index f4072e926..fb8b2b973 100644 --- a/apps/calendar/apps/web/src/lib/stores/navigation.ts +++ b/apps/calendar/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(false); diff --git a/packages/shared-ui/src/navigation/PillNavigation.svelte b/packages/shared-ui/src/navigation/PillNavigation.svelte index 204d93622..787436eb6 100644 --- a/packages/shared-ui/src/navigation/PillNavigation.svelte +++ b/packages/shared-ui/src/navigation/PillNavigation.svelte @@ -1191,37 +1191,85 @@ flex-direction: column; align-items: stretch; gap: 0.5rem; + width: 100%; } + /* All buttons in sidebar toolbar - full width, left aligned */ .sidebar-toolbar-content :global(.pill-toolbar-btn), - .sidebar-toolbar-content :global(.pill-dropdown .trigger-button) { + .sidebar-toolbar-content :global(.pill-dropdown .trigger-button), + .sidebar-toolbar-content :global(button) { width: 100%; justify-content: flex-start; + text-align: left; background: transparent; border: 1px solid transparent; box-shadow: none; } .sidebar-toolbar-content :global(.pill-toolbar-btn:hover), - .sidebar-toolbar-content :global(.pill-dropdown .trigger-button:hover) { + .sidebar-toolbar-content :global(.pill-dropdown .trigger-button:hover), + .sidebar-toolbar-content :global(button:hover) { background: rgba(0, 0, 0, 0.05); } :global(.dark) .sidebar-toolbar-content :global(.pill-toolbar-btn:hover), - :global(.dark) .sidebar-toolbar-content :global(.pill-dropdown .trigger-button:hover) { + :global(.dark) .sidebar-toolbar-content :global(.pill-dropdown .trigger-button:hover), + :global(.dark) .sidebar-toolbar-content :global(button:hover) { background: rgba(255, 255, 255, 0.1); } - /* Style for PillViewSwitcher in sidebar */ + /* Style for PillViewSwitcher in sidebar - vertical layout */ .sidebar-toolbar-content :global(.pill-view-switcher) { flex-direction: column; gap: 0.25rem; + width: 100%; + padding: 0; + background: transparent; + border: none; + box-shadow: none; } - .sidebar-toolbar-content :global(.pill-view-switcher .view-option) { + /* Hide the sliding indicator in vertical mode */ + .sidebar-toolbar-content :global(.pill-view-switcher .sliding-indicator) { + display: none; + } + + .sidebar-toolbar-content :global(.pill-view-switcher .switcher-btn) { width: 100%; justify-content: flex-start; + padding: 0.5rem 0.875rem; border-radius: 9999px; + background: transparent; + border: 1px solid transparent; + } + + .sidebar-toolbar-content :global(.pill-view-switcher .switcher-btn:hover) { + background: rgba(0, 0, 0, 0.05); + } + + :global(.dark) .sidebar-toolbar-content :global(.pill-view-switcher .switcher-btn:hover) { + background: rgba(255, 255, 255, 0.1); + } + + .sidebar-toolbar-content :global(.pill-view-switcher .switcher-btn.active) { + background: color-mix(in srgb, var(--pill-primary-color, #3b82f6) 15%, transparent 85%); + border-color: color-mix(in srgb, var(--pill-primary-color, #3b82f6) 25%, transparent 75%); + } + + :global(.dark) .sidebar-toolbar-content :global(.pill-view-switcher .switcher-btn.active) { + background: color-mix(in srgb, var(--pill-primary-color, #3b82f6) 25%, transparent 75%); + border-color: color-mix(in srgb, var(--pill-primary-color, #3b82f6) 35%, transparent 65%); + } + + /* PillTimeRangeSelector in sidebar */ + .sidebar-toolbar-content :global(.pill-time-range-selector), + .sidebar-toolbar-content :global(.pill-dropdown) { + width: 100%; + } + + /* PillCalendarSelector in sidebar */ + .sidebar-toolbar-content :global(.calendar-selector) { + width: 100%; } /* Mobile: Sidebar container adjustments */ diff --git a/packages/shared-ui/src/navigation/PillToolbar.svelte b/packages/shared-ui/src/navigation/PillToolbar.svelte index f497d5cab..e4388b9ed 100644 --- a/packages/shared-ui/src/navigation/PillToolbar.svelte +++ b/packages/shared-ui/src/navigation/PillToolbar.svelte @@ -50,6 +50,7 @@ .pill-toolbar.position-bottom { top: auto; bottom: var(--toolbar-bottom-offset, 70px); + transition: bottom 0.3s ease; } /* Mobile: always position above bottom nav */ diff --git a/packages/shared-ui/src/quick-input/InputBar.svelte b/packages/shared-ui/src/quick-input/InputBar.svelte index 2d40e54f0..36a1da80d 100644 --- a/packages/shared-ui/src/quick-input/InputBar.svelte +++ b/packages/shared-ui/src/quick-input/InputBar.svelte @@ -57,6 +57,8 @@ appIcon?: string; primaryColor?: string; autoFocus?: boolean; + /** Bottom offset from viewport bottom (default: '70px') */ + bottomOffset?: string; } let { @@ -72,6 +74,7 @@ appIcon = 'search', primaryColor = '#8b5cf6', autoFocus = true, + bottomOffset = '70px', }: Props = $props(); let searchQuery = $state(''); @@ -239,7 +242,10 @@ } -
+
{#if showPanel}
@@ -411,15 +417,15 @@