Private
Public Access
Rebuild frontend from the Claude Design handoff, DarkSingularity brand
Replaces the Phase 1 placeholder UI with a single persistent app shell (top bar + sidebar + chat pane, 860px responsive breakpoint) matching the "PWA chat system UI" design handoff: message bubbles with consecutive-run avatar/name grouping, auto-growing composer, room search, and the real DarkSingularity logo (also used to regenerate the PWA icons). The handoff didn't cover Phase 2 (private rooms, roles, invites) or browsing/joining open rooms, so those are added using the same visual language: a room info panel with role badges, invite-by-username with a pending-invites list, member management (remove/promote/demote/transfer ownership), room settings (rename/describe/delete), and separate browse-rooms/invites-inbox modals. Unread badges, last-message preview, and the typing indicator are deliberately deferred -- both need new backend features (read-tracking, a WS typing event) that weren't in scope this pass. Two small backend additions round out data the new UI needs but the API didn't expose: MessageRead.username (historic messages had no sender name) and InviteRead.target_username / MyInviteRead.room_name+invited_by_username (a recipient's invite list can't otherwise resolve a room they're not in). Both are additive; 35 backend tests still pass. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
@@ -0,0 +1,85 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { ApiError } from '../api/client'
|
||||
import { joinRoom, listRooms } from '../api/rooms'
|
||||
import type { RoomListItem } from '../types'
|
||||
import { RoomAvatar } from './RoomAvatar'
|
||||
import './Modal.css'
|
||||
|
||||
interface BrowseRoomsModalProps {
|
||||
onClose: () => void
|
||||
onJoined: (roomId: string) => void
|
||||
}
|
||||
|
||||
export function BrowseRoomsModal({ onClose, onJoined }: BrowseRoomsModalProps) {
|
||||
const [rooms, setRooms] = useState<RoomListItem[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [joiningId, setJoiningId] = useState<string | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
listRooms()
|
||||
.then(setRooms)
|
||||
.catch((err) => setError(err instanceof ApiError ? err.message : String(err)))
|
||||
.finally(() => setLoading(false))
|
||||
}, [])
|
||||
|
||||
async function handleJoin(roomId: string) {
|
||||
setJoiningId(roomId)
|
||||
setError(null)
|
||||
try {
|
||||
await joinRoom(roomId)
|
||||
onJoined(roomId)
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : String(err))
|
||||
} finally {
|
||||
setJoiningId(null)
|
||||
}
|
||||
}
|
||||
|
||||
const joinable = rooms.filter((r) => !r.is_member)
|
||||
|
||||
return (
|
||||
<div className="modal-scrim" onClick={onClose}>
|
||||
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<h2>Browse open rooms</h2>
|
||||
<button type="button" className="modal-close" onClick={onClose} aria-label="Close">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && <p className="modal-error">{error}</p>}
|
||||
|
||||
{loading ? (
|
||||
<p className="modal-empty">Loading...</p>
|
||||
) : joinable.length === 0 ? (
|
||||
<p className="modal-empty">No open rooms to join right now.</p>
|
||||
) : (
|
||||
joinable.map((room, i) => (
|
||||
<div key={room.id} className="modal-list-row">
|
||||
<RoomAvatar colorIndex={i} size={30} />
|
||||
<div className="modal-list-row-body">
|
||||
<div className="modal-list-row-title">{room.name}</div>
|
||||
{room.description && <div className="modal-list-row-sub">{room.description}</div>}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-secondary"
|
||||
disabled={joiningId === room.id}
|
||||
onClick={() => handleJoin(room.id)}
|
||||
>
|
||||
Join
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
||||
<div className="modal-actions" style={{ marginTop: '1rem' }}>
|
||||
<button type="button" className="btn-secondary" onClick={onClose}>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
.chat-pane {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
background: var(--ds-void);
|
||||
}
|
||||
|
||||
.chat-pane-header {
|
||||
height: 56px;
|
||||
min-height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
padding: 0 var(--sp-4);
|
||||
border-bottom: 1px solid var(--ds-border);
|
||||
background: var(--ds-surface);
|
||||
}
|
||||
|
||||
.chat-pane-back {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--ds-muted);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.chat-pane-title-block {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.chat-pane-title {
|
||||
font-weight: 700;
|
||||
font-size: 0.96rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chat-pane-subtitle {
|
||||
font-size: 0.76rem;
|
||||
color: var(--ds-muted);
|
||||
}
|
||||
|
||||
.chat-pane-info-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius);
|
||||
background: transparent;
|
||||
border: 1px solid var(--ds-border);
|
||||
color: var(--ds-accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.chat-pane-info-btn-active {
|
||||
background: var(--ds-surface-2);
|
||||
}
|
||||
|
||||
.chat-pane-error {
|
||||
color: var(--ds-danger);
|
||||
font-size: 0.86rem;
|
||||
padding: var(--sp-2) var(--sp-4) 0;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { getRoomMessages } from '../api/rooms'
|
||||
import { useChatSocket } from '../ws/useChatSocket'
|
||||
import type { ChatMessageEnvelope, Message, MyRoomItem, RoomMember, ServerEnvelope } from '../types'
|
||||
import { Composer } from './Composer'
|
||||
import { MessageList } from './MessageList'
|
||||
import './ChatPane.css'
|
||||
|
||||
interface ChatPaneProps {
|
||||
room: MyRoomItem
|
||||
members: RoomMember[]
|
||||
isMobile: boolean
|
||||
onBack: () => void
|
||||
onToggleInfo: () => void
|
||||
infoOpen: boolean
|
||||
}
|
||||
|
||||
export function ChatPane({ room, members, isMobile, onBack, onToggleInfo, infoOpen }: ChatPaneProps) {
|
||||
const navigate = useNavigate()
|
||||
const [history, setHistory] = useState<Message[]>([])
|
||||
const [live, setLive] = useState<ChatMessageEnvelope[]>([])
|
||||
const [wsError, setWsError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
setHistory([])
|
||||
setLive([])
|
||||
setWsError(null)
|
||||
getRoomMessages(room.id).then(setHistory).catch((err) => setWsError(String(err)))
|
||||
}, [room.id])
|
||||
|
||||
const onMessage = useCallback((envelope: ServerEnvelope) => {
|
||||
if (envelope.type === 'message') {
|
||||
setLive((prev) => [...prev, envelope])
|
||||
} else if (envelope.type === 'error') {
|
||||
setWsError(envelope.detail)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const onUnauthenticated = useCallback(() => navigate('/login'), [navigate])
|
||||
|
||||
const { connected, send } = useChatSocket({ roomId: room.id, onMessage, onUnauthenticated })
|
||||
|
||||
return (
|
||||
<section className="chat-pane">
|
||||
<header className="chat-pane-header">
|
||||
{isMobile && (
|
||||
<button type="button" className="chat-pane-back" onClick={onBack} aria-label="Back to rooms">
|
||||
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" aria-hidden="true">
|
||||
<polyline points="14,4 6,10 14,16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
<div className="chat-pane-title-block">
|
||||
<div className="chat-pane-title">#{room.name}</div>
|
||||
<div className="chat-pane-subtitle">{members.length} member{members.length === 1 ? '' : 's'}</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={`chat-pane-info-btn${infoOpen ? ' chat-pane-info-btn-active' : ''}`}
|
||||
onClick={onToggleInfo}
|
||||
aria-label="Room details"
|
||||
aria-pressed={infoOpen}
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 20 20" fill="none" aria-hidden="true">
|
||||
<circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="1.6" />
|
||||
<circle cx="10" cy="6.4" r="1" fill="currentColor" />
|
||||
<rect x="9" y="9" width="2" height="6" rx="1" fill="currentColor" />
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{wsError && <p className="chat-pane-error">{wsError}</p>}
|
||||
|
||||
<MessageList messages={[...history, ...live]} members={members} />
|
||||
<Composer roomName={room.name} disabled={!connected} onSend={send} />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
.composer {
|
||||
padding: var(--sp-3) var(--sp-4);
|
||||
border-top: 1px solid var(--ds-border);
|
||||
background: var(--ds-surface);
|
||||
display: flex;
|
||||
gap: var(--sp-2);
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.composer textarea {
|
||||
flex: 1;
|
||||
resize: none;
|
||||
background: var(--ds-surface-2);
|
||||
border: 1px solid var(--ds-border);
|
||||
border-radius: var(--radius);
|
||||
padding: 9px 12px;
|
||||
color: var(--ds-text);
|
||||
font-size: 0.88rem;
|
||||
outline: none;
|
||||
max-height: 120px;
|
||||
}
|
||||
|
||||
.composer textarea:focus {
|
||||
border-color: var(--ds-accent);
|
||||
}
|
||||
|
||||
.composer-send {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
flex: none;
|
||||
border-radius: var(--radius);
|
||||
background: var(--ds-accent);
|
||||
color: var(--ds-void);
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.composer-send:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { useRef, useState, type KeyboardEvent } from 'react'
|
||||
import './Composer.css'
|
||||
|
||||
interface ComposerProps {
|
||||
roomName: string
|
||||
disabled?: boolean
|
||||
onSend: (content: string) => void
|
||||
}
|
||||
|
||||
export function Composer({ roomName, disabled, onSend }: ComposerProps) {
|
||||
const [value, setValue] = useState('')
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null)
|
||||
|
||||
function autoGrow() {
|
||||
const el = textareaRef.current
|
||||
if (!el) return
|
||||
el.style.height = 'auto'
|
||||
el.style.height = `${Math.min(el.scrollHeight, 120)}px`
|
||||
}
|
||||
|
||||
function handleSend() {
|
||||
const trimmed = value.trim()
|
||||
if (!trimmed) return
|
||||
onSend(trimmed)
|
||||
setValue('')
|
||||
requestAnimationFrame(autoGrow)
|
||||
}
|
||||
|
||||
function handleKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
handleSend()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="composer">
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
rows={1}
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
onChange={(e) => {
|
||||
setValue(e.target.value)
|
||||
autoGrow()
|
||||
}}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={`Message #${roomName}`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="composer-send"
|
||||
onClick={handleSend}
|
||||
disabled={disabled || !value.trim()}
|
||||
aria-label="Send message"
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 20 20" aria-hidden="true">
|
||||
<polygon points="2,2 18,10 2,18 6,10" fill="currentColor" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { acceptInvite, declineInvite, listMyInvites } from '../api/invites'
|
||||
import { ApiError } from '../api/client'
|
||||
import type { MyInvite } from '../types'
|
||||
import './Modal.css'
|
||||
|
||||
interface InvitesModalProps {
|
||||
onClose: () => void
|
||||
onAccepted: (roomId: string) => void
|
||||
onInvitesChanged: (count: number) => void
|
||||
}
|
||||
|
||||
export function InvitesModal({ onClose, onAccepted, onInvitesChanged }: InvitesModalProps) {
|
||||
const [invites, setInvites] = useState<MyInvite[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [busyId, setBusyId] = useState<string | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
async function refresh() {
|
||||
const list = await listMyInvites()
|
||||
setInvites(list)
|
||||
onInvitesChanged(list.length)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
refresh()
|
||||
.catch((err) => setError(err instanceof ApiError ? err.message : String(err)))
|
||||
.finally(() => setLoading(false))
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
async function handleAccept(invite: MyInvite) {
|
||||
setBusyId(invite.id)
|
||||
setError(null)
|
||||
try {
|
||||
await acceptInvite(invite.id)
|
||||
await refresh()
|
||||
onAccepted(invite.room_id)
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : String(err))
|
||||
} finally {
|
||||
setBusyId(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDecline(invite: MyInvite) {
|
||||
setBusyId(invite.id)
|
||||
setError(null)
|
||||
try {
|
||||
await declineInvite(invite.id)
|
||||
await refresh()
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : String(err))
|
||||
} finally {
|
||||
setBusyId(null)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="modal-scrim" onClick={onClose}>
|
||||
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<h2>Your invites</h2>
|
||||
<button type="button" className="modal-close" onClick={onClose} aria-label="Close">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && <p className="modal-error">{error}</p>}
|
||||
|
||||
{loading ? (
|
||||
<p className="modal-empty">Loading...</p>
|
||||
) : invites.length === 0 ? (
|
||||
<p className="modal-empty">No pending invites.</p>
|
||||
) : (
|
||||
invites.map((invite) => (
|
||||
<div key={invite.id} className="modal-list-row">
|
||||
<div className="modal-list-row-body">
|
||||
<div className="modal-list-row-title">{invite.room_name}</div>
|
||||
<div className="modal-list-row-sub">Invited by {invite.invited_by_username}</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '0.5rem' }}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-secondary"
|
||||
disabled={busyId === invite.id}
|
||||
onClick={() => handleDecline(invite)}
|
||||
>
|
||||
Decline
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-primary"
|
||||
disabled={busyId === invite.id}
|
||||
onClick={() => handleAccept(invite)}
|
||||
>
|
||||
Accept
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
||||
<div className="modal-actions" style={{ marginTop: '1rem' }}>
|
||||
<button type="button" className="btn-secondary" onClick={onClose}>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import { useState, type FormEvent } from 'react'
|
||||
|
||||
interface MessageInputProps {
|
||||
disabled?: boolean
|
||||
onSend: (content: string) => void
|
||||
}
|
||||
|
||||
export function MessageInput({ disabled, onSend }: MessageInputProps) {
|
||||
const [value, setValue] = useState('')
|
||||
|
||||
function handleSubmit(e: FormEvent) {
|
||||
e.preventDefault()
|
||||
const trimmed = value.trim()
|
||||
if (!trimmed) return
|
||||
onSend(trimmed)
|
||||
setValue('')
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', gap: '0.5rem', padding: '0.5rem' }}>
|
||||
<input
|
||||
style={{ flex: 1 }}
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
placeholder="Message..."
|
||||
/>
|
||||
<button type="submit" disabled={disabled || !value.trim()}>
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
.message-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--sp-4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.message-row {
|
||||
display: flex;
|
||||
gap: var(--sp-2);
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.message-row-mine {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.message-avatar-slot {
|
||||
width: 28px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.message-bubble-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
max-width: 65%;
|
||||
}
|
||||
|
||||
.message-row-mine .message-bubble-wrap {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.message-author {
|
||||
font-size: 0.76rem;
|
||||
color: var(--ds-muted);
|
||||
margin-bottom: 3px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
background: var(--ds-surface-2);
|
||||
color: var(--ds-text);
|
||||
padding: 8px 12px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.45;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.message-bubble-mine {
|
||||
background: var(--ds-accent-2);
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 0.68rem;
|
||||
color: var(--ds-muted);
|
||||
margin-top: 3px;
|
||||
font-family: var(--mono);
|
||||
}
|
||||
@@ -1,43 +1,50 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import type { ChatMessageEnvelope, Message } from '../types'
|
||||
|
||||
interface DisplayMessage {
|
||||
id: string
|
||||
username: string
|
||||
content: string
|
||||
created_at: string
|
||||
}
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
import { senderColorIndex } from '../lib/messageGrouping'
|
||||
import type { ChatMessageEnvelope, Message, RoomMember } from '../types'
|
||||
import { UserAvatar } from './UserAvatar'
|
||||
import './MessageList.css'
|
||||
|
||||
interface MessageListProps {
|
||||
messages: (Message | ChatMessageEnvelope)[]
|
||||
usernames: Record<string, string>
|
||||
members: RoomMember[]
|
||||
}
|
||||
|
||||
export function MessageList({ messages, usernames }: MessageListProps) {
|
||||
export function MessageList({ messages, members }: MessageListProps) {
|
||||
const { user } = useAuth()
|
||||
const bottomRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
bottomRef.current?.scrollIntoView({ block: 'end' })
|
||||
}, [messages.length])
|
||||
|
||||
const display: DisplayMessage[] = messages.map((m) => ({
|
||||
id: m.id,
|
||||
content: m.content,
|
||||
created_at: m.created_at,
|
||||
username: 'username' in m ? m.username : usernames[m.user_id] ?? m.user_id,
|
||||
}))
|
||||
|
||||
return (
|
||||
<div style={{ flex: 1, overflowY: 'auto', padding: '0.5rem' }}>
|
||||
{display.map((m) => (
|
||||
<div key={m.id} style={{ marginBottom: '0.5rem' }}>
|
||||
<strong>{m.username}</strong>{' '}
|
||||
<span style={{ color: '#888', fontSize: '0.8em' }}>
|
||||
{new Date(m.created_at).toLocaleTimeString()}
|
||||
</span>
|
||||
<div>{m.content}</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="message-list">
|
||||
{messages.map((msg, i) => {
|
||||
const mine = msg.user_id === user?.id
|
||||
const prev = messages[i - 1]
|
||||
const showAvatar = !mine && (!prev || prev.user_id !== msg.user_id)
|
||||
const showName = showAvatar
|
||||
|
||||
return (
|
||||
<div key={msg.id} className={`message-row${mine ? ' message-row-mine' : ''}`}>
|
||||
{!mine && (
|
||||
<div className="message-avatar-slot">
|
||||
{showAvatar && (
|
||||
<UserAvatar username={msg.username} colorIndex={senderColorIndex(msg.username, members)} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="message-bubble-wrap">
|
||||
{showName && <div className="message-author">{msg.username}</div>}
|
||||
<div className={`message-bubble${mine ? ' message-bubble-mine' : ''}`}>{msg.content}</div>
|
||||
<div className="message-time">
|
||||
{new Date(msg.created_at).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<div ref={bottomRef} />
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
.modal-scrim {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(7, 8, 15, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 40;
|
||||
padding: var(--sp-4);
|
||||
}
|
||||
|
||||
.modal {
|
||||
width: min(380px, 100%);
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
background: var(--ds-surface);
|
||||
border: 1px solid var(--ds-border);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--sp-6);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--sp-4);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--ds-muted);
|
||||
cursor: pointer;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.modal-field-label {
|
||||
font-size: 0.78rem;
|
||||
color: var(--ds-muted);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.modal input[type='text'],
|
||||
.modal textarea {
|
||||
width: 100%;
|
||||
background: var(--ds-surface-2);
|
||||
border: 1px solid var(--ds-border);
|
||||
border-radius: var(--radius);
|
||||
padding: 9px 10px;
|
||||
color: var(--ds-text);
|
||||
font-family: var(--sans);
|
||||
font-size: 0.88rem;
|
||||
outline: none;
|
||||
margin-bottom: var(--sp-4);
|
||||
}
|
||||
|
||||
.modal input[type='text']:focus,
|
||||
.modal textarea:focus {
|
||||
border-color: var(--ds-accent);
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
.modal-error {
|
||||
color: var(--ds-danger);
|
||||
font-size: 0.82rem;
|
||||
margin: -8px 0 var(--sp-3);
|
||||
}
|
||||
|
||||
.toggle-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--sp-3);
|
||||
margin-bottom: var(--sp-4);
|
||||
}
|
||||
|
||||
.toggle-row .toggle-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.toggle-row .toggle-label .t {
|
||||
font-size: 0.86rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.toggle-row .toggle-label .d {
|
||||
font-size: 0.74rem;
|
||||
color: var(--ds-muted);
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
width: 38px;
|
||||
height: 22px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.switch .track {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--ds-border);
|
||||
border-radius: var(--radius-pill);
|
||||
transition: background 0.15s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.switch .track::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--ds-text);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.switch input:checked + .track {
|
||||
background: var(--ds-accent);
|
||||
}
|
||||
|
||||
.switch input:checked + .track::after {
|
||||
transform: translateX(16px);
|
||||
background: var(--ds-void);
|
||||
}
|
||||
|
||||
.modal-empty {
|
||||
color: var(--ds-muted);
|
||||
font-size: 0.86rem;
|
||||
padding: var(--sp-4) 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-list-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-2) 0;
|
||||
border-bottom: 1px solid var(--ds-border);
|
||||
}
|
||||
|
||||
.modal-list-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.modal-list-row-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.modal-list-row-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.88rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.modal-list-row-sub {
|
||||
font-size: 0.76rem;
|
||||
color: var(--ds-muted);
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import { useState, type FormEvent } from 'react'
|
||||
import { ApiError } from '../api/client'
|
||||
import { createRoom } from '../api/rooms'
|
||||
import './Modal.css'
|
||||
|
||||
interface NewRoomModalProps {
|
||||
onClose: () => void
|
||||
onCreated: (roomId: string) => void
|
||||
}
|
||||
|
||||
export function NewRoomModal({ onClose, onCreated }: NewRoomModalProps) {
|
||||
const [name, setName] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const [isPrivate, setIsPrivate] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
async function handleSubmit(e: FormEvent) {
|
||||
e.preventDefault()
|
||||
const trimmed = name.trim()
|
||||
if (!trimmed) return
|
||||
setSubmitting(true)
|
||||
setError(null)
|
||||
try {
|
||||
const room = await createRoom(trimmed, description.trim(), isPrivate)
|
||||
onCreated(room.id)
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : String(err))
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="modal-scrim" onClick={onClose}>
|
||||
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<h2>New Conversation</h2>
|
||||
<button type="button" className="modal-close" onClick={onClose} aria-label="Close">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="modal-field-label">Room name</div>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="e.g. networking"
|
||||
autoFocus
|
||||
/>
|
||||
<div className="modal-field-label">Description (optional)</div>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="What's this room for?"
|
||||
rows={2}
|
||||
/>
|
||||
<div className="toggle-row">
|
||||
<div className="toggle-label">
|
||||
<span className="t">Private room</span>
|
||||
<span className="d">Joinable by invite only</span>
|
||||
</div>
|
||||
<label className="switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isPrivate}
|
||||
onChange={(e) => setIsPrivate(e.target.checked)}
|
||||
/>
|
||||
<span className="track" />
|
||||
</label>
|
||||
</div>
|
||||
{error && <p className="modal-error">{error}</p>}
|
||||
<div className="modal-actions">
|
||||
<button type="button" className="btn-secondary" onClick={onClose}>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn-primary" disabled={submitting || !name.trim()}>
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.room-avatar {
|
||||
border-radius: var(--radius);
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: var(--ds-void);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { accentForIndex } from '../lib/avatar'
|
||||
import './RoomAvatar.css'
|
||||
|
||||
interface RoomAvatarProps {
|
||||
colorIndex: number
|
||||
size?: number
|
||||
}
|
||||
|
||||
export function RoomAvatar({ colorIndex, size = 34 }: RoomAvatarProps) {
|
||||
return (
|
||||
<div
|
||||
className="room-avatar"
|
||||
style={{ width: size, height: size, background: accentForIndex(colorIndex) }}
|
||||
>
|
||||
#
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,239 @@
|
||||
.room-info-panel {
|
||||
width: 260px;
|
||||
min-width: 260px;
|
||||
border-left: 1px solid var(--ds-border);
|
||||
background: var(--ds-void-2);
|
||||
padding: var(--sp-4);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.room-info-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--sp-4);
|
||||
}
|
||||
|
||||
.room-info-header-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--ds-muted);
|
||||
}
|
||||
|
||||
.room-info-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--ds-muted);
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.room-info-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: var(--sp-6);
|
||||
}
|
||||
|
||||
.room-info-name {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.room-info-sub {
|
||||
font-size: 0.78rem;
|
||||
color: var(--ds-muted);
|
||||
}
|
||||
|
||||
.room-info-section {
|
||||
margin-bottom: var(--sp-6);
|
||||
}
|
||||
|
||||
.room-info-label {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--ds-muted);
|
||||
margin-bottom: var(--sp-2);
|
||||
}
|
||||
|
||||
.room-info-member-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
padding: 6px 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.room-info-member-name {
|
||||
font-size: 0.84rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.room-info-member-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.room-info-member-actions button {
|
||||
background: transparent;
|
||||
border: 1px solid var(--ds-border);
|
||||
color: var(--ds-muted);
|
||||
font-size: 0.7rem;
|
||||
padding: 3px 7px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.room-info-member-actions button:hover {
|
||||
color: var(--ds-text);
|
||||
border-color: var(--ds-accent);
|
||||
}
|
||||
|
||||
.role-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
padding: 2px 8px;
|
||||
text-transform: capitalize;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.role-badge-owner {
|
||||
border: 1px solid color-mix(in srgb, var(--ds-highlight) 50%, transparent);
|
||||
background: color-mix(in srgb, var(--ds-highlight) 14%, transparent);
|
||||
color: var(--ds-highlight);
|
||||
}
|
||||
|
||||
.role-badge-admin {
|
||||
border: 1px solid color-mix(in srgb, var(--ds-accent-2) 50%, transparent);
|
||||
background: color-mix(in srgb, var(--ds-accent-2) 14%, transparent);
|
||||
color: #b9b3ff;
|
||||
}
|
||||
|
||||
.role-badge-member {
|
||||
border: 1px solid var(--ds-border);
|
||||
background: transparent;
|
||||
color: var(--ds-muted);
|
||||
}
|
||||
|
||||
.room-info-invite-form {
|
||||
display: flex;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
.room-info-invite-form input {
|
||||
flex: 1;
|
||||
background: var(--ds-surface-2);
|
||||
border: 1px solid var(--ds-border);
|
||||
border-radius: var(--radius);
|
||||
padding: 7px 10px;
|
||||
color: var(--ds-text);
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
.room-info-pending {
|
||||
margin-top: var(--sp-2);
|
||||
}
|
||||
|
||||
.room-info-pending-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 0.82rem;
|
||||
color: var(--ds-text);
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.room-info-error {
|
||||
color: var(--ds-danger);
|
||||
font-size: 0.78rem;
|
||||
margin: 6px 0 0;
|
||||
}
|
||||
|
||||
.room-info-settings-toggle {
|
||||
background: transparent;
|
||||
border: 1px solid var(--ds-border);
|
||||
color: var(--ds-text);
|
||||
border-radius: var(--radius);
|
||||
padding: 7px 10px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.room-info-settings-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-2);
|
||||
margin-top: var(--sp-2);
|
||||
}
|
||||
|
||||
.room-info-settings-form label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 0.76rem;
|
||||
color: var(--ds-muted);
|
||||
}
|
||||
|
||||
.room-info-settings-form input,
|
||||
.room-info-settings-form textarea {
|
||||
background: var(--ds-surface-2);
|
||||
border: 1px solid var(--ds-border);
|
||||
border-radius: var(--radius);
|
||||
padding: 7px 10px;
|
||||
color: var(--ds-text);
|
||||
font-size: 0.84rem;
|
||||
font-family: var(--sans);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.room-info-danger-link {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--ds-danger);
|
||||
font-size: 0.78rem;
|
||||
cursor: pointer;
|
||||
padding: 4px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.room-info-leave {
|
||||
margin-top: auto;
|
||||
align-self: flex-start;
|
||||
background: transparent;
|
||||
border: 1px solid color-mix(in srgb, var(--ds-danger) 45%, transparent);
|
||||
color: var(--ds-danger);
|
||||
border-radius: var(--radius);
|
||||
padding: 8px 14px;
|
||||
font-size: 0.86rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.room-info-leave:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--ds-danger) 12%, transparent);
|
||||
}
|
||||
|
||||
.room-info-leave:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -0,0 +1,297 @@
|
||||
import { useEffect, useState, type FormEvent } from 'react'
|
||||
import { ApiError } from '../api/client'
|
||||
import { createInvite, listRoomInvites, revokeInvite } from '../api/invites'
|
||||
import {
|
||||
changeMemberRole,
|
||||
deleteRoom,
|
||||
leaveRoom,
|
||||
removeMember,
|
||||
transferOwnership,
|
||||
updateRoom,
|
||||
} from '../api/rooms'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
import type { Invite, MyRoomItem, RoomMember, RoomRole } from '../types'
|
||||
import { RoomAvatar } from './RoomAvatar'
|
||||
import { UserAvatar } from './UserAvatar'
|
||||
import './RoomInfoPanel.css'
|
||||
|
||||
interface RoomInfoPanelProps {
|
||||
room: MyRoomItem
|
||||
members: RoomMember[]
|
||||
onClose: () => void
|
||||
onMembersChanged: () => void
|
||||
onRoomUpdated: () => void
|
||||
onRoomDeleted: () => void
|
||||
onLeft: () => void
|
||||
}
|
||||
|
||||
export function RoomInfoPanel({
|
||||
room,
|
||||
members,
|
||||
onClose,
|
||||
onMembersChanged,
|
||||
onRoomUpdated,
|
||||
onRoomDeleted,
|
||||
onLeft,
|
||||
}: RoomInfoPanelProps) {
|
||||
const { user } = useAuth()
|
||||
const myRole = room.role
|
||||
|
||||
const [inviteUsername, setInviteUsername] = useState('')
|
||||
const [inviteError, setInviteError] = useState<string | null>(null)
|
||||
const [pendingInvites, setPendingInvites] = useState<Invite[]>([])
|
||||
const [busyUserId, setBusyUserId] = useState<string | null>(null)
|
||||
const [settingsOpen, setSettingsOpen] = useState(false)
|
||||
const [nameDraft, setNameDraft] = useState(room.name)
|
||||
const [descDraft, setDescDraft] = useState(room.description ?? '')
|
||||
const [roomError, setRoomError] = useState<string | null>(null)
|
||||
|
||||
const canManage = myRole === 'admin' || myRole === 'owner'
|
||||
|
||||
useEffect(() => {
|
||||
setNameDraft(room.name)
|
||||
setDescDraft(room.description ?? '')
|
||||
if (canManage) {
|
||||
listRoomInvites(room.id).then(setPendingInvites).catch(() => setPendingInvites([]))
|
||||
} else {
|
||||
setPendingInvites([])
|
||||
}
|
||||
}, [room.id, room.name, room.description, canManage])
|
||||
|
||||
async function handleInvite(e: FormEvent) {
|
||||
e.preventDefault()
|
||||
const username = inviteUsername.trim()
|
||||
if (!username) return
|
||||
setInviteError(null)
|
||||
try {
|
||||
await createInvite(room.id, username)
|
||||
setInviteUsername('')
|
||||
setPendingInvites(await listRoomInvites(room.id))
|
||||
} catch (err) {
|
||||
setInviteError(err instanceof ApiError ? err.message : String(err))
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRevoke(inviteId: string) {
|
||||
await revokeInvite(room.id, inviteId)
|
||||
setPendingInvites(await listRoomInvites(room.id))
|
||||
}
|
||||
|
||||
async function handleRemove(userId: string) {
|
||||
setBusyUserId(userId)
|
||||
try {
|
||||
await removeMember(room.id, userId)
|
||||
onMembersChanged()
|
||||
} finally {
|
||||
setBusyUserId(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRoleChange(userId: string, role: RoomRole) {
|
||||
setBusyUserId(userId)
|
||||
try {
|
||||
await changeMemberRole(room.id, userId, role)
|
||||
onMembersChanged()
|
||||
} finally {
|
||||
setBusyUserId(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleTransfer(userId: string) {
|
||||
if (!confirm('Transfer ownership to this member? You will become an admin.')) return
|
||||
setBusyUserId(userId)
|
||||
try {
|
||||
await transferOwnership(room.id, userId)
|
||||
onMembersChanged()
|
||||
onRoomUpdated()
|
||||
} finally {
|
||||
setBusyUserId(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleLeave() {
|
||||
if (myRole === 'owner') return
|
||||
if (!confirm(`Leave #${room.name}?`)) return
|
||||
await leaveRoom(room.id)
|
||||
onLeft()
|
||||
}
|
||||
|
||||
async function handleSaveSettings(e: FormEvent) {
|
||||
e.preventDefault()
|
||||
setRoomError(null)
|
||||
try {
|
||||
await updateRoom(room.id, { name: nameDraft.trim(), description: descDraft.trim() })
|
||||
onRoomUpdated()
|
||||
} catch (err) {
|
||||
setRoomError(err instanceof ApiError ? err.message : String(err))
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
if (!confirm(`Delete #${room.name}? This removes all messages and can't be undone.`)) return
|
||||
await deleteRoom(room.id)
|
||||
onRoomDeleted()
|
||||
}
|
||||
|
||||
return (
|
||||
<aside className="room-info-panel">
|
||||
<div className="room-info-header">
|
||||
<span className="room-info-header-label">Details</span>
|
||||
<button type="button" className="room-info-close" onClick={onClose} aria-label="Close">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="room-info-summary">
|
||||
<RoomAvatar colorIndex={0} size={56} />
|
||||
<div className="room-info-name">#{room.name}</div>
|
||||
<div className="room-info-sub">
|
||||
{members.length} member{members.length === 1 ? '' : 's'}
|
||||
{room.is_private && ' · Private'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="room-info-section">
|
||||
<div className="room-info-label">Members</div>
|
||||
{members.map((m, i) => (
|
||||
<div key={m.user_id} className="room-info-member-row">
|
||||
<UserAvatar username={m.username} colorIndex={i} size={24} />
|
||||
<span className="room-info-member-name">{m.username}</span>
|
||||
<span className={`role-badge role-badge-${m.role}`}>{m.role}</span>
|
||||
{myRole === 'owner' && m.user_id !== user?.id && (
|
||||
<div className="room-info-member-actions">
|
||||
{m.role === 'member' && (
|
||||
<button
|
||||
type="button"
|
||||
disabled={busyUserId === m.user_id}
|
||||
onClick={() => handleRoleChange(m.user_id, 'admin')}
|
||||
title="Promote to admin"
|
||||
>
|
||||
Promote
|
||||
</button>
|
||||
)}
|
||||
{m.role === 'admin' && (
|
||||
<button
|
||||
type="button"
|
||||
disabled={busyUserId === m.user_id}
|
||||
onClick={() => handleRoleChange(m.user_id, 'member')}
|
||||
title="Demote to member"
|
||||
>
|
||||
Demote
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
disabled={busyUserId === m.user_id}
|
||||
onClick={() => handleTransfer(m.user_id)}
|
||||
title="Transfer ownership"
|
||||
>
|
||||
Make owner
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="room-info-danger-link"
|
||||
disabled={busyUserId === m.user_id}
|
||||
onClick={() => handleRemove(m.user_id)}
|
||||
title="Remove from room"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{myRole === 'admin' && m.role === 'member' && m.user_id !== user?.id && (
|
||||
<div className="room-info-member-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="room-info-danger-link"
|
||||
disabled={busyUserId === m.user_id}
|
||||
onClick={() => handleRemove(m.user_id)}
|
||||
title="Remove from room"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{canManage && (
|
||||
<div className="room-info-section">
|
||||
<div className="room-info-label">Invite someone</div>
|
||||
<form className="room-info-invite-form" onSubmit={handleInvite}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
value={inviteUsername}
|
||||
onChange={(e) => setInviteUsername(e.target.value)}
|
||||
/>
|
||||
<button type="submit" className="btn-secondary">
|
||||
Invite
|
||||
</button>
|
||||
</form>
|
||||
{inviteError && <p className="room-info-error">{inviteError}</p>}
|
||||
|
||||
{pendingInvites.length > 0 && (
|
||||
<div className="room-info-pending">
|
||||
{pendingInvites.map((inv) => (
|
||||
<div key={inv.id} className="room-info-pending-row">
|
||||
<span>{inv.target_username ?? 'Unknown user'}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="room-info-danger-link"
|
||||
onClick={() => handleRevoke(inv.id)}
|
||||
title="Revoke invite"
|
||||
>
|
||||
Revoke
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{myRole === 'owner' && (
|
||||
<div className="room-info-section">
|
||||
<button
|
||||
type="button"
|
||||
className="room-info-settings-toggle"
|
||||
onClick={() => setSettingsOpen((v) => !v)}
|
||||
>
|
||||
Room settings {settingsOpen ? '−' : '+'}
|
||||
</button>
|
||||
{settingsOpen && (
|
||||
<form className="room-info-settings-form" onSubmit={handleSaveSettings}>
|
||||
<label>
|
||||
Name
|
||||
<input value={nameDraft} onChange={(e) => setNameDraft(e.target.value)} />
|
||||
</label>
|
||||
<label>
|
||||
Description
|
||||
<textarea value={descDraft} onChange={(e) => setDescDraft(e.target.value)} rows={2} />
|
||||
</label>
|
||||
{roomError && <p className="room-info-error">{roomError}</p>}
|
||||
<button type="submit" className="btn-secondary">
|
||||
Save
|
||||
</button>
|
||||
<button type="button" className="room-info-danger-link" onClick={handleDelete}>
|
||||
Delete room
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="room-info-leave"
|
||||
onClick={handleLeave}
|
||||
disabled={myRole === 'owner'}
|
||||
title={myRole === 'owner' ? 'Transfer ownership before leaving' : undefined}
|
||||
>
|
||||
Leave room
|
||||
</button>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import type { RoomListItem as RoomListItemType } from '../types'
|
||||
|
||||
interface RoomListItemProps {
|
||||
room: RoomListItemType
|
||||
onJoin: (roomId: string) => void
|
||||
joining: boolean
|
||||
}
|
||||
|
||||
export function RoomListItem({ room, onJoin, joining }: RoomListItemProps) {
|
||||
return (
|
||||
<li style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.5rem 0' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<strong>{room.name}</strong>
|
||||
{room.description && <div style={{ color: '#666' }}>{room.description}</div>}
|
||||
</div>
|
||||
{room.is_member ? (
|
||||
<Link to={`/rooms/${room.id}`}>Open</Link>
|
||||
) : (
|
||||
<button disabled={joining} onClick={() => onJoin(room.id)}>
|
||||
Join
|
||||
</button>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
.room-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 9px var(--sp-4);
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-left: 2px solid transparent;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.room-row:hover {
|
||||
background: color-mix(in srgb, var(--ds-text) 5%, transparent);
|
||||
}
|
||||
|
||||
.room-row-active,
|
||||
.room-row-active:hover {
|
||||
background: var(--ds-surface-2);
|
||||
border-left-color: var(--ds-accent);
|
||||
}
|
||||
|
||||
.room-row-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.room-row-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: var(--ds-text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.room-row-lock {
|
||||
flex: none;
|
||||
color: var(--ds-muted);
|
||||
}
|
||||
|
||||
.room-row-subtitle {
|
||||
font-size: 0.8rem;
|
||||
color: var(--ds-muted);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 2px;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import type { MyRoomItem } from '../types'
|
||||
import { RoomAvatar } from './RoomAvatar'
|
||||
import './RoomRow.css'
|
||||
|
||||
interface RoomRowProps {
|
||||
room: MyRoomItem
|
||||
colorIndex: number
|
||||
active: boolean
|
||||
}
|
||||
|
||||
export function RoomRow({ room, colorIndex, active }: RoomRowProps) {
|
||||
return (
|
||||
<Link to={`/rooms/${room.id}`} className={`room-row${active ? ' room-row-active' : ''}`}>
|
||||
<RoomAvatar colorIndex={colorIndex} />
|
||||
<div className="room-row-body">
|
||||
<div className="room-row-name">
|
||||
{room.name}
|
||||
{room.is_private && (
|
||||
<svg
|
||||
className="room-row-lock"
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
aria-label="Private room"
|
||||
>
|
||||
<rect x="4" y="9" width="12" height="8" rx="2" stroke="currentColor" strokeWidth="1.6" />
|
||||
<path d="M7 9V6.5a3 3 0 0 1 6 0V9" stroke="currentColor" strokeWidth="1.6" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
{room.description && <div className="room-row-subtitle">{room.description}</div>}
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
.sidebar {
|
||||
width: 300px;
|
||||
min-width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid var(--ds-border);
|
||||
background: var(--ds-void-2);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.sidebar-toolbar {
|
||||
padding: var(--sp-3);
|
||||
display: flex;
|
||||
gap: var(--sp-2);
|
||||
border-bottom: 1px solid var(--ds-border);
|
||||
}
|
||||
|
||||
.sidebar-search {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
background: var(--ds-surface);
|
||||
border: 1px solid var(--ds-border);
|
||||
border-radius: var(--radius);
|
||||
padding: 0 10px;
|
||||
height: 36px;
|
||||
color: var(--ds-muted);
|
||||
}
|
||||
|
||||
.sidebar-search input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--ds-text);
|
||||
font-size: 0.86rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-icon-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
flex: none;
|
||||
border-radius: var(--radius);
|
||||
background: transparent;
|
||||
border: 1px solid var(--ds-border);
|
||||
color: var(--ds-accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar-icon-btn:hover {
|
||||
background: var(--ds-surface-2);
|
||||
}
|
||||
|
||||
.sidebar-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--sp-2) 0;
|
||||
}
|
||||
|
||||
.sidebar-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--ds-text);
|
||||
padding: 9px var(--sp-4);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sidebar-entry:hover {
|
||||
background: color-mix(in srgb, var(--ds-text) 5%, transparent);
|
||||
}
|
||||
|
||||
.sidebar-badge {
|
||||
margin-left: auto;
|
||||
background: var(--ds-accent);
|
||||
color: var(--ds-void);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
border-radius: var(--radius-pill);
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar-section-label {
|
||||
padding: 10px 16px 6px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--ds-muted);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import type { MyRoomItem } from '../types'
|
||||
import { RoomRow } from './RoomRow'
|
||||
import './Sidebar.css'
|
||||
|
||||
interface SidebarProps {
|
||||
rooms: MyRoomItem[]
|
||||
activeRoomId: string | undefined
|
||||
searchQuery: string
|
||||
onSearchChange: (value: string) => void
|
||||
onOpenNewRoom: () => void
|
||||
onOpenBrowse: () => void
|
||||
onOpenInvites: () => void
|
||||
inviteCount: number
|
||||
}
|
||||
|
||||
export function Sidebar({
|
||||
rooms,
|
||||
activeRoomId,
|
||||
searchQuery,
|
||||
onSearchChange,
|
||||
onOpenNewRoom,
|
||||
onOpenBrowse,
|
||||
onOpenInvites,
|
||||
inviteCount,
|
||||
}: SidebarProps) {
|
||||
const query = searchQuery.trim().toLowerCase()
|
||||
const filtered = query ? rooms.filter((r) => r.name.toLowerCase().includes(query)) : rooms
|
||||
|
||||
return (
|
||||
<aside className="sidebar">
|
||||
<div className="sidebar-toolbar">
|
||||
<div className="sidebar-search">
|
||||
<svg width="14" height="14" viewBox="0 0 20 20" fill="none" aria-hidden="true">
|
||||
<circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.6" />
|
||||
<line x1="12.5" y1="12.5" x2="17" y2="17" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
|
||||
</svg>
|
||||
<input
|
||||
value={searchQuery}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
placeholder="Search"
|
||||
aria-label="Search rooms"
|
||||
/>
|
||||
</div>
|
||||
<button type="button" className="sidebar-icon-btn" onClick={onOpenNewRoom} aria-label="New room" title="New room">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
|
||||
<line x1="7" y1="1" x2="7" y2="13" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
|
||||
<line x1="1" y1="7" x2="13" y2="7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="sidebar-scroll">
|
||||
<button type="button" className="sidebar-entry" onClick={onOpenInvites}>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true">
|
||||
<path d="M22 6 12 13 2 6" />
|
||||
<rect x="2" y="4" width="20" height="16" rx="2" />
|
||||
</svg>
|
||||
Invites
|
||||
{inviteCount > 0 && <span className="sidebar-badge">{inviteCount}</span>}
|
||||
</button>
|
||||
|
||||
<button type="button" className="sidebar-entry" onClick={onOpenBrowse}>
|
||||
<svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
|
||||
<circle cx="9" cy="9" r="6" />
|
||||
<line x1="13.5" y1="13.5" x2="18" y2="18" strokeLinecap="round" />
|
||||
</svg>
|
||||
Browse rooms
|
||||
</button>
|
||||
|
||||
{filtered.length > 0 && <div className="sidebar-section-label">Rooms</div>}
|
||||
<nav>
|
||||
{filtered.map((room, i) => (
|
||||
<RoomRow
|
||||
key={room.id}
|
||||
room={room}
|
||||
colorIndex={i}
|
||||
active={room.id === activeRoomId}
|
||||
/>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
.top-bar {
|
||||
height: 56px;
|
||||
min-height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--sp-4);
|
||||
background: var(--ds-surface);
|
||||
border-bottom: 1px solid var(--ds-border);
|
||||
}
|
||||
|
||||
.top-bar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.top-bar-logo {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.top-bar-title {
|
||||
font-weight: 700;
|
||||
font-size: 1.02rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.top-bar-user {
|
||||
position: relative;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.top-bar-avatar {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--ds-accent-3);
|
||||
border: none;
|
||||
color: var(--ds-text);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.top-bar-menu-scrim {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.top-bar-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
z-index: 31;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--ds-border);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--sp-2);
|
||||
min-width: 160px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.top-bar-menu-username {
|
||||
font-size: 0.78rem;
|
||||
color: var(--ds-muted);
|
||||
padding: 6px 8px 4px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.top-bar-menu button[role='menuitem'] {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--ds-text);
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.86rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.top-bar-menu button[role='menuitem']:hover {
|
||||
background: var(--ds-surface-2);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { useState } from 'react'
|
||||
import logo from '../assets/logo.png'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
import { initials } from '../lib/avatar'
|
||||
import './TopBar.css'
|
||||
|
||||
export function TopBar() {
|
||||
const { user, logout } = useAuth()
|
||||
const [menuOpen, setMenuOpen] = useState(false)
|
||||
|
||||
if (!user) return null
|
||||
|
||||
return (
|
||||
<header className="top-bar">
|
||||
<div className="top-bar-brand">
|
||||
<img src={logo} alt="" className="top-bar-logo" />
|
||||
<span className="top-bar-title">KeepItTalking</span>
|
||||
</div>
|
||||
|
||||
<div className="top-bar-user">
|
||||
<button
|
||||
type="button"
|
||||
className="top-bar-avatar"
|
||||
onClick={() => setMenuOpen((v) => !v)}
|
||||
aria-expanded={menuOpen}
|
||||
aria-label="Account menu"
|
||||
>
|
||||
{initials(user.username)}
|
||||
</button>
|
||||
{menuOpen && (
|
||||
<>
|
||||
<div className="top-bar-menu-scrim" onClick={() => setMenuOpen(false)} />
|
||||
<div className="top-bar-menu" role="menu">
|
||||
<div className="top-bar-menu-username">{user.username}</div>
|
||||
<button type="button" role="menuitem" onClick={() => logout()}>
|
||||
Log out
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
.user-avatar {
|
||||
border-radius: var(--radius-pill);
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
color: var(--ds-text);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { accentForIndex, initials } from '../lib/avatar'
|
||||
import './UserAvatar.css'
|
||||
|
||||
interface UserAvatarProps {
|
||||
username: string
|
||||
colorIndex: number
|
||||
size?: number
|
||||
}
|
||||
|
||||
export function UserAvatar({ username, colorIndex, size = 28 }: UserAvatarProps) {
|
||||
return (
|
||||
<div
|
||||
className="user-avatar"
|
||||
style={{ width: size, height: size, background: accentForIndex(colorIndex) }}
|
||||
>
|
||||
{initials(username)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user