Phase 3: Polish & PWA
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
This commit is contained in:
@@ -0,0 +1,139 @@
|
||||
import { useState } from 'react';
|
||||
import { api } from '../lib/api.ts';
|
||||
|
||||
interface InviteModalProps {
|
||||
serverId: string;
|
||||
serverName: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface Invite {
|
||||
code: string;
|
||||
url: string;
|
||||
expires_at: string | null;
|
||||
max_uses: number | null;
|
||||
}
|
||||
|
||||
export function InviteModal({ serverId, serverName, onClose }: InviteModalProps) {
|
||||
const [expiresHours, setExpiresHours] = useState(24);
|
||||
const [maxUses, setMaxUses] = useState<number | ''>('');
|
||||
const [invite, setInvite] = useState<Invite | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const createInvite = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const payload: Record<string, unknown> = {
|
||||
expires_hours: expiresHours,
|
||||
};
|
||||
if (maxUses !== '') {
|
||||
payload.max_uses = maxUses;
|
||||
}
|
||||
const result = await api.post<Invite>(`/servers/${serverId}/invites`, payload);
|
||||
setInvite(result);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to create invite');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const copyLink = () => {
|
||||
if (invite) {
|
||||
navigator.clipboard.writeText(invite.url);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={onClose}>
|
||||
<div className="bg-gb-bg border border-gb-bg-t p-4 min-w-[350px] font-mono" onClick={e => e.stopPropagation()}>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-sm text-gb-orange">INVITE TO {serverName.toUpperCase()}</span>
|
||||
<button onClick={onClose} className="text-xs text-gb-red">[x]</button>
|
||||
</div>
|
||||
|
||||
{!invite ? (
|
||||
<>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-xs text-gb-fg-f block mb-1">EXPIRES IN:</label>
|
||||
<select
|
||||
value={expiresHours}
|
||||
onChange={(e) => setExpiresHours(Number(e.target.value))}
|
||||
className="w-full px-2 py-1 bg-gb-bg-s text-gb-fg text-xs border-none outline-none"
|
||||
>
|
||||
<option value={1}>1 hour</option>
|
||||
<option value={6}>6 hours</option>
|
||||
<option value={12}>12 hours</option>
|
||||
<option value={24}>24 hours</option>
|
||||
<option value={168}>7 days</option>
|
||||
<option value={0}>Never</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gb-fg-f block mb-1">MAX USES:</label>
|
||||
<input
|
||||
type="number"
|
||||
value={maxUses}
|
||||
onChange={(e) => setMaxUses(e.target.value === '' ? '' : Number(e.target.value))}
|
||||
placeholder="unlimited"
|
||||
min={1}
|
||||
className="w-full px-2 py-1 bg-gb-bg-s text-gb-fg text-xs border-none outline-none"
|
||||
/>
|
||||
</div>
|
||||
{error && (
|
||||
<div className="text-xs text-gb-red">{error}</div>
|
||||
)}
|
||||
<button
|
||||
onClick={createInvite}
|
||||
disabled={loading}
|
||||
className="w-full px-3 py-1.5 bg-gb-orange text-gb-bg text-xs font-mono hover:bg-gb-yellow transition-colors disabled:opacity-50"
|
||||
>
|
||||
{loading ? 'CREATING...' : '[GENERATE LINK]'}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="text-xs text-gb-fg-f">Share this link:</div>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={invite.url}
|
||||
readOnly
|
||||
className="flex-1 px-2 py-1 bg-gb-bg-s text-gb-fg text-xs border-none outline-none"
|
||||
/>
|
||||
<button
|
||||
onClick={copyLink}
|
||||
className="px-3 py-1 bg-gb-bg-t text-gb-fg text-xs font-mono hover:bg-gb-bg-s transition-colors"
|
||||
>
|
||||
{copied ? '[COPIED!]' : '[COPY]'}
|
||||
</button>
|
||||
</div>
|
||||
{invite.expires_at && (
|
||||
<div className="text-xs text-gb-fg-f">
|
||||
Expires: {new Date(invite.expires_at).toLocaleString()}
|
||||
</div>
|
||||
)}
|
||||
{invite.max_uses && (
|
||||
<div className="text-xs text-gb-fg-f">
|
||||
Max uses: {invite.max_uses}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setInvite(null)}
|
||||
className="text-xs text-gb-aqua hover:text-gb-orange transition-colors"
|
||||
>
|
||||
[CREATE ANOTHER]
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user