Main page

src/app/app.ts

@@ -263,7 +263,8 @@ export default class Enclave<P = Page> {
 
             const page = this.page as Page | undefined;
 
-            const isInvisibleChannel = page?.channel.id !== channelId;
+            const isInvisibleChannel =
+              page?.kind === "channel" && page?.channel.id !== channelId;
 
             return messages.map((message) => {
               if (

src/components/page/MainPage.tsx

@@ -0,0 +1,7 @@
+import Enclave from "@/app/app";
+
+export default function MainPage({
+  appRef,
+}: {
+  appRef: React.RefObject<Enclave | null>;
+}) {}

src/components/page/PageView.tsx

@@ -1,6 +1,7 @@
 import Enclave from "@/app/app";
 import ChannelPage from "./channel/ChannelPage";
 import { Channel } from "@/lib/types";
+import MainPage from "./MainPage";
 
 export type ChannelPageProps = {
   kind: "channel";
@@ -14,10 +15,14 @@ export default function Page({
 }: {
   appRef: React.RefObject<Enclave | null>;
 }) {
-  if (!appRef.current?.page?.kind) return null;
+  if (!appRef.current?.page?.kind) return <MainPage appRef={appRef} />;
 
   switch (appRef.current?.page?.kind) {
     case "channel":
-      return <ChannelPage appRef={appRef} />;
+      return (
+        <ChannelPage
+          appRef={appRef as React.RefObject<Enclave<ChannelPageProps> | null>}
+        />
+      );
   }
 }

src/components/view/Sidebar.tsx

@@ -115,6 +115,11 @@ export function RenderChannels({
   appRef: React.RefObject<Enclave | null>;
   channels: Channel[];
 }) {
+  const currentChannel =
+    appRef.current?.page?.kind === "channel"
+      ? appRef.current?.page?.channel
+      : undefined;
+
   return channels.map((channel) =>
     channel.kind === "category" ? (
       <RenderCategory key={channel.id} appRef={appRef} channel={channel} />
@@ -123,7 +128,7 @@ export function RenderChannels({
         <div
           className={cn(
             "w-full hover:bg-accent px-2.5 py-1.5 rounded-md flex gap-2.5 items-center select-none cursor-default text-sm text-muted-foreground",
-            channel.id === appRef.current?.page?.channel.id,
+            channel.id === currentChannel?.id,
           )}
           onClick={() => {
             if (!appRef.current) {