This document records the current frontend layout scaffold so migration work can compare the existing implementation with the target architecture. It is intentionally separate from the architecture document, which describes the desired steady-state system and shared vocabulary.
Current Package Map
frontend/
apps/
desktop/
src/root.tsx Desktop React root and platform providers
src/pages/main.tsx Desktop outer shell: titlebar, sidebar, page panel, assistant panel
src/pages/desktop-resource.tsx Desktop document route wrapper
src/components/sidebar*.tsx Desktop sidebar implementation
src/components/titlebar*.tsx Desktop titlebar/window chrome
src/sidebar-context.tsx Desktop sidebar state and persistence
web/
app/root.tsx Remix root document and providers
app/routes/$.tsx Web document/site route loader and route mapping
app/web-resource-page.tsx Web document route wrapper
app/web-feed-page.tsx Web feed route wrapper
app/web-utils.tsx Web route shell helpers/header actions/site banner
packages/
ui/
src/resource-page-common.tsx Shared document/resource page composition
src/panel-layout.tsx Shared main/right-panel layout for resource pages
src/page-layout.tsx Shared page layout helpers
src/components/* Current UI wrappers, mostly shadcn/Radix-style
shared/
src/routes.ts Shared route schemas and panel route types
src/utils/navigation.ts Navigation context and route hooks
src/routing.tsx Universal app context
Current Desktop Shell
Desktop shell composition lives primarily in frontend/apps/desktop/src/pages/main.tsx.
Current responsibilities:
Renders the desktop titlebar.
Renders the desktop sidebar through AppSidebar.
Renders the current route page component.
Wraps sidebar/page content in react-resizable-panels.
Renders the footer/status area.
Renders the assistant app panel as a separate resizable panel.
Routes desktop navigation keys to lazy page components.
Current sidebar behavior lives across:
frontend/apps/desktop/src/components/sidebar.tsx
frontend/apps/desktop/src/components/sidebar-base.tsx
frontend/apps/desktop/src/sidebar-context.tsx
The sidebar uses react-resizable-panels and imperative panel handles for collapse/expand/resize behavior.
Current Web Shell
Web shell composition lives across Remix root and route files.
Current responsibilities:
frontend/apps/web/app/root.tsx owns the HTML document, root providers, global styles, and environment injection.
frontend/apps/web/app/routes/$.tsx owns document/site route loading and maps URL terms into shared route state.
frontend/apps/web/app/web-utils.tsx provides WebSitePageShell, site host banners, header actions, and web menu items.
frontend/apps/web/app/web-resource-page.tsx wraps shared resource content with web-specific providers and callbacks.
Web does not render the desktop sidebar, titlebar, footer, or assistant app panel.
Current Shared Resource Page
The primary shared layout surface is frontend/packages/ui/src/resource-page-common.tsx.
It currently owns:
Shared document/resource page rendering.
Active view selection for content, activity, comments, directory, collaborators, site profile, and all documents.
Document tools and route action placement.
Main document scroll area.
Mobile panel sheet behavior.
Desktop-class main/right-panel composition via PanelLayout.
Panel content rendering for comments, activity, directory, collaborators, options, and versions.
Desktop and web both call ResourcePage from platform-specific wrappers:
Desktop: frontend/apps/desktop/src/pages/desktop-resource.tsx
Web: frontend/apps/web/app/web-resource-page.tsx
Current Right Panel Implementation
The current shared right panel is implemented in frontend/packages/ui/src/panel-layout.tsx.
Current behavior:
Uses react-resizable-panels directly.
Renders a main panel and optional accessory panel.
Opens the accessory panel at a default pixel-derived percentage.
Caps panel size with percentage min/max values.
Accepts optional width storage and controlled width callbacks.
Renders a panel header with title, close button, and activity filter controls.
Current panel titles are derived from route panel keys in the panel layout component.
Current Resizable Panel Usage
react-resizable-panels is used in several places:
frontend/packages/ui/src/panel-layout.tsx for shared resource right panels.
frontend/apps/desktop/src/pages/main.tsx for desktop sidebar/page and assistant panel splits.
frontend/apps/desktop/src/components/sidebar-base.tsx for desktop sidebar panel behavior.
frontend/apps/desktop/src/pages/contact-page.tsx for contact-page layout.
The current implementation exposes imperative panel handles in some desktop shell code.
Current UI Primitive State
Current UI wrappers live mainly in frontend/packages/ui/src/components and frontend/packages/ui/src.
Current primitive dependencies include:
shadcn-style local wrappers.
Radix packages for dialog, dropdown menu, popover, scroll area, select, tabs, tooltip, and related primitives.
Ariakit in selected complex UI, such as collaborator tag/combobox patterns.
React Aria is not part of the current dependency set.
Primitive migration is not part of the app/layout scaffold migration.
Current Gaps Against Target Architecture
The main known gaps are:
The target AppFrame and RouteFrame names are not yet explicit public concepts.
ResourcePage and PanelLayout currently carry most of the shared route-frame behavior.
PanelLayout imports react-resizable-panels directly instead of using Seed-owned resizable primitives.
Desktop shell resizable behavior uses imperative panel handles directly.
Some layout language uses generic panel terminology where the target architecture distinguishes RightPanel, AppPanel, and ResizablePanel.
Current architecture and migration knowledge is spread across code and plans rather than a stable vocabulary document.
Current Strengths To Preserve
Migration work should preserve these existing strengths:
Desktop and web already share ResourcePage for document/resource routes.
Panel identity is already represented in shared route state for document panels.
Desktop and web wrappers already inject platform-specific callbacks into shared UI.
Right-panel content is already feature-owned and rendered through a shared shell.
The codebase already has tests around several shared UI/page decisions.
How To Use This Inventory
Use this document when planning migration steps or reviewing code that still follows the pre-target structure.
Use docs/architecture/frontend-app-layout-scaffold.md when naming concepts, designing new layout APIs, or deciding where new layout responsibilities belong.
Do you like what you are reading? Subscribe to receive updates.
Unsubscribe anytime