\n {/* Description */}\n

\n \n Description\n \n \n {formErrors.description && (\n

\n \n {formErrors.description}\n

\n )}\n

\n\n {/* Importance and Due Date */}\n

\n \n Importance\n \n \n \n \n \n \n

\n\n

\n \n Due Date\n \n \n {formErrors.dueDate && (\n

\n \n {formErrors.dueDate}\n

\n )}\n

\n\n {/* Submit & Cancel */}\n

\n \n {isEditing ? \"Update Task\" : \"Add Task\"}\n \n {onCancel && (\n \n Cancel\n \n )}\n

\n );\n}\n\n/** A table that displays tasks. */\nfunction TaskList({\n tasks,\n onEditClick,\n onDelete,\n onToggleComplete,\n visibleColumns,\n onToggleColumn,\n columnWidths,\n}: {\n tasks: Task[];\n onEditClick: (task: Task) => void;\n onDelete: (id: number) => void;\n onToggleComplete: (id: number) => void;\n visibleColumns: Record;\n onToggleColumn: (column: string) => void;\n columnWidths: Record;\n}) {\n const importanceColors: Record<\"low\" | \"medium\" | \"high\", string> = {\n low: \"bg-green-50\",\n medium: \"bg-yellow-50\",\n high: \"bg-red-50\",\n };\n\n return (\n

\n {Object.keys(visibleColumns).map((col) => (\n onToggleColumn(col)}\n className=\"p-1 bg-gray-200 rounded flex items-center\"\n title={`Toggle ${col} column`}\n >\n {visibleColumns[col] ? : }\n {col}\n \n ))}\n

\n\n \n \n \n {visibleColumns.description && (\n \n )}\n {visibleColumns.isCompleted && (\n \n )}\n {visibleColumns.dueDate && (\n \n )}\n {visibleColumns.importance && (\n \n )}\n {visibleColumns.actions && (\n \n )}\n \n \n \n {tasks.map((task) => (\n \n {/* Description */}\n {visibleColumns.description && (\n \n )}\n {/* Completed Checkbox */}\n {visibleColumns.isCompleted && (\n \n )}\n {/* Due Date */}\n {visibleColumns.dueDate && (\n \n {task.dueDate}\n \n )}\n {/* Importance */}\n {visibleColumns.importance && (\n \n {task.importance}\n \n )}\n {/* Actions */}\n {visibleColumns.actions && (\n \n )}\n \n ))}\n \n

Task	Done	Due Date	Importance	Actions
\n \n {task.description}\n \n	\n \n \n onToggleComplete(task.id)}\n title=\"Mark task as complete\"\n />\n \n	\n \n \n onEditClick(task)}\n title=\"Edit task\"\n >\n \n \n \n onDelete(task.id)}\n title=\"Delete task\"\n >\n \n \n \n

\n );\n}\n\nfunction SettingsOverlay({\n columnWidths,\n onColumnWidthChange,\n onClose,\n}: {\n columnWidths: Record;\n onColumnWidthChange: (column: string, width: number) => void;\n onClose: () => void;\n}) {\n return (\n

\n \n \n \n

Column Settings

\n {Object.entries(columnWidths).map(([column, width]) => (\n

\n \n {column} width (px)\n \n onColumnWidthChange(column, parseInt(e.target.value, 10))}\n className=\"w-full p-2 border rounded\"\n />\n

\n ))}\n

\n );\n}\n\nfunction App() {\n const [tasks, setTasks] = useState([]);\n const [editingTask, setEditingTask] = useState(undefined);\n const [sortOrder, setSortOrder] = useState<\"asc\" | \"desc\">(\"asc\");\n const [visibleColumns, setVisibleColumns] = useState({\n description: true,\n isCompleted: true,\n dueDate: true,\n importance: true,\n actions: true,\n });\n const [showEditOverlay, setShowEditOverlay] = useState(false);\n const [showAddTaskOverlay, setShowAddTaskOverlay] = useState(false);\n const [showSettingsOverlay, setShowSettingsOverlay] = useState(false);\n const [columnWidths, setColumnWidths] = useState({\n description: 300,\n isCompleted: 80,\n dueDate: 120,\n importance: 100,\n actions: 100,\n });\n\n // Load from localStorage once\n useEffect(() => {\n const storedTasks = localStorage.getItem(\"tasks\");\n if (storedTasks) {\n setTasks(JSON.parse(storedTasks));\n }\n const storedColumnWidths = localStorage.getItem(\"columnWidths\");\n if (storedColumnWidths) {\n setColumnWidths(JSON.parse(storedColumnWidths));\n }\n }, []);\n\n // Save to localStorage whenever `tasks` or `columnWidths` changes\n const saveTasks = useCallback((updatedTasks: Task[]) => {\n setTasks(updatedTasks);\n localStorage.setItem(\"tasks\", JSON.stringify(updatedTasks));\n }, []);\n\n const saveColumnWidths = useCallback((updatedWidths: Record) => {\n setColumnWidths(updatedWidths);\n localStorage.setItem(\"columnWidths\", JSON.stringify(updatedWidths));\n }, []);\n\n const addTask = useCallback(\n (newTask: Task) => {\n const updatedTasks = [...tasks, newTask];\n saveTasks(updatedTasks);\n setShowAddTaskOverlay(false);\n },\n [tasks, saveTasks],\n );\n\n const updateTask = useCallback(\n (updatedTask: Task) => {\n const updatedTasks = tasks.map((t) => t.id === updatedTask.id ? updatedTask : t);\n saveTasks(updatedTasks);\n setEditingTask(undefined);\n setShowEditOverlay(false);\n },\n [tasks, saveTasks],\n );\n\n const deleteTask = useCallback(\n (id: number) => {\n const updatedTasks = tasks.filter((task) => task.id !== id);\n saveTasks(updatedTasks);\n },\n [tasks, saveTasks],\n );\n\n const toggleTaskCompletion = useCallback(\n (id: number) => {\n const updatedTasks = tasks.map((task) => task.id === id ? { ...task, isCompleted: !task.isCompleted } : task);\n saveTasks(updatedTasks);\n },\n [tasks, saveTasks],\n );\n\n const sortTasks = useCallback(() => {\n const sortedTasks = [...tasks].sort((a, b) => {\n const dateA = new Date(a.dueDate).getTime();\n const dateB = new Date(b.dueDate).getTime();\n return sortOrder === \"asc\" ? dateA - dateB : dateB - dateA;\n });\n saveTasks(sortedTasks);\n setSortOrder(sortOrder === \"asc\" ? \"desc\" : \"asc\");\n }, [tasks, saveTasks, sortOrder]);\n\n const toggleColumnVisibility = (column: string) => {\n setVisibleColumns((prev) => ({\n ...prev,\n [column]: !prev[column],\n }));\n };\n\n const handleEditClick = (task: Task) => {\n setEditingTask(task);\n setShowEditOverlay(true);\n };\n\n const handleOverlayCancel = () => {\n setEditingTask(undefined);\n setShowEditOverlay(false);\n };\n\n const handleColumnWidthChange = (column: string, width: number) => {\n saveColumnWidths({ ...columnWidths, [column]: width });\n };\n\n return (\n

📋 Task Manager

\n\n {/* Add Task and Settings buttons */}\n

\n setShowAddTaskOverlay(true)}\n className=\"p-2 bg-blue-500 text-white rounded flex items-center\"\n >\n \n Add Task\n \n setShowSettingsOverlay(true)}\n className=\"p-2 bg-gray-200 rounded flex items-center\"\n >\n \n Settings\n \n

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

\n \n Sort by Due Date\n {sortOrder === \"asc\" ? : }\n \n

\n\n {/* Task list */}\n

\n \n

\n\n {/* Add Task Overlay Modal */}\n {showAddTaskOverlay && (\n \n \n

\n )}\n\n {/* Edit Task Overlay Modal */}\n {showEditOverlay && editingTask && (\n \n \n \n )}\n\n {/* Settings Overlay */}\n {showSettingsOverlay && (\n setShowSettingsOverlay(false)}\n />\n )}\n\n {/* Link to source */}\n \n View Source\n \n \n );\n}\n\nfunction client() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n createRoot(rootElement).render();\n }\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Task Manager\n \n \n \n \n \n \n

\n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}","createdAt",["D",1737030044474],"version",8,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_128":129,"_130":131},"handle","arfan","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycVp3b2dpRnRHTEdOM3NGbTViQ2dBaW9sdUYifQ","forkedVal","interval","slug","arfan/TaskManagerApp","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[140,143,147,151,155,159,163,166,170],{"_117":118,"_141":-5,"_115":142,"_112":110},"prId",["D",1737030044474],{"_117":144,"_141":-5,"_115":145,"_112":146},7,["D",1736377359524],"a89e15f2-ce14-11ef-b4a5-e6cdfca9ef9f",{"_117":148,"_141":-5,"_115":149,"_112":150},6,["D",1736377044765],"ed0341fa-ce13-11ef-82a3-e6cdfca9ef9f",{"_117":152,"_141":-5,"_115":153,"_112":154},5,["D",1736360433663],"4004cb3e-cded-11ef-8cdd-e6cdfca9ef9f",{"_117":156,"_141":-5,"_115":157,"_112":158},4,["D",1736353887265],"020ffefc-cdde-11ef-8ba8-e6cdfca9ef9f",{"_117":160,"_141":-5,"_115":161,"_112":162},3,["D",1736352964157],"dbd8748c-cddb-11ef-8b59-e6cdfca9ef9f",{"_117":90,"_141":-5,"_115":164,"_112":165},["D",1736352801452],"7ade2dca-cddb-11ef-b126-e6cdfca9ef9f",{"_117":167,"_141":-5,"_115":168,"_112":169},1,["D",1736352620650],"0f1921f8-cddb-11ef-82ba-e6cdfca9ef9f",{"_117":31,"_141":-5,"_115":171,"_112":172},["D",1736352550090],"e50c2cfc-cdda-11ef-9c99-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":180,"_128":129,"_98":99,"_20":181,"_177":26,"_94":184,"_138":207,"_117":-5,"_221":167,"_222":118,"_223":224,"_225":-5},"list",{"_112":96,"_128":129,"_115":182,"_183":-5,"_130":131},["D",1734883582518],"bio",{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":185,"_104":105,"_106":-5,"_107":108,"_109":110,"_111":26,"_112":110,"_113":114,"_115":186,"_117":118,"_119":26,"_120":31,"_121":31,"_122":31,"_123":31,"_124":31,"_125":31,"_126":-5,"_20":187,"_132":-5,"_133":-7,"_134":135,"_136":137,"_138":188},true,["D",1737030044474],{"_128":129,"_130":131},[189,191,193,195,197,199,201,203,205],{"_117":118,"_141":-5,"_115":190,"_112":110},["D",1737030044474],{"_117":144,"_141":-5,"_115":192,"_112":146},["D",1736377359524],{"_117":148,"_141":-5,"_115":194,"_112":150},["D",1736377044765],{"_117":152,"_141":-5,"_115":196,"_112":154},["D",1736360433663],{"_117":156,"_141":-5,"_115":198,"_112":158},["D",1736353887265],{"_117":160,"_141":-5,"_115":200,"_112":162},["D",1736352964157],{"_117":90,"_141":-5,"_115":202,"_112":165},["D",1736352801452],{"_117":167,"_141":-5,"_115":204,"_112":169},["D",1736352620650],{"_117":31,"_141":-5,"_115":206,"_112":172},["D",1736352550090],[208],{"_112":172,"_113":209,"_117":31,"_115":210,"_211":99,"_100":101,"_107":108,"_128":129,"_11":96,"_212":-5,"_213":-5,"_214":-5,"_177":26,"_134":135,"_215":-5,"_216":217},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { \n Plus, Edit, Trash, ArrowUp, ArrowDown, \n Eye, EyeOff, AlertCircle \n} from \"https://esm.sh/lucide-react\";\n\ninterface Task {\n id: number;\n text: string;\n completed: boolean;\n date: string;\n priority: 'low' | 'medium' | 'high';\n}\n\nfunction TaskForm({ \n task, \n onSubmit, \n isEditing, \n onCancel \n}: { \n task?: Task, \n onSubmit: (task: Task) => void, \n isEditing: boolean, \n onCancel?: () => void \n}) {\n const [formTask, setFormTask] = useState(task || {\n id: 0,\n text: '',\n completed: false,\n date: new Date().toISOString().split('T')[0],\n priority: 'medium'\n });\n const [errors, setErrors] = useState<{ text?: string; date?: string }>({});\n\n const validateForm = () => {\n const newErrors: { text?: string; date?: string } = {};\n \n if (!formTask.text.trim()) {\n newErrors.text = \"Task description is required\";\n }\n \n if (!formTask.date) {\n newErrors.date = \"Date is required\";\n }\n\n setErrors(newErrors);\n return Object.keys(newErrors).length === 0;\n };\n\n const handleSubmit = () => {\n if (validateForm()) {\n onSubmit({ ...formTask, id: formTask.id || Date.now() });\n setFormTask({\n id: 0,\n text: '',\n completed: false,\n date: new Date().toISOString().split('T')[0],\n priority: 'medium'\n });\n setErrors({});\n }\n };\n\n return (\n

\n setFormTask({ ...formTask, text: e.target.value })}\n />\n {errors.text && (\n

\n {errors.text}\n

\n )}\n

\n \n setFormTask({ ...formTask, priority: e.target.value as Task['priority'] })}\n >\n \n \n \n \n \n

\n setFormTask({ ...formTask, date: e.target.value })}\n />\n {errors.date && (\n

\n {errors.date}\n

\n )}\n

\n \n

\n \n {isEditing ? 'Update Task' : 'Add Task'}\n \n {isEditing && onCancel && (\n \n Cancel\n \n )}\n

\n );\n}\n\nfunction TaskList({ \n tasks, \n onEdit, \n onDelete, \n onToggleComplete,\n visibleColumns,\n onToggleColumn \n}: { \n tasks: Task[], \n onEdit: (task: Task) => void, \n onDelete: (id: number) => void, \n onToggleComplete: (id: number) => void,\n visibleColumns: Record,\n onToggleColumn: (column: string) => void\n}) {\n const priorityColors = {\n low: 'bg-green-100',\n medium: 'bg-yellow-100',\n high: 'bg-red-100'\n };\n\n return (\n

\n {Object.keys(visibleColumns).map(col => (\n onToggleColumn(col)}\n className=\"p-1 bg-gray-200 rounded flex items-center\"\n title={`Toggle ${col} column`}\n >\n {visibleColumns[col] ? : }\n {col}\n \n ))}\n

\n \n \n \n \n {visibleColumns.text && }\n {visibleColumns.completed && }\n {visibleColumns.date && }\n {visibleColumns.priority && }\n {visibleColumns.actions && }\n \n \n \n {tasks.map(task => (\n \n {visibleColumns.text && (\n \n )}\n {visibleColumns.completed && (\n \n )}\n {visibleColumns.date && (\n \n )}\n {visibleColumns.priority && (\n \n )}\n {visibleColumns.actions && (\n \n )}\n \n ))}\n \n

Task	Done	Date	Priority	Actions
\n \n	\n onToggleComplete(task.id)}\n title=\"Mark task as complete\"\n />\n	{task.date}	{task.priority}	\n onEdit(task)}\n title=\"Edit task\"\n >\n \n \n onDelete(task.id)}\n title=\"Delete task\"\n >\n \n \n

📋 Task Manager

\n setEditingTask(undefined)}\n />\n\n

\n \n Sort by Date \n {sortOrder === 'asc' ? : }\n \n

\n\n \n

\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Task Manager\n \n \n \n \n \n \n

\n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}",["D",1736352550090],"valName","deletedAt","messageId","threadId","previous","stats",{"_218":219,"_220":31},"additions",363,"deletions","page","pageSize","total",9,"redirect","routes/_app","actionData","errors"]

Column Settings

📋 Task Manager

Add New Task

Edit Task

📋 Task Manager

TaskManagerApp

Versions

v0