Channel view

src/App.tsx

@@ -9,6 +9,7 @@ import {
 } from "./components/ui/resizable";
 import Sidebar from "./components/view/Sidebar";
 import { ThemeProvider } from "next-themes";
+import Page from "./components/page/PageView";
 
 export default function App() {
   const appRef = useRef<Enclave | null>(null);
@@ -50,7 +51,7 @@ export default function App() {
               <ResizableHandle withHandle />
 
               <ResizablePanel defaultSize="100%">
-                <div className="h-screen"></div>
+                <Page appRef={appRef} />
               </ResizablePanel>
             </ResizablePanelGroup>
           </>

src/app/app.ts

@@ -6,6 +6,7 @@ import { base58 } from "@scure/base";
 
 import axios from "axios";
 import { Account, AccountsFile, getAccounts } from "@/lib/accounts";
+import { Page } from "@/lib/page";
 
 ed.hashes.sha512 = sha512;
 
@@ -22,11 +23,12 @@ ed.hashes.sha512 = sha512;
  * should stay a pure display of what `Enclave` exposes — it should not
  * reach into `EnclaveServer` or `EnclaveWebSocket` directly.
  */
-export default class Enclave {
+export default class Enclave<P = Page> {
   public accounts?: AccountsFile;
   public server?: EnclaveServer;
   public serverList: ServerList;
   public forceRender: () => void;
+  public page?: P;
 
   public constructor() {
     this.serverList = {};

src/components/page/PageView.tsx

@@ -0,0 +1,24 @@
+import Enclave from "@/app/app";
+import ChannelPage from "./channel/ChannelPage";
+import { Channel } from "@/app/protocol";
+
+export type ChannelPageProps = {
+  kind: "channel";
+  channel: Channel;
+};
+
+export type Page = ChannelPageProps;
+
+export default function Page({
+  appRef,
+}: {
+  appRef: React.RefObject<Enclave | null>;
+}) {
+  switch (appRef.current?.page?.kind) {
+    case "channel":
+      return <ChannelPage appRef={appRef} />;
+
+    default:
+      return null;
+  }
+}

src/components/page/channel/ChannelPage.tsx

@@ -0,0 +1,16 @@
+import Enclave from "@/app/app";
+import { ChannelPageProps } from "@/lib/page";
+
+export default function ChannelPage({
+  appRef,
+}: {
+  appRef: React.RefObject<Enclave<ChannelPageProps> | null>;
+}) {
+  switch (appRef.current?.page?.channel.kind) {
+    case "text":
+      return <ChannelPage appRef={appRef} />;
+
+    default:
+      return null;
+  }
+}

src/components/page/channel/TextChannel.tsx

@@ -0,0 +1,10 @@
+import Enclave from "@/app/app";
+import { ChannelPageProps } from "@/components/page/PageView";
+
+export default function TextChannel({
+  appRef,
+}: {
+  appRef: React.RefObject<Enclave<ChannelPageProps> | null>;
+}) {
+  return <div>{appRef.current?.page?.channel.name}</div>;
+}