247 lines
11 KiB
TypeScript
247 lines
11 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useRef } from 'react'
|
|
import { createClient } from '@/lib/supabase/client'
|
|
import { Hash, Users2 } from 'lucide-react'
|
|
|
|
interface Props {
|
|
member: any
|
|
space: any
|
|
channels: any[]
|
|
}
|
|
|
|
export default function CommsClient({ member, space, channels }: Props) {
|
|
const [selectedChannel, setSelectedChannel] = useState(channels[0] || null)
|
|
const [messages, setMessages] = useState<any[]>([])
|
|
const [newMessage, setNewMessage] = useState('')
|
|
const [sending, setSending] = useState(false)
|
|
const messagesEndRef = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
if (!selectedChannel) return
|
|
loadMessages()
|
|
|
|
const supabase = createClient()
|
|
const subscription = supabase
|
|
.channel(`channel:${selectedChannel.id}`)
|
|
.on('postgres_changes', { event: '*', schema: 'public', table: 'comms_messages', filter: `channel_id=eq.${selectedChannel.id}` }, payload => {
|
|
if (payload.eventType === 'INSERT') {
|
|
setMessages(prev => [...prev, payload.new])
|
|
}
|
|
})
|
|
.subscribe()
|
|
|
|
return () => { subscription.unsubscribe() }
|
|
}, [selectedChannel])
|
|
|
|
useEffect(() => {
|
|
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
|
|
}, [messages])
|
|
|
|
async function loadMessages() {
|
|
const supabase = createClient()
|
|
const { data } = await supabase
|
|
.from('comms_messages')
|
|
.select('*')
|
|
.eq('channel_id', selectedChannel.id)
|
|
.order('created_at')
|
|
.limit(100)
|
|
setMessages(data ?? [])
|
|
}
|
|
|
|
async function sendMessage(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
if (!newMessage.trim() || sending) return
|
|
setSending(true)
|
|
const supabase = createClient()
|
|
await supabase.from('comms_messages').insert({
|
|
channel_id: selectedChannel.id,
|
|
space_id: space?.id ?? member.space_id,
|
|
user_id: member.user_id,
|
|
display_name: member.display_name,
|
|
handle: member.handle,
|
|
content: newMessage.trim(),
|
|
})
|
|
setNewMessage('')
|
|
setSending(false)
|
|
}
|
|
|
|
const generalChannels = channels.filter(c => c.channel_type === 'general')
|
|
const areaChannels = channels.filter(c => c.channel_type === 'area')
|
|
const projectChannels = channels.filter(c => c.channel_type === 'project')
|
|
|
|
return (
|
|
<div className="h-screen bg-background flex flex-col">
|
|
<div className="bg-sidebar px-6 py-3 flex items-center justify-between border-b border-sidebar-border">
|
|
<div className="flex items-center gap-3">
|
|
<h1 className="text-white font-sans text-lg font-semibold">Comms</h1>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button className="text-sidebar-foreground/70 hover:text-sidebar-foreground text-sm">
|
|
<Users2 className="w-4 h-4" />
|
|
</button>
|
|
<button className="text-sidebar-foreground/70 hover:text-sidebar-foreground text-sm">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 flex overflow-hidden">
|
|
{/* Channels sidebar */}
|
|
<aside className="w-[220px] bg-card border-r border-border overflow-y-auto">
|
|
<div className="p-3">
|
|
{generalChannels.length > 0 && (
|
|
<div className="mb-4">
|
|
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-2 px-2">GENERAL</p>
|
|
{generalChannels.map(channel => (
|
|
<button
|
|
key={channel.id}
|
|
onClick={() => setSelectedChannel(channel)}
|
|
className={`w-full flex items-center gap-2 px-2 py-1.5 rounded text-sm font-sans transition ${
|
|
selectedChannel?.id === channel.id
|
|
? 'bg-primary/10 text-primary'
|
|
: 'text-foreground/70 hover:bg-muted hover:text-foreground'
|
|
}`}
|
|
>
|
|
<Hash className="w-3.5 h-3.5 flex-shrink-0" />
|
|
<span className="truncate">{channel.name}</span>
|
|
{channel.unread_count > 0 && (
|
|
<span className="ml-auto w-4 h-4 bg-primary text-white text-[9px] font-bold rounded-full flex items-center justify-center">
|
|
{channel.unread_count}
|
|
</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{areaChannels.length > 0 && (
|
|
<div className="mb-4">
|
|
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-2 px-2">AREAS</p>
|
|
{areaChannels.map(channel => (
|
|
<button
|
|
key={channel.id}
|
|
onClick={() => setSelectedChannel(channel)}
|
|
className={`w-full flex items-center gap-2 px-2 py-1.5 rounded text-sm font-sans transition ${
|
|
selectedChannel?.id === channel.id
|
|
? 'bg-primary/10 text-primary'
|
|
: 'text-foreground/70 hover:bg-muted hover:text-foreground'
|
|
}`}
|
|
>
|
|
<Hash className="w-3.5 h-3.5 flex-shrink-0" />
|
|
<span className="truncate">{channel.name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{projectChannels.length > 0 && (
|
|
<div>
|
|
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-2 px-2">PROJECTS</p>
|
|
{projectChannels.map(channel => (
|
|
<button
|
|
key={channel.id}
|
|
onClick={() => setSelectedChannel(channel)}
|
|
className={`w-full flex items-center gap-2 px-2 py-1.5 rounded text-sm font-sans transition ${
|
|
selectedChannel?.id === channel.id
|
|
? 'bg-primary/10 text-primary'
|
|
: 'text-foreground/70 hover:bg-muted hover:text-foreground'
|
|
}`}
|
|
>
|
|
<svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
<span className="truncate">{channel.name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Messages area */}
|
|
{selectedChannel ? (
|
|
<div className="flex-1 flex flex-col">
|
|
{/* Channel header */}
|
|
<div className="px-4 py-3 border-b border-border flex items-center gap-2">
|
|
<Hash className="w-5 h-5 text-primary" />
|
|
<div>
|
|
<p className="font-sans text-sm font-medium text-foreground">{selectedChannel.name}</p>
|
|
{selectedChannel.description && (
|
|
<p className="font-sans text-xs text-muted-foreground">{selectedChannel.description}</p>
|
|
)}
|
|
</div>
|
|
{selectedChannel.member_count && (
|
|
<span className="ml-auto font-mono text-[10px] text-muted-foreground">
|
|
{selectedChannel.member_count} members
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Messages */}
|
|
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
|
{messages.map((msg, i) => {
|
|
const showAvatar = i === 0 || messages[i - 1]?.user_id !== msg.user_id
|
|
return (
|
|
<div key={msg.id} className={`flex items-start gap-3 ${showAvatar ? '' : 'pl-[52px]'}`}>
|
|
{showAvatar && (
|
|
<div className="w-8 h-8 rounded bg-primary/10 flex items-center justify-center text-[10px] font-mono font-bold text-primary flex-shrink-0">
|
|
{(msg.display_name || 'U').split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2)}
|
|
</div>
|
|
)}
|
|
<div className="flex-1 min-w-0">
|
|
{showAvatar && (
|
|
<div className="flex items-baseline gap-2 mb-0.5">
|
|
<span className="font-sans text-sm font-medium text-foreground">{msg.display_name || 'Unknown'}</span>
|
|
{msg.handle && <span className="font-mono text-[10px] text-muted-foreground">@{msg.handle}</span>}
|
|
<span className="font-mono text-[10px] text-muted-foreground">
|
|
{new Date(msg.created_at).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<p className="font-sans text-sm text-foreground leading-relaxed break-words">
|
|
{(msg.content || '').split(/(@\w+|#\w+)/g).map((part: string, j: number) => {
|
|
if (part.startsWith('@')) return <span key={j} className="text-primary font-medium">{part}</span>
|
|
if (part.startsWith('#')) return <span key={j} className="text-blue-600 font-medium">{part}</span>
|
|
return part
|
|
})}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
<div ref={messagesEndRef} />
|
|
</div>
|
|
|
|
{/* Input */}
|
|
<div className="p-4 border-t border-border">
|
|
<form onSubmit={sendMessage} className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={newMessage}
|
|
onChange={e => setNewMessage(e.target.value)}
|
|
placeholder={`Message #${selectedChannel.name}`}
|
|
className="flex-1 bg-muted border border-border rounded px-3 py-2 font-sans text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary transition"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={!newMessage.trim() || sending}
|
|
className="bg-primary text-white px-4 py-2 rounded font-sans text-sm hover:bg-primary/90 transition disabled:opacity-40"
|
|
>
|
|
Send
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex-1 flex items-center justify-center text-muted-foreground">
|
|
<p className="font-sans text-sm">Select a channel to view messages</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|