From e6a78a0805dfb945db9bfc93998b1b61a362f1ba Mon Sep 17 00:00:00 2001
From: glass beadian <glassbeadian@hdys.band>
Date: Mon, 12 Oct 2026 09:13:37 +0000
Subject: [PATCH] Hub nav: Chat tab (branded self-hosted Element at
 element.occupymedia.cc)

---
 apps/web/src/app/(main)/more/page.tsx     | 26 +++++++++++++++++------
 apps/web/src/components/shell/sidebar.tsx | 26 ++++++++++++++---------
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/app/(main)/more/page.tsx b/apps/web/src/app/(main)/more/page.tsx
index d7b5d4a..092f6b2 100644
--- a/apps/web/src/app/(main)/more/page.tsx
+++ b/apps/web/src/app/(main)/more/page.tsx
@@ -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>
diff --git a/apps/web/src/components/shell/sidebar.tsx b/apps/web/src/components/shell/sidebar.tsx
index 1e822cb..956bf91 100644
--- a/apps/web/src/components/shell/sidebar.tsx
+++ b/apps/web/src/components/shell/sidebar.tsx
@@ -8,7 +8,7 @@ import type { DraftRecord } from "../../lib/api-types";
 import { LogoMark } from "../brand/logo";
 import { NavIcon } from "../brand";
 
-const NAV = [
+const NAV: { href: string; label: string; external?: boolean }[] = [
   { href: "/streams", label: "Streams" },
   { href: "/compose", label: "Compose" },
   { href: "/calendar", label: "Calendar" },
@@ -18,6 +18,7 @@ const NAV = [
   { href: "/approvals", label: "Approvals" },
   { href: "/archive", label: "Archive" },
   { href: "/files", label: "Files" },
+  { href: "https://element.occupymedia.cc", label: "Chat", external: true },
   { href: "/analytics", label: "Analytics" },
   { href: "/connections", label: "Channels" },
   { href: "/team", label: "Team" },
@@ -49,15 +50,20 @@ export function Sidebar(): React.ReactElement {
       </div>
       <nav className="flex-1 overflow-y-auto scrollbar-thin p-2">
         {NAV.map((item) => {
-          const active = pathname.startsWith(item.href);
-          return (
-            <Link
-              key={item.href}
-              href={item.href}
-              className={`group flex items-center justify-between rounded-md px-3 py-1.5 text-sm transition-colors duration-150 ${item.href === "/control-room" ? "min-h-11" : ""} ${
-                active ? "bg-accent-dim text-accent" : "text-text-dim hover:bg-surface-2 hover:text-text"
-              }`}
-            >
+          const active = !item.external && pathname.startsWith(item.href);
+          const className = `group flex items-center justify-between rounded-md px-3 py-1.5 text-sm transition-colors duration-150 ${item.href === "/control-room" ? "min-h-11" : ""} ${
+            active ? "bg-accent-dim text-accent" : "text-text-dim hover:bg-surface-2 hover:text-text"
+          }`;
+          return item.external ? (
+            <a key={item.href} href={item.href} target="_blank" rel="noreferrer" className={className}>
+              <span className="flex items-center gap-2.5">
+                <span className="h-1.5 w-1.5 rounded-full bg-border group-hover:bg-text-faint" />
+                {item.label}
+              </span>
+              <span className="text-2xs text-text-faint">↗</span>
+            </a>
+          ) : (
+            <Link key={item.href} href={item.href} className={className}>
               <span className="flex items-center gap-2.5">
                 {item.href === "/video" || item.href === "/control-room" || item.href === "/files" ? (
                   <NavIcon name={item.href === "/files" ? "files" : "video"} size={14} />