viktor/beadboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial commit for beadboard

Browse source
This commit is contained in:
zenchantlive 2026-02-16 21:45:27 -08:00
parent 93f3c50d4b
commit 54729c72f6
14 changed files with 1472 additions and 2108 deletions
Download patch file Download diff file Expand all files Collapse all files

149
src/components/shared/thread-drawer.tsx
View file

@ -43,91 +43,80 @@ export function ThreadDrawer({ isOpen, onClose, title, id, items = SAMPLE_ITEMS
if (!isOpen) return null;
return (
<>
{/* Backdrop */}
<div
className="h-full w-[24rem] overflow-hidden flex flex-col"
style={{
backgroundColor: 'var(--color-bg-card)',
borderLeft: '1px solid rgba(255, 255, 255, 0.1)',
boxShadow: '-4px 0 20px rgba(0, 0, 0, 0.3)',
}}
>
{/* Header */}
<div
className="fixed inset-0 z-40 bg-black/30"
onClick={onClose}
aria-hidden="true"
/>
{/* Drawer - slides from right edge of screen, overlaying everything */}
<div
className="fixed top-0 right-0 h-full z-50 w-[24rem] overflow-hidden"
style={{
backgroundColor: 'var(--color-bg-card)',
borderLeft: '1px solid rgba(255, 255, 255, 0.1)',
boxShadow: '-4px 0 20px rgba(0, 0, 0, 0.3)',
}}
className="flex items-center justify-between p-4 border-b"
style={{ borderColor: 'rgba(255, 255, 255, 0.1)' }}
>
{/* Header */}
<div
className="flex items-center justify-between p-4 border-b"
style={{ borderColor: 'rgba(255, 255, 255, 0.1)' }}
>
<div className="flex-1 min-w-0 mr-4">
<span className="text-teal-400 font-mono text-sm">
{id}
</span>
<h2
className="text-sm font-semibold truncate"
style={{ color: 'var(--color-text-primary)' }}
title={title}
>
{title}
</h2>
</div>
<button
onClick={onClose}
className="p-1.5 rounded-md hover:bg-white/10 transition-colors flex-shrink-0"
aria-label="Close"
<div className="flex-1 min-w-0 mr-4">
<span className="text-teal-400 font-mono text-sm">
{id}
</span>
<h2
className="text-sm font-semibold truncate"
style={{ color: 'var(--color-text-primary)' }}
title={title}
>
<X size={18} style={{ color: 'var(--color-text-muted)' }} />
{title}
</h2>
</div>
<button
onClick={onClose}
className="p-1.5 rounded-md hover:bg-white/10 transition-colors flex-shrink-0"
aria-label="Close"
>
<X size={18} style={{ color: 'var(--color-text-muted)' }} />
</button>
</div>
{/* Thread Content */}
<div className="flex-1 overflow-y-auto p-4">
<ThreadView items={items} />
</div>
{/* Compose */}
<div
className="p-4 border-t"
style={{ borderColor: 'rgba(255, 255, 255, 0.1)' }}
>
<div className="flex gap-2">
<input
type="text"
value={comment}
onChange={(e) => setComment(e.target.value)}
placeholder="Add a comment..."
className="flex-1 px-3 py-2 rounded-md text-sm"
style={{
backgroundColor: 'var(--color-bg-input)',
color: 'var(--color-text-primary)',
border: '1px solid rgba(255, 255, 255, 0.1)',
}}
onKeyDown={(e) => {
if (e.key === 'Enter' && comment.trim()) {
setComment('');
}
}}
/>
<button
className="p-2 rounded-md"
style={{
backgroundColor: 'var(--color-accent-green)',
color: '#fff',
}}
aria-label="Send comment"
>
<Send size={16} />
</button>
</div>
{/* Thread Content */}
<div className="flex-1 overflow-y-auto p-4" style={{ height: 'calc(100% - 8rem)' }}>
<ThreadView items={items} />
</div>
{/* Compose */}
<div
className="p-4 border-t"
style={{ borderColor: 'rgba(255, 255, 255, 0.1)' }}
>
<div className="flex gap-2">
<input
type="text"
value={comment}
onChange={(e) => setComment(e.target.value)}
placeholder="Add a comment..."
className="flex-1 px-3 py-2 rounded-md text-sm"
style={{
backgroundColor: 'var(--color-bg-input)',
color: 'var(--color-text-primary)',
border: '1px solid rgba(255, 255, 255, 0.1)',
}}
onKeyDown={(e) => {
if (e.key === 'Enter' && comment.trim()) {
// TODO: Post comment
setComment('');
}
}}
/>
<button
className="p-2 rounded-md"
style={{
backgroundColor: 'var(--color-accent-green)',
color: '#fff',
}}
aria-label="Send comment"
>
<Send size={16} />
</button>
</div>
</div>
</div>
</>
</div>
);
}