Merge branch 'develop'

.env

@@ -1 +1,2 @@
 DATABASE_URL="file:./dev.db"
+DEFAULT_IMG_QUALITY=70

.vscode/settings.json

@@ -5,7 +5,9 @@
         "{**/index.*,**/route.*,**/layout.*,**/page.*}": "${dirname}.${extname} (${filename})"
     },
     "cSpell.words": [
+        "hie",
         "nextjs",
+        "openapi",
         "tailwindcss",
         "Topbar",
         "zustand"

CHANGELOG.md

@@ -18,9 +18,15 @@ Types of changes:
 
 ### Added
 
-- Add tag id to explorer route
+- Add tag ID to explorer route
 - Add breadcrumbs to explorer page
 - Add children tag button to explorer page
+- Add `/api/tags/root` API for fetch root tags
+- Add `DEFAULT_IMG_QUALITY` env variable for `/api/image` API to control default image quality
+
+### Changed
+
+- Switched to client-side routing instead of using `href`
 
 ## [0.1.0-alpha.1] - 2024-09-15
 

app/api/docs/page.tsx

@@ -1,7 +1,9 @@
+// The API docs page
+
 import SwaggerUI from "swagger-ui-react";
 import "swagger-ui-react/swagger-ui.css";
 import "./custom.css";
 
 export default function ApiDocs() {
-  return <SwaggerUI url="/open-api/document.yaml" />;
+  return <SwaggerUI url="/openapi/document.yaml" />;
 }

app/api/folders/[id]/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import { prisma } from "@/app/lib/db/prisma";
+import { prisma } from "@/app/lib/config/prisma";
 import { StatusCodes } from "http-status-codes";
 
 // Delete a folder
@@ -66,6 +66,7 @@ export async function GET(
     });
     return NextResponse.json(list);
   } catch (error) {
+    console.error("Error fetching folders:", error);
     return NextResponse.json(
       { error: "Error fetching folders" },
       { status: StatusCodes.INTERNAL_SERVER_ERROR }

app/api/folders/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import { prisma } from "@/app/lib/db/prisma";
+import { prisma } from "@/app/lib/config/prisma";
 import { StatusCodes } from "http-status-codes";
 
 // Create a folder
@@ -39,6 +39,7 @@ export async function GET(request: Request) {
     });
     return NextResponse.json(list);
   } catch (error) {
+    console.error("Error fetching folders:", error);
     return NextResponse.json(
       { error: "Error fetching folders" },
       { status: StatusCodes.INTERNAL_SERVER_ERROR }

app/api/fs/[dir]/route.ts

@@ -12,8 +12,8 @@ export async function GET(
   try {
     const files = await fs.readdir(dirPath);
     return NextResponse.json(files);
-  } catch (err) {
-    console.error("Error reading directory:", err);
+  } catch (error) {
+    console.error("Error reading directory:", error);
     return NextResponse.json(
       { error: "Error reading directory" },
       { status: StatusCodes.INTERNAL_SERVER_ERROR }

app/api/image/[path]/route.ts

@@ -4,7 +4,7 @@ import sharp from "sharp";
 import path from "path";
 import fs from "fs/promises";
 
-const defaultQuality = 80; // TODO ENV
+const fallbackQuality = 80;
 const bashPath = "/app/volume";
 
 export async function GET(
@@ -30,7 +30,7 @@ export async function GET(
   let height = Number(url.searchParams.get("height")) || undefined;
   const quality = parseParam(
     url.searchParams.get("quality"),
-    defaultQuality,
+    Number(process.env.DEFAULT_IMG_QUALITY) || fallbackQuality,
     1,
     100
   );

app/api/items/[id]/path/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import { prisma } from "@/app/lib/db/prisma";
+import { prisma } from "@/app/lib/config/prisma";
 import { StatusCodes } from "http-status-codes";
 
 export async function GET(
@@ -22,6 +22,7 @@ export async function GET(
     const fullPath = `${item.folder.path}${item.path}`;
     return NextResponse.json({ fullPath });
   } catch (error) {
+    console.error("Error fetching item:", error);
     return NextResponse.json(
       { error: "Error fetching item" },
       { status: StatusCodes.INTERNAL_SERVER_ERROR }

app/api/items/[id]/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import { prisma } from "@/app/lib/db/prisma";
+import { prisma } from "@/app/lib/config/prisma";
 import { StatusCodes } from "http-status-codes";
 
 // Get an item
@@ -17,12 +17,19 @@ export async function GET(
     });
 
     if (!item) {
-      return NextResponse.json({ error: "Item not found" }, { status: 404 });
+      return NextResponse.json(
+        { error: "Item not found" },
+        { status: StatusCodes.NOT_FOUND }
+      );
     }
 
     return NextResponse.json(item);
   } catch (error) {
-    return NextResponse.json({ error: "Error fetching item" }, { status: 500 });
+    console.error("Error fetching item:", error);
+    return NextResponse.json(
+      { error: "Error fetching item" },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );
   }
 }
 
@@ -39,7 +46,10 @@ export async function DELETE(
     return NextResponse.json(deleted);
   } catch (error) {
     console.error("Error deleting item:", error);
-    return NextResponse.json({ error: "Error deleting item" }, { status: 500 });
+    return NextResponse.json(
+      { error: "Error deleting item" },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );
   }
 }
 
@@ -62,6 +72,9 @@ export async function PATCH(
     return NextResponse.json(item);
   } catch (error) {
     console.error("Error update item:", error);
-    return NextResponse.json({ error: "Error deleting item" }, { status: 500 });
+    return NextResponse.json(
+      { error: "Error deleting item" },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );
   }
 }

app/api/items/relation/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import { prisma } from "@/app/lib/db/prisma";
+import { prisma } from "@/app/lib/config/prisma";
 import { StatusCodes } from "http-status-codes";
 
 export async function POST(request: Request) {
@@ -45,6 +45,7 @@ export async function GET() {
     const relations = await prisma.itemRelation.findMany();
     return NextResponse.json(relations);
   } catch (error) {
+    console.error("Error fetching item relations:", error);
     return NextResponse.json(
       { error: "Error fetching item relations" },
       { status: StatusCodes.INTERNAL_SERVER_ERROR }

app/api/items/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import { prisma } from "@/app/lib/db/prisma";
+import { prisma } from "@/app/lib/config/prisma";
 import { StatusCodes } from "http-status-codes";
 
 // Create a new item
@@ -18,7 +18,10 @@ export async function POST(request: Request) {
     return NextResponse.json(item);
   } catch (error) {
     console.error("Error creating item:", error);
-    return NextResponse.json({ error: "Error creating item" }, { status: 500 });
+    return NextResponse.json(
+      { error: "Error creating item" },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );
   }
 }
 
@@ -35,9 +38,10 @@ export async function GET(request: Request) {
     });
     return NextResponse.json(items);
   } catch (error) {
+    console.error("Error fetching items:", error);
     return NextResponse.json(
       { error: "Error fetching items" },
-      { status: 500 }
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
     );
   }
 }

app/api/tags/[id]/parents/route.ts

@@ -1,7 +1,7 @@
 import { NextResponse } from "next/server";
-import { prisma } from "@/app/lib/db/prisma";
+import { prisma } from "@/app/lib/config/prisma";
 import { StatusCodes } from "http-status-codes";
-import { Tag, TagParents, SimpleTag } from "@/app/lib/db/types";
+import { Tag, TagRelationChain, SimpleTag } from "@/app/lib/types";
 import { TagRelation } from "@prisma/client";
 
 export async function GET(
@@ -30,13 +30,14 @@ export async function GET(
     let parents = await getParentTags(Number(params.id));
     parents.reverse();
 
-    const tp: TagParents = {
+    const tp: TagRelationChain = {
       self: selfSimpleTag,
       parents,
       children: childrenTags,
     };
     return NextResponse.json(tp);
   } catch (error) {
+    console.error("Error fetching tag:", error);
     return NextResponse.json(
       { error: "Error fetching tag" },
       { status: StatusCodes.INTERNAL_SERVER_ERROR }

app/api/tags/[id]/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import { prisma } from "@/app/lib/db/prisma";
+import { prisma } from "@/app/lib/config/prisma";
 import { StatusCodes } from "http-status-codes";
 
 // Get a tag

app/api/tags/relation/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import { prisma } from "@/app/lib/db/prisma";
+import { prisma } from "@/app/lib/config/prisma";
 import { StatusCodes } from "http-status-codes";
 
 export async function POST(request: Request) {
@@ -23,7 +23,7 @@ export async function POST(request: Request) {
     console.error("Error creating tag relation:", error);
     return NextResponse.json(
       { error: "Error creating tag relation" },
-      { status: 500 }
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
     );
   }
 }
@@ -49,7 +49,7 @@ export async function PATCH(request: Request) {
     console.error("Error update tag relation:", error);
     return NextResponse.json(
       { error: "Error updating tag relation" },
-      { status: 500 }
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
     );
   }
 }
@@ -59,9 +59,10 @@ export async function GET() {
     const relations = await prisma.tagRelation.findMany();
     return NextResponse.json(relations);
   } catch (error) {
+    console.error("Error fetching tag relations:", error);
     return NextResponse.json(
       { error: "Error fetching tag relations" },
-      { status: 500 }
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
     );
   }
 }
@@ -71,7 +72,10 @@ export async function DELETE(request: Request) {
     const { id } = await request.json();
 
     if (!id) {
-      return NextResponse.json({ error: "ID is required" }, { status: 400 });
+      return NextResponse.json(
+        { error: "ID is required" },
+        { status: StatusCodes.BAD_REQUEST }
+      );
     }
 
     const deleted = await prisma.tagRelation.delete({
@@ -81,6 +85,9 @@ export async function DELETE(request: Request) {
     return NextResponse.json(deleted);
   } catch (error) {
     console.error("Error deleting tag:", error);
-    return NextResponse.json({ error: "Error deleting tag" }, { status: 500 });
+    return NextResponse.json(
+      { error: "Error deleting tag" },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );
   }
 }

app/api/tags/root/route.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/app/lib/config/prisma";
+import { StatusCodes } from "http-status-codes";
+
+export async function GET(_request: Request) {
+  try {
+    // Get all root tags (with no parent)
+    const tags = await prisma.tag.findMany({
+      where: { parent: null },
+    });
+
+    return NextResponse.json(tags);
+  } catch (error) {
+    console.error("Error fetching root tags:", error);
+    return NextResponse.json(
+      { error: "Error fetching root tags" },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );
+  }
+}

app/api/tags/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import { prisma } from "@/app/lib/db/prisma";
+import { prisma } from "@/app/lib/config/prisma";
 import { StatusCodes } from "http-status-codes";
 
 // Create a new tag
@@ -21,7 +21,10 @@ export async function POST(request: Request) {
     return NextResponse.json(tag);
   } catch (error) {
     console.error("Error creating tag:", error);
-    return NextResponse.json({ error: "Error creating tag" }, { status: 500 });
+    return NextResponse.json(
+      { error: "Error creating tag" },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );
   }
 }
 
@@ -41,6 +44,10 @@ export async function GET(request: Request) {
     });
     return NextResponse.json(tags);
   } catch (error) {
-    return NextResponse.json({ error: "Error fetching tags" }, { status: 500 });
+    console.error("Error fetching tags:", error);
+    return NextResponse.json(
+      { error: "Error fetching tags" },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );
   }
 }

app/components/appLayout/index.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useState } from "react";
+import { useMediaQuery, useTheme } from "@mui/material";
+import Sidebar from "./sidebar";
+import Topbar from "./topbar";
+
+export default function AppLayout() {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+
+  const theme = useTheme();
+  const isDesktop = useMediaQuery(theme.breakpoints.up("md"));
+
+  return (
+    <div>
+      <Topbar
+        isDesktop={isDesktop}
+        onClick={() => setSidebarOpen(!sidebarOpen)}
+      />
+      {(isDesktop || sidebarOpen) && <Sidebar />}
+    </div>
+  );
+}