'use client' import { useState } from 'react' import { type Thread, getThreadName } from '../hooks/useThreads' import { LogoMark } from './Logo' import { useTheme } from '../hooks/useTheme' import { useAuth } from '../hooks/useAuth' interface SidebarProps { threads: Thread[] currentThreadId: string | null onSelectThread: (threadId: string) => void onNewThread: () => void onDeleteThread: (threadId: string) => void isOpen: boolean onToggle: () => void loading?: boolean } export function Sidebar({ threads, currentThreadId, onSelectThread, onNewThread, onDeleteThread, isOpen, onToggle, loading, }: SidebarProps) { const [confirmingDelete, setConfirmingDelete] = useState(null) const { theme, toggleTheme } = useTheme() const { logout } = useAuth() const formatRelativeTime = (timestamp: number) => { // Handle different timestamp formats based on magnitude let ms: number if (timestamp > 1e15) { ms = timestamp / 1000 } else if (timestamp > 1e12) { ms = timestamp } else { ms = timestamp * 1000 } const date = new Date(ms) const now = new Date() const diffMs = now.getTime() - date.getTime() const diffSeconds = Math.floor(diffMs / 1000) const diffMinutes = Math.floor(diffSeconds / 60) const diffHours = Math.floor(diffMinutes / 60) const diffDays = Math.floor(diffHours / 24) const diffWeeks = Math.floor(diffDays / 7) const diffMonths = Math.floor(diffDays / 30) const diffYears = Math.floor(diffDays / 365) const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' }) if (diffSeconds < 60) { return rtf.format(-diffSeconds, 'second') } else if (diffMinutes < 60) { return rtf.format(-diffMinutes, 'minute') } else if (diffHours < 24) { return rtf.format(-diffHours, 'hour') } else if (diffDays < 7) { return rtf.format(-diffDays, 'day') } else if (diffWeeks < 4) { return rtf.format(-diffWeeks, 'week') } else if (diffMonths < 12) { return rtf.format(-diffMonths, 'month') } else { return rtf.format(-diffYears, 'year') } } const handleDeleteClick = (e: React.MouseEvent, threadId: string) => { e.stopPropagation() setConfirmingDelete(threadId) } const handleConfirmDelete = (e: React.MouseEvent, threadId: string) => { e.stopPropagation() onDeleteThread(threadId) setConfirmingDelete(null) } const handleCancelDelete = (e: React.MouseEvent) => { e.stopPropagation() setConfirmingDelete(null) } return ( ) }