Make the app an installable PWA with phone layout and Web Push

Add a generated manifest, icon set, offline page and service worker that never caches authenticated HTML, plus install and update UI. Turn the rail into a drawer below md with container-query internals, dvh and safe-area handling, and reconnect the socket after visibility/network changes. Add Web Push subscriptions, presence-aware delivery, notification settings and tests.
This commit is contained in:
2026-10-19 17:12:16 +01:00
parent 61098a114c
commit dbfe48796b
100 changed files with 3573 additions and 117 deletions
@@ -23,7 +23,7 @@ export default function RailUserRow() {
.join("");
return (
<Stack className="h-[88px] shrink-0 gap-0! items-stretch justify-center px-2 lg:px-3 mx-0 lg:mx-3 border-0 border-t border-solid border-hairline">
<Stack className="h-[88px] shrink-0 gap-0! items-stretch justify-center px-2 @rail:px-3 mx-0 @rail:mx-3 border-0 border-t border-solid border-hairline">
<Dropdown
position="top-left"
className="w-full"
@@ -34,7 +34,7 @@ export default function RailUserRow() {
tabIndex={0}
aria-haspopup="menu"
aria-label={`Account menu for ${name}`}
className="w-full h-12 gap-3! flex-nowrap items-center rounded-default px-1 lg:px-0 cursor-pointer hover:bg-sunken transition-colors duration-[var(--m-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-paper"
className="w-full h-12 gap-3! flex-nowrap items-center rounded-default px-1 @rail:px-0 cursor-pointer hover:bg-sunken transition-colors duration-[var(--m-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-paper"
>
<UserAvatar
src={user?.image_thumbnail || user?.image}
@@ -42,7 +42,7 @@ export default function RailUserRow() {
initials={initials}
size="md"
/>
<Stack className="hidden lg:flex grow min-w-0 gap-1">
<Stack className="hidden @rail:flex grow min-w-0 gap-1">
<Span className="text-sm font-bold leading-5 text-ink truncate w-full">
{name}
</Span>
@@ -63,7 +63,7 @@ export default function RailUserRow() {
</Stack>
<ChevronRight
size={16}
className="hidden lg:block shrink-0 text-ink"
className="hidden @rail:block shrink-0 text-ink"
aria-hidden
/>
</Row>