Moheeb Zara
32934124c2
Mobile responsiveness: several flex rows had a `truncate` child without `min-w-0`, so a long value (member/door name, channel name, published form URL) would not shrink and pushed the row past the viewport on a phone. Added `min-w-0` (with `flex-1`/`shrink-0` where needed) on the dashboard presence + door-self-entry rows, the comms channel list, and the form-builder URL. Door inbound poll: `/api/cron/door-ingest` now polls connections with Promise.allSettled instead of a sequential loop, so one tick is bounded to the slowest single poll rather than the sum of all per-call timeouts; each connection stays isolated and the run is idempotent. Docs: refreshed ARCHITECTURE (door epic marked complete P1-P5), the README access-control feature bullet + project-status pointer, a historical banner on the older AUDIT.md, a door-epic CHANGELOG entry, and the rolling HANDOFF audit log (passes 65-68). No migration; no behavior change for existing users.
113 lines
4.0 KiB
TypeScript
113 lines
4.0 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { toast } from 'sonner'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Button } from '@/components/ui/button'
|
|
import { checkIn, checkOut } from '@/lib/actions'
|
|
|
|
type Present = {
|
|
id: string
|
|
name: string
|
|
isHost: boolean
|
|
isMe: boolean
|
|
checkedInAt: string
|
|
note: string | null
|
|
}
|
|
|
|
export function PresencePanel({ present }: { present: Present[] }) {
|
|
const router = useRouter()
|
|
const [busy, setBusy] = useState(false)
|
|
const [note, setNote] = useState('')
|
|
const [showNote, setShowNote] = useState(false)
|
|
|
|
const me = present.find(p => p.isMe)
|
|
const amHere = !!me
|
|
const hostCount = present.filter(p => p.isHost).length
|
|
|
|
async function doCheckIn(asHost: boolean) {
|
|
setBusy(true)
|
|
const res = await checkIn({ asHost, note: note.trim() || null })
|
|
setBusy(false)
|
|
if ('error' in res && res.error) return toast.error(res.error)
|
|
setNote('')
|
|
setShowNote(false)
|
|
toast.success(asHost ? 'Checked in as host' : 'Checked in')
|
|
router.refresh()
|
|
}
|
|
|
|
async function doCheckOut() {
|
|
setBusy(true)
|
|
const res = await checkOut({ note: note.trim() || null })
|
|
setBusy(false)
|
|
if ('error' in res && res.error) return toast.error(res.error)
|
|
setNote('')
|
|
setShowNote(false)
|
|
toast.success('Checked out')
|
|
router.refresh()
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
|
|
Who's here ({present.length}{hostCount > 0 ? ` · ${hostCount} hosting` : ''})
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-card rounded border border-border">
|
|
{present.length === 0 ? (
|
|
<p className="px-4 py-4 font-sans text-xs text-muted-foreground text-center">
|
|
Nobody is checked in right now.
|
|
</p>
|
|
) : (
|
|
<ul className="divide-y divide-border">
|
|
{present.map(p => (
|
|
<li key={p.id} className="flex items-center justify-between gap-3 px-4 py-2.5">
|
|
<span className="flex-1 min-w-0 font-sans text-sm text-foreground truncate">
|
|
{p.name}{p.isMe ? ' (you)' : ''}
|
|
{p.note && <span className="font-mono text-[10px] text-muted-foreground ml-2">{p.note}</span>}
|
|
</span>
|
|
<span className="flex items-center gap-2 shrink-0">
|
|
{p.isHost && <Badge variant="default">Host</Badge>}
|
|
<span className="font-mono text-[10px] text-muted-foreground/70">
|
|
{new Date(p.checkedInAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
|
</span>
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
|
|
<div className="border-t border-border p-3 space-y-2">
|
|
{showNote && (
|
|
<input
|
|
className="w-full bg-background border border-border text-foreground font-sans text-sm rounded px-3 py-2 focus:outline-none focus:border-primary"
|
|
placeholder={amHere ? 'Check-out note (optional)' : 'Check-in note (optional)'}
|
|
maxLength={500}
|
|
value={note}
|
|
onChange={e => setNote(e.target.value)}
|
|
/>
|
|
)}
|
|
<div className="flex items-center gap-1.5 flex-wrap">
|
|
{amHere ? (
|
|
<Button size="sm" disabled={busy} onClick={doCheckOut}>
|
|
Check out{me?.isHost ? ' (hosting)' : ''}
|
|
</Button>
|
|
) : (
|
|
<>
|
|
<Button size="sm" disabled={busy} onClick={() => doCheckIn(false)}>Check in</Button>
|
|
<Button size="sm" variant="outline" disabled={busy} onClick={() => doCheckIn(true)}>Check in as host</Button>
|
|
</>
|
|
)}
|
|
<Button size="sm" variant="outline" onClick={() => setShowNote(v => !v)}>
|
|
{showNote ? 'Hide note' : 'Add note'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|