From 1395291b49a674617453794c4cdb187f546a7e39 Mon Sep 17 00:00:00 2001 From: Till-JS <101404291+Till-JS@users.noreply.github.com> Date: Mon, 15 Dec 2025 02:35:35 +0100 Subject: [PATCH] feat(calendar): combine calendar/tasks pill with sidebar toggle and mobile splitscreen MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Combine separate Kalender and Aufgaben pills into single tab group - Add prependElements prop to PillNavigation for tab groups at start - Clicking Aufgaben tab toggles todo sidebar instead of navigating - Remove separate /tasks route (no longer needed) - Implement 50/50 splitscreen layout on mobile (calendar top, todos bottom) - Add proper flex container hierarchy for mobile layout - Make TodoSidebarSection fill container on mobile with clean edges - Add calendar and check-square icons to PillTabGroup - Export PillTabGroupConfig type from shared-ui 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- .../calendar/TodoSidebarSection.svelte | 19 + .../components/calendar/ViewCarousel.svelte | 22 + .../apps/web/src/routes/(app)/+layout.svelte | 218 +++++++- .../apps/web/src/routes/(app)/+page.svelte | 128 ++++- .../web/src/routes/(app)/tasks/+page.svelte | 480 ------------------ packages/shared-ui/src/index.ts | 1 + .../src/navigation/PillNavigation.svelte | 40 ++ .../src/navigation/PillTabGroup.svelte | 17 +- packages/shared-ui/src/navigation/types.ts | 6 + 9 files changed, 420 insertions(+), 511 deletions(-) delete mode 100644 apps/calendar/apps/web/src/routes/(app)/tasks/+page.svelte diff --git a/apps/calendar/apps/web/src/lib/components/calendar/TodoSidebarSection.svelte b/apps/calendar/apps/web/src/lib/components/calendar/TodoSidebarSection.svelte index 429915e86..20708f2e2 100644 --- a/apps/calendar/apps/web/src/lib/components/calendar/TodoSidebarSection.svelte +++ b/apps/calendar/apps/web/src/lib/components/calendar/TodoSidebarSection.svelte @@ -158,6 +158,18 @@ border-radius: var(--radius-lg); border: 1px solid hsl(var(--color-border)); overflow: hidden; + display: flex; + flex-direction: column; + height: 100%; + } + + /* Mobile: Full-bleed ohne Rundungen */ + @media (max-width: 768px) { + .todo-sidebar-section { + border-radius: 0; + border: none; + border-top: 1px solid hsl(var(--color-border)); + } } .section-header { @@ -240,12 +252,18 @@ .section-content { padding: 0 0.5rem 0.5rem; + flex: 1; + overflow-y: auto; + min-height: 0; + display: flex; + flex-direction: column; } .todo-list { display: flex; flex-direction: column; gap: 0.25rem; + flex: 1; } .service-unavailable, @@ -258,6 +276,7 @@ padding: 1.5rem 1rem; color: hsl(var(--color-muted-foreground)); font-size: 0.8125rem; + flex: 1; } .service-unavailable { diff --git a/apps/calendar/apps/web/src/lib/components/calendar/ViewCarousel.svelte b/apps/calendar/apps/web/src/lib/components/calendar/ViewCarousel.svelte index f001fbb24..bad66dee0 100644 --- a/apps/calendar/apps/web/src/lib/components/calendar/ViewCarousel.svelte +++ b/apps/calendar/apps/web/src/lib/components/calendar/ViewCarousel.svelte @@ -1,6 +1,7 @@ - +
{#if showCalendarToolbar} {#if settingsStore.dateStripCollapsed} - + {:else} {/if} @@ -436,6 +554,7 @@ @@ -467,13 +586,18 @@ onParseCreate={handleParseCreate} createText="Erstellen" appIcon="calendar" - bottomOffset={isSidebarMode - ? '0px' - : showCalendarToolbar && !isToolbarCollapsed - ? '140px' - : '70px'} + bottomOffset={isMobile + ? '70px' + : isSidebarMode + ? '0px' + : showCalendarToolbar && !isToolbarCollapsed + ? '140px' + : '70px'} hasFabRight={showCalendarToolbar && !isSidebarMode} - hasFabLeft={showCalendarToolbar && !isSidebarMode && settingsStore.dateStripCollapsed} + hasFabLeft={!isMobile && + showCalendarToolbar && + !isSidebarMode && + settingsStore.dateStripCollapsed} defaultOptions={calendarOptions} selectedDefaultId={selectedDefaultCalendarId} defaultOptionLabel="Standard-Kalender" @@ -487,6 +611,9 @@ + + + @@ -497,6 +624,15 @@ min-height: 100vh; } + /* Mobile: Fixed viewport, no scroll */ + @media (max-width: 768px) { + .layout-container { + height: 100vh; + max-height: 100vh; + overflow: hidden; + } + } + .main-content { transition: all 300ms ease; position: relative; @@ -517,20 +653,36 @@ } @media (max-width: 768px) { - /* On mobile, toolbars are at bottom, extra padding at bottom instead */ + /* On mobile, fixed height layout - no page scroll */ .main-content { - padding-bottom: calc(150px + env(safe-area-inset-bottom)); /* PillNav + QuickInputBar */ + height: calc(100vh - 70px); /* Full height minus bottom nav */ + overflow: hidden; + padding-bottom: 0; + display: flex; + flex-direction: column; } .main-content.has-toolbar { - padding-bottom: calc( - 200px + env(safe-area-inset-bottom) - ); /* DateStrip + BottomNav + QuickInputBar */ + height: calc(100vh - 70px); + padding-bottom: 0; } .main-content.floating-mode { padding-top: 0; /* No top padding on mobile - everything is at bottom */ } } + /* Mobile: Fixed height, internal scrolling only */ + @media (max-width: 640px) { + .main-content { + height: calc(100vh - 70px); + overflow: hidden; + padding-bottom: 0; + } + .main-content.has-toolbar { + height: calc(100vh - 70px); + padding-bottom: 0; + } + } + .main-content.sidebar-mode { padding-left: 180px; } @@ -544,6 +696,17 @@ z-index: 0; } + /* Mobile: no padding, full height */ + @media (max-width: 768px) { + .content-wrapper { + padding: 0; + height: 100%; + overflow: hidden; + display: flex; + flex-direction: column; + } + } + @media (min-width: 640px) { .content-wrapper { padding: 1.5rem; @@ -595,4 +758,19 @@ margin-right: auto; } } + + /* Mobile: InputBar in its own row (above PillNav), Settings FAB stays next to InputBar */ + @media (max-width: 640px) { + /* InputBar takes all available space up to the FAB */ + :global(.quick-input-bar.has-fab-right .input-container) { + max-width: none; + width: 100%; + margin: 0; + } + + :global(.quick-input-bar.has-fab-right) { + padding-left: 1rem; + padding-right: calc(54px + 1rem + 8px); /* FAB width + margin + gap */ + } + } diff --git a/apps/calendar/apps/web/src/routes/(app)/+page.svelte b/apps/calendar/apps/web/src/routes/(app)/+page.svelte index a1a5c197a..fc95ee9b2 100644 --- a/apps/calendar/apps/web/src/routes/(app)/+page.svelte +++ b/apps/calendar/apps/web/src/routes/(app)/+page.svelte @@ -99,8 +99,8 @@
- -