piotr/innercontext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(frontend): unify page shell and move create flows to dedicated routes

Browse source
This commit is contained in:
Piotr Oleszczyk 2026-03-10 12:25:25 +01:00
parent e20c18c2ee
commit 0253b2377d
50 changed files with 2235 additions and 1042 deletions
Download patch file Download diff file Expand all files Collapse all files

14
docs/frontend-design-cookbook.md
View file

@ -80,10 +80,12 @@ Use these wrappers before introducing route-specific structure:
- `editorial-page`: standard constrained content width for route pages.
- `editorial-hero`: top summary strip for title, subtitle, and primary actions.
- `PageHeader.svelte`: preferred reusable wrapper for page-level hero sections; use it to keep title hierarchy, backlinks, meta rows, and action placement consistent.
- `editorial-panel`: primary surface for forms, tables, and ledgers.
- `editorial-toolbar`: compact action row under hero copy.
- `editorial-backlink`: standard top-left back navigation style.
- `editorial-alert`, `editorial-alert--error`, `editorial-alert--success`, `editorial-alert--warning`, `editorial-alert--info`: feedback banners.
- `page-header-meta`, `page-header-foot`, `hero-strip`: shared secondary rows inside page headers for compact metadata and summary stats.
### Collapsible panels
@ -117,10 +119,14 @@ This matches the warm editorial aesthetic and maintains visual consistency with
These classes are already in use and should be reused:
- Lists and ledgers: `routine-ledger-row`, `products-mobile-card`, `health-entry-row`
- Group headers: `products-section-title`
- Table shell: `products-table-shell`
- Lists and ledgers: `routine-ledger-row`, `editorial-mobile-card`, `health-entry-row`
- Group headers: `editorial-section-title`
- Table shell: `editorial-table-shell`
- Compact metadata rows: `editorial-meta-strip`
- Tabs shell: `products-tabs`, `editorial-tabs`
- App shell/navigation: `app-mobile-header`, `app-drawer`, `app-nav-list`, `app-nav-link`, `app-sidebar-footer`
- Reusable locale control: `LanguageSwitcher.svelte` with `language-switcher*` classes
- Dashboard summary patterns: `dashboard-stat-strip`, `dashboard-stat-card`, `dashboard-attention-list`, `dashboard-attention-item`
- Health semantic pills: `health-kind-pill*`, `health-flag-pill*`
- Lab results utilities:
- metadata chips: `lab-results-meta-strip`, `lab-results-meta-pill`
@ -145,6 +151,7 @@ These classes are already in use and should be reused:
- In dense row-based lists, prefer `ghost` action controls; use icon-only buttons on desktop tables and short text+icon `ghost` actions on mobile cards to keep row actions subordinate to data.
- For editable data tables, open a dedicated inline edit panel above the list (instead of per-row expanded forms) and prefill it from row actions; keep users on the same filtered/paginated context after save.
- When a list is narrowed to a single entity key (for example `test_code`), display an explicit "filtered by" banner with a one-click clear action and avoid extra grouping wrappers that add no context.
- For dashboard-style summaries, prefer compact stat strips and attention rows over large decorative cards; each item should pair one strong value with one short explanatory line.
### DRY form primitives
@ -211,6 +218,7 @@ These classes are already in use and should be reused:
- Core tokens and global look: `frontend/src/app.css`
- App shell and route domain mapping: `frontend/src/routes/+layout.svelte`
- Shared page header: `frontend/src/lib/components/PageHeader.svelte`
- Route examples using the pattern:
- `frontend/src/routes/+page.svelte`
- `frontend/src/routes/products/+page.svelte`