hobokenchicken
bb650ac2a0
Backend: - DB: reactions table, invites table, reply_to column on messages - gateway/events.go: added REACTION_ADD, REACTION_REMOVE events - internal/reaction/handlers.go: reaction CRUD with WebSocket broadcast - internal/invite/handlers.go: invite creation, info, join with code - gateway/hub.go: presence tracking with idle detection - gateway/client.go: idle timeout support Frontend - Social: - TypingIndicator: real-time 'user is typing...' display - ReactionBar: emoji reactions on messages with counts - EmojiPicker: searchable emoji grid for reactions - ReplyBar: quoted reply display above messages - MentionPopup: @mention autocomplete with user list Frontend - PWA: - manifest.json: PWA manifest with theme color and icons - sw.js: service worker with cache-first strategy and push support - stores/push.ts: push notification subscription management - InstallPrompt: 'Add to Home Screen' banner Frontend - Mobile: - MobileNav: bottom nav bar for mobile (servers/channels/chat/members) - MobileDrawer: slide-out drawer with server bar + channel list - index.html: PWA meta tags, safe area viewport Frontend - Polish: - ThemeToggle: dark/light mode switch with localStorage persistence - InviteModal: generate invite links with expiry and max uses - JoinServer: /invite/:code join flow - stores/typing.ts: typing indicator state management - stores/presence.ts: real-time presence tracking - tailwind.config.js: darkMode: 'class', light mode color tokens - styles/index.css: light mode CSS variable overrides
56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
interface ReplyBarProps {
|
|
replyTo: {
|
|
id: string;
|
|
content: string;
|
|
author: {
|
|
username: string;
|
|
accent_color?: string;
|
|
};
|
|
} | null;
|
|
onCancel?: () => void;
|
|
compact?: boolean;
|
|
}
|
|
|
|
export function ReplyBar({ replyTo, onCancel, compact }: ReplyBarProps) {
|
|
if (!replyTo) return null;
|
|
|
|
const truncatedContent = replyTo.content.length > 100
|
|
? replyTo.content.slice(0, 100) + '...'
|
|
: replyTo.content;
|
|
|
|
if (compact) {
|
|
return (
|
|
<div className="flex items-center gap-1 text-xs text-gb-fg-f font-mono pl-4 border-l-2 border-gb-orange">
|
|
<span className="text-gb-orange">↩</span>
|
|
<span style={{ color: replyTo.author.accent_color || 'var(--gb-fg-f)' }}>
|
|
{replyTo.author.username}
|
|
</span>
|
|
<span className="truncate">{truncatedContent}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 px-3 py-1.5 bg-gb-bg-h border-l-2 border-gb-orange mb-1">
|
|
<span className="text-gb-orange text-xs font-mono">↩</span>
|
|
<span
|
|
className="text-xs font-mono font-bold"
|
|
style={{ color: replyTo.author.accent_color || 'var(--gb-fg-s)' }}
|
|
>
|
|
{replyTo.author.username}
|
|
</span>
|
|
<span className="text-xs font-mono text-gb-fg-f truncate flex-1">
|
|
{truncatedContent}
|
|
</span>
|
|
{onCancel && (
|
|
<button
|
|
onClick={onCancel}
|
|
className="text-xs text-gb-red font-mono hover:text-gb-orange transition-colors"
|
|
>
|
|
[x]
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|