refactor(app): rewrite application with Nuxt 4, Pinia, and TailwindCSS

This commit replaces the original vanilla JavaScript implementation with a modern frontend stack. The entire application has been rewritten to improve maintainability, developer experience, and leverage modern
web technologies.

Key changes include:
- Replaced plain HTML, CSS, and JS with a Nuxt 4 project structure.
- Migrated state management from a global state object to a Pinia store for better organization and reactivity.
- Rebuilt the UI with Vue 3 components and styled with TailwindCSS.
- Changed the primary persistence mechanism from manual file I/O to automatic LocalStorage saving, while retaining import/export functionality.
- All core features, including drag-and-drop, task management, and the import/merge diffing logic, have been ported to the new architecture.

utils/diff.ts

@@ -0,0 +1,60 @@
+import type { Board } from '~/types/schema'
+
+export function diffBoards(cur: Board, imp: Board) {
+  const res: any = { tasks: {}, stages: {}, categories: {}, layout: { changed: false } }
+
+  const idSet = (arr: any[]) => new Set(arr.map((x) => x.uuid))
+  const curTasks = idSet(cur.tasks)
+  const impTasks = idSet(imp.tasks)
+  res.tasks.added = imp.tasks.filter((t) => !curTasks.has(t.uuid)).map((t) => t.uuid)
+  res.tasks.removed = cur.tasks.filter((t) => !impTasks.has(t.uuid)).map((t) => t.uuid)
+  res.tasks.modified = [] as any[]
+  cur.tasks.forEach((t) => {
+    if (!impTasks.has(t.uuid)) return
+    const it = imp.tasks.find((x) => x.uuid === t.uuid)!
+    const fields: string[] = []
+    if ((t.title || '') !== (it.title || '')) fields.push('title')
+    if ((t.description || '') !== (it.description || '')) fields.push('description')
+    if ((t.category || '') !== (it.category || '')) fields.push('category')
+    if (JSON.stringify(t.steps || []) !== JSON.stringify(it.steps || [])) fields.push('steps')
+    if (fields.length) res.tasks.modified.push({ id: t.uuid, fields })
+  })
+
+  const curCats = idSet(cur.categories)
+  const impCats = idSet(imp.categories)
+  res.categories.added = imp.categories.filter((c) => !curCats.has(c.uuid)).map((c) => c.uuid)
+  res.categories.removed = cur.categories.filter((c) => !impCats.has(c.uuid)).map((c) => c.uuid)
+  res.categories.modified = [] as any[]
+  cur.categories.forEach((c) => {
+    if (!impCats.has(c.uuid)) return
+    const ic = imp.categories.find((x) => x.uuid === c.uuid)!
+    const fields: string[] = []
+    if ((c.title || '') !== (ic.title || '')) fields.push('title')
+    if ((c.color || '') !== (ic.color || '')) fields.push('color')
+    if (fields.length) res.categories.modified.push({ id: c.uuid, fields })
+  })
+
+  const curStages = idSet(cur.stages)
+  const impStages = idSet(imp.stages)
+  res.stages.added = imp.stages.filter((s) => !curStages.has(s.uuid)).map((s) => s.uuid)
+  res.stages.removed = cur.stages.filter((s) => !impStages.has(s.uuid)).map((s) => s.uuid)
+  res.stages.modified = [] as any[]
+  const arrDiff = (a: string[], b: string[]) => ({
+    added: b.filter((x) => !new Set(a).has(x)),
+    removed: a.filter((x) => !new Set(b).has(x)),
+    changedOrder: JSON.stringify(a) !== JSON.stringify(b)
+  })
+  cur.stages.forEach((s) => {
+    if (!impStages.has(s.uuid)) return
+    const is = imp.stages.find((x) => x.uuid === s.uuid)!
+    const fields: string[] = []
+    if ((s.title || '') !== (is.title || '')) fields.push('title')
+    const d = arrDiff(s.tasks || [], is.tasks || [])
+    if (d.added.length || d.removed.length || d.changedOrder) fields.push('tasks')
+    if (fields.length) res.stages.modified.push({ id: s.uuid, fields })
+  })
+
+  res.layout.changed = JSON.stringify(cur.layout || {}) !== JSON.stringify(imp.layout || {})
+  return res
+}
+