feat(phase5): docs channels - CRUD, wiki sidebar, markdown editor

2026-06-30 11:19:32 -04:00
parent e65ce54e36
commit dbebc1f381
10 changed files with 368 additions and 8 deletions
@@ -92,7 +92,7 @@ export function ChannelList() {
                      channel.id === activeChannelId ? 'terminal-active' : 'hover:bg-gb-bg-t text-gb-fg-s'
                    }`}
                  >
-                    <span className="text-gb-fg-f">{channel.type === 'forum' ? '■' : channel.type === 'calendar' ? '○' : '#'}</span>
+                    <span className="text-gb-fg-f">{channel.type === 'forum' ? '■' : channel.type === 'calendar' ? '○' : channel.type === 'docs' ? '☰' : '#'}</span>
                    <span className="truncate flex-1">{channel.name}</span>
                    <span
                      onClick={(e) => { e.stopPropagation(); setSettingsChannel({ id: channel.id, name: channel.name }); }}
@@ -11,6 +11,7 @@ import { ThreadListPanel } from "./ThreadListPanel.tsx";
 import { ThreadPanel } from "./ThreadPanel.tsx";
 import { ForumView } from "./ForumView.tsx";
 import { CalendarView } from "./CalendarView.tsx";
+import { DocsView } from "./DocsView.tsx";
 import { UserProfileModal } from "./UserProfileModal.tsx";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -248,7 +249,9 @@ export function ChatArea() {
              ? `■ ${activeChannel.name}`
              : activeChannel.type === 'calendar'
                ? `○ ${activeChannel.name}`
-                : `# ${activeChannel.name}`
+                : activeChannel.type === 'docs'
+                  ? `☰ ${activeChannel.name}`
+                  : `# ${activeChannel.name}`
            : activeChannelId
              ? `#${activeChannelId}`
              : "[NO CHANNEL SELECTED]"}
@@ -326,6 +329,8 @@ export function ChatArea() {
          <ForumView channelId={activeChannelId} channelName={activeChannel.name} onOpenThread={(t) => setActiveThread(t)} />
        ) : activeChannel && activeChannel.type === 'calendar' && activeChannelId ? (
          <CalendarView channelId={activeChannelId} channelName={activeChannel.name} />
+        ) : activeChannel && activeChannel.type === 'docs' && activeChannelId ? (
+          <DocsView channelId={activeChannelId} channelName={activeChannel.name} />
        ) : (
          <>
            <div className="flex-1 flex flex-col min-w-0">
@@ -11,7 +11,7 @@ interface ChannelApiResponse {
  id: string;
  server_id: string;
  name: string;
-  type: 'text' | 'voice' | 'forum' | 'calendar';
+  type: 'text' | 'voice' | 'forum' | 'calendar' | 'docs';
  category: string;
  position: number;
  slowmode_seconds: number;
@@ -29,7 +29,7 @@ const SLOWMODE_OPTIONS = [

 export function CreateChannelModal({ serverId, onClose }: CreateChannelModalProps) {
  const [name, setName] = useState('');
-  const [type, setType] = useState<'text' | 'voice' | 'forum' | 'calendar'>('text');
+  const [type, setType] = useState<'text' | 'voice' | 'forum' | 'calendar' | 'docs'>('text');
  const [category, setCategory] = useState('general');
  const [slowmodeSeconds, setSlowmodeSeconds] = useState(0);
  const [loading, setLoading] = useState(false);
@@ -107,13 +107,14 @@ export function CreateChannelModal({ serverId, onClose }: CreateChannelModalProp
            <label className="text-xs text-gb-fg-f block mb-1">TYPE:</label>
            <select
              value={type}
-              onChange={(e) => setType(e.target.value as 'text' | 'voice' | 'forum' | 'calendar')}
+              onChange={(e) => setType(e.target.value as 'text' | 'voice' | 'forum' | 'calendar' | 'docs')}
              className="terminal-input w-full"
            >
              <option value="text">text</option>
              <option value="voice">voice</option>
              <option value="forum">forum</option>
              <option value="calendar">calendar</option>
+              <option value="docs">docs</option>
            </select>
          </div>
          <div>
@@ -0,0 +1,134 @@
+import { useEffect, useState } from 'react';
+import { api } from '../lib/api.ts';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+interface DocSummary {
+  id: string;
+  channel_id: string;
+  creator_id: string;
+  title: string;
+  created_at: string;
+  updated_at: string;
+}
+
+interface DocDetail extends DocSummary {
+  content: string;
+}
+
+interface DocsViewProps {
+  channelId: string;
+  channelName: string;
+}
+
+export function DocsView({ channelId, channelName }: DocsViewProps) {
+  const [docs, setDocs] = useState<DocSummary[]>([]);
+  const [activeDoc, setActiveDoc] = useState<DocDetail | null>(null);
+  const [editing, setEditing] = useState(false);
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [showNew, setShowNew] = useState(false);
+  const [newTitle, setNewTitle] = useState('');
+
+  useEffect(() => {
+    setLoading(true);
+    api.get<DocSummary[]>(`/channels/${channelId}/docs`)
+      .then((data) => setDocs(Array.isArray(data) ? data : []))
+      .finally(() => setLoading(false));
+  }, [channelId]);
+
+  const openDoc = async (id: string) => {
+    const d = await api.get<DocDetail>(`/channels/docs/${id}`);
+    setActiveDoc(d);
+    setTitle(d.title);
+    setContent(d.content);
+    setEditing(false);
+  };
+
+  const createDoc = async () => {
+    if (!newTitle.trim()) return;
+    const d = await api.post<DocDetail>(`/channels/${channelId}/docs`, { title: newTitle, content: '' });
+    setDocs((prev) => [{ id: d.id, channel_id: d.channel_id, creator_id: d.creator_id, title: d.title, created_at: d.created_at, updated_at: d.updated_at }, ...prev]);
+    setShowNew(false);
+    setNewTitle('');
+    openDoc(d.id);
+  };
+
+  const saveDoc = async () => {
+    if (!activeDoc) return;
+    const d = await api.patch<DocDetail>(`/channels/docs/${activeDoc.id}`, { title, content });
+    setActiveDoc(d);
+    setDocs((prev) => prev.map((s) => s.id === d.id ? { ...s, title: d.title, updated_at: d.updated_at } : s));
+    setEditing(false);
+  };
+
+  const deleteDoc = async (id: string) => {
+    if (!confirm('Delete this doc?')) return;
+    await api.delete(`/channels/docs/${id}`);
+    setDocs((prev) => prev.filter((d) => d.id !== id));
+    if (activeDoc?.id === id) setActiveDoc(null);
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-gb-bg">
+      <div className="terminal-border border-t-0 border-x-0 px-3 py-2 text-gb-fg-s flex items-center justify-between">
+        <span>☰ {channelName}</span>
+        <button onClick={() => setShowNew((p) => !p)} className="text-xs text-gb-fg-f hover:text-gb-orange font-mono">[NEW DOC]</button>
+      </div>
+      {showNew && (
+        <div className="p-3 border-b border-gb-bg-t font-mono text-xs flex items-center gap-2">
+          <input value={newTitle} onChange={(e) => setNewTitle(e.target.value)} placeholder="doc title" className="terminal-input flex-1" />
+          <button onClick={createDoc} disabled={!newTitle.trim()} className="px-2 py-1 bg-gb-orange text-gb-bg disabled:opacity-50">[CREATE]</button>
+        </div>
+      )}
+      <div className="flex flex-1 min-h-0">
+        <div className="w-48 shrink-0 overflow-y-auto border-r border-gb-bg-t font-mono text-xs">
+          {loading && <div className="p-2 text-gb-fg-f">[loading...]</div>}
+          {!loading && docs.length === 0 && <div className="p-2 text-gb-fg-s">[no docs]</div>}
+          {docs.map((d) => (
+            <div
+              key={d.id}
+              onClick={() => openDoc(d.id)}
+              className={`p-2 cursor-pointer truncate ${activeDoc?.id === d.id ? 'bg-gb-bg-t text-gb-fg' : 'text-gb-fg-s hover:bg-gb-bg-s'}`}
+            >
+              {d.title}
+              <div className="text-[10px] text-gb-fg-f">updated {new Date(d.updated_at).toLocaleDateString()}</div>
+            </div>
+          ))}
+        </div>
+        <div className="flex-1 flex flex-col min-w-0">
+          {!activeDoc && (
+            <div className="flex-1 flex items-center justify-center text-gb-fg-s font-mono text-xs">
+              select or create a doc
+            </div>
+          )}
+          {activeDoc && !editing && (
+            <div className="flex-1 overflow-y-auto p-3">
+              <div className="flex items-center justify-between mb-2">
+                <h2 className="text-gb-fg font-bold text-sm">{activeDoc.title}</h2>
+                <div className="flex gap-2 text-xs font-mono">
+                  <button onClick={() => setEditing(true)} className="text-gb-fg-f hover:text-gb-orange">[EDIT]</button>
+                  <button onClick={() => deleteDoc(activeDoc.id)} className="text-gb-red hover:text-gb-orange">[DEL]</button>
+                </div>
+              </div>
+              <div className="text-gb-fg text-sm prose prose-invert max-w-none">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{activeDoc.content || '*empty*'}</ReactMarkdown>
+              </div>
+            </div>
+          )}
+          {activeDoc && editing && (
+            <div className="flex-1 flex flex-col p-3 gap-2">
+              <input value={title} onChange={(e) => setTitle(e.target.value)} className="terminal-input w-full text-sm font-bold" />
+              <textarea value={content} onChange={(e) => setContent(e.target.value)} className="terminal-input flex-1 font-mono text-xs resize-none" />
+              <div className="flex gap-2 text-xs font-mono">
+                <button onClick={saveDoc} className="px-2 py-1 bg-gb-orange text-gb-bg">[SAVE]</button>
+                <button onClick={() => setEditing(false)} className="text-gb-fg-f hover:text-gb-orange">[CANCEL]</button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { api } from '../lib/api.ts';

-export type ChannelType = 'text' | 'voice' | 'forum' | 'calendar';
+export type ChannelType = 'text' | 'voice' | 'forum' | 'calendar' | 'docs';

 export interface Channel {
  id: string;