Document

[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/mac/dock.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useCallback, useEffect } from "react" import { Code, Globe, ListTodo, Compass } from "lucide-react" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" interface DockProps { onOpenApp: (app: string) => void } export default function Dock({ onOpenApp }: DockProps) { const apps = [ { id: "code-editor", name: "Cursive", icon:
 },
    { id: "api-tester", name: "Postmate", icon:  },
    { id: "task-manager", name: "Asanica", icon:  },
    { id: "web-browser", name: "Rawr Browser", icon:  },
  ]

  const dockRef = useRef(null)
  const [mouseX, setMouseX] = useState(null)
  const lastMoveTime = useRef(0)
  const requestRef = useRef(null)

  // Use requestAnimationFrame for smooth animation without causing layout thrashing
  const updateMousePosition = useCallback((x: number | null) => {
    if (requestRef.current !== null) {
      cancelAnimationFrame(requestRef.current)
    }

    requestRef.current = requestAnimationFrame(() => {
      setMouseX(x)
      requestRef.current = null
    })
  }, [])

  // Heavily throttled mouse move handler
  const handleMouseMove = useCallback(
    (e: React.MouseEvent) => {
      const now = Date.now()
      // Throttle to 30fps (33ms)
      if (now - lastMoveTime.current < 33) return

      lastMoveTime.current = now

      if (dockRef.current) {
        const rect = dockRef.current.getBoundingClientRect()
        // Get mouse position relative to the dock
        updateMousePosition(e.clientX - rect.left)
      }
    },
    [updateMousePosition],
  )

  const handleMouseLeave = useCallback(() => {
    updateMousePosition(null)
  }, [updateMousePosition])

  // Simplified scale calculation
  const getScale = useCallback(
    (index: number): number => {
      if (mouseX === null || !dockRef.current) return 1

      const dockWidth = dockRef.current.getBoundingClientRect().width
      const totalItems = apps.length

      // Calculate the width of each item (approximate)
      const itemWidth = dockWidth / totalItems

      // Calculate the center position of the current item
      const itemCenter = itemWidth * (index + 0.5)

      // Calculate distance from mouse to item center
      const distance = Math.abs(mouseX - itemCenter)

      // Maximum distance for scaling effect
      const maxDistance = itemWidth * 1.5

      // Maximum scale factor - reduced from 1.8 to 1.3
      const maxScale = 1.3

      if (distance > maxDistance) {
        return 1 // No scaling if too far
      }

      // Calculate scale based on distance (closer = larger)
      return 1 + (maxScale - 1) * (1 - distance / maxDistance)
    },
    [mouseX, apps.length],
  )

  // Clean up requestAnimationFrame on unmount
  useEffect(() => {
    return () => {
      if (requestRef.current !== null) {
        cancelAnimationFrame(requestRef.current)
      }
    }
  }, [])

  return (
    
      
        
          {apps.map((app, index) => (
            
              
                
              
              
                {app.name}
              
            
          ))}
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/apps/code-editor.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import dynamic from "next/dynamic"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Save, FolderOpen, Play, Plus } from "lucide-react"

// Dynamically import Monaco Editor to avoid SSR issues
const MonacoEditor = dynamic(() => import("@monaco-editor/react"), {
  ssr: false,
  loading: () => Loading editor...,
})

interface File {
  id: string
  name: string
  language: string
  content: string
}

// Default files to initialize the editor with
const DEFAULT_FILES: File[] = [
  {
    id: "file-1",
    name: "index.js",
    language: "javascript",
    content: '// Welcome to the Code Editor\n\nfunction greet() {\n  console.log("Hello, world!");\n}\n\ngreet();',
  },
  {
    id: "file-2",
    name: "styles.css",
    language: "css",
    content:
      "body {\n  display: flex;\n  justify-content: center;\n  font-family: sans-serif;\n  margin: 0;\n  width: full;\n  height: full;\n  color: #000000;\n}\n",
  },
  {
    id: "file-3",
    name: "index.html",
    language: "html",
    content: `


  
  
  Document
  







  DeDevs Online Community






  
    What is DeDevs?
  
   
    
      • Community for Blockchain and AI enthusiasts.
      • Learning Hub with quickstarts and resources.
      • Build in Public with our developer community.
      • Join Us and grow your network.
    
  



  
    DeDevs is where...
  
  
    
      • Innovators collaborate on cutting-edge projects.
      • Experts share valuable insights and resources.
      • Newcomers gain hands-on experience.
    
  



  
    Why join DeDevs?
  
  
    
      • Resources for blockchain and AI development.
      • Projects to gain real-world experience.
      • Workshops on cutting-edge technologies.
    
  






  




`,
  },
]

export default function CodeEditor() {
  // Initialize with default files
  const [files, setFiles] = useState(DEFAULT_FILES)
  const [activeFileId, setActiveFileId] = useState(DEFAULT_FILES[0].id)
  const [theme, setTheme] = useState("vs-dark")
  const [previewWindow, setPreviewWindow] = useState(null)

  // Find the active file or default to the first file
  const activeFile = files.find((file) => file.id === activeFileId) || files[0]

  // Ensure we have an active file selected
  useEffect(() => {
    if (files.length > 0 && !files.find((f) => f.id === activeFileId)) {
      setActiveFileId(files[0].id)
    }
  }, [files, activeFileId])

  const handleEditorChange = (value: string | undefined) => {
    if (value === undefined) return

    setFiles((prev) => prev.map((file) => (file.id === activeFileId ? { ...file, content: value } : file)))
  }

  const addNewFile = () => {
    const newFile: File = {
      id: `file-${Date.now()}`,
      name: `file-${files.length + 1}.js`,
      language: "javascript",
      content: "// New file",
    }
    setFiles((prev) => [...prev, newFile])
    setActiveFileId(newFile.id)
  }

  const getLanguageFromFileName = (fileName: string): string => {
    const extension = fileName.split(".").pop()?.toLowerCase() || ""

    switch (extension) {
      case "js":
        return "javascript"
      case "ts":
        return "typescript"
      case "jsx":
        return "javascript"
      case "tsx":
        return "typescript"
      case "css":
        return "css"
      case "html":
        return "html"
      case "json":
        return "json"
      case "md":
        return "markdown"
      default:
        return "javascript"
    }
  }

  const handleFileNameChange = (id: string, newName: string) => {
    setFiles((prev) =>
      prev.map((file) =>
        file.id === id ? { ...file, name: newName, language: getLanguageFromFileName(newName) } : file,
      ),
    )
  }

  const handleRunCode = () => {
    // Close any existing preview window
    if (previewWindow && !previewWindow.closed) {
      previewWindow.close()
    }

    // Generate the preview content
    const previewContent = generatePreviewContent()

    // Open a new window
    const newWindow = window.open("", "CodePreview", "width=800,height=600")

    if (newWindow) {
      // Write the content to the new window
      newWindow.document.open()
      newWindow.document.write(previewContent)
      newWindow.document.close()

      // Store reference to the window
      setPreviewWindow(newWindow)

      // Set up event listener to update our state when the window is closed
      newWindow.addEventListener("beforeunload", () => {
        setPreviewWindow(null)
      })
    }
  }

  const generatePreviewContent = () => {
    // Find HTML, CSS, and JS files
    const htmlFile = files.find((file) => file.language === "html")
    const cssFiles = files.filter((file) => file.language === "css")
    const jsFiles = files.filter((file) => file.language === "javascript")

    // If no HTML file is found, create a basic one
    let htmlContent =
      htmlFile?.content ||
      'Preview'

    // Insert CSS into the HTML
    let styleContent = ""
    cssFiles.forEach((file) => {
      styleContent += ``
    })

    // Insert JS into the HTML
    let scriptContent = ""
    jsFiles.forEach((file) => {
      scriptContent += ``
    })

    // Insert CSS and JS into HTML
    htmlContent = htmlContent.replace("", `${styleContent}`)
    htmlContent = htmlContent.replace("", `${scriptContent}`)

    return htmlContent
  }

  // Close preview window when component unmounts
  useEffect(() => {
    return () => {
      if (previewWindow && !previewWindow.closed) {
        previewWindow.close()
      }
    }
  }, [previewWindow])

  return (
    
      
        
          
          
          
          
        
        
      

      
        
          Files ({files.length})
          {files.length === 0 ? (
            No files. Click + to add a file.
          ) : (
            
              {files.map((file) => (
                
                  
                
              ))}
            
          )}
        

        
          {files.length === 0 ? (
            
              No files to display. Click the + button to add a file.
            
          ) : (
            
              
                {files.map((file) => (
                  
                    {file.name}
                  
                ))}
              
              
                {activeFile && (
                  Loading editor...}
                  />
                )}
              
            
          )}
        
      
    
  )
}
[V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")

const Label = React.forwardRef<
  React.ElementRef,
  React.ComponentPropsWithoutRef & VariantProps
>(({ className, ...props }, ref) => (
  
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescript:file="lib/kv.ts" isMerged="true"
import { kv } from "@vercel/kv"

// Key prefixes for different data types
const COLUMNS_KEY = "task-columns"
const TASKS_KEY = "tasks"

export interface Task {
  id: string
  title: string
  description: string
  priority: "low" | "medium" | "high"
  assignee: string
  dueDate: string
  columnId: string
  createdAt: number
}

export interface Column {
  id: string
  title: string
  order: number
}

// Column operations
export async function getColumns(): Promise {
  try {
    const columns = await kv.get(COLUMNS_KEY)
    return columns || defaultColumns
  } catch (error) {
    console.error("Error fetching columns:", error)
    return defaultColumns
  }
}

export async function saveColumns(columns: Column[]): Promise {
  try {
    await kv.set(COLUMNS_KEY, columns)
  } catch (error) {
    console.error("Error saving columns:", error)
    throw new Error("Failed to save columns")
  }
}

// Task operations
export async function getTasks(): Promise {
  try {
    const tasks = await kv.get(TASKS_KEY)
    return tasks || []
  } catch (error) {
    console.error("Error fetching tasks:", error)
    return []
  }
}

export async function saveTasks(tasks: Task[]): Promise {
  try {
    await kv.set(TASKS_KEY, tasks)
  } catch (error) {
    console.error("Error saving tasks:", error)
    throw new Error("Failed to save tasks")
  }
}

export async function getTasksByColumn(columnId: string): Promise {
  try {
    const allTasks = await getTasks()
    return allTasks.filter((task) => task.columnId === columnId)
  } catch (error) {
    console.error(`Error fetching tasks for column ${columnId}:`, error)
    return []
  }
}

export async function addTask(task: Omit): Promise {
  try {
    const allTasks = await getTasks()
    const newTask: Task = {
      ...task,
      id: `task-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
      createdAt: Date.now(),
    }

    await saveTasks([...allTasks, newTask])
    return newTask
  } catch (error) {
    console.error("Error adding task:", error)
    throw new Error("Failed to add task")
  }
}

export async function updateTask(taskId: string, updates: Partial>): Promise {
  try {
    const allTasks = await getTasks()
    const taskIndex = allTasks.findIndex((t) => t.id === taskId)

    if (taskIndex === -1) {
      throw new Error(`Task with ID ${taskId} not found`)
    }

    const updatedTask = {
      ...allTasks[taskIndex],
      ...updates,
    }

    allTasks[taskIndex] = updatedTask
    await saveTasks(allTasks)

    return updatedTask
  } catch (error) {
    console.error(`Error updating task ${taskId}:`, error)
    throw new Error("Failed to update task")
  }
}

export async function deleteTask(taskId: string): Promise {
  try {
    const allTasks = await getTasks()
    const filteredTasks = allTasks.filter((t) => t.id !== taskId)

    if (filteredTasks.length === allTasks.length) {
      throw new Error(`Task with ID ${taskId} not found`)
    }

    await saveTasks(filteredTasks)
  } catch (error) {
    console.error(`Error deleting task ${taskId}:`, error)
    throw new Error("Failed to delete task")
  }
}

export async function moveTask(taskId: string, toColumnId: string, newIndex: number): Promise {
  try {
    const allTasks = await getTasks()
    const taskIndex = allTasks.findIndex((t) => t.id === taskId)

    if (taskIndex === -1) {
      throw new Error(`Task with ID ${taskId} not found`)
    }

    const task = allTasks[taskIndex]
    const fromColumnId = task.columnId

    // Remove task from its current position
    allTasks.splice(taskIndex, 1)

    // Update the task's column
    task.columnId = toColumnId

    // Find all tasks in the destination column
    const columnTasks = allTasks.filter((t) => t.columnId === toColumnId)

    // Insert the task at the new position in the destination column
    if (newIndex >= columnTasks.length) {
      allTasks.push(task)
    } else {
      const insertIndex = allTasks.findIndex((t) => t.columnId === toColumnId && t.id === columnTasks[newIndex]?.id)
      if (insertIndex !== -1) {
        allTasks.splice(insertIndex, 0, task)
      } else {
        allTasks.push(task)
      }
    }

    await saveTasks(allTasks)
  } catch (error) {
    console.error(`Error moving task ${taskId}:`, error)
    throw new Error("Failed to move task")
  }
}

// Default data for initial setup
const defaultColumns: Column[] = [
  {
    id: "todo",
    title: "To Do",
    order: 0,
  },
  {
    id: "in-progress",
    title: "In Progress",
    order: 1,
  },
  {
    id: "done",
    title: "Done",
    order: 2,
  },
]

// Initialize the database with default data if empty
export async function initializeDatabase(): Promise {
  try {
    const existingColumns = await kv.get(COLUMNS_KEY)
    const existingTasks = await kv.get(TASKS_KEY)

    if (!existingColumns) {
      await saveColumns(defaultColumns)
    }

    if (!existingTasks) {
      const defaultTasks: Task[] = [
        {
          id: "1",
          title: "Create API documentation",
          description: "Document all API endpoints with examples",
          priority: "high",
          assignee: "John Doe",
          dueDate: "2023-12-15",
          columnId: "todo",
          createdAt: Date.now(),
        },
        {
          id: "2",
          title: "Fix login bug",
          description: "Users are unable to login with Google account",
          priority: "medium",
          assignee: "Jane Smith",
          dueDate: "2023-12-10",
          columnId: "todo",
          createdAt: Date.now(),
        },
        {
          id: "3",
          title: "Implement dark mode",
          description: "Add dark mode toggle and styles",
          priority: "low",
          assignee: "John Doe",
          dueDate: "2023-12-20",
          columnId: "in-progress",
          createdAt: Date.now(),
        },
        {
          id: "4",
          title: "Setup CI/CD pipeline",
          description: "Configure GitHub Actions for automated testing and deployment",
          priority: "high",
          assignee: "Jane Smith",
          dueDate: "2023-12-05",
          columnId: "done",
          createdAt: Date.now(),
        },
      ]

      await saveTasks(defaultTasks)
    }
  } catch (error) {
    console.error("Error initializing database:", error)
  }
}
[V0_FILE]typescript:file="app/actions/task-actions.ts" isMerged="true"
"use server"

import {
  getColumns,
  getTasks,
  getTasksByColumn,
  addTask,
  updateTask,
  deleteTask,
  moveTask,
  initializeDatabase,
  type Task,
} from "@/lib/kv"

// Initialize the database
export async function initialize() {
  await initializeDatabase()
  return {
    success: true,
  }
}

// Get all columns
export async function fetchColumns() {
  try {
    const columns = await getColumns()
    return {
      success: true,
      data: columns,
    }
  } catch (error) {
    console.error("Error fetching columns:", error)
    return {
      success: false,
      error: "Failed to fetch columns",
    }
  }
}

// Get all tasks
export async function fetchTasks() {
  try {
    const tasks = await getTasks()
    return {
      success: true,
      data: tasks,
    }
  } catch (error) {
    console.error("Error fetching tasks:", error)
    return {
      success: false,
      error: "Failed to fetch tasks",
    }
  }
}

// Get tasks by column
export async function fetchTasksByColumn(columnId: string) {
  try {
    const tasks = await getTasksByColumn(columnId)
    return {
      success: true,
      data: tasks,
    }
  } catch (error) {
    console.error(`Error fetching tasks for column ${columnId}:`, error)
    return {
      success: false,
      error: `Failed to fetch tasks for column ${columnId}`,
    }
  }
}

// Create a new task
export async function createTask(task: Omit) {
  try {
    const newTask = await addTask(task)
    return {
      success: true,
      data: newTask,
    }
  } catch (error) {
    console.error("Error creating task:", error)
    return {
      success: false,
      error: "Failed to create task",
    }
  }
}

// Update an existing task
export async function updateTaskAction(taskId: string, updates: Partial>) {
  try {
    const updatedTask = await updateTask(taskId, updates)
    return {
      success: true,
      data: updatedTask,
    }
  } catch (error) {
    console.error(`Error updating task ${taskId}:`, error)
    return {
      success: false,
      error: "Failed to update task",
    }
  }
}

// Delete a task
export async function deleteTaskAction(taskId: string) {
  try {
    await deleteTask(taskId)
    return {
      success: true,
    }
  } catch (error) {
    console.error(`Error deleting task ${taskId}:`, error)
    return {
      success: false,
      error: "Failed to delete task",
    }
  }
}

// Move a task between columns
export async function moveTaskAction(taskId: string, toColumnId: string, newIndex: number) {
  try {
    await moveTask(taskId, toColumnId, newIndex)
    return {
      success: true,
    }
  } catch (error) {
    console.error(`Error moving task ${taskId}:`, error)
    return {
      success: false,
      error: "Failed to move task",
    }
  }
}

// Handle drag and drop
export async function handleDragEnd(result: {
  source: { droppableId: string; index: number }
  destination?: { droppableId: string; index: number }
  draggableId: string
}) {
  try {
    const { source, destination, draggableId } = result

    // Dropped outside the list or same position
    if (!destination || (source.droppableId === destination.droppableId && source.index === destination.index)) {
      return {
        success: true,
        noChange: true,
      }
    }

    await moveTask(draggableId, destination.droppableId, destination.index)

    return {
      success: true,
    }
  } catch (error) {
    console.error("Error handling drag and drop:", error)
    return {
      success: false,
      error: "Failed to move task",
    }
  }
}
[V0_FILE]typescript:file="hooks/use-toast.tsx" isMerged="true"
"use client"

import { useState, useCallback } from "react"
import {
  Toast,
  ToastAction,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from "@/components/ui/toast"

type ToastProps = {
  title?: string
  description?: string
  action?: {
    label: string
    onClick: () => void
  }
  variant?: "default" | "destructive"
  duration?: number
}

export function useToast() {
  const [toasts, setToasts] = useState<(ToastProps & { id: string })[]>([])

  const toast = useCallback(({ title, description, action, variant = "default", duration = 5000 }: ToastProps) => {
    const id = Math.random().toString(36).substring(2, 9)

    setToasts((prev) => [...prev, { id, title, description, action, variant, duration }])

    setTimeout(() => {
      setToasts((prev) => prev.filter((toast) => toast.id !== id))
    }, duration)

    return id
  }, [])

  const dismiss = useCallback((id: string) => {
    setToasts((prev) => prev.filter((toast) => toast.id !== id))
  }, [])

  const Toaster = () => (
    
      {toasts.map(({ id, title, description, action, variant }) => (
         dismiss(id)}>
          {title && {title}}
          {description && {description}}
          {action && (
            
              {action.label}
            
          )}
          
        
      ))}
      
    
  )

  return { toast, dismiss, Toaster }
}
[V0_FILE]typescriptreact:file="components/apps/web-browser.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import {
  ArrowLeft,
  ArrowRight,
  RefreshCw,
  Home,
  Plus,
  X,
  Bookmark,
  History,
  Star,
  Loader2,
  Globe,
  Search,
} from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { useToast } from "@/hooks/use-toast"
import { kv } from "@vercel/kv"

interface Tab {
  id: string
  url: string
  title: string
  favicon: string
  isLoading: boolean
  error: string | null
}

interface BrowserBookmark {
  id: string
  url: string
  title: string
  favicon: string
  createdAt: number
}

interface HistoryItem {
  id: string
  url: string
  title: string
  visitedAt: number
}

const DEFAULT_URL = "https://dedevs.club"
const HOME_URL = "https://dedevs.club"

export default function WebBrowser() {
  const [tabs, setTabs] = useState([
    {
      id: "tab-1",
      url: DEFAULT_URL,
      title: "New Tab",
      favicon: "https://dedevs.club/favicon.ico",
      isLoading: true,
      error: null,
    },
  ])
  const [activeTabId, setActiveTabId] = useState("tab-1")
  const [bookmarks, setBookmarks] = useState([])
  const [history, setHistory] = useState([])
  const [showBookmarks, setShowBookmarks] = useState(false)
  const [showHistory, setShowHistory] = useState(false)
  const [inputUrl, setInputUrl] = useState(DEFAULT_URL)
  const iframeRefs = useRef<{ [key: string]: HTMLIFrameElement | null }>({})
  const { toast } = useToast()

  // Get the active tab
  const activeTab = tabs.find((tab) => tab.id === activeTabId) || tabs[0]

  // Load bookmarks and history from KV store
  useEffect(() => {
    const loadData = async () => {
      try {
        const storedBookmarks = await kv.get("browser-bookmarks")
        if (storedBookmarks) {
          setBookmarks(storedBookmarks)
        }

        const storedHistory = await kv.get("browser-history")
        if (storedHistory) {
          setHistory(storedHistory)
        }
      } catch (error) {
        console.error("Error loading browser data:", error)
      }
    }

    loadData()
  }, [])

  // Save bookmarks to KV store
  useEffect(() => {
    const saveBookmarks = async () => {
      if (bookmarks.length > 0) {
        try {
          await kv.set("browser-bookmarks", bookmarks)
        } catch (error) {
          console.error("Error saving bookmarks:", error)
        }
      }
    }

    saveBookmarks()
  }, [bookmarks])

  // Save history to KV store
  useEffect(() => {
    const saveHistory = async () => {
      if (history.length > 0) {
        try {
          await kv.set("browser-history", history)
        } catch (error) {
          console.error("Error saving history:", error)
        }
      }
    }

    saveHistory()
  }, [history])

  // Handle iframe load events
  const handleIframeLoad = (tabId: string) => {
    try {
      const iframe = iframeRefs.current[tabId]
      if (!iframe) return

      // Update tab information
      setTabs((prevTabs) =>
        prevTabs.map((tab) => {
          if (tab.id === tabId) {
            let title = "New Tab"
            try {
              // This might fail due to cross-origin restrictions
              if (iframe.contentDocument?.title) {
                title = iframe.contentDocument.title
              }
            } catch (e) {
              // If we can't access the title, use the URL as title
              const url = new URL(tab.url)
              title = url.hostname
            }

            return {
              ...tab,
              title: title || tab.url,
              isLoading: false,
              error: null,
            }
          }
          return tab
        }),
      )

      // Add to history
      const currentTab = tabs.find((tab) => tab.id === tabId)
      if (currentTab && !currentTab.isLoading) {
        addToHistory(currentTab.url, currentTab.title)
      }
    } catch (error) {
      console.error("Error handling iframe load:", error)
    }
  }

  // Handle iframe error
  const handleIframeError = (tabId: string) => {
    setTabs((prevTabs) =>
      prevTabs.map((tab) => {
        if (tab.id === tabId) {
          return {
            ...tab,
            isLoading: false,
            error: "Failed to load page. The website might be unavailable or have security restrictions.",
          }
        }
        return tab
      }),
    )
  }

  // Navigate to a URL
  const navigateTo = (url: string, tabId: string = activeTabId) => {
    // Add protocol if missing
    let processedUrl = url
    if (!url.startsWith("http://") && !url.startsWith("https://")) {
      // Check if it's a search query or a URL
      if (url.includes(".") && !url.includes(" ")) {
        processedUrl = `https://${url}`
      } else {
        // Treat as a search query
        processedUrl = `https://www.google.com/search?q=${encodeURIComponent(url)}`
      }
    }

    setTabs((prevTabs) =>
      prevTabs.map((tab) => {
        if (tab.id === tabId) {
          return {
            ...tab,
            url: processedUrl,
            isLoading: true,
            error: null,
          }
        }
        return tab
      }),
    )

    setInputUrl(processedUrl)
  }

  // Add a new tab
  const addTab = () => {
    const newTabId = `tab-${Date.now()}`
    setTabs([
      ...tabs,
      {
        id: newTabId,
        url: DEFAULT_URL,
        title: "New Tab",
        favicon: "",
        isLoading: true,
        error: null,
      },
    ])
    setActiveTabId(newTabId)
    setInputUrl(DEFAULT_URL)
  }

  // Close a tab
  const closeTab = (tabId: string, event?: React.MouseEvent) => {
    if (event) {
      event.stopPropagation()
    }

    if (tabs.length === 1) {
      // If it's the last tab, create a new one instead of closing
      setTabs([
        {
          id: `tab-${Date.now()}`,
          url: DEFAULT_URL,
          title: "New Tab",
          favicon: "",
          isLoading: true,
          error: null,
        },
      ])
      setActiveTabId(`tab-${Date.now()}`)
      setInputUrl(DEFAULT_URL)
      return
    }

    const newTabs = tabs.filter((tab) => tab.id !== tabId)
    setTabs(newTabs)

    // If the active tab is being closed, activate another tab
    if (activeTabId === tabId) {
      const index = tabs.findIndex((tab) => tab.id === tabId)
      const newActiveIndex = index === 0 ? 0 : index - 1
      setActiveTabId(newTabs[newActiveIndex].id)
      setInputUrl(newTabs[newActiveIndex].url)
    }
  }

  // Go back in browser history
  const goBack = () => {
    const iframe = iframeRefs.current[activeTabId]
    if (iframe) {
      try {
        iframe.contentWindow?.history.back()
      } catch (e) {
        toast({
          title: "Navigation Error",
          description: "Cannot navigate back due to security restrictions",
          variant: "destructive",
        })
      }
    }
  }

  // Go forward in browser history
  const goForward = () => {
    const iframe = iframeRefs.current[activeTabId]
    if (iframe) {
      try {
        iframe.contentWindow?.history.forward()
      } catch (e) {
        toast({
          title: "Navigation Error",
          description: "Cannot navigate forward due to security restrictions",
          variant: "destructive",
        })
      }
    }
  }

  // Refresh the current page
  const refresh = () => {
    const tab = tabs.find((tab) => tab.id === activeTabId)
    if (tab) {
      navigateTo(tab.url)
    }
  }

  // Go to home page
  const goHome = () => {
    navigateTo(HOME_URL)
  }

  // Add current page to bookmarks
  const addBookmark = () => {
    const tab = tabs.find((tab) => tab.id === activeTabId)
    if (tab) {
      const existingBookmark = bookmarks.find((bookmark) => bookmark.url === tab.url)
      if (existingBookmark) {
        toast({
          title: "Already Bookmarked",
          description: "This page is already in your bookmarks",
        })
        return
      }

      const newBookmark: BrowserBookmark = {
        id: `bookmark-${Date.now()}`,
        url: tab.url,
        title: tab.title,
        favicon: tab.favicon,
        createdAt: Date.now(),
      }

      setBookmarks([...bookmarks, newBookmark])
      toast({
        title: "Bookmark Added",
        description: `"${tab.title}" has been added to your bookmarks`,
      })
    }
  }

  // Remove a bookmark
  const removeBookmark = (id: string, event?: React.MouseEvent) => {
    if (event) {
      event.stopPropagation()
    }
    setBookmarks(bookmarks.filter((bookmark) => bookmark.id !== id))
  }

  // Add to browsing history
  const addToHistory = (url: string, title: string) => {
    const newHistoryItem: HistoryItem = {
      id: `history-${Date.now()}`,
      url,
      title,
      visitedAt: Date.now(),
    }

    // Add to the beginning of history array
    setHistory((prevHistory) => [newHistoryItem, ...prevHistory.slice(0, 99)])
  }

  // Clear browsing history
  const clearHistory = () => {
    setHistory([])
    toast({
      title: "History Cleared",
      description: "Your browsing history has been cleared",
    })
  }

  // Handle URL input submission
  const handleUrlSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    navigateTo(inputUrl)
  }

  // Format URL for display
  const formatUrl = (url: string) => {
    try {
      const urlObj = new URL(url)
      return urlObj.hostname + urlObj.pathname
    } catch (e) {
      return url
    }
  }

  // Format date for history display
  const formatDate = (timestamp: number) => {
    const date = new Date(timestamp)
    return date.toLocaleDateString() + " " + date.toLocaleTimeString()
  }

  return (
    
      {/* Browser toolbar */}
      
        
          
          
          
          
        

        
          
            
              {activeTab.isLoading ? (
                
              ) : (
                
              )}
            
             setInputUrl(e.target.value)}
              className="pl-8 pr-4 h-8 bg-[#e9e9eb] dark:bg-[#3c3c3c] border-none"
              placeholder="Search or enter website name"
            />
            
              
            
          
        

        
          
          
            
              
            
            
              
                History
                
              
              {history.length === 0 ? (
                No history yet
              ) : (
                history.map((item) => (
                   navigateTo(item.url)}
                    className="flex flex-col items-start p-2"
                  >
                    {item.title}
                    {formatUrl(item.url)}
                    {formatDate(item.visitedAt)}
                  
                ))
              )}
            
          
        
      

      {/* Tabs bar */}
      
        
          
            {tabs.map((tab) => (
               {
                  setActiveTabId(tab.id)
                  setInputUrl(tab.url)
                }}
              >
                {tab.isLoading ? (
                  
                ) : tab.favicon ? (
                  
                ) : (
                  
                )}
                {tab.title}
                
              
            ))}
          
          
        

        {/* Bookmarks bar */}
        {showBookmarks && (
          
            {bookmarks.length === 0 ? (
              No bookmarks yet
            ) : (
              bookmarks.map((bookmark) => (
                 navigateTo(bookmark.url)}
                >
                  {bookmark.favicon ? (
                    
                  ) : (
                    
                  )}
                  {bookmark.title}
                  
                
              ))
            )}
          
        )}

        {/* Tab content */}
        
          {tabs.map((tab) => (
            
              {tab.error ? (
                
                  
                    
                  
                  Page Load Error
                  {tab.error}
                  
                
              ) : (
                 (iframeRefs.current[tab.id] = el)}
                  src={tab.url}
                  className="w-full h-full border-none"
                  onLoad={() => handleIframeLoad(tab.id)}
                  onError={() => handleIframeError(tab.id)}
                  sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
                  title={tab.title}
                />
              )}
            </TabsContent>
          ))}
        </div>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/api-tester.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent } from "@/components/ui/card"
import { Send, Save, Plus, Trash2, Download } from "lucide-react"

interface RequestHeader {
  id: string
  key: string
  value: string
}

interface SavedRequest {
  id: string
  name: string
  url: string
  method: string
  headers: RequestHeader[]
  body: string
}

export default function ApiTester() {
  const [url, setUrl] = useState<string>("https://jsonplaceholder.typicode.com/posts/1")
  const [method, setMethod] = useState<string>("GET")
  const [headers, setHeaders] = useState<RequestHeader[]>([{ id: "1", key: "Content-Type", value: "application/json" }])
  const [body, setBody] = useState<string>("")
  const [response, setResponse] = useState<{
    status: number | null
    time: number | null
    data: string
    isJson: boolean
  }>({
    status: null,
    time: null,
    data: "",
    isJson: false,
  })
  const [savedRequests, setSavedRequests] = useState<SavedRequest[]>([
    {
      id: "1",
      name: "Get Post",
      url: "https://jsonplaceholder.typicode.com/posts/1",
      method: "GET",
      headers: [{ id: "1", key: "Content-Type", value: "application/json" }],
      body: "",
    },
    {
      id: "2",
      name: "Create Post",
      url: "https://jsonplaceholder.typicode.com/posts",
      method: "POST",
      headers: [{ id: "1", key: "Content-Type", value: "application/json" }],
      body: JSON.stringify({ title: "foo", body: "bar", userId: 1 }, null, 2),
    },
  ])
  const [activeTab, setActiveTab] = useState<string>("request")
  const [requestName, setRequestName] = useState<string>("")

  const addHeader = () => {
    setHeaders([...headers, { id: Date.now().toString(), key: "", value: "" }])
  }

  const updateHeader = (id: string, field: "key" | "value", value: string) => {
    setHeaders(headers.map((header) => (header.id === id ? { ...header, [field]: value } : header)))
  }

  const removeHeader = (id: string) => {
    setHeaders(headers.filter((header) => header.id !== id))
  }

  const handleSendRequest = async () => {
    try {
      setResponse({
        status: null,
        time: null,
        data: "Loading...",
        isJson: false,
      })

      const startTime = Date.now()

      const requestOptions: RequestInit = {
        method,
        headers: headers.reduce(
          (acc, { key, value }) => {
            if (key.trim() && value.trim()) {
              acc[key] = value
            }
            return acc
          },
          {} as Record<string, string>,
        ),
      }

      if (method !== "GET" && method !== "HEAD" && body.trim()) {
        requestOptions.body = body
      }

      const response = await fetch(url, requestOptions)
      const endTime = Date.now()

      const responseData = await response.text()

      // Check if response is valid JSON
      let isJson = false
      try {
        if (responseData && (responseData.trim().startsWith("{") || responseData.trim().startsWith("["))) {
          JSON.parse(responseData)
          isJson = true
        }
      } catch (e) {
        isJson = false
      }

      setResponse({
        status: response.status,
        time: endTime - startTime,
        data: responseData,
        isJson,
      })

      setActiveTab("response")
    } catch (error) {
      setResponse({
        status: 0,
        time: 0,
        data: `Error: ${error instanceof Error ? error.message : String(error)}`,
        isJson: false,
      })
      setActiveTab("response")
    }
  }

  const saveRequest = () => {
    if (!requestName.trim()) return

    const newRequest: SavedRequest = {
      id: Date.now().toString(),
      name: requestName,
      url,
      method,
      headers,
      body,
    }

    setSavedRequests([...savedRequests, newRequest])
    setRequestName("")
  }

  const loadRequest = (request: SavedRequest) => {
    setUrl(request.url)
    setMethod(request.method)
    setHeaders(request.headers)
    setBody(request.body)
  }

  const deleteRequest = (id: string) => {
    setSavedRequests(savedRequests.filter((req) => req.id !== id))
  }

  const formatResponseData = (data: string) => {
    // Try to parse as JSON
    try {
      // Check if the data looks like JSON
      if (data && (data.trim().startsWith("{") || data.trim().startsWith("["))) {
        const parsedData = JSON.parse(data)
        return JSON.stringify(parsedData, null, 2)
      }
    } catch (e) {
      // Not valid JSON, return as is
    }
    return data
  }

  const exportResponse = () => {
    try {
      if (!response.data || !response.isJson) return

      // Format the JSON data
      const formattedData = JSON.stringify(JSON.parse(response.data), null, 2)

      // Create a blob with the data
      const blob = new Blob([formattedData], { type: "application/json" })

      // Create a URL for the blob
      const blobUrl = URL.createObjectURL(blob)

      // Create a temporary anchor element
      const a = document.createElement("a")
      a.href = blobUrl

      // Generate a filename based on the URL or use a default
      let filename = "response"
      try {
        // Try to extract a meaningful name from the URL
        const urlObj = new URL(url)
        const pathParts = urlObj.pathname.split("/").filter(Boolean)
        if (pathParts.length > 0) {
          filename = pathParts[pathParts.length - 1]
        } else {
          filename = urlObj.hostname
        }
      } catch (e) {
        // If URL parsing fails, use a generic name
        filename = "api-response"
      }

      a.download = `${filename}-${new Date().toISOString().slice(0, 10)}.json`

      // Trigger the download
      document.body.appendChild(a)
      a.click()

      // Clean up
      document.body.removeChild(a)
      URL.revokeObjectURL(blobUrl)
    } catch (error) {
      console.error("Error exporting response:", error)
    }
  }

  return (
    <div className="flex h-full">
      <div className="w-64 border-r border-[#3c3c3c] bg-[#1e1e1e] p-4">
        <h3 className="mb-4 text-sm font-semibold text-gray-300">Saved Requests</h3>
        <div className="mb-4">
          <Input
            placeholder="Request name"
            value={requestName}
            onChange={(e) => setRequestName(e.target.value)}
            className="mb-2"
          />
          <Button size="sm" onClick={saveRequest} className="w-full">
            <Save size={14} className="mr-2" /> Save Current
          </Button>
        </div>
        <div className="space-y-2">
          {savedRequests.map((req) => (
            <div key={req.id} className="flex items-center justify-between rounded bg-[#252525] p-2">
              <div className="flex-1 truncate">
                <div className="text-sm font-medium">{req.name}</div>
                <div className="text-xs text-gray-400">{req.method}</div>
              </div>
              <div className="flex space-x-1">
                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => loadRequest(req)}>
                  <Send size={14} />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-6 w-6 text-red-500"
                  onClick={() => deleteRequest(req.id)}
                >
                  <Trash2 size={14} />
                </Button>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="flex-1 overflow-hidden">
        <div className="flex items-center space-x-2 border-b border-[#3c3c3c] bg-[#252525] p-2">
          <Select value={method} onValueChange={setMethod}>
            <SelectTrigger className="w-24">
              <SelectValue placeholder="Method" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="GET">GET</SelectItem>
              <SelectItem value="POST">POST</SelectItem>
              <SelectItem value="PUT">PUT</SelectItem>
              <SelectItem value="DELETE">DELETE</SelectItem>
              <SelectItem value="PATCH">PATCH</SelectItem>
            </SelectContent>
          </Select>

          <Input
            placeholder="Enter request URL"
            value={url}
            onChange={(e) => setUrl(e.target.value)}
            className="flex-1"
          />

          <Button onClick={handleSendRequest}>
            <Send size={16} className="mr-2" /> Send
          </Button>
        </div>

        <Tabs value={activeTab} onValueChange={setActiveTab} className="h-[calc(100%-3rem)]">
          <TabsList className="bg-[#252525]">
            <TabsTrigger value="request">Request</TabsTrigger>
            <TabsTrigger value="response">Response</TabsTrigger>
          </TabsList>

          <TabsContent value="request" className="h-[calc(100%-2.25rem)] overflow-auto p-4">
            <div className="space-y-4">
              <div>
                <h3 className="mb-2 text-sm font-semibold">Headers</h3>
                <Card>
                  <CardContent className="p-4">
                    {headers.map((header) => (
                      <div key={header.id} className="mb-2 flex items-center space-x-2">
                        <Input
                          placeholder="Key"
                          value={header.key}
                          onChange={(e) => updateHeader(header.id, "key", e.target.value)}
                          className="flex-1"
                        />
                        <Input
                          placeholder="Value"
                          value={header.value}
                          onChange={(e) => updateHeader(header.id, "value", e.target.value)}
                          className="flex-1"
                        />
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => removeHeader(header.id)}
                          className="h-8 w-8 text-red-500"
                        >
                          <Trash2 size={16} />
                        </Button>
                      </div>
                    ))}
                    <Button variant="outline" size="sm" onClick={addHeader} className="mt-2">
                      <Plus size={14} className="mr-2" /> Add Header
                    </Button>
                  </CardContent>
                </Card>
              </div>

              <div>
                <h3 className="mb-2 text-sm font-semibold">Body</h3>
                <Card>
                  <CardContent className="p-4">
                    <Textarea
                      placeholder="Request body (JSON, form data, etc.)"
                      value={body}
                      onChange={(e) => setBody(e.target.value)}
                      className="min-h-[200px] font-mono"
                    />
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="response" className="h-[calc(100%-2.25rem)] overflow-auto p-4">
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-4">
                  {response.status !== null && (
                    <div className="rounded bg-[#252525] px-3 py-1">
                      <span className="text-sm font-medium">Status:</span>{" "}
                      <span
                        className={response.status >= 200 && response.status < 300 ? "text-green-500" : "text-red-500"}
                      >
                        {response.status}
                      </span>
                    </div>
                  )}

                  {response.time !== null && (
                    <div className="rounded bg-[#252525] px-3 py-1">
                      <span className="text-sm font-medium">Time:</span> <span>{response.time}ms</span>
                    </div>
                  )}
                </div>

                {response.isJson && (
                  <Button variant="outline" size="sm" onClick={exportResponse} className="flex items-center">
                    <Download size={14} className="mr-2" /> Export JSON
                  </Button>
                )}
              </div>

              <Card>
                <CardContent className="p-4">
                  <pre className="max-h-[500px] overflow-auto whitespace-pre-wrap break-all rounded bg-[#1e1e1e] p-4 font-mono text-sm">
                    {formatResponseData(response.data)}
                  </pre>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="contexts/wallpaper-context.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { createContext, useContext, useState, useEffect, type ReactNode } from "react"

type WallpaperContextType = {
  wallpaper: string
  setWallpaper: (url: string) => void
  uploadWallpaper: (file: File) => void
  isUploading: boolean
}

const WallpaperContext = createContext<WallpaperContextType | undefined>(undefined)

const DEFAULT_WALLPAPER = "/wallpapers/default.jpg"

export function WallpaperProvider({ children }: { children: ReactNode }) {
  const [wallpaper, setWallpaperState] = useState<string>(DEFAULT_WALLPAPER)
  const [isUploading, setIsUploading] = useState(false)

  // Load saved wallpaper from localStorage on mount
  useEffect(() => {
    const savedWallpaper = localStorage.getItem("wallpaper")
    if (savedWallpaper) {
      setWallpaperState(savedWallpaper)
    }
  }, [])

  const setWallpaper = (url: string) => {
    setWallpaperState(url)
    localStorage.setItem("wallpaper", url)
  }

  const uploadWallpaper = async (file: File) => {
    if (!file) return

    try {
      setIsUploading(true)

      // Create a local object URL for the uploaded file
      const objectUrl = URL.createObjectURL(file)

      // Set the wallpaper to the new object URL
      setWallpaper(objectUrl)
    } catch (error) {
      console.error("Error uploading wallpaper:", error)
    } finally {
      setIsUploading(false)
    }
  }

  return (
    <WallpaperContext.Provider value={{ wallpaper, setWallpaper, uploadWallpaper, isUploading }}>
      {children}
    </WallpaperContext.Provider>
  )
}

export function useWallpaper() {
  const context = useContext(WallpaperContext)
  if (context === undefined) {
    throw new Error("useWallpaper must be used within a WallpaperProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/mac/wallpaper-settings.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { useWallpaper } from "@/contexts/wallpaper-context"
import { Upload, ImageIcon, X } from "lucide-react"

export default function WallpaperSettings() {
  const { wallpaper, uploadWallpaper, isUploading } = useWallpaper()
  const [isOpen, setIsOpen] = useState(false)
  const [dragActive, setDragActive] = useState(false)
  const [previewImage, setPreviewImage] = useState<string | null>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)

  const handleDrag = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()

    if (e.type === "dragenter" || e.type === "dragover") {
      setDragActive(true)
    } else if (e.type === "dragleave") {
      setDragActive(false)
    }
  }

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    setDragActive(false)

    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      handleFile(e.dataTransfer.files[0])
    }
  }

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      handleFile(e.target.files[0])
    }
  }

  const handleFile = (file: File) => {
    // Check if file is an image
    if (!file.type.match("image.*")) {
      alert("Please select an image file")
      return
    }

    // Create preview
    const reader = new FileReader()
    reader.onload = (e) => {
      setPreviewImage(e.target?.result as string)
    }
    reader.readAsDataURL(file)

    // Upload the file
    uploadWallpaper(file)
  }

  const triggerFileInput = () => {
    fileInputRef.current?.click()
  }

  const closeDialog = () => {
    setIsOpen(false)
    setPreviewImage(null)
  }

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <Button variant="ghost" size="icon" className="h-8 w-8" title="Change Wallpaper">
          <ImageIcon size={16} />
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Change Wallpaper</DialogTitle>
        </DialogHeader>
        <div
          className={`mt-4 flex flex-col items-center justify-center border-2 border-dashed rounded-lg p-6 transition-colors ${
            dragActive ? "border-primary bg-primary/10" : "border-border"
          }`}
          onDragEnter={handleDrag}
          onDragOver={handleDrag}
          onDragLeave={handleDrag}
          onDrop={handleDrop}
        >
          {previewImage ? (
            <div className="relative w-full">
              <img
                src={previewImage || "/placeholder.svg"}
                alt="Wallpaper preview"
                className="w-full h-48 object-cover rounded-md"
              />
              <Button
                variant="destructive"
                size="icon"
                className="absolute top-2 right-2 h-6 w-6 rounded-full"
                onClick={() => setPreviewImage(null)}
              >
                <X size={12} />
              </Button>
            </div>
          ) : (
            <>
              <Upload className="h-10 w-10 text-muted-foreground mb-2" />
              <p className="text-sm text-muted-foreground mb-1">Drag and drop an image here or click to upload</p>
              <p className="text-xs text-muted-foreground">Supports: JPG, PNG, GIF</p>
            </>
          )}

          <input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={handleFileChange} />

          <div className="flex gap-2 mt-4">
            <Button variant="outline" onClick={triggerFileInput} disabled={isUploading}>
              Choose File
            </Button>
            {previewImage && (
              <Button onClick={closeDialog} disabled={isUploading}>
                {isUploading ? "Applying..." : "Apply Wallpaper"}
              </Button>
            )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="contexts/auth-context.tsx" isMerged="true"
"use client"

import { createContext, useContext, useState, useEffect, type ReactNode } from "react"

type AuthContextType = {
  isAuthenticated: boolean
  login: (email: string, password: string) => Promise<boolean>
  logout: () => void
  showAuthModal: (appId: string) => void
  hideAuthModal: () => void
  authModalVisible: boolean
  currentAuthApp: string | null
  isLoading: boolean
  user: { email: string } | null
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

// Mock user database
const MOCK_USERS = [
  { email: "user@example.com", password: "password123" },
  { email: "admin@example.com", password: "admin123" },
]

export function AuthProvider({ children }: { children: ReactNode }) {
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const [user, setUser] = useState<{ email: string } | null>(null)
  const [authModalVisible, setAuthModalVisible] = useState(false)
  const [currentAuthApp, setCurrentAuthApp] = useState<string | null>(null)

  // Check for existing session on mount
  useEffect(() => {
    const storedUser = localStorage.getItem("user")
    if (storedUser) {
      try {
        const parsedUser = JSON.parse(storedUser)
        setUser(parsedUser)
        setIsAuthenticated(true)
      } catch (e) {
        // Invalid stored user
        localStorage.removeItem("user")
      }
    }
    setIsLoading(false)
  }, [])

  const login = async (email: string, password: string): Promise<boolean> => {
    setIsLoading(true)

    // Simulate API call delay
    await new Promise((resolve) => setTimeout(resolve, 500))

    // Check credentials against mock database
    const foundUser = MOCK_USERS.find((u) => u.email === email && u.password === password)

    if (foundUser) {
      const userInfo = { email: foundUser.email }
      setUser(userInfo)
      setIsAuthenticated(true)
      localStorage.setItem("user", JSON.stringify(userInfo))
      setIsLoading(false)
      return true
    }

    setIsLoading(false)
    return false
  }

  const logout = () => {
    setUser(null)
    setIsAuthenticated(false)
    localStorage.removeItem("user")
  }

  const showAuthModal = (appId: string) => {
    setCurrentAuthApp(appId)
    setAuthModalVisible(true)
  }

  const hideAuthModal = () => {
    setAuthModalVisible(false)
    setCurrentAuthApp(null)
  }

  return (
    <AuthContext.Provider
      value={{
        isAuthenticated,
        login,
        logout,
        showAuthModal,
        hideAuthModal,
        authModalVisible,
        currentAuthApp,
        isLoading,
        user,
      }}
    >
      {children}
    </AuthContext.Provider>
  )
}

export function useAppAuth() {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error("useAppAuth must be used within an AuthProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/auth/auth-modal.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useAppAuth } from "@/contexts/auth-context"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Loader2, X } from "lucide-react"

export default function AuthModal() {
  const { authModalVisible, hideAuthModal, login, isLoading } = useAppAuth()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState("")

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")

    if (!email || !password) {
      setError("Please enter both email and password")
      return
    }

    const success = await login(email, password)

    if (success) {
      hideAuthModal()
    } else {
      setError("Invalid email or password")
    }
  }

  if (!authModalVisible) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <div className="relative w-full max-w-md rounded-lg bg-white dark:bg-[#252525] p-6 shadow-xl">
        <button
          onClick={hideAuthModal}
          className="absolute right-4 top-4 rounded-full p-1 text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
        >
          <X size={24} />
        </button>

        <div className="mb-6 text-center">
          <h2 className="text-2xl font-bold">Sign in to continue</h2>
          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">Authentication required to access this app</p>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input
              id="email"
              type="email"
              placeholder="Enter your email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              disabled={isLoading}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="password">Password</Label>
            <Input
              id="password"
              type="password"
              placeholder="Enter your password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              disabled={isLoading}
            />
          </div>

          {error && <div className="text-sm text-red-500 dark:text-red-400">{error}</div>}

          <div className="pt-2">
            <Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Signing in...
                </>
              ) : (
                "Sign in"
              )}
            </Button>
          </div>

          <div className="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">
            <p>Demo credentials:</p>
            <p>Email: user@example.com</p>
            <p>Password: password123</p>
          </div>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]plaintext:file=".env.local" isFixed="true" isQuickEdit="true" isMerged="true"
# This file is intentionally empty
# We're using a custom auth implementation instead of Clerk
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import Desktop from "@/components/mac/desktop"
import { AuthProvider } from "@/contexts/auth-context"
import { WallpaperProvider } from "@/contexts/wallpaper-context"

export default function Home() {
  return (
    <main className="h-screen w-screen overflow-hidden bg-[#1e1e1e] text-white">
      <WallpaperProvider>
        <AuthProvider>
          <Desktop />
        </AuthProvider>
      </WallpaperProvider>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/mac/desktop.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect } from "react"
import Dock from "@/components/mac/dock"
import MenuBar from "@/components/mac/menu-bar"
import Window from "@/components/mac/window"
import { useWindowManager } from "@/hooks/use-window-manager"
import CodeEditor from "@/components/apps/code-editor"
import ApiTester from "@/components/apps/api-tester"
import TaskManager from "@/components/apps/task-manager"
import WebBrowser from "@/components/apps/web-browser"
import { useToast } from "@/hooks/use-toast"
import { useWallpaper } from "@/contexts/wallpaper-context"
import AuthModal from "@/components/auth/auth-modal"

export default function Desktop() {
  const { windows, openWindow, closeWindow, focusWindow, minimizeWindow, maximizeWindow, resizeWindow } =
    useWindowManager()
  const { Toaster } = useToast()
  const { wallpaper } = useWallpaper()

  // Don't automatically open any windows when the app loads
  useEffect(() => {
    // No windows are opened by default
    console.log("Desktop initialized with no windows open")
  }, [])

  // Handle window close with explicit function
  const handleCloseWindow = (windowId: string) => {
    console.log("Desktop: Closing window", windowId)
    closeWindow(windowId)
  }

  // Handle window resize
  const handleResizeWindow = (windowId: string, size: { width: number; height: number }) => {
    resizeWindow(windowId, size)
  }

  return (
    <div
      className="relative flex h-full w-full flex-col"
      style={{
        backgroundImage: `url(${wallpaper})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
      }}
    >
      <MenuBar />

      <div className="relative flex-1">
        {windows.map((window) => (
          <Window
            key={window.id}
            window={window}
            onClose={() => handleCloseWindow(window.id)}
            onMinimize={() => minimizeWindow(window.id)}
            onMaximize={() => maximizeWindow(window.id)}
            onFocus={() => focusWindow(window.id)}
            onResize={(size) => handleResizeWindow(window.id, size)}
          >
            {window.app === "task-manager" && <TaskManager />}
            {window.app === "code-editor" && <CodeEditor />}
            {window.app === "api-tester" && <ApiTester />}
            {window.app === "web-browser" && <WebBrowser />}
          </Window>
        ))}
      </div>

      <Dock onOpenApp={(app) => openWindow(app)} />
      <Toaster />
      <AuthModal />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import "@/app/globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import type { Metadata } from "next"
import { Inter } from "next/font/google"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "macOS Dev Environment",
  description: "A macOS-style developer environment with integrated tools",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} disableTransitionOnChange>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/mac/menu-dropdown.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { cn } from "@/lib/utils"

interface MenuItem {
  name: string
  link?: string
}

interface MenuDropdownProps {
  label: string
  items: string[] | MenuItem[]
  isAppMenu?: boolean
}

export default function MenuDropdown({ label, items, isAppMenu = false }: MenuDropdownProps) {
  const [isOpen, setIsOpen] = useState(false)
  const dropdownRef = useRef<HTMLDivElement>(null)

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false)
      }
    }

    // Close other dropdowns when one is opened
    const handleCloseOthers = (event: CustomEvent) => {
      if (event.detail !== dropdownRef.current && isOpen) {
        setIsOpen(false)
      }
    }

    document.addEventListener("mousedown", handleClickOutside)
    document.addEventListener("closeDropdowns" as any, handleCloseOthers as EventListener)

    return () => {
      document.removeEventListener("mousedown", handleClickOutside)
      document.removeEventListener("closeDropdowns" as any, handleCloseOthers as EventListener)
    }
  }, [isOpen])

  const handleClick = () => {
    // Dispatch event to close other dropdowns
    document.dispatchEvent(new CustomEvent("closeDropdowns", { detail: dropdownRef.current }))
    setIsOpen(!isOpen)
  }

  // Check if items are MenuItem objects or simple strings
  const isMenuItemArray = (items: string[] | MenuItem[]): items is MenuItem[] => {
    return items.length > 0 && typeof items[0] !== "string"
  }

  const menuItemsArray = isMenuItemArray(items) ? items : items.map((item) => ({ name: item }))

  return (
    <div ref={dropdownRef} className="relative">
      <button
        onClick={handleClick}
        className={cn(
          "px-2 py-1 rounded hover:bg-white/10 transition-colors",
          isOpen && "bg-white/10",
          isAppMenu && "font-semibold",
        )}
      >
        {label}
      </button>

      {isOpen && (
        <div
          className={cn(
            "absolute top-full mt-1 w-56 rounded-md bg-[#2a2a2a] shadow-lg ring-1 ring-black ring-opacity-5 z-50",
            isAppMenu ? "left-0" : "left-0",
          )}
        >
          <div className="py-1">
            {menuItemsArray.map((item, index) => {
              const isAboutOrLast = item.name.startsWith("About") || index === menuItemsArray.length - 1

              const itemContent = (
                <div
                  key={`item-${index}`}
                  className={cn(
                    "px-4 py-2 text-sm text-gray-300 hover:bg-[#3a3a3a] cursor-default",
                    isAppMenu && isAboutOrLast && "border-t border-gray-700 mt-1 pt-2",
                  )}
                >
                  {item.name}
                </div>
              )

              if (isAppMenu && item.link) {
                return (
                  <a key={index} href={item.link} target="_blank" rel="noopener noreferrer" className="block">
                    {itemContent}
                  </a>
                )
              }

              return <div key={index}>{itemContent}</div>
            })}
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

/* macOS specific styles */
.macos-window {
  border-radius: 0.5rem;
  border: 1px solid #3c3c3c;
  background-color: #252525;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(20px);
  will-change: transform;
  transition: opacity 0.2s ease;
}

.macos-titlebar {
  display: flex;
  height: 2rem;
  align-items: center;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  background-color: #323232;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  cursor: grab;
  user-select: none;
  position: relative;
}

.macos-titlebar:active {
  cursor: grabbing;
}

.macos-window-button {
  margin-right: 0.5rem;
  height: 0.75rem;
  width: 0.75rem;
  border-radius: 9999px;
  position: relative;
  z-index: 10;
}

.macos-dock {
  display: flex;
  border-radius: 0.75rem;
  background-color: rgba(37, 37, 37, 0.8);
  padding: 0.75rem;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 50;
}

.macos-dock-item {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  display: flex;
  height: 3rem;
  width: 3rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: bottom;
  position: relative;
}

.macos-dock-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.macos-dock-item::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  transition: transform 0.2s ease;
}

.macos-dock-item:hover::after {
  transform: translateX(-50%) scale(1);
}

.macos-menubar {
  display: flex;
  height: 2rem;
  align-items: center;
  background-color: rgba(37, 37, 37, 0.9);
  padding-left: 1rem;
  padding-right: 1rem;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 50;
}

.monaco-editor {
  height: 100%;
  width: 100%;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
[V0_FILE]plaintext:file="public/wallpapers/default.jpg" url="https://sjc.microlink.io/ak86d9sYZjoQQs8Md85KGoQcTmhX5KVTTS-xgWT6eXiB_4flAi3BpPbmHVLkEhKTYxk7dx6c1S_IGT5Cr73FXA.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="components/apps/task-manager.tsx" isMerged="true"
"use client"

import { Label } from "@/components/ui/label"
import { useState, useEffect, useCallback } from "react"
import { DragDropContext, Droppable, Draggable, type DropResult } from "react-beautiful-dnd"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Edit2, Trash2, Calendar, User, Loader2 } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import {
  initialize,
  fetchColumns,
  fetchTasks,
  createTask,
  updateTaskAction,
  deleteTaskAction,
  handleDragEnd as handleDragEndAction,
} from "@/app/actions/task-actions"
import type { Task, Column } from "@/lib/kv"

export default function TaskManager() {
  const [columns, setColumns] = useState<Column[]>([])
  const [tasks, setTasks] = useState<Task[]>([])
  const [isAddingTask, setIsAddingTask] = useState(false)
  const [editingTask, setEditingTask] = useState<Task | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [isSaving, setIsSaving] = useState(false)
  const { toast } = useToast()

  const [newTask, setNewTask] = useState<Omit<Task, "id" | "createdAt">>({
    title: "",
    description: "",
    priority: "medium",
    assignee: "",
    dueDate: "",
    columnId: "todo",
  })

  // Load data on component mount
  useEffect(() => {
    const loadData = async () => {
      try {
        setIsLoading(true)

        // Initialize the database if needed
        await initialize()

        // Fetch columns and tasks
        const columnsResult = await fetchColumns()
        const tasksResult = await fetchTasks()

        if (columnsResult.success && tasksResult.success) {
          setColumns(columnsResult.data)
          setTasks(tasksResult.data)
        } else {
          toast({
            title: "Error loading data",
            description: columnsResult.error || tasksResult.error,
            variant: "destructive",
          })
        }
      } catch (error) {
        console.error("Failed to load task data:", error)
        toast({
          title: "Error",
          description: "Failed to load task data. Please try again.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

    loadData()
  }, [toast])

  const handleDragEnd = async (result: DropResult) => {
    if (!result.destination) return

    try {
      setIsSaving(true)

      const response = await handleDragEndAction({
        source: result.source,
        destination: result.destination,
        draggableId: result.draggableId,
      })

      if (response.success) {
        if (!response.noChange) {
          // Optimistically update the UI
          const updatedTasks = [...tasks]
          const taskIndex = updatedTasks.findIndex((t) => t.id === result.draggableId)

          if (taskIndex !== -1) {
            const task = updatedTasks[taskIndex]
            updatedTasks.splice(taskIndex, 1)

            const updatedTask = { ...task, columnId: result.destination.droppableId }

            // Find the right position to insert the task
            const columnTasks = updatedTasks.filter((t) => t.columnId === result.destination.droppableId)

            if (result.destination.index >= columnTasks.length) {
              updatedTasks.push(updatedTask)
            } else {
              const insertIndex = updatedTasks.findIndex(
                (t) =>
                  t.columnId === result.destination?.droppableId && columnTasks[result.destination.index]?.id === t.id,
              )

              if (insertIndex !== -1) {
                updatedTasks.splice(insertIndex, 0, updatedTask)
              } else {
                updatedTasks.push(updatedTask)
              }
            }

            setTasks(updatedTasks)
          }
        }
      } else {
        toast({
          title: "Error",
          description: response.error || "Failed to move task",
          variant: "destructive",
        })

        // Refresh data to ensure UI is in sync
        const tasksResult = await fetchTasks()
        if (tasksResult.success) {
          setTasks(tasksResult.data)
        }
      }
    } catch (error) {
      console.error("Error handling drag and drop:", error)
      toast({
        title: "Error",
        description: "Failed to move task. Please try again.",
        variant: "destructive",
      })

      // Refresh data to ensure UI is in sync
      const tasksResult = await fetchTasks()
      if (tasksResult.success) {
        setTasks(tasksResult.data)
      }
    } finally {
      setIsSaving(false)
    }
  }

  const addNewTask = async () => {
    if (!newTask.title.trim()) return

    try {
      setIsSaving(true)

      const response = await createTask(newTask)

      if (response.success) {
        setTasks([...tasks, response.data])

        setNewTask({
          title: "",
          description: "",
          priority: "medium",
          assignee: "",
          dueDate: "",
          columnId: "todo",
        })

        setIsAddingTask(false)

        toast({
          title: "Success",
          description: "Task created successfully",
        })
      } else {
        toast({
          title: "Error",
          description: response.error || "Failed to create task",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error adding task:", error)
      toast({
        title: "Error",
        description: "Failed to create task. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

  const updateTask = async () => {
    if (!editingTask || !editingTask.title.trim()) return

    try {
      setIsSaving(true)

      const { id, createdAt, ...updates } = editingTask

      const response = await updateTaskAction(id, updates)

      if (response.success) {
        setTasks(tasks.map((task) => (task.id === id ? response.data : task)))
        setEditingTask(null)

        toast({
          title: "Success",
          description: "Task updated successfully",
        })
      } else {
        toast({
          title: "Error",
          description: response.error || "Failed to update task",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error updating task:", error)
      toast({
        title: "Error",
        description: "Failed to update task. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

  const deleteTask = async (taskId: string) => {
    try {
      setIsSaving(true)

      const response = await deleteTaskAction(taskId)

      if (response.success) {
        setTasks(tasks.filter((task) => task.id !== taskId))

        toast({
          title: "Success",
          description: "Task deleted successfully",
        })
      } else {
        toast({
          title: "Error",
          description: response.error || "Failed to delete task",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error deleting task:", error)
      toast({
        title: "Error",
        description: "Failed to delete task. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case "high":
        return "bg-red-500"
      case "medium":
        return "bg-yellow-500"
      case "low":
        return "bg-green-500"
      default:
        return "bg-blue-500"
    }
  }

  // Get tasks for a specific column
  const getColumnTasks = useCallback(
    (columnId: string) => {
      return tasks.filter((task) => task.columnId === columnId)
    },
    [tasks],
  )

  if (isLoading) {
    return (
      <div className="flex h-full items-center justify-center">
        <div className="text-center">
          <Loader2 className="mx-auto h-8 w-8 animate-spin text-primary" />
          <p className="mt-2 text-sm text-gray-400">Loading tasks...</p>
        </div>
      </div>
    )
  }

  return (
    <div className="h-full overflow-hidden bg-[#1e1e1e] p-4">
      <div className="mb-4 flex items-center justify-between">
        <div className="flex items-center">
          <h2 className="text-xl font-bold">Task Board</h2>
        </div>
        <Dialog open={isAddingTask} onOpenChange={setIsAddingTask}>
          <DialogTrigger asChild>
            <Button disabled={isSaving}>
              <Plus size={16} className="mr-2" /> Add Task
            </Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Add New Task</DialogTitle>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="title">Title</Label>
                <Input
                  id="title"
                  value={newTask.title}
                  onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
                  placeholder="Task title"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="description">Description</Label>
                <Textarea
                  id="description"
                  value={newTask.description}
                  onChange={(e) => setNewTask({ ...newTask, description: e.target.value })}
                  placeholder="Task description"
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="priority">Priority</Label>
                  <Select
                    value={newTask.priority}
                    onValueChange={(value: "low" | "medium" | "high") => setNewTask({ ...newTask, priority: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Priority" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="low">Low</SelectItem>
                      <SelectItem value="medium">Medium</SelectItem>
                      <SelectItem value="high">High</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="column">Column</Label>
                  <Select
                    value={newTask.columnId}
                    onValueChange={(value) => setNewTask({ ...newTask, columnId: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Column" />
                    </SelectTrigger>
                    <SelectContent>
                      {columns.map((col) => (
                        <SelectItem key={col.id} value={col.id}>
                          {col.title}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="assignee">Assignee</Label>
                  <Input
                    id="assignee"
                    value={newTask.assignee}
                    onChange={(e) => setNewTask({ ...newTask, assignee: e.target.value })}
                    placeholder="Assignee name"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="dueDate">Due Date</Label>
                  <Input
                    id="dueDate"
                    type="date"
                    value={newTask.dueDate}
                    onChange={(e) => setNewTask({ ...newTask, dueDate: e.target.value })}
                  />
                </div>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsAddingTask(false)} disabled={isSaving}>
                Cancel
              </Button>
              <Button onClick={addNewTask} disabled={isSaving}>
                {isSaving ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Adding...
                  </>
                ) : (
                  "Add Task"
                )}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

      <DragDropContext onDragEnd={handleDragEnd}>
        <div className="flex h-[calc(100%-3rem)] space-x-4 overflow-x-auto pb-4">
          {columns.map((column) => {
            const columnTasks = getColumnTasks(column.id)

            return (
              <div key={column.id} className="flex-shrink-0 w-80">
                <div className="rounded-t-lg bg-[#252525] p-3">
                  <h3 className="font-semibold">{column.title}</h3>
                  <div className="mt-1 text-xs text-gray-400">
                    {columnTasks.length} {columnTasks.length === 1 ? "task" : "tasks"}
                  </div>
                </div>

                <Droppable droppableId={column.id}>
                  {(provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.droppableProps}
                      className="h-full max-h-[calc(100%-3rem)] overflow-y-auto rounded-b-lg bg-[#1e1e1e] p-2"
                    >
                      {columnTasks.map((task, index) => (
                        <Draggable key={task.id} draggableId={task.id} index={index}>
                          {(provided) => (
                            <div
                              ref={provided.innerRef}
                              {...provided.draggableProps}
                              {...provided.dragHandleProps}
                              className="mb-3"
                            >
                              <Card>
                                <CardHeader className="p-3 pb-0">
                                  <div className="flex items-start justify-between">
                                    <CardTitle className="text-base">{task.title}</CardTitle>
                                    <div className="flex space-x-1">
                                      <Button
                                        variant="ghost"
                                        size="icon"
                                        className="h-6 w-6"
                                        onClick={() => setEditingTask(task)}
                                        disabled={isSaving}
                                      >
                                        <Edit2 size={14} />
                                      </Button>
                                      <Button
                                        variant="ghost"
                                        size="icon"
                                        className="h-6 w-6 text-red-500"
                                        onClick={() => deleteTask(task.id)}
                                        disabled={isSaving}
                                      >
                                        <Trash2 size={14} />
                                      </Button>
                                    </div>
                                  </div>
                                </CardHeader>
                                <CardContent className="p-3 pt-2">
                                  <p className="text-sm text-gray-400">{task.description}</p>
                                  <div className="mt-3 flex flex-wrap items-center gap-2">
                                    <Badge className={`${getPriorityColor(task.priority)} text-white`}>
                                      {task.priority}
                                    </Badge>
                                    {task.dueDate && (
                                      <div className="flex items-center text-xs text-gray-400">
                                        <Calendar size={12} className="mr-1" />
                                        {new Date(task.dueDate).toLocaleDateString()}
                                      </div>
                                    )}
                                  </div>
                                </CardContent>
                                {task.assignee && (
                                  <CardFooter className="p-3 pt-0">
                                    <div className="flex items-center text-xs text-gray-400">
                                      <User size={12} className="mr-1" />
                                      {task.assignee}
                                    </div>
                                  </CardFooter>
                                )}
                              </Card>
                            </div>
                          )}
                        </Draggable>
                      ))}
                      {provided.placeholder}
                    </div>
                  )}
                </Droppable>
              </div>
            )
          })}
        </div>
      </DragDropContext>

      <Dialog open={!!editingTask} onOpenChange={(open) => !open && setEditingTask(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Edit Task</DialogTitle>
          </DialogHeader>
          {editingTask && (
            <div className="space-y-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="edit-title">Title</Label>
                <Input
                  id="edit-title"
                  value={editingTask.title}
                  onChange={(e) => setEditingTask({ ...editingTask, title: e.target.value })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="edit-description">Description</Label>
                <Textarea
                  id="edit-description"
                  value={editingTask.description}
                  onChange={(e) => setEditingTask({ ...editingTask, description: e.target.value })}
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="edit-priority">Priority</Label>
                  <Select
                    value={editingTask.priority}
                    onValueChange={(value: "low" | "medium" | "high") =>
                      setEditingTask({ ...editingTask, priority: value })
                    }
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Priority" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="low">Low</SelectItem>
                      <SelectItem value="medium">Medium</SelectItem>
                      <SelectItem value="high">High</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="edit-column">Column</Label>
                  <Select
                    value={editingTask.columnId}
                    onValueChange={(value) => setEditingTask({ ...editingTask, columnId: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Column" />
                    </SelectTrigger>
                    <SelectContent>
                      {columns.map((col) => (
                        <SelectItem key={col.id} value={col.id}>
                          {col.title}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="edit-assignee">Assignee</Label>
                  <Input
                    id="edit-assignee"
                    value={editingTask.assignee}
                    onChange={(e) => setEditingTask({ ...editingTask, assignee: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="edit-dueDate">Due Date</Label>
                  <Input
                    id="edit-dueDate"
                    type="date"
                    value={editingTask.dueDate}
                    onChange={(e) => setEditingTask({ ...editingTask, dueDate: e.target.value })}
                  />
                </div>
              </div>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setEditingTask(null)} disabled={isSaving}>
              Cancel
            </Button>
            <Button onClick={updateTask} disabled={isSaving}>
              {isSaving ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Saving...
                </>
              ) : (
                "Save Changes"
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/mac/menu-bar.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Wifi, Battery, Volume2 } from "lucide-react"
import WallpaperSettings from "./wallpaper-settings"
import MenuDropdown from "./menu-dropdown"

// Menu items for each dropdown
const menuItems = {
  DeDevs: [
    { name: "Follow @DeDevsClub", link: "https://x.com/DeDevsClub" },
    { name: "Join DeDevs", link: "https://whop.com/dedevs" },
    { name: "DeDevs Blog", link: "https://blog.dedevs.club" },
    { name: "About DeDevs", link: "https://dedevs.club" },
    { name: "DeDevsOS", link: "" },
  ],
  File: ["New Window", "New Tab", "Open...", "Open Recent", "Close Window", "Save", "Save As...", "Print..."],
  Edit: ["Undo", "Redo", "Cut", "Copy", "Paste", "Select All", "Find", "Spelling and Grammar"],
  View: ["as Icons", "as List", "as Columns", "as Gallery", "Show Hidden Files", "Show Path Bar", "Show Status Bar"],
  Go: ["Back", "Forward", "Enclosing Folder", "Home", "Documents", "Desktop", "Downloads", "Applications"],
  Window: ["Minimize", "Zoom", "Tile Window to Left", "Tile Window to Right", "Show Previous Tab", "Show Next Tab"],
  Help: ["macOS Help", "See What's New in macOS", "New to Mac? Tour the Basics", "Get Support"],
}

export default function MenuBar() {
  const [time, setTime] = useState<string>("")
  const [date, setDate] = useState<string>("")

  useEffect(() => {
    const updateTime = () => {
      const now = new Date()
      setTime(now.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false }))
      setDate(now.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" }))
    }

    updateTime()
    const interval = setInterval(updateTime, 1000)
    return () => clearInterval(interval)
  }, [])

  return (
    <div className="macos-menubar">
      <div className="flex items-center">
        {/* Vampire fangs icon with DeDevs dropdown */}
        <div className="flex items-center">
          <img
            src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo-gsvJhwCgWMUTCG6LgndFItoPIr3Mc4.png"
            alt="DeDevs Logo"
            width="18"
            height="18"
            className="mr-2"
          />
          <MenuDropdown label="DeDevs" items={menuItems.DeDevs} isAppMenu={true} />
        </div>

        {/* Menu dropdowns */}
        <MenuDropdown label="File" items={menuItems.File} />
        <MenuDropdown label="Edit" items={menuItems.Edit} />
        <MenuDropdown label="View" items={menuItems.View} />
        <MenuDropdown label="Go" items={menuItems.Go} />
        <MenuDropdown label="Window" items={menuItems.Window} />
        <MenuDropdown label="Help" items={menuItems.Help} />
      </div>

      <div className="ml-auto flex items-center space-x-4">
        <WallpaperSettings />
        <Wifi size={16} />
        <Battery size={16} />
        <Volume2 size={16} />
        <span>{date}</span>
        <span>{time}</span>
      </div>
    </div>
  )
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1",
    "@monaco-editor/react": "4.7.0",
    "@vercel/kv": "3.0.0",
    "react-beautiful-dnd": "13.1.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "5.7.3"
  }
}
[V0_FILE]typescriptreact:file="components/mac/window.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect, memo } from "react"
import type { WindowType } from "@/hooks/use-window-manager"
import { cn } from "@/lib/utils"

interface WindowProps {
  window: WindowType
  children: React.ReactNode
  onClose: () => void
  onMinimize: () => void
  onMaximize: () => void
  onFocus: () => void
  onResize?: (size: { width: number; height: number }) => void
}

type ResizeDirection = "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw" | null

// Use memo to prevent unnecessary re-renders
const Window = memo(function Window({
  window: windowData,
  children,
  onClose,
  onMinimize,
  onMaximize,
  onFocus,
  onResize,
}: WindowProps) {
  const [position, setPosition] = useState({ x: windowData.position.x, y: windowData.position.y })
  const [size, setSize] = useState({ width: windowData.size.width, height: windowData.size.height })
  const [isDragging, setIsDragging] = useState(false)
  const [isResizing, setIsResizing] = useState(false)
  const [resizeDirection, setResizeDirection] = useState<ResizeDirection>(null)
  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 })
  const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, width: 0, height: 0 })
  const windowRef = useRef<HTMLDivElement>(null)
  const titlebarRef = useRef<HTMLDivElement>(null)

  // Handle mouse move for dragging and resizing
  const handleMouseMove = (e: MouseEvent) => {
    if (isDragging) {
      const newX = e.clientX - dragOffset.x
      const newY = e.clientY - dragOffset.y

      // Update position directly in the DOM for smoother dragging
      if (windowRef.current && windowData.sizingMode === "normal") {
        windowRef.current.style.left = `${newX}px`
        windowRef.current.style.top = `${newY}px`
      }

      // Also update state for when we stop dragging
      setPosition({ x: newX, y: newY })
    } else if (isResizing && resizeDirection) {
      e.preventDefault()

      const deltaX = e.clientX - resizeStart.x
      const deltaY = e.clientY - resizeStart.y

      let newWidth = resizeStart.width
      let newHeight = resizeStart.height
      let newX = position.x
      let newY = position.y

      // Handle horizontal resizing
      if (resizeDirection.includes("e")) {
        newWidth = Math.max(300, resizeStart.width + deltaX)
      } else if (resizeDirection.includes("w")) {
        const widthChange = resizeStart.width - Math.max(300, resizeStart.width - deltaX)
        newWidth = resizeStart.width - widthChange
        newX = resizeStart.x + widthChange
      }

      // Handle vertical resizing
      if (resizeDirection.includes("s")) {
        newHeight = Math.max(200, resizeStart.height + deltaY)
      } else if (resizeDirection.includes("n")) {
        const heightChange = resizeStart.height - Math.max(200, resizeStart.height - deltaY)
        newHeight = resizeStart.height - heightChange
        newY = resizeStart.y + heightChange
      }

      // Update size and position directly in the DOM for smoother resizing
      if (windowRef.current && windowData.sizingMode === "normal") {
        windowRef.current.style.width = `${newWidth}px`
        windowRef.current.style.height = `${newHeight}px`
        windowRef.current.style.left = `${newX}px`
        windowRef.current.style.top = `${newY}px`
      }

      // Also update state for when we stop resizing
      setSize({ width: newWidth, height: newHeight })
      setPosition({ x: newX, y: newY })

      // Call the onResize callback if provided
      if (onResize) {
        onResize({ width: newWidth, height: newHeight })
      }
    }
  }

  const handleMouseUp = () => {
    if (isDragging) {
      setIsDragging(false)
    }

    if (isResizing) {
      setIsResizing(false)
      setResizeDirection(null)
    }

    document.removeEventListener("mousemove", handleMouseMove)
    document.removeEventListener("mouseup", handleMouseUp)
  }

  const startDragging = (e: React.MouseEvent) => {
    // Don't start dragging if the window is not in normal mode
    if (windowData.sizingMode !== "normal") return

    // Prevent default to avoid text selection during drag
    e.preventDefault()

    onFocus()

    if (windowRef.current) {
      const rect = windowRef.current.getBoundingClientRect()
      setDragOffset({
        x: e.clientX - rect.left,
        y: e.clientY - rect.top,
      })
      setIsDragging(true)

      // Add event listeners to document
      document.addEventListener("mousemove", handleMouseMove)
      document.addEventListener("mouseup", handleMouseUp)
    }
  }

  const handleResizeStart = (e: React.MouseEvent, direction: ResizeDirection) => {
    e.stopPropagation()
    onFocus()

    setIsResizing(true)
    setResizeDirection(direction)
    setResizeStart({
      x: e.clientX,
      y: e.clientY,
      width: size.width,
      height: size.height,
    })

    document.addEventListener("mousemove", handleMouseMove)
    document.addEventListener("mouseup", handleMouseUp)
  }

  const getWindowTitle = () => {
    switch (windowData.app) {
      case "code-editor":
        return "Cursive"
      case "api-tester":
        return "Postmate"
      case "task-manager":
        return "Asanica"
      default:
        return "Rawr Browser"
    }
  }

  // Clean up event listeners when component unmounts
  useEffect(() => {
    return () => {
      document.removeEventListener("mousemove", handleMouseMove)
      document.removeEventListener("mouseup", handleMouseUp)
    }
  }, [])

  return (
    <div
      ref={windowRef}
      className={cn(
        "macos-window absolute",
        "transition-opacity duration-200",
        windowData.minimized ? "opacity-0 pointer-events-none" : "opacity-100",
        windowData.sizingMode === "fullscreen" ? "inset-0 m-0" : "",
      )}
      style={
        windowData.sizingMode === "fullscreen"
          ? { zIndex: windowData.zIndex }
          : {
              left: `${position.x}px`,
              top: `${position.y}px`,
              width: `${size.width}px`,
              height: `${size.height}px`,
              zIndex: windowData.zIndex,
            }
      }
      onClick={onFocus}
    >
      <div ref={titlebarRef} className="macos-titlebar" onMouseDown={startDragging}>
        <div className="flex items-center">
          <button
            className="macos-window-button bg-red-500 hover:bg-red-600"
            onClick={(e) => {
              e.stopPropagation()
              onClose()
            }}
            aria-label="Close window"
          />
          <button
            className="macos-window-button bg-yellow-500 hover:bg-yellow-600"
            onClick={(e) => {
              e.stopPropagation()
              onMinimize()
            }}
            aria-label="Minimize window"
          />
          <button
            className="macos-window-button bg-green-500 hover:bg-green-600"
            onClick={(e) => {
              e.stopPropagation()
              onMaximize()
            }}
            aria-label="Maximize window"
          />
        </div>
        <div className="absolute left-1/2 -translate-x-1/2 text-sm font-medium text-gray-400">{getWindowTitle()}</div>
      </div>
      <div className="h-[calc(100%-2rem)] overflow-hidden">{children}</div>

      {/* Resize handles - only show when in normal mode */}
      {windowData.sizingMode === "normal" && (
        <>
          {/* Corner resize handles */}
          <div
            className="absolute top-0 left-0 h-4 w-4 cursor-nwse-resize"
            onMouseDown={(e) => handleResizeStart(e, "nw")}
          />
          <div
            className="absolute top-0 right-0 h-4 w-4 cursor-nesw-resize"
            onMouseDown={(e) => handleResizeStart(e, "ne")}
          />
          <div
            className="absolute bottom-0 left-0 h-4 w-4 cursor-nesw-resize"
            onMouseDown={(e) => handleResizeStart(e, "sw")}
          />
          <div
            className="absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize"
            onMouseDown={(e) => handleResizeStart(e, "se")}
          />

          {/* Edge resize handles */}
          <div
            className="absolute top-0 left-4 right-4 h-2 cursor-ns-resize"
            onMouseDown={(e) => handleResizeStart(e, "n")}
          />
          <div
            className="absolute bottom-0 left-4 right-4 h-2 cursor-ns-resize"
            onMouseDown={(e) => handleResizeStart(e, "s")}
          />
          <div
            className="absolute left-0 top-4 bottom-4 w-2 cursor-ew-resize"
            onMouseDown={(e) => handleResizeStart(e, "w")}
          />
          <div
            className="absolute right-0 top-4 bottom-4 w-2 cursor-ew-resize"
            onMouseDown={(e) => handleResizeStart(e, "e")}
          />
        </>
      )}
    </div>
  )
})

export default Window
[V0_FILE]typescriptreact:file="hooks/use-window-manager.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useCallback, useEffect } from "react"
import { useAppAuth } from "@/contexts/auth-context"

export interface WindowType {
  id: string
  app: string
  position: { x: number; y: number }
  size: { width: number; height: number }
  minimized: boolean
  maximized: boolean
  sizingMode: "normal" | "fullscreen" | "lefthalf" | "righthalf"
  zIndex: number
}

// Apps that require authentication - removing task-manager from this list
const PROTECTED_APPS: string[] = []

// Define sizing presets
const getSizingPresets = () => {
  const screenWidth = typeof window !== "undefined" ? window.innerWidth : 1920
  const screenHeight = typeof window !== "undefined" ? window.innerHeight : 1080
  const menuBarHeight = 32 // Height of menu bar

  return {
    fullscreen: {
      position: { x: 0, y: menuBarHeight },
      size: { width: screenWidth, height: screenHeight - menuBarHeight },
    },
    lefthalf: {
      position: { x: 0, y: menuBarHeight },
      size: { width: Math.floor(screenWidth / 2), height: screenHeight - menuBarHeight },
    },
    righthalf: {
      position: { x: Math.floor(screenWidth / 2), y: menuBarHeight },
      size: { width: Math.floor(screenWidth / 2), height: screenHeight - menuBarHeight },
    },
  }
}

export function useWindowManager() {
  const [windows, setWindows] = useState<WindowType[]>([])
  const [nextZIndex, setNextZIndex] = useState(1)
  const { isAuthenticated, showAuthModal } = useAppAuth()

  // Debug windows state changes
  useEffect(() => {
    console.log("Windows state updated:", windows)
  }, [windows])

  // Memoize handlers to prevent unnecessary re-renders
  const openWindow = useCallback(
    (app: string) => {
      console.log("Opening window for app:", app)

      // Check if app requires authentication
      if (PROTECTED_APPS.includes(app) && !isAuthenticated) {
        console.log("Authentication required for app:", app)
        showAuthModal(app)
        return
      }

      // Check if window already exists
      const existingWindow = windows.find((w) => w.app === app)

      if (existingWindow) {
        // If minimized, restore it
        if (existingWindow.minimized) {
          setWindows((prev) =>
            prev.map((w) => (w.id === existingWindow.id ? { ...w, minimized: false, zIndex: nextZIndex } : w)),
          )
          setNextZIndex((prev) => prev + 1)
        } else {
          // Just focus it
          focusWindow(existingWindow.id)
        }
        return
      }

      // Calculate position (staggered)
      const offset = windows.length * 30
      const position = {
        x: 100 + offset,
        y: 80 + offset,
      }

      const newWindow: WindowType = {
        id: `${app}-${Date.now()}`,
        app,
        position,
        size: { width: 800, height: 600 },
        minimized: false,
        maximized: false,
        sizingMode: "fullscreen", // Start in fullscreen mode
        zIndex: nextZIndex,
      }

      setWindows((prev) => [...prev, newWindow])
      setNextZIndex((prev) => prev + 1)
    },
    [windows, nextZIndex, isAuthenticated, showAuthModal],
  )

  const closeWindow = useCallback((id: string) => {
    console.log("Closing window:", id)

    // Force update with functional state update to ensure latest state
    setWindows((prevWindows) => {
      const updatedWindows = prevWindows.filter((w) => w.id !== id)
      console.log("Windows after closing:", updatedWindows)
      return updatedWindows
    })
  }, [])

  const minimizeWindow = useCallback((id: string) => {
    setWindows((prev) => prev.map((w) => (w.id === id ? { ...w, minimized: true } : w)))
  }, [])

  const maximizeWindow = useCallback((id: string) => {
    setWindows((prev) =>
      prev.map((w) => {
        if (w.id === id) {
          const presets = getSizingPresets()
          let newSizingMode: "normal" | "fullscreen" | "lefthalf" | "righthalf"
          let newPosition = w.position
          let newSize = w.size
          let newMaximized = w.maximized

          // Cycle through sizing modes
          switch (w.sizingMode) {
            case "normal":
              newSizingMode = "fullscreen"
              newPosition = presets.fullscreen.position
              newSize = presets.fullscreen.size
              newMaximized = true
              break
            case "fullscreen":
              newSizingMode = "lefthalf"
              newPosition = presets.lefthalf.position
              newSize = presets.lefthalf.size
              newMaximized = false
              break
            case "lefthalf":
              newSizingMode = "righthalf"
              newPosition = presets.righthalf.position
              newSize = presets.righthalf.size
              newMaximized = false
              break
            case "righthalf":
            default:
              newSizingMode = "normal"
              newPosition = { x: 100 + Math.random() * 100, y: 80 + Math.random() * 100 }
              newSize = { width: 800, height: 600 }
              newMaximized = false
              break
          }

          return {
            ...w,
            sizingMode: newSizingMode,
            position: newPosition,
            size: newSize,
            maximized: newMaximized,
          }
        }
        return w
      }),
    )
  }, [])

  const focusWindow = useCallback(
    (id: string) => {
      setWindows((prev) => prev.map((w) => (w.id === id ? { ...w, zIndex: nextZIndex } : w)))
      setNextZIndex((prev) => prev + 1)
    },
    [nextZIndex],
  )

  const resizeWindow = useCallback((id: string, size: { width: number; height: number }) => {
    setWindows((prev) => prev.map((w) => (w.id === id ? { ...w, size } : w)))
  }, [])

  return {
    windows,
    openWindow,
    closeWindow,
    minimizeWindow,
    maximizeWindow,
    focusWindow,
    resizeWindow,
  }
}</article></body></html>
About

Tags

Share

About

Tags

Share

More from bunsdev

About

Tags

Share

About

Tags

Share

More from bunsdev
