feat: rework the desktop shell, settings, loading and error states

[AmrMsCLL]

What changed

Amr's UI pass for Strata, on graphite-ui 0.3.0 (graphite-ui#11). The lockfile changes only the graphite-ui entries.

• Desktop shell:
  • the sidebar collapses to an icon rail from a toggle in the header, and stays that way;
  • the brand and toggle line up with the sidebar;
  • every item has an icon (Agenda, Tidy, Invitations and Trash had none), and each space gets a coloured initial;
  • the phone tab bar uses matching icons.
• Refreshing without jumps:
  • while the session loads, someone who was signed in last time sees the sidebar's outline instead of a page without one;
  • skeletons wait 200 ms before appearing;
  • switching pages of a list, agenda weeks or spaces keeps the current data on screen until the next data arrives. It never carries data over between different signed-in users.
• Sensitive changes behind an action, in a modal:
  • Profile shows the email as a row with Change, which opens a modal asking for the new address and your password, and your two-step code when two-step sign-in is on;
  • Security has rows for Password and Two-step sign-in. Changing the password, turning two-step sign-in on (password, then QR code, then recovery codes), new recovery codes and turning it off each open their own modal;
  • access tokens are created from New token, and the token is shown once inside the modal;
  • export and account deletion are rows; deletion asks for proof in a modal.
• Errors:
  • action results and failures are toasts (failures have a red edge and are announced as alerts), instead of lines that appeared in the page and pushed things down;
  • sign-in, sign-up and password pages send their errors to toasts too;
  • fields keep a one-line slot, so an error under a field doesn't move the form;
  • a page or widget that fails to load shows an error panel with Try again (LoadError);
  • a crash on a page shows a "This page hit a problem" panel with Reload and Go home, instead of a blank screen (CrashBoundary, reset on navigation);
  • the 404 page is redone;
  • bare HTTP errors get plain explanations, for example 429 "Too many attempts. Wait a minute, then try again."
• Home:
  • the title uses the same page header as every other page, so it lines up (the stacked controls were pushing it down);
  • the title is the dashboard's name;
  • "New dashboard…" is now a + button that opens a modal with a name and a choice of starting layouts, showing what each contains;
  • Wall display is an icon button and Edit has a pencil;
  • widget titles are plain sentence-case labels.
• Copy clean-up:
  • lowercase monospace labels above titles that repeated the title ("settings" over "Settings", "tidy" over "Tidy") are gone, and so are those above dialog titles;
  • the "Your life, in layers." slogan is gone;
  • the landing page described features that don't exist yet (Google Calendar, notes, whiteboards, weather and news), and now lists what Strata actually does;
  • descriptions that restated a heading or an empty list are removed;
  • lowercase links and labels ("show archived items", "remove", "not tidied yet") are sentence case.

Verification

• Lint, tsc -b and vite build pass locally against the published 0.3.0, and the settings, dashboard, tokens, skeletons, routes and tasks specs were rerun against it.

• Every frontend spec file was run and passes: activity, agenda, api, dashboard, files, forms, invitations, local-data, quick-add, routes, search, settings, share, skeletons, spaces, subscriptions, tasks, tidy, tokens and two-step.

• New tests:

  • the email change modal, with validation and closing once sent;
  • the password and two-step modals, with a failure shown as an alert toast while the modal stays open;
  • retrying a page that failed to load;
  • the new-dashboard modal and its templates;
  • a list staying on screen while the next one loads;
  • the 429 explanation.

• Tests updated for the new labels and controls:

  • the dashboard Edit button and Wall display icon;
  • "Remove" and "Not tidied yet";
  • "Sign in";
  • opening the token modal before filling it in.

  They check the same behaviour as before.

• Checked in a local browser against a mock API at 1440 px: the sidebar toggle and alignment, every sidebar icon, Home, Settings and Tidy titles all at 121 px, and the header buttons rendering their icons at one height. Not checked at phone width.