Skip to content

feat: add a collapsible sidebar, page header, error state and delayed skeletons - #11

Merged
AmrMsCLL merged 1 commit into
mainfrom
feat/collapsible-shell
Oct 4, 2026
Merged

AmrMsCLL merged 1 commit into
mainfrom
feat/collapsible-shell

Conversation

@AmrMsCLL

@AmrMsCLL AmrMsCLL commented Oct 4, 2026

Copy link
Copy Markdown
Member

What changed

Shared pieces for the Strata UI pass Amr asked for. Every change is additive or optional, so graphite-tracker keeps working on 0.2.1 and can upgrade when it wants.

  • Collapsible sidebar:
    • with a sidebar, the header gets a toggle on the left (aria-expanded, aria-controls), and the brand and toggle line up with the sidebar's icons;
    • collapsed, the sidebar is a 68 px icon rail: names move to title and aria-label, badges become a dot, and section labels become a divider;
    • the choice is remembered per browser (graphite-sidebar-collapsed); if storage is blocked it just isn't remembered;
    • useShell() exposes the state.
  • Sidebar items:
    • icon now takes an IconName or any node, so apps can pass a coloured initial;
    • an item without an icon shows its initial, so the collapsed rail never has gaps;
    • loading draws skeleton rows in the sidebar's shape, so a page refresh doesn't make the layout jump when the session arrives.
  • Icons: alert, calendar, check, folder, key, lock, mail, monitor, panel, pencil, plus, refresh, repeat, settings, shield, sparkles, trash and x.
  • PageHeader: a title with optional label, description and actions, using a new margin-free page-heading. Every page title lands at the same height whether or not it has actions.
  • ErrorState: an error panel with an icon, message and "Try again".
  • Loading: Placeholder, and so every skeleton, stays invisible for 200 ms (placeholderDelayMs) and then fades in. Quick loads no longer flash a skeleton, and the space is held so nothing jumps. useDelayed is exported.
  • Messages that don't push things around:
    • every text field keeps a one-line slot under it, so an error appearing never shifts the form;
    • error toasts (tone: 'error') get a red edge, are announced as alerts, and no longer cut long messages short.
  • Smaller changes:
    • Dialog and ConfirmDialog no longer require an eyebrow, and the close button is an icon;
    • .primary-button and .secondary-button are inline-flex with a gap, so an icon and label sit together without extra classes;
    • new .panel-rows, .choice-card and .tag-mark styles;
    • sidebar section labels are sentence case rather than lowercase monospace.
  • The preview page shows the page header and error state.

Verification

  • npm run lint and npm run build pass.
  • test/shell.spec.tsx is new. It covers collapsing from the header with names kept for screen readers and the choice remembered, starting collapsed, the loading sidebar, the 200 ms skeleton delay, PageHeader, the ErrorState retry and error toasts.
  • fields, dialog, workspace and feedback specs pass unchanged.
  • I checked it inside Strata in a local browser: the brand and toggle line up with the sidebar icons, the toggle switches state, and page titles share one height.

Publishing as 0.3.0 needs a version bump and a v0.3.0 tag, which I haven't done.

@github-actions github-actions Bot added the size/xl Over 600 changed lines, excluding lockfiles label Oct 4, 2026
@AmrMsCLL
AmrMsCLL merged commit 2c8ebae into main Oct 4, 2026
4 checks passed
@AmrMsCLL
AmrMsCLL deleted the feat/collapsible-shell branch October 4, 2026 15:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size/xl Over 600 changed lines, excluding lockfiles

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant