feat(phase5): list channels - todo/in_progress/done columns, CRUD

2026-06-30 11:26:15 -04:00
parent dbebc1f381
commit 74d2153ffa
10 changed files with 282 additions and 9 deletions
@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react';
+import { api } from '../lib/api.ts';
+
+interface ListItem {
+  id: string;
+  channel_id: string;
+  creator_id: string;
+  title: string;
+  status: string;
+  position: number;
+  created_at: string;
+  updated_at: string;
+}
+
+interface ListViewProps {
+  channelId: string;
+  channelName: string;
+}
+
+export function ListView({ channelId, channelName }: ListViewProps) {
+  const [items, setItems] = useState<ListItem[]>([]);
+  const [newTitle, setNewTitle] = useState('');
+
+  useEffect(() => {
+    api.get<ListItem[]>(`/channels/${channelId}/items`)
+      .then((data) => setItems(Array.isArray(data) ? data : []));
+  }, [channelId]);
+
+  const addItem = async () => {
+    if (!newTitle.trim()) return;
+    const it = await api.post<ListItem>(`/channels/${channelId}/items`, { title: newTitle });
+    setItems((prev) => [...prev, it]);
+    setNewTitle('');
+  };
+
+  const toggleStatus = async (it: ListItem) => {
+    const next = it.status === 'done' ? 'todo' : it.status === 'in_progress' ? 'done' : 'in_progress';
+    const updated = await api.patch<ListItem>(`/channels/items/${it.id}`, { status: next });
+    setItems((prev) => prev.map((x) => x.id === updated.id ? updated : x));
+  };
+
+  const deleteItem = async (id: string) => {
+    await api.delete(`/channels/items/${id}`);
+    setItems((prev) => prev.filter((x) => x.id !== id));
+  };
+
+  const todo = items.filter((x) => x.status === 'todo');
+  const inProgress = items.filter((x) => x.status === 'in_progress');
+  const done = items.filter((x) => x.status === 'done');
+
+  const col = (list: ListItem[], label: string, color: string) => (
+    <div className="flex-1 min-w-0 flex flex-col">
+      <div className={`text-xs font-bold font-mono p-2 ${color} border-b border-gb-bg-t`}>
+        {label} ({list.length})
+      </div>
+      <div className="flex-1 overflow-y-auto p-1 space-y-1">
+        {list.map((it) => (
+          <div key={it.id} className="bg-gb-bg-t rounded p-2 text-xs font-mono group">
+            <div className="flex items-start gap-2">
+              <button
+                onClick={() => toggleStatus(it)}
+                className={`mt-0.5 shrink-0 w-4 h-4 rounded border ${it.status === 'done' ? 'bg-gb-orange border-gb-orange' : 'border-gb-fg-f'}`}
+              >
+                {it.status === 'done' && <span className="flex items-center justify-center text-gb-bg text-[10px]">✓</span>}
+              </button>
+              <span className={`flex-1 ${it.status === 'done' ? 'line-through text-gb-fg-f' : 'text-gb-fg'}`}>{it.title}</span>
+              <button onClick={() => deleteItem(it.id)} className="text-gb-fg-f hover:text-gb-red opacity-0 group-hover:opacity-100">✕</button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+
+  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>
+      </div>
+      <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)}
+          onKeyDown={(e) => e.key === 'Enter' && addItem()}
+          placeholder="add item..."
+          className="terminal-input flex-1"
+        />
+        <button onClick={addItem} disabled={!newTitle.trim()} className="px-2 py-1 bg-gb-orange text-gb-bg disabled:opacity-50">[ADD]</button>
+      </div>
+      <div className="flex-1 flex min-h-0">
+        {col(todo, 'TODO', 'text-gb-fg')}
+        {col(inProgress, 'DOING', 'text-gb-blue')}
+        {col(done, 'DONE', 'text-gb-fg-f')}
+      </div>
+    </div>
+  );
+}