Hub nav: Chat tab (branded self-hosted Element at element.occupymedia.cc)

This commit is contained in:
glass beadian 2026-10-12 09:13:37 +00:00
parent 7ea0b1e137
commit e6a78a0805
2 changed files with 36 additions and 16 deletions

View file

@ -11,16 +11,29 @@ const identity = (groups: GroupSummary[]): GroupSummary[] => groups;
const identityDrafts = (drafts: DraftRecord[]): DraftRecord[] => drafts;
const emptyDrafts: DraftRecord[] = [];
function Tile({ href, title, detail }: { href: string; title: string; detail: string }): React.ReactElement {
return <Link href={href} className="flex min-h-[92px] flex-col justify-between rounded-lg border border-border bg-surface p-3.5 hover:border-accent">
function Tile({ href, title, detail, external }: { href: string; title: string; detail: string; external?: boolean }): React.ReactElement {
const cls = "flex min-h-[92px] flex-col justify-between rounded-lg border border-border bg-surface p-3.5 hover:border-accent";
if (external) {
return <a href={href} target="_blank" rel="noreferrer" className={cls}>
<span className="text-accent">✦</span><span><strong className="block text-sm">{title}</strong><span className="text-xs text-text-faint">{detail}</span></span>
</a>;
}
return <Link href={href} className={cls}>
<span className="text-accent">✦</span><span><strong className="block text-sm">{title}</strong><span className="text-xs text-text-faint">{detail}</span></span>
</Link>;
}
function Row({ href, title, detail }: { href: string; title: string; detail?: string }): React.ReactElement {
return <Link href={href} className="flex min-h-[56px] items-center gap-3 border-b border-border-subtle px-4 py-2">
<span className="min-w-0 flex-1"><strong className="block text-sm font-medium">{title}</strong>{detail && <span className="text-xs text-text-faint">{detail}</span>}</span>
<span aria-hidden="true" className="text-text-faint">›</span>
function Row({ href, title, detail, external }: { href: string; title: string; detail?: string; external?: boolean }): React.ReactElement {
const cls = "flex min-h-[56px] items-center justify-between rounded-lg border border-border bg-surface px-3.5 py-3 hover:border-accent";
if (external) {
return <a href={href} target="_blank" rel="noreferrer" className={cls}>
<span><strong className="block text-sm">{title}</strong>{detail ? <span className="text-xs text-text-faint">{detail}</span> : null}</span>
<span className="text-text-faint">↗</span>
</a>;
}
return <Link href={href} className={cls}>
<span><strong className="block text-sm">{title}</strong>{detail ? <span className="text-xs text-text-faint">{detail}</span> : null}</span>
<span className="text-text-faint">›</span>
</Link>;
}
@ -64,6 +77,7 @@ export default function MorePage(): React.ReactElement {
<Row href="/analytics" title="Analytics" />
<Row href="/video" title="Video library" />
<Row href="/files" title="Files" detail="Group file library" />
<Row href="https://element.occupymedia.cc" title="Chat" detail="Matrix chat" external />
<Row href="/onboarding" title="Onboarding" />
<button onClick={() => void logout()} className="flex min-h-[56px] w-full items-center px-4 text-left text-sm font-medium text-danger">Sign out</button>
</div>