feat: add skill pack management features including creation, editing, and syncing

2026-02-14 02:05:11 +05:30
parent 88565f4d69
commit a7e1e5cbf4
28 changed files with 4403 additions and 430 deletions
--- a/frontend/src/components/skills/SkillPacksTable.tsx
+++ b/frontend/src/components/skills/SkillPacksTable.tsx
@@ -0,0 +1,188 @@
+import { useMemo, useState } from "react";
+import Link from "next/link";
+
+import {
+  type ColumnDef,
+  type OnChangeFn,
+  type SortingState,
+  type Updater,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import type { SkillPackRead } from "@/api/generated/model";
+import { DataTable, type DataTableEmptyState } from "@/components/tables/DataTable";
+import { dateCell } from "@/components/tables/cell-formatters";
+import { Button } from "@/components/ui/button";
+import { truncateText as truncate } from "@/lib/formatters";
+
+type SkillPacksTableProps = {
+  packs: SkillPackRead[];
+  isLoading?: boolean;
+  sorting?: SortingState;
+  onSortingChange?: OnChangeFn<SortingState>;
+  stickyHeader?: boolean;
+  canSync?: boolean;
+  syncingPackIds?: Set<string>;
+  onSync?: (pack: SkillPackRead) => void;
+  onDelete?: (pack: SkillPackRead) => void;
+  getEditHref?: (pack: SkillPackRead) => string;
+  emptyState?: Omit<DataTableEmptyState, "icon"> & {
+    icon?: DataTableEmptyState["icon"];
+  };
+};
+
+const DEFAULT_EMPTY_ICON = (
+  <svg
+    className="h-16 w-16 text-slate-300"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M4 7h16" />
+    <path d="M4 12h16" />
+    <path d="M4 17h16" />
+    <path d="M8 7v10" />
+    <path d="M16 7v10" />
+  </svg>
+);
+
+export function SkillPacksTable({
+  packs,
+  isLoading = false,
+  sorting,
+  onSortingChange,
+  stickyHeader = false,
+  canSync = false,
+  syncingPackIds,
+  onSync,
+  onDelete,
+  getEditHref,
+  emptyState,
+}: SkillPacksTableProps) {
+  const [internalSorting, setInternalSorting] = useState<SortingState>([
+    { id: "name", desc: false },
+  ]);
+  const resolvedSorting = sorting ?? internalSorting;
+  const handleSortingChange: OnChangeFn<SortingState> =
+    onSortingChange ??
+    ((updater: Updater<SortingState>) => {
+      setInternalSorting(updater);
+    });
+
+  const columns = useMemo<ColumnDef<SkillPackRead>[]>(() => {
+    const baseColumns: ColumnDef<SkillPackRead>[] = [
+      {
+        accessorKey: "name",
+        header: "Pack",
+        cell: ({ row }) => (
+          <div>
+            <p className="text-sm font-medium text-slate-900">{row.original.name}</p>
+            <p className="mt-1 line-clamp-2 text-xs text-slate-500">
+              {row.original.description || "No description provided."}
+            </p>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "source_url",
+        header: "Pack URL",
+        cell: ({ row }) => (
+          <Link
+            href={row.original.source_url}
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-1 text-sm font-medium text-slate-700 hover:text-blue-600"
+          >
+            {truncate(row.original.source_url, 48)}
+          </Link>
+        ),
+      },
+      {
+        accessorKey: "skill_count",
+        header: "Skills",
+        cell: ({ row }) => (
+          <Link
+            href={`/skills/marketplace?packId=${encodeURIComponent(row.original.id)}`}
+            className="text-sm font-medium text-blue-700 hover:text-blue-600 hover:underline"
+          >
+            {row.original.skill_count ?? 0}
+          </Link>
+        ),
+      },
+      {
+        accessorKey: "updated_at",
+        header: "Updated",
+        cell: ({ row }) => dateCell(row.original.updated_at),
+      },
+      {
+        id: "sync",
+        header: "",
+        enableSorting: false,
+        cell: ({ row }) => {
+          if (!onSync) return null;
+          const isThisPackSyncing = Boolean(syncingPackIds?.has(row.original.id));
+          return (
+            <div className="flex justify-end">
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                onClick={() => onSync(row.original)}
+                disabled={isThisPackSyncing || !canSync}
+              >
+                {isThisPackSyncing ? "Syncing..." : "Sync"}
+              </Button>
+            </div>
+          );
+        },
+      },
+    ];
+    return baseColumns;
+  }, [canSync, onSync, syncingPackIds]);
+
+  // eslint-disable-next-line react-hooks/incompatible-library
+  const table = useReactTable({
+    data: packs,
+    columns,
+    state: {
+      sorting: resolvedSorting,
+    },
+    onSortingChange: handleSortingChange,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  return (
+    <DataTable
+      table={table}
+      isLoading={isLoading}
+      stickyHeader={stickyHeader}
+      rowClassName="transition hover:bg-slate-50"
+      cellClassName="px-6 py-4 align-top"
+      rowActions={
+        getEditHref || onDelete
+          ? {
+              ...(getEditHref ? { getEditHref } : {}),
+              ...(onDelete ? { onDelete } : {}),
+            }
+          : undefined
+      }
+      emptyState={
+        emptyState
+          ? {
+              icon: emptyState.icon ?? DEFAULT_EMPTY_ICON,
+              title: emptyState.title,
+              description: emptyState.description,
+              actionHref: emptyState.actionHref,
+              actionLabel: emptyState.actionLabel,
+            }
+          : undefined
+      }
+    />
+  );
+}