From 681136266b7ba35c41f4c448f5ea2aed02587864 Mon Sep 17 00:00:00 2001 From: Till JS Date: Wed, 15 Apr 2026 20:37:03 +0200 Subject: [PATCH] refactor(workbench): drop per-card height and free-form resize MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Height was practically unused — most WorkbenchSceneApp rows had heightPx: undefined and scrolled internally, and the few explicit values nobody ever revisited were just noise in the sync ledger. Same goes for pixel-precise drag: users would produce widths like 823px and then never touch them again. Both paths come out in favour of a fixed set of five width presets (next commit) that guarantee cards sit on sensible sizes without a decision per card. - types/workbench-scenes: heightPx removed from WorkbenchSceneApp - page-carousel/types: heightPx removed from CarouselPage - stores/workbench-scenes: resizeApp(appId, widthPx) loses its height param; patchScene allowlist no longer lists heightPx. Existing Dexie rows with heightPx set simply stop being read — the field ages out the next time the row is written. - PageCarousel: placeholder renders width-only; comment updated - AppPage: heightPx prop + onResize height param gone - +page.svelte: carouselPages no longer carries heightPx, handler signature narrowed to (id, widthPx) This commit removes the data; the next commit rewires PageShell's UI so the drag handle is replaced by the five-preset picker. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../components/page-carousel/PageCarousel.svelte | 15 +++++++-------- .../web/src/lib/components/page-carousel/types.ts | 1 - .../src/lib/components/workbench/AppPage.svelte | 5 +---- .../web/src/lib/stores/workbench-scenes.svelte.ts | 8 ++------ .../apps/web/src/lib/types/workbench-scenes.ts | 2 +- apps/mana/apps/web/src/routes/(app)/+page.svelte | 8 +++----- 6 files changed, 14 insertions(+), 25 deletions(-) diff --git a/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte b/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte index 8a919624b..5a399829a 100644 --- a/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte +++ b/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte @@ -119,9 +119,7 @@ {:else} {/if} @@ -179,11 +177,12 @@ align-items: center; } /* Sized stand-in for a not-yet-mounted card. Matches the card's - widthPx/heightPx so scroll position and the surrounding flex - layout stay stable while the IntersectionObserver decides which - cards to mount. Falls back to 60vh height when heightPx is - absent (the same minimum the empty state uses), which keeps the - track from collapsing on initial paint. */ + widthPx so scroll position and the surrounding flex layout stay + stable while the IntersectionObserver decides which cards to + mount. Height falls back to 60vh (the same minimum the empty + state uses), which keeps the track from collapsing on initial + paint. Card bodies scroll internally — per-card heights were + dropped in favour of a single viewport-height policy. */ .page-placeholder { min-height: 60vh; border-radius: 1.25rem; diff --git a/apps/mana/apps/web/src/lib/components/page-carousel/types.ts b/apps/mana/apps/web/src/lib/components/page-carousel/types.ts index 69b9cf039..868f9e73a 100644 --- a/apps/mana/apps/web/src/lib/components/page-carousel/types.ts +++ b/apps/mana/apps/web/src/lib/components/page-carousel/types.ts @@ -4,7 +4,6 @@ export interface CarouselPage { id: string; maximized?: boolean; widthPx: number; - heightPx?: number; title: string; color: string; icon?: Component; diff --git a/apps/mana/apps/web/src/lib/components/workbench/AppPage.svelte b/apps/mana/apps/web/src/lib/components/workbench/AppPage.svelte index 90cbf3181..eb34a9a5b 100644 --- a/apps/mana/apps/web/src/lib/components/workbench/AppPage.svelte +++ b/apps/mana/apps/web/src/lib/components/workbench/AppPage.svelte @@ -15,11 +15,10 @@ interface Props { appId: string; widthPx: number; - heightPx?: number; maximized?: boolean; onClose: () => void; onMaximize?: () => void; - onResize?: (widthPx: number, heightPx?: number) => void; + onResize?: (widthPx: number) => void; onMoveLeft?: () => void; onMoveRight?: () => void; onContextMenu?: (e: MouseEvent) => void; @@ -28,7 +27,6 @@ let { appId, widthPx, - heightPx, maximized = false, onClose, onMaximize, @@ -296,7 +294,6 @@ - apps.map((a) => - a.appId === appId ? { ...a, widthPx, ...(heightPx !== undefined ? { heightPx } : {}) } : a - ) - ); + async resizeApp(appId: string, widthPx: number) { + await patchActiveScene((apps) => apps.map((a) => (a.appId === appId ? { ...a, widthPx } : a))); }, async moveAppLeft(appId: string) { diff --git a/apps/mana/apps/web/src/lib/types/workbench-scenes.ts b/apps/mana/apps/web/src/lib/types/workbench-scenes.ts index 564c4d021..04aaf7d44 100644 --- a/apps/mana/apps/web/src/lib/types/workbench-scenes.ts +++ b/apps/mana/apps/web/src/lib/types/workbench-scenes.ts @@ -17,8 +17,8 @@ import type { WallpaperConfig } from '@mana/shared-theme'; export interface WorkbenchSceneApp { appId: string; maximized?: boolean; + /** Width preset in pixels. See PAGE_WIDTH_PRESETS for allowed values. */ widthPx?: number; - heightPx?: number; } /** A user-defined named layout of the workbench. */ diff --git a/apps/mana/apps/web/src/routes/(app)/+page.svelte b/apps/mana/apps/web/src/routes/(app)/+page.svelte index a7e82b0f0..aec8d127b 100644 --- a/apps/mana/apps/web/src/routes/(app)/+page.svelte +++ b/apps/mana/apps/web/src/routes/(app)/+page.svelte @@ -106,7 +106,6 @@ id: a.appId, maximized: a.maximized, widthPx: a.widthPx ?? DEFAULT_WIDTH, - heightPx: a.heightPx, title: appTitles.get(a.appId) ?? a.appId, color: entry?.color ?? '#6B7280', icon: entry?.icon, @@ -192,8 +191,8 @@ function handleMaximizeApp(id: string) { workbenchScenesStore.toggleMaximizeApp(id); } - function handleResize(id: string, widthPx: number, heightPx?: number) { - workbenchScenesStore.resizeApp(id, widthPx, heightPx); + function handleResize(id: string, widthPx: number) { + workbenchScenesStore.resizeApp(id, widthPx); } function handleMoveLeft(id: string) { workbenchScenesStore.moveAppLeft(id); @@ -329,11 +328,10 @@ handleRemoveApp(p.id)} onMaximize={() => handleMaximizeApp(p.id)} - onResize={(w, h) => handleResize(p.id, w, h)} + onResize={(w) => handleResize(p.id, w)} onMoveLeft={idx > 0 ? () => handleMoveLeft(p.id) : undefined} onMoveRight={idx < openApps.length - 1 ? () => handleMoveRight(p.id) : undefined} onContextMenu={(e) => handleCardContextMenu(e, p.id, idx)}