Added messaging appLets Chat

app/api/gemini/chat/route.ts

@@ -45,7 +45,7 @@ export async function POST(request: NextRequest) {
             // Process each part to separate thoughts from actual response
             let text = ''
             let thought = ''
-            
+
             if (chunk.candidates?.[0]?.content?.parts) {
               for (const part of chunk.candidates[0].content.parts) {
                 if (!part.text) {
@@ -76,7 +76,7 @@ export async function POST(request: NextRequest) {
 
     return new NextResponse(stream, {
       headers: {
-        'Content-Type': 'text/event-stream',
+        'Content-Type': 'text/event-stream; charset=utf-8',
         'Cache-Control': 'no-cache',
         'Connection': 'keep-alive',
       },

app/api/messages/route.ts

@@ -0,0 +1,125 @@
+import { NextResponse } from 'next/server'
+import fs from 'fs'
+import path from 'path'
+
+const dataFilePath = path.join(process.cwd(), 'app/data/messages.json')
+
+// Simple bad word list (expand as needed)
+const BAD_WORDS = [
+    // English
+    'badword', 'spam', 'toxic', 'hate', 'violence', 'kill', 'stupid', 'idiot',
+    'fuck', 'fuxk', 'fck', 'shit', 'sh!t', 'bitch', 'asshole', 'damn', 'hell',
+    'crap', 'piss', 'dick', 'cock', 'pussy', 'bastard', 'slut', 'whore',
+    // Spanish
+    'puto', 'mierda', 'coño', 'cabron', 'pendejo', 'joder',
+    // French
+    'merde', 'putain', 'connard', 'salope', 'encule',
+    // German
+    'scheisse', 'arschloch', 'schlampe', 'fotze',
+    // Italian
+    'cazzo', 'merda', 'vaffanculo', 'stronzo',
+    // Portuguese
+    'porra', 'caralho', 'merda', 'puta',
+    // Russian (transliterated)
+    'cyka', 'blyat', 'nahui', 'pizda',
+    // Hindi (transliterated)
+    'madarchod', 'bhenchod', 'chutiya', 'kutta', 'kamina'
+]
+
+interface Message {
+    id: string
+    text: string
+    sender: string
+    userId: string
+    timestamp: number
+}
+
+const getMessages = (): Message[] => {
+    try {
+        if (!fs.existsSync(dataFilePath)) {
+            fs.writeFileSync(dataFilePath, '[]', 'utf8')
+            return []
+        }
+        const fileData = fs.readFileSync(dataFilePath, 'utf8')
+        return JSON.parse(fileData)
+    } catch (error) {
+        console.error('Error reading messages:', error)
+        return []
+    }
+}
+
+const saveMessages = (messages: Message[]) => {
+    try {
+        fs.writeFileSync(dataFilePath, JSON.stringify(messages, null, 2), 'utf8')
+    } catch (error) {
+        console.error('Error saving messages:', error)
+    }
+}
+
+export async function GET() {
+    const messages = getMessages()
+    return NextResponse.json(messages, {
+        headers: { 'Content-Type': 'application/json; charset=utf-8' }
+    })
+}
+
+export async function POST(request: Request) {
+    try {
+        const body = await request.json()
+        const { text, sender, userId } = body
+
+        // 1. Validation: Length
+        if (!text || text.length > 200) {
+            return NextResponse.json({ error: 'Message too long (max 200 chars)' }, { status: 400 })
+        }
+
+        if (!text.trim()) {
+            return NextResponse.json({ error: 'Message cannot be empty' }, { status: 400 })
+        }
+
+        // 2. Validation: Toxicity
+        const lowerText = text.toLowerCase()
+        const containsBadWord = BAD_WORDS.some(word => lowerText.includes(word))
+        if (containsBadWord) {
+            return NextResponse.json({ error: 'Message contains inappropriate content' }, { status: 400 })
+        }
+
+        const messages = getMessages()
+        const now = Date.now()
+
+        // 3. Validation: Spam (Rate Limiting)
+        // Check if this user sent a message in the last 2 seconds
+        const lastMessageFromUser = messages
+            .filter(m => m.userId === userId)
+            .sort((a, b) => b.timestamp - a.timestamp)[0]
+
+        if (lastMessageFromUser && (now - lastMessageFromUser.timestamp) < 2000) {
+            return NextResponse.json({ error: 'You are sending messages too fast. Please wait.' }, { status: 429 })
+        }
+
+        // Check for duplicate message from same user
+        if (lastMessageFromUser && lastMessageFromUser.text === text) {
+            return NextResponse.json({ error: 'Do not send duplicate messages.' }, { status: 400 })
+        }
+
+        const newMessage: Message = {
+            id: Math.random().toString(36).substring(2, 15),
+            text: text.trim(),
+            sender: sender || 'Anonymous',
+            userId: userId,
+            timestamp: now
+        }
+
+        // Keep only last 100 messages to prevent file from growing too large
+        const updatedMessages = [...messages, newMessage].slice(-100)
+
+        saveMessages(updatedMessages)
+
+        return NextResponse.json(updatedMessages, {
+            headers: { 'Content-Type': 'application/json; charset=utf-8' }
+        })
+    } catch (error) {
+        console.error('Error processing message:', error)
+        return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
+    }
+}

app/components/Calendar.tsx

@@ -6,9 +6,9 @@ import {
   CaretRight,
   Plus,
   MagnifyingGlass,
-  List,
   CalendarBlank,
-  Clock
+  List,
+  Check
 } from '@phosphor-icons/react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { useKV } from '../hooks/useKV'
@@ -32,24 +32,22 @@ type ViewMode = 'day' | 'week' | 'month' | 'year'
 export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: CalendarProps) {
   const [currentDate, setCurrentDate] = useState(new Date())
   const [view, setView] = useState<ViewMode>('month')
-  const [selectedDate, setSelectedDate] = useState<Date | null>(null)
   const [customEvents, setCustomEvents] = useKV<CalendarEvent[]>('custom-calendar-events', [])
   const [searchQuery, setSearchQuery] = useState('')
   const [isSearchOpen, setIsSearchOpen] = useState(false)
   const scrollContainerRef = useRef<HTMLDivElement>(null)
+  const [sidebarOpen, setSidebarOpen] = useState(true)
 
   // Scroll to 8 AM on mount for day/week views
   useEffect(() => {
     if ((view === 'day' || view === 'week') && scrollContainerRef.current) {
-      // 8 AM is the 8th hour slot, assuming 60px height per hour
       scrollContainerRef.current.scrollTop = 8 * 60
     }
   }, [view])
 
-  // Generate all events for the current view's year
+  // Generate all events
   const allEvents = useMemo(() => {
     const year = currentDate.getFullYear()
-    // Get holidays for previous, current, and next year to handle boundary transitions
     const years = [year - 1, year, year + 1]
     let events: CalendarEvent[] = [...customEvents]
 
@@ -77,9 +75,8 @@ export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: C
     const firstDay = new Date(year, month, 1)
     const lastDay = new Date(year, month + 1, 0)
     const daysInMonth = lastDay.getDate()
-    const startingDayOfWeek = firstDay.getDay() // 0 = Sunday
+    const startingDayOfWeek = firstDay.getDay()
 
-    // Previous month days to fill the grid
     const prevMonthDays = []
     const prevMonthLastDay = new Date(year, month, 0).getDate()
     for (let i = startingDayOfWeek - 1; i >= 0; i--) {
@@ -91,7 +88,6 @@ export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: C
       })
     }
 
-    // Current month days
     const currentMonthDays = []
     for (let i = 1; i <= daysInMonth; i++) {
       currentMonthDays.push({
@@ -102,10 +98,9 @@ export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: C
       })
     }
 
-    // Next month days to complete the grid (6 rows * 7 cols = 42 cells usually)
     const nextMonthDays = []
     const totalDaysSoFar = prevMonthDays.length + currentMonthDays.length
-    const remainingCells = 42 - totalDaysSoFar // Ensure 6 rows
+    const remainingCells = 42 - totalDaysSoFar
 
     for (let i = 1; i <= remainingCells; i++) {
       nextMonthDays.push({
@@ -134,37 +129,24 @@ export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: C
 
   const handlePrev = () => {
     const newDate = new Date(currentDate)
-    if (view === 'month') {
-      newDate.setMonth(newDate.getMonth() - 1)
-    } else if (view === 'year') {
-      newDate.setFullYear(newDate.getFullYear() - 1)
-    } else if (view === 'week') {
-      newDate.setDate(newDate.getDate() - 7)
-    } else if (view === 'day') {
-      newDate.setDate(newDate.getDate() - 1)
-    }
+    if (view === 'month') newDate.setMonth(newDate.getMonth() - 1)
+    else if (view === 'year') newDate.setFullYear(newDate.getFullYear() - 1)
+    else if (view === 'week') newDate.setDate(newDate.getDate() - 7)
+    else if (view === 'day') newDate.setDate(newDate.getDate() - 1)
     setCurrentDate(newDate)
   }
 
   const handleNext = () => {
     const newDate = new Date(currentDate)
-    if (view === 'month') {
-      newDate.setMonth(newDate.getMonth() + 1)
-    } else if (view === 'year') {
-      newDate.setFullYear(newDate.getFullYear() + 1)
-    } else if (view === 'week') {
-      newDate.setDate(newDate.getDate() + 7)
-    } else if (view === 'day') {
-      newDate.setDate(newDate.getDate() + 1)
-    }
+    if (view === 'month') newDate.setMonth(newDate.getMonth() + 1)
+    else if (view === 'year') newDate.setFullYear(newDate.getFullYear() + 1)
+    else if (view === 'week') newDate.setDate(newDate.getDate() + 7)
+    else if (view === 'day') newDate.setDate(newDate.getDate() + 1)
     setCurrentDate(newDate)
   }
 
-  const handleToday = () => {
-    setCurrentDate(new Date())
-  }
+  const handleToday = () => setCurrentDate(new Date())
 
-  // Helper for Week View
   const getWeekDays = () => {
     const startOfWeek = new Date(currentDate)
     const day = startOfWeek.getDay()
@@ -181,22 +163,15 @@ export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: C
   }
 
   const renderHeaderTitle = () => {
-    if (view === 'year') {
-      return <span className="font-bold">{currentDate.getFullYear()}</span>
-    }
+    if (view === 'year') return <span className="font-semibold text-xl">{currentDate.getFullYear()}</span>
     if (view === 'day') {
       return (
         <div className="flex flex-col leading-tight">
-          <span className="font-bold text-2xl">{currentDate.getDate()} {monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}</span>
-          <span className="text-lg font-normal text-gray-400">{weekDays[currentDate.getDay()]}</span>
+          <span className="font-semibold text-xl">{currentDate.getDate()} {monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}</span>
         </div>
       )
     }
-    return (
-      <>
-        <span className="font-bold">{monthNames[currentDate.getMonth()]}</span> {currentDate.getFullYear()}
-      </>
-    )
+    return <span className="font-semibold text-xl">{monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}</span>
   }
 
   return (
@@ -213,320 +188,287 @@ export function Calendar({ onClose, onMinimize, onMaximize, onFocus, zIndex }: C
       height={750}
       x={50}
       y={50}
-      className="calendar-window"
+      className="calendar-window !bg-[#1e1e1e]/80 !backdrop-blur-2xl border border-white/10 shadow-2xl !rounded-xl overflow-hidden"
+      contentClassName="!bg-transparent"
+      headerClassName="!bg-transparent border-b border-white/5"
     >
-      <div className="flex flex-col h-full bg-[#1E1E1E] text-white overflow-hidden">
-        {/* Toolbar */}
-        <div className="h-14 flex items-center justify-between px-4 border-b border-[#333] bg-[#252526]">
-          <div className="flex items-center gap-4">
-            <div className="flex items-center gap-2">
-              <button
-                onClick={handleToday}
-                className="p-1.5 hover:bg-[#333] rounded-md text-gray-400 hover:text-white transition-colors"
-                title="Go to Today"
-              >
-                <CalendarBlank size={18} />
-              </button>
-            </div>
-            <div className="h-6 w-px bg-[#444]" />
-            <button className="p-1.5 hover:bg-[#333] rounded-full text-gray-400 hover:text-white transition-colors">
-              <Plus size={18} weight="bold" />
-            </button>
-          </div>
-
-          <div className="flex items-center bg-[#111] rounded-lg p-1 border border-[#333]">
-            {(['day', 'week', 'month', 'year'] as ViewMode[]).map((v) => (
-              <button
-                key={v}
-                onClick={() => setView(v)}
-                className={`px-3 py-1 text-xs font-medium rounded-md capitalize transition-all ${view === v
-                    ? 'bg-[#333] text-white shadow-sm'
-                    : 'text-gray-400 hover:text-gray-200'
-                  }`}
-              >
-                {v}
-              </button>
-            ))}
-          </div>
-
-          <div className="flex items-center gap-2">
-            <div className={`flex items-center bg-[#111] border border-[#333] rounded-md px-2 py-1 transition-all ${isSearchOpen ? 'w-48' : 'w-8 border-transparent bg-transparent'}`}>
-              <button onClick={() => setIsSearchOpen(!isSearchOpen)} className="text-gray-400 hover:text-white">
-                <MagnifyingGlass size={16} />
-              </button>
-              {isSearchOpen && (
-                <input
-                  type="text"
-                  placeholder="Search"
-                  className="bg-transparent border-none outline-none text-xs text-white ml-2 w-full"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  autoFocus
-                />
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Header */}
-        <div className="h-20 flex items-center justify-between px-6 py-4 shrink-0">
-          <h1 className="text-3xl font-light tracking-tight flex items-baseline gap-2">
-            {renderHeaderTitle()}
-          </h1>
-
-          <div className="flex items-center gap-2">
-            <button
-              onClick={handlePrev}
-              className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-[#333] transition-colors"
+      <div className="flex h-full text-white overflow-hidden">
+        {/* Sidebar */}
+        <AnimatePresence initial={false}>
+          {sidebarOpen && (
+            <motion.div
+              initial={{ width: 0, opacity: 0 }}
+              animate={{ width: 240, opacity: 1 }}
+              exit={{ width: 0, opacity: 0 }}
+              className="border-r border-white/10 bg-black/20 backdrop-blur-md flex flex-col"
             >
-              <CaretLeft size={20} />
-            </button>
-            <button
-              onClick={handleToday}
-              className="px-3 py-1 bg-[#333] hover:bg-[#444] rounded-md text-sm font-medium transition-colors border border-[#444]"
-            >
-              Today
-            </button>
-            <button
-              onClick={handleNext}
-              className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-[#333] transition-colors"
-            >
-              <CaretRight size={20} />
-            </button>
-          </div>
-        </div>
+              <div className="p-4">
+                <div className="grid grid-cols-7 gap-y-2 text-center mb-4">
+                  {weekDays.map(d => (
+                    <div key={d} className="text-[10px] text-gray-500 font-medium">{d.charAt(0)}</div>
+                  ))}
+                  {calendarDays.map((d, i) => {
+                    if (!d.isCurrentMonth) return <div key={i} className="text-gray-600 text-xs">{d.day}</div>
+                    const isCurrentDay = isToday(d.day, d.month, d.year)
+                    const isSelected = d.day === currentDate.getDate() && d.month === currentDate.getMonth()
+
+                    return (
+                      <div
+                        key={i}
+                        onClick={() => setCurrentDate(new Date(d.year, d.month, d.day))}
+                        className={`
+                          text-xs w-6 h-6 flex items-center justify-center rounded-full mx-auto cursor-pointer transition-colors
+                          ${isCurrentDay ? 'bg-red-500 text-white font-bold' : isSelected ? 'bg-white/20 text-white' : 'text-gray-300 hover:bg-white/10'}
+                        `}
+                      >
+                        {d.day}
+                      </div>
+                    )
+                  })}
+                </div>
 
-        {/* Views */}
-        <div className="flex-1 overflow-hidden flex flex-col relative">
-
-          {/* YEAR VIEW */}
-          {view === 'year' && (
-            <div className="flex-1 overflow-y-auto p-6">
-              <div className="grid grid-cols-4 gap-x-8 gap-y-8">
-                {monthNames.map((month, monthIndex) => {
-                  const days = getDaysInMonth(currentDate.getFullYear(), monthIndex)
-                  return (
-                    <div key={month} className="flex flex-col gap-2">
-                      <h3 className="text-red-500 font-medium text-lg pl-1">{month}</h3>
-                      <div className="grid grid-cols-7 gap-y-2 text-center">
-                        {/* Weekday Headers */}
-                        {weekDays.map(d => (
-                          <div key={d} className="text-[10px] text-gray-500 font-medium">{d.charAt(0)}</div>
-                        ))}
-                        {/* Days */}
-                        {days.map((d, i) => {
-                          if (!d.isCurrentMonth) return <div key={i} />
-                          const dateStr = `${d.year}-${String(d.month + 1).padStart(2, '0')}-${String(d.day).padStart(2, '0')}`
-                          const hasEvents = getEventsForDate(dateStr).length > 0
-                          const isCurrentDay = isToday(d.day, d.month, d.year)
-
-                          return (
-                            <div
-                              key={i}
-                              className={`
-                                text-xs w-6 h-6 flex items-center justify-center rounded-full mx-auto cursor-pointer hover:bg-[#333] relative
-                                ${isCurrentDay ? 'bg-red-500 text-white font-bold' : 'text-gray-300'}
-                              `}
-                              onClick={() => {
-                                setCurrentDate(new Date(d.year, d.month, d.day))
-                                setView('day')
-                              }}
-                            >
-                              {d.day}
-                              {hasEvents && !isCurrentDay && (
-                                <div className="absolute bottom-0.5 w-0.5 h-0.5 bg-gray-400 rounded-full" />
-                              )}
-                            </div>
-                          )
-                        })}
+                <div className="mt-8 space-y-4">
+                  <div className="flex items-center justify-between text-xs text-gray-400 font-medium px-2">
+                    <span>CALENDARS</span>
+                  </div>
+                  <div className="space-y-1">
+                    {['Home', 'Work', 'Holidays', 'Birthdays'].map((cal, i) => (
+                      <div key={cal} className="flex items-center gap-3 px-2 py-1.5 rounded-md hover:bg-white/5 cursor-pointer group">
+                        <div className={`w-3 h-3 rounded-full border-2 ${i === 0 ? 'border-blue-500 bg-blue-500' :
+                            i === 1 ? 'border-purple-500 bg-purple-500' :
+                              i === 2 ? 'border-green-500 bg-green-500' :
+                                'border-red-500 bg-red-500'
+                          }`} />
+                        <span className="text-sm text-gray-300">{cal}</span>
+                        <Check size={12} className="ml-auto opacity-0 group-hover:opacity-100 text-gray-500" />
                       </div>
-                    </div>
-                  )
-                })}
+                    ))}
+                  </div>
+                </div>
               </div>
-            </div>
+            </motion.div>
           )}
+        </AnimatePresence>
+
+        {/* Main Content */}
+        <div className="flex-1 flex flex-col bg-transparent">
+          {/* Toolbar */}
+          <div className="h-14 flex items-center justify-between px-6 border-b border-white/10 bg-[#252525]/30 backdrop-blur-sm">
+            <div className="flex items-center gap-4">
+              <button onClick={() => setSidebarOpen(!sidebarOpen)} className="p-2 hover:bg-white/10 rounded-md transition-colors text-gray-400 hover:text-white">
+                <List size={20} />
+              </button>
+              <div className="text-2xl font-light tracking-tight">{renderHeaderTitle()}</div>
+            </div>
 
-          {/* MONTH VIEW */}
-          {view === 'month' && (
-            <div className="flex-1 flex flex-col px-4 pb-4 overflow-hidden">
-              <div className="grid grid-cols-7 mb-2 shrink-0">
-                {weekDays.map(day => (
-                  <div key={day} className="text-right pr-2 text-sm font-medium text-gray-500">
-                    {day}
-                  </div>
-                ))}
+            <div className="flex items-center gap-4">
+              <div className="flex items-center bg-black/20 rounded-lg p-1 border border-white/5">
+                <button onClick={handlePrev} className="p-1.5 hover:bg-white/10 rounded-md text-gray-400 hover:text-white transition-colors">
+                  <CaretLeft size={16} />
+                </button>
+                <button onClick={handleToday} className="px-3 py-1 text-sm font-medium text-gray-300 hover:text-white transition-colors">
+                  Today
+                </button>
+                <button onClick={handleNext} className="p-1.5 hover:bg-white/10 rounded-md text-gray-400 hover:text-white transition-colors">
+                  <CaretRight size={16} />
+                </button>
               </div>
 
-              <div className="flex-1 grid grid-cols-7 grid-rows-6 border-t border-l border-[#333] bg-[#1E1E1E]">
-                {calendarDays.map((dateObj, index) => {
-                  const dateStr = `${dateObj.year}-${String(dateObj.month + 1).padStart(2, '0')}-${String(dateObj.day).padStart(2, '0')}`
-                  const dayEvents = getEventsForDate(dateStr)
-                  const isCurrentDay = isToday(dateObj.day, dateObj.month, dateObj.year)
-
-                  return (
-                    <div
-                      key={index}
-                      className={`
-                        border-b border-r border-[#333] p-1 relative group transition-colors
-                        ${!dateObj.isCurrentMonth ? 'bg-[#1a1a1a] text-gray-600' : 'hover:bg-[#252526]'}
-                      `}
-                      onClick={() => {
-                        setCurrentDate(new Date(dateObj.year, dateObj.month, dateObj.day))
-                        setView('day')
-                      }}
-                    >
-                      <div className="flex justify-end mb-1">
-                        <span
-                          className={`
-                            text-sm font-medium w-7 h-7 flex items-center justify-center rounded-full
-                            ${isCurrentDay
-                              ? 'bg-red-500 text-white shadow-lg shadow-red-900/50'
-                              : dateObj.isCurrentMonth ? 'text-gray-300' : 'text-gray-600'}
-                          `}
-                        >
-                          {dateObj.day}
-                        </span>
-                      </div>
-
-                      <div className="space-y-1 overflow-y-auto max-h-[calc(100%-2rem)] custom-scrollbar">
-                        {dayEvents.map((event, i) => (
-                          <div
-                            key={i}
-                            className={`
-                              text-[10px] px-1.5 py-0.5 rounded-sm truncate cursor-pointer hover:opacity-80
-                              ${event.color || 'bg-blue-500'} text-white font-medium shadow-sm
-                              ${event.id === 'reuben-bday' ? 'animate-pulse ring-1 ring-pink-300' : ''}
-                            `}
-                            title={event.title}
-                          >
-                            {event.title}
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  )
-                })}
+              <div className="flex items-center bg-black/20 rounded-lg p-1 border border-white/5">
+                {(['day', 'week', 'month', 'year'] as ViewMode[]).map((v) => (
+                  <button
+                    key={v}
+                    onClick={() => setView(v)}
+                    className={`px-3 py-1 text-xs font-medium rounded-md capitalize transition-all ${view === v
+                      ? 'bg-[#444] text-white shadow-sm'
+                      : 'text-gray-400 hover:text-gray-200'
+                      }`}
+                  >
+                    {v}
+                  </button>
+                ))}
               </div>
+
+              <button className="p-2 hover:bg-white/10 rounded-full transition-colors text-gray-400 hover:text-white">
+                <Plus size={20} />
+              </button>
+              <button className="p-2 hover:bg-white/10 rounded-full transition-colors text-gray-400 hover:text-white">
+                <MagnifyingGlass size={20} />
+              </button>
             </div>
-          )}
+          </div>
 
-          {/* WEEK VIEW */}
-          {view === 'week' && (
-            <div className="flex-1 flex flex-col overflow-hidden">
-              {/* Week Header */}
-              <div className="flex border-b border-[#333] shrink-0 pl-14 pr-4 pb-2">
-                {getWeekDays().map((d, i) => {
-                  const isCurrentDay = isToday(d.getDate(), d.getMonth(), d.getFullYear())
-                  return (
-                    <div key={i} className="flex-1 text-center border-l border-[#333] first:border-l-0">
-                      <div className={`text-xs font-medium mb-1 ${isCurrentDay ? 'text-red-500' : 'text-gray-500'}`}>
-                        {weekDays[d.getDay()]}
+          {/* View Content */}
+          <div className="flex-1 overflow-hidden relative">
+            <AnimatePresence mode="wait">
+              {view === 'month' && (
+                <motion.div
+                  key="month"
+                  initial={{ opacity: 0, scale: 0.98 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 1.02 }}
+                  transition={{ duration: 0.2 }}
+                  className="h-full flex flex-col"
+                >
+                  <div className="grid grid-cols-7 border-b border-white/5 bg-black/10">
+                    {weekDays.map(day => (
+                      <div key={day} className="py-2 text-right pr-4 text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        {day}
                       </div>
-                      <div className={`
-                        text-xl font-light w-8 h-8 flex items-center justify-center rounded-full mx-auto
-                        ${isCurrentDay ? 'bg-red-500 text-white font-bold' : 'text-white'}
-                      `}>
-                        {d.getDate()}
-                      </div>
-                    </div>
-                  )
-                })}
-              </div>
+                    ))}
+                  </div>
+                  <div className="flex-1 grid grid-cols-7 grid-rows-6">
+                    {calendarDays.map((dateObj, index) => {
+                      const dateStr = `${dateObj.year}-${String(dateObj.month + 1).padStart(2, '0')}-${String(dateObj.day).padStart(2, '0')}`
+                      const dayEvents = getEventsForDate(dateStr)
+                      const isCurrentDay = isToday(dateObj.day, dateObj.month, dateObj.year)
 
-              {/* All Day Section */}
-              <div className="flex border-b border-[#333] shrink-0 pl-14 pr-4 py-1 min-h-[40px]">
-                <div className="absolute left-2 text-[10px] text-gray-500 top-32">all-day</div>
-                {getWeekDays().map((d, i) => {
-                  const dateStr = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
-                  const dayEvents = getEventsForDate(dateStr)
-                  return (
-                    <div key={i} className="flex-1 px-1 border-l border-[#333] first:border-l-0 space-y-1">
-                      {dayEvents.map((event, idx) => (
+                      return (
                         <div
-                          key={idx}
+                          key={index}
                           className={`
-                            text-[10px] px-1.5 py-0.5 rounded-sm truncate cursor-pointer hover:opacity-80
-                            ${event.color || 'bg-blue-500'} text-white font-medium
+                            border-b border-r border-white/5 p-1 relative group transition-colors
+                            ${!dateObj.isCurrentMonth ? 'bg-black/20 text-gray-600' : 'hover:bg-white/5'}
                           `}
-                          title={event.title}
+                          onClick={() => {
+                            setCurrentDate(new Date(dateObj.year, dateObj.month, dateObj.day))
+                            setView('day')
+                          }}
                         >
-                          {event.title}
+                          <div className="flex justify-end mb-1">
+                            <span
+                              className={`
+                                text-sm font-medium w-7 h-7 flex items-center justify-center rounded-full
+                                ${isCurrentDay
+                                  ? 'bg-red-500 text-white shadow-lg shadow-red-900/50'
+                                  : dateObj.isCurrentMonth ? 'text-gray-300' : 'text-gray-600'}
+                              `}
+                            >
+                              {dateObj.day}
+                            </span>
+                          </div>
+                          <div className="space-y-1 overflow-y-auto max-h-[calc(100%-2rem)] [&::-webkit-scrollbar]:hidden">
+                            {dayEvents.map((event, i) => (
+                              <div
+                                key={i}
+                                className={`
+                                  text-[10px] px-1.5 py-0.5 rounded-sm truncate cursor-pointer hover:opacity-80
+                                  ${event.color || 'bg-blue-500'} text-white font-medium shadow-sm backdrop-blur-sm bg-opacity-80
+                                `}
+                              >
+                                {event.title}
+                              </div>
+                            ))}
+                          </div>
                         </div>
-                      ))}
-                    </div>
-                  )
-                })}
-              </div>
+                      )
+                    })}
+                  </div>
+                </motion.div>
+              )}
 
-              {/* Scrollable Time Grid */}
-              <div ref={scrollContainerRef} className="flex-1 overflow-y-auto relative">
-                <div className="absolute top-0 left-0 w-full min-h-full">
-                  {hours.map((hour) => (
-                    <div key={hour} className="flex h-[60px] border-b border-[#333] group">
-                      {/* Time Label */}
-                      <div className="w-14 shrink-0 text-right pr-2 text-xs text-gray-500 -mt-2.5 bg-[#1E1E1E] z-10">
-                        {hour === 0 ? '12 AM' : hour < 12 ? `${hour} AM` : hour === 12 ? '12 PM' : `${hour - 12} PM`}
-                      </div>
-                      {/* Columns */}
-                      <div className="flex-1 flex">
-                        {Array.from({ length: 7 }).map((_, colIndex) => (
-                          <div key={colIndex} className="flex-1 border-l border-[#333] first:border-l-0 relative group-hover:bg-[#252526]/30 transition-colors">
-                            {/* Time slots would go here */}
+              {view === 'year' && (
+                <motion.div
+                  key="year"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  className="h-full overflow-y-auto p-8 [&::-webkit-scrollbar-thumb]:bg-white/20 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-2"
+                >
+                  <div className="grid grid-cols-4 gap-x-8 gap-y-12">
+                    {monthNames.map((month, monthIndex) => {
+                      const days = getDaysInMonth(currentDate.getFullYear(), monthIndex)
+                      return (
+                        <div key={month} className="flex flex-col gap-4">
+                          <h3 className="text-red-500 font-medium text-xl pl-1">{month}</h3>
+                          <div className="grid grid-cols-7 gap-y-3 text-center">
+                            {weekDays.map(d => (
+                              <div key={d} className="text-[10px] text-gray-500 font-medium">{d.charAt(0)}</div>
+                            ))}
+                            {days.map((d, i) => {
+                              if (!d.isCurrentMonth) return <div key={i} />
+                              const isCurrentDay = isToday(d.day, d.month, d.year)
+                              return (
+                                <div
+                                  key={i}
+                                  onClick={() => {
+                                    setCurrentDate(new Date(d.year, d.month, d.day))
+                                    setView('month')
+                                  }}
+                                  className={`
+                                    text-xs w-6 h-6 flex items-center justify-center rounded-full mx-auto cursor-pointer hover:bg-white/10
+                                    ${isCurrentDay ? 'bg-red-500 text-white font-bold' : 'text-gray-300'}
+                                  `}
+                                >
+                                  {d.day}
+                                </div>
+                              )
+                            })}
                           </div>
-                        ))}
-                      </div>
-                    </div>
-                  ))}
-                  {/* Current Time Indicator (if in current week) */}
-                  {/* Simplified: just show if today is in view */}
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* DAY VIEW */}
-          {view === 'day' && (
-            <div className="flex-1 flex flex-col overflow-hidden">
-              {/* All Day Section */}
-              <div className="flex border-b border-[#333] shrink-0 pl-14 pr-4 py-2 min-h-[50px]">
-                <div className="w-14 shrink-0 text-[10px] text-gray-500 pt-1 pr-2 text-right">all-day</div>
-                <div className="flex-1 px-1 space-y-1 border-l border-[#333]">
-                  {getEventsForDate(`${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')}`).map((event, idx) => (
-                    <div
-                      key={idx}
-                      className={`
-                        text-xs px-2 py-1 rounded-sm truncate cursor-pointer hover:opacity-80
-                        ${event.color || 'bg-blue-500'} text-white font-medium
-                      `}
-                      title={event.title}
-                    >
-                      {event.title}
-                    </div>
-                  ))}
-                </div>
-              </div>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </motion.div>
+              )}
 
-              {/* Scrollable Time Grid */}
-              <div ref={scrollContainerRef} className="flex-1 overflow-y-auto relative">
-                <div className="absolute top-0 left-0 w-full min-h-full">
-                  {hours.map((hour) => (
-                    <div key={hour} className="flex h-[60px] border-b border-[#333]">
-                      {/* Time Label */}
-                      <div className="w-14 shrink-0 text-right pr-2 text-xs text-gray-500 -mt-2.5 bg-[#1E1E1E] z-10">
-                        {hour === 0 ? '12 AM' : hour < 12 ? `${hour} AM` : hour === 12 ? '12 PM' : `${hour - 12} PM`}
+              {(view === 'week' || view === 'day') && (
+                <motion.div
+                  key="week-day"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  className="h-full flex flex-col"
+                >
+                  <div className="flex border-b border-white/10 shrink-0 pl-14 pr-4 py-2">
+                    {view === 'week' ? getWeekDays().map((d, i) => {
+                      const isCurrentDay = isToday(d.getDate(), d.getMonth(), d.getFullYear())
+                      return (
+                        <div key={i} className="flex-1 text-center border-l border-white/5 first:border-l-0">
+                          <div className={`text-xs font-medium mb-1 uppercase ${isCurrentDay ? 'text-red-500' : 'text-gray-500'}`}>
+                            {weekDays[d.getDay()]}
+                          </div>
+                          <div className={`
+                            text-xl font-light w-8 h-8 flex items-center justify-center rounded-full mx-auto
+                            ${isCurrentDay ? 'bg-red-500 text-white font-bold' : 'text-white'}
+                          `}>
+                            {d.getDate()}
+                          </div>
+                        </div>
+                      )
+                    }) : (
+                      <div className="flex-1 px-4">
+                        <div className="text-red-500 font-medium uppercase text-sm">{weekDays[currentDate.getDay()]}</div>
+                        <div className="text-3xl font-light">{currentDate.getDate()}</div>
                       </div>
-                      {/* Column */}
-                      <div className="flex-1 border-l border-[#333] relative hover:bg-[#252526]/30 transition-colors">
-                        {/* Time slots would go here */}
+                    )}
+                  </div>
+
+                  <div ref={scrollContainerRef} className="flex-1 overflow-y-auto relative [&::-webkit-scrollbar-thumb]:bg-white/20 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-2">
+                    <div className="absolute top-0 left-0 w-full min-h-full bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjYwIj48bGluZSB4MT0iMCIgeTE9IjYwIiB4Mj0iMTAwJSIgeTI9IjYwIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiIHN0cm9rZS13aWR0aD0iMSIvPjwvc3ZnPg==')]">
+                      {hours.map((hour) => (
+                        <div key={hour} className="flex h-[60px] group">
+                          <div className="w-14 shrink-0 text-right pr-3 text-xs text-gray-500 -mt-2.5 z-10">
+                            {hour === 0 ? '12 AM' : hour < 12 ? `${hour} AM` : hour === 12 ? '12 PM' : `${hour - 12} PM`}
+                          </div>
+                          <div className="flex-1 border-l border-white/5 relative group-hover:bg-white/[0.02] transition-colors">
+                            {/* Time slots */}
+                          </div>
+                        </div>
+                      ))}
+                      {/* Current Time Indicator */}
+                      <div
+                        className="absolute left-14 right-0 border-t border-red-500 z-20 pointer-events-none"
+                        style={{ top: `${(new Date().getHours() * 60 + new Date().getMinutes())}px` }}
+                      >
+                        <div className="absolute -left-1.5 -top-1.5 w-3 h-3 rounded-full bg-red-500" />
                       </div>
                     </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          )}
-
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
         </div>
       </div>
     </Window>

app/components/Clock.tsx

@@ -1,7 +1,9 @@
 'use client'
 
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
 import Window from './Window'
+import { Globe, Clock as ClockIcon, Type, Plus } from 'lucide-react'
 
 interface ClockProps {
   onClose: () => void
@@ -11,183 +13,344 @@ interface ClockProps {
   zIndex?: number
 }
 
-export function Clock({ onClose, onMinimize, onMaximize, onFocus, zIndex }: ClockProps) {
+// Helper to get smooth time
+const useSmoothTime = () => {
   const [time, setTime] = useState(new Date())
-  const [viewMode, setViewMode] = useState<'analog' | 'digital' | 'world'>('analog')
 
   useEffect(() => {
-    const timer = setInterval(() => {
+    let frameId: number
+    const update = () => {
       setTime(new Date())
-    }, 1000)
-
-    return () => clearInterval(timer)
+      frameId = requestAnimationFrame(update)
+    }
+    update()
+    return () => cancelAnimationFrame(frameId)
   }, [])
 
-  // Calculate rotation angles for clock hands
-  const seconds = time.getSeconds()
-  const minutes = time.getMinutes()
-  const hours = time.getHours()
+  return time
+}
+
+const AnalogFace = ({ time, city, offset, isSmall = false }: { time: Date, city?: string, offset?: number, isSmall?: boolean }) => {
+  // Calculate time with offset if provided
+  const displayTime = offset !== undefined
+    ? new Date(time.getTime() + (time.getTimezoneOffset() * 60000) + (3600000 * offset))
+    : time
+
+  const seconds = displayTime.getSeconds() + displayTime.getMilliseconds() / 1000
+  const minutes = displayTime.getMinutes() + seconds / 60
+  const hours = displayTime.getHours() % 12 + minutes / 60
+
+  return (
+    <div className={`relative flex flex-col items-center ${isSmall ? 'gap-2' : 'gap-8'}`}>
+      <div className={`relative ${isSmall ? 'w-32 h-32' : 'w-64 h-64'} rounded-full bg-[#1e1e1e] shadow-[inset_0_0_20px_rgba(0,0,0,0.5)] border-[3px] border-[#333]`}>
+        {/* Clock Face Markings */}
+        {[...Array(12)].map((_, i) => (
+          <div
+            key={i}
+            className="absolute w-full h-full left-0 top-0"
+            style={{ transform: `rotate(${i * 30}deg)` }}
+          >
+            <div className={`absolute left-1/2 -translate-x-1/2 top-2 bg-gray-400 ${isSmall ? 'w-0.5 h-2' : 'w-1 h-3'
+              }`} />
+            {!isSmall && (
+              <span
+                className="absolute left-1/2 -translate-x-1/2 top-6 text-xl font-medium text-gray-300"
+                style={{ transform: `rotate(-${i * 30}deg)` }}
+              >
+                {i === 0 ? 12 : i}
+              </span>
+            )}
+          </div>
+        ))}
+
+        {/* Hands Container */}
+        <div className="absolute inset-0">
+          {/* Hour Hand */}
+          <div
+            className="absolute left-1/2 top-1/2 bg-white rounded-full origin-bottom shadow-lg z-10"
+            style={{
+              width: isSmall ? '3px' : '6px',
+              height: isSmall ? '25%' : '25%',
+              transform: `translate(-50%, -100%) rotate(${hours * 30}deg)`,
+            }}
+          />
+
+          {/* Minute Hand */}
+          <div
+            className="absolute left-1/2 top-1/2 bg-white rounded-full origin-bottom shadow-lg z-10"
+            style={{
+              width: isSmall ? '2px' : '4px',
+              height: isSmall ? '35%' : '38%',
+              transform: `translate(-50%, -100%) rotate(${minutes * 6}deg)`,
+            }}
+          />
+
+          {/* Second Hand (Orange) */}
+          <div
+            className="absolute left-1/2 top-1/2 bg-orange-500 rounded-full origin-bottom z-20"
+            style={{
+              width: isSmall ? '1px' : '2px',
+              height: isSmall ? '40%' : '45%',
+              transform: `translate(-50%, -100%) rotate(${seconds * 6}deg)`,
+            }}
+          >
+            {/* Tail of second hand */}
+            <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-[20%] w-full h-[20%] bg-orange-500" />
+          </div>
+
+          {/* Center Cap */}
+          <div className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-black border-2 border-orange-500 z-30 ${isSmall ? 'w-1.5 h-1.5' : 'w-3 h-3'
+            }`} />
+        </div>
+      </div>
+
+      {/* Labels */}
+      <div className="text-center">
+        <div className={`${isSmall ? 'text-sm' : 'text-2xl'} font-medium text-white`}>
+          {city || 'Local Time'}
+        </div>
+        <div className={`${isSmall ? 'text-xs' : 'text-lg'} text-gray-400 font-mono mt-1`}>
+          {offset !== undefined
+            ? (offset === 0 ? 'Today' : `${offset > 0 ? '+' : ''}${offset}HRS`)
+            : displayTime.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' })
+          }
+        </div>
+        {!isSmall && (
+          <div className="text-4xl font-light text-white mt-4 tracking-wider">
+            {displayTime.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// List of available cities with offsets
+const AVAILABLE_CITIES = [
+  { city: 'San Francisco', offset: -8, region: 'USA' },
+  { city: 'New York', offset: -5, region: 'USA' },
+  { city: 'London', offset: 0, region: 'UK' },
+  { city: 'Paris', offset: 1, region: 'Europe' },
+  { city: 'Berlin', offset: 1, region: 'Europe' },
+  { city: 'Moscow', offset: 3, region: 'Russia' },
+  { city: 'Dubai', offset: 4, region: 'UAE' },
+  { city: 'Mumbai', offset: 5.5, region: 'India' },
+  { city: 'Singapore', offset: 8, region: 'Asia' },
+  { city: 'Tokyo', offset: 9, region: 'Japan' },
+  { city: 'Sydney', offset: 11, region: 'Australia' },
+  { city: 'Auckland', offset: 13, region: 'New Zealand' },
+  { city: 'Honolulu', offset: -10, region: 'USA' },
+  { city: 'Rio de Janeiro', offset: -3, region: 'Brazil' },
+]
 
-  const secondDegrees = (seconds / 60) * 360 - 90
-  const minuteDegrees = ((minutes / 60) * 360) + ((seconds / 60) * 6) - 90
-  const hourDegrees = ((hours % 12 / 12) * 360) + ((minutes / 60) * 30) - 90
+const ClockContent = () => {
+  const time = useSmoothTime()
+  const [activeTab, setActiveTab] = useState<'world' | 'analog' | 'digital'>('world')
+  const [showAddCity, setShowAddCity] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
 
-  const worldClocks = [
+  const [worldClocks, setWorldClocks] = useState([
+    { city: 'Cupertino', offset: -8 },
     { city: 'New York', offset: -5 },
     { city: 'London', offset: 0 },
     { city: 'Tokyo', offset: 9 },
-    { city: 'Sydney', offset: 11 }
+  ])
+
+  const tabs = [
+    { id: 'world', label: 'World Clock', icon: Globe },
+    { id: 'analog', label: 'Analog', icon: ClockIcon },
+    { id: 'digital', label: 'Digital', icon: Type },
   ]
 
-  const getWorldTime = (offset: number) => {
-    const utc = time.getTime() + (time.getTimezoneOffset() * 60000)
-    const cityTime = new Date(utc + (3600000 * offset))
-    return cityTime.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
+  const filteredCities = AVAILABLE_CITIES.filter(c =>
+    c.city.toLowerCase().includes(searchQuery.toLowerCase()) &&
+    !worldClocks.some(wc => wc.city === c.city)
+  )
+
+  const addCity = (city: typeof AVAILABLE_CITIES[0]) => {
+    setWorldClocks([...worldClocks, { city: city.city, offset: city.offset }])
+    setShowAddCity(false)
+    setSearchQuery('')
   }
 
   return (
-    <Window
-      id="clock"
-      title="Clock"
-      isOpen={true}
-      onClose={onClose}
-      onMinimize={onMinimize}
-      onMaximize={onMaximize}
-      onFocus={onFocus}
-      zIndex={zIndex}
-      width={380}
-      height={480}
-      x={window.innerWidth / 2 - 190}
-      y={window.innerHeight / 2 - 240}
-      darkMode={true}
-      className="clock-app-window"
-    >
-      <div className="flex flex-col h-full bg-gradient-to-b from-gray-900 via-gray-800 to-black">
-        {/* Tab Bar */}
-        <div className="flex border-b border-gray-700 bg-gray-900/50">
-          <button
-            onClick={() => setViewMode('analog')}
-            className={`flex-1 py-3 text-sm font-medium transition-all ${viewMode === 'analog'
-              ? 'text-orange-400 border-b-2 border-orange-400'
-              : 'text-gray-400 hover:text-white'
-              }`}
-          >
-            Analog
-          </button>
-          <button
-            onClick={() => setViewMode('digital')}
-            className={`flex-1 py-3 text-sm font-medium transition-all ${viewMode === 'digital'
-              ? 'text-orange-400 border-b-2 border-orange-400'
-              : 'text-gray-400 hover:text-white'
-              }`}
-          >
-            Digital
-          </button>
-          <button
-            onClick={() => setViewMode('world')}
-            className={`flex-1 py-3 text-sm font-medium transition-all ${viewMode === 'world'
-              ? 'text-orange-400 border-b-2 border-orange-400'
-              : 'text-gray-400 hover:text-white'
-              }`}
-          >
-            World Clock
-          </button>
+    <div className="flex flex-col h-full text-white relative">
+      {/* macOS-style Toolbar */}
+      <div className="flex items-center justify-center pt-4 pb-6 border-b border-white/10 bg-[#252525]/50">
+        <div className="flex bg-black/20 p-1 rounded-lg backdrop-blur-md">
+          {tabs.map((tab) => {
+            const Icon = tab.icon
+            const isActive = activeTab === tab.id
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id as any)}
+                className={`relative px-4 py-1.5 rounded-md text-sm font-medium transition-all duration-200 flex items-center gap-2 ${isActive ? 'text-white' : 'text-gray-400 hover:text-gray-200'
+                  }`}
+              >
+                {isActive && (
+                  <motion.div
+                    layoutId="activeTab"
+                    className="absolute inset-0 bg-[#3a3a3a] rounded-md shadow-sm"
+                    transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
+                  />
+                )}
+                <span className="relative z-10 flex items-center gap-2">
+                  <Icon size={14} />
+                  {tab.label}
+                </span>
+              </button>
+            )
+          })}
         </div>
+      </div>
 
-        {/* Clock Display */}
-        <div className="flex-1 flex items-center justify-center p-6">
-          {viewMode === 'analog' && (
-            <div className="flex flex-col items-center">
-              <div className="relative w-64 h-64">
-                {/* Clock Face */}
-                <div className="absolute inset-0 rounded-full bg-gradient-to-br from-gray-800 to-black shadow-inner border-4 border-gray-700">
-                  {/* Hour Markers */}
-                  {[...Array(12)].map((_, i) => (
-                    <div key={i}>
-                      <div
-                        className="absolute bg-white"
-                        style={{
-                          width: i % 3 === 0 ? '3px' : '1px',
-                          height: i % 3 === 0 ? '12px' : '8px',
-                          top: '10px',
-                          left: '50%',
-                          transform: `translateX(-50%) rotate(${i * 30}deg)`,
-                          transformOrigin: '50% 118px'
-                        }}
-                      />
-                    </div>
-                  ))}
-
-                  {/* Clock Hands */}
-                  <div
-                    className="absolute top-1/2 left-1/2 w-2 h-20 bg-white rounded-full origin-bottom shadow-lg"
-                    style={{
-                      transform: `translate(-50%, -100%) rotate(${hourDegrees}deg)`
-                    }}
-                  />
-                  <div
-                    className="absolute top-1/2 left-1/2 w-1.5 h-28 bg-gray-300 rounded-full origin-bottom shadow-lg"
-                    style={{
-                      transform: `translate(-50%, -100%) rotate(${minuteDegrees}deg)`
-                    }}
+      {/* Content Area */}
+      <div className="flex-1 overflow-y-auto p-8 [&::-webkit-scrollbar-thumb]:bg-white/20 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-2">
+        <AnimatePresence mode="wait">
+          {activeTab === 'world' && !showAddCity && (
+            <motion.div
+              key="world"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              className="grid grid-cols-2 gap-8 justify-items-center"
+            >
+              {worldClocks.map((clock) => (
+                <div key={clock.city} className="relative group">
+                  <AnalogFace
+                    time={time}
+                    city={clock.city}
+                    offset={clock.offset}
+                    isSmall={true}
                   />
-                  <div
-                    className="absolute top-1/2 left-1/2 w-0.5 h-32 bg-orange-500 rounded-full origin-bottom"
-                    style={{
-                      transform: `translate(-50%, -100%) rotate(${secondDegrees}deg)`
-                    }}
-                  />
-
-                  {/* Center Dot */}
-                  <div className="absolute top-1/2 left-1/2 w-4 h-4 bg-orange-500 rounded-full transform -translate-x-1/2 -translate-y-1/2 shadow-lg z-10" />
+                  <button
+                    onClick={() => setWorldClocks(worldClocks.filter(c => c.city !== clock.city))}
+                    className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity shadow-lg"
+                  >
+                    <Plus size={12} className="rotate-45" />
+                  </button>
                 </div>
-              </div>
-
-              {/* Digital Time Below Analog Clock */}
-              <div className="mt-6 text-center">
-                <div className="text-2xl font-mono text-gray-300">
-                  {time.toLocaleTimeString()}
-                </div>
-                <div className="text-sm text-gray-500 mt-2">
-                  {time.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
-                </div>
-              </div>
-            </div>
+              ))}
+              {/* Add Button */}
+              <button
+                onClick={() => setShowAddCity(true)}
+                className="w-32 h-32 rounded-full border-2 border-dashed border-gray-600 flex flex-col items-center justify-center text-gray-500 hover:text-orange-500 hover:border-orange-500 transition-colors group"
+              >
+                <Plus size={32} className="group-hover:scale-110 transition-transform" />
+                <span className="text-xs mt-2 font-medium">Add City</span>
+              </button>
+            </motion.div>
           )}
 
-          {viewMode === 'digital' && (
-            <div className="text-center">
-              <div className="text-7xl font-mono font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-orange-600">
-                {time.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
+          {activeTab === 'world' && showAddCity && (
+            <motion.div
+              key="add-city"
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.95 }}
+              className="flex flex-col h-full max-w-md mx-auto"
+            >
+              <div className="flex items-center gap-2 mb-4">
+                <button
+                  onClick={() => setShowAddCity(false)}
+                  className="p-2 hover:bg-white/10 rounded-full transition-colors"
+                >
+                  <Plus size={20} className="rotate-45" />
+                </button>
+                <input
+                  type="text"
+                  placeholder="Search city..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="flex-1 bg-white/10 border border-white/20 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-orange-500 transition-colors"
+                  autoFocus
+                />
               </div>
-              <div className="mt-8 text-2xl text-gray-400">
-                {time.toLocaleDateString('en-US', { weekday: 'long' })}
-              </div>
-              <div className="text-lg text-gray-500">
-                {time.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
-              </div>
-            </div>
-          )}
 
-          {viewMode === 'world' && (
-            <div className="w-full max-w-sm">
-              <div className="space-y-4">
-                {worldClocks.map((clock) => (
-                  <div key={clock.city} className="bg-gray-800 rounded-lg p-4 flex justify-between items-center">
+              <div className="flex-1 overflow-y-auto space-y-2 pr-2 [&::-webkit-scrollbar-thumb]:bg-white/20 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-2">
+                {filteredCities.map((city) => (
+                  <button
+                    key={city.city}
+                    onClick={() => addCity(city)}
+                    className="w-full flex items-center justify-between p-3 rounded-lg hover:bg-white/10 transition-colors group text-left"
+                  >
                     <div>
-                      <div className="text-white font-medium">{clock.city}</div>
-                      <div className="text-xs text-gray-400">UTC{clock.offset >= 0 ? '+' : ''}{clock.offset}</div>
+                      <div className="font-medium text-white">{city.city}</div>
+                      <div className="text-xs text-gray-400">{city.region}</div>
                     </div>
-                    <div className="text-2xl font-mono text-orange-400">
-                      {getWorldTime(clock.offset)}
+                    <div className="text-sm font-mono text-gray-500 group-hover:text-orange-400">
+                      UTC{city.offset >= 0 ? '+' : ''}{city.offset}
                     </div>
-                  </div>
+                  </button>
                 ))}
+                {filteredCities.length === 0 && (
+                  <div className="text-center text-gray-500 mt-8">
+                    No cities found
+                  </div>
+                )}
               </div>
-            </div>
+            </motion.div>
           )}
-        </div>
+
+          {activeTab === 'analog' && (
+            <motion.div
+              key="analog"
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 1.05 }}
+              className="flex items-center justify-center h-full"
+            >
+              <AnalogFace time={time} />
+            </motion.div>
+          )}
+
+          {activeTab === 'digital' && (
+            <motion.div
+              key="digital"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="flex flex-col items-center justify-center h-full"
+            >
+              <div className="text-[8rem] leading-none font-light tracking-tighter text-white tabular-nums">
+                {time.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' })}
+              </div>
+              <div className="text-4xl font-light text-orange-500 mt-4 tabular-nums">
+                {time.getSeconds().toString().padStart(2, '0')}
+              </div>
+              <div className="text-xl text-gray-400 mt-8 font-medium tracking-wide uppercase">
+                {time.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
       </div>
+    </div>
+  )
+}
+
+export function Clock({ onClose, onMinimize, onMaximize, onFocus, zIndex }: ClockProps) {
+  return (
+    <Window
+      id="clock"
+      title="Clock"
+      isOpen={true}
+      onClose={onClose}
+      onMinimize={onMinimize}
+      onMaximize={onMaximize}
+      onFocus={onFocus}
+      zIndex={zIndex}
+      width={600}
+      height={500}
+      x={window.innerWidth / 2 - 300}
+      y={window.innerHeight / 2 - 250}
+      darkMode={true}
+      className="clock-app-window !bg-[#1e1e1e]/80 !backdrop-blur-2xl border border-white/10 shadow-2xl !rounded-xl overflow-hidden"
+      contentClassName="!bg-transparent"
+      headerClassName="!bg-transparent border-b border-white/5"
+    >
+      <ClockContent />
     </Window>
   )
 }

app/components/Desktop.tsx

@@ -6,6 +6,7 @@ import { TopBar } from './TopBar'
 import { FileManager } from './FileManager'
 import { Calendar } from './Calendar'
 import { DraggableDesktopIcon } from './DraggableDesktopIcon'
+import { Messages } from './Messages'
 
 import { HelpModal } from './HelpModal'
 import { DesktopContextMenu } from './DesktopContextMenu'
@@ -38,13 +39,15 @@ import {
   FileText,
   DeviceMobile,
   Lightning,
-  Function
+  Function,
+  ChatCircleDots
 } from '@phosphor-icons/react'
 
 export function Desktop() {
   const [fileManagerOpen, setFileManagerOpen] = useState(false)
   const [calendarOpen, setCalendarOpen] = useState(false)
   const [clockOpen, setClockOpen] = useState(false)
+  const [messagesOpen, setMessagesOpen] = useState(false)
 
   const [geminiChatOpen, setGeminiChatOpen] = useState(false)
 
@@ -73,6 +76,7 @@ export function Desktop() {
   const [fileManagerMinimized, setFileManagerMinimized] = useState(false)
   const [calendarMinimized, setCalendarMinimized] = useState(false)
   const [clockMinimized, setClockMinimized] = useState(false)
+  const [messagesMinimized, setMessagesMinimized] = useState(false)
 
   const [geminiChatMinimized, setGeminiChatMinimized] = useState(false)
 
@@ -102,6 +106,7 @@ export function Desktop() {
     setFileManagerOpen(false)
     setCalendarOpen(false)
     setClockOpen(false)
+    setMessagesOpen(false)
     setGeminiChatOpen(false)
     setFlutterRunnerOpen(false)
 
@@ -113,6 +118,7 @@ export function Desktop() {
     setFileManagerMinimized(false)
     setCalendarMinimized(false)
     setClockMinimized(false)
+    setMessagesMinimized(false)
     setGeminiChatMinimized(false)
     setFlutterRunnerMinimized(false)
 
@@ -161,7 +167,16 @@ export function Desktop() {
     setClockMinimized(false)
   }
 
+  const openMessages = () => {
+    setMessagesOpen(true)
+    setMessagesMinimized(false)
+    setWindowZIndices(prev => ({ ...prev, messages: getNextZIndex() }))
+  }
 
+  const closeMessages = () => {
+    setMessagesOpen(false)
+    setMessagesMinimized(false)
+  }
 
   const openGeminiChat = () => {
     console.log('Opening Gemini Chat')
@@ -254,7 +269,9 @@ export function Desktop() {
       case 'clock':
         openClock()
         break
-
+      case 'messages':
+        openMessages()
+        break
       case 'gemini':
         openGeminiChat()
         break
@@ -413,7 +430,19 @@ export function Desktop() {
     })
   }
 
-
+  if (messagesMinimized && messagesOpen) {
+    minimizedApps.push({
+      id: 'messages',
+      label: 'Messages',
+      icon: (
+        <div className="bg-gradient-to-b from-[#4CD964] to-[#2E8B57] w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50" />
+          <ChatCircleDots size={20} weight="fill" className="text-white relative z-10 drop-shadow-md" />
+        </div>
+      ),
+      onRestore: () => setMessagesMinimized(false)
+    })
+  }
 
   if (geminiChatMinimized && geminiChatOpen) {
     minimizedApps.push({
@@ -505,13 +534,15 @@ export function Desktop() {
       fileManagerOpen,
       calendarOpen,
       clockOpen,
+      messagesOpen,
       geminiChatOpen,
       fileManagerMinimized,
       calendarMinimized,
       clockMinimized,
+      messagesMinimized,
       geminiChatMinimized
     })
-  }, [fileManagerOpen, calendarOpen, clockOpen, geminiChatOpen, fileManagerMinimized, calendarMinimized, clockMinimized, geminiChatMinimized])
+  }, [fileManagerOpen, calendarOpen, clockOpen, messagesOpen, geminiChatOpen, fileManagerMinimized, calendarMinimized, clockMinimized, messagesMinimized, geminiChatMinimized])
 
   return (
     <div className="relative h-screen w-screen overflow-hidden flex touch-auto" onContextMenu={handleDesktopRightClick}>
@@ -549,12 +580,14 @@ export function Desktop() {
         onOpenFileManager={openFileManager}
         onOpenCalendar={openCalendar}
         onOpenClock={openClock}
+        onOpenMessages={openMessages}
         onOpenGeminiChat={openGeminiChat}
         onCloseAllApps={closeAllApps}
         openApps={{
           files: fileManagerOpen,
           calendar: calendarOpen,
           clock: clockOpen,
+          messages: messagesOpen,
           gemini: geminiChatOpen
         }}
         minimizedApps={minimizedApps}
@@ -574,6 +607,17 @@ export function Desktop() {
             />
           </div>
 
+          <div className="pointer-events-auto w-24 h-24">
+            <DraggableDesktopIcon
+              id="messages"
+              label="Messages"
+              iconType="messages"
+              initialPosition={{ x: 0, y: 0 }}
+              onClick={() => { }}
+              onDoubleClick={openMessages}
+            />
+          </div>
+
           <div className="pointer-events-auto w-24 h-24">
             <DraggableDesktopIcon
               id="gemini"
@@ -617,10 +661,6 @@ export function Desktop() {
             />
           </div>
 
-
-
-
-
           <div className="pointer-events-auto w-24 h-24">
             <DraggableDesktopIcon
               id="flutter-editor"
@@ -737,7 +777,30 @@ export function Desktop() {
               </motion.div>
             )}
 
-
+            {messagesOpen && (
+              <motion.div
+                key="messages"
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{
+                  opacity: messagesMinimized ? 0 : 1,
+                  scale: messagesMinimized ? 0.9 : 1,
+                  y: messagesMinimized ? 100 : 0,
+                }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                transition={{ duration: 0.2 }}
+                style={{
+                  pointerEvents: messagesMinimized ? 'none' : 'auto',
+                  display: messagesMinimized ? 'none' : 'block'
+                }}
+              >
+                <Messages
+                  onClose={closeMessages}
+                  onMinimize={() => setMessagesMinimized(true)}
+                  onFocus={() => bringWindowToFront('messages')}
+                  zIndex={windowZIndices.messages || 1000}
+                />
+              </motion.div>
+            )}
 
             {geminiChatOpen && (
               <motion.div
@@ -791,8 +854,6 @@ export function Desktop() {
               </motion.div>
             )}
 
-
-
             {flutterCodeEditorOpen && (
               <motion.div
                 key="flutter-code-editor"
@@ -886,8 +947,6 @@ export function Desktop() {
         onAction={handleContextMenuAction}
       />
 
-
-
       {/* Help Modal */}
       <HelpModal isOpen={helpModalOpen} onClose={closeHelpModal} />
 

app/components/Dock.tsx

@@ -5,14 +5,14 @@ import {
   Folder,
   Calendar as CalendarIcon,
   Clock as ClockIcon,
-
   Sparkle,
   Trash,
   FolderOpen,
   Compass,
   Flask,
   DeviceMobile,
-  Function
+  Function,
+  ChatCircleDots
 } from '@phosphor-icons/react'
 import { motion } from 'framer-motion'
 import { DynamicClockIcon } from './DynamicClockIcon'
@@ -29,7 +29,7 @@ interface DockProps {
   onOpenFileManager: (path: string) => void
   onOpenCalendar: () => void
   onOpenClock: () => void
-
+  onOpenMessages: () => void
   onOpenGeminiChat: () => void
   onCloseAllApps?: () => void
   openApps: { [key: string]: boolean }
@@ -81,7 +81,7 @@ export function Dock({
   onOpenFileManager,
   onOpenCalendar,
   onOpenClock,
-
+  onOpenMessages,
   onOpenGeminiChat,
   onCloseAllApps,
   openApps,
@@ -113,6 +113,18 @@ export function Dock({
       isActive: openApps['gemini'],
       className: ''
     },
+    {
+      icon: (
+        <div className="bg-gradient-to-b from-[#4CD964] to-[#2E8B57] w-full h-full rounded-xl flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50" />
+          <ChatCircleDots size={24} weight="fill" className="text-white md:scale-110 drop-shadow-md" />
+        </div>
+      ),
+      label: 'Messages',
+      onClick: onOpenMessages,
+      isActive: openApps['messages'],
+      className: ''
+    },
     {
       icon: (
         <div className="w-full h-full">

app/components/DraggableDesktopIcon.tsx

@@ -15,7 +15,8 @@ import {
   Code,
   Lightning,
   Key,
-  Brain
+  Brain,
+  ChatCircleDots
 } from '@phosphor-icons/react'
 import { DynamicClockIcon } from './DynamicClockIcon'
 import { DynamicCalendarIcon } from './DynamicCalendarIcon'
@@ -68,6 +69,14 @@ export function DraggableDesktopIcon({
           </div>
         )
 
+      case 'messages':
+        return (
+          <div className="bg-gradient-to-b from-[#4CD964] to-[#2E8B57] w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden group-hover:shadow-2xl transition-all duration-300">
+            <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50" />
+            <ChatCircleDots size={36} weight="fill" className="text-white relative z-10 drop-shadow-md" />
+          </div>
+        )
+
       case 'flutter':
         return (
           <div className="bg-gradient-to-b from-[#54C5F8] to-[#29B6F6] w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden group-hover:shadow-2xl transition-all duration-300">

app/components/Messages.tsx

@@ -0,0 +1,288 @@
+'use client'
+
+import React, { useState, useEffect, useRef } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { PaperPlaneRight, MagnifyingGlass, UserCircle, WarningCircle } from '@phosphor-icons/react'
+import Window from './Window'
+import { useKV } from '../hooks/useKV'
+
+interface Message {
+    id: string
+    text: string
+    sender: string
+    userId: string
+    timestamp: number
+}
+
+interface MessagesProps {
+    onClose: () => void
+    onMinimize?: () => void
+    onMaximize?: () => void
+    onFocus?: () => void
+    zIndex?: number
+}
+
+export function Messages({ onClose, onMinimize, onMaximize, onFocus, zIndex }: MessagesProps) {
+    const [messages, setMessages] = useState<Message[]>([])
+    const [inputText, setInputText] = useState('')
+    const [isLoading, setIsLoading] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+    const messagesEndRef = useRef<HTMLDivElement>(null)
+
+    // Persistent user identity
+    const [userId] = useKV<string>('messages-user-id', `user-${Math.random().toString(36).substring(2, 9)}`)
+    const [userName, setUserName] = useKV<string>('messages-user-name', 'Guest')
+    const [isEditingName, setIsEditingName] = useState(false)
+    const [tempName, setTempName] = useState(userName)
+
+    const fetchMessages = async () => {
+        try {
+            const res = await fetch('/api/messages')
+            if (res.ok) {
+                const data = await res.json()
+                setMessages(data)
+            }
+        } catch (err) {
+            console.error('Failed to fetch messages', err)
+        }
+    }
+
+    // Poll for new messages
+    useEffect(() => {
+        fetchMessages()
+        const interval = setInterval(fetchMessages, 3000)
+        return () => clearInterval(interval)
+    }, [])
+
+    // Scroll to bottom on new messages
+    useEffect(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+    }, [messages])
+
+    const handleSend = async (e?: React.FormEvent) => {
+        e?.preventDefault()
+        if (!inputText.trim() || isLoading) return
+
+        setIsLoading(true)
+        setError(null)
+
+        try {
+            const res = await fetch('/api/messages', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    text: inputText,
+                    sender: userName,
+                    userId: userId
+                })
+            })
+
+            const data = await res.json()
+
+            if (!res.ok) {
+                setError(data.error || 'Failed to send message')
+            } else {
+                setMessages(data)
+                setInputText('')
+            }
+        } catch (err) {
+            setError('Network error. Please try again.')
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    const handleNameSave = () => {
+        if (tempName.trim()) {
+            setUserName(tempName.trim())
+            setIsEditingName(false)
+        }
+    }
+
+    return (
+        <Window
+            id="messages"
+            title="Messages"
+            isOpen={true}
+            onClose={onClose}
+            onMinimize={onMinimize}
+            onMaximize={onMaximize}
+            onFocus={onFocus}
+            zIndex={zIndex}
+            width={800}
+            height={600}
+            x={100}
+            y={100}
+            className="messages-window !bg-[#1e1e1e]/80 !backdrop-blur-2xl border border-white/10 shadow-2xl !rounded-xl overflow-hidden"
+            contentClassName="!bg-transparent"
+            headerClassName="!bg-transparent border-b border-white/5"
+        >
+            <div className="flex h-full text-white overflow-hidden">
+                {/* Sidebar */}
+                <div className="w-64 border-r border-white/10 bg-black/20 flex flex-col">
+                    <div className="p-4 border-b border-white/5">
+                        <div className="relative">
+                            <MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" size={14} />
+                            <input
+                                type="text"
+                                placeholder="Search"
+                                className="w-full bg-white/10 border-none rounded-md py-1.5 pl-9 pr-3 text-xs text-white placeholder-gray-500 focus:ring-1 focus:ring-blue-500 outline-none"
+                            />
+                        </div>
+                    </div>
+
+                    <div className="flex-1 overflow-y-auto p-2 space-y-1">
+                        <div className="p-3 rounded-lg bg-blue-600/20 border border-blue-500/30 cursor-pointer">
+                            <div className="flex justify-between items-start">
+                                <span className="font-semibold text-sm">Global Chat</span>
+                                <span className="text-[10px] text-gray-400">Now</span>
+                            </div>
+                            <div className="text-xs text-gray-400 mt-1 truncate">
+                                {messages.length > 0 ? messages[messages.length - 1].text : 'No messages yet'}
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* User Profile */}
+                    <div className="p-4 border-t border-white/10 bg-black/10">
+                        {isEditingName ? (
+                            <div className="flex gap-2">
+                                <input
+                                    type="text"
+                                    value={tempName}
+                                    onChange={(e) => setTempName(e.target.value)}
+                                    className="flex-1 bg-white/10 rounded px-2 py-1 text-sm outline-none border border-blue-500"
+                                    autoFocus
+                                    onKeyDown={(e) => e.key === 'Enter' && handleNameSave()}
+                                />
+                                <button onClick={handleNameSave} className="text-xs text-blue-400 font-medium">Save</button>
+                            </div>
+                        ) : (
+                            <div className="flex items-center gap-3 cursor-pointer hover:bg-white/5 p-2 rounded-md transition-colors" onClick={() => {
+                                setTempName(userName)
+                                setIsEditingName(true)
+                            }}>
+                                <UserCircle size={32} className="text-gray-400" />
+                                <div className="flex-1 min-w-0">
+                                    <div className="text-sm font-medium truncate">{userName}</div>
+                                    <div className="text-[10px] text-gray-500">Click to change name</div>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                {/* Chat Area */}
+                <div className="flex-1 flex flex-col bg-transparent relative">
+                    {/* Header */}
+                    <div className="h-14 border-b border-white/5 flex items-center px-6 bg-[#252525]/30 backdrop-blur-sm justify-between">
+                        <div className="flex flex-col">
+                            <span className="text-sm font-semibold">To: Everyone</span>
+                            <span className="text-[10px] text-gray-400">Global Channel</span>
+                        </div>
+                        <div className="flex items-center gap-2 text-orange-400 bg-orange-400/10 px-3 py-1 rounded-full border border-orange-400/20">
+                            <WarningCircle size={14} />
+                            <span className="text-[10px] font-medium">Public Chat - Do not share confidential info</span>
+                        </div>
+                    </div>
+
+                    {/* Messages List */}
+                    <div className="flex-1 overflow-y-auto p-6 space-y-1 [&::-webkit-scrollbar-thumb]:bg-white/20 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-2">
+                        {messages.map((msg, index) => {
+                            const isMe = msg.userId === userId
+                            const showHeader = index === 0 || messages[index - 1].userId !== msg.userId
+                            const showTimestamp = index === 0 || (msg.timestamp - messages[index - 1].timestamp > 300000) // 5 mins
+
+                            return (
+                                <React.Fragment key={msg.id}>
+                                    {showTimestamp && (
+                                        <div className="text-center my-4">
+                                            <span className="text-[10px] text-gray-500 font-medium">
+                                                {new Date(msg.timestamp).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}
+                                            </span>
+                                        </div>
+                                    )}
+                                    <motion.div
+                                        initial={{ opacity: 0, y: 10 }}
+                                        animate={{ opacity: 1, y: 0 }}
+                                        className={`flex flex-col ${isMe ? 'items-end' : 'items-start'} ${showHeader ? 'mt-2' : 'mt-0.5'}`}
+                                    >
+                                        {showHeader && !isMe && (
+                                            <span className="text-[10px] text-gray-500 ml-3 mb-0.5">{msg.sender}</span>
+                                        )}
+                                        <div
+                                            className={`
+                        max-w-[70%] px-3 py-1.5 text-[13px] leading-relaxed break-words relative group
+                        ${isMe
+                                                    ? 'bg-[#0A84FF] text-white rounded-2xl rounded-br-sm'
+                                                    : 'bg-[#3a3a3a] text-gray-100 rounded-2xl rounded-bl-sm'}
+                      `}
+                                        >
+                                            {msg.text}
+                                            {/* Tail for message bubbles */}
+                                            {isMe && showHeader && (
+                                                <svg className="absolute -bottom-[1px] -right-[6px] w-4 h-4 text-[#0A84FF]" viewBox="0 0 20 20" fill="currentColor">
+                                                    <path d="M0 20C5 20 8 15 10 10V20H0Z" />
+                                                </svg>
+                                            )}
+                                            {!isMe && showHeader && (
+                                                <svg className="absolute -bottom-[1px] -left-[6px] w-4 h-4 text-[#3a3a3a] transform scale-x-[-1]" viewBox="0 0 20 20" fill="currentColor">
+                                                    <path d="M0 20C5 20 8 15 10 10V20H0Z" />
+                                                </svg>
+                                            )}
+                                        </div>
+                                        {/* Delivered status for me */}
+                                        {isMe && index === messages.length - 1 && (
+                                            <span className="text-[10px] text-gray-500 mr-1 mt-0.5 font-medium">Delivered</span>
+                                        )}
+                                    </motion.div>
+                                </React.Fragment>
+                            )
+                        })}
+                        <div ref={messagesEndRef} />
+                    </div>
+
+                    {/* Input Area */}
+                    <div className="p-4 bg-[#1e1e1e]/50 border-t border-white/10 backdrop-blur-md">
+                        {error && (
+                            <motion.div
+                                initial={{ opacity: 0, y: 10 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                exit={{ opacity: 0 }}
+                                className="flex items-center gap-2 text-red-400 text-xs mb-2 px-2 justify-center"
+                            >
+                                <WarningCircle size={14} />
+                                {error}
+                            </motion.div>
+                        )}
+                        <form onSubmit={handleSend} className="relative flex items-center gap-3 max-w-3xl mx-auto w-full">
+                            <div className="flex-1 relative">
+                                <input
+                                    type="text"
+                                    value={inputText}
+                                    onChange={(e) => setInputText(e.target.value)}
+                                    placeholder="iMessage"
+                                    maxLength={200}
+                                    disabled={isLoading}
+                                    className="w-full bg-[#2a2a2a] border border-white/10 rounded-full py-1.5 pl-4 pr-10 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-gray-500 transition-colors"
+                                />
+                                <button
+                                    type="submit"
+                                    disabled={!inputText.trim() || isLoading}
+                                    className={`
+                    absolute right-1 top-1/2 -translate-y-1/2 p-1 rounded-full transition-all
+                    ${inputText.trim() && !isLoading ? 'bg-[#0A84FF] text-white scale-100' : 'bg-gray-600 text-gray-400 scale-90 opacity-0 pointer-events-none'}
+                  `}
+                                >
+                                    <PaperPlaneRight size={14} weight="fill" />
+                                </button>
+                            </div>
+                        </form>
+                        <div className="text-[9px] text-gray-600 text-center mt-2 font-medium">
+                            {inputText.length}/200 • Press Enter to send
+                        </div>
+                    </div>
+                </div>            </div>
+        </Window>
+    )
+}

app/components/Window.tsx

@@ -119,7 +119,7 @@ const Window: React.FC<WindowProps> = ({
     position: { x: 0, y: 4 }, // 32px for TopBar offset (h-8 = 32px)
     size: {
       width: typeof window !== 'undefined' ? window.innerWidth : '100vw',
-      height: typeof window !== 'undefined' ? window.innerHeight - 4 : 'calc(100vh - 4px)'
+      height: typeof window !== 'undefined' ? window.innerHeight - 120 : 'calc(100vh - 120px)'
     },
     disableDragging: true,
     enableResizing: false

app/data/messages.json

@@ -0,0 +1,37 @@
+[
+  {
+    "id": "kozrvx3833q",
+    "text": "hi babe",
+    "sender": "Guest",
+    "userId": "user-bl6uf1o",
+    "timestamp": 1763788262195
+  },
+  {
+    "id": "7lu3jrs4o5",
+    "text": "bye babe",
+    "sender": "Guest",
+    "userId": "user-bl6uf1o",
+    "timestamp": 1763788274778
+  },
+  {
+    "id": "yvi2obxcqh",
+    "text": "fuxk",
+    "sender": "Guest",
+    "userId": "user-bl6uf1o",
+    "timestamp": 1763788279726
+  },
+  {
+    "id": "ughhky9l5f",
+    "text": "fuck",
+    "sender": "Guest",
+    "userId": "user-bl6uf1o",
+    "timestamp": 1763788283646
+  },
+  {
+    "id": "lydc1y7bg1",
+    "text": "dd",
+    "sender": "reo",
+    "userId": "user-bl6uf1o",
+    "timestamp": 1763788313420
+  }
+]