8f:I[903690,["/chat-static/_next/static/immutable/chunks/19x10s5ceog9a.js","/chat-static/_next/static/immutable/chunks/12f-nm5otxtlb.js","/chat-static/_next/static/immutable/chunks/3iq-dyxnzhw6x.js","/chat-static/_next/static/immutable/chunks/1zebkw4t37hrt.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/1ihyvxny9u4w4.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3tvsw776zkqg9.js","/chat-static/_next/static/immutable/chunks/1e-qtuskm58ha.js","/chat-static/_next/static/immutable/chunks/0ue-l2nq6d-fd.js","/chat-static/_next/static/immutable/chunks/1e5k5x1kcenwe.js","/chat-static/_next/static/immutable/chunks/3hnrzurk988jk.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/1-qk02sdtfqkn.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/2_9d7galk0wiq.js","/chat-static/_next/static/immutable/chunks/0lys-rd0h1ssv.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1vea1ewevhe85.js","/chat-static/_next/static/immutable/chunks/3ucy-zmd9da95.js","/chat-static/_next/static/immutable/chunks/3a3e1uof0x3hs.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/2fjkv44_ofoly.js","/chat-static/_next/static/immutable/chunks/40d8rjwe4x81w.js","/chat-static/_next/static/immutable/chunks/1nma-60foff1_.js","/chat-static/_next/static/immutable/chunks/14jzqba1i3vth.js"],"ExplicitChatIdProvider"] 90:I[838238,["/chat-static/_next/static/immutable/chunks/19x10s5ceog9a.js","/chat-static/_next/static/immutable/chunks/12f-nm5otxtlb.js","/chat-static/_next/static/immutable/chunks/3iq-dyxnzhw6x.js","/chat-static/_next/static/immutable/chunks/1zebkw4t37hrt.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/1ihyvxny9u4w4.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3tvsw776zkqg9.js","/chat-static/_next/static/immutable/chunks/1e-qtuskm58ha.js","/chat-static/_next/static/immutable/chunks/0ue-l2nq6d-fd.js","/chat-static/_next/static/immutable/chunks/1e5k5x1kcenwe.js","/chat-static/_next/static/immutable/chunks/3hnrzurk988jk.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/1-qk02sdtfqkn.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/2_9d7galk0wiq.js","/chat-static/_next/static/immutable/chunks/0lys-rd0h1ssv.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1vea1ewevhe85.js","/chat-static/_next/static/immutable/chunks/3ucy-zmd9da95.js","/chat-static/_next/static/immutable/chunks/3a3e1uof0x3hs.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/2fjkv44_ofoly.js","/chat-static/_next/static/immutable/chunks/40d8rjwe4x81w.js","/chat-static/_next/static/immutable/chunks/1nma-60foff1_.js","/chat-static/_next/static/immutable/chunks/14jzqba1i3vth.js"],"SWRDataProvider"] 91:T17510,[V0_FILE]typescriptreact:file="components/task-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { useTasks } from "@/lib/task-context" import type { TaskStatus } from "@/lib/types" import { X, Plus } from "lucide-react" import { Badge } from "@/components/ui/badge" interface TaskFormProps { defaultStatus?: TaskStatus onSuccess?: () => void } export function TaskForm({ defaultStatus = "inbox", onSuccess }: TaskFormProps) { const { addTask } = useTasks() const [title, setTitle] = useState("") const [description, setDescription] = useState("") const [tagInput, setTagInput] = useState("") const [tags, setTags] = useState([]) const handleAddTag = () => { const trimmedTag = tagInput.trim() if (trimmedTag && !tags.includes(trimmedTag)) { setTags([...tags, trimmedTag]) setTagInput("") } } const handleRemoveTag = (tagToRemove: string) => { setTags(tags.filter((tag) => tag !== tagToRemove)) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!title.trim()) return addTask({ title: title.trim(), description: description.trim(), status: defaultStatus, tags, isPriority: false, }) setTitle("") setDescription("") setTags([]) setTagInput("") onSuccess?.() } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault() handleAddTag() } } return (

Task Title setTitle(e.target.value)} placeholder="Enter task title..." className="bg-secondary border-border focus:border-ring" required />

Description

setDescription(e.target.value)}
          placeholder="Add details about this task..."
          className="bg-secondary border-border focus:border-ring min-h-24 resize-none"
        />
      </div>

<div className="space-y-2">
        <label htmlFor="tags" className="text-sm font-medium text-foreground">
          Tags
        </label>
        <div className="flex gap-2">
          <Input
            id="tags"
            value={tagInput}
            onChange={(e) => setTagInput(e.target.value)}
            onKeyDown={handleKeyDown}
            placeholder="Add a tag..."
            className="bg-secondary border-border focus:border-ring"
          />
          <Button type="button" onClick={handleAddTag} variant="secondary" size="icon" className="shrink-0">
            <Plus className="h-4 w-4" />
            <span className="sr-only">Add tag</span>
          </Button>
        </div>
        {tags.length > 0 && (
          <div className="flex flex-wrap gap-2 pt-2">
            {tags.map((tag) => (
              <Badge key={tag} variant="secondary" className="gap-1 pr-1 bg-secondary text-secondary-foreground">
                {tag}
                <button
                  type="button"
                  onClick={() => handleRemoveTag(tag)}
                  className="ml-1 rounded-sm hover:bg-muted p-0.5"
                >
                  <X className="h-3 w-3" />
                  <span className="sr-only">Remove {tag}</span>
                </button>
              </Badge>
            ))}
          </div>
        )}
      </div>

<Button type="submit" className="w-full">
        Create Task
      </Button>
    </form>
  )
}
[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.10.0",
    "@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": "15.5.4",
    "next-themes": "^0.4.6",
    "react": "19.1.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.1.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.67"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  /* Changed priority color from blue to amber for better dark mode visibility */
  --priority: oklch(0.75 0.15 70);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  /* Updated priority color to warm amber/orange for better dark mode visibility */
  --priority: oklch(0.8 0.16 60);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  /* Added priority color to theme */
  --color-priority: var(--priority);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }

/* Enhanced scrollbar styling for dense list view */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

::-webkit-scrollbar-track {
    @apply bg-card;
  }

::-webkit-scrollbar-thumb {
    @apply bg-muted rounded-lg;
    transition: background-color 0.2s ease;
  }

::-webkit-scrollbar-thumb:hover {
    @apply bg-muted-foreground/60;
  }

/* Smooth focus visible styles for accessibility */
  *:focus-visible {
    @apply outline-2 outline-offset-2 outline-ring;
  }

button:focus-visible {
    @apply outline-2 outline-offset-1;
  }
}

/* Additional utility classes for smooth interactions */
@layer utilities {
  .task-list-item {
    @apply transition-all duration-150 ease-in-out;
  }

.task-list-item:hover {
    @apply bg-accent/50;
  }

.task-list-item:active {
    @apply bg-accent/70 scale-[0.998];
  }

/* Drag state styling */
  .task-dragging {
    @apply opacity-50 scale-95;
  }

/* Smooth transitions for collapsible sections */
  .collapsible-section {
    @apply transition-all duration-200 ease-in-out;
  }

/* Updated priority highlight to use new priority color */
  @keyframes priority-pulse {
    0%,
    100% {
      background-color: color-mix(in oklch, var(--priority) 5%, transparent);
    }
    50% {
      background-color: color-mix(in oklch, var(--priority) 8%, transparent);
    }
  }

.priority-highlight {
    animation: priority-pulse 3s ease-in-out infinite;
  }

/* Smooth slide-in animations for panels */
  @keyframes slide-in-right {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

@keyframes slide-in-top {
    from {
      transform: translateY(-20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

@keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

.animate-slide-in-right {
    animation: slide-in-right 0.3s ease-out;
  }

.animate-slide-in-top {
    animation: slide-in-top 0.3s ease-out;
  }

.animate-fade-in {
    animation: fade-in 0.2s ease-out;
  }

/* Backdrop blur effect for command palette */
  .backdrop-blur-strong {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}
[V0_FILE]typescript:file="lib/types.ts" isMerged="true"
export type TaskStatus = "inbox" | "deferred" | "icebox"

export interface ChecklistItem {
  id: string
  text: string
  completed: boolean
  order: number
}

export interface Task {
  id: string
  title: string
  checklist: ChecklistItem[]
  status: TaskStatus
  tag: string | null
  isPriority: boolean
  createdAt: Date
  updatedAt: Date
}

export interface TagColor {
  tag: string
  color: string
}
[V0_FILE]typescriptreact:file="components/task-stats.tsx" isMerged="true"
"use client"

import { useTasks } from "@/lib/task-context"
import { CheckCircle2, ListTodo, TrendingUp } from "lucide-react"
import { cn } from "@/lib/utils"

export function TaskStats() {
  const { tasks } = useTasks()

const totalTasks = tasks.length
  const completedChecklists = tasks.filter((task) => {
    const checklist = task.checklist || []
    return checklist.length > 0 && checklist.every((item) => item.completed)
  }).length

const totalChecklistItems = tasks.reduce((sum, task) => sum + (task.checklist?.length || 0), 0)
  const completedChecklistItems = tasks.reduce(
    (sum, task) => sum + (task.checklist?.filter((item) => item.completed).length || 0),
    0,
  )

const completionRate = totalChecklistItems > 0 ? Math.round((completedChecklistItems / totalChecklistItems) * 100) : 0

return (
    <div className="flex items-center gap-6 px-6 py-3 bg-muted/30 border-b border-border">
      <div className="flex items-center gap-2">
        <ListTodo className="h-4 w-4 text-muted-foreground" />
        <div className="text-sm">
          <span className="font-medium text-foreground">{totalTasks}</span>
          <span className="text-muted-foreground ml-1">tasks</span>
        </div>
      </div>

{totalChecklistItems > 0 && (
        <>
          <div className="h-4 w-px bg-border" />
          <div className="flex items-center gap-2">
            <CheckCircle2 className="h-4 w-4 text-green-500" />
            <div className="text-sm">
              <span className="font-medium text-foreground">{completedChecklistItems}</span>
              <span className="text-muted-foreground">/{totalChecklistItems} items</span>
            </div>
          </div>
        </>
      )}

{completedChecklists > 0 && (
        <>
          <div className="h-4 w-px bg-border" />
          <div className="flex items-center gap-2">
            <TrendingUp className="h-4 w-4 text-priority" />
            <div className="text-sm">
              <span className="font-medium text-foreground">{completedChecklists}</span>
              <span className="text-muted-foreground ml-1">completed</span>
            </div>
          </div>
        </>
      )}

{totalChecklistItems > 0 && (
        <>
          <div className="h-4 w-px bg-border" />
          <div className="flex items-center gap-2">
            <div className="flex items-center gap-1.5">
              <div className="h-1.5 w-20 bg-muted rounded-full overflow-hidden">
                <div
                  className={cn("h-full bg-priority transition-all duration-300")}
                  style={{ width: `${completionRate}%` }}
                />
              </div>
              <span className="text-xs font-medium text-muted-foreground">{completionRate}%</span>
            </div>
          </div>
        </>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/color-picker.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Check } from "lucide-react"
import { cn } from "@/lib/utils"

interface ColorPickerProps {
  color: string
  onChange: (color: string) => void
  trigger?: React.ReactNode
}

const PRESET_COLORS = [
  // Reds
  { name: "Red", value: "oklch(0.65 0.24 25)" },
  { name: "Red Light", value: "oklch(0.72 0.22 25)" },
  { name: "Red Dark", value: "oklch(0.58 0.26 25)" },
  { name: "Crimson", value: "oklch(0.60 0.25 15)" },

// Oranges
  { name: "Orange", value: "oklch(0.70 0.22 45)" },
  { name: "Orange Light", value: "oklch(0.76 0.20 45)" },
  { name: "Coral", value: "oklch(0.72 0.21 35)" },
  { name: "Tangerine", value: "oklch(0.68 0.23 40)" },

// Yellows & Ambers
  { name: "Amber", value: "oklch(0.75 0.20 65)" },
  { name: "Yellow", value: "oklch(0.80 0.18 85)" },
  { name: "Gold", value: "oklch(0.73 0.19 75)" },
  { name: "Peach", value: "oklch(0.78 0.18 55)" },

// Greens
  { name: "Lime", value: "oklch(0.75 0.20 120)" },
  { name: "Green", value: "oklch(0.70 0.17 145)" },
  { name: "Emerald", value: "oklch(0.65 0.16 165)" },
  { name: "Mint", value: "oklch(0.72 0.14 155)" },
  { name: "Forest", value: "oklch(0.62 0.18 140)" },
  { name: "Sage", value: "oklch(0.68 0.12 150)" },

// Teals & Cyans
  { name: "Teal", value: "oklch(0.60 0.15 180)" },
  { name: "Cyan", value: "oklch(0.65 0.14 195)" },
  { name: "Aqua", value: "oklch(0.70 0.13 190)" },
  { name: "Turquoise", value: "oklch(0.67 0.14 185)" },

// Blues
  { name: "Sky", value: "oklch(0.70 0.13 215)" },
  { name: "Blue", value: "oklch(0.60 0.20 240)" },
  { name: "Blue Light", value: "oklch(0.68 0.18 235)" },
  { name: "Blue Dark", value: "oklch(0.55 0.22 245)" },
  { name: "Azure", value: "oklch(0.65 0.16 225)" },
  { name: "Cobalt", value: "oklch(0.58 0.21 250)" },

// Purples & Violets
  { name: "Indigo", value: "oklch(0.55 0.22 260)" },
  { name: "Violet", value: "oklch(0.60 0.24 280)" },
  { name: "Purple", value: "oklch(0.55 0.24 295)" },
  { name: "Purple Light", value: "oklch(0.63 0.22 290)" },
  { name: "Lavender", value: "oklch(0.68 0.18 285)" },
  { name: "Plum", value: "oklch(0.58 0.23 300)" },

// Pinks & Magentas
  { name: "Fuchsia", value: "oklch(0.65 0.26 310)" },
  { name: "Magenta", value: "oklch(0.62 0.28 320)" },
  { name: "Pink", value: "oklch(0.70 0.24 330)" },
  { name: "Pink Light", value: "oklch(0.75 0.20 335)" },
  { name: "Rose", value: "oklch(0.68 0.23 10)" },
  { name: "Hot Pink", value: "oklch(0.66 0.27 325)" },

// Neutrals
  { name: "Slate", value: "oklch(0.55 0.08 240)" },
  { name: "Gray", value: "oklch(0.60 0.04 270)" },
  { name: "Stone", value: "oklch(0.58 0.06 60)" },
  { name: "Warm Gray", value: "oklch(0.62 0.05 30)" },
  { name: "Cool Gray", value: "oklch(0.57 0.07 250)" },
  { name: "Charcoal", value: "oklch(0.52 0.06 260)" },
]

export function ColorPicker({ color, onChange, trigger }: ColorPickerProps) {
  const handlePresetClick = (presetColor: string) => {
    onChange(presetColor)
  }

return (
    <Popover>
      <PopoverTrigger asChild>
        {trigger || (
          <Button variant="outline" size="sm" className="gap-2 bg-transparent">
            <div className="h-4 w-4 rounded border border-border" style={{ backgroundColor: color }} />
            Color
          </Button>
        )}
      </PopoverTrigger>
      <PopoverContent className="w-80 p-4" align="start">
        <div className="space-y-3">
          <Label className="text-xs font-semibold">Choose Color</Label>
          <div className="grid grid-cols-8 gap-2">
            {PRESET_COLORS.map((preset) => (
              <button
                key={preset.value}
                onClick={() => handlePresetClick(preset.value)}
                className={cn(
                  "h-9 w-9 rounded-md border-2 transition-all hover:scale-110 hover:border-foreground/40",
                  color === preset.value ? "border-foreground ring-2 ring-foreground/30 scale-105" : "border-border/50",
                )}
                style={{ backgroundColor: preset.value }}
                title={preset.name}
                aria-label={`Select ${preset.name}`}
              >
                {color === preset.value && (
                  <Check className="h-4 w-4 text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)] mx-auto" />
                )}
              </button>
            ))}
          </div>

<div className="flex items-center gap-2 pt-2 border-t border-border">
            <div
              className="h-8 w-8 rounded-md border-2 border-border shadow-sm flex-shrink-0"
              style={{ backgroundColor: color }}
            />
            <div className="text-xs text-muted-foreground">Current selection</div>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}
[V0_FILE]typescriptreact:file="components/inline-task-form.tsx" isEdit="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 { useTasks } from "@/lib/task-context"
import type { TaskStatus } from "@/lib/types"
import { X, Tag } from "lucide-react"
import { Badge } from "@/components/ui/badge"

interface InlineTaskFormProps {
  defaultStatus?: TaskStatus
  onCancel?: () => void
  onSuccess?: () => void
}

export function InlineTaskForm({ defaultStatus = "inbox", onCancel, onSuccess }: InlineTaskFormProps) {
  const { addTask } = useTasks()
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  const [tagInput, setTagInput] = useState("")
  const [tags, setTags] = useState<string[]>([])
  const [showTagInput, setShowTagInput] = useState(false)
  const titleInputRef = useRef<HTMLInputElement>(null)

useEffect(() => {
    titleInputRef.current?.focus()
  }, [])

const handleAddTag = () => {
    const trimmedTag = tagInput.trim()
    if (trimmedTag && !tags.includes(trimmedTag)) {
      setTags([...tags, trimmedTag])
      setTagInput("")
    }
  }

const handleRemoveTag = (tagToRemove: string) => {
    setTags(tags.filter((tag) => tag !== tagToRemove))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!title.trim()) return

addTask({
      title: title.trim(),
      description: description.trim(),
      status: defaultStatus,
      tags,
      isPriority: false,
    })

setTitle("")
    setDescription("")
    setTags([])
    setTagInput("")
    setShowTagInput(false)
    onSuccess?.()
  }

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Escape") {
      onCancel?.()
    }
  }

const handleTagKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      e.preventDefault()
      handleAddTag()
    }
  }

return (
    <form onSubmit={handleSubmit} onKeyDown={handleKeyDown} className="border-b border-border bg-background px-4 py-3">
      <div className="space-y-2">
        <Input
          ref={titleInputRef}
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Task title..."
          className="bg-background border-border focus:border-ring h-9 text-sm"
          required
        />

<Input
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          placeholder="Description (optional)..."
          className="bg-background border-border focus:border-ring h-9 text-sm"
        />

{showTagInput && (
          <div className="flex gap-2">
            <Input
              value={tagInput}
              onChange={(e) => setTagInput(e.target.value)}
              onKeyDown={handleTagKeyDown}
              placeholder="Add tag..."
              className="bg-background border-border focus:border-ring h-8 text-xs"
            />
            <Button type="button" onClick={handleAddTag} variant="secondary" size="sm" className="h-8 px-3">
              Add
            </Button>
          </div>
        )}

{tags.length > 0 && (
          <div className="flex flex-wrap gap-1.5">
            {tags.map((tag) => (
              <Badge key={tag} variant="secondary" className="gap-1 pr-1 text-xs h-5">
                {tag}
                <button
                  type="button"
                  onClick={() => handleRemoveTag(tag)}
                  className="ml-0.5 rounded-sm hover:bg-muted p-0.5"
                >
                  <X className="h-2.5 w-2.5" />
                  <span className="sr-only">Remove {tag}</span>
                </button>
              </Badge>
            ))}
          </div>
        )}

<div className="flex items-center gap-2 pt-1">
          <Button type="submit" size="sm" className="h-8">
            Add Task
          </Button>
          <Button type="button" onClick={onCancel} variant="ghost" size="sm" className="h-8">
            Cancel
          </Button>
          {!showTagInput && (
            <Button
              type="button"
              onClick={() => setShowTagInput(true)}
              variant="ghost"
              size="sm"
              className="h-8 gap-1.5"
            >
              <Tag className="h-3.5 w-3.5" />
              Add Tags
            </Button>
          )}
        </div>
      </div>
    </form>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"
import { TaskProvider } from "@/lib/task-context"
import { Suspense } from "react"

export const metadata: Metadata = {
  title: "Tasks",
  description: "Created with v0",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className="dark">
      <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
        <Suspense fallback={<div>Loading...</div>}>
          <TaskProvider>{children}</TaskProvider>
        </Suspense>
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescript:file="lib/task-storage.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import type { Task, TagColor } from "./types"

const TASKS_KEY = "email-tasks"
const TAG_COLORS_KEY = "email-task-tag-colors"
const TAG_ORDER_KEY = "email-task-tag-order"

function migrateTask(task: any): Task {
  // If task already has checklist, return as is
  if (task.checklist) {
    return {
      ...task,
      createdAt: new Date(task.createdAt),
      updatedAt: new Date(task.updatedAt),
    }
  }

// Migrate old format to new format
  const checklist = []

// Convert old nextSteps (bullet points) to checklist items
  if (task.nextSteps && typeof task.nextSteps === "string") {
    const lines = task.nextSteps.split("\n").filter((line: string) => line.trim())
    for (const line of lines) {
      const trimmed = line.trim()
      if (trimmed.startsWith("- ")) {
        checklist.push({
          id: crypto.randomUUID(),
          text: trimmed.substring(2).trim(),
          completed: false,
        })
      }
    }
  }

// If there was a description, add it as the first checklist item
  if (task.description && typeof task.description === "string" && task.description.trim()) {
    checklist.unshift({
      id: crypto.randomUUID(),
      text: task.description.trim(),
      completed: false,
    })
  }

// Return migrated task
  return {
    ...task,
    checklist,
    createdAt: new Date(task.createdAt),
    updatedAt: new Date(task.updatedAt),
  }
}

export const taskStorage = {
  getTasks: (): Task[] => {
    if (typeof window === "undefined") return []
    const stored = localStorage.getItem(TASKS_KEY)
    if (!stored) return []
    const tasks = JSON.parse(stored)
    return tasks.map(migrateTask)
  },

saveTasks: (tasks: Task[]): void => {
    if (typeof window === "undefined") return
    localStorage.setItem(TASKS_KEY, JSON.stringify(tasks))
  },

getTagColors: (): TagColor[] => {
    if (typeof window === "undefined") return []
    const stored = localStorage.getItem(TAG_COLORS_KEY)
    return stored ? JSON.parse(stored) : []
  },

saveTagColors: (tagColors: TagColor[]): void => {
    if (typeof window === "undefined") return
    localStorage.setItem(TAG_COLORS_KEY, JSON.stringify(tagColors))
  },

getTagOrder: (): string[] => {
    if (typeof window === "undefined") return []
    const stored = localStorage.getItem(TAG_ORDER_KEY)
    return stored ? JSON.parse(stored) : []
  },

saveTagOrder: (tagOrder: string[]): void => {
    if (typeof window === "undefined") return
    localStorage.setItem(TAG_ORDER_KEY, JSON.stringify(tagOrder))
  },

exportData: (): string => {
    const tasks = taskStorage.getTasks()
    const tagColors = taskStorage.getTagColors()
    const tagOrder = taskStorage.getTagOrder()

const exportData = {
      version: "1.0",
      exportDate: new Date().toISOString(),
      tasks,
      tagColors,
      tagOrder,
    }

return JSON.stringify(exportData, null, 2)
  },

importData: (jsonString: string): { success: boolean; error?: string } => {
    try {
      const data = JSON.parse(jsonString)

// Validate the data structure
      if (!data.tasks || !Array.isArray(data.tasks)) {
        return { success: false, error: "Invalid data format: missing tasks array" }
      }

// Migrate and save tasks
      const migratedTasks = data.tasks.map(migrateTask)
      taskStorage.saveTasks(migratedTasks)

// Save tag colors if present
      if (data.tagColors && Array.isArray(data.tagColors)) {
        taskStorage.saveTagColors(data.tagColors)
      }

// Save tag order if present
      if (data.tagOrder && Array.isArray(data.tagOrder)) {
        taskStorage.saveTagOrder(data.tagOrder)
      }

return { success: true }
    } catch (error) {
      return { success: false, error: error instanceof Error ? error.message : "Failed to parse JSON" }
    }
  },
}
[V0_FILE]typescriptreact:file="lib/task-context.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"
import type { Task, TaskStatus, TagColor } from "./types"
import { taskStorage } from "./task-storage"

interface TaskContextType {
  tasks: Task[]
  addTask: (task: Omit<Task, "id" | "createdAt" | "updatedAt">) => void
  updateTask: (id: string, updates: Partial<Task>) => void
  deleteTask: (id: string) => void
  moveTask: (id: string, status: TaskStatus) => void
  togglePriority: (id: string) => void
  reorderTasks: (taskIds: string[]) => void
  tagColors: TagColor[]
  getTagColor: (tag: string) => string
  updateTagColor: (tag: string, color: string) => void
  deleteTag: (tag: string) => void
  tagOrder: string[]
  reorderTags: (tags: string[]) => void
}

const TaskContext = createContext<TaskContextType | undefined>(undefined)

const DEFAULT_COLORS = [
  "oklch(0.646 0.222 41.116)", // Orange
  "oklch(0.6 0.118 184.704)", // Cyan
  "oklch(0.769 0.188 70.08)", // Yellow
  "oklch(0.488 0.243 264.376)", // Purple
  "oklch(0.696 0.17 162.48)", // Green
  "oklch(0.627 0.265 303.9)", // Pink
]

export function TaskProvider({ children }: { children: React.ReactNode }) {
  const [tasks, setTasks] = useState<Task[]>([])
  const [tagColors, setTagColors] = useState<TagColor[]>([])
  const [tagOrder, setTagOrder] = useState<string[]>([])
  const [isLoaded, setIsLoaded] = useState(false)

useEffect(() => {
    const loadedTasks = taskStorage.getTasks()
    const loadedTagColors = taskStorage.getTagColors()
    const loadedTagOrder = taskStorage.getTagOrder()
    setTasks(loadedTasks)
    setTagColors(loadedTagColors)

const uniqueTags = Array.from(new Set(loadedTasks.map((t) => t.tag).filter(Boolean) as string[]))
    setTagOrder(loadedTagOrder.length > 0 ? loadedTagOrder : uniqueTags)
    setIsLoaded(true)
  }, [])

useEffect(() => {
    if (isLoaded) {
      const allTags = Array.from(new Set(tasks.map((t) => t.tag).filter(Boolean) as string[]))
      const missingTags = allTags.filter((tag) => !tagColors.find((tc) => tc.tag === tag))

if (missingTags.length > 0) {
        setTagColors((prev) => {
          const newTagColors = missingTags.map((tag, index) => ({
            tag,
            color: DEFAULT_COLORS[(prev.length + index) % DEFAULT_COLORS.length],
          }))
          return [...prev, ...newTagColors]
        })
      }
    }
  }, [tasks, isLoaded, tagColors])

useEffect(() => {
    if (isLoaded) {
      taskStorage.saveTasks(tasks)
      const uniqueTags = Array.from(new Set(tasks.map((t) => t.tag).filter(Boolean) as string[]))
      setTagOrder((prev) => {
        const newTags = uniqueTags.filter((t) => !prev.includes(t))
        return [...prev.filter((t) => uniqueTags.includes(t)), ...newTags]
      })
    }
  }, [tasks, isLoaded])

useEffect(() => {
    if (isLoaded) {
      taskStorage.saveTagColors(tagColors)
    }
  }, [tagColors, isLoaded])

useEffect(() => {
    if (isLoaded && tagOrder.length > 0) {
      taskStorage.saveTagOrder(tagOrder)
    }
  }, [tagOrder, isLoaded])

const addTask = (taskData: Omit<Task, "id" | "createdAt" | "updatedAt">) => {
    const newTask: Task = {
      ...taskData,
      checklist: taskData.checklist || [], // Ensure checklist is always initialized as empty array if not provided
      id: crypto.randomUUID(),
      createdAt: new Date(),
      updatedAt: new Date(),
    }
    setTasks((prev) => [newTask, ...prev])
  }

const updateTask = (id: string, updates: Partial<Task>) => {
    setTasks((prev) => prev.map((task) => (task.id === id ? { ...task, ...updates, updatedAt: new Date() } : task)))
  }

const deleteTask = (id: string) => {
    setTasks((prev) => prev.filter((task) => task.id !== id))
  }

const moveTask = (id: string, status: TaskStatus) => {
    updateTask(id, { status })
  }

const togglePriority = (id: string) => {
    setTasks((prev) =>
      prev.map((task) => (task.id === id ? { ...task, isPriority: !task.isPriority, updatedAt: new Date() } : task)),
    )
  }

const reorderTasks = (taskIds: string[]) => {
    setTasks((prev) => {
      const taskMap = new Map(prev.map((task) => [task.id, task]))
      return taskIds.map((id) => taskMap.get(id)).filter(Boolean) as Task[]
    })
  }

const reorderTags = (tags: string[]) => {
    setTagOrder(tags)
    taskStorage.saveTagOrder(tags)
  }

const getTagColor = (tag: string): string => {
    const existing = tagColors.find((tc) => tc.tag === tag)
    return existing?.color || DEFAULT_COLORS[0]
  }

const updateTagColor = (tag: string, color: string) => {
    setTagColors((prev) => {
      const existing = prev.find((tc) => tc.tag === tag)
      if (existing) {
        return prev.map((tc) => (tc.tag === tag ? { ...tc, color } : tc))
      }
      return [...prev, { tag, color }]
    })
  }

const deleteTag = (tag: string) => {
    // Remove the tag from all tasks
    setTasks((prev) => prev.map((task) => (task.tag === tag ? { ...task, tag: null, updatedAt: new Date() } : task)))
    // Remove the tag color
    setTagColors((prev) => prev.filter((tc) => tc.tag !== tag))
  }

return (
    <TaskContext.Provider
      value={{
        tasks,
        addTask,
        updateTask,
        deleteTask,
        moveTask,
        togglePriority,
        reorderTasks,
        tagColors,
        getTagColor,
        updateTagColor,
        deleteTag,
        tagOrder,
        reorderTags,
      }}
    >
      {children}
    </TaskContext.Provider>
  )
}

export function useTasks() {
  const context = useContext(TaskContext)
  if (!context) {
    throw new Error("useTasks must be used within TaskProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/tag-settings.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useTasks } from "@/lib/task-context"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu"
import { Settings, Trash2, Download, Upload } from "lucide-react"
import { ColorPicker } from "./color-picker"
import { taskStorage } from "@/lib/task-storage"
import { useRef } from "react"
import { toast } from "sonner"

export function TagSettings() {
  const { tasks, getTagColor, updateTagColor, deleteTag } = useTasks()
  const fileInputRef = useRef<HTMLInputElement>(null)

const existingTags = Array.from(new Set(tasks.map((t) => t.tag).filter(Boolean) as string[]))

const handleExport = () => {
    console.log("[v0] Export button clicked")
    try {
      const data = taskStorage.exportData()
      console.log("[v0] Export data generated:", data.substring(0, 100) + "...")

const blob = new Blob([data], { type: "application/json" })
      console.log("[v0] Blob created:", blob.size, "bytes")

const url = URL.createObjectURL(blob)
      console.log("[v0] Object URL created:", url)

const a = document.createElement("a")
      a.href = url
      a.download = `tasks-backup-${new Date().toISOString().split("T")[0]}.json`
      console.log("[v0] Download filename:", a.download)

document.body.appendChild(a)
      a.click()
      console.log("[v0] Download link clicked")

document.body.removeChild(a)
      URL.revokeObjectURL(url)
      console.log("[v0] Cleanup complete")

toast.success("Data exported successfully")
    } catch (error) {
      console.error("[v0] Export error:", error)
      toast.error("Export failed: " + (error instanceof Error ? error.message : "Unknown error"))
    }
  }

const handleImport = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (!file) return

const reader = new FileReader()
    reader.onload = (e) => {
      const content = e.target?.result as string
      const result = taskStorage.importData(content)

if (result.success) {
        toast.success("Data imported successfully. Reloading...")
        // Reload the page to refresh all data
        setTimeout(() => window.location.reload(), 500)
      } else {
        toast.error(`Import failed: ${result.error}`)
      }
    }
    reader.readAsText(file)

// Reset the input so the same file can be imported again
    if (fileInputRef.current) {
      fileInputRef.current.value = ""
    }
  }

return (
    <>
      <input
        ref={fileInputRef}
        type="file"
        accept="application/json,.json"
        onChange={handleImport}
        className="hidden"
        aria-label="Import data file"
      />

<DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" size="icon" className="h-9 w-9" aria-label="Tag settings">
            <Settings className="h-4 w-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-72">
          <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">Settings</div>
          <DropdownMenuSeparator />

<DropdownMenuItem onClick={handleExport} className="gap-2">
            <Download className="h-4 w-4" />
            <span>Export Data</span>
          </DropdownMenuItem>
          <DropdownMenuItem onClick={() => fileInputRef.current?.click()} className="gap-2">
            <Upload className="h-4 w-4" />
            <span>Import Data</span>
          </DropdownMenuItem>

<DropdownMenuSeparator />
          <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">Tag Colors</div>

{existingTags.length > 0 ? (
            <div className="max-h-[400px] overflow-y-auto">
              {existingTags.map((tag) => (
                <div key={tag} className="flex items-center justify-between px-2 py-2 gap-3 hover:bg-accent/50 rounded">
                  <div className="flex items-center gap-2 flex-1 min-w-0">
                    <div className="h-3 w-3 rounded-sm shrink-0" style={{ backgroundColor: getTagColor(tag) }} />
                    <span className="text-sm truncate font-medium">{tag}</span>
                  </div>
                  <div className="flex items-center gap-1 shrink-0">
                    <ColorPicker
                      color={getTagColor(tag)}
                      onChange={(color) => updateTagColor(tag, color)}
                      trigger={
                        <Button variant="ghost" size="icon" className="h-7 w-7">
                          <div
                            className="h-4 w-4 rounded border border-border"
                            style={{ backgroundColor: getTagColor(tag) }}
                          />
                        </Button>
                      }
                    />
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-7 w-7 hover:bg-destructive/10 hover:text-destructive"
                      onClick={() => deleteTag(tag)}
                      aria-label={`Delete ${tag} tag`}
                    >
                      <Trash2 className="h-3.5 w-3.5" />
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="px-2 py-8 text-center text-xs text-muted-foreground">
              No tags yet. Add a tag to a task to get started.
            </div>
          )}
        </DropdownMenuContent>
      </DropdownMenu>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/task-item.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import type { Task } from "@/lib/types"
import { useTasks } from "@/lib/task-context"
import { Button } from "@/components/ui/button"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { Star, Trash2, Clock, Archive, Inbox, Circle, CheckCircle2 } from "lucide-react"
import { cn } from "@/lib/utils"
import { useState } from "react"

interface TaskItemProps {
  task: Task
  isSelected: boolean
  onSelect: () => void
  onDragStart: (e: React.DragEvent) => void
  onDragEnd: (e: React.DragEvent) => void
  onDragOver: (e: React.DragEvent) => void
  onDrop: (e: React.DragEvent) => void
}

export function TaskItem({ task, isSelected, onSelect, onDragStart, onDragEnd, onDragOver, onDrop }: TaskItemProps) {
  const { deleteTask, moveTask, togglePriority } = useTasks()
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)

const handleMoveToInbox = (e: React.MouseEvent) => {
    e.stopPropagation()
    moveTask(task.id, "inbox")
  }

const handleDefer = (e: React.MouseEvent) => {
    e.stopPropagation()
    moveTask(task.id, "deferred")
  }

const handleMoveToIcebox = (e: React.MouseEvent) => {
    e.stopPropagation()
    moveTask(task.id, "icebox")
  }

const checklist = task.checklist || []
  const firstUncompletedItem = checklist.find((item) => !item.completed)
  const completedCount = checklist.filter((item) => item.completed).length

const handleTaskClick = (e: React.MouseEvent) => {
    e.stopPropagation()
    onSelect()
  }

const handleDeleteClick = (e: React.MouseEvent) => {
    e.stopPropagation()
    setShowDeleteDialog(true)
  }

const handleConfirmDelete = () => {
    deleteTask(task.id)
    setShowDeleteDialog(false)
  }

return (
    <>
      <div
        draggable
        onDragStart={onDragStart}
        onDragEnd={onDragEnd}
        onDragOver={onDragOver}
        onDrop={onDrop}
        onClick={handleTaskClick}
        className={cn(
          "group relative flex items-center gap-3 border-b border-border bg-card px-4 py-2.5 transition-all cursor-pointer select-none",
          "hover:bg-accent/50 active:cursor-grabbing",
          isSelected && "bg-accent/70 border-l-2 border-l-primary",
          task.isPriority && "bg-priority/5",
        )}
      >
        <button
          onClick={(e) => {
            e.stopPropagation()
            togglePriority(task.id)
          }}
          className={cn(
            "shrink-0 transition-all",
            task.isPriority
              ? "text-priority opacity-100"
              : "text-muted-foreground/40 opacity-0 group-hover:opacity-100 hover:text-muted-foreground",
          )}
          aria-label={task.isPriority ? "Remove from priority" : "Mark as priority"}
        >
          <Star className={cn("h-4 w-4", task.isPriority && "fill-priority")} />
        </button>

<div className="flex-1 min-w-0">
          <div className="flex items-baseline gap-2">
            <h3 className="font-medium text-foreground text-sm leading-tight truncate select-none">{task.title}</h3>
          </div>
          {firstUncompletedItem ? (
            <div className="flex items-center gap-1.5 mt-1">
              <Circle className="h-3 w-3 text-muted-foreground shrink-0" />
              <p className="text-xs text-muted-foreground leading-relaxed truncate select-none">
                {firstUncompletedItem.text}
              </p>
            </div>
          ) : checklist.length > 0 ? (
            <div className="flex items-center gap-1.5 mt-1">
              <CheckCircle2 className="h-3 w-3 text-green-500 shrink-0" />
              <p className="text-xs text-muted-foreground leading-relaxed select-none">All items completed</p>
            </div>
          ) : null}
          {/* Show checklist progress if items exist */}
          {checklist.length > 0 && (
            <p className="text-[10px] text-muted-foreground/70 mt-0.5 select-none">
              {completedCount}/{checklist.length} completed
            </p>
          )}
        </div>

<div className="shrink-0 flex items-center gap-1 opacity-20 group-hover:opacity-100 transition-opacity">
          {task.status !== "inbox" && (
            <Button
              variant="ghost"
              size="icon"
              className="h-7 w-7 hover:bg-accent hover:text-accent-foreground"
              onClick={handleMoveToInbox}
              title="Move to inbox"
            >
              <Inbox className="h-3.5 w-3.5" />
              <span className="sr-only">Move to inbox</span>
            </Button>
          )}
          {task.status !== "deferred" && (
            <Button
              variant="ghost"
              size="icon"
              className="h-7 w-7 hover:bg-accent hover:text-accent-foreground"
              onClick={handleDefer}
              title="Defer task"
            >
              <Clock className="h-3.5 w-3.5" />
              <span className="sr-only">Defer task</span>
            </Button>
          )}
          {task.status !== "icebox" && (
            <Button
              variant="ghost"
              size="icon"
              className="h-7 w-7 hover:bg-accent hover:text-accent-foreground"
              onClick={handleMoveToIcebox}
              title="Move to icebox"
            >
              <Archive className="h-3.5 w-3.5" />
              <span className="sr-only">Move to icebox</span>
            </Button>
          )}
          <Button
            variant="ghost"
            size="icon"
            className="h-7 w-7 hover:bg-destructive/10 hover:text-destructive"
            onClick={handleDeleteClick}
            title="Delete task"
          >
            <Trash2 className="h-3.5 w-3.5" />
            <span className="sr-only">Delete task</span>
          </Button>
        </div>
      </div>

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { useTasks } from "@/lib/task-context"
import { Input } from "@/components/ui/input"
import { Plus, X } from "lucide-react"
import { Badge } from "@/components/ui/badge"

interface CommandPaletteProps {
  currentStatus: "inbox" | "deferred" | "icebox"
  preSelectedTag?: string | null
  onTagClear?: () => void
}

export function CommandPalette({ currentStatus, preSelectedTag, onTagClear }: CommandPaletteProps) {
  const { addTask, getTagColor } = useTasks()
  const [title, setTitle] = useState("")
  const inputRef = useRef<HTMLInputElement>(null)

useEffect(() => {
    if (preSelectedTag) {
      inputRef.current?.focus()
    }
  }, [preSelectedTag])

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!title.trim()) return

addTask({
      title: title.trim(),
      description: "",
      nextSteps: "",
      status: currentStatus,
      tag: preSelectedTag || null,
      isPriority: false,
    })

setTitle("")
  }

const tagColor = preSelectedTag ? getTagColor(preSelectedTag) : undefined

return (
    <div className="fixed bottom-6 left-1/2 -translate-x-1/2 w-full max-w-2xl z-50 px-4">
      <form
        onSubmit={handleSubmit}
        className="bg-card/95 backdrop-blur-xl border border-border rounded-lg shadow-2xl overflow-hidden"
      >
        <div className="flex items-center gap-3 p-4">
          <Plus className="h-5 w-5 text-muted-foreground shrink-0" />
          <Input
            ref={inputRef}
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Add a new task..."
            className="flex-1 border-0 bg-transparent text-base font-medium focus-visible:ring-0 focus-visible:ring-offset-0 px-0 shadow-none"
          />
          {preSelectedTag && (
            <Badge
              variant="secondary"
              className="gap-1.5 pr-1.5 text-xs h-6"
              style={{
                backgroundColor: tagColor ? `${tagColor}20` : undefined,
                color: tagColor,
                borderColor: tagColor ? `${tagColor}40` : undefined,
              }}
            >
              {preSelectedTag}
              <button
                type="button"
                onClick={(e) => {
                  e.preventDefault()
                  onTagClear?.()
                }}
                className="ml-0.5 rounded-sm hover:bg-muted/50 p-0.5"
              >
                <X className="h-3 w-3" />
                <span className="sr-only">Clear tag</span>
              </button>
            </Badge>
          )}
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useMemo, useEffect, useRef } from "react"
import { useTasks } from "@/lib/task-context"
import { TaskItem } from "@/components/task-item"
import { TaskDetails } from "@/components/task-details"
import { CommandPalette } from "@/components/command-palette"
import { TagSettings } from "@/components/tag-settings"
import { Button } from "@/components/ui/button"
import { Inbox, Clock, Archive, ChevronDown, ChevronRight, Star, GripVertical, Plus } from "lucide-react"
import { cn } from "@/lib/utils"

type ViewMode = "inbox" | "deferred" | "icebox"

const DEFAULT_PANEL_WIDTH = 420
const MIN_PANEL_WIDTH = 320
const MAX_PANEL_WIDTH = 800
const PANEL_WIDTH_STORAGE_KEY = "taskDetailsPanelWidth"

export default function Home() {
  const { tasks, getTagColor, reorderTasks, tagOrder, reorderTags } = useTasks()
  const [viewMode, setViewMode] = useState<ViewMode>("inbox")
  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null)
  const [collapsedTags, setCollapsedTags] = useState<Set<string>>(new Set())
  const [draggedTaskId, setDraggedTaskId] = useState<string | null>(null)
  const [draggedTag, setDraggedTag] = useState<string | null>(null)
  const [dragOverTag, setDragOverTag] = useState<string | null>(null)
  const [preSelectedTag, setPreSelectedTag] = useState<string | null>(null)

const [panelWidth, setPanelWidth] = useState(DEFAULT_PANEL_WIDTH)
  const [isResizing, setIsResizing] = useState(false)
  const resizeStartX = useRef(0)
  const resizeStartWidth = useRef(0)
  const justFinishedResizing = useRef(false)

useEffect(() => {
    const savedWidth = localStorage.getItem(PANEL_WIDTH_STORAGE_KEY)
    if (savedWidth) {
      const width = Number.parseInt(savedWidth, 10)
      if (!isNaN(width) && width >= MIN_PANEL_WIDTH && width <= MAX_PANEL_WIDTH) {
        setPanelWidth(width)
      }
    }
  }, [])

useEffect(() => {
    if (panelWidth !== DEFAULT_PANEL_WIDTH) {
      localStorage.setItem(PANEL_WIDTH_STORAGE_KEY, panelWidth.toString())
    }
  }, [panelWidth])

const handleResizeStart = (e: React.MouseEvent) => {
    e.preventDefault()
    setIsResizing(true)
    resizeStartX.current = e.clientX
    resizeStartWidth.current = panelWidth
  }

useEffect(() => {
    if (!isResizing) return

const handleMouseMove = (e: MouseEvent) => {
      const delta = resizeStartX.current - e.clientX
      const newWidth = Math.max(MIN_PANEL_WIDTH, Math.min(MAX_PANEL_WIDTH, resizeStartWidth.current + delta))
      setPanelWidth(newWidth)
    }

const handleMouseUp = () => {
      setIsResizing(false)
      justFinishedResizing.current = true
      setTimeout(() => {
        justFinishedResizing.current = false
      }, 100)
    }

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

return () => {
      document.removeEventListener("mousemove", handleMouseMove)
      document.removeEventListener("mouseup", handleMouseUp)
    }
  }, [isResizing])

const [swipeState, setSwipeState] = useState<{
    startX: number
    startY: number
    currentX: number
    isSwiping: boolean
  } | null>(null)

const filteredTasks = useMemo(() => {
    return tasks.filter((task) => task.status === viewMode)
  }, [tasks, viewMode])

const priorityTasks = useMemo(() => filteredTasks.filter((task) => task.isPriority), [filteredTasks])
  const regularTasks = useMemo(() => filteredTasks.filter((task) => !task.isPriority), [filteredTasks])

const tasksByTag = useMemo(() => {
    const grouped = new Map<string, typeof regularTasks>()
    const untagged: typeof regularTasks = []

regularTasks.forEach((task) => {
      if (!task.tag) {
        untagged.push(task)
      } else {
        const existing = grouped.get(task.tag) || []
        grouped.set(task.tag, [...existing, task])
      }
    })

return { grouped, untagged }
  }, [regularTasks])

const sortedTags = useMemo(() => {
    const tags = Array.from(tasksByTag.grouped.keys())
    return tags.sort((a, b) => {
      const aIndex = tagOrder.indexOf(a)
      const bIndex = tagOrder.indexOf(b)
      if (aIndex === -1 && bIndex === -1) return a.localeCompare(b)
      if (aIndex === -1) return 1
      if (bIndex === -1) return -1
      return aIndex - bIndex
    })
  }, [tasksByTag.grouped, tagOrder])

const toggleTagCollapse = (tag: string) => {
    setCollapsedTags((prev) => {
      const next = new Set(prev)
      if (next.has(tag)) {
        next.delete(tag)
      } else {
        next.add(tag)
      }
      return next
    })
  }

const selectedTask = selectedTaskId ? tasks.find((t) => t.id === selectedTaskId) : null

const inboxCount = tasks.filter((t) => t.status === "inbox").length
  const deferredCount = tasks.filter((t) => t.status === "deferred").length
  const iceboxCount = tasks.filter((t) => t.status === "icebox").length

const handleDragStart = (taskId: string) => (e: React.DragEvent) => {
    setDraggedTaskId(taskId)
    e.dataTransfer.effectAllowed = "move"
  }

const handleDragEnd = () => {
    setDraggedTaskId(null)
  }

const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    e.dataTransfer.dropEffect = "move"
  }

const handleDrop = (targetTaskId: string) => (e: React.DragEvent) => {
    e.preventDefault()
    if (!draggedTaskId || draggedTaskId === targetTaskId) return

const currentTasks = filteredTasks.map((t) => t.id)
    const draggedIndex = currentTasks.indexOf(draggedTaskId)
    const targetIndex = currentTasks.indexOf(targetTaskId)

if (draggedIndex === -1 || targetIndex === -1) return

const newOrder = [...currentTasks]
    newOrder.splice(draggedIndex, 1)
    newOrder.splice(targetIndex, 0, draggedTaskId)

const otherTasks = tasks.filter((t) => !currentTasks.includes(t.id))
    const reorderedTasks = [...newOrder, ...otherTasks.map((t) => t.id)]
    reorderTasks(reorderedTasks)
  }

const handleTagDragStart = (tag: string) => (e: React.DragEvent) => {
    setDraggedTag(tag)
    e.dataTransfer.effectAllowed = "move"
  }

const handleTagDragOver = (tag: string) => (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    if (draggedTag && draggedTag !== tag) {
      setDragOverTag(tag)
    }
  }

const handleTagDragLeave = () => {
    setDragOverTag(null)
  }

const handleTagDrop = (targetTag: string) => (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()

if (!draggedTag || draggedTag === targetTag) {
      setDraggedTag(null)
      setDragOverTag(null)
      return
    }

const newOrder = [...sortedTags]
    const draggedIndex = newOrder.indexOf(draggedTag)
    const targetIndex = newOrder.indexOf(targetTag)

if (draggedIndex !== -1 && targetIndex !== -1) {
      newOrder.splice(draggedIndex, 1)
      // When dragging down, adjust target index to account for the removal shifting indices
      const finalIndex = draggedIndex < targetIndex ? targetIndex - 1 : targetIndex
      newOrder.splice(finalIndex, 0, draggedTag)
      reorderTags(newOrder)
    }

setDraggedTag(null)
    setDragOverTag(null)
  }

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

if (!draggedTag) {
      setDragOverTag(null)
      return
    }

const newOrder = [...sortedTags]
    const draggedIndex = newOrder.indexOf(draggedTag)

if (draggedIndex !== -1) {
      // Remove from current position and add to end
      newOrder.splice(draggedIndex, 1)
      newOrder.push(draggedTag)
      reorderTags(newOrder)
    }

setDraggedTag(null)
    setDragOverTag(null)
  }

const handleTagDragOverEnd = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    if (draggedTag) {
      setDragOverTag("__END__")
    }
  }

const handleTagDragEnd = () => {
    setDraggedTag(null)
    setDragOverTag(null)
  }

const viewModes: ViewMode[] = ["inbox", "deferred", "icebox"]

const navigateToNextView = () => {
    const currentIndex = viewModes.indexOf(viewMode)
    const nextIndex = (currentIndex + 1) % viewModes.length
    setViewMode(viewModes[nextIndex])
  }

const navigateToPreviousView = () => {
    const currentIndex = viewModes.indexOf(viewMode)
    const previousIndex = (currentIndex - 1 + viewModes.length) % viewModes.length
    setViewMode(viewModes[previousIndex])
  }

const handleTouchStart = (e: React.TouchEvent) => {
    if (draggedTaskId || selectedTask) return

const touch = e.touches[0]
    setSwipeState({
      startX: touch.clientX,
      startY: touch.clientY,
      currentX: touch.clientX,
      isSwiping: false,
    })
  }

const handleTouchMove = (e: React.TouchEvent) => {
    if (!swipeState) return

const touch = e.touches[0]
    const deltaX = Math.abs(touch.clientX - swipeState.startX)
    const deltaY = Math.abs(touch.clientY - swipeState.startY)

if (!swipeState.isSwiping && deltaX > deltaY && deltaX > 10) {
      setSwipeState({
        ...swipeState,
        currentX: touch.clientX,
        isSwiping: true,
      })
    } else if (swipeState.isSwiping) {
      setSwipeState({
        ...swipeState,
        currentX: touch.clientX,
      })
    }
  }

const handleTouchEnd = () => {
    if (!swipeState || !swipeState.isSwiping) {
      setSwipeState(null)
      return
    }

const deltaX = swipeState.currentX - swipeState.startX
    const threshold = 80

if (Math.abs(deltaX) > threshold) {
      if (deltaX > 0) {
        navigateToPreviousView()
      } else {
        navigateToNextView()
      }
    }

setSwipeState(null)
  }

const getSwipeTransform = () => {
    if (!swipeState || !swipeState.isSwiping) return "translateX(0)"

const deltaX = swipeState.currentX - swipeState.startX
    const clampedDelta = Math.max(-150, Math.min(150, deltaX * 0.5))
    return `translateX(${clampedDelta}px)`
  }

const handleQuickAddForTag = (tag: string) => {
    if (selectedTaskId) {
      setSelectedTaskId(null)
    }
    setPreSelectedTag(tag)
  }

return (
    <div className="flex flex-col h-screen bg-background">
      <header className="border-b border-border bg-card">
        <div className="flex items-center justify-between px-6 py-3">
          <div className="flex items-center gap-6">
            <h1 className="text-lg font-semibold text-foreground">Tasks</h1>

<nav className="flex items-center gap-1">
              <Button
                variant={viewMode === "inbox" ? "secondary" : "ghost"}
                size="sm"
                className={cn("gap-2", viewMode === "inbox" && "bg-secondary")}
                onClick={() => setViewMode("inbox")}
              >
                <Inbox className="h-4 w-4" />
                <span>Inbox</span>
              </Button>

<Button
                variant={viewMode === "deferred" ? "secondary" : "ghost"}
                size="sm"
                className={cn("gap-2", viewMode === "deferred" && "bg-secondary")}
                onClick={() => setViewMode("deferred")}
              >
                <Clock className="h-4 w-4" />
                <span>Deferred</span>
              </Button>

<Button
                variant={viewMode === "icebox" ? "secondary" : "ghost"}
                size="sm"
                className={cn("gap-2", viewMode === "icebox" && "bg-secondary")}
                onClick={() => setViewMode("icebox")}
              >
                <Archive className="h-4 w-4" />
                <span>Icebox</span>
              </Button>
            </nav>
          </div>
          <TagSettings />
        </div>
      </header>

<div
        className="flex flex-1 overflow-hidden"
        onClick={() => {
          if (!justFinishedResizing.current && selectedTask) {
            setSelectedTaskId(null)
          }
        }}
      >
        <main
          className="flex flex-col overflow-hidden"
          style={{
            width: selectedTask ? `calc(100% - ${panelWidth}px)` : "100%",
          }}
          onTouchStart={handleTouchStart}
          onTouchMove={handleTouchMove}
          onTouchEnd={handleTouchEnd}
        >
          <div
            className={cn(
              "flex-1 overflow-y-auto transition-transform",
              swipeState?.isSwiping ? "duration-0" : "duration-300 ease-out",
            )}
            style={{
              transform: getSwipeTransform(),
            }}
          >
            <div className={cn("max-w-5xl mx-auto", selectedTask ? "pb-4" : "pb-32")}>
              {priorityTasks.length > 0 && (
                <section className="border-b-2 border-priority/30 bg-priority/5">
                  <div className="flex items-center gap-2 px-6 py-3 bg-priority/10 border-b border-priority/20">
                    <Star className="h-4 w-4 text-priority fill-current" />
                    <h3 className="text-xs font-bold text-priority uppercase tracking-wider">
                      Priority Projects Today
                    </h3>
                    <div className="h-px flex-1 bg-priority/20" />
                  </div>
                  <div>
                    {priorityTasks.map((task) => (
                      <TaskItem
                        key={task.id}
                        task={task}
                        isSelected={selectedTaskId === task.id}
                        onSelect={() => setSelectedTaskId(task.id)}
                        onDragStart={handleDragStart(task.id)}
                        onDragEnd={handleDragEnd}
                        onDragOver={handleDragOver}
                        onDrop={handleDrop(task.id)}
                      />
                    ))}
                  </div>
                </section>
              )}

{sortedTags.map((tag) => {
                const tagTasks = tasksByTag.grouped.get(tag) || []
                const isCollapsed = collapsedTags.has(tag)
                const tagColor = getTagColor(tag)
                const isDragging = draggedTag === tag
                const isDragOver = dragOverTag === tag

return (
                  <section
                    key={tag}
                    className={cn(
                      "border-b border-border transition-opacity",
                      isDragging && "opacity-40",
                      isDragOver && "border-t-2 border-t-primary",
                    )}
                    onDragOver={handleTagDragOver(tag)}
                    onDragLeave={handleTagDragLeave}
                    onDrop={handleTagDrop(tag)}
                  >
                    <div className="flex items-center gap-0 border-b border-border/50 group">
                      <div
                        draggable
                        onDragStart={handleTagDragStart(tag)}
                        onDragEnd={handleTagDragEnd}
                        className="flex items-center justify-center px-3 py-2.5 cursor-move hover:bg-accent/50 transition-colors"
                      >
                        <GripVertical className="h-4 w-4 text-muted-foreground/50" />
                      </div>
                      <button
                        onClick={() => toggleTagCollapse(tag)}
                        className="flex items-center gap-2 px-3 py-2.5 flex-1 hover:bg-accent/50 transition-colors"
                      >
                        {isCollapsed ? (
                          <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
                        ) : (
                          <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
                        )}
                        <div className="h-2 w-2 rounded-full shrink-0" style={{ backgroundColor: tagColor }} />
                        <h3 className="text-xs font-bold uppercase tracking-wider" style={{ color: tagColor }}>
                          {tag}
                        </h3>
                        <div className="h-px flex-1 bg-border" />
                      </button>
                      <button
                        onClick={(e) => {
                          e.stopPropagation()
                          handleQuickAddForTag(tag)
                        }}
                        className="flex items-center justify-center px-3 py-2.5 opacity-20 hover:opacity-100 transition-opacity"
                        title={`Add task to ${tag}`}
                      >
                        <Plus className="h-4 w-4 text-muted-foreground" />
                      </button>
                    </div>
                    {!isCollapsed && (
                      <div>
                        {tagTasks.map((task) => (
                          <TaskItem
                            key={task.id}
                            task={task}
                            isSelected={selectedTaskId === task.id}
                            onSelect={() => setSelectedTaskId(task.id)}
                            onDragStart={handleDragStart(task.id)}
                            onDragEnd={handleDragEnd}
                            onDragOver={handleDragOver}
                            onDrop={handleDrop(task.id)}
                          />
                        ))}
                      </div>
                    )}
                  </section>
                )
              })}

{sortedTags.length > 0 && draggedTag && (
                <div
                  className={cn(
                    "h-8 border-b border-border transition-all",
                    dragOverTag === "__END__" && "border-t-2 border-t-primary bg-primary/5",
                  )}
                  onDragOver={handleTagDragOverEnd}
                  onDragLeave={handleTagDragLeave}
                  onDrop={handleTagDropAtEnd}
                />
              )}

{tasksByTag.untagged.length > 0 && (
                <section className="border-b border-border">
                  <div className="flex items-center gap-2 px-6 py-2.5 border-b border-border/50">
                    <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Other Tasks</h3>
                    <div className="h-px flex-1 bg-border" />
                  </div>
                  <div>
                    {tasksByTag.untagged.map((task) => (
                      <TaskItem
                        key={task.id}
                        task={task}
                        isSelected={selectedTaskId === task.id}
                        onSelect={() => setSelectedTaskId(task.id)}
                        onDragStart={handleDragStart(task.id)}
                        onDragEnd={handleDragEnd}
                        onDragOver={handleDragOver}
                        onDrop={handleDrop(task.id)}
                      />
                    ))}
                  </div>
                </section>
              )}

{filteredTasks.length === 0 && (
                <div className="flex flex-col items-center justify-center py-20 text-center px-6">
                  <div className="rounded-full bg-muted p-6 mb-4">
                    {viewMode === "inbox" && <Inbox className="h-8 w-8 text-muted-foreground" />}
                    {viewMode === "deferred" && <Clock className="h-8 w-8 text-muted-foreground" />}
                    {viewMode === "icebox" && <Archive className="h-8 w-8 text-muted-foreground" />}
                  </div>
                  <h3 className="text-lg font-medium text-foreground mb-2">No tasks in {viewMode}</h3>
                  <p className="text-sm text-muted-foreground max-w-sm">
                    Use the quick add box below to create your first task.
                  </p>
                </div>
              )}
            </div>
          </div>
        </main>

{selectedTask && (
          <div
            className={cn(
              "w-1 bg-border hover:bg-primary/50 cursor-col-resize transition-colors relative group",
              isResizing && "bg-primary",
            )}
            onMouseDown={handleResizeStart}
          >
            <div className="absolute inset-y-0 -left-1 -right-1" />
          </div>
        )}

{selectedTask && (
          <TaskDetails task={selectedTask} onClose={() => setSelectedTaskId(null)} panelWidth={panelWidth} />
        )}
      </div>

{!selectedTask && (
        <CommandPalette
          currentStatus={viewMode}
          preSelectedTag={preSelectedTag}
          onTagClear={() => setPreSelectedTag(null)}
        />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/task-details.tsx" isEdit="true" isQuickEdit="true"
"use client"

import React from "react"

import type { Task, ChecklistItem } from "@/lib/types"
import { useTasks } from "@/lib/task-context"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { X, Star, Archive, Inbox, Tag, Clock, Trash2, GripVertical, ChevronDown, MoreVertical } from "lucide-react"
import { cn } from "@/lib/utils"
import { useState, useRef, useEffect } from "react"

interface TaskDetailsProps {
  task: Task
  onClose: () => void
  panelWidth: number // Added panelWidth prop
}

export function TaskDetails({ task, onClose, panelWidth }: TaskDetailsProps) {
  const { updateTask, moveTask, togglePriority, deleteTask, getTagColor, tasks } = useTasks()
  const [editingTitle, setEditingTitle] = useState(false)
  const [titleValue, setTitleValue] = useState(task.title)
  const [tagPopoverOpen, setTagPopoverOpen] = useState(false)
  const [tagSearch, setTagSearch] = useState("")
  const [newItemText, setNewItemText] = useState("")
  const [editingItemId, setEditingItemId] = useState<string | null>(null)
  const [editingItemText, setEditingItemText] = useState("")
  const [draggedItemId, setDraggedItemId] = useState<string | null>(null)
  const [dragPosition, setDragPosition] = useState<{ x: number; y: number } | null>(null)
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const titleInputRef = useRef<HTMLInputElement>(null)
  const newItemInputRef = useRef<HTMLInputElement>(null)
  const editItemInputRef = useRef<HTMLInputElement>(null)

useEffect(() => {
    if (editingTitle && titleInputRef.current) {
      titleInputRef.current.focus()
    }
  }, [editingTitle])

useEffect(() => {
    if (editingItemId && editItemInputRef.current) {
      editItemInputRef.current.focus()
    }
  }, [editingItemId])

const sortedChecklist = [...task.checklist].sort((a, b) => a.order - b.order)
  const completedCount = sortedChecklist.filter((item) => item.completed).length
  const totalCount = sortedChecklist.length
  const completionPercentage = totalCount > 0 ? (completedCount / totalCount) * 100 : 0

const existingTags = Array.from(new Set(tasks.map((t) => t.tag).filter(Boolean) as string[]))

const availableColors = [
    { name: "Orange", value: "oklch(0.646 0.222 41.116)" },
    { name: "Cyan", value: "oklch(0.6 0.118 184.704)" },
    { name: "Yellow", value: "oklch(0.769 0.188 70.08)" },
    { name: "Purple", value: "oklch(0.488 0.243 264.376)" },
    { name: "Green", value: "oklch(0.696 0.17 162.48)" },
    { name: "Pink", value: "oklch(0.627 0.265 303.9)" },
    { name: "Blue", value: "oklch(0.5 0.2 240)" },
    { name: "Red", value: "oklch(0.6 0.22 25)" },
  ]

const handleTitleSave = () => {
    const trimmedTitle = titleValue.trim()
    if (trimmedTitle && trimmedTitle !== task.title) {
      updateTask(task.id, { title: trimmedTitle })
    } else {
      setTitleValue(task.title)
    }
    setEditingTitle(false)
  }

const handleAddItem = () => {
    if (!newItemText.trim()) return

const newItem: ChecklistItem = {
      id: crypto.randomUUID(),
      text: newItemText.trim(),
      completed: false,
      order: task.checklist.length,
    }

updateTask(task.id, {
      checklist: [...task.checklist, newItem],
    })
    setNewItemText("")
    newItemInputRef.current?.focus()
  }

const handleToggleItem = (itemId: string) => {
    const updatedChecklist = task.checklist.map((item) =>
      item.id === itemId ? { ...item, completed: !item.completed } : item,
    )
    updateTask(task.id, { checklist: updatedChecklist })
  }

const handleDeleteItem = (itemId: string) => {
    const updatedChecklist = task.checklist.filter((item) => item.id !== itemId)
    updateTask(task.id, { checklist: updatedChecklist })
  }

const handleStartEdit = (item: ChecklistItem) => {
    setEditingItemId(item.id)
    setEditingItemText(item.text)
  }

const handleSaveEdit = () => {
    if (!editingItemId || !editingItemText.trim()) {
      setEditingItemId(null)
      return
    }

const updatedChecklist = task.checklist.map((item) =>
      item.id === editingItemId ? { ...item, text: editingItemText.trim() } : item,
    )
    updateTask(task.id, { checklist: updatedChecklist })
    setEditingItemId(null)
  }

const handleDragStart = (itemId: string) => (e: React.DragEvent) => {
    setDraggedItemId(itemId)
    e.dataTransfer.effectAllowed = "move"
    const dragImage = document.createElement("div")
    dragImage.style.opacity = "0"
    document.body.appendChild(dragImage)
    e.dataTransfer.setDragImage(dragImage, 0, 0)
    setTimeout(() => document.body.removeChild(dragImage), 0)
  }

const handleDrag = (e: React.DragEvent) => {
    if (e.clientX === 0 && e.clientY === 0) return
    setDragPosition({ x: e.clientX, y: e.clientY })
  }

const handleDragEnd = () => {
    setDraggedItemId(null)
    setDragPosition(null)
  }

const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    e.dataTransfer.dropEffect = "move"
  }

const handleDrop = (targetItemId: string) => (e: React.DragEvent) => {
    e.preventDefault()
    if (!draggedItemId || draggedItemId === targetItemId) return

const draggedIndex = sortedChecklist.findIndex((item) => item.id === draggedItemId)
    const targetIndex = sortedChecklist.findIndex((item) => item.id === targetItemId)

if (draggedIndex === -1 || targetIndex === -1) return

const reordered = [...sortedChecklist]
    const [removed] = reordered.splice(draggedIndex, 1)
    reordered.splice(targetIndex, 0, removed)

const updatedChecklist = reordered.map((item, index) => ({ ...item, order: index }))
    updateTask(task.id, { checklist: updatedChecklist })
  }

const handleTagSelect = (tag: string) => {
    updateTask(task.id, { tag: tag || null })
    setTagPopoverOpen(false)
    setTagSearch("")
  }

const handleRemoveTag = () => {
    updateTask(task.id, { tag: null })
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "inbox":
        return Inbox
      case "deferred":
        return Clock
      case "icebox":
        return Archive
      default:
        return Inbox
    }
  }

const handleDeleteClick = () => {
    setShowDeleteDialog(true)
  }

const handleConfirmDelete = () => {
    deleteTask(task.id)
    setShowDeleteDialog(false)
    onClose()
  }

const draggedItem = draggedItemId ? sortedChecklist.find((item) => item.id === draggedItemId) : null

return (
    <>
      <aside
        className="border-l border-border bg-card flex flex-col h-full animate-slide-in-right"
        style={{ width: `${panelWidth}px` }} // Use dynamic width from prop
        onClick={(e) => e.stopPropagation()}
      >
        <header className="flex items-center justify-between px-6 py-4 border-b border-border">
          <Button variant="ghost" size="icon" className="h-8 w-8 -ml-2" onClick={onClose} aria-label="Close details">
            <X className="h-4 w-4" />
          </Button>
          <div className="flex items-center gap-1">
            <Button
              variant="ghost"
              size="icon"
              className="h-8 w-8"
              onClick={() => togglePriority(task.id)}
              aria-label={task.isPriority ? "Remove from priority" : "Mark as priority"}
            >
              <Star
                className={cn(
                  "h-5 w-5 transition-all",
                  task.isPriority
                    ? "fill-priority text-priority scale-110"
                    : "text-muted-foreground hover:text-foreground",
                )}
              />
            </Button>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon" className="h-8 w-8 -mr-2" aria-label="More options">
                  <MoreVertical className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={handleDeleteClick} className="text-destructive focus:text-destructive gap-2">
                  <Trash2 className="h-4 w-4" />
                  Delete Task
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </header>

<div className="flex-1 overflow-y-auto">
          <div className="p-6 space-y-6">
            <div className="space-y-3">
              {editingTitle ? (
                <Input
                  ref={titleInputRef}
                  value={titleValue}
                  onChange={(e) => setTitleValue(e.target.value)}
                  onBlur={handleTitleSave}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") handleTitleSave()
                    if (e.key === "Escape") {
                      setTitleValue(task.title)
                      setEditingTitle(false)
                    }
                  }}
                  className="text-2xl font-bold h-auto py-2 px-3"
                />
              ) : (
                <h2
                  onClick={() => setEditingTitle(true)}
                  className="text-2xl font-bold text-foreground leading-tight text-balance cursor-text hover:text-foreground/80 transition-colors"
                >
                  {task.title}
                </h2>
              )}

<div className="flex flex-wrap items-center gap-2">
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="secondary" size="sm" className="gap-1.5 h-7 px-2.5 text-xs font-medium capitalize">
                      {React.createElement(getStatusIcon(task.status), { className: "h-3 w-3" })}
                      {task.status}
                      <ChevronDown className="h-3 w-3 opacity-50" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="start">
                    {task.status !== "inbox" && (
                      <DropdownMenuItem onClick={() => moveTask(task.id, "inbox")} className="gap-2">
                        <Inbox className="h-4 w-4" />
                        Inbox
                      </DropdownMenuItem>
                    )}
                    {task.status !== "deferred" && (
                      <DropdownMenuItem onClick={() => moveTask(task.id, "deferred")} className="gap-2">
                        <Clock className="h-4 w-4" />
                        Deferred
                      </DropdownMenuItem>
                    )}
                    {task.status !== "icebox" && (
                      <DropdownMenuItem onClick={() => moveTask(task.id, "icebox")} className="gap-2">
                        <Archive className="h-4 w-4" />
                        Icebox
                      </DropdownMenuItem>
                    )}
                  </DropdownMenuContent>
                </DropdownMenu>

<Popover open={tagPopoverOpen} onOpenChange={setTagPopoverOpen}>
                  <PopoverTrigger asChild>
                    {task.tag ? (
                      <Badge
                        variant="outline"
                        className="gap-1.5 px-2.5 h-7 text-xs font-medium cursor-pointer hover:opacity-80 transition-opacity"
                        style={{
                          backgroundColor: `color-mix(in oklch, ${getTagColor(task.tag)} 15%, transparent)`,
                          color: getTagColor(task.tag),
                          borderColor: `color-mix(in oklch, ${getTagColor(task.tag)} 30%, transparent)`,
                        }}
                      >
                        <Tag className="h-3 w-3" />
                        {task.tag}
                        <X
                          className="h-3 w-3 hover:opacity-70"
                          onClick={(e) => {
                            e.preventDefault()
                            e.stopPropagation()
                            handleRemoveTag()
                          }}
                        />
                      </Badge>
                    ) : (
                      <Button variant="ghost" size="sm" className="h-7 gap-1.5 px-2.5 text-xs text-muted-foreground">
                        <Tag className="h-3 w-3" />
                        Add tag
                      </Button>
                    )}
                  </PopoverTrigger>
                  <PopoverContent className="w-[200px] p-0" align="start">
                    <Command>
                      <CommandInput
                        placeholder="Search or create tag..."
                        value={tagSearch}
                        onValueChange={setTagSearch}
                      />
                      <CommandList>
                        <CommandEmpty>
                          {tagSearch.trim() ? (
                            <div className="py-6 text-center text-sm">
                              <p className="text-muted-foreground mb-2">No tag found</p>
                              <Button
                                size="sm"
                                variant="secondary"
                                onClick={() => {
                                  if (tagSearch.trim()) {
                                    handleTagSelect(tagSearch.trim())
                                  }
                                }}
                                className="gap-1.5"
                              >
                                <Tag className="h-3 w-3" />
                                Create "{tagSearch}"
                              </Button>
                            </div>
                          ) : (
                            <div className="py-6 text-center text-sm text-muted-foreground">
                              Start typing to search or create a tag
                            </div>
                          )}
                        </CommandEmpty>
                        <CommandGroup>
                          {existingTags
                            .filter((tag) => tag.toLowerCase().includes(tagSearch.toLowerCase()))
                            .map((tag) => (
                              <CommandItem key={tag} onSelect={() => handleTagSelect(tag)} className="gap-2">
                                <div className="h-3 w-3 rounded-sm" style={{ backgroundColor: getTagColor(tag) }} />
                                {tag}
                              </CommandItem>
                            ))}
                          {tagSearch.trim() &&
                            !existingTags.some((tag) => tag.toLowerCase() === tagSearch.toLowerCase()) && (
                              <CommandItem onSelect={() => handleTagSelect(tagSearch.trim())} className="gap-2">
                                <Tag className="h-3 w-3" />
                                Create "{tagSearch}"
                              </CommandItem>
                            )}
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>
              </div>
            </div>

<div className="space-y-3">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-semibold text-foreground">Checklist</h3>
                {totalCount > 0 && (
                  <span className="text-xs text-muted-foreground font-medium">
                    {completedCount} of {totalCount}
                  </span>
                )}
              </div>

{totalCount > 0 && (
                <div className="h-1.5 w-full bg-muted rounded-full overflow-hidden">
                  <div
                    className="h-full bg-priority transition-all duration-300 ease-out rounded-full"
                    style={{ width: `${completionPercentage}%` }}
                  />
                </div>
              )}

<div className="space-y-1">
                {sortedChecklist.map((item) => (
                  <div
                    key={item.id}
                    draggable
                    onDragStart={handleDragStart(item.id)}
                    onDrag={handleDrag}
                    onDragEnd={handleDragEnd}
                    onDragOver={handleDragOver}
                    onDrop={handleDrop(item.id)}
                    className={cn(
                      "group flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-accent/50 transition-all",
                      draggedItemId === item.id && "opacity-30",
                      item.completed && "opacity-70",
                    )}
                  >
                    <Checkbox
                      checked={item.completed}
                      onCheckedChange={() => handleToggleItem(item.id)}
                      className="shrink-0 h-5 w-5 border-2 data-[state=checked]:bg-primary data-[state=checked]:border-primary"
                      aria-label={`Mark "${item.text}" as ${item.completed ? "incomplete" : "complete"}`}
                    />
                    {editingItemId === item.id ? (
                      <Input
                        ref={editItemInputRef}
                        value={editingItemText}
                        onChange={(e) => setEditingItemText(e.target.value)}
                        onBlur={handleSaveEdit}
                        onKeyDown={(e) => {
                          if (e.key === "Enter") handleSaveEdit()
                          if (e.key === "Escape") setEditingItemId(null)
                        }}
                        className="h-8 text-sm flex-1 px-2"
                      />
                    ) : (
                      <span
                        onClick={() => handleStartEdit(item)}
                        className={cn(
                          "flex-1 text-sm leading-relaxed cursor-text hover:text-foreground transition-colors",
                          item.completed && "line-through text-muted-foreground",
                        )}
                      >
                        {item.text}
                      </span>
                    )}
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity shrink-0 hover:bg-destructive/10 hover:text-destructive"
                      onClick={() => handleDeleteItem(item.id)}
                      aria-label={`Delete "${item.text}"`}
                    >
                      <Trash2 className="h-3.5 w-3.5" />
                    </Button>
                    <div className="cursor-move shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
                      <GripVertical className="h-4 w-4 text-muted-foreground" />
                    </div>
                  </div>
                ))}
              </div>

<div className="flex items-center gap-3 px-3 pt-1">
                <div className="h-5 w-5 shrink-0" />
                <Input
                  ref={newItemInputRef}
                  value={newItemText}
                  onChange={(e) => setNewItemText(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") handleAddItem()
                  }}
                  placeholder="Add item..."
                  className="h-9 text-sm flex-1 border-dashed bg-transparent"
                />
              </div>
            </div>
          </div>
        </div>

{draggedItem && dragPosition && (
          <div
            className="fixed pointer-events-none z-50"
            style={{
              left: dragPosition.x,
              top: dragPosition.y,
              transform: "translate(-50%, -50%)",
            }}
          >
            <div className="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-card border-2 border-primary shadow-2xl opacity-90 min-w-[300px]">
              <Checkbox checked={draggedItem.completed} className="shrink-0 h-5 w-5 border-2 pointer-events-none" />
              <span
                className={cn(
                  "flex-1 text-sm leading-relaxed",
                  draggedItem.completed && "line-through text-muted-foreground",
                )}
              >
                {draggedItem.text}
              </span>
              <div className="shrink-0">
                <GripVertical className="h-4 w-4 text-muted-foreground" />
              </div>
            </div>
          </div>
        )}
      </aside>

<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <AlertDialogContent onClick={(e) => e.stopPropagation()}>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete task?</AlertDialogTitle>
            <AlertDialogDescription>
              Are you sure you want to delete "{task.title}"? This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={handleConfirmDelete} className="bg-destructive hover:bg-destructive/90">
              Delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  )
}88:["$","$L8f",null,{"chatId":"sDiyfnwyFts","children":["$","$L90",null,{"data":{"@\"active-block\",\"sDiyfnwyFts\",":{"id":"b_tfjJGG9pRgZ","messageId":"8wTLUWxrsTvHRa3kb2bGIXJXvbb4M1wU","source":"$91","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"email-task-app","type":"code-project","project":"email-task-app","taskNameActive":"Fixing cursor placement","taskNameComplete":"Fixed cursor placement"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"sDiyfnwyFts\",":false},"children":"$L92"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This