feat: allow disabled links

app/components/LinksTable.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { TableColumn } from "@nuxt/ui";
 
+const UBadge = resolveComponent("UBadge");
+
 const props = defineProps<{
   data: Link[];
   status: "pending" | "idle" | "success" | "error";
@@ -28,6 +30,16 @@ const columns: TableColumn<Link>[] = [
         row.original.url,
       ),
   },
+  {
+    accessorKey: "disabled",
+    header: "Status",
+    cell: ({ row }) =>
+      h(UBadge, {
+        label: row.original.disabled ? "Disabled" : "Active",
+        color: row.original.disabled ? "error" : "success",
+        variant: "subtle",
+      }),
+  },
   {
     id: "actions",
     cell: ({ row }) =>

app/pages/dashboard.vue

@@ -17,10 +17,15 @@ const signOut = async () => {
 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 category = computed(() => {
+  if (route.query.filter === "active") return "active";
+  if (route.query.filter === "disabled") return "disabled";
+  return "all";
+});
 
 const filteredLinks = computed(() => {
   if (!links.value) return [];
+  if (category.value === "active") return links.value.filter((l) => !l.disabled);
   if (category.value === "disabled") return links.value.filter((l) => l.disabled);
   return links.value;
 });
@@ -61,6 +66,13 @@ const deleteLink = async (link: Link) => {
             to: '/dashboard',
             active: category === 'all',
           },
+          {
+            label: 'Active',
+            icon: 'i-lucide-link-2',
+            badge: links?.filter((l) => !l.disabled).length ?? 0,
+            to: '/dashboard?filter=active',
+            active: category === 'active',
+          },
           {
             label: 'Disabled',
             icon: 'i-lucide-link-2-off',
@@ -80,7 +92,7 @@ const deleteLink = async (link: Link) => {
 
     <UDashboardPanel>
       <template #header>
-        <UDashboardNavbar :title="category === 'all' ? 'All links' : 'Disabled links'">
+        <UDashboardNavbar :title="category === 'all' ? 'All links' : category === 'active' ? 'Active links' : 'Disabled links'">
           <template #right>
             <UButton icon="i-lucide-plus" @click="openModal(null)">
               New link

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

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