feat: dashboard interface

app/app.vue

@@ -1,7 +1,5 @@
 <template>
   <UApp>
-    <UMain>
     <NuxtPage />
-    </UMain>
   </UApp>
 </template>

app/components/LinkModal.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { z } from "zod";
+import type { FormSubmitEvent } from "@nuxt/ui";
+
+const props = defineProps<{
+  link: Link | null;
+}>();
+
+const schema = z.object({
+  name: z.string({ error: "Required" }),
+  path: z.string({ error: "Required" }),
+  url: z.url({ error: (err) => err.code === "invalid_type" ? "Required" : "Invalid format", }),
+  disabled: z.boolean().optional(),
+});
+
+type Schema = z.output<typeof schema>;
+
+const emit = defineEmits<{ close: [value: boolean] }>();
+
+const toast = useToast();
+const submitting = ref(false);
+
+const state = reactive<Partial<Schema>>({
+  name: props.link?.name,
+  path: props.link?.path,
+  url: props.link?.url,
+  disabled: props.link?.disabled ?? false,
+});
+
+const onSubmit = async (event: FormSubmitEvent<Schema>) => {
+  submitting.value = true;
+  try {
+    if (props.link) {
+      await $fetch(`/api/links/${props.link.id}`, { method: "PATCH", body: event.data, });
+      toast.add({ title: "Link updated", color: "success" });
+    } else {
+      await $fetch("/api/links", { method: "POST", body: event.data });
+      toast.add({ title: "Link created", color: "success" });
+    }
+    emit("close", true);
+  } catch {
+    toast.add({ title: "Something went wrong", color: "error" });
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>
+
+<template>
+  <UModal :title="link ? 'Edit link' : 'New link'">
+    <template #body>
+      <UForm
+        :schema="schema"
+        :state="state"
+        class="space-y-4"
+        @submit="onSubmit"
+      >
+        <UFormField label="Name" name="name">
+          <UInput v-model="state.name" placeholder="my-link" class="w-full" />
+        </UFormField>
+
+        <UFormField label="Path" name="path">
+          <UInput v-model="state.path" placeholder="/go/somewhere" class="w-full" />
+        </UFormField>
+
+        <UFormField label="URL" name="url">
+          <UInput v-model="state.url" placeholder="https://example.com" class="w-full" />
+        </UFormField>
+
+        <UFormField name="disabled">
+          <UCheckbox v-model="state.disabled" label="Disabled" />
+        </UFormField>
+
+        <div class="flex justify-end gap-2 pt-2">
+          <UButton variant="ghost" @click="emit('close', false)">Cancel</UButton>
+          <UButton type="submit" :loading="submitting">{{ link ? "Save" : "Create" }}</UButton>
+        </div>
+      </UForm>
+    </template>
+  </UModal>
+</template>

app/components/LinksTable.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { TableColumn } from "@nuxt/ui";
+
+const props = defineProps<{
+  data: Link[];
+  status: "pending" | "idle" | "success" | "error";
+}>();
+
+const emit = defineEmits<{
+  edit: [link: Link];
+  delete: [link: Link];
+}>();
+
+const UButton = resolveComponent("UButton");
+
+const columns: TableColumn<Link>[] = [
+  { accessorKey: "name", header: "Name" },
+  { accessorKey: "path", header: "Path" },
+  {
+    accessorKey: "url",
+    header: "URL",
+    cell: ({ row }) =>
+      h("a", {
+          href: row.original.url,
+          target: "_blank",
+          class: "text-primary hover:underline truncate max-w-xs block",
+        },
+        row.original.url,
+      ),
+  },
+  {
+    id: "actions",
+    cell: ({ row }) =>
+      h("div", { class: "flex justify-end gap-1" }, [
+        h(UButton, {
+          icon: "i-lucide-pencil",
+          variant: "ghost",
+          size: "sm",
+          onClick: () => emit("edit", row.original),
+        }),
+        h(UButton, {
+          icon: "i-lucide-trash-2",
+          variant: "ghost",
+          size: "sm",
+          color: "error",
+          onClick: () => emit("delete", row.original),
+        }),
+      ]),
+  },
+];
+</script>
+
+<template>
+  <UTable
+    :data="data"
+    :columns="columns"
+    :loading="status === 'pending' || status === 'idle'"
+  >
+    <template #empty>
+      {{ status === "pending" || status === "idle" ? "Loading..." : "No data" }}
+    </template>
+  </UTable>
+</template>

app/pages/index.vue

@@ -1,3 +1,90 @@
+<script setup lang="ts">
+import { LazyLinkModal } from "#components";
+import type { InternalApi } from "nitropack/types";
+
+type Link = InternalApi["/api/links"]["get"][number];
+
+const toast = useToast();
+const overlay = useOverlay();
+
+const { data: links, status, refresh } = useLazyFetch("/api/links", { key: "links", server: false, });
+
+const route = useRoute();
+const category = computed(() => route.query.filter === "disabled" ? "disabled" : "all",);
+
+const filteredLinks = computed(() => {
+  if (!links.value) return [];
+  if (category.value === "disabled") return links.value.filter((l) => l.disabled);
+  return links.value;
+});
+
+const openModal = async (link: Link | null) => {
+  const modal = overlay.create(LazyLinkModal, { destroyOnClose: true });
+  const instance = modal.open({ link });
+  if (await instance.result) await refresh();
+}
+
+const deleteLink = async (link: Link) => {
+  try {
+    await $fetch(`/api/links/${link.id}`, { method: "DELETE" });
+    toast.add({ title: "Link deleted", color: "success" });
+    await refresh();
+  } catch {
+    toast.add({ title: "Failed to delete link", color: "error" });
+  }
+}
+
+</script>
+
 <template>
-  <div>ok</div>
+  <UDashboardGroup>
+    <UDashboardSidebar :toggle="false">
+      <template #header>
+        <UDashboardNavbar title="pihka.al" :toggle="false" />
+      </template>
+
+      <UNavigationMenu
+        orientation="vertical"
+        highlight
+        :items="[
+          {
+            label: 'All',
+            icon: 'i-lucide-link',
+            badge: links?.length ?? 0,
+            to: '/',
+            active: category === 'all',
+          },
+          {
+            label: 'Disabled',
+            icon: 'i-lucide-link-2-off',
+            badge: links?.filter((l) => l.disabled).length ?? 0,
+            to: '/?filter=disabled',
+            active: category === 'disabled',
+          },
+        ]"
+        class="px-2"
+      />
+    </UDashboardSidebar>
+
+    <UDashboardPanel>
+      <template #header>
+        <UDashboardNavbar :title="category === 'all' ? 'All links' : 'Disabled links'">
+          <template #right>
+            <UButton icon="i-lucide-plus" @click="openModal(null)">
+              New link
+            </UButton>
+          </template>
+        </UDashboardNavbar>
+      </template>
+
+      <template #body>
+        <LinksTable
+          :data="filteredLinks"
+          :status="status"
+          @edit="openModal"
+          @delete="deleteLink"
+        />
+      </template>
+    </UDashboardPanel>
+  </UDashboardGroup>
 </template>

nuxt.config.ts

@@ -5,17 +5,21 @@ export default defineNuxtConfig({
     '@nuxt/ui'
   ],
 
+  vite: {
+    optimizeDeps: {
+      include: [
+        'zod',
+      ]
+    }
+  },
+
   devtools: {
     enabled: true
   },
 
   css: ['~/assets/css/main.css'],
 
-  routeRules: {
-    '/': { prerender: true }
-  },
-
-  compatibilityDate: '2025-01-15',
+compatibilityDate: '2025-01-15',
 
   eslint: {
     config: {

package.json

@@ -24,6 +24,7 @@
     "zod": "^4.3.6"
   },
   "devDependencies": {
+    "@iconify-json/lucide": "^1.2.98",
     "@nuxt/eslint": "^1.15.2",
     "@types/better-sqlite3": "^7.6.13",
     "drizzle-kit": "^0.31.10",

pnpm-lock.yaml

@@ -30,6 +30,9 @@ importers:
         specifier: ^4.3.6
         version: 4.3.6
     devDependencies:
+      '@iconify-json/lucide':
+        specifier: ^1.2.98
+        version: 1.2.98
       '@nuxt/eslint':
         specifier: ^1.15.2
         version: 1.15.2(@typescript-eslint/utils@8.57.0(eslint@10.0.3(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.30)(eslint@10.0.3(jiti@2.6.1))(magicast@0.5.2)(typescript@5.9.3)(vite@7.3.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
@@ -767,6 +770,9 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@iconify-json/lucide@1.2.98':
+    resolution: {integrity: sha512-Lx2464W8Tty/QEnZ2UPb73nPdML/HpGCj0J0w37jP3/jx3l4fniZBjDxe1TgHiIL5XW9QO3vlx53ZQZ5JsNpzQ==}
+
   '@iconify/collections@1.0.661':
     resolution: {integrity: sha512-r5dwSQHdwNxfjx8AZiHfn8IuafVYTl850xzN9gKVMi8L9sXyd/XNawTr1qIJQZbJxouCETielBRP8TM9YmiSEA==}
 
@@ -6083,6 +6089,10 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
+  '@iconify-json/lucide@1.2.98':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/collections@1.0.661':
     dependencies:
       '@iconify/types': 2.0.0

server/api/links/[id]/index.delete.ts

@@ -4,7 +4,7 @@ import { eq } from "drizzle-orm";
 import { z } from "zod";
 
 const paramsSchema = z.object({
-  id: z.number(),
+  id: z.string().transform(Number),
 });
 
 export default defineEventHandler(async (event) => {

server/api/links/[id]/index.get.ts

@@ -4,7 +4,7 @@ import { eq } from "drizzle-orm";
 import { z } from "zod";
 
 const paramsSchema = z.object({
-  id: z.number(),
+  id: z.string().transform(Number),
 });
 
 export default defineEventHandler(async (event) => {

server/api/links/[id]/index.patch.ts

@@ -4,7 +4,7 @@ import { eq } from "drizzle-orm";
 import { z } from "zod";
 
 const paramsSchema = z.object({
-  id: z.number(),
+  id: z.string().transform(Number),
 });
 
 const bodySchema = z.object({

server/api/links/index.post.ts

@@ -5,7 +5,8 @@ import { z } from "zod";
 const bodySchema = z.object({
   name: z.string().min(1),
   path: z.string().min(1),
-  url: z.url().min(1),
+  url: z.url(),
+  disabled: z.boolean().optional(),
 });
 
 export default defineEventHandler(async (event) => {

server/db/migrations/0001_tense_grey_gargoyle.sql

@@ -0,0 +1 @@
+ALTER TABLE `links` ADD `disabled` integer DEFAULT false NOT NULL;

server/db/migrations/meta/0001_snapshot.json

@@ -0,0 +1,86 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "0e8befef-3e4f-43f1-a031-95c2ca514e30",
+  "prevId": "d03860ad-0d5c-4943-92ba-d704c74e1501",
+  "tables": {
+    "links": {
+      "name": "links",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "path": {
+          "name": "path",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "disabled": {
+          "name": "disabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        }
+      },
+      "indexes": {
+        "links_name_unique": {
+          "name": "links_name_unique",
+          "columns": [
+            "name"
+          ],
+          "isUnique": true
+        },
+        "links_path_unique": {
+          "name": "links_path_unique",
+          "columns": [
+            "path"
+          ],
+          "isUnique": true
+        },
+        "links_url_unique": {
+          "name": "links_url_unique",
+          "columns": [
+            "url"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

server/db/migrations/meta/_journal.json

@@ -8,6 +8,13 @@
       "when": 1773788954273,
       "tag": "0000_pretty_mentor",
       "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "6",
+      "when": 1773792538248,
+      "tag": "0001_tense_grey_gargoyle",
+      "breakpoints": true
     }
   ]
 }

server/db/schema.ts

@@ -5,4 +5,5 @@ export const links = sqliteTable("links", {
   name: text("name").notNull().unique(),
   path: text("path").notNull().unique(),
   url: text("url").notNull().unique(),
+  disabled: integer("disabled", { mode: "boolean" }).notNull().default(false),
 });

shared/types/app.ts

@@ -0,0 +1,3 @@
+import type { InternalApi } from "nitropack/types";
+
+export type Link = InternalApi["/api/links"]["get"][number];