few changes like calendar and clock

app/components/Calendar.tsx

@@ -1,10 +1,19 @@
 'use client'
 
-import React, { useState } from 'react'
-import { CaretLeft, CaretRight } from '@phosphor-icons/react'
-import { motion } from 'framer-motion'
+import React, { useState, useEffect, useMemo, useRef } from 'react'
+import {
+  CaretLeft,
+  CaretRight,
+  Plus,
+  MagnifyingGlass,
+  List,
+  CalendarBlank,
+  Clock
+} from '@phosphor-icons/react'
+import { motion, AnimatePresence } from 'framer-motion'
 import { useKV } from '../hooks/useKV'
 import Window from './Window'
+import { recurringHolidays, getVariableHolidays, Holiday } from '../data/holidays'
 
 interface CalendarProps {
   onClose: () => void
@@ -12,95 +21,181 @@ interface CalendarProps {
   onMaximize?: () => void
 }
 
-interface Event {
-  id: string
-  date: string
-  title: string
-  type: 'holiday' | 'custom'
+interface CalendarEvent extends Holiday {
+  isCustom?: boolean
 }
 
-const defaultHolidays: Event[] = [
-  { id: '1', date: '2025-01-01', title: 'New Year\'s Day', type: 'holiday' },
-  { id: '2', date: '2025-02-14', title: 'Valentine\'s Day', type: 'holiday' },
-  { id: '3', date: '2025-03-17', title: 'St. Patrick\'s Day', type: 'holiday' },
-  { id: '4', date: '2025-04-20', title: 'Easter Sunday', type: 'holiday' },
-  { id: '5', date: '2025-05-11', title: 'Mother\'s Day', type: 'holiday' },
-  { id: '6', date: '2025-06-15', title: 'Father\'s Day', type: 'holiday' },
-  { id: '7', date: '2025-07-04', title: 'Independence Day', type: 'holiday' },
-  { id: '8', date: '2025-10-31', title: 'Halloween', type: 'holiday' },
-  { id: '9', date: '2025-11-27', title: 'Thanksgiving', type: 'holiday' },
-  { id: '10', date: '2025-12-25', title: 'Christmas Day', type: 'holiday' },
-  { id: '11', date: '2025-12-31', title: 'New Year\'s Eve', type: 'holiday' },
-]
+type ViewMode = 'day' | 'week' | 'month' | 'year'
 
 export function Calendar({ onClose, onMinimize, onMaximize }: CalendarProps) {
   const [currentDate, setCurrentDate] = useState(new Date())
-  const [events, setEvents] = useKV<Event[]>('calendar-events', defaultHolidays)
-  const [selectedDay, setSelectedDay] = useState<number | null>(null)
+  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)
+
+  // 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
+  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]
+
+    years.forEach(y => {
+      const variable = getVariableHolidays(y)
+      const recurring = recurringHolidays.map(h => ({
+        ...h,
+        date: `${y}-${h.date}`
+      }))
+      events = [...events, ...variable, ...recurring]
+    })
+
+    return events
+  }, [currentDate.getFullYear(), customEvents])
 
   const monthNames = [
     'January', 'February', 'March', 'April', 'May', 'June',
     'July', 'August', 'September', 'October', 'November', 'December'
   ]
 
-  const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+  const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+  const hours = Array.from({ length: 24 }, (_, i) => i)
 
-  const getDaysInMonth = (date: Date) => {
-    const year = date.getFullYear()
-    const month = date.getMonth()
+  const getDaysInMonth = (year: number, month: number) => {
     const firstDay = new Date(year, month, 1)
     const lastDay = new Date(year, month + 1, 0)
     const daysInMonth = lastDay.getDate()
-    const startingDayOfWeek = firstDay.getDay()
+    const startingDayOfWeek = firstDay.getDay() // 0 = Sunday
 
-    const days: (number | null)[] = []
-    for (let i = 0; i < startingDayOfWeek; i++) {
-      days.push(null)
+    // 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--) {
+      prevMonthDays.push({
+        day: prevMonthLastDay - i,
+        month: month - 1,
+        year: year,
+        isCurrentMonth: false
+      })
     }
+
+    // Current month days
+    const currentMonthDays = []
     for (let i = 1; i <= daysInMonth; i++) {
-      days.push(i)
+      currentMonthDays.push({
+        day: i,
+        month: month,
+        year: year,
+        isCurrentMonth: true
+      })
     }
-    return days
+
+    // 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
+
+    for (let i = 1; i <= remainingCells; i++) {
+      nextMonthDays.push({
+        day: i,
+        month: month + 1,
+        year: year,
+        isCurrentMonth: false
+      })
+    }
+
+    return [...prevMonthDays, ...currentMonthDays, ...nextMonthDays]
   }
 
-  const days = getDaysInMonth(currentDate)
-  const today = new Date()
-  const isToday = (day: number | null) => {
-    if (!day) return false
-    return (
-      day === today.getDate() &&
-      currentDate.getMonth() === today.getMonth() &&
-      currentDate.getFullYear() === today.getFullYear()
-    )
+  const calendarDays = useMemo(() => {
+    return getDaysInMonth(currentDate.getFullYear(), currentDate.getMonth())
+  }, [currentDate])
+
+  const getEventsForDate = (dateStr: string) => {
+    return allEvents.filter(e => e.date === dateStr)
   }
 
-  const getEventsForDay = (day: number | null) => {
-    if (!day || !events) return []
-    const dateStr = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
-    return events.filter(event => event.date === dateStr)
+  const isToday = (day: number, month: number, year: number) => {
+    const today = new Date()
+    return day === today.getDate() && month === today.getMonth() && year === today.getFullYear()
   }
 
-  const hasEvent = (day: number | null) => {
-    return getEventsForDay(day).length > 0
+  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)
+    }
+    setCurrentDate(newDate)
   }
 
-  const previousMonth = () => {
-    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1))
-    setSelectedDay(null)
+  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)
+    }
+    setCurrentDate(newDate)
   }
 
-  const nextMonth = () => {
-    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1))
-    setSelectedDay(null)
+  const handleToday = () => {
+    setCurrentDate(new Date())
   }
 
-  const handleDayClick = (day: number | null) => {
-    if (day) {
-      setSelectedDay(day)
+  // Helper for Week View
+  const getWeekDays = () => {
+    const startOfWeek = new Date(currentDate)
+    const day = startOfWeek.getDay()
+    const diff = startOfWeek.getDate() - day
+    startOfWeek.setDate(diff)
+
+    const days = []
+    for (let i = 0; i < 7; i++) {
+      const d = new Date(startOfWeek)
+      d.setDate(startOfWeek.getDate() + i)
+      days.push(d)
     }
+    return days
   }
 
-  const selectedDayEvents = selectedDay ? getEventsForDay(selectedDay) : []
+  const renderHeaderTitle = () => {
+    if (view === 'year') {
+      return <span className="font-bold">{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>
+        </div>
+      )
+    }
+    return (
+      <>
+        <span className="font-bold">{monthNames[currentDate.getMonth()]}</span> {currentDate.getFullYear()}
+      </>
+    )
+  }
 
   return (
     <Window
@@ -110,141 +205,325 @@ export function Calendar({ onClose, onMinimize, onMaximize }: CalendarProps) {
       onClose={onClose}
       onMinimize={onMinimize}
       onMaximize={onMaximize}
-      width={800}
-      height={500}
-      x={100}
-      y={100}
+      width={1100}
+      height={750}
+      x={50}
+      y={50}
       className="calendar-window"
     >
-      <div className="p-6 h-full flex flex-col">
-        <div className="flex items-center justify-between mb-4">
-          <button
-            onClick={previousMonth}
-            className="p-2 hover:bg-[#f0f0f0] rounded"
-          >
-            <CaretLeft size={20} weight="bold" />
-          </button>
-          <div className="text-base font-semibold text-[#2c2c2c]">
-            {monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}
+      <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>
-          <button
-            onClick={nextMonth}
-            className="p-2 hover:bg-[#f0f0f0] rounded"
-          >
-            <CaretRight size={20} weight="bold" />
-          </button>
         </div>
 
-        <div className="grid grid-cols-7 gap-1 mb-2">
-          {daysOfWeek.map((day) => (
-            <div
-              key={day}
-              className="text-center text-xs font-medium text-[#666] py-1"
+        {/* 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"
             >
-              {day}
-            </div>
-          ))}
+              <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="grid grid-cols-7 gap-1">
-          {days.map((day, index) => (
-            day ? (
-              <button
-                key={index}
-                onClick={() => handleDayClick(day)}
-                className={`
-                  aspect-square flex flex-col items-center justify-center text-sm rounded relative
-                  hover:bg-[#f0f0f0]
-                  ${isToday(day) ? 'bg-[#E95420] text-white hover:bg-[#d14818] font-bold' : 'text-[#2c2c2c]'}
-                  ${selectedDay === day && !isToday(day) ? 'bg-[#f0f0f0] ring-2 ring-[#E95420]' : ''}
-                `}
-              >
-                <span>{day}</span>
-                {hasEvent(day) && (
-                  <div className="absolute bottom-1 flex gap-0.5">
-                    {getEventsForDay(day).slice(0, 3).map((event, i) => (
-                      <div
-                        key={i}
-                        className={`w-1 h-1 rounded-full ${event.type === 'holiday'
-                          ? isToday(day) ? 'bg-white' : 'bg-purple-500'
-                          : isToday(day) ? 'bg-white' : 'bg-blue-500'
-                          }`}
-                      />
-                    ))}
+        {/* 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>
+                    </div>
+                  )
+                })}
+              </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>
-                )}
-              </button>
-            ) : (
-              <div
-                key={index}
-                className="aspect-square"
-              />
-            )
-          ))}
-        </div>
+                ))}
+              </div>
 
-        {selectedDayEvents.length > 0 && (
-          <div className="mt-4 pt-4 border-t border-[#e0e0e0] flex-1 overflow-y-auto">
-            <div className="text-xs text-[#666] mb-2">
-              {monthNames[currentDate.getMonth()]} {selectedDay}, {currentDate.getFullYear()}
+              <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>
             </div>
-            <div className="space-y-2">
-              {selectedDayEvents.map((event) => (
-                <div
-                  key={event.id}
-                  className="flex items-start gap-2 p-2 bg-[#f9f9f9] rounded"
-                >
-                  <div
-                    className={`w-2 h-2 rounded-full mt-1.5 flex-shrink-0 ${event.type === 'holiday' ? 'bg-purple-500' : 'bg-blue-500'
-                      }`}
-                  />
-                  <div className="flex-1">
-                    <div className="text-sm font-medium text-[#2c2c2c]">
-                      {event.title}
+          )}
+
+          {/* 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()]}
+                      </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="text-xs text-[#666]">
-                      {event.type === 'holiday' ? 'Holiday' : 'Event'}
+                  )
+                })}
+              </div>
+
+              {/* 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) => (
+                        <div
+                          key={idx}
+                          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
+                          `}
+                          title={event.title}
+                        >
+                          {event.title}
+                        </div>
+                      ))}
                     </div>
-                  </div>
+                  )
+                })}
+              </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 */}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                  {/* Current Time Indicator (if in current week) */}
+                  {/* Simplified: just show if today is in view */}
                 </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {!selectedDay && (
-          <div className="mt-4 pt-4 border-t border-[#e0e0e0] flex-1 overflow-y-auto">
-            <div className="text-xs text-[#666] mb-2">Today</div>
-            <div className="text-sm font-medium text-[#2c2c2c]">
-              {today.toLocaleDateString('en-US', {
-                weekday: 'long',
-                year: 'numeric',
-                month: 'long',
-                day: 'numeric'
-              })}
+              </div>
             </div>
-            {getEventsForDay(today.getDate()).length > 0 && (
-              <div className="mt-3 space-y-2">
-                {getEventsForDay(today.getDate()).map((event) => (
-                  <div
-                    key={event.id}
-                    className="flex items-start gap-2 p-2 bg-[#fff3e6] rounded"
-                  >
+          )}
+
+          {/* 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
-                      className={`w-2 h-2 rounded-full mt-1.5 flex-shrink-0 ${event.type === 'holiday' ? 'bg-purple-500' : 'bg-blue-500'
-                        }`}
-                    />
-                    <div className="flex-1">
-                      <div className="text-sm font-medium text-[#2c2c2c]">
-                        {event.title}
+                      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>
+
+              {/* 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`}
+                      </div>
+                      {/* Column */}
+                      <div className="flex-1 border-l border-[#333] relative hover:bg-[#252526]/30 transition-colors">
+                        {/* Time slots would go here */}
                       </div>
                     </div>
-                  </div>
-                ))}
+                  ))}
+                </div>
               </div>
-            )}
-          </div>
-        )}
+            </div>
+          )}
+
+        </div>
       </div>
     </Window>
   )

app/components/Desktop.tsx

@@ -24,6 +24,18 @@ import { FlutterCodeEditor } from './FlutterCodeEditor'
 import { LaTeXEditor } from './LaTeXEditor'
 import { motion, AnimatePresence } from 'framer-motion'
 import { SystemPowerOverlay } from './SystemPowerOverlay'
+import {
+  Folder,
+  Calendar as CalendarIcon,
+  Clock as ClockIcon,
+  Globe,
+  Sparkle,
+  Terminal as TerminalIcon,
+  Key,
+  Brain,
+  Code,
+  FileText
+} from '@phosphor-icons/react'
 
 export function Desktop() {
   const [fileManagerOpen, setFileManagerOpen] = useState(true)
@@ -366,6 +378,153 @@ export function Desktop() {
     }
   }
 
+  // Build minimized apps list for dock
+  const minimizedApps = []
+
+  if (fileManagerMinimized && fileManagerOpen) {
+    minimizedApps.push({
+      id: 'files',
+      label: 'Files',
+      icon: (
+        <div className="bg-gradient-to-br from-blue-400 to-cyan-200 w-full h-full rounded-xl flex items-center justify-center border border-white/30">
+          <Folder size={20} weight="regular" className="text-blue-900" />
+        </div>
+      ),
+      onRestore: () => setFileManagerMinimized(false)
+    })
+  }
+
+  if (calendarMinimized && calendarOpen) {
+    minimizedApps.push({
+      id: 'calendar',
+      label: 'Calendar',
+      icon: (
+        <div className="bg-gradient-to-br from-purple-500 to-purple-600 w-full h-full rounded-xl flex items-center justify-center shadow-inner">
+          <CalendarIcon size={20} weight="regular" className="text-white" />
+        </div>
+      ),
+      onRestore: () => setCalendarMinimized(false)
+    })
+  }
+
+  if (clockMinimized && clockOpen) {
+    minimizedApps.push({
+      id: 'clock',
+      label: 'Clock',
+      icon: (
+        <div className="bg-black w-full h-full rounded-full flex items-center justify-center border border-gray-600">
+          <ClockIcon size={20} weight="regular" className="text-white" />
+        </div>
+      ),
+      onRestore: () => setClockMinimized(false)
+    })
+  }
+
+  if (browserMinimized && browserOpen) {
+    minimizedApps.push({
+      id: 'browser',
+      label: 'Browser',
+      icon: (
+        <div className="bg-white w-full h-full rounded-xl overflow-hidden relative flex items-center justify-center">
+          <div className="absolute inset-0 bg-gradient-to-tr from-blue-500 to-cyan-300" />
+          <Globe size={20} weight="light" className="text-white relative z-10" />
+        </div>
+      ),
+      onRestore: () => setBrowserMinimized(false)
+    })
+  }
+
+  if (geminiChatMinimized && geminiChatOpen) {
+    minimizedApps.push({
+      id: 'gemini',
+      label: 'Gemini',
+      icon: (
+        <div className="bg-white w-full h-full rounded-xl flex items-center justify-center border border-gray-200">
+          <Sparkle size={20} weight="fill" className="text-blue-500" />
+        </div>
+      ),
+      onRestore: () => setGeminiChatMinimized(false)
+    })
+  }
+
+  if (terminalMinimized && terminalOpen) {
+    minimizedApps.push({
+      id: 'terminal',
+      label: 'Terminal',
+      icon: (
+        <div className="bg-black w-full h-full rounded-xl flex items-center justify-center border border-gray-700">
+          <TerminalIcon size={20} weight="bold" className="text-green-400" />
+        </div>
+      ),
+      onRestore: () => setTerminalMinimized(false)
+    })
+  }
+
+  if (sessionManagerMinimized && sessionManagerOpen) {
+    minimizedApps.push({
+      id: 'sessions',
+      label: 'Sessions',
+      icon: (
+        <div className="bg-gradient-to-br from-indigo-500 to-blue-600 w-full h-full rounded-xl flex items-center justify-center">
+          <Key size={20} weight="bold" className="text-white" />
+        </div>
+      ),
+      onRestore: () => setSessionManagerMinimized(false)
+    })
+  }
+
+  if (flutterRunnerMinimized && flutterRunnerOpen) {
+    minimizedApps.push({
+      id: 'flutter-runner',
+      label: 'Flutter Runner',
+      icon: (
+        <div className="bg-gradient-to-br from-cyan-400 to-blue-500 w-full h-full rounded-xl flex items-center justify-center">
+          <Code size={20} weight="bold" className="text-white" />
+        </div>
+      ),
+      onRestore: () => setFlutterRunnerMinimized(false)
+    })
+  }
+
+  if (researchBrowserMinimized && researchBrowserOpen) {
+    minimizedApps.push({
+      id: 'research',
+      label: 'Research',
+      icon: (
+        <div className="bg-gradient-to-br from-purple-400 to-pink-500 w-full h-full rounded-xl flex items-center justify-center">
+          <Brain size={20} weight="bold" className="text-white" />
+        </div>
+      ),
+      onRestore: () => setResearchBrowserMinimized(false)
+    })
+  }
+
+  if (flutterCodeEditorMinimized && flutterCodeEditorOpen) {
+    minimizedApps.push({
+      id: 'flutter-editor',
+      label: 'Flutter IDE',
+      icon: (
+        <div className="bg-gradient-to-br from-blue-500 to-cyan-500 w-full h-full rounded-xl flex items-center justify-center">
+          <Code size={20} weight="fill" className="text-white" />
+        </div>
+      ),
+      onRestore: () => setFlutterCodeEditorMinimized(false)
+    })
+  }
+
+  if (latexEditorMinimized && latexEditorOpen) {
+    minimizedApps.push({
+      id: 'latex-editor',
+      label: 'LaTeX Studio',
+      icon: (
+        <div className="bg-black w-full h-full rounded-xl flex items-center justify-center">
+          <FileText size={20} weight="bold" className="text-white" />
+        </div>
+      ),
+      onRestore: () => setLaTeXEditorMinimized(false)
+    })
+  }
+
   return (
     <div className="relative h-screen w-screen overflow-hidden flex touch-auto" onContextMenu={handleDesktopRightClick}>
       <div
@@ -411,6 +570,7 @@ export function Desktop() {
           browser: browserOpen,
           gemini: geminiChatOpen
         }}
+        minimizedApps={minimizedApps}
       />
 
       <div className="flex-1 z-10 relative">
@@ -532,16 +692,17 @@ export function Desktop() {
           {fileManagerOpen && (
             <motion.div
               key="file-manager"
-              initial={{ scale: 0.95, opacity: 0 }}
+              initial={{ scale: 0.8, opacity: 0, y: 100 }}
               animate={{
-                scale: fileManagerMinimized ? 0 : 1,
+                scale: fileManagerMinimized ? 0.1 : 1,
                 opacity: fileManagerMinimized ? 0 : 1,
-                y: fileManagerMinimized ? 200 : 0
+                y: fileManagerMinimized ? 400 : 0,
+                x: fileManagerMinimized ? '-40%' : 0
               }}
-              exit={{ scale: 0.95, opacity: 0 }}
-              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              exit={{ scale: 0.8, opacity: 0, y: 100 }}
+              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
               className="absolute inset-0"
-              style={{ pointerEvents: fileManagerMinimized ? 'none' : 'auto' }}
+              style={{ pointerEvents: fileManagerMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <FileManager
                 currentPath={currentPath}
@@ -549,6 +710,7 @@ export function Desktop() {
                 onClose={closeFileManager}
                 onOpenFlutterApp={openFlutterRunner}
                 onMinimize={() => setFileManagerMinimized(true)}
+                sessionId={userSession}
               />
             </motion.div>
           )}
@@ -556,16 +718,17 @@ export function Desktop() {
           {calendarOpen && (
             <motion.div
               key="calendar"
-              initial={{ scale: 0.95, opacity: 0 }}
+              initial={{ scale: 0.8, opacity: 0, y: 100 }}
               animate={{
-                scale: calendarMinimized ? 0 : 1,
+                scale: calendarMinimized ? 0.1 : 1,
                 opacity: calendarMinimized ? 0 : 1,
-                y: calendarMinimized ? 200 : 0
+                y: calendarMinimized ? 400 : 0,
+                x: calendarMinimized ? '20%' : 0
               }}
-              exit={{ scale: 0.95, opacity: 0 }}
-              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              exit={{ scale: 0.8, opacity: 0, y: 100 }}
+              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
               className="absolute inset-0"
-              style={{ pointerEvents: calendarMinimized ? 'none' : 'auto' }}
+              style={{ pointerEvents: calendarMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <Calendar onClose={closeCalendar} onMinimize={() => setCalendarMinimized(true)} />
             </motion.div>
@@ -574,16 +737,17 @@ export function Desktop() {
           {clockOpen && (
             <motion.div
               key="clock"
-              initial={{ scale: 0.95, opacity: 0 }}
+              initial={{ scale: 0.8, opacity: 0, y: 100 }}
               animate={{
-                scale: clockMinimized ? 0 : 1,
+                scale: clockMinimized ? 0.1 : 1,
                 opacity: clockMinimized ? 0 : 1,
-                y: clockMinimized ? 200 : 0
+                y: clockMinimized ? 400 : 0,
+                x: clockMinimized ? '10%' : 0
               }}
-              exit={{ scale: 0.95, opacity: 0 }}
-              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              exit={{ scale: 0.8, opacity: 0, y: 100 }}
+              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
               className="absolute inset-0"
-              style={{ pointerEvents: clockMinimized ? 'none' : 'auto' }}
+              style={{ pointerEvents: clockMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <Clock onClose={closeClock} onMinimize={() => setClockMinimized(true)} />
             </motion.div>
@@ -592,16 +756,17 @@ export function Desktop() {
           {browserOpen && (
             <motion.div
               key="browser"
-              initial={{ scale: 0.95, opacity: 0 }}
+              initial={{ scale: 0.8, opacity: 0, y: 100 }}
               animate={{
-                scale: browserMinimized ? 0 : 1,
+                scale: browserMinimized ? 0.1 : 1,
                 opacity: browserMinimized ? 0 : 1,
-                y: browserMinimized ? 200 : 0
+                y: browserMinimized ? 400 : 0,
+                x: browserMinimized ? '-20%' : 0
               }}
-              exit={{ scale: 0.95, opacity: 0 }}
-              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              exit={{ scale: 0.8, opacity: 0, y: 100 }}
+              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
               className="absolute inset-0"
-              style={{ pointerEvents: browserMinimized ? 'none' : 'auto' }}
+              style={{ pointerEvents: browserMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <WebBrowserApp onClose={closeBrowser} onMinimize={() => setBrowserMinimized(true)} />
             </motion.div>
@@ -610,16 +775,17 @@ export function Desktop() {
           {terminalOpen && (
             <motion.div
               key="terminal"
-              initial={{ scale: 0.95, opacity: 0 }}
+              initial={{ scale: 0.8, opacity: 0, y: 100 }}
               animate={{
-                scale: terminalMinimized ? 0 : 1,
+                scale: terminalMinimized ? 0.1 : 1,
                 opacity: terminalMinimized ? 0 : 1,
-                y: terminalMinimized ? 200 : 0
+                y: terminalMinimized ? 400 : 0,
+                x: terminalMinimized ? '30%' : 0
               }}
-              exit={{ scale: 0.95, opacity: 0 }}
-              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              exit={{ scale: 0.8, opacity: 0, y: 100 }}
+              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
               className="absolute inset-0"
-              style={{ pointerEvents: terminalMinimized ? 'none' : 'auto' }}
+              style={{ pointerEvents: terminalMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <Terminal onClose={closeTerminal} onMinimize={() => setTerminalMinimized(true)} />
             </motion.div>
@@ -628,16 +794,17 @@ export function Desktop() {
           {sessionManagerOpen && sessionInitialized && (
             <motion.div
               key="session-manager"
-              initial={{ scale: 0.9, opacity: 0 }}
+              initial={{ scale: 0.8, opacity: 0, y: 100 }}
               animate={{
-                scale: sessionManagerMinimized ? 0 : 1,
+                scale: sessionManagerMinimized ? 0.1 : 1,
                 opacity: sessionManagerMinimized ? 0 : 1,
-                y: sessionManagerMinimized ? 200 : 0
+                y: sessionManagerMinimized ? 400 : 0,
+                x: sessionManagerMinimized ? '40%' : 0
               }}
-              exit={{ scale: 0.9, opacity: 0 }}
-              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              exit={{ scale: 0.8, opacity: 0, y: 100 }}
+              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
               className="absolute inset-0"
-              style={{ pointerEvents: sessionManagerMinimized ? 'none' : 'auto' }}
+              style={{ pointerEvents: sessionManagerMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <SessionManagerWindow
                 onClose={closeSessionManager}
@@ -651,16 +818,17 @@ export function Desktop() {
           {flutterRunnerOpen && activeFlutterApp && (
             <motion.div
               key="flutter-runner"
-              initial={{ scale: 0.95, opacity: 0 }}
+              initial={{ scale: 0.8, opacity: 0, y: 100 }}
               animate={{
-                scale: flutterRunnerMinimized ? 0 : 1,
+                scale: flutterRunnerMinimized ? 0.1 : 1,
                 opacity: flutterRunnerMinimized ? 0 : 1,
-                y: flutterRunnerMinimized ? 200 : 0
+                y: flutterRunnerMinimized ? 400 : 0,
+                x: flutterRunnerMinimized ? '50%' : 0
               }}
-              exit={{ scale: 0.95, opacity: 0 }}
-              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              exit={{ scale: 0.8, opacity: 0, y: 100 }}
+              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
               className="absolute inset-0"
-              style={{ pointerEvents: flutterRunnerMinimized ? 'none' : 'auto' }}
+              style={{ pointerEvents: flutterRunnerMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <FlutterRunner
                 file={activeFlutterApp}
@@ -673,16 +841,17 @@ export function Desktop() {
           {researchBrowserOpen && (
             <motion.div
               key="research-browser"
-              initial={{ scale: 0.95, opacity: 0 }}
+              initial={{ scale: 0.8, opacity: 0, y: 100 }}
               animate={{
-                scale: researchBrowserMinimized ? 0 : 1,
+                scale: researchBrowserMinimized ? 0.1 : 1,
                 opacity: researchBrowserMinimized ? 0 : 1,
-                y: researchBrowserMinimized ? 200 : 0
+                y: researchBrowserMinimized ? 400 : 0,
+                x: researchBrowserMinimized ? '-30%' : 0
               }}
-              exit={{ scale: 0.95, opacity: 0 }}
-              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              exit={{ scale: 0.8, opacity: 0, y: 100 }}
+              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
               className="absolute inset-0"
-              style={{ pointerEvents: researchBrowserMinimized ? 'none' : 'auto' }}
+              style={{ pointerEvents: researchBrowserMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <ResearchBrowser
                 onClose={closeResearchBrowser}
@@ -694,16 +863,17 @@ export function Desktop() {
           {flutterCodeEditorOpen && (
             <motion.div
               key="flutter-code-editor"
-              initial={{ scale: 0.95, opacity: 0 }}
+              initial={{ scale: 0.8, opacity: 0, y: 100 }}
               animate={{
-                scale: flutterCodeEditorMinimized ? 0 : 1,
+                scale: flutterCodeEditorMinimized ? 0.1 : 1,
                 opacity: flutterCodeEditorMinimized ? 0 : 1,
-                y: flutterCodeEditorMinimized ? 200 : 0
+                y: flutterCodeEditorMinimized ? 400 : 0,
+                x: flutterCodeEditorMinimized ? '50%' : 0
               }}
-              exit={{ scale: 0.95, opacity: 0 }}
-              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              exit={{ scale: 0.8, opacity: 0, y: 100 }}
+              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
               className="absolute inset-0"
-              style={{ pointerEvents: flutterCodeEditorMinimized ? 'none' : 'auto' }}
+              style={{ pointerEvents: flutterCodeEditorMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <FlutterCodeEditor onClose={closeFlutterCodeEditor} onMinimize={() => setFlutterCodeEditorMinimized(true)} />
             </motion.div>
@@ -712,16 +882,17 @@ export function Desktop() {
           {latexEditorOpen && (
             <motion.div
               key="latex-editor"
-              initial={{ scale: 0.95, opacity: 0 }}
+              initial={{ scale: 0.8, opacity: 0, y: 100 }}
               animate={{
-                scale: latexEditorMinimized ? 0 : 1,
+                scale: latexEditorMinimized ? 0.1 : 1,
                 opacity: latexEditorMinimized ? 0 : 1,
-                y: latexEditorMinimized ? 200 : 0
+                y: latexEditorMinimized ? 400 : 0,
+                x: latexEditorMinimized ? '60%' : 0
               }}
-              exit={{ scale: 0.95, opacity: 0 }}
-              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              exit={{ scale: 0.8, opacity: 0, y: 100 }}
+              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
               className="absolute inset-0"
-              style={{ pointerEvents: latexEditorMinimized ? 'none' : 'auto' }}
+              style={{ pointerEvents: latexEditorMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <LaTeXEditor onClose={closeLaTeXEditor} sessionId={userSession} onMinimize={() => setLaTeXEditorMinimized(true)} />
             </motion.div>
@@ -729,16 +900,17 @@ export function Desktop() {
           {geminiChatOpen && (
             <motion.div
               key="gemini"
-              initial={{ scale: 0.95, opacity: 0 }}
+              initial={{ scale: 0.8, opacity: 0, y: 100 }}
               animate={{
-                scale: geminiChatMinimized ? 0 : 1,
+                scale: geminiChatMinimized ? 0.1 : 1,
                 opacity: geminiChatMinimized ? 0 : 1,
-                y: geminiChatMinimized ? 200 : 0
+                y: geminiChatMinimized ? 400 : 0,
+                x: geminiChatMinimized ? '0%' : 0
               }}
-              exit={{ scale: 0.95, opacity: 0 }}
-              transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+              exit={{ scale: 0.8, opacity: 0, y: 100 }}
+              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
               className="absolute inset-0"
-              style={{ pointerEvents: geminiChatMinimized ? 'none' : 'auto' }}
+              style={{ pointerEvents: geminiChatMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <GeminiChat onClose={closeGeminiChat} onMinimize={() => setGeminiChatMinimized(true)} />
             </motion.div>

app/components/Dock.tsx

@@ -12,6 +12,15 @@ import {
   Compass
 } from '@phosphor-icons/react'
 import { motion } from 'framer-motion'
+import { DynamicClockIcon } from './DynamicClockIcon'
+import { DynamicCalendarIcon } from './DynamicCalendarIcon'
+
+interface MinimizedApp {
+  id: string
+  label: string
+  icon: React.ReactNode
+  onRestore: () => void
+}
 
 interface DockProps {
   onOpenFileManager: (path: string) => void
@@ -20,6 +29,7 @@ interface DockProps {
   onOpenBrowser: () => void
   onOpenGeminiChat: () => void
   openApps: { [key: string]: boolean }
+  minimizedApps?: MinimizedApp[]
 }
 
 interface DockItemProps {
@@ -62,7 +72,8 @@ export function Dock({
   onOpenClock,
   onOpenBrowser,
   onOpenGeminiChat,
-  openApps
+  openApps,
+  minimizedApps = []
 }: DockProps) {
   const mouseX = React.useRef<number | null>(null)
 
@@ -103,12 +114,8 @@ export function Dock({
     },
     {
       icon: (
-        <div className="bg-black w-full h-full rounded-full flex items-center justify-center border border-gray-600">
-          <div className="w-10 h-10 rounded-full border border-gray-600 relative bg-black">
-            <div className="absolute top-1/2 left-1/2 w-0.5 h-2.5 bg-white origin-bottom -translate-x-1/2 -translate-y-full" />
-            <div className="absolute top-1/2 left-1/2 w-0.5 h-3.5 bg-gray-300 origin-bottom -translate-x-1/2 -translate-y-full" />
-            <div className="absolute top-1/2 left-1/2 w-0.5 h-4 bg-orange-500 origin-bottom -translate-x-1/2 -translate-y-full animate-spin" style={{ animationDuration: '60s' }} />
-          </div>
+        <div className="w-full h-full">
+          <DynamicClockIcon />
         </div>
       ),
       label: 'Clock',
@@ -118,8 +125,8 @@ export function Dock({
     },
     {
       icon: (
-        <div className="bg-gradient-to-br from-purple-500 to-purple-600 w-full h-full rounded-xl flex items-center justify-center shadow-inner">
-          <CalendarIcon size={24} weight="regular" className="text-white md:scale-110" />
+        <div className="w-full h-full">
+          <DynamicCalendarIcon />
         </div>
       ),
       label: 'Calendar',
@@ -137,26 +144,40 @@ export function Dock({
         onMouseLeave={() => mouseX.current = null}
       >
         {dockItems.map((item, index) => (
-          <React.Fragment key={item.label}>
-            <DockItem {...item} mouseX={mouseX} />
-            {index === dockItems.length - 1 && (
-              <>
-                <div className="w-px h-8 md:h-10 bg-gray-400/30 mx-0.5 md:mx-1" />
+          <DockItem key={item.label} {...item} mouseX={mouseX} />
+        ))}
+
+        {/* Minimized apps section */}
+        {minimizedApps.length > 0 && (
+          <>
+            <div className="w-px h-8 md:h-10 bg-gray-400/30 mx-0.5 md:mx-1" />
+            {minimizedApps.map((app) => (
+              <div key={app.id} className="relative">
                 <DockItem
-                  icon={
-                    <div className="bg-gradient-to-b from-gray-200 to-gray-300 w-full h-full rounded-xl flex items-center justify-center border border-white/40">
-                      <Trash size={20} weight="regular" className="text-gray-600 md:scale-110" />
-                    </div>
-                  }
-                  label="Trash"
-                  onClick={() => { }}
-                  className=""
+                  icon={app.icon}
+                  label={`${app.label} (minimized)`}
+                  onClick={app.onRestore}
+                  className="opacity-70 ring-2 ring-yellow-400/50"
                   mouseX={mouseX}
                 />
-              </>
-            )}
-          </React.Fragment>
-        ))}
+              </div>
+            ))}
+          </>
+        )}
+
+        {/* Trash */}
+        <div className="w-px h-8 md:h-10 bg-gray-400/30 mx-0.5 md:mx-1" />
+        <DockItem
+          icon={
+            <div className="bg-gradient-to-b from-gray-200 to-gray-300 w-full h-full rounded-xl flex items-center justify-center border border-white/40">
+              <Trash size={20} weight="regular" className="text-gray-600 md:scale-110" />
+            </div>
+          }
+          label="Trash"
+          onClick={() => { }}
+          className=""
+          mouseX={mouseX}
+        />
       </div>
     </div>
   )

app/components/DraggableDesktopIcon.tsx

@@ -15,6 +15,8 @@ import {
   Lightning,
   Key
 } from '@phosphor-icons/react'
+import { DynamicClockIcon } from './DynamicClockIcon'
+import { DynamicCalendarIcon } from './DynamicCalendarIcon'
 
 interface DraggableDesktopIconProps {
   id: string
@@ -53,14 +55,14 @@ export function DraggableDesktopIcon({
         )
       case 'calendar':
         return (
-          <div className="bg-gradient-to-br from-purple-500 to-purple-600 w-full h-full rounded-xl flex items-center justify-center shadow-inner">
-            <Calendar size={32} weight="regular" className="text-white" />
+          <div className="w-full h-full">
+            <DynamicCalendarIcon />
           </div>
         )
       case 'clock':
         return (
-          <div className="bg-black w-full h-full rounded-full flex items-center justify-center border-2 border-gray-600">
-            <Clock size={32} weight="regular" className="text-white" />
+          <div className="w-full h-full">
+            <DynamicClockIcon />
           </div>
         )
       case 'browser':
@@ -137,19 +139,17 @@ export function DraggableDesktopIcon({
       >
         <div className="icon-handle">
           <div
-            className={`w-14 h-14 shadow-lg transition-transform hover:scale-110 ${
-              iconType === 'clock' ? '' : 'rounded-xl'
-            }`}
+            className={`w-14 h-14 shadow-lg transition-transform hover:scale-110 ${iconType === 'clock' ? '' : 'rounded-xl'
+              }`}
           >
             {getIcon()}
           </div>
         </div>
         <span
-          className={`mt-1 text-xs font-medium drop-shadow-lg text-center leading-tight px-1 py-0.5 rounded transition-colors ${
-            selected
-              ? 'bg-blue-600/80 text-white'
-              : 'text-white bg-black/20 group-hover:bg-blue-600/80'
-          }`}
+          className={`mt-1 text-xs font-medium drop-shadow-lg text-center leading-tight px-1 py-0.5 rounded transition-colors ${selected
+            ? 'bg-blue-600/80 text-white'
+            : 'text-white bg-black/20 group-hover:bg-blue-600/80'
+            }`}
         >
           {label}
         </span>

app/components/DynamicCalendarIcon.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+
+interface DynamicCalendarIconProps {
+    size?: number | string
+    className?: string
+}
+
+export function DynamicCalendarIcon({ size = '100%', className = '' }: DynamicCalendarIconProps) {
+    const [date, setDate] = useState<Date | null>(null)
+
+    useEffect(() => {
+        setDate(new Date())
+        // Update date every minute to ensure it changes at midnight
+        const timer = setInterval(() => {
+            setDate(new Date())
+        }, 60000)
+        return () => clearInterval(timer)
+    }, [])
+
+    if (!date) return null
+
+    const dayName = date.toLocaleDateString('en-US', { weekday: 'short' }).toUpperCase()
+    const dayNumber = date.getDate()
+
+    return (
+        <div
+            className={`flex flex-col items-center justify-center bg-white rounded-xl overflow-hidden shadow-lg border border-gray-200 ${className}`}
+            style={{ width: size, height: size }}
+        >
+            {/* Red Header */}
+            <div className="w-full bg-red-500 text-white font-bold flex items-center justify-center h-[30%] text-[0.6em] tracking-wide">
+                {dayName}
+            </div>
+            {/* Date Body */}
+            <div className="flex-1 flex items-center justify-center bg-white w-full pb-1">
+                <span className="text-black font-bold text-[1.4em] leading-none">{dayNumber}</span>
+            </div>
+        </div>
+    )
+}

app/components/DynamicClockIcon.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+
+interface DynamicClockIconProps {
+    size?: number | string
+    className?: string
+}
+
+export function DynamicClockIcon({ size = '100%', className = '' }: DynamicClockIconProps) {
+    const [time, setTime] = useState<Date | null>(null)
+
+    useEffect(() => {
+        setTime(new Date())
+        const timer = setInterval(() => {
+            setTime(new Date())
+        }, 1000)
+        return () => clearInterval(timer)
+    }, [])
+
+    if (!time) return null
+
+    const seconds = time.getSeconds()
+    const minutes = time.getMinutes()
+    const hours = time.getHours()
+
+    const secondDegrees = (seconds / 60) * 360
+    const minuteDegrees = ((minutes + seconds / 60) / 60) * 360
+    const hourDegrees = ((hours + minutes / 60) / 12) * 360
+
+    return (
+        <div
+            className={`relative bg-black rounded-full border-2 border-gray-600 shadow-lg flex items-center justify-center ${className}`}
+            style={{ width: size, height: size }}
+        >
+            <div className="relative w-full h-full rounded-full bg-black">
+                {/* Hour Hand */}
+                <div
+                    className="absolute top-1/2 left-1/2 w-1 bg-white rounded-full origin-bottom"
+                    style={{
+                        height: '25%',
+                        transform: `translate(-50%, -100%) rotate(${hourDegrees}deg)`
+                    }}
+                />
+                {/* Minute Hand */}
+                <div
+                    className="absolute top-1/2 left-1/2 w-0.5 bg-gray-300 rounded-full origin-bottom"
+                    style={{
+                        height: '35%',
+                        transform: `translate(-50%, -100%) rotate(${minuteDegrees}deg)`
+                    }}
+                />
+                {/* Second Hand */}
+                <div
+                    className="absolute top-1/2 left-1/2 w-0.5 bg-orange-500 rounded-full origin-bottom"
+                    style={{
+                        height: '40%',
+                        transform: `translate(-50%, -100%) rotate(${secondDegrees}deg)`
+                    }}
+                />
+                {/* Center Dot */}
+                <div className="absolute top-1/2 left-1/2 w-1.5 h-1.5 bg-orange-500 rounded-full transform -translate-x-1/2 -translate-y-1/2" />
+            </div>
+        </div>
+    )
+}

app/components/FileManager.tsx

@@ -35,6 +35,7 @@ interface FileManagerProps {
   onMinimize?: () => void
   onMaximize?: () => void
   onOpenFlutterApp?: (appFile: any) => void
+  sessionId?: string
 }
 
 interface FileItem {
@@ -49,7 +50,7 @@ interface FileItem {
   pubspecYaml?: string
 }
 
-export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp, onMinimize, onMaximize }: FileManagerProps) {
+export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp, onMinimize, onMaximize, sessionId }: FileManagerProps) {
   const [files, setFiles] = useState<FileItem[]>([])
   const [loading, setLoading] = useState(true)
   const [searchQuery, setSearchQuery] = useState('')
@@ -58,12 +59,17 @@ export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp
   const [previewFile, setPreviewFile] = useState<FileItem | null>(null)
   const [isPublicFolder, setIsPublicFolder] = useState(false)
 
-  // Load files when path changes
+  // Load files when path changes or sessionId becomes available
   useEffect(() => {
     // Check if this is the public folder
     setIsPublicFolder(currentPath === 'public' || currentPath.startsWith('public/'))
-    loadFiles()
-  }, [currentPath])
+
+    // Only load files if we have a sessionId (for non-public folders) or if it's a public folder
+    const isPublic = currentPath === 'public' || currentPath.startsWith('public/')
+    if (isPublic || sessionId) {
+      loadFiles()
+    }
+  }, [currentPath, sessionId])
 
   const loadFiles = async () => {
     setLoading(true)
@@ -74,12 +80,22 @@ export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp
         const publicPath = currentPath === 'public' ? '' : currentPath.replace('public/', '')
         response = await fetch(`/api/public?folder=${encodeURIComponent(publicPath)}`)
       } else {
-        // Load from regular files API
-        response = await fetch(`/api/files?folder=${encodeURIComponent(currentPath)}`)
+        // Load from regular files API with session headers
+        const headers: Record<string, string> = {}
+        if (sessionId) {
+          headers['x-session-id'] = sessionId
+        }
+        response = await fetch(`/api/files?folder=${encodeURIComponent(currentPath)}`, { headers })
       }
 
       const data = await response.json()
 
+      if (data.error) {
+        console.error('Error loading files:', data.error)
+        setFiles([])
+        return
+      }
+
       // Add public folder to root directory
       if (currentPath === '') {
         const publicFolder = {
@@ -90,8 +106,12 @@ export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp
         }
 
         // Add public folder if it doesn't exist
-        if (!data.files.some((f: FileItem) => f.path === 'public')) {
-          data.files.unshift(publicFolder)
+        if (data.files && Array.isArray(data.files)) {
+          if (!data.files.some((f: FileItem) => f.path === 'public')) {
+            data.files.unshift(publicFolder)
+          }
+        } else {
+          data.files = [publicFolder]
         }
       }
 
@@ -153,8 +173,13 @@ export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp
     if (!confirm(`Delete ${file.name}?`)) return
 
     try {
+      const headers: Record<string, string> = {}
+      if (sessionId) {
+        headers['x-session-id'] = sessionId
+      }
       const response = await fetch(`/api/files?path=${encodeURIComponent(file.path)}`, {
-        method: 'DELETE'
+        method: 'DELETE',
+        headers
       })
 
       const result = await response.json()
@@ -174,9 +199,13 @@ export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp
     if (!folderName) return
 
     try {
+      const headers: Record<string, string> = { 'Content-Type': 'application/json' }
+      if (sessionId) {
+        headers['x-session-id'] = sessionId
+      }
       const response = await fetch('/api/files', {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers,
         body: JSON.stringify({
           folderName,
           parentPath: currentPath
@@ -323,7 +352,11 @@ export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp
 
           {/* File List */}
           <div className="flex-1 overflow-auto p-4 bg-white">
-            {loading ? (
+            {!sessionId && !isPublicFolder ? (
+              <div className="flex items-center justify-center h-full text-[#999] text-sm">
+                Initializing session...
+              </div>
+            ) : loading ? (
               <div className="flex items-center justify-center h-full text-[#999] text-sm">
                 Loading files...
               </div>

app/components/FlutterCodeEditor.tsx

@@ -267,7 +267,7 @@ class MyApp extends StatelessWidget {
     >
       <div className="flex flex-col h-full bg-gray-900">
         {/* Header Toolbar */}
-        <div className="h-14 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 flex items-center justify-between px-4 shadow-lg">
+        <div className="window-drag-handle h-14 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 flex items-center justify-between px-4 shadow-lg cursor-move">
           <div className="flex items-center gap-3">
             <CodeIcon size={28} weight="bold" className="text-white" />
             <span className="text-white font-bold text-lg">Flutter IDE</span>

app/components/FlutterRunner.tsx

@@ -96,6 +96,7 @@ export function FlutterRunner({ file, onClose, onMinimize, onMaximize }: Flutter
     <Window
       id="flutter-runner"
       title={`Flutter App: ${file.name}`}
+      isOpen={true}
       onClose={onClose}
       onMinimize={onMinimize}
       onMaximize={onMaximize}
@@ -107,7 +108,7 @@ export function FlutterRunner({ file, onClose, onMinimize, onMaximize }: Flutter
     >
       <div className="flex flex-col h-full bg-[#1E1E1E] text-gray-300">
         {/* Top Toolbar */}
-        <div className="h-14 bg-[#252526] border-b border-[#333] flex items-center justify-between px-4 shadow-sm">
+        <div className="window-drag-handle h-14 bg-[#252526] border-b border-[#333] flex items-center justify-between px-4 shadow-sm cursor-move">
           <div className="flex items-center gap-3">
             <div className="w-8 h-8 bg-blue-500/20 rounded-lg flex items-center justify-center">
               <CodeIcon size={20} weight="bold" className="text-blue-400" />

app/components/LaTeXEditor.tsx

@@ -339,7 +339,7 @@ This document demonstrates LaTeX capabilities for: ${prompt}
     >
       <div className="flex flex-col h-full bg-[#F5F5F7]">
         {/* Header */}
-        <div className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 shadow-sm z-10">
+        <div className="window-drag-handle h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 shadow-sm z-10 cursor-move">
           <div className="flex items-center gap-4">
             <div className="w-10 h-10 bg-black rounded-xl flex items-center justify-center shadow-lg">
               <MathOperations size={24} weight="bold" className="text-white" />

app/components/Window.tsx

@@ -43,6 +43,7 @@ const Window: React.FC<WindowProps> = ({
   const [currentPosition, setCurrentPosition] = React.useState({ x, y });
   const [currentSize, setCurrentSize] = React.useState({ width, height });
   const [isMobile, setIsMobile] = React.useState(false);
+  const [isDraggingOrResizing, setIsDraggingOrResizing] = React.useState(false);
 
   // Detect mobile device
   useEffect(() => {
@@ -84,7 +85,12 @@ const Window: React.FC<WindowProps> = ({
 
   const handleMaximize = () => {
     if (!isMaximized) {
-      setPreviousSize({ width, height, x, y });
+      setPreviousSize({
+        width: currentSize.width,
+        height: currentSize.height,
+        x: currentPosition.x,
+        y: currentPosition.y
+      });
       setIsMaximized(true);
     } else {
       setIsMaximized(false);
@@ -92,59 +98,53 @@ const Window: React.FC<WindowProps> = ({
     if (onMaximize) onMaximize();
   };
 
-  if (isMaximized) {
-    return (
-      <div
-        className={`fixed inset-0 top-8 z-50 flex flex-col overflow-hidden ${windowClass} ${className}`}
-      >
-        <div
-          className={`h-10 flex items-center px-4 space-x-4 border-b ${headerClass} ${headerClassName}`}
-        >
-          <div className="flex space-x-2 group">
-            <div className="traffic-light traffic-close" onClick={onClose} />
-            <div className="traffic-light traffic-min" onClick={onMinimize} />
-            <div className="traffic-light traffic-max" onClick={handleMaximize} />
-          </div>
-          <span className="font-semibold text-gray-700 flex-1 text-center pr-16 text-sm">{title}</span>
-        </div>
-        <div className="flex-1 overflow-auto">{children}</div>
-      </div>
-    );
-  }
+  // Calculate Rnd props based on state
+  const rndProps = isMaximized ? {
+    position: { x: 0, y: 32 }, // 32px for TopBar offset
+    size: { width: '100%', height: 'calc(100vh - 32px)' },
+    disableDragging: true,
+    enableResizing: false
+  } : {
+    position: currentPosition,
+    size: currentSize,
+    disableDragging: false,
+    enableResizing: true
+  };
 
   return (
     <Rnd
-      default={{
-        x: currentPosition.x,
-        y: currentPosition.y,
-        width: typeof currentSize.width === 'number' ? currentSize.width : 800,
-        height: typeof currentSize.height === 'number' ? currentSize.height : 600,
-      }}
-      position={undefined}
-      size={undefined}
+      {...rndProps}
       minWidth={400}
       minHeight={300}
       bounds="parent"
       dragHandleClassName="window-drag-handle"
-      enableResizing={resizable}
+      enableResizing={!isMaximized && resizable}
+      disableDragging={isMaximized}
+      onDragStart={() => setIsDraggingOrResizing(true)}
       onDragStop={(e, d) => {
-        setCurrentPosition({ x: d.x, y: d.y });
+        setIsDraggingOrResizing(false);
+        if (!isMaximized) setCurrentPosition({ x: d.x, y: d.y });
       }}
+      onResizeStart={() => setIsDraggingOrResizing(true)}
       onResizeStop={(e, direction, ref, delta, position) => {
-        setCurrentSize({
-          width: ref.offsetWidth,
-          height: ref.offsetHeight,
-        });
-        setCurrentPosition(position);
+        setIsDraggingOrResizing(false);
+        if (!isMaximized) {
+          setCurrentSize({
+            width: ref.offsetWidth,
+            height: ref.offsetHeight,
+          });
+          setCurrentPosition(position);
+        }
       }}
-      className="pointer-events-auto"
+      className={`pointer-events-auto ${!isDraggingOrResizing ? 'transition-all duration-300 ease-in-out' : ''}`}
       style={{ zIndex: 50 }}
     >
       <div
-        className={`h-full macos-window flex flex-col ${className}`}
+        className={`h-full macos-window flex flex-col ${className} ${windowClass}`}
       >
         <div
           className={`window-drag-handle h-10 flex items-center px-4 space-x-4 border-b cursor-move ${headerClass} ${headerClassName}`}
+          onDoubleClick={handleMaximize}
         >
           <div className="flex space-x-2 group">
             <div className="traffic-light traffic-close" onClick={onClose} />

app/data/holidays.ts

@@ -0,0 +1,126 @@
+export interface Holiday {
+    id: string
+    title: string
+    date: string // MM-DD format for recurring, or YYYY-MM-DD for specific
+    type: 'religious' | 'national' | 'cultural' | 'personal' | 'other'
+    color: string
+}
+
+export const recurringHolidays: Holiday[] = [
+    // Fixed Date Holidays (MM-DD)
+    { id: 'new-year', title: "New Year's Day", date: '01-01', type: 'national', color: 'bg-blue-500' },
+    { id: 'epiphany', title: "Epiphany", date: '01-06', type: 'religious', color: 'bg-purple-500' },
+    { id: 'orth-xmas', title: "Orthodox Christmas", date: '01-07', type: 'religious', color: 'bg-purple-500' },
+    { id: 'mlk', title: "Martin Luther King Jr. Day", date: '01-20', type: 'national', color: 'bg-blue-500' }, // Approximate (3rd Mon) - simplifying for fixed list or need logic
+    { id: 'australia', title: "Australia Day", date: '01-26', type: 'national', color: 'bg-blue-500' },
+    { id: 'republic-india', title: "Republic Day (India)", date: '01-26', type: 'national', color: 'bg-orange-500' },
+
+    { id: 'valentines', title: "Valentine's Day", date: '02-14', type: 'cultural', color: 'bg-pink-500' },
+    { id: 'presidents', title: "Presidents' Day", date: '02-17', type: 'national', color: 'bg-blue-500' }, // Approximate
+
+    { id: 'womens', title: "Intl. Women's Day", date: '03-08', type: 'cultural', color: 'bg-pink-500' },
+    { id: 'st-patrick', title: "St. Patrick's Day", date: '03-17', type: 'cultural', color: 'bg-green-500' },
+    { id: 'nowruz', title: "Nowruz", date: '03-21', type: 'cultural', color: 'bg-green-500' },
+
+    { id: 'earth', title: "Earth Day", date: '04-22', type: 'cultural', color: 'bg-green-600' },
+    { id: 'anzac', title: "ANZAC Day", date: '04-25', type: 'national', color: 'bg-red-500' },
+
+    { id: 'labor', title: "Labor Day (Intl)", date: '05-01', type: 'national', color: 'bg-red-500' },
+    { id: 'cinco', title: "Cinco de Mayo", date: '05-05', type: 'cultural', color: 'bg-green-500' },
+    { id: 'victory-eu', title: "Victory Day (Europe)", date: '05-08', type: 'national', color: 'bg-blue-500' },
+
+    { id: 'juneteenth', title: "Juneteenth", date: '06-19', type: 'national', color: 'bg-blue-500' },
+    { id: 'yoga', title: "Intl. Day of Yoga", date: '06-21', type: 'cultural', color: 'bg-orange-500' },
+
+    { id: 'canada', title: "Canada Day", date: '07-01', type: 'national', color: 'bg-red-500' },
+    { id: 'us-indep', title: "Independence Day (USA)", date: '07-04', type: 'national', color: 'bg-blue-500' },
+    { id: 'bastille', title: "Bastille Day", date: '07-14', type: 'national', color: 'bg-blue-500' },
+
+    { id: 'indep-india', title: "Independence Day (India)", date: '08-15', type: 'national', color: 'bg-orange-500' },
+
+    { id: 'reuben-bday', title: "Reuben's Birthday", date: '09-16', type: 'personal', color: 'bg-gradient-to-r from-purple-500 to-pink-500' },
+
+    { id: 'german-unity', title: "German Unity Day", date: '10-03', type: 'national', color: 'bg-yellow-500' },
+    { id: 'halloween', title: "Halloween", date: '10-31', type: 'cultural', color: 'bg-orange-500' },
+
+    { id: 'saints', title: "All Saints' Day", date: '11-01', type: 'religious', color: 'bg-purple-500' },
+    { id: 'souls', title: "All Souls' Day", date: '11-02', type: 'religious', color: 'bg-purple-500' },
+    { id: 'remembrance', title: "Remembrance Day", date: '11-11', type: 'national', color: 'bg-red-500' },
+    { id: 'veterans', title: "Veterans Day", date: '11-11', type: 'national', color: 'bg-blue-500' },
+
+    { id: 'xmas', title: "Christmas Day", date: '12-25', type: 'religious', color: 'bg-green-600' },
+    { id: 'boxing', title: "Boxing Day", date: '12-26', type: 'cultural', color: 'bg-blue-500' },
+    { id: 'nye', title: "New Year's Eve", date: '12-31', type: 'cultural', color: 'bg-purple-500' },
+]
+
+// Function to generate variable date holidays (Easter, Diwali, Eid, etc.)
+// This is a simplified approximation for demonstration purposes
+export const getVariableHolidays = (year: number): Holiday[] => {
+    const holidays: Holiday[] = []
+
+    // Easter (Western) - Simplified algorithm
+    const a = year % 19
+    const b = Math.floor(year / 100)
+    const c = year % 100
+    const d = Math.floor(b / 4)
+    const e = b % 4
+    const f = Math.floor((b + 8) / 25)
+    const g = Math.floor((b - f + 1) / 3)
+    const h = (19 * a + b - d - g + 15) % 30
+    const i = Math.floor(c / 4)
+    const k = c % 4
+    const l = (32 + 2 * e + 2 * i - h - k) % 7
+    const m = Math.floor((a + 11 * h + 22 * l) / 451)
+    const month = Math.floor((h + l - 7 * m + 114) / 31)
+    const day = ((h + l - 7 * m + 114) % 31) + 1
+
+    const easterDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
+    holidays.push({ id: `easter-${year}`, title: "Easter Sunday", date: easterDate, type: 'religious', color: 'bg-purple-500' })
+
+    // Good Friday (2 days before Easter)
+    const gfDate = new Date(year, month - 1, day - 2)
+    holidays.push({
+        id: `good-friday-${year}`,
+        title: "Good Friday",
+        date: `${year}-${String(gfDate.getMonth() + 1).padStart(2, '0')}-${String(gfDate.getDate()).padStart(2, '0')}`,
+        type: 'religious',
+        color: 'bg-purple-500'
+    })
+
+    // Thanksgiving (USA) - 4th Thursday of November
+    const nov1 = new Date(year, 10, 1)
+    const dayOfWeek = nov1.getDay() // 0=Sun, 1=Mon...
+    const offset = (4 - dayOfWeek + 7) % 7 // Days to first Thursday
+    const thanksgivingDay = 1 + offset + 21 // 4th Thursday
+    holidays.push({
+        id: `thanksgiving-${year}`,
+        title: "Thanksgiving (USA)",
+        date: `${year}-11-${String(thanksgivingDay).padStart(2, '0')}`,
+        type: 'national',
+        color: 'bg-orange-600'
+    })
+
+    // Diwali (Approximation - usually Oct/Nov)
+    // Hardcoding for 2024-2026 for demo
+    if (year === 2024) holidays.push({ id: 'diwali-24', title: "Diwali", date: '2024-11-01', type: 'religious', color: 'bg-orange-500' })
+    if (year === 2025) holidays.push({ id: 'diwali-25', title: "Diwali", date: '2025-10-20', type: 'religious', color: 'bg-orange-500' })
+    if (year === 2026) holidays.push({ id: 'diwali-26', title: "Diwali", date: '2026-11-08', type: 'religious', color: 'bg-orange-500' })
+
+    // Eid al-Fitr (Approximation)
+    if (year === 2024) holidays.push({ id: 'eid-24', title: "Eid al-Fitr", date: '2024-04-10', type: 'religious', color: 'bg-green-600' })
+    if (year === 2025) holidays.push({ id: 'eid-25', title: "Eid al-Fitr", date: '2025-03-31', type: 'religious', color: 'bg-green-600' })
+
+    // Lunar New Year
+    if (year === 2024) holidays.push({ id: 'lny-24', title: "Lunar New Year", date: '2024-02-10', type: 'cultural', color: 'bg-red-600' })
+    if (year === 2025) holidays.push({ id: 'lny-25', title: "Lunar New Year", date: '2025-01-29', type: 'cultural', color: 'bg-red-600' })
+
+    // Other specific festivals mentioned in prompt/image
+    if (year === 2025) {
+        holidays.push({ id: 'chhath-25', title: "Chhath Puja", date: '2025-10-27', type: 'religious', color: 'bg-blue-400' })
+        holidays.push({ id: 'culture-jp-25', title: "Culture Day (Japan)", date: '2025-11-03', type: 'cultural', color: 'bg-blue-400' })
+        holidays.push({ id: 'guru-nanak-25', title: "Guru Nanak Jayanti", date: '2025-11-05', type: 'religious', color: 'bg-purple-400' })
+        holidays.push({ id: 'guru-tegh-25', title: "Guru Tegh Bahadur's Martyrdom Day", date: '2025-11-24', type: 'religious', color: 'bg-purple-400' })
+    }
+
+    return holidays
+}