Show search preview when offline; add SurfaceOverlay, layout primitives and UI primitives

[theokeist]

Motivation

• Ensure the Search page renders useful preview data when no client session exists and clarify the hint copy for preview mode.
• Introduce a lightweight decorative overlay and apply it broadly to improve surface consistency and visual depth across cards, buttons, and navigation.
• Replace the old three-pane SplitShell with small layout primitives to enable resizable/collapsible sidebars and add a set of UI primitives for iterative component/layout work.

Description

• Return mock accounts, statuses, and hashtags from apps/web/src/pages/SearchPage.tsx when client is absent and update the search hint to "Showing preview results (connect to search)." to indicate preview mode.
• Add SurfaceOverlay component (apps/web/src/components/SurfaceOverlay.tsx) and apply relative overflow-hidden + overlays across many pages/components (Search, Me, Login, Register, Timeline, LeftNav, Extensions panel, etc.) for consistent layered visuals.
• Introduce layout primitives Container, Row, and Column (packages/ui/src/layout/Layout.tsx) and update apps/web/src/app/App.tsx to use these primitives with resizable/collapsible left/right panes and icon toggles, plus add demo pages ComponentsPage, LayoutPage, and LayoutPrimitivesPage under apps/web/src/pages/.
• Expand @ghostodon/ui exports and add a set of new primitives (ActionPanel, AvatarButton, DateField, InfoCard, MediaCard, InputField, Skeleton, StatCard, TextAreaField, Typography, UploadButton, UserCard) under packages/ui/src/primitives/, and update packages/ui/src/mastodon/StatusCard.tsx to render decorative overlay layers while keeping interactivity.
• Add theme/style tokens and visual rules in apps/web/src/styles/index.css and adjust apps/web/vite.config.ts to exclude @ghostodon/ui from optimized deps; update apps/web/src/components/LeftNav.tsx to add new nav entries and use overlays; mark OAuth PKCE as wip in apps/web/src/stages/stages.ts and add a note about resizable panes.

Testing

• Built TypeScript for core with pnpm --filter @ghostodon/core build, which completed successfully.
• Launched the dev server with pnpm --filter web exec -- vite --host 0.0.0.0 --port 5173, which started successfully.
• Ran a Playwright-driven smoke script that navigated to /search, submitted a query and captured a screenshot of the preview results, and the script completed and produced artifacts/ghostodon-search-preview.png.
• No automated unit tests were added as part of this change; visual and manual validation was performed via the dev server and the Playwright script.

---

Codex Task

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 63d97e7b4e

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Escape preview seed before inserting into HTML

In offline preview mode, the mock noteHtml (and similarly contentHtml) interpolates seed directly into an HTML string. Because seed is derived from submitted.trim() and later rendered via dangerouslySetInnerHTML (e.g., in SearchPage and StatusCard), a user can enter HTML/JS in the search box and have it injected into the DOM. This is a client-side XSS risk that only occurs when no client session exists and the preview path is used, but it still allows untrusted input to execute in the app. Consider escaping seed (or rendering as text) before constructing these HTML strings.

Useful? React with 👍 / 👎.