feat(ui): implement results pagination and improve light theme

Author: fabiendostie

.github/workflows/CI.yml

@@ -28,7 +28,7 @@ jobs:
         run: pnpm lint
 
       - name: Format check
-        run: pnpm format --check || true
+        run: pnpm format --check
 
       - name: Build
         run: pnpm build

.github/workflows/deploy.yml

@@ -27,11 +27,11 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: "18"
-          cache: 'npm'
+          cache: "npm"
 
       - name: Setup Pages
         uses: actions/configure-pages@v4
-        
+
       - name: Install dependencies
         run: npm install
 
@@ -55,4 +55,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4 
+        uses: actions/deploy-pages@v4

.prettierignore

@@ -1 +1,50 @@
+# Node / Package Manager
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# Build Artifacts
+dist/
+build/
+.next/
+out/
+
+# Logs
+*.log
+logs
+*.log.*
+
+# Test Artifacts
+coverage/
+test-results/
+junit.xml
+
+# OS Generated Files
+.DS_Store
+Thumbs.db
+
+# Environment Variables
+.env*
+!.env.example
+
+# IDE / Editor Directories
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# Temporary / Cache Files
+.tmp/
+.cache/
+
+# Specific Project Files (Adjust as needed)
+act.md
+format.md
+prettier.md
+lint-errors.json
 public/__schema_templates/schema.hbs

app/api/list-schemas/route.ts

@@ -0,0 +1,57 @@
+import { NextResponse } from "next/server";
+import fs from "fs/promises";
+import path from "path";
+
+const SCHEMAS_DIR = path.join(process.cwd(), "public", "schemas", "v1");
+
+// Interface for the response items
+interface SchemaObject {
+  name: string;
+  filename: string;
+}
+
+export async function GET() {
+  // This route should only be used in development
+  if (process.env.NODE_ENV === "production") {
+    return NextResponse.json(
+      { error: "Endpoint not available in production. Use static index.json." },
+      { status: 404 },
+    );
+  }
+
+  try {
+    const files = await fs.readdir(SCHEMAS_DIR);
+
+    // Filter to only include JSON files and exclude Zone.Identifier files
+    const schemaFiles = files.filter(
+      (file) => file.endsWith(".json") && !file.includes(":Zone.Identifier"),
+    );
+
+    // Map to the expected SchemaObject format
+    const schemas: SchemaObject[] = schemaFiles.map((filename) => ({
+      name: filename.replace(".json", ""),
+      filename,
+    }));
+
+    return NextResponse.json(schemas);
+  } catch (error) {
+    console.error("Error listing schemas:", error);
+    // Check if the error is because the directory doesn't exist
+    if (
+      error instanceof Error &&
+      (error as NodeJS.ErrnoException).code === "ENOENT"
+    ) {
+      return NextResponse.json(
+        { error: "Schema directory not found." },
+        { status: 404 },
+      );
+    }
+    return NextResponse.json(
+      { error: "Failed to list schemas" },
+      { status: 500 },
+    );
+  }
+}
+
+// Ensure this route is always dynamic and not cached in dev
+export const dynamic = "force-dynamic";

app/api/schemas/[name]/route.ts

@@ -9,32 +9,38 @@ const getSchemasDirectory = () => {
 
 export async function GET() {
   console.log("[API /api/schemas] Getting list of schemas");
-  
+
   try {
     const directory = getSchemasDirectory();
     const files = await fs.readdir(directory);
-    
+
     // Filter to only include JSON files and exclude Zone.Identifier files
-    const schemaNames = files.filter(file => 
-      file.endsWith('.json') && !file.includes(':Zone.Identifier')
+    const schemaNames = files.filter(
+      (file) => file.endsWith(".json") && !file.includes(":Zone.Identifier"),
+    );
+
+    console.log(
+      `[API /api/schemas] Found ${schemaNames.length} schemas:`,
+      schemaNames,
     );
-    
-    console.log(`[API /api/schemas] Found ${schemaNames.length} schemas:`, schemaNames);
-    
+
     // Format the response to match what the client expects
-    const schemas = schemaNames.map(filename => ({
-      name: filename.replace('.json', ''),
+    const schemas = schemaNames.map((filename) => ({
+      name: filename.replace(".json", ""),
       filename,
     }));
-    
+
     return NextResponse.json(schemas);
   } catch (error) {
     const errorMsg = error instanceof Error ? error.message : String(error);
-    console.error("[API /api/schemas] Error reading schemas directory:", errorMsg);
-    
+    console.error(
+      "[API /api/schemas] Error reading schemas directory:",
+      errorMsg,
+    );
+
     return NextResponse.json(
       { error: "Failed to read schemas directory" },
-      { status: 500 }
+      { status: 500 },
     );
   }
 }

app/api/schemas/route.ts

@@ -4,24 +4,24 @@
 
 @layer base {
   :root {
-    --background: 0 0% 90%;
-    --foreground: 222.2 47.4% 11.2%;
-    --card: 0 0% 98%;
-    --card-foreground: 222.2 47.4% 11.2%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
+    --background: 240 5.9% 96.1%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 240 5.2% 93.9%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 240 5.2% 93.9%;
+    --popover-foreground: 222.2 84% 4.9%;
     --primary: 262 83.3% 24.7%;
     --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --secondary: 240 5.2% 93.9%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --muted: 240 4.8% 90.9%;
+    --muted-foreground: 240 3.8% 46.1%;
     --accent: 262 83.3% 24.7%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent-foreground: 210 40% 98%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
+    --border: 240 5.9% 85.8%;
+    --input: 240 5.9% 85.8%;
     --ring: 262 83.3% 24.7%;
     --radius: 0.75rem;
   }