Merge: fix conflicts, add auth system with PostgreSQL, seed data, and 4 demo users
This commit is contained in:
Generated
+1
-3
@@ -111,14 +111,12 @@
|
||||
"node_modules/@emoji-mart/data": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.2.1.tgz",
|
||||
"integrity": "sha512-no2pQMWiBy6gpBEiqGeU77/bFejDqUTRY7KX+0+iur13op3bqUsXdnwoZs6Xb1zbv0gAj5VvS1PWoUUckSr5Dw==",
|
||||
"license": "MIT"
|
||||
"integrity": "sha512-no2pQMWiBy6gpBEiqGeU77/bFejDqUTRY7KX+0+iur13op3bqUsXdnwoZs6Xb1zbv0gAj5VvS1PWoUUckSr5Dw=="
|
||||
},
|
||||
"node_modules/@emoji-mart/react": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@emoji-mart/react/-/react-1.1.1.tgz",
|
||||
"integrity": "sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"emoji-mart": "^5.2",
|
||||
"react": "^16.8 || ^17 || ^18"
|
||||
|
||||
@@ -17,7 +17,8 @@ import {
|
||||
import { conversations as conversationsData } from "@/data/chats"
|
||||
import {
|
||||
Search, Send, Phone, Video, MoreHorizontal, Paperclip,
|
||||
Smile, Flag, Ban, Trash2, Image, File, X,
|
||||
Smile, Flag, Ban, Trash2, Image, FileIcon, X, Mic, Square, Play, Pause, Check, CheckCheck,
|
||||
CornerDownRight, Forward, Pencil, Download,
|
||||
} from "lucide-react"
|
||||
import {
|
||||
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription,
|
||||
@@ -31,6 +32,65 @@ import { toast } from "sonner"
|
||||
import data from "@emoji-mart/data"
|
||||
import Picker from "@emoji-mart/react"
|
||||
|
||||
function VoiceMessagePlayer({ src, initialDuration }: { src: string; initialDuration: number }) {
|
||||
const [playing, setPlaying] = useState(false)
|
||||
const [current, setCurrent] = useState(0)
|
||||
const [duration, setDuration] = useState(initialDuration)
|
||||
const audioRef = useRef<HTMLAudioElement>(null)
|
||||
const animRef = useRef<number>(0)
|
||||
|
||||
useEffect(() => {
|
||||
const audio = audioRef.current
|
||||
if (!audio) return
|
||||
const onLoaded = () => {
|
||||
if (isFinite(audio.duration)) setDuration(audio.duration)
|
||||
}
|
||||
const onEnded = () => { setPlaying(false); setCurrent(0) }
|
||||
audio.addEventListener("loadedmetadata", onLoaded)
|
||||
audio.addEventListener("ended", onEnded)
|
||||
return () => {
|
||||
audio.removeEventListener("loadedmetadata", onLoaded)
|
||||
audio.removeEventListener("ended", onEnded)
|
||||
}
|
||||
}, [src])
|
||||
|
||||
useEffect(() => {
|
||||
if (!playing) { cancelAnimationFrame(animRef.current); return }
|
||||
const tick = () => {
|
||||
if (audioRef.current) setCurrent(audioRef.current.currentTime)
|
||||
animRef.current = requestAnimationFrame(tick)
|
||||
}
|
||||
animRef.current = requestAnimationFrame(tick)
|
||||
return () => cancelAnimationFrame(animRef.current)
|
||||
}, [playing])
|
||||
|
||||
const toggle = () => {
|
||||
if (!audioRef.current) return
|
||||
if (playing) { audioRef.current.pause(); setPlaying(false) }
|
||||
else { audioRef.current.play(); setPlaying(true) }
|
||||
}
|
||||
|
||||
const displayDuration = isFinite(duration) && duration > 0 ? duration : initialDuration
|
||||
const pct = displayDuration > 0 ? (current / displayDuration) * 100 : 0
|
||||
const fmt = (s: number) => {
|
||||
const secs = isFinite(s) ? Math.max(0, Math.floor(s)) : 0
|
||||
return `${Math.floor(secs / 60)}:${(secs % 60).toString().padStart(2, "0")}`
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 min-w-[180px]">
|
||||
<audio ref={audioRef} src={src} preload="metadata" />
|
||||
<button type="button" onClick={toggle} className="h-8 w-8 shrink-0 rounded-full flex items-center justify-center hover:bg-black/10 transition-colors">
|
||||
{playing ? <Pause className="h-4 w-4 fill-current" /> : <Play className="h-4 w-4 ml-0.5 fill-current" />}
|
||||
</button>
|
||||
<div className="flex-1 h-1.5 rounded-full bg-white/30 relative overflow-hidden">
|
||||
<div className="h-full rounded-full bg-white transition-all duration-100" style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
<span className="text-[11px] tabular-nums opacity-70 w-8 text-right">{fmt(displayDuration)}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ChatsPage() {
|
||||
const { theme } = useTheme()
|
||||
const { user } = useUser()
|
||||
@@ -42,15 +102,53 @@ export default function ChatsPage() {
|
||||
const [isResizing, setIsResizing] = useState(false)
|
||||
const [reportDialogOpen, setReportDialogOpen] = useState(false)
|
||||
const [reportReason, setReportReason] = useState("")
|
||||
const [forwardDialogOpen, setForwardDialogOpen] = useState(false)
|
||||
const [forwardMessage, setForwardMessage] = useState<typeof conversationsData[0]["messages"][0] | null>(null)
|
||||
const [forwardSearch, setForwardSearch] = useState("")
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [isRecording, setIsRecording] = useState(false)
|
||||
const [isPaused, setIsPaused] = useState(false)
|
||||
const [recordingDuration, setRecordingDuration] = useState(0)
|
||||
const recordingDurationRef = useRef(0)
|
||||
const [voiceMessages, setVoiceMessages] = useState<Map<string, { url: string; duration: number }>>(new Map())
|
||||
const [messageAttachments, setMessageAttachments] = useState<Map<string, { name: string; type: string; url: string }[]>>(new Map())
|
||||
const [replyingTo, setReplyingTo] = useState<typeof conversationsData[0]["messages"][0] | null>(null)
|
||||
const [editingMessage, setEditingMessage] = useState<typeof conversationsData[0]["messages"][0] | null>(null)
|
||||
const [replyMap, setReplyMap] = useState<Map<string, { repliedToSender: string; repliedToContent: string }>>(new Map())
|
||||
const [messageStatus, setMessageStatus] = useState<Map<string, "sent" | "delivered" | "read">>(() => {
|
||||
const map = new Map<string, "sent" | "delivered" | "read">()
|
||||
conversationsData.forEach((conv) =>
|
||||
conv.messages.forEach((msg) => {
|
||||
if (msg.senderId === "user1") map.set(msg.id, "read")
|
||||
})
|
||||
)
|
||||
return map
|
||||
})
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null)
|
||||
const emojiPickerRef = useRef<HTMLDivElement>(null)
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null)
|
||||
const mediaRecorderRef = useRef<MediaRecorder | null>(null)
|
||||
const recordingChunksRef = useRef<Blob[]>([])
|
||||
const resizeStartRef = useRef({ x: 0, width: 0 })
|
||||
|
||||
const isOnlyEmoji = (text: string) => /^(\p{Extended_Pictographic}\s*)+$/u.test(text.trim())
|
||||
|
||||
const autoResizeTextarea = useCallback(() => {
|
||||
const ta = textareaRef.current
|
||||
if (!ta) return
|
||||
ta.style.height = "auto"
|
||||
ta.style.height = `${ta.scrollHeight}px`
|
||||
}, [])
|
||||
|
||||
const [conversations, setConversations] = useState(conversationsData)
|
||||
if (!user) return null
|
||||
const conversation = conversations.find((c) => c.id === activeChat)
|
||||
const otherParticipant = (conv: typeof conversationsData[0]) =>
|
||||
conv.participants.find((p) => p.id !== "user1") ?? conv.participants[0]
|
||||
const filteredConversations = searchQuery.trim()
|
||||
? conversations.filter((conv) => otherParticipant(conv).name.toLowerCase().includes(searchQuery.toLowerCase()))
|
||||
: conversations
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
@@ -84,9 +182,14 @@ export default function ChatsPage() {
|
||||
}
|
||||
}, [isResizing])
|
||||
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
|
||||
}, [conversations])
|
||||
|
||||
const handleEmojiSelect = (emoji: { native: string }) => {
|
||||
setMessageInput((prev) => prev + emoji.native)
|
||||
setShowEmojiPicker(false)
|
||||
setTimeout(() => autoResizeTextarea(), 0)
|
||||
}
|
||||
|
||||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
@@ -99,16 +202,15 @@ export default function ChatsPage() {
|
||||
setAttachments((prev) => prev.filter((_, i) => i !== index))
|
||||
}
|
||||
|
||||
const handleSend = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!messageInput.trim() && attachments.length === 0) return
|
||||
const addMessageToChat = (content: string, voice?: { url: string; duration: number }, replyTo?: { senderName: string; content: string }, attachments?: { name: string; type: string; url: string }[]) => {
|
||||
const id = crypto.randomUUID()
|
||||
const newMessage = {
|
||||
id: crypto.randomUUID(),
|
||||
id,
|
||||
conversationId: activeChat!,
|
||||
senderId: "user1",
|
||||
senderName: "Sarah Chen",
|
||||
senderAvatar: "SC",
|
||||
content: messageInput.trim(),
|
||||
content,
|
||||
timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
|
||||
}
|
||||
setConversations((prev) =>
|
||||
@@ -117,17 +219,165 @@ export default function ChatsPage() {
|
||||
? {
|
||||
...conv,
|
||||
messages: [...conv.messages, newMessage],
|
||||
lastMessage: newMessage.content,
|
||||
lastMessage: voice ? "🎤 Voice note" : (replyTo ? `↪ ${content}` : content),
|
||||
lastMessageTime: "Just now",
|
||||
unread: 0,
|
||||
}
|
||||
: conv
|
||||
)
|
||||
)
|
||||
setMessageStatus((prev) => {
|
||||
const next = new Map(prev)
|
||||
next.set(id, "sent")
|
||||
return next
|
||||
})
|
||||
setTimeout(() => {
|
||||
setMessageStatus((prev) => {
|
||||
const next = new Map(prev)
|
||||
if (next.get(id) === "sent") next.set(id, "delivered")
|
||||
return next
|
||||
})
|
||||
}, 1000)
|
||||
if (voice) {
|
||||
setVoiceMessages((prev) => {
|
||||
const next = new Map(prev)
|
||||
next.set(id, voice)
|
||||
return next
|
||||
})
|
||||
}
|
||||
if (replyTo) {
|
||||
setReplyMap((prev) => {
|
||||
const next = new Map(prev)
|
||||
next.set(id, { repliedToSender: replyTo.senderName, repliedToContent: replyTo.content })
|
||||
return next
|
||||
})
|
||||
}
|
||||
if (attachments && attachments.length > 0) {
|
||||
setMessageAttachments((prev) => {
|
||||
const next = new Map(prev)
|
||||
next.set(id, attachments)
|
||||
return next
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleSend = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!messageInput.trim() && attachments.length === 0) return
|
||||
if (editingMessage) {
|
||||
setConversations((prev) =>
|
||||
prev.map((conv) => ({
|
||||
...conv,
|
||||
messages: conv.messages.map((m) =>
|
||||
m.id === editingMessage.id ? { ...m, content: messageInput.trim() } : m
|
||||
),
|
||||
lastMessage: conv.id === activeChat && conv.messages.some((m) => m.id === editingMessage.id)
|
||||
? messageInput.trim() : conv.lastMessage,
|
||||
}))
|
||||
)
|
||||
setEditingMessage(null)
|
||||
setMessageInput("")
|
||||
setTimeout(() => autoResizeTextarea(), 0)
|
||||
return
|
||||
}
|
||||
const fileAttachments = attachments.length > 0
|
||||
? attachments.map((f) => ({ name: f.name, type: f.type, url: URL.createObjectURL(f) }))
|
||||
: undefined
|
||||
if (replyingTo) {
|
||||
const replySender = replyingTo.senderId === "user1" ? user.name : otherParticipant(conversation!).name
|
||||
addMessageToChat(messageInput.trim(), undefined, { senderName: replySender, content: replyingTo.content }, fileAttachments)
|
||||
setReplyingTo(null)
|
||||
} else {
|
||||
addMessageToChat(messageInput.trim(), undefined, undefined, fileAttachments)
|
||||
}
|
||||
setMessageInput("")
|
||||
setTimeout(() => autoResizeTextarea(), 0)
|
||||
setAttachments([])
|
||||
}
|
||||
|
||||
const handleDeleteMessage = (messageId: string) => {
|
||||
setConversations((prev) =>
|
||||
prev.map((conv) => ({
|
||||
...conv,
|
||||
messages: conv.messages.filter((m) => m.id !== messageId),
|
||||
lastMessage: conv.messages.filter((m) => m.id !== messageId).at(-1)?.content ?? conv.lastMessage,
|
||||
}))
|
||||
)
|
||||
toast.success("Message deleted")
|
||||
}
|
||||
|
||||
const startRecording = async () => {
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
|
||||
const recorder = new MediaRecorder(stream, { mimeType: "audio/webm" })
|
||||
recordingChunksRef.current = []
|
||||
recorder.ondataavailable = (e) => {
|
||||
if (e.data.size > 0) recordingChunksRef.current.push(e.data)
|
||||
}
|
||||
recorder.onstop = () => {
|
||||
const blob = new Blob(recordingChunksRef.current, { type: "audio/webm" })
|
||||
const url = URL.createObjectURL(blob)
|
||||
addMessageToChat("", { url, duration: recordingDurationRef.current })
|
||||
stream.getTracks().forEach((t) => t.stop())
|
||||
setRecordingDuration(0)
|
||||
}
|
||||
mediaRecorderRef.current = recorder
|
||||
recorder.start()
|
||||
setIsRecording(true)
|
||||
setIsPaused(false)
|
||||
} catch {
|
||||
toast.error("Microphone access denied")
|
||||
}
|
||||
}
|
||||
|
||||
const togglePauseRecording = () => {
|
||||
const recorder = mediaRecorderRef.current
|
||||
if (!recorder || recorder.state === "inactive") return
|
||||
if (recorder.state === "recording") {
|
||||
recorder.pause()
|
||||
setIsPaused(true)
|
||||
} else {
|
||||
recorder.resume()
|
||||
setIsPaused(false)
|
||||
}
|
||||
}
|
||||
|
||||
const stopRecording = () => {
|
||||
mediaRecorderRef.current?.stop()
|
||||
setIsRecording(false)
|
||||
setIsPaused(false)
|
||||
}
|
||||
|
||||
const discardRecording = () => {
|
||||
if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
|
||||
mediaRecorderRef.current.ondataavailable = null
|
||||
mediaRecorderRef.current.onstop = null
|
||||
mediaRecorderRef.current.stop()
|
||||
mediaRecorderRef.current.stream?.getTracks().forEach((t) => t.stop())
|
||||
}
|
||||
setIsRecording(false)
|
||||
setIsPaused(false)
|
||||
setRecordingDuration(0)
|
||||
recordingDurationRef.current = 0
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!isRecording) return
|
||||
recordingDurationRef.current = 0
|
||||
setRecordingDuration(0)
|
||||
const interval = setInterval(() => {
|
||||
recordingDurationRef.current += 1
|
||||
setRecordingDuration(recordingDurationRef.current)
|
||||
}, 1000)
|
||||
return () => clearInterval(interval)
|
||||
}, [isRecording])
|
||||
|
||||
const formatDuration = (secs: number) => {
|
||||
const m = Math.floor(secs / 60)
|
||||
const s = secs % 60
|
||||
return `${m}:${s.toString().padStart(2, "0")}`
|
||||
}
|
||||
|
||||
const formatFileSize = (bytes: number) => {
|
||||
if (bytes < 1024) return bytes + " B"
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB"
|
||||
@@ -147,11 +397,11 @@ export default function ChatsPage() {
|
||||
<h2 className="text-lg font-semibold">Chats</h2>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input placeholder="Search conversations..." className="h-9 pl-9" />
|
||||
<Input value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="Search conversations..." className="h-9 pl-9" />
|
||||
</div>
|
||||
</div>
|
||||
<ScrollArea className="flex-1">
|
||||
{conversations.map((conv) => {
|
||||
{filteredConversations.map((conv) => {
|
||||
const person = otherParticipant(conv)
|
||||
const isActive = conv.id === activeChat
|
||||
return (
|
||||
@@ -181,6 +431,9 @@ export default function ChatsPage() {
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
{filteredConversations.length === 0 && searchQuery && (
|
||||
<div className="p-4 text-center text-sm text-muted-foreground">No conversations found</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
@@ -207,16 +460,10 @@ export default function ChatsPage() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<Button
|
||||
variant="ghost" size="icon" className="h-8 w-8"
|
||||
onClick={() => toast.info("Voice calling coming soon")}
|
||||
>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => toast.info("Voice calling coming soon")}>
|
||||
<Phone className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost" size="icon" className="h-8 w-8"
|
||||
onClick={() => toast.info("Video calling coming soon")}
|
||||
>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => toast.info("Video calling coming soon")}>
|
||||
<Video className="h-4 w-4" />
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
@@ -235,10 +482,7 @@ export default function ChatsPage() {
|
||||
<Ban className="mr-2 h-4 w-4" /> Block
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
className="text-destructive"
|
||||
onClick={() => toast.info("Conversation deleted")}
|
||||
>
|
||||
<DropdownMenuItem className="text-destructive" onClick={() => toast.info("Conversation deleted")}>
|
||||
<Trash2 className="mr-2 h-4 w-4" /> Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
@@ -247,12 +491,13 @@ export default function ChatsPage() {
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
<ScrollArea className="flex-1 p-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex-1 overflow-y-auto p-6" style={{ scrollbarWidth: "thin", scrollbarColor: "hsl(var(--muted-foreground) / 0.3) transparent" }}>
|
||||
<div className="space-y-4 min-h-0">
|
||||
{conversation.messages.map((msg) => {
|
||||
const isMe = msg.senderId === "user1"
|
||||
const voiceUrl = voiceMessages.get(msg.id)
|
||||
return (
|
||||
<div key={msg.id} className={cn("flex gap-3", isMe && "flex-row-reverse")}>
|
||||
<div key={msg.id} className={cn("group flex gap-3", isMe && "flex-row-reverse")}>
|
||||
<Avatar className="h-8 w-8 mt-0.5 shrink-0">
|
||||
{isMe ? <AvatarImage src={user.avatar} /> : null}
|
||||
<AvatarFallback className={cn("text-xs", isMe && "bg-primary text-primary-foreground")}>
|
||||
@@ -262,92 +507,208 @@ export default function ChatsPage() {
|
||||
<div className={cn("max-w-[70%]", isMe && "items-end flex flex-col")}>
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-2xl px-4 py-2.5 text-sm",
|
||||
"rounded-2xl px-5 py-3 text-base relative",
|
||||
isMe ? "bg-primary text-primary-foreground rounded-tr-sm" : "bg-muted rounded-tl-sm"
|
||||
)}
|
||||
>
|
||||
{msg.content}
|
||||
{!isMe && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button type="button" className="absolute -right-8 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6 flex items-center justify-center rounded-full hover:bg-sky-400/20">
|
||||
<MoreHorizontal className="h-3.5 w-3.5 text-sky-400" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" side="top" className="w-32">
|
||||
<DropdownMenuItem onClick={() => setReplyingTo(msg)}>
|
||||
<CornerDownRight className="mr-2 h-4 w-4" /> Reply
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => { setForwardMessage(msg); setForwardDialogOpen(true) }}>
|
||||
<Forward className="mr-2 h-4 w-4" /> Forward
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
{isMe && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button type="button" className="absolute -left-8 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6 flex items-center justify-center rounded-full hover:bg-sky-400/20">
|
||||
<MoreHorizontal className="h-3.5 w-3.5 text-sky-400" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" side="top" className="w-32">
|
||||
<DropdownMenuItem onClick={() => { setEditingMessage(msg); setMessageInput(msg.content) }}>
|
||||
<Pencil className="mr-2 h-4 w-4" /> Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setReplyingTo(msg)}>
|
||||
<CornerDownRight className="mr-2 h-4 w-4" /> Reply
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => { setForwardMessage(msg); setForwardDialogOpen(true) }}>
|
||||
<Forward className="mr-2 h-4 w-4" /> Forward
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem className="text-destructive" onClick={() => handleDeleteMessage(msg.id)}>
|
||||
<Trash2 className="mr-2 h-4 w-4" /> Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
{(() => {
|
||||
const replyInfo = replyMap.get(msg.id)
|
||||
return (
|
||||
<>
|
||||
{replyInfo && (
|
||||
<div className={cn("mb-1.5 pl-2 border-l-2 overflow-hidden bg-black/70 rounded-sm text-white", isMe ? "border-white/40" : "border-primary/40")}>
|
||||
<p className="text-[11px] font-medium truncate">{replyInfo.repliedToSender}</p>
|
||||
<p className="text-[11px] text-white/60 truncate">{replyInfo.repliedToContent}</p>
|
||||
</div>
|
||||
)}
|
||||
{voiceUrl ? (
|
||||
<div>
|
||||
<VoiceMessagePlayer src={voiceUrl.url} initialDuration={voiceUrl.duration} />
|
||||
{msg.content && (
|
||||
<p className="mt-1 text-sm text-black">{msg.content}</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{(() => {
|
||||
const files = messageAttachments.get(msg.id)
|
||||
return files && files.length > 0 ? (
|
||||
<div className="space-y-1.5 mb-1.5">
|
||||
{files.map((file, i) =>
|
||||
file.type.startsWith("image/") ? (
|
||||
<div key={i} className="relative group">
|
||||
<img src={file.url} alt={file.name} className="max-w-full rounded-lg max-h-60 object-cover cursor-pointer" onClick={() => window.open(file.url, "_blank")} />
|
||||
<a href={file.url} download={file.name} className="absolute top-2 right-2 h-7 w-7 rounded-full bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Download className="h-3.5 w-3.5 text-white" />
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
<a key={i} href={file.url} download={file.name} className="flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm hover:bg-muted/80 transition-colors">
|
||||
<FileIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<span className="flex-1 min-w-0 truncate">{file.name}</span>
|
||||
<Download className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
</a>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
) : null
|
||||
})()}
|
||||
{isOnlyEmoji(msg.content) ? (
|
||||
<span className="text-4xl leading-none">{msg.content.trim()}</span>
|
||||
) : (
|
||||
msg.content
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
<span className="text-[10px] text-muted-foreground mt-1 px-1">{msg.timestamp}</span>
|
||||
<span className="flex items-center gap-1 text-xs text-muted-foreground mt-1.5 px-1">
|
||||
{msg.timestamp}
|
||||
{isMe && (
|
||||
(() => {
|
||||
const status = messageStatus.get(msg.id)
|
||||
if (status === "read") return <CheckCheck className="h-3 w-3 text-blue-400" />
|
||||
if (status === "delivered") return <CheckCheck className="h-3 w-3 text-muted-foreground/60" />
|
||||
return <Check className="h-3 w-3 text-muted-foreground/60" />
|
||||
})()
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
{/* Input */}
|
||||
<div className="p-4 border-t shrink-0 space-y-2">
|
||||
{attachments.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{attachments.map((file, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-1.5 text-sm max-w-[200px]"
|
||||
>
|
||||
<div key={i} className="flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-1.5 text-sm max-w-[200px]">
|
||||
{isImageFile(file) ? (
|
||||
<Image className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
) : (
|
||||
<File className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<FileIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
)}
|
||||
<span className="truncate">{file.name}</span>
|
||||
<span className="text-xs text-muted-foreground shrink-0">{formatFileSize(file.size)}</span>
|
||||
<Button
|
||||
variant="ghost" size="icon" className="h-5 w-5 -mr-1 shrink-0"
|
||||
onClick={() => removeAttachment(i)}
|
||||
>
|
||||
<Button variant="ghost" size="icon" className="h-5 w-5 -mr-1 shrink-0" onClick={() => removeAttachment(i)}>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{/* Reply bar */}
|
||||
{replyingTo && (
|
||||
<div className="flex items-center gap-2 rounded-lg border-l-4 border-primary bg-muted/50 px-3 py-2 text-sm">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs font-medium text-primary">
|
||||
Replying to {replyingTo.senderId === "user1" ? "yourself" : otherParticipant(conversation).name}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground truncate">{replyingTo.content}</p>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" className="h-6 w-6 shrink-0" onClick={() => setReplyingTo(null)}>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{editingMessage && (
|
||||
<div className="flex items-center gap-2 rounded-lg bg-muted/50 px-3 py-2 text-sm">
|
||||
<Pencil className="h-4 w-4 text-muted-foreground shrink-0" />
|
||||
<span className="text-xs text-muted-foreground">Editing message</span>
|
||||
<Button variant="ghost" size="icon" className="h-6 w-6 shrink-0 ml-auto" onClick={() => { setEditingMessage(null); setMessageInput(""); setTimeout(() => autoResizeTextarea(), 0) }}>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<form onSubmit={handleSend} className="flex items-center gap-2">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt"
|
||||
className="hidden"
|
||||
onChange={handleFileSelect}
|
||||
/>
|
||||
<Button
|
||||
type="button" variant="ghost" size="icon" className="h-9 w-9 shrink-0"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
<input ref={fileInputRef} type="file" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt" className="hidden" onChange={handleFileSelect} />
|
||||
<Button type="button" variant="ghost" size="icon" className="h-9 w-9 shrink-0" onClick={() => fileInputRef.current?.click()}>
|
||||
<Paperclip className="h-4 w-4 text-muted-foreground" />
|
||||
</Button>
|
||||
<div className="relative flex-1">
|
||||
<Input
|
||||
value={messageInput}
|
||||
onChange={(e) => setMessageInput(e.target.value)}
|
||||
placeholder="Type a message..."
|
||||
className="h-9 w-full pr-9"
|
||||
/>
|
||||
<div className="absolute right-0 top-0 bottom-0 flex items-center pr-1" ref={emojiPickerRef}>
|
||||
<Button
|
||||
type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0"
|
||||
onClick={() => setShowEmojiPicker(!showEmojiPicker)}
|
||||
>
|
||||
<Smile className="h-4 w-4 text-muted-foreground" />
|
||||
</Button>
|
||||
{showEmojiPicker && (
|
||||
<div className="absolute bottom-full right-0 mb-2 z-50">
|
||||
<Picker
|
||||
data={data}
|
||||
onEmojiSelect={handleEmojiSelect}
|
||||
theme={theme === "dark" ? "dark" : "light"}
|
||||
previewPosition="none"
|
||||
skinTonePosition="none"
|
||||
set="native"
|
||||
maxFrequentRows={2}
|
||||
/>
|
||||
{isRecording ? (
|
||||
<div className="flex h-9 items-center gap-1 rounded-md border bg-muted/30 px-2">
|
||||
<span className={cn("h-2 w-2 rounded-full", isPaused ? "bg-muted-foreground" : "bg-destructive animate-pulse")} />
|
||||
<span className="text-sm tabular-nums font-medium text-muted-foreground">{formatDuration(recordingDuration)}</span>
|
||||
<div className="flex-1" />
|
||||
<Button type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-muted-foreground hover:text-muted-foreground" onClick={togglePauseRecording}>
|
||||
{isPaused ? <Play className="h-3.5 w-3.5 fill-current ml-0.5" /> : <Pause className="h-3.5 w-3.5 fill-current" />}
|
||||
</Button>
|
||||
<Button type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-destructive hover:text-destructive" onClick={discardRecording}>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-destructive hover:text-destructive" onClick={stopRecording}>
|
||||
<Square className="h-3.5 w-3.5 fill-current" />
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<textarea ref={textareaRef} value={messageInput} onChange={(e) => { setMessageInput(e.target.value); autoResizeTextarea() }} onPaste={(e) => { const items = Array.from(e.clipboardData.items).filter((item) => item.type.startsWith("image/")); if (items.length > 0) { e.preventDefault(); const files = items.map((item) => item.getAsFile()).filter((f): f is File => f !== null); setAttachments((prev) => [...prev, ...files]) } }} placeholder={editingMessage ? "Edit message..." : "Type a message..."} className="w-full resize-none overflow-hidden rounded-md border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 min-h-[36px] max-h-[200px] pr-16" style={{ height: "auto" }} rows={1} />
|
||||
<div className="absolute right-0 top-0 bottom-0 flex items-center pr-1" ref={emojiPickerRef}>
|
||||
<Button type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0" onClick={() => setShowEmojiPicker(!showEmojiPicker)}>
|
||||
<Smile className="h-4 w-4 text-muted-foreground" />
|
||||
</Button>
|
||||
<Button type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0" onClick={startRecording}>
|
||||
<Mic className="h-4 w-4 text-muted-foreground" />
|
||||
</Button>
|
||||
{showEmojiPicker && (
|
||||
<div className="absolute bottom-full right-0 mb-2 z-50">
|
||||
<Picker data={data} onEmojiSelect={handleEmojiSelect} theme={theme === "dark" ? "dark" : "light"} previewPosition="none" skinTonePosition="none" set="native" emojiSize={36} maxFrequentRows={2} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Button type="submit" size="icon" className="h-9 w-9 shrink-0" disabled={!messageInput.trim() && attachments.length === 0}>
|
||||
<Send className="h-4 w-4" />
|
||||
{editingMessage ? <Pencil className="h-4 w-4" /> : <Send className="h-4 w-4" />}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -366,37 +727,95 @@ export default function ChatsPage() {
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Report {conversation ? otherParticipant(conversation).name : "User"}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Let us know why you're reporting this conversation.
|
||||
</DialogDescription>
|
||||
<DialogDescription>Let us know why you're reporting this conversation.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-3 py-2">
|
||||
<Label htmlFor="reason">Reason</Label>
|
||||
<Textarea
|
||||
id="reason"
|
||||
placeholder="Describe the issue..."
|
||||
value={reportReason}
|
||||
onChange={(e) => setReportReason(e.target.value)}
|
||||
rows={4}
|
||||
/>
|
||||
<Textarea id="reason" placeholder="Describe the issue..." value={reportReason} onChange={(e) => setReportReason(e.target.value)} rows={4} />
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DialogClose>
|
||||
<Button
|
||||
onClick={() => {
|
||||
toast.success("Report submitted")
|
||||
setReportReason("")
|
||||
setReportDialogOpen(false)
|
||||
}}
|
||||
disabled={!reportReason.trim()}
|
||||
>
|
||||
Submit Report
|
||||
</Button>
|
||||
<DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>
|
||||
<Button onClick={() => { toast.success("Report submitted"); setReportReason(""); setReportDialogOpen(false) }} disabled={!reportReason.trim()}>Submit Report</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Forward dialog */}
|
||||
<Dialog open={forwardDialogOpen} onOpenChange={setForwardDialogOpen}>
|
||||
<DialogContent className="sm:max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Forward message</DialogTitle>
|
||||
<DialogDescription>Select who to forward this message to.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input value={forwardSearch} onChange={(e) => setForwardSearch(e.target.value)} placeholder="Search contacts..." className="h-9 pl-9" />
|
||||
</div>
|
||||
<ScrollArea className="max-h-64">
|
||||
<div className="space-y-0.5">
|
||||
{conversations
|
||||
.slice()
|
||||
.sort((a, b) => b.messages.length - a.messages.length)
|
||||
.filter((conv) => {
|
||||
const person = otherParticipant(conv)
|
||||
return person.name.toLowerCase().includes(forwardSearch.toLowerCase())
|
||||
})
|
||||
.map((conv) => {
|
||||
const person = otherParticipant(conv)
|
||||
return (
|
||||
<button
|
||||
key={conv.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const msg = forwardMessage
|
||||
if (!msg) return
|
||||
const newContent = `📨 Forwarded: ${msg.content}`
|
||||
setConversations((prev) =>
|
||||
prev.map((c) =>
|
||||
c.id === conv.id
|
||||
? {
|
||||
...c,
|
||||
messages: [
|
||||
...c.messages,
|
||||
{
|
||||
id: crypto.randomUUID(),
|
||||
conversationId: conv.id,
|
||||
senderId: "user1",
|
||||
senderName: "Sarah Chen",
|
||||
senderAvatar: "SC",
|
||||
content: newContent,
|
||||
timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
|
||||
},
|
||||
],
|
||||
lastMessage: newContent,
|
||||
lastMessageTime: "Just now",
|
||||
}
|
||||
: c
|
||||
)
|
||||
)
|
||||
setForwardDialogOpen(false)
|
||||
setForwardSearch("")
|
||||
toast.success("Message forwarded")
|
||||
}}
|
||||
className="w-full flex items-center gap-3 rounded-lg p-2.5 text-left transition-colors hover:bg-muted"
|
||||
>
|
||||
<Avatar className="h-9 w-9 shrink-0">
|
||||
<AvatarFallback>{person.avatar}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate">{person.name}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">{person.role} · {conv.messages.length} messages</p>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
{forwardSearch && conversations.filter((conv) => otherParticipant(conv).name.toLowerCase().includes(forwardSearch.toLowerCase())).length === 0 && (
|
||||
<p className="text-sm text-muted-foreground text-center py-4">No contacts found</p>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -68,8 +68,11 @@
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -51,15 +51,16 @@ export function LeadStatusChart({ data }: LeadStatusChartProps) {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, delay: 0.2 }}
|
||||
className="h-full"
|
||||
>
|
||||
<Card>
|
||||
<Card className="h-full">
|
||||
<CardHeader>
|
||||
<CardTitle>Lead Status</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col items-center">
|
||||
<CardContent className="flex flex-1 flex-col">
|
||||
<div className="flex flex-1 flex-col items-center justify-center">
|
||||
{/* Donut */}
|
||||
<svg width="280" height="280" viewBox="0 0 320 320" className="overflow-visible">
|
||||
<svg width="100%" height="100%" viewBox="0 0 320 320" className="max-h-full overflow-visible" style={{ maxWidth: "280px" }}>
|
||||
<defs>
|
||||
{segs.map((s, i) => (
|
||||
<radialGradient key={i} id={`chart-grad-${i}`} cx="50%" cy="50%" r="50%">
|
||||
|
||||
@@ -22,8 +22,8 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
|
||||
const [hovered, setHovered] = useState<number | null>(null)
|
||||
|
||||
const width = 880
|
||||
const height = 380
|
||||
const padding = { top: 28, right: 24, bottom: 44, left: 44 }
|
||||
const height = 620
|
||||
const padding = { top: 128, right: 24, bottom: 48, left: 44 }
|
||||
const chartW = width - padding.left - padding.right
|
||||
const chartH = height - padding.top - padding.bottom
|
||||
|
||||
@@ -55,8 +55,9 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, delay: 0.3 }}
|
||||
className="h-full"
|
||||
>
|
||||
<Card>
|
||||
<Card className="h-full">
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
@@ -77,12 +78,12 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="relative">
|
||||
<CardContent className="flex flex-1 flex-col">
|
||||
<div className="relative flex-1">
|
||||
<svg
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
width="100%"
|
||||
height="auto"
|
||||
height="100%"
|
||||
className="block overflow-visible"
|
||||
>
|
||||
<defs>
|
||||
|
||||
@@ -32,7 +32,7 @@ export function StatCard({ title, value, icon: Icon, variant = "default", descri
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, delay: index * 0.05 }}
|
||||
>
|
||||
<Card className="group hover:shadow-md transition-all duration-200">
|
||||
<Card className="group hover:shadow-md transition-all duration-200 h-full">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-1">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useState, useEffect } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { useTheme } from "next-themes"
|
||||
import { cn } from "@/lib/utils"
|
||||
@@ -36,9 +36,12 @@ export function Topbar({ onMenuClick }: TopbarProps) {
|
||||
const router = useRouter()
|
||||
const { theme, setTheme } = useTheme()
|
||||
const { user, logout } = useUser()
|
||||
const [mounted, setMounted] = useState(false)
|
||||
const [searchOpen, setSearchOpen] = useState(false)
|
||||
|
||||
useEffect(() => { setMounted(true) }, [])
|
||||
if (!user) return null
|
||||
const initials = user.name.split(" ").map((n) => n[0]).join("")
|
||||
const initials = (user.firstName[0] + user.lastName[0]).toUpperCase()
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-background px-4 lg:px-6">
|
||||
@@ -74,7 +77,7 @@ export function Topbar({ onMenuClick }: TopbarProps) {
|
||||
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
|
||||
className="text-muted-foreground"
|
||||
>
|
||||
{theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
|
||||
{mounted ? (theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />) : <div className="h-5 w-5" />}
|
||||
</Button>
|
||||
|
||||
{/* Notifications */}
|
||||
@@ -116,13 +119,13 @@ export function Topbar({ onMenuClick }: TopbarProps) {
|
||||
<AvatarImage src={user.avatar} />
|
||||
<AvatarFallback>{initials}</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="hidden text-sm font-medium md:inline-block">{user.name}</span>
|
||||
<span className="hidden text-sm font-medium md:inline-block">{user.firstName} {user.lastName}</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56">
|
||||
<DropdownMenuLabel className="font-normal">
|
||||
<div className="flex flex-col space-y-1">
|
||||
<p className="text-sm font-medium">{user.name}</p>
|
||||
<p className="text-sm font-medium">{user.firstName} {user.lastName}</p>
|
||||
<p className="text-xs text-muted-foreground">{user.email}</p>
|
||||
<Badge variant="secondary" className="mt-1 w-fit text-xs capitalize">{user.role}</Badge>
|
||||
</div>
|
||||
|
||||
@@ -14,7 +14,7 @@ const ScrollArea = React.forwardRef<
|
||||
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
|
||||
{children}
|
||||
</ScrollAreaPrimitive.Viewport>
|
||||
<ScrollBar />
|
||||
<ScrollBar forceMount />
|
||||
<ScrollAreaPrimitive.Corner />
|
||||
</ScrollAreaPrimitive.Root>
|
||||
))
|
||||
@@ -28,14 +28,14 @@ const ScrollBar = React.forwardRef<
|
||||
ref={ref}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"flex touch-none select-none transition-colors",
|
||||
orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
|
||||
"flex touch-none select-none transition-opacity",
|
||||
orientation === "vertical" && "h-full w-3 border-l border-l-transparent p-[1px]",
|
||||
orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
|
||||
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-muted-foreground/30" />
|
||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
))
|
||||
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
|
||||
|
||||
Reference in New Issue
Block a user