\n {/* Logo */}\n

\n \n

\n Todo Cards\n

\n\n {/* Right side */}\n

\n \n {user && }\n

\n );\n}\n\nexport default AppHeader;\n",[],[189,196,203],{"_106":211,"_97":212,"_160":213,"_162":197,"_163":145,"_164":214,"_166":167,"_108":215,"_102":33,"_169":182,"_171":216,"_172":22,"_173":-5,"_174":217,"_100":218},"b2f0a984-fe38-11f0-99bf-42dde27851f2","ErrorBoundary.tsx","b2f0aa56-fe38-11f0-99bf-42dde27851f2",13,["D",1769817992215],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface Props {\n children: React.ReactNode;\n fallback?: React.ReactNode;\n}\n\ninterface State {\n hasError: boolean;\n error: Error | null;\n}\n\nexport class ErrorBoundary extends React.Component {\n constructor(props: Props) {\n super(props);\n this.state = { hasError: false, error: null };\n }\n\n static getDerivedStateFromError(error: Error): State {\n return { hasError: true, error };\n }\n\n componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n console.error(\"ErrorBoundary caught an error:\", error, errorInfo);\n }\n\n render() {\n if (this.state.hasError) {\n if (this.props.fallback) {\n return this.props.fallback;\n }\n\n return (\n

\n \n \n \n

\n Something went wrong\n

\n {this.state.error?.message || \"An unexpected error occurred\"}\n

\n window.location.reload()}\n className=\"px-6 py-2 bg-warm-500 hover:bg-warm-600 text-white rounded-lg font-medium transition-colors\"\n >\n Reload Page\n \n

\n );\n }\n\n return this.props.children;\n }\n}\n\nexport default ErrorBoundary;\n",[],[189,196,212],{"_106":220,"_97":221,"_160":222,"_162":197,"_163":145,"_164":223,"_166":167,"_108":224,"_102":33,"_169":182,"_171":225,"_172":22,"_173":-5,"_174":226,"_100":227},"bb118eee-fe38-11f0-8f85-42dde27851f2","Icons.tsx","bb118fde-fe38-11f0-8f85-42dde27851f2",14,["D",1769818005852],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface IconProps {\n className?: string;\n}\n\nexport function CheckIcon({ className = \"w-5 h-5\" }: IconProps) {\n return (\n \n );\n}\n\nexport function PlusIcon({ className = \"w-5 h-5\" }: IconProps) {\n return (\n \n );\n}\n\nexport function TrashIcon({ className = \"w-5 h-5\" }: IconProps) {\n return (\n \n );\n}\n\nexport function PencilIcon({ className = \"w-5 h-5\" }: IconProps) {\n return (\n \n );\n}\n\nexport function XIcon({ className = \"w-5 h-5\" }: IconProps) {\n return (\n \n );\n}\n\nexport function SunIcon({ className = \"w-5 h-5\" }: IconProps) {\n return (\n \n );\n}\n\nexport function MoonIcon({ className = \"w-5 h-5\" }: IconProps) {\n return (\n \n );\n}\n\nexport function LogoutIcon({ className = \"w-5 h-5\" }: IconProps) {\n return (\n \n );\n}\n\nexport function SpinnerIcon({ className = \"w-5 h-5\" }: IconProps) {\n return (\n \n );\n}\n\nexport function CheckCircleIcon({ className = \"w-5 h-5\" }: IconProps) {\n return (\n \n );\n}\n\nexport function CircleIcon({ className = \"w-5 h-5\" }: IconProps) {\n return (\n \n );\n}\n",[],[189,196,221],{"_106":229,"_97":230,"_160":231,"_162":197,"_163":145,"_164":232,"_166":167,"_108":233,"_102":33,"_169":182,"_171":234,"_172":22,"_173":-5,"_174":235,"_100":236},"bd8aebfc-fe38-11f0-87ba-42dde27851f2","ThemeToggle.tsx","bd8aecd8-fe38-11f0-87ba-42dde27851f2",15,["D",1769818010003],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { SunIcon, MoonIcon } from \"./Icons.tsx\";\n\nexport function ThemeToggle() {\n const [isDark, setIsDark] = useState(() => {\n if (typeof window !== \"undefined\") {\n const stored = localStorage.getItem(\"theme\");\n if (stored) return stored === \"dark\";\n return window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n }\n return false;\n });\n\n useEffect(() => {\n const root = document.documentElement;\n if (isDark) {\n root.classList.add(\"dark\");\n localStorage.setItem(\"theme\", \"dark\");\n } else {\n root.classList.remove(\"dark\");\n localStorage.setItem(\"theme\", \"light\");\n }\n }, [isDark]);\n\n return (\n setIsDark(!isDark)}\n className=\"p-2 rounded-lg bg-warm-100 dark:bg-gray-700 hover:bg-warm-200 dark:hover:bg-gray-600 text-warm-700 dark:text-warm-300 transition-colors\"\n aria-label={isDark ? \"Switch to light mode\" : \"Switch to dark mode\"}\n >\n {isDark ? : }\n \n );\n}\n\nexport default ThemeToggle;\n",[],[189,196,230],{"_106":238,"_97":239,"_160":240,"_162":197,"_163":145,"_164":241,"_166":167,"_108":242,"_102":33,"_169":182,"_171":243,"_172":22,"_173":-5,"_174":244,"_100":245},"cc61e2de-fe38-11f0-99bf-42dde27851f2","TodoCard.tsx","cc61e374-fe38-11f0-99bf-42dde27851f2",18,["D",1769818034901],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Todo } from \"../../Shared/types.ts\";\nimport { PRIORITIES } from \"../../Shared/config.ts\";\nimport { CheckCircleIcon, CircleIcon, PencilIcon, TrashIcon, SpinnerIcon } from \"./Icons.tsx\";\n\ninterface Props {\n todo: Todo;\n onToggle: (id: number) => void;\n onEdit: (todo: Todo) => void;\n onDelete: (id: number) => void;\n isLoading?: boolean;\n}\n\nexport function TodoCard({ todo, onToggle, onEdit, onDelete, isLoading }: Props) {\n const priority = PRIORITIES[todo.priority];\n \n const priorityColors = {\n low: \"bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400\",\n medium: \"bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400\",\n high: \"bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400\",\n };\n\n const borderColors = {\n low: \"border-l-emerald-500\",\n medium: \"border-l-amber-500\",\n high: \"border-l-rose-500\",\n };\n\n return (\n \n

\n {/* Header row */}\n

\n {/* Toggle button */}\n onToggle(todo.id)}\n disabled={isLoading}\n className={`\n flex-shrink-0 mt-0.5 rounded-full transition-colors\n ${todo.completed\n ? \"text-warm-500 hover:text-warm-600\"\n : \"text-gray-400 hover:text-warm-500\"\n }\n `}\n aria-label={todo.completed ? \"Mark as incomplete\" : \"Mark as complete\"}\n >\n {isLoading ? (\n \n ) : todo.completed ? (\n \n ) : (\n \n )}\n \n\n {/* Content */}\n

\n \n {todo.title}\n \n {todo.description && (\n \n {todo.description}\n

\n )}\n

\n\n {/* Priority badge */}\n \n {priority.label}\n \n

\n\n {/* Footer row */}\n

\n \n {new Date(todo.createdAt).toLocaleDateString()}\n \n \n

\n onEdit(todo)}\n disabled={isLoading}\n className=\"p-1.5 rounded-lg text-gray-500 hover:text-warm-600 hover:bg-warm-50 dark:hover:bg-gray-700 transition-colors\"\n aria-label=\"Edit todo\"\n >\n \n \n onDelete(todo.id)}\n disabled={isLoading}\n className=\"p-1.5 rounded-lg text-gray-500 hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-900/20 transition-colors\"\n aria-label=\"Delete todo\"\n >\n \n \n

\n \n );\n}\n\nexport default TodoCard;\n",[],[189,196,239],{"_106":247,"_97":248,"_160":249,"_162":197,"_163":145,"_164":250,"_166":167,"_108":251,"_102":33,"_169":182,"_171":252,"_172":22,"_173":-5,"_174":253,"_100":254},"d660f720-fe38-11f0-87ba-42dde27851f2","TodoForm.tsx","d660f806-fe38-11f0-87ba-42dde27851f2",19,["D",1769818051672],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { Todo, CreateTodoInput } from \"../../Shared/types.ts\";\nimport { PRIORITIES, PRIORITY_OPTIONS, type PriorityKey } from \"../../Shared/config.ts\";\nimport { XIcon, SpinnerIcon } from \"./Icons.tsx\";\n\ninterface Props {\n editingTodo?: Todo | null;\n onSubmit: (input: CreateTodoInput) => void;\n onCancel: () => void;\n isLoading?: boolean;\n}\n\nexport function TodoForm({ editingTodo, onSubmit, onCancel, isLoading }: Props) {\n const [title, setTitle] = useState(\"\");\n const [description, setDescription] = useState(\"\");\n const [priority, setPriority] = useState(\"medium\");\n\n // Populate form when editing\n useEffect(() => {\n if (editingTodo) {\n setTitle(editingTodo.title);\n setDescription(editingTodo.description || \"\");\n setPriority(editingTodo.priority);\n } else {\n setTitle(\"\");\n setDescription(\"\");\n setPriority(\"medium\");\n }\n }, [editingTodo]);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (!title.trim()) return;\n \n onSubmit({\n title: title.trim(),\n description: description.trim() || null,\n priority,\n });\n };\n\n const isEditing = !!editingTodo;\n\n return (\n

\n {/* Header */}\n

\n {isEditing ? \"Edit Todo\" : \"New Todo\"}\n

\n \n \n \n

\n\n {/* Form */}\n

\n {/* Title */}\n

\n \n Title *\n \n setTitle(e.target.value)}\n placeholder=\"What needs to be done?\"\n className=\"\n w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600\n bg-white dark:bg-gray-700 text-gray-900 dark:text-white\n placeholder-gray-500 dark:placeholder-gray-400\n focus:ring-2 focus:ring-warm-500 focus:border-transparent\n transition-colors\n \"\n disabled={isLoading}\n autoFocus\n required\n />\n

\n\n {/* Description */}\n

\n \n Description\n \n setDescription(e.target.value)}\n placeholder=\"Add more details (optional)\"\n rows={3}\n className=\"\n w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600\n bg-white dark:bg-gray-700 text-gray-900 dark:text-white\n placeholder-gray-500 dark:placeholder-gray-400\n focus:ring-2 focus:ring-warm-500 focus:border-transparent\n transition-colors resize-none\n \"\n disabled={isLoading}\n />\n

\n\n {/* Priority */}\n

\n \n Priority\n \n

\n {PRIORITY_OPTIONS.map((key) => {\n const p = PRIORITIES[key];\n const isSelected = priority === key;\n const colorClasses = {\n low: isSelected\n ? \"bg-emerald-500 text-white border-emerald-500\"\n : \"border-emerald-300 text-emerald-700 hover:bg-emerald-50 dark:border-emerald-700 dark:text-emerald-400 dark:hover:bg-emerald-900/20\",\n medium: isSelected\n ? \"bg-amber-500 text-white border-amber-500\"\n : \"border-amber-300 text-amber-700 hover:bg-amber-50 dark:border-amber-700 dark:text-amber-400 dark:hover:bg-amber-900/20\",\n high: isSelected\n ? \"bg-rose-500 text-white border-rose-500\"\n : \"border-rose-300 text-rose-700 hover:bg-rose-50 dark:border-rose-700 dark:text-rose-400 dark:hover:bg-rose-900/20\",\n };\n\n return (\n setPriority(key)}\n disabled={isLoading}\n className={`\n flex-1 px-4 py-2 rounded-lg border-2 font-medium\n transition-colors ${colorClasses[key]}\n `}\n >\n {p.label}\n \n );\n })}\n

\n\n {/* Submit button */}\n

\n \n {isLoading ? (\n <>\n \n {isEditing ? \"Saving...\" : \"Creating...\"}\n \n ) : (\n {isEditing ? \"Save Changes\" : \"Create Todo\"}\n )}\n \n

\n );\n}\n\nexport default TodoForm;\n",[],[189,196,248],{"_106":256,"_97":257,"_160":258,"_162":197,"_163":145,"_164":259,"_166":167,"_108":260,"_102":33,"_169":182,"_171":261,"_172":22,"_173":-5,"_174":262,"_100":263},"e19c16c4-fe38-11f0-a11e-42dde27851f2","TodoList.tsx","e19c1782-fe38-11f0-a11e-42dde27851f2",20,["D",1769818070513],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useMemo } from \"https://esm.sh/react@18.2.0\";\nimport type { Todo } from \"../../Shared/types.ts\";\nimport { PRIORITIES, PRIORITY_OPTIONS, type PriorityKey } from \"../../Shared/config.ts\";\nimport { TodoCard } from \"./TodoCard.tsx\";\nimport { PlusIcon } from \"./Icons.tsx\";\n\ninterface Props {\n todos: Todo[];\n onToggle: (id: number) => void;\n onEdit: (todo: Todo) => void;\n onDelete: (id: number) => void;\n onAddNew: () => void;\n loadingIds: Set;\n}\n\ntype FilterType = \"all\" | \"active\" | \"completed\";\ntype SortType = \"newest\" | \"oldest\" | \"priority\";\n\nexport function TodoList({ todos, onToggle, onEdit, onDelete, onAddNew, loadingIds }: Props) {\n const [filter, setFilter] = useState(\"all\");\n const [sort, setSort] = useState(\"newest\");\n\n const filteredAndSortedTodos = useMemo(() => {\n let result = [...todos];\n\n // Filter\n if (filter === \"active\") {\n result = result.filter((t) => !t.completed);\n } else if (filter === \"completed\") {\n result = result.filter((t) => t.completed);\n }\n\n // Sort\n result.sort((a, b) => {\n if (sort === \"newest\") {\n return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();\n } else if (sort === \"oldest\") {\n return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();\n } else {\n // Priority (high to low)\n return PRIORITIES[b.priority].value - PRIORITIES[a.priority].value;\n }\n });\n\n return result;\n }, [todos, filter, sort]);\n\n const counts = useMemo(() => ({\n all: todos.length,\n active: todos.filter((t) => !t.completed).length,\n completed: todos.filter((t) => t.completed).length,\n }), [todos]);\n\n return (\n

\n {/* Controls */}\n

\n {/* Filters */}\n

\n {([\"all\", \"active\", \"completed\"] as FilterType[]).map((f) => (\n setFilter(f)}\n className={`\n px-3 py-1.5 rounded-md text-sm font-medium capitalize transition-colors\n ${filter === f\n ? \"bg-white dark:bg-gray-700 text-warm-600 dark:text-warm-400 shadow-sm\"\n : \"text-gray-600 dark:text-gray-400 hover:text-warm-600 dark:hover:text-warm-400\"\n }\n `}\n >\n {f} ({counts[f]})\n \n ))}\n

\n\n {/* Sort + Add button */}\n

\n setSort(e.target.value as SortType)}\n className=\"\n px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600\n bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300\n text-sm focus:ring-2 focus:ring-warm-500 focus:border-transparent\n \"\n >\n \n \n \n \n\n \n \n Add Todo\n \n

\n\n {/* Todo grid */}\n {filteredAndSortedTodos.length === 0 ? (\n

\n \n \n \n

\n {filter === \"all\"\n ? \"No todos yet\"\n : filter === \"active\"\n ? \"No active todos\"\n : \"No completed todos\"}\n

\n {filter === \"all\"\n ? \"Create your first todo to get started!\"\n : filter === \"active\"\n ? \"All your todos are completed!\"\n : \"Complete some todos to see them here\"}\n

\n ) : (\n

\n {filteredAndSortedTodos.map((todo) => (\n \n ))}\n

\n )}\n

\n );\n}\n\nexport default TodoList;\n",[],[189,196,257],{"_106":265,"_97":266,"_160":267,"_162":197,"_163":145,"_164":268,"_166":167,"_108":269,"_102":33,"_169":182,"_171":270,"_172":22,"_173":-5,"_174":271,"_100":272},"c18042b6-fe38-11f0-8f85-42dde27851f2","UserInfo.tsx","c1804360-fe38-11f0-8f85-42dde27851f2",16,["D",1769818016635],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { UserInfo as UserInfoType } from \"../../Shared/types.ts\";\nimport { LogoutIcon } from \"./Icons.tsx\";\n\ninterface Props {\n user: UserInfoType;\n}\n\nexport function UserInfo({ user }: Props) {\n return (\n

\n \n \n \n \n \n

\n );\n}\n\nexport default UserInfo;\n",[],[189,196,266],[189,196],{"_106":275,"_97":276,"_160":277,"_162":190,"_163":145,"_164":278,"_166":167,"_108":279,"_102":33,"_169":182,"_171":280,"_172":22,"_173":-5,"_174":281,"_100":282},"f1cd006c-fe38-11f0-8608-42dde27851f2","App.tsx","f1cd017a-fe38-11f0-8608-42dde27851f2",21,["D",1769818097673],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport type { Todo, UserInfo, CreateTodoInput, ApiResponse } from \"../Shared/types.ts\";\nimport { ErrorBoundary } from \"./components/ErrorBoundary.tsx\";\nimport { AppHeader } from \"./components/AppHeader.tsx\";\nimport { TodoList } from \"./components/TodoList.tsx\";\nimport { TodoForm } from \"./components/TodoForm.tsx\";\nimport { SpinnerIcon } from \"./components/Icons.tsx\";\n\n// API helper\nasync function api(path: string, options?: RequestInit): Promise {\n const response = await fetch(path, {\n ...options,\n headers: {\n \"Content-Type\": \"application/json\",\n ...options?.headers,\n },\n });\n\n const data: ApiResponse = await response.json();\n\n if (!data.success) {\n throw new Error(data.error || \"API request failed\");\n }\n\n return data.data as T;\n}\n\ntype AppState = \"loading\" | \"unauthenticated\" | \"authenticated\" | \"error\";\n\nfunction App() {\n const [state, setState] = useState(\"loading\");\n const [user, setUser] = useState(null);\n const [todos, setTodos] = useState([]);\n const [error, setError] = useState(null);\n\n // UI state\n const [showForm, setShowForm] = useState(false);\n const [editingTodo, setEditingTodo] = useState(null);\n const [formLoading, setFormLoading] = useState(false);\n const [loadingIds, setLoadingIds] = useState>(new Set());\n\n // Load user and todos on mount\n useEffect(() => {\n async function init() {\n try {\n // Fetch user info\n const userData = await api(\"/api/me\");\n setUser(userData);\n\n // Fetch todos\n const todosData = await api(\"/api/todos\");\n setTodos(todosData);\n\n setState(\"authenticated\");\n } catch (err: any) {\n console.error(\"Init error:\", err);\n \n // Check if it's an auth error (will redirect to login)\n if (err.message?.includes(\"unauthorized\") || err.message?.includes(\"401\")) {\n setState(\"unauthenticated\");\n } else {\n setError(err.message || \"Failed to load data\");\n setState(\"error\");\n }\n }\n }\n\n init();\n }, []);\n\n // CRUD handlers\n const handleCreateTodo = useCallback(async (input: CreateTodoInput) => {\n setFormLoading(true);\n try {\n const newTodo = await api(\"/api/todos\", {\n method: \"POST\",\n body: JSON.stringify(input),\n });\n\n setTodos((prev) => [newTodo, ...prev]);\n setShowForm(false);\n setEditingTodo(null);\n } catch (err: any) {\n alert(err.message || \"Failed to create todo\");\n } finally {\n setFormLoading(false);\n }\n }, []);\n\n const handleUpdateTodo = useCallback(async (input: CreateTodoInput) => {\n if (!editingTodo) return;\n\n setFormLoading(true);\n try {\n const updated = await api(`/api/todos/${editingTodo.id}`, {\n method: \"PATCH\",\n body: JSON.stringify(input),\n });\n\n setTodos((prev) =>\n prev.map((t) => (t.id === updated.id ? updated : t))\n );\n setShowForm(false);\n setEditingTodo(null);\n } catch (err: any) {\n alert(err.message || \"Failed to update todo\");\n } finally {\n setFormLoading(false);\n }\n }, [editingTodo]);\n\n const handleToggle = useCallback(async (id: number) => {\n setLoadingIds((prev) => new Set(prev).add(id));\n try {\n const updated = await api(`/api/todos/${id}/toggle`, {\n method: \"POST\",\n });\n\n setTodos((prev) =>\n prev.map((t) => (t.id === updated.id ? updated : t))\n );\n } catch (err: any) {\n alert(err.message || \"Failed to toggle todo\");\n } finally {\n setLoadingIds((prev) => {\n const next = new Set(prev);\n next.delete(id);\n return next;\n });\n }\n }, []);\n\n const handleDelete = useCallback(async (id: number) => {\n if (!confirm(\"Are you sure you want to delete this todo?\")) return;\n\n setLoadingIds((prev) => new Set(prev).add(id));\n try {\n await api(`/api/todos/${id}`, { method: \"DELETE\" });\n setTodos((prev) => prev.filter((t) => t.id !== id));\n } catch (err: any) {\n alert(err.message || \"Failed to delete todo\");\n } finally {\n setLoadingIds((prev) => {\n const next = new Set(prev);\n next.delete(id);\n return next;\n });\n }\n }, []);\n\n const handleEdit = useCallback((todo: Todo) => {\n setEditingTodo(todo);\n setShowForm(true);\n }, []);\n\n const handleAddNew = useCallback(() => {\n setEditingTodo(null);\n setShowForm(true);\n }, []);\n\n const handleCloseForm = useCallback(() => {\n setShowForm(false);\n setEditingTodo(null);\n }, []);\n\n // Loading state\n if (state === \"loading\") {\n return (\n

\n \n

\n );\n }\n\n // Unauthenticated state\n if (state === \"unauthenticated\") {\n return (\n

\n \n

\n Todo Cards\n

\n A beautiful todo app. Sign in with Val Town to get started.\n

\n \n Sign in with Val Town\n \n

\n );\n }\n\n // Error state\n if (state === \"error\") {\n return (\n

\n \n

\n Something went wrong\n

\n {error || \"An unexpected error occurred\"}\n

\n window.location.reload()}\n className=\"px-6 py-2 bg-warm-500 hover:bg-warm-600 text-white rounded-lg font-medium transition-colors\"\n >\n Try Again\n \n

\n );\n }\n\n // Authenticated state\n return (\n \n

\n \n\n

\n \n

\n\n {/* Form modal */}\n {showForm && (\n

\n {/* Backdrop */}\n \n \n {/* Form */}\n

\n \n

\n )}\n

\n \n );\n}\n\nexport default App;\n",[],[189,276],{"_106":284,"_97":285,"_160":286,"_162":190,"_163":145,"_164":103,"_166":22,"_108":287,"_102":288,"_169":289,"_171":290,"_172":22,"_173":-5,"_174":291,"_100":292},"4eb83288-fe39-11f0-a16e-42dde27851f2","index.html","ab13f13a-fe38-11f0-99bf-42dde27851f2",["D",1769818253554],1,"file","\n\n\n \n \n Todo Cards\n \n \n \n \n \n \n \n\n\n

\n \n

Loading Todo Cards...

\n \n \n \n\n",[],[189,285],{"_106":294,"_97":295,"_160":296,"_162":190,"_163":145,"_164":297,"_166":167,"_108":298,"_102":33,"_169":182,"_171":299,"_172":22,"_173":-5,"_174":300,"_100":301},"ac2f579e-fe38-11f0-99bf-42dde27851f2","main.tsx","ac2f585c-fe38-11f0-99bf-42dde27851f2",11,["D",1769817980883],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport ReactDOM from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./App.tsx\";\n\n// Initialize React app\nconst root = ReactDOM.createRoot(document.getElementById(\"root\")!);\nroot.render(\n \n \n \n);\n",[],[189,295],[189],{"_106":304,"_97":305,"_160":306,"_162":-5,"_163":145,"_164":307,"_166":167,"_108":308,"_102":33,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":309,"_100":328},"8ba3b5c4-fe38-11f0-a0ee-42dde27851f2","Shared","8ba3b696-fe38-11f0-a0ee-42dde27851f2",3,["D",1769817926280],[310,319],{"_106":311,"_97":312,"_160":313,"_162":306,"_163":145,"_164":314,"_166":167,"_108":315,"_102":33,"_169":182,"_171":316,"_172":22,"_173":-5,"_174":317,"_100":318},"8f712a24-fe38-11f0-a0ee-42dde27851f2","config.ts","8f712b32-fe38-11f0-a0ee-42dde27851f2",6,["D",1769817932658],"// App configuration constants\n\nexport const APP_CONFIG = {\n name: \"Todo Cards\",\n description: \"A beautiful todo app with Val Town OAuth\",\n dbTable: \"todos\",\n oauth: {\n scopes: [\"openid\", \"offline_access\", \"profile\"],\n },\n} as const;\n\nexport const PRIORITIES = {\n low: { label: \"Low\", color: \"emerald\", value: 1 },\n medium: { label: \"Medium\", color: \"amber\", value: 2 },\n high: { label: \"High\", color: \"rose\", value: 3 },\n} as const;\n\nexport type PriorityKey = keyof typeof PRIORITIES;\n\nexport const PRIORITY_OPTIONS: PriorityKey[] = [\"low\", \"medium\", \"high\"];\n",[],[305,312],{"_106":320,"_97":321,"_160":322,"_162":306,"_163":145,"_164":323,"_166":167,"_108":324,"_102":33,"_169":182,"_171":325,"_172":22,"_173":-5,"_174":326,"_100":327},"90efd5da-fe38-11f0-b28d-42dde27851f2","types.ts","90efd698-fe38-11f0-b28d-42dde27851f2",7,["D",1769817935168],"// TypeScript interfaces for the Todo app\n\nimport type { PriorityKey } from \"./config.ts\";\n\nexport interface Todo {\n id: number;\n title: string;\n description: string | null;\n priority: PriorityKey;\n completed: boolean;\n userId: string;\n createdAt: string;\n updatedAt: string;\n}\n\nexport interface CreateTodoInput {\n title: string;\n description?: string | null;\n priority?: PriorityKey;\n}\n\nexport interface UpdateTodoInput {\n title?: string;\n description?: string | null;\n priority?: PriorityKey;\n completed?: boolean;\n}\n\nexport interface UserInfo {\n id: string;\n username: string;\n profileImageUrl: string;\n}\n\nexport interface ApiResponse {\n success: boolean;\n data?: T;\n error?: string;\n}\n",[],[305,321],[305],{"_106":330,"_97":101,"_160":331,"_162":-5,"_163":145,"_164":332,"_166":167,"_108":333,"_102":33,"_169":334,"_171":335,"_172":22,"_173":-5,"_174":336,"_100":337},"a40ff9b0-fe38-11f0-b28d-42dde27851f2","a40ffa8c-fe38-11f0-b28d-42dde27851f2",9,["D",1769817967255],"http","// HTTP entry point - Hono router with OAuth and API routes\n\nimport { Hono } from \"npm:hono@4\";\nimport { oauthMiddleware, getOAuthUserData } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport {\n initializeDatabase,\n getTodos,\n getTodoById,\n createTodo,\n updateTodo,\n deleteTodo,\n toggleTodo,\n} from \"./BACKEND/db.ts\";\nimport type { CreateTodoInput, UpdateTodoInput, ApiResponse, Todo, UserInfo } from \"./Shared/types.ts\";\n\nconst app = new Hono();\n\n// Initialize database on startup\nlet dbInitialized = false;\nasync function ensureDb() {\n if (!dbInitialized) {\n await initializeDatabase();\n dbInitialized = true;\n }\n}\n\n// OAuth middleware for API routes\napp.use(\"/api/*\", oauthMiddleware);\n\n// Helper to get current user\nasync function getCurrentUser(c: any): Promise {\n const userData = await getOAuthUserData(c.req.raw);\n return {\n id: userData.id,\n username: userData.username,\n profileImageUrl: userData.profileImageUrl,\n };\n}\n\n// Helper for JSON responses\nfunction jsonResponse(data: T, status = 200): Response {\n return new Response(JSON.stringify(data), {\n status,\n headers: { \"Content-Type\": \"application/json\" },\n });\n}\n\nfunction errorResponse(error: string, status = 400): Response {\n return jsonResponse>({ success: false, error }, status);\n}\n\nfunction successResponse(data: T): Response {\n return jsonResponse>({ success: true, data });\n}\n\n// ============ API Routes ============\n\n// GET /api/me - Get current user info\napp.get(\"/api/me\", async (c) => {\n const user = await getCurrentUser(c);\n return successResponse(user);\n});\n\n// GET /api/todos - Get all todos for current user\napp.get(\"/api/todos\", async (c) => {\n await ensureDb();\n const user = await getCurrentUser(c);\n const todos = await getTodos(user.id);\n return successResponse(todos);\n});\n\n// POST /api/todos - Create a new todo\napp.post(\"/api/todos\", async (c) => {\n await ensureDb();\n const user = await getCurrentUser(c);\n \n let input: CreateTodoInput;\n try {\n input = await c.req.json();\n } catch {\n return errorResponse(\"Invalid JSON body\");\n }\n \n if (!input.title || typeof input.title !== \"string\" || input.title.trim() === \"\") {\n return errorResponse(\"Title is required\");\n }\n \n const todo = await createTodo(\n {\n title: input.title.trim(),\n description: input.description?.trim() || null,\n priority: input.priority || \"medium\",\n },\n user\n );\n \n return successResponse(todo);\n});\n\n// GET /api/todos/:id - Get a specific todo\napp.get(\"/api/todos/:id\", async (c) => {\n await ensureDb();\n const user = await getCurrentUser(c);\n const id = parseInt(c.req.param(\"id\"), 10);\n \n if (isNaN(id)) {\n return errorResponse(\"Invalid todo ID\");\n }\n \n const todo = await getTodoById(id, user.id);\n if (!todo) {\n return errorResponse(\"Todo not found\", 404);\n }\n \n return successResponse(todo);\n});\n\n// PATCH /api/todos/:id - Update a todo\napp.patch(\"/api/todos/:id\", async (c) => {\n await ensureDb();\n const user = await getCurrentUser(c);\n const id = parseInt(c.req.param(\"id\"), 10);\n \n if (isNaN(id)) {\n return errorResponse(\"Invalid todo ID\");\n }\n \n let input: UpdateTodoInput;\n try {\n input = await c.req.json();\n } catch {\n return errorResponse(\"Invalid JSON body\");\n }\n \n const todo = await updateTodo(id, user.id, {\n title: input.title?.trim(),\n description: input.description !== undefined ? (input.description?.trim() || null) : undefined,\n priority: input.priority,\n completed: input.completed,\n });\n \n if (!todo) {\n return errorResponse(\"Todo not found\", 404);\n }\n \n return successResponse(todo);\n});\n\n// DELETE /api/todos/:id - Delete a todo\napp.delete(\"/api/todos/:id\", async (c) => {\n await ensureDb();\n const user = await getCurrentUser(c);\n const id = parseInt(c.req.param(\"id\"), 10);\n \n if (isNaN(id)) {\n return errorResponse(\"Invalid todo ID\");\n }\n \n const deleted = await deleteTodo(id, user.id);\n if (!deleted) {\n return errorResponse(\"Todo not found\", 404);\n }\n \n return successResponse({ deleted: true });\n});\n\n// POST /api/todos/:id/toggle - Toggle todo completion\napp.post(\"/api/todos/:id/toggle\", async (c) => {\n await ensureDb();\n const user = await getCurrentUser(c);\n const id = parseInt(c.req.param(\"id\"), 10);\n \n if (isNaN(id)) {\n return errorResponse(\"Invalid todo ID\");\n }\n \n const todo = await toggleTodo(id, user.id);\n if (!todo) {\n return errorResponse(\"Todo not found\", 404);\n }\n \n return successResponse(todo);\n});\n\n// ============ Static File Routes ============\n\n// Serve frontend files\napp.get(\"/FRONTEND/*\", async (c) => {\n return serveFile(c.req.path, import.meta.url);\n});\n\n// Serve shared files\napp.get(\"/Shared/*\", async (c) => {\n return serveFile(c.req.path, import.meta.url);\n});\n\n// Serve index.html at root\napp.get(\"/\", async (c) => {\n return serveFile(\"/FRONTEND/index.html\", import.meta.url);\n});\n\n// Catch-all for SPA routing - serve index.html\napp.get(\"*\", async (c) => {\n // Skip API and auth routes\n if (c.req.path.startsWith(\"/api/\") || c.req.path.startsWith(\"/auth/\")) {\n return c.notFound();\n }\n return serveFile(\"/FRONTEND/index.html\", import.meta.url);\n});\n\nexport default app.fetch;\n",[],[101],"files",[157,176,187,194,201,210,219,228,237,246,255,264,274,283,293,303,310,319,329],"counts",{"_342":33,"_343":288,"_344":33,"_345":346,"_349":350},"pulls","branches","forks","envVars",{"_347":33,"_348":33},"count","emptyCount","connections",{"_347":33,"_351":33},"unfilledCount","contents",[],{"_106":330,"_97":101,"_160":331,"_162":-5,"_163":145,"_164":332,"_166":167,"_108":355,"_102":33,"_169":334,"_171":335,"_172":22,"_173":-5,"_100":356},["D",1769817967255],[101],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_95":96,"_97":98,"_99":45,"_102":103,"_100":101,"_104":365,"_155":370,"_338":428,"_289":429,"_352":431,"_432":-5,"_433":-5,"_434":-5,"_435":-5,"_436":437,"_345":-5},{"_106":107,"_97":98,"_108":366,"_110":-5,"_111":22,"_112":113,"_114":-5,"_115":-5,"_14":116,"_117":-5,"_118":22,"_119":-5,"_120":-5,"_121":33,"_16":122,"_123":-5,"_124":-5,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":126,"_23":367,"_137":368,"_142":369,"_154":22},["D",1769817902835],{"_95":96,"_135":136},{"_95":96,"_139":136,"_14":116,"_140":141},{"_102":144,"_97":45,"_106":145,"_146":107,"_147":-5,"_148":-5,"_149":-5,"_150":-5,"_151":-5,"_152":98,"_153":96},[371,377,416,425],{"_106":158,"_97":159,"_160":161,"_162":-5,"_163":145,"_164":165,"_166":167,"_108":168,"_102":33,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":372,"_100":376},[373],{"_106":177,"_97":178,"_160":179,"_162":161,"_163":145,"_164":180,"_166":167,"_108":181,"_102":33,"_169":182,"_171":183,"_172":22,"_173":-5,"_174":374,"_100":375},[],[159,178],[159],{"_106":188,"_97":189,"_160":190,"_162":-5,"_163":145,"_164":191,"_166":167,"_108":192,"_102":33,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":378,"_100":415},[379,406,409,412],{"_106":195,"_97":196,"_160":197,"_162":190,"_163":145,"_164":198,"_166":167,"_108":199,"_102":33,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":380,"_100":405},[381,384,387,390,393,396,399,402],{"_106":202,"_97":203,"_160":204,"_162":197,"_163":145,"_164":205,"_166":167,"_108":206,"_102":33,"_169":182,"_171":207,"_172":22,"_173":-5,"_174":382,"_100":383},[],[189,196,203],{"_106":211,"_97":212,"_160":213,"_162":197,"_163":145,"_164":214,"_166":167,"_108":215,"_102":33,"_169":182,"_171":216,"_172":22,"_173":-5,"_174":385,"_100":386},[],[189,196,212],{"_106":220,"_97":221,"_160":222,"_162":197,"_163":145,"_164":223,"_166":167,"_108":224,"_102":33,"_169":182,"_171":225,"_172":22,"_173":-5,"_174":388,"_100":389},[],[189,196,221],{"_106":229,"_97":230,"_160":231,"_162":197,"_163":145,"_164":232,"_166":167,"_108":233,"_102":33,"_169":182,"_171":234,"_172":22,"_173":-5,"_174":391,"_100":392},[],[189,196,230],{"_106":238,"_97":239,"_160":240,"_162":197,"_163":145,"_164":241,"_166":167,"_108":242,"_102":33,"_169":182,"_171":243,"_172":22,"_173":-5,"_174":394,"_100":395},[],[189,196,239],{"_106":247,"_97":248,"_160":249,"_162":197,"_163":145,"_164":250,"_166":167,"_108":251,"_102":33,"_169":182,"_171":252,"_172":22,"_173":-5,"_174":397,"_100":398},[],[189,196,248],{"_106":256,"_97":257,"_160":258,"_162":197,"_163":145,"_164":259,"_166":167,"_108":260,"_102":33,"_169":182,"_171":261,"_172":22,"_173":-5,"_174":400,"_100":401},[],[189,196,257],{"_106":265,"_97":266,"_160":267,"_162":197,"_163":145,"_164":268,"_166":167,"_108":269,"_102":33,"_169":182,"_171":270,"_172":22,"_173":-5,"_174":403,"_100":404},[],[189,196,266],[189,196],{"_106":275,"_97":276,"_160":277,"_162":190,"_163":145,"_164":278,"_166":167,"_108":279,"_102":33,"_169":182,"_171":280,"_172":22,"_173":-5,"_174":407,"_100":408},[],[189,276],{"_106":284,"_97":285,"_160":286,"_162":190,"_163":145,"_164":103,"_166":22,"_108":287,"_102":288,"_169":289,"_171":290,"_172":22,"_173":-5,"_174":410,"_100":411},[],[189,285],{"_106":294,"_97":295,"_160":296,"_162":190,"_163":145,"_164":297,"_166":167,"_108":298,"_102":33,"_169":182,"_171":299,"_172":22,"_173":-5,"_174":413,"_100":414},[],[189,295],[189],{"_106":304,"_97":305,"_160":306,"_162":-5,"_163":145,"_164":307,"_166":167,"_108":308,"_102":33,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":417,"_100":424},[418,421],{"_106":311,"_97":312,"_160":313,"_162":306,"_163":145,"_164":314,"_166":167,"_108":315,"_102":33,"_169":182,"_171":316,"_172":22,"_173":-5,"_174":419,"_100":420},[],[305,312],{"_106":320,"_97":321,"_160":322,"_162":306,"_163":145,"_164":323,"_166":167,"_108":324,"_102":33,"_169":182,"_171":325,"_172":22,"_173":-5,"_174":422,"_100":423},[],[305,321],[305],{"_106":330,"_97":101,"_160":331,"_162":-5,"_163":145,"_164":332,"_166":167,"_108":333,"_102":33,"_169":334,"_171":335,"_172":22,"_173":-5,"_174":426,"_100":427},[],[101],[371,373,377,379,381,384,387,390,393,396,399,402,406,409,412,416,418,421,425],{"_106":330,"_97":101,"_160":331,"_162":-5,"_163":145,"_164":332,"_166":167,"_108":355,"_102":33,"_169":334,"_171":335,"_172":22,"_173":-5,"_100":430},[101],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

cgshaq

untitled-2571