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

feat(phase3): forum channels + tags + card UI

Browse Source
This commit is contained in:
Dustin Newkirk
2026-06-30 10:44:52 -04:00
parent f3f03df710
commit 368172e3d6
12 changed files with 407 additions and 87 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">#</span>
<span className="text-gb-fg-f">{channel.type === 'forum' ? '■' : '#'}</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
+78 -69
View File
@@ -9,6 +9,7 @@ import { MentionDropdown } from "./MentionDropdown";
import { MessageSearch } from "./MessageSearch";
import { ThreadListPanel } from "./ThreadListPanel.tsx";
import { ThreadPanel } from "./ThreadPanel.tsx";
import { ForumView } from "./ForumView.tsx";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
@@ -240,12 +241,14 @@ export function ChatArea() {
<div className="terminal-border border-t-0 border-x-0 px-3 py-2 text-gb-fg-s flex items-center justify-between">
<span>
{activeChannel
? `# ${activeChannel.name}`
? activeChannel.type === 'forum'
? `■ ${activeChannel.name}`
: `# ${activeChannel.name}`
: activeChannelId
? `#${activeChannelId}`
: "[NO CHANNEL SELECTED]"}
</span>
{activeChannelId && (
{activeChannelId && activeChannel?.type !== 'forum' && (
<div className="flex items-center gap-2">
<button
onClick={() => setShowThreads((prev) => !prev)}
@@ -278,14 +281,14 @@ export function ChatArea() {
onClose={() => setShowSearch(false)}
/>
)}
{showThreads && activeChannelId && (
{showThreads && activeChannelId && activeChannel?.type !== 'forum' && (
<ThreadListPanel
channelId={activeChannelId}
onSelect={(t) => setActiveThread(t)}
onClose={() => setShowThreads(false)}
/>
)}
{selectMode && activeChannelId && (
{selectMode && activeChannelId && activeChannel?.type !== 'forum' && (
<div className="px-3 py-1 text-xs font-mono text-gb-fg-f flex items-center justify-between bg-gb-bg-s border-b border-gb-bg-t">
<span>{selectedIds.size} selected</span>
<div className="flex items-center gap-2">
@@ -314,75 +317,81 @@ export function ChatArea() {
</div>
)}
<div className="flex flex-1 min-h-0">
<div className="flex-1 flex flex-col min-w-0">
<div className="flex-1 overflow-y-auto p-3 space-y-1 font-mono text-sm">
{isLoading && <p className="text-gb-fg-f">[loading...]</p>}
{!isLoading && messages.length === 0 && (
<p className="text-gb-fg-f">[no messages in this channel]</p>
)}
{messages.map((message) => (
<div
key={message.id}
onClick={() => selectMode && activeChannelId && toggleSelectedMessage(activeChannelId, message.id)}
className={`break-words ${selectMode ? 'cursor-pointer hover:bg-gb-bg-s' : ''} ${selectedIds.has(message.id) ? 'bg-gb-bg-s' : ''}`}
>
{selectMode && activeChannelId && (
<span className="text-gb-fg-f mr-2">
{selectedIds.has(message.id) ? '[x]' : '[ ]'}
</span>
{activeChannel && activeChannel.type === 'forum' && activeChannelId ? (
<ForumView channelId={activeChannelId} channelName={activeChannel.name} onOpenThread={(t) => setActiveThread(t)} />
) : (
<>
<div className="flex-1 flex flex-col min-w-0">
<div className="flex-1 overflow-y-auto p-3 space-y-1 font-mono text-sm">
{isLoading && <p className="text-gb-fg-f">[loading...]</p>}
{!isLoading && messages.length === 0 && (
<p className="text-gb-fg-f">[no messages in this channel]</p>
)}
<span className="text-gb-fg-f">[{formatTime(message.created_at)}]</span>{" "}
<span className="text-gb-aqua">&lt;{message.author_username}&gt;</span>{" "}
<span className="text-gb-fg">{renderContent(message.content, memberUsernames)}</span>
{renderEmbeds(message.embeds)}
{messages.map((message) => (
<div
key={message.id}
onClick={() => selectMode && activeChannelId && toggleSelectedMessage(activeChannelId, message.id)}
className={`break-words ${selectMode ? 'cursor-pointer hover:bg-gb-bg-s' : ''} ${selectedIds.has(message.id) ? 'bg-gb-bg-s' : ''}`}
>
{selectMode && activeChannelId && (
<span className="text-gb-fg-f mr-2">
{selectedIds.has(message.id) ? '[x]' : '[ ]'}
</span>
)}
<span className="text-gb-fg-f">[{formatTime(message.created_at)}]</span>{" "}
<span className="text-gb-aqua">&lt;{message.author_username}&gt;</span>{" "}
<span className="text-gb-fg">{renderContent(message.content, memberUsernames)}</span>
{renderEmbeds(message.embeds)}
</div>
))}
<div ref={bottomRef} />
</div>
))}
<div ref={bottomRef} />
</div>
{showGifPicker && (
<div className="px-3 pb-1">
<GiphyPicker onSelect={handleGifSelect} onClose={() => setShowGifPicker(false)} />
</div>
)}
{error && (
<div className="px-3 pb-1">
<p className="text-gb-red text-xs font-mono">ERR: {error}</p>
</div>
)}
{slowmodeRemaining > 0 && (
<div className="px-3 pt-1 text-xs text-gb-fg-f font-mono">
SLOWMODE: wait {slowmodeRemaining}s
</div>
)}
<form onSubmit={handleSubmit} className="p-3 flex items-center gap-2 relative">
<span className="text-gb-fg-f select-none shrink-0">{">"}</span>
<div className="flex-1 min-w-0 relative">
<input
ref={inputRef}
type="text"
value={input}
onChange={handleInputChange}
placeholder="type a message..."
className="terminal-input w-full"
disabled={!activeChannelId || slowmodeRemaining > 0}
/>
{mentionQuery !== null && (
<MentionDropdown query={mentionQuery} members={members} onSelect={handleMentionSelect} />
{showGifPicker && (
<div className="px-3 pb-1">
<GiphyPicker onSelect={handleGifSelect} onClose={() => setShowGifPicker(false)} />
</div>
)}
{error && (
<div className="px-3 pb-1">
<p className="text-gb-red text-xs font-mono">ERR: {error}</p>
</div>
)}
{slowmodeRemaining > 0 && (
<div className="px-3 pt-1 text-xs text-gb-fg-f font-mono">
SLOWMODE: wait {slowmodeRemaining}s
</div>
)}
<form onSubmit={handleSubmit} className="p-3 flex items-center gap-2 relative">
<span className="text-gb-fg-f select-none shrink-0">{">"}</span>
<div className="flex-1 min-w-0 relative">
<input
ref={inputRef}
type="text"
value={input}
onChange={handleInputChange}
placeholder="type a message..."
className="terminal-input w-full"
disabled={!activeChannelId || slowmodeRemaining > 0}
/>
{mentionQuery !== null && (
<MentionDropdown query={mentionQuery} members={members} onSelect={handleMentionSelect} />
)}
</div>
<button
type="button"
onClick={() => setShowGifPicker((prev) => !prev)}
disabled={!activeChannelId}
className="text-gb-fg-f hover:text-gb-orange font-mono text-sm select-none disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
title="Toggle GIF picker"
>
[GIF]
</button>
</form>
</div>
<button
type="button"
onClick={() => setShowGifPicker((prev) => !prev)}
disabled={!activeChannelId}
className="text-gb-fg-f hover:text-gb-orange font-mono text-sm select-none disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
title="Toggle GIF picker"
>
[GIF]
</button>
</form>
</div>
{activeThread && (
<ThreadPanel threadId={activeThread.id} threadName={activeThread.name} onClose={() => setActiveThread(null)} />
{activeThread && (
<ThreadPanel threadId={activeThread.id} threadName={activeThread.name} onClose={() => setActiveThread(null)} />
)}
</>
)}
</div>
</div>
web/src/components/CreateChannelModal.tsx
+6 -3
View File
@@ -11,9 +11,10 @@ interface ChannelApiResponse {
id: string;
server_id: string;
name: string;
type: 'text' | 'voice';
type: 'text' | 'voice' | 'forum';
category: string;
position: number;
slowmode_seconds: number;
}
const SLOWMODE_OPTIONS = [
@@ -28,7 +29,7 @@ const SLOWMODE_OPTIONS = [
export function CreateChannelModal({ serverId, onClose }: CreateChannelModalProps) {
const [name, setName] = useState('');
const [type, setType] = useState<'text' | 'voice'>('text');
const [type, setType] = useState<'text' | 'voice' | 'forum'>('text');
const [category, setCategory] = useState('general');
const [slowmodeSeconds, setSlowmodeSeconds] = useState(0);
const [loading, setLoading] = useState(false);
@@ -65,6 +66,7 @@ export function CreateChannelModal({ serverId, onClose }: CreateChannelModalProp
type: result.type,
category: result.category || null,
position: result.position,
slowmode_seconds: result.slowmode_seconds,
};
useChannelStore.getState().addChannel(newChannel);
onClose();
@@ -105,11 +107,12 @@ 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')}
onChange={(e) => setType(e.target.value as 'text' | 'voice' | 'forum')}
className="terminal-input w-full"
>
<option value="text">text</option>
<option value="voice">voice</option>
<option value="forum">forum</option>
</select>
</div>
<div>
web/src/components/ForumView.tsx
+97
View File
@@ -0,0 +1,97 @@
import { useEffect, useState } from 'react';
import { useThreadStore, type Thread, type ForumTag } from '../stores/thread.ts';
interface ForumViewProps {
channelId: string;
channelName: string;
onOpenThread: (thread: { id: string; name: string }) => void;
}
export function ForumView({ channelId, channelName, onOpenThread }: ForumViewProps) {
const threads = useThreadStore((s) => s.threadsByParent[channelId] || []);
const tags = useThreadStore((s) => s.tagsByForum[channelId] || []);
const fetchThreads = useThreadStore((s) => s.fetchThreads);
const fetchForumTags = useThreadStore((s) => s.fetchForumTags);
const createThread = useThreadStore((s) => s.createThread);
const createForumTag = useThreadStore((s) => s.createForumTag);
const [title, setTitle] = useState('');
const [body, setBody] = useState('');
const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
const [tagName, setTagName] = useState('');
const [showForm, setShowForm] = useState(false);
useEffect(() => {
fetchThreads(channelId);
fetchForumTags(channelId);
}, [channelId, fetchThreads, fetchForumTags]);
const handlePost = async () => {
if (!title.trim()) return;
const t = await createThread(channelId, { name: title.trim(), tag_ids: selectedTagIds });
if (body.trim()) {
// ponytail: send first message via thread store after creation
const { sendThreadMessage } = useThreadStore.getState();
await sendThreadMessage(t.id, body.trim());
}
setTitle('');
setBody('');
setSelectedTagIds([]);
setShowForm(false);
};
const toggleTag = (id: string) => {
setSelectedTagIds((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]);
};
const handleCreateTag = async () => {
if (!tagName.trim()) return;
await createForumTag(channelId, { name: tagName.trim() });
setTagName('');
};
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={() => setShowForm((p) => !p)} className="text-xs text-gb-fg-f hover:text-gb-orange font-mono">[NEW POST]</button>
</div>
{showForm && (
<div className="p-3 border-b border-gb-bg-t space-y-2 font-mono text-xs">
<input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="post title" className="terminal-input w-full" />
<textarea value={body} onChange={(e) => setBody(e.target.value)} placeholder="body (optional)" className="terminal-input w-full h-20" />
<div className="flex flex-wrap gap-2">
{tags.map((tag: ForumTag) => (
<button
key={tag.id}
onClick={() => toggleTag(tag.tag_id || tag.id)}
className={`px-2 py-0.5 border ${selectedTagIds.includes(tag.tag_id || tag.id) ? 'bg-gb-orange text-gb-bg border-gb-orange' : 'border-gb-bg-t text-gb-fg'}`}
>
{tag.emoji && <span>{tag.emoji}</span>} {tag.name}
</button>
))}
</div>
<div className="flex gap-2">
<input value={tagName} onChange={(e) => setTagName(e.target.value)} placeholder="new tag" className="terminal-input flex-1" />
<button onClick={handleCreateTag} className="px-2 bg-gb-bg-s border border-gb-bg-t hover:border-gb-fg-t">[+TAG]</button>
</div>
<button onClick={handlePost} disabled={!title.trim()} className="px-3 py-1 bg-gb-orange text-gb-bg disabled:opacity-50">[POST]</button>
</div>
)}
<div className="flex-1 overflow-y-auto p-3 space-y-2">
{threads.length === 0 && <p className="text-gb-fg-f text-xs font-mono">[no posts]</p>}
{threads.map((t: Thread) => (
<button
key={t.id}
onClick={() => onOpenThread({ id: t.id, name: t.name })}
className="w-full text-left border border-gb-bg-t p-2 hover:border-gb-fg-t bg-gb-bg-s"
>
<div className="text-gb-fg text-sm font-bold truncate">{t.name}</div>
<div className="text-gb-fg-f text-xs">
replies:{t.message_count} latest:{t.last_message_at ? new Date(t.last_message_at).toLocaleDateString() : '—'}
</div>
</button>
))}
</div>
</div>
);
}
web/src/stores/channel.ts
+2 -1
View File
@@ -1,7 +1,7 @@
import { create } from 'zustand';
import { api } from '../lib/api.ts';
export type ChannelType = 'text' | 'voice';
export type ChannelType = 'text' | 'voice' | 'forum';
export interface Channel {
id: string;
@@ -10,6 +10,7 @@ export interface Channel {
type: ChannelType;
category: string | null;
position: number;
slowmode_seconds?: number;
}
interface ChannelState {
web/src/stores/thread.ts
+42
View File
@@ -15,15 +15,26 @@ export interface Thread {
message_count: number;
last_message_at: string | null;
created_at: string;
tag_ids?: string[];
}
export interface ForumTag {
id: string;
tag_id: string;
name: string;
emoji: string | null;
color: string | null;
}
export interface CreateThreadData {
name: string;
message_id?: string;
tag_ids?: string[];
}
interface ThreadState {
threadsByParent: Record<string, Thread[]>;
tagsByForum: Record<string, ForumTag[]>;
activeThreadId: string | null;
messagesByThread: Record<string, Message[]>;
isLoading: boolean;
@@ -35,10 +46,14 @@ interface ThreadState {
fetchThreadMessages: (threadId: string, before?: string) => Promise<void>;
sendThreadMessage: (threadId: string, content: string) => Promise<Message>;
addThreadMessage: (message: Message) => void;
fetchForumTags: (forumChannelId: string) => Promise<void>;
createForumTag: (forumChannelId: string, data: { name: string; emoji?: string; color?: string }) => Promise<ForumTag>;
deleteForumTag: (tagId: string) => Promise<void>;
}
export const useThreadStore = create<ThreadState>((set) => ({
threadsByParent: {},
tagsByForum: {},
activeThreadId: null,
messagesByThread: {},
isLoading: false,
@@ -113,4 +128,31 @@ export const useThreadStore = create<ThreadState>((set) => ({
if (list.some((m) => m.id === message.id)) return state;
return { messagesByThread: { ...state.messagesByThread, [message.channel_id]: [...list, message] } };
}),
fetchForumTags: async (forumChannelId) => {
const tags = await api.get<ForumTag[]>(`/channels/${forumChannelId}/forum-tags`);
set((state) => ({
tagsByForum: { ...state.tagsByForum, [forumChannelId]: Array.isArray(tags) ? tags : [] },
}));
},
createForumTag: async (forumChannelId, data) => {
const tag = await api.post<ForumTag>(`/channels/${forumChannelId}/forum-tags`, data);
set((state) => {
const list = state.tagsByForum[forumChannelId] || [];
return { tagsByForum: { ...state.tagsByForum, [forumChannelId]: [...list, tag] } };
});
return tag;
},
deleteForumTag: async (tagId) => {
await api.delete(`/forum-tags/${tagId}`);
set((state) => {
const next: Record<string, ForumTag[]> = {};
for (const forumId of Object.keys(state.tagsByForum)) {
next[forumId] = state.tagsByForum[forumId].filter((t) => t.id !== tagId && t.tag_id !== tagId);
}
return { tagsByForum: next };
});
},
}));
web/tsconfig.app.tsbuildinfo
+1 -1
View File
@@ -1 +1 @@
{"root":["./src/App.tsx","./src/main.tsx","./src/components/BotManager.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/EmojiPicker.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/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/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/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/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"}