From 32f84678f916cb54db4d1ff681a2bf826c4b644e Mon Sep 17 00:00:00 2001 From: Till-JS <101404291+Till-JS@users.noreply.github.com> Date: Mon, 16 Feb 2026 00:07:49 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(calendar):=20unify=20view=20sw?= =?UTF-8?q?itcher=20into=20new=20ViewsBar=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add new ViewsBar component with same design as InputBar - Position ViewsBar next to InputBar (left on desktop, above on mobile) - Remove view switcher from PillNavigation prependElements - Remove PillViewSwitcher from CalendarToolbarContent - Clean up unused imports and code from layout Co-Authored-By: Claude Opus 4.5 --- .../calendar/CalendarToolbarContent.svelte | 90 -------- .../components/calendar/DateStripFab.svelte | 2 +- .../lib/components/calendar/ViewsBar.svelte | 211 ++++++++++++++++++ .../apps/web/src/routes/(app)/+layout.svelte | 96 ++------ 4 files changed, 229 insertions(+), 170 deletions(-) create mode 100644 apps/calendar/apps/web/src/lib/components/calendar/ViewsBar.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 index 7e786232d..404f27d82 100644 --- a/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbarContent.svelte +++ b/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbarContent.svelte @@ -1,12 +1,9 @@
@@ -97,18 +53,6 @@ onToggle={() => settingsStore.set('filterHoursEnabled', !settingsStore.filterHoursEnabled)} labelFormat="range" /> - - {#if !vertical} - - {/if} - - -
diff --git a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte index 3068b736b..3b4f0cf6f 100644 --- a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte +++ b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte @@ -57,14 +57,13 @@ import CalendarToolbarContent from '$lib/components/calendar/CalendarToolbarContent.svelte'; import DateStrip from '$lib/components/calendar/DateStrip.svelte'; import DateStripFab from '$lib/components/calendar/DateStripFab.svelte'; + import ViewsBar from '$lib/components/calendar/ViewsBar.svelte'; import EventContextMenu from '$lib/components/event/EventContextMenu.svelte'; - import ViewModePillContextMenu from '$lib/components/calendar/ViewModePillContextMenu.svelte'; import SettingsModal from '$lib/components/settings/SettingsModal.svelte'; import VoiceRecordButton from '$lib/components/voice/VoiceRecordButton.svelte'; import VoiceRecordingModal from '$lib/components/voice/VoiceRecordingModal.svelte'; import { voiceRecordingStore } from '$lib/stores/voice-recording.svelte'; import { eventContextMenuStore } from '$lib/stores/eventContextMenu.svelte'; - import type { CalendarViewType } from '@calendar/shared'; // App switcher items const appItems = getPillAppItems('calendar'); @@ -287,78 +286,6 @@ onChange: handleTabChange, }); - // View switcher context menu - let viewContextMenu: ViewModePillContextMenu; - - function handleViewContextMenu(x: number, y: number) { - viewContextMenu?.show(x, y); - } - - // View labels for tabs (numbers for day views, letters for others) - const viewLabels: Record = { - day: '1', - '3day': '3', - '5day': '5', - week: '7', - '10day': '10', - '14day': '14', - '30day': '30', - '60day': '60', - '90day': '90', - '365day': '365', - month: 'M', - year: 'Y', - agenda: 'L', - custom: '', // Will be set dynamically - }; - - // View titles for tooltips - const viewTitles: Record = { - day: 'Tagesansicht', - '3day': '3-Tage-Ansicht', - '5day': '5-Tage-Ansicht', - week: 'Wochenansicht', - '10day': '10-Tage-Ansicht', - '14day': '14-Tage-Ansicht', - '30day': '30-Tage-Ansicht', - '60day': '60-Tage-Ansicht', - '90day': '90-Tage-Ansicht', - '365day': '365-Tage-Ansicht', - month: 'Monatsansicht', - year: 'Jahresansicht', - agenda: 'Agenda', - custom: 'Benutzerdefiniert', - }; - - // Get enabled views from settings - let enabledViews = $derived(settingsStore.quickViewPillViews); - - // Get label for a view (dynamic for custom) - function getViewLabel(view: CalendarViewType): string { - if (view === 'custom') { - return String(settingsStore.customDayCount); - } - return viewLabels[view]; - } - - // Handle view change - function handleViewChange(id: string) { - viewStore.setViewType(id as CalendarViewType); - } - - // View switcher tab group (only shown on calendar main page) - let viewSwitcherTabGroup = $derived({ - type: 'tabs', - options: enabledViews.map((view) => ({ - id: view, - label: getViewLabel(view), - title: view === 'custom' ? `${settingsStore.customDayCount}-Tage-Ansicht` : viewTitles[view], - })), - value: viewStore.viewType, - onChange: handleViewChange, - onContextMenu: handleViewContextMenu, - }); - // Tag selector config for PillNavigation let tagSelectorConfig = $derived({ type: 'tag-selector', @@ -372,9 +299,10 @@ }); // Prepended elements (tab groups at the start of navigation) + // Note: View switcher moved to ViewsBar component let prependElements = $derived( showCalendarToolbar - ? [calendarTasksTabGroup, viewSwitcherTabGroup, { type: 'divider' }, tagSelectorConfig] + ? [calendarTasksTabGroup, { type: 'divider' }, tagSelectorConfig] : [calendarTasksTabGroup] ); @@ -640,6 +568,17 @@ {/if} {/if} + + {#if showCalendarToolbar && !settingsStore.immersiveModeEnabled} + + {/if} +
@@ -655,7 +594,9 @@ createText="Erstellen" appIcon="calendar" bottomOffset={isMobile - ? '70px' + ? showCalendarToolbar + ? 'calc(70px + 72px)' + : '70px' : showCalendarToolbar && !isToolbarCollapsed ? '140px' : '70px'} @@ -706,9 +647,6 @@ - - -