tben
dbfe48796b
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.
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import Row from "@moduletrace/twui/layout/Row";
|
|
import Span from "@moduletrace/twui/layout/Span";
|
|
import Stack from "@moduletrace/twui/layout/Stack";
|
|
|
|
type Props = {
|
|
avatar: ReactNode;
|
|
title: string;
|
|
subtitle?: string;
|
|
};
|
|
|
|
/**
|
|
* The record whose settings are open, at the top of its rail. Same 48px
|
|
* row as a bot, selected.
|
|
*/
|
|
export default function RailSettingsRecordRow({
|
|
avatar,
|
|
title,
|
|
subtitle,
|
|
}: Props) {
|
|
return (
|
|
<Row
|
|
aria-current="page"
|
|
className="w-full shrink-0 min-h-12 gap-3! flex-nowrap items-center rounded-default px-1 @rail:px-3 bg-ink/5"
|
|
>
|
|
{avatar}
|
|
<Stack className="hidden @rail:flex grow min-w-0 gap-0!">
|
|
<Span className="text-sm font-bold leading-5 text-ink truncate w-full">
|
|
{title}
|
|
</Span>
|
|
{subtitle ? (
|
|
<Span className="text-xs leading-4 text-ink-secondary truncate w-full">
|
|
{subtitle}
|
|
</Span>
|
|
) : null}
|
|
</Stack>
|
|
</Row>
|
|
);
|
|
}
|