Zum Hauptinhalt springen

Desk mobile chrome (tab strip + pill + drawers)

Generated from pattern-library/registry.json — do not edit by hand; change the registry and run bun run patterns:build.

Index card — the docs below are the canonical explanation; deep-tier pattern pages additionally carry invariants and emulation notes.

Category: Desk Workspace · Tier: light · Maturity: proven (verified 2026-08-20 @ 1a130d67) · Risk: low — frontend chrome over existing workspace state

Phone chrome for the dock workspace: a scrollable top tab strip of open panel instances, a bottom-right controls pill (commands sheet + panels drawer) sitting left of the app FAB via slot tokens, and a soft-keyboard watcher that hides floating chrome while typing.

When to use: Use when a desktop multi-panel workspace must work on phones without forking its layout state — the chrome only focuses, opens, and closes panels on the persisted desktop tree.

Docs

  • docs/blueprint/desk/README.md — § Mobile Chrome — control mapping, menu parity, keyboard hiding (GitHub · GitLab)

Code

  • src/lib/components/desk/DockMobileTabs.svelte — Open-instance tab strip; taps go through focusPanel (GitHub · GitLab)
  • src/lib/components/desk/dock-mobile.state.svelte.ts — Context-scoped surface discriminator ('panels' | 'commands' | null) + focusSeq auto-close (GitHub · GitLab)
  • src/lib/state/visual-viewport.svelte.ts — rAF-coalesced visualViewport watcher with hysteresis → --keyboard-inset + data-keyboard on (GitHub · GitLab)

Tests

  • src/lib/state/visual-viewport.svelte.test.ts (GitHub · GitLab)

Proof

  • /desk (app route, no showcase)

Depends on


Machine-readable record: desk-mobile-chrome in pattern-library/registry.json.

← Back to Pattern Library

Geht dieses Pattern noch besser? Sag uns, wie.

Feedback geben