Open close categories

src/components/view/Sidebar.tsx

@@ -1,6 +1,7 @@
 import Enclave from "@/app/app";
 import { Channel, ChannelKind } from "@/app/protocol";
-import { HashIcon } from "lucide-react";
+import { ChevronDown, ChevronUp, HashIcon } from "lucide-react";
+import { useState } from "react";
 
 export function ChannelIcon({ kind }: { kind: ChannelKind["kind"] }) {
   switch (kind) {
@@ -11,17 +12,37 @@ export function ChannelIcon({ kind }: { kind: ChannelKind["kind"] }) {
   }
 }
 
+export function RenderCategory({ channel }: { channel: Channel }) {
+  if (channel.kind !== "category") return null;
+
+  const [open, setOpen] = useState(true);
+
+  return (
+    <div>
+      <div
+        className="w-full px-2 py-1 rounded-md select-none cursor-default text-sm text-foreground/70 flex items-center"
+        onClick={() => setOpen((v) => !v)}
+      >
+        {channel.name}
+        {open ? (
+          <ChevronDown className="p-1 shrink" />
+        ) : (
+          <ChevronUp className="p-1 shrink" />
+        )}
+      </div>
+      {open && (
+        <div className="pt-0.5 w-full flex flex-col gap-1">
+          <RenderChannels channels={channel.channels} />
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function RenderChannels({ channels }: { channels: Channel[] }) {
   return channels.map((channel) =>
     channel.kind === "category" ? (
-      <div>
+      <RenderCategory channel={channel} />
-        <div className="w-full px-0.5 py-1 rounded-md select-none cursor-default text-sm text-foreground/70">
-          {channel.name}
-        </div>
-        <div className="pl-2 pr-1.5 pt-0.5 w-full flex flex-col gap-1">
-          <RenderChannels channels={channel.channels} />
-        </div>
-      </div>
     ) : (
       <div className="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-foreground/70">
         <ChannelIcon kind={channel.kind} />