🗒️ Task Board

\n setIsSettingsOpen(true)}\n aria-label=\"Open Settings\"\n >\n ⚙️\n \n \n {isDarkMode ? \"☀️\" : \"🌙\"}\n \n

\n\n {isSettingsOpen && (\n

setIsSettingsOpen(false)}>\n

e.stopPropagation()}>\n

App Settings

\n \n

\n\n

\n Font Family\n

\n {config.fonts.map((font) => (\n {\n setChosenFont(font);\n utils.updateAppStyle(font, fontSize);\n }}\n >\n {font}\n

\n ))}\n

\n\n

\n Text Size\n

\n {[14, 16, 20].map((size) => (\n setFontSize(size)}\n aria-label={`Set ${size === 14 ? \"Small\" : size === 16 ? \"Medium\" : \"Large\"} Font Size`}\n >\n {size === 14 ? \"S\" : size === 16 ? \"M\" : \"L\"}\n \n ))}\n

\n\n

\n \n setIsDeleteButtonVisible(e.target.checked)}\n className=\"mr-2\"\n aria-label=\"Show Delete Button\"\n />\n Show Delete Button\n \n

\n\n

\n \n

\n )}\n\n

\n setNewTaskText(e.target.value)}\n placeholder=\"What needs to be done?\"\n style={{ width: \"300px\", height: \"40px\" }}\n aria-label=\"New Task Input\"\n />\n \n Add Task\n \n

\n\n \n

\n {Object.entries(taskLists).map(([columnId, tasks]) => (\n \n {(provided) => (\n \n

\n {columnId.replace(/([A-Z])/g, \" $1\").toUpperCase()}\n

\n {tasks.map((task, index) => (\n \n {(provided) => (\n handleTaskInteraction(e, task, columnId)}\n onMouseDown={(e) => handleTaskInteraction(e, task, columnId)}\n >\n \n {task.title}\n \n {isDeleteButtonVisible && (\n removeTask(task.id, columnId)}\n className=\"ml-2 text-red-500 hover:text-red-700\"\n aria-label={`Delete task: ${task.title}`}\n >\n 🗑️\n \n )}\n

\n )}\n \n ))}\n {provided.placeholder}\n

\n \n )}\n \n ))}\n \n \n\n {isEditModalOpen && (\n

setIsEditModalOpen(false)}>\n

e.stopPropagation()}>\n

Edit Task

\n \n

\n setEditedTaskText(e.target.value)}\n aria-label=\"Edit Task Input\"\n />\n

\n \n \n

\n )}\n\n \n View Source\n \n \n );\n}\n\n// Error Boundary component to catch and display React errors\nclass ErrorBoundary extends React.Component {\n constructor(props) {\n super(props);\n this.state = { hasError: false, error: null };\n }\n\n static getDerivedStateFromError(error) {\n return { hasError: true, error };\n }\n\n render() {\n if (this.state.hasError) {\n return (\n

Something went wrong.

{this.state.error.toString()}

\n );\n }\n return this.props.children;\n }\n}\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const tableName = config.database.getTableName();\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${tableName} (\n id TEXT PRIMARY KEY,\n title TEXT NOT NULL,\n column TEXT NOT NULL\n )\n `);\n\n if (request.method === \"POST\") {\n const url = new URL(request.url);\n const body = await request.json();\n\n switch (url.pathname) {\n case \"/add-task\":\n await sqlite.execute(\n `INSERT INTO ${tableName} (id, title, column) VALUES (?, ?, ?)`,\n [crypto.randomUUID(), body.title, body.column]\n );\n break;\n case \"/move-task\":\n await sqlite.execute(\n `UPDATE ${tableName} SET column = ? WHERE id = ?`,\n [body.destColumn, body.taskId]\n );\n break;\n case \"/delete-task\":\n await sqlite.execute(\n `DELETE FROM ${tableName} WHERE id = ?`,\n [body.taskId]\n );\n break;\n case \"/update-task\":\n await sqlite.execute(\n `UPDATE ${tableName} SET title = ? WHERE id = ?`,\n [body.newTitle, body.taskId]\n );\n break;\n default:\n return new Response(\"Not Found\", { status: 404 });\n }\n\n return getAllTasks(sqlite, tableName);\n }\n\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/get-tasks\") {\n return getAllTasks(sqlite, tableName);\n }\n\n return new Response(\n `\n \n \n \n Task Board\n \n \n \n \n \n \n

\n \n \n \n \n `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}\n\nasync function getAllTasks(sqlite, tableName) {\n const columns = Object.values(config.columns);\n const tasks = await Promise.all(\n columns.map(column =>\n sqlite.execute(`SELECT * FROM ${tableName} WHERE column = ?`, [column])\n )\n );\n\n const result = Object.fromEntries(\n columns.map((column, index) => [column, tasks[index].rows])\n );\n\n return new Response(JSON.stringify(result), { headers: { \"content-type\": \"application/json\" } });\n}","createdAt",["D",1742707563166],"version",9,{"_117":118,"_119":120},"handle","arfan","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ3WWZ5Sm91SWx1eXRNRTZDazIwbnFiUVV4WiJ9","fileId","606b4d94-26d5-11f0-a5b3-569c3dd06744","slug","arfan/kanbanTest","description","actionData","errors"]