feat: add skipped/failed packages tab to STL files page

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/app/(app)/stls/_components/stl-table.tsx

@@ -8,6 +8,7 @@ import { useDataTable } from "@/hooks/use-data-table";
 import { getPackageColumns, type PackageRow } from "./package-columns";
 import { PackageFilesDrawer } from "./package-files-drawer";
 import { IngestionStatus } from "./ingestion-status";
+import { SkippedPackagesTab } from "./skipped-packages-tab";
 import { DataTable } from "@/components/shared/data-table";
 import { DataTablePagination } from "@/components/shared/data-table-pagination";
 import { DataTableViewOptions } from "@/components/shared/data-table-view-options";
@@ -20,7 +21,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Badge } from "@/components/ui/badge";
 import type { IngestionAccountStatus } from "@/lib/telegram/types";
+import type { SkippedRow } from "./skipped-columns";
 import { updatePackageCreator, updatePackageTags } from "../actions";
 
 interface StlTableProps {
@@ -30,6 +34,9 @@ interface StlTableProps {
   ingestionStatus: IngestionAccountStatus[];
   availableTags: string[];
   searchTerm: string;
+  skippedData: SkippedRow[];
+  skippedPageCount: number;
+  skippedTotalCount: number;
 }
 
 export function StlTable({
@@ -39,6 +46,9 @@ export function StlTable({
   ingestionStatus,
   availableTags,
   searchTerm,
+  skippedData,
+  skippedPageCount,
+  skippedTotalCount,
 }: StlTableProps) {
   const router = useRouter();
   const pathname = usePathname();
@@ -77,6 +87,22 @@ export function StlTable({
     [router, pathname, searchParams]
   );
 
+  const activeTab = searchParams.get("tab") ?? "packages";
+
+  const updateTab = useCallback(
+    (value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (value === "packages") {
+        params.delete("tab");
+      } else {
+        params.set("tab", value);
+      }
+      params.set("page", "1");
+      router.push(`${pathname}?${params.toString()}`, { scroll: false });
+    },
+    [router, pathname, searchParams]
+  );
+
   const columns = getPackageColumns({
     onViewFiles: (pkg) => setViewPkg(pkg),
     searchTerm,
@@ -125,39 +151,63 @@ export function StlTable({
         <IngestionStatus initialStatus={ingestionStatus} />
       </PageHeader>
 
-      <div className="flex flex-wrap items-center gap-2">
-        <div className="relative flex-1 min-w-[200px] max-w-sm">
-          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-          <Input
-            placeholder="Search packages or files..."
-            value={searchValue}
-            onChange={(e) => updateSearch(e.target.value)}
-            className="pl-9 h-9"
-          />
-        </div>
-        {availableTags.length > 0 && (
-          <Select value={activeTag || "all"} onValueChange={updateTagFilter}>
-            <SelectTrigger className="w-[160px] h-9">
-              <SelectValue placeholder="All Tags" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All Tags</SelectItem>
-              {availableTags.map((tag) => (
-                <SelectItem key={tag} value={tag}>
-                  {tag}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        )}
-        <DataTableViewOptions table={table} />
-      </div>
+      <Tabs value={activeTab} onValueChange={updateTab}>
+        <TabsList>
+          <TabsTrigger value="packages">Packages</TabsTrigger>
+          <TabsTrigger value="skipped" className="gap-1.5">
+            Skipped / Failed
+            {skippedTotalCount > 0 && (
+              <Badge variant="secondary" className="text-[10px] ml-1">
+                {skippedTotalCount}
+              </Badge>
+            )}
+          </TabsTrigger>
+        </TabsList>
 
-      <DataTable
-        table={table}
-        emptyMessage="No packages found. Archives will appear here after ingestion."
-      />
-      <DataTablePagination table={table} totalCount={totalCount} />
+        <TabsContent value="packages" className="space-y-4">
+          <div className="flex flex-wrap items-center gap-2">
+            <div className="relative flex-1 min-w-[200px] max-w-sm">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search packages or files..."
+                value={searchValue}
+                onChange={(e) => updateSearch(e.target.value)}
+                className="pl-9 h-9"
+              />
+            </div>
+            {availableTags.length > 0 && (
+              <Select value={activeTag || "all"} onValueChange={updateTagFilter}>
+                <SelectTrigger className="w-[160px] h-9">
+                  <SelectValue placeholder="All Tags" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Tags</SelectItem>
+                  {availableTags.map((tag) => (
+                    <SelectItem key={tag} value={tag}>
+                      {tag}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+            <DataTableViewOptions table={table} />
+          </div>
+
+          <DataTable
+            table={table}
+            emptyMessage="No packages found. Archives will appear here after ingestion."
+          />
+          <DataTablePagination table={table} totalCount={totalCount} />
+        </TabsContent>
+
+        <TabsContent value="skipped">
+          <SkippedPackagesTab
+            data={skippedData}
+            pageCount={skippedPageCount}
+            totalCount={skippedTotalCount}
+          />
+        </TabsContent>
+      </Tabs>
 
       <PackageFilesDrawer
         pkg={viewPkg}