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

feat(phase4): rich profiles, badges DB, block list

Browse Source
This commit is contained in:
Dustin Newkirk
2026-06-30 11:04:32 -04:00
parent 368172e3d6
commit 58ce09cc18
7 changed files with 375 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/ChatArea.tsx
+13 -6
View File
@@ -10,6 +10,7 @@ import { MessageSearch } from "./MessageSearch";
import { ThreadListPanel } from "./ThreadListPanel.tsx";
import { ThreadPanel } from "./ThreadPanel.tsx";
import { ForumView } from "./ForumView.tsx";
import { UserProfileModal } from "./UserProfileModal.tsx";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
@@ -120,6 +121,7 @@ export function ChatArea() {
const [selectMode, setSelectMode] = useState(false);
const [showThreads, setShowThreads] = useState(false);
const [activeThread, setActiveThread] = useState<{ id: string; name: string } | null>(null);
const [profileUserId, setProfileUserId] = useState<string | null>(null);
const bottomRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null);
@@ -282,11 +284,11 @@ export function ChatArea() {
/>
)}
{showThreads && activeChannelId && activeChannel?.type !== 'forum' && (
<ThreadListPanel
channelId={activeChannelId}
onSelect={(t) => setActiveThread(t)}
onClose={() => setShowThreads(false)}
/>
<ThreadListPanel
channelId={activeChannelId}
onSelect={(t: { id: string; name: string }) => setActiveThread(t)}
onClose={() => setShowThreads(false)}
/>
)}
{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">
@@ -339,7 +341,9 @@ export function ChatArea() {
</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-aqua hover:text-gb-orange cursor-pointer" onClick={() => setProfileUserId(message.author_id)}>
&lt;{message.author_username}&gt;
</span>{" "}
<span className="text-gb-fg">{renderContent(message.content, memberUsernames)}</span>
{renderEmbeds(message.embeds)}
</div>
@@ -394,6 +398,9 @@ export function ChatArea() {
</>
)}
</div>
{profileUserId && (
<UserProfileModal userId={profileUserId} onClose={() => setProfileUserId(null)} />
)}
</div>
);
}
web/src/components/UserProfileModal.tsx
+85
View File
@@ -0,0 +1,85 @@
import { useEffect, useState } from 'react';
import { useAuthStore, type PublicProfile } from '../stores/auth.ts';
interface UserProfileModalProps {
userId: string;
onClose: () => void;
}
export function UserProfileModal({ userId, onClose }: UserProfileModalProps) {
const getPublicProfile = useAuthStore((s) => s.getPublicProfile);
const blockUser = useAuthStore((s) => s.blockUser);
const [profile, setProfile] = useState<PublicProfile | null>(null);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
getPublicProfile(userId).then(setProfile).catch(setError);
}, [userId, getPublicProfile]);
const statusColor = {
online: 'bg-gb-green',
idle: 'bg-gb-orange',
dnd: 'bg-gb-red',
offline: 'bg-gb-fg-t',
}[profile?.status || 'offline'];
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-gb-bg/90 p-4" onClick={onClose}>
<div className="bg-gb-bg border border-gb-fg-t w-full max-w-md max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
{error && <div className="p-3 text-gb-red text-xs">ERR: {error}</div>}
{!profile && !error && <div className="p-6 text-gb-fg-f text-center text-xs">[loading...]</div>}
{profile && (
<>
<div
className="h-24 bg-cover bg-center border-b border-gb-bg-t"
style={{ backgroundImage: profile.banner_url ? `url(${profile.banner_url})` : undefined, backgroundColor: profile.accent_color || '#2D3436' }}
/>
<div className="p-4">
<div className="flex items-start gap-3 -mt-12 mb-3">
<img src={profile.avatar} alt="" className="w-20 h-20 border-2 border-gb-bg bg-gb-bg object-cover" />
<div className="mt-12">
<div className="flex items-center gap-2">
<span className={`w-2 h-2 rounded-full ${statusColor}`} />
<span className="text-gb-fg font-bold">{profile.display_name || profile.username}</span>
</div>
<div className="text-gb-fg-s text-xs">@{profile.username}</div>
{profile.pronouns && <div className="text-gb-fg-t text-[10px]">{profile.pronouns}</div>}
</div>
</div>
{profile.tagline && <div className="text-gb-fg text-sm mb-2 italic">"{profile.tagline}"</div>}
{profile.bio && <div className="text-gb-fg-s text-xs mb-3 whitespace-pre-wrap">{profile.bio}</div>}
{profile.social_links && profile.social_links.length > 0 && (
<div className="mb-3 space-y-1">
{profile.social_links.map((link, idx) => (
<a key={idx} href={link.url} target="_blank" rel="noreferrer" className="text-gb-aqua text-xs block hover:underline">
{link.platform}
</a>
))}
</div>
)}
{profile.badges && profile.badges.length > 0 && (
<div className="flex flex-wrap gap-1 mb-3">
{profile.badges.map((badge) => (
<span key={badge.id} className="text-[10px] px-1.5 py-0.5 border border-gb-bg-t text-gb-fg-s" title={badge.description}>
{badge.icon && <span className="mr-1">{badge.icon}</span>}
{badge.name}
</span>
))}
</div>
)}
<div className="flex justify-end gap-2">
<button onClick={onClose} className="text-xs text-gb-fg-f hover:text-gb-orange font-mono">[CLOSE]</button>
<button
onClick={() => blockUser(userId).then(onClose)}
className="text-xs text-gb-red hover:text-gb-orange font-mono"
>
[BLOCK]
</button>
</div>
</div>
</>
)}
</div>
</div>
);
}
web/src/stores/auth.ts
+34
View File
@@ -14,14 +14,32 @@ export interface User {
status: UserStatus;
status_text: string;
created_at: string;
banner_url?: string;
tagline?: string;
pronouns?: string;
social_links?: { platform: string; url: string }[];
}
export interface PublicProfile extends User {
badges: { id: string; name: string; icon: string; description?: string; server_id?: string }[];
}
export type BlockedUser = {
id: string;
username: string;
created_at: string;
};
export interface UpdateProfilePayload {
display_name?: string;
bio?: string;
accent_color?: string;
status_text?: string;
status?: UserStatus;
banner_url?: string;
tagline?: string;
pronouns?: string;
social_links?: { platform: string; url: string }[];
}
interface AuthState {
@@ -43,6 +61,10 @@ interface AuthState {
currentPassword: string,
newPassword: string,
) => Promise<void>;
getPublicProfile: (userId: string) => Promise<PublicProfile>;
listBlocks: () => Promise<BlockedUser[]>;
blockUser: (userId: string) => Promise<void>;
unblockUser: (userId: string) => Promise<void>;
clearError: () => void;
}
@@ -156,4 +178,16 @@ export const useAuthStore = create<AuthState>((set) => ({
},
clearError: () => set({ error: null }),
getPublicProfile: async (userId) => api.get<PublicProfile>(`/users/${userId}/profile`),
listBlocks: async () => api.get<BlockedUser[]>('/users/me/blocks'),
blockUser: async (userId) => {
await api.post('/users/me/blocks', { user_id: userId });
},
unblockUser: async (userId) => {
await api.delete(`/users/me/blocks/${userId}`);
},
}));
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/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"}
{"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/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"}