LobotomyLabs/dumpsterChat
2
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Wiki Activity

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

Browse Source
This commit is contained in:
Dustin Newkirk
2026-06-30 11:26:15 -04:00
parent dbebc1f381
commit 74d2153ffa
10 changed files with 282 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/ChannelList.tsx
+1 -1
View File
@@ -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' ? '○' : channel.type === 'docs' ? '☰' : '#'}</span>
<span className="text-gb-fg-f">{channel.type === 'forum' ? '■' : channel.type === 'calendar' ? '○' : channel.type === 'docs' ? '☰' : channel.type === 'list' ? '☑' : '#'}</span>
<span className="truncate flex-1">{channel.name}</span>
<span
onClick={(e) => { e.stopPropagation(); setSettingsChannel({ id: channel.id, name: channel.name }); }}
web/src/components/ChatArea.tsx
+7 -2
View File
@@ -12,6 +12,7 @@ import { ThreadPanel } from "./ThreadPanel.tsx";
import { ForumView } from "./ForumView.tsx";
import { CalendarView } from "./CalendarView.tsx";
import { DocsView } from "./DocsView.tsx";
import { ListView } from "./ListView.tsx";
import { UserProfileModal } from "./UserProfileModal.tsx";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
@@ -251,12 +252,14 @@ export function ChatArea() {
? `○ ${activeChannel.name}`
: activeChannel.type === 'docs'
? `☰ ${activeChannel.name}`
: `# ${activeChannel.name}`
: activeChannel.type === 'list'
? `☑ ${activeChannel.name}`
: `# ${activeChannel.name}`
: activeChannelId
? `#${activeChannelId}`
: "[NO CHANNEL SELECTED]"}
</span>
{activeChannelId && activeChannel?.type !== 'forum' && (
{activeChannelId && activeChannel?.type === 'text' && (
<div className="flex items-center gap-2">
<button
onClick={() => setShowThreads((prev) => !prev)}
@@ -331,6 +334,8 @@ export function ChatArea() {
<CalendarView channelId={activeChannelId} channelName={activeChannel.name} />
) : activeChannel && activeChannel.type === 'docs' && activeChannelId ? (
<DocsView channelId={activeChannelId} channelName={activeChannel.name} />
) : activeChannel && activeChannel.type === 'list' && activeChannelId ? (
<ListView channelId={activeChannelId} channelName={activeChannel.name} />
) : (
<>
<div className="flex-1 flex flex-col min-w-0">
web/src/components/CreateChannelModal.tsx
+4 -3
View File
@@ -11,7 +11,7 @@ interface ChannelApiResponse {
id: string;
server_id: string;
name: string;
type: 'text' | 'voice' | 'forum' | 'calendar' | 'docs';
type: 'text' | 'voice' | 'forum' | 'calendar' | 'docs' | 'list';
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' | 'docs'>('text');
const [type, setType] = useState<'text' | 'voice' | 'forum' | 'calendar' | 'docs' | 'list'>('text');
const [category, setCategory] = useState('general');
const [slowmodeSeconds, setSlowmodeSeconds] = useState(0);
const [loading, setLoading] = useState(false);
@@ -107,7 +107,7 @@ 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' | 'docs')}
onChange={(e) => setType(e.target.value as 'text' | 'voice' | 'forum' | 'calendar' | 'docs' | 'list')}
className="terminal-input w-full"
>
<option value="text">text</option>
@@ -115,6 +115,7 @@ export function CreateChannelModal({ serverId, onClose }: CreateChannelModalProp
<option value="forum">forum</option>
<option value="calendar">calendar</option>
<option value="docs">docs</option>
<option value="list">list</option>
</select>
</div>
<div>
web/src/components/ListView.tsx
+97
View File
@@ -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>
);
}
web/src/stores/channel.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import { create } from 'zustand';
import { api } from '../lib/api.ts';
export type ChannelType = 'text' | 'voice' | 'forum' | 'calendar' | 'docs';
export type ChannelType = 'text' | 'voice' | 'forum' | 'calendar' | 'docs' | 'list';
export interface Channel {
id: string;
web/tsconfig.app.tsbuildinfo
+1 -1
View File
@@ -1 +1 @@
{"root":["./src/App.tsx","./src/main.tsx","./src/components/BotManager.tsx","./src/components/CalendarView.tsx","./src/components/ChannelList.tsx","./src/components/ChannelSettingsModal.tsx","./src/components/ChatArea.tsx","./src/components/CommandManager.tsx","./src/components/ConversationList.tsx","./src/components/CreateChannelModal.tsx","./src/components/CreateServerModal.tsx","./src/components/DMChat.tsx","./src/components/DocsView.tsx","./src/components/EmojiPicker.tsx","./src/components/ForumView.tsx","./src/components/GiphyPicker.tsx","./src/components/InstallPrompt.tsx","./src/components/InviteModal.tsx","./src/components/JoinServer.tsx","./src/components/JoinServerModal.tsx","./src/components/Layout.tsx","./src/components/LoginForm.tsx","./src/components/MemberContextMenu.tsx","./src/components/MemberList.tsx","./src/components/MemberRoleAssign.tsx","./src/components/MentionDropdown.tsx","./src/components/MentionPopup.tsx","./src/components/MessageSearch.tsx","./src/components/MobileDrawer.tsx","./src/components/MobileNav.tsx","./src/components/NewConversationModal.tsx","./src/components/ReactionBar.tsx","./src/components/ReplyBar.tsx","./src/components/RoleManager.tsx","./src/components/ServerBar.tsx","./src/components/ServerSettingsModal.tsx","./src/components/SlashCommandPopup.tsx","./src/components/ThemeToggle.tsx","./src/components/ThreadListPanel.tsx","./src/components/ThreadPanel.tsx","./src/components/TypingIndicator.tsx","./src/components/UserProfileModal.tsx","./src/components/UserSettings.tsx","./src/components/VoiceChannel.tsx","./src/components/VoiceControls.tsx","./src/components/VoicePanel.tsx","./src/lib/api.ts","./src/lib/usePermissions.ts","./src/stores/auth.ts","./src/stores/bot.ts","./src/stores/channel.ts","./src/stores/conversation.ts","./src/stores/layout.ts","./src/stores/member.ts","./src/stores/message.ts","./src/stores/moderation.ts","./src/stores/permissions.ts","./src/stores/presence.ts","./src/stores/push.ts","./src/stores/role.ts","./src/stores/server.ts","./src/stores/thread.ts","./src/stores/typing.ts","./src/stores/voice.ts","./src/stores/ws.ts"],"version":"5.9.3"}
{"root":["./src/App.tsx","./src/main.tsx","./src/components/BotManager.tsx","./src/components/CalendarView.tsx","./src/components/ChannelList.tsx","./src/components/ChannelSettingsModal.tsx","./src/components/ChatArea.tsx","./src/components/CommandManager.tsx","./src/components/ConversationList.tsx","./src/components/CreateChannelModal.tsx","./src/components/CreateServerModal.tsx","./src/components/DMChat.tsx","./src/components/DocsView.tsx","./src/components/EmojiPicker.tsx","./src/components/ForumView.tsx","./src/components/GiphyPicker.tsx","./src/components/InstallPrompt.tsx","./src/components/InviteModal.tsx","./src/components/JoinServer.tsx","./src/components/JoinServerModal.tsx","./src/components/Layout.tsx","./src/components/ListView.tsx","./src/components/LoginForm.tsx","./src/components/MemberContextMenu.tsx","./src/components/MemberList.tsx","./src/components/MemberRoleAssign.tsx","./src/components/MentionDropdown.tsx","./src/components/MentionPopup.tsx","./src/components/MessageSearch.tsx","./src/components/MobileDrawer.tsx","./src/components/MobileNav.tsx","./src/components/NewConversationModal.tsx","./src/components/ReactionBar.tsx","./src/components/ReplyBar.tsx","./src/components/RoleManager.tsx","./src/components/ServerBar.tsx","./src/components/ServerSettingsModal.tsx","./src/components/SlashCommandPopup.tsx","./src/components/ThemeToggle.tsx","./src/components/ThreadListPanel.tsx","./src/components/ThreadPanel.tsx","./src/components/TypingIndicator.tsx","./src/components/UserProfileModal.tsx","./src/components/UserSettings.tsx","./src/components/VoiceChannel.tsx","./src/components/VoiceControls.tsx","./src/components/VoicePanel.tsx","./src/lib/api.ts","./src/lib/usePermissions.ts","./src/stores/auth.ts","./src/stores/bot.ts","./src/stores/channel.ts","./src/stores/conversation.ts","./src/stores/layout.ts","./src/stores/member.ts","./src/stores/message.ts","./src/stores/moderation.ts","./src/stores/permissions.ts","./src/stores/presence.ts","./src/stores/push.ts","./src/stores/role.ts","./src/stores/server.ts","./src/stores/thread.ts","./src/stores/typing.ts","./src/stores/voice.ts","./src/stores/ws.ts"],"version":"5.9.3"}