SHELL-2 prototype · ui-core-micha · visual/UX spec, no behaviour change
AccountPage currently renders its sections (Profil, Sicherheit, Benutzer, Einladen, Support,
plus whatever a consuming app injects via extraTabs) behind a horizontally scrollable MUI
Tabs strip. This prototype replaces it with the grouped-list navigation pattern already
shipping in jg-ferien’s EventInfoPage: a sticky sidebar on desktop, a bottom-sheet
drawer on mobile — and, because AccountPage has no header of its own to hang a trigger
button on, a new full-width trigger bar built for this component specifically.
Colour and spacing tokens below are MUI’s stock light/dark defaults (primary #1976d2 /
#90caf9, default divider and text-alpha values), used only as placeholders inside the mockup
frames. ui-core-micha ships to 14 apps with 14 different themes — the host app’s
ThemeProvider supplies the real values at runtime, exactly as it does for every other shared
component today.
AccountPage’s section navigation: desktop sidebar, mobile drawer, and the new
mobile trigger bar.users section’s table → card switch below md.AccountPage.
The horizontal MUI Tab strip is replaced on both desktop and mobile.
It is meant to disappear entirely — that is not an omission in this prototype, it is the point
of the redesign.
On mobile, the current section name is carried by the trigger bar alone. The section-title heading that would otherwise repeat it just below is removed, not merely undrawn — do not add it back as a “missing” heading. Desktop keeps its section heading unchanged, since desktop has no trigger bar to carry that name instead.
jg-ferien’s drawer is opened from a button that lives in that app’s own page header
(MobileSectionHeaderBar). AccountPage is a bare content component — every
consuming app mounts it under its own header, and it cannot assume that header exists, has room for a
button, or is even visible when scrolled. The trigger has to live inside AccountPage’s
own content, at the very top, before anything else.
Panel 2 below shows the answer: a full-width bar, the first thing rendered on mobile, stating the current section name at 16.5px semibold with a small “Bereich” label above it for context, and a trailing chevron that is the conventional “tap to open a sheet” affordance. The whole 56px-tall bar is the tap target (well over the 44px minimum), bordered and shadowed like a raised control so it reads as tappable at a glance, not as a static heading.
Try it: the trigger in panel 2 actually opens/closes its drawer. Panel 3 is a separate, permanently-open frame kept alongside it purely for side-by-side comparison.
280px sidebar, sticky · content grid minmax(0,1fr)
jg-ferien’s pattern has a standalone “Übersicht” entry above the groups. AccountPage has no equivalent landing/overview page, so this prototype starts directly at the first group — nothing was dropped, there was nothing there to keep.
5 Ergebnisse
| E-Mail-Adresse | Name | Neu | Letzte Anmeldung | Rolle | Aktionen |
|---|---|---|---|---|---|
| selina.amrein@swisstph.ch | Selina Amrein | 07.08.2026, 14:22 | admin |
|
|
| thabo.ndlovu@swisstph.ch | Thabo Ndlovu | 05.08.2026, 09:10 | teacher |
|
|
| fatima.elidrissi@swisstph.ch | Fatima El Idrissi | 28.07.2026, 16:45 | student |
|
|
| jonas.berger@swisstph.ch | Jonas Berger | 01.08.2026, 11:03 | supervisor |
|
|
| priya.nair@swisstph.ch | Priya Nair | – | none |
|
Benutzer active, card list · tap the bar to open
5 Ergebnisse
Selina Amrein
selina.amrein@swisstph.ch
Thabo Ndlovu
thabo.ndlovu@swisstph.ch
Priya Nair
priya.nair@swisstph.ch
static reference · rounded top 18px · max-height 78dvh
plain user · no can_view_users / can_invite / support access —
the list is genuinely short, not padded out