Merge branch 'develop'

.vscode/settings.json

@@ -2,10 +2,12 @@
     "editor.tabSize": 2,
     "editor.insertSpaces": true,
     "workbench.editor.customLabels.patterns": {
-        "**/route.*": "${dirname}.${extname} (${filename})",
-        "**/index.*": "${dirname}.${extname} (${filename})"
+        "{**/index.*,**/route.*,**/layout.*,**/page.*}": "${dirname}.${extname} (${filename})"
     },
     "cSpell.words": [
+        "nextjs",
+        "tailwindcss",
+        "Topbar",
         "zustand"
     ]
 }

app/api/folders/route.ts

@@ -7,8 +7,14 @@ export async function POST(request: Request) {
     const { name, path } = await request.json();
     console.debug("Received data:", { name, path });
 
+    // Normalization
+    let fmtPath = path.replace(/\\/g, "/"); // Replace backslashes with forward
+    if (!fmtPath.endsWith("/")) {
+      fmtPath += "/"; // Always add trailing slash
+    }
+
     const created = await prisma.folder.create({
-      data: { name, path },
+      data: { name, path: fmtPath },
     });
 
     return NextResponse.json(created);
@@ -25,9 +31,15 @@ export async function PATCH(request: Request) {
   try {
     const { id, name, path } = await request.json();
 
+    // Normalization
+    let fmtPath = path.replace(/\\/g, "/"); // Replace backslashes with forward
+    if (!fmtPath.endsWith("/")) {
+      fmtPath += "/"; // Always add trailing slash
+    }
+
     const updated = await prisma.folder.update({
       where: { id },
-      data: { name, path },
+      data: { name, path: fmtPath },
     });
 
     return NextResponse.json(updated);

app/api/items/route.ts

@@ -6,8 +6,11 @@ export async function POST(request: Request) {
     const { path, folderId, name, starred } = await request.json();
     console.debug("Received data:", { path, name, starred });
 
+    // Normalization
+    const fmtPath = path.replace(/\\/g, "/"); // Replace backslashes with forward
+
     const item = await prisma.item.create({
-      data: { path, folderId, name, starred },
+      data: { path: fmtPath, folderId, name, starred },
     });
 
     return NextResponse.json(item);
@@ -19,17 +22,14 @@ export async function POST(request: Request) {
 
 export async function PATCH(request: Request) {
   try {
-    const {
-      id,
-      basePathId: folderId,
-      path,
-      name,
-      starred,
-    } = await request.json();
+    const { id, folderId, path, name, starred } = await request.json();
+
+    // Normalization
+    const fmtPath = path.replace(/\\/g, "/"); // Replace backslashes with forward
 
     const item = await prisma.item.update({
       where: { id },
-      data: { path, folderId, name, starred },
+      data: { path: fmtPath, folderId, name, starred },
     });
 
     return NextResponse.json(item);

app/components/explorer/imageLoader/index.tsx

@@ -2,13 +2,17 @@
 
 import { useState, useEffect } from "react";
 import { loadImage } from "@/app/lib/imageLoader";
+import { Skeleton } from "@mui/material";
 
 interface Props {
   path: string;
+  alt?: string;
+  width?: number;
+  height?: number;
 }
 
 export default function ImageLoader(props: Props) {
-  const { path } = props;
+  const { path, alt, width, height } = props;
   const [imageSrc, setImageSrc] = useState("");
 
   useEffect(() => {
@@ -24,11 +28,13 @@ export default function ImageLoader(props: Props) {
       {imageSrc ? (
         <img
           src={imageSrc}
-          alt={"img"}
+          alt={alt}
+          width={width}
+          height={height}
           loading="lazy"
         />
       ) : (
-        <p>No image selected</p>
+        <Skeleton width={width} height={height} />
       )}
     </div>
   );

app/components/explorer/index.tsx

@@ -8,17 +8,17 @@ import { getItem } from "@/app/lib/items";
 import { Item } from "@/app/lib/db/types";
 import { ImageList, ImageListItem } from "@mui/material";
 
+const size = 250;
+
 export default function Explorer() {
   const subscribeSelected = useTagTreeState((s) => s.subscribeSelected);
-  const [id, setId] = useState(0);
-  const [img, setImg] = useState<string[]>([]);
+  const [imagePaths, setImagePaths] = useState<string[]>([]);
 
   useEffect(() => {
     subscribeSelected(onSelected);
   }, []);
 
   const onSelected = async (id: number) => {
-    setId(id);
     const tag = await getTag(id, true, true, true);
     if (tag === null) return;
     if (!tag.items) return;
@@ -33,19 +33,20 @@ export default function Explorer() {
       );
 
       items = items.filter((item) => item !== null);
-      console.log(items);
-
       const paths = items.map((i) => i!.path);
-      console.log(paths);
-      setImg(paths);
+      setImagePaths(paths);
     } catch (err) {}
   };
 
   return (
     <div>
-      {img.map((p) => (
-        <ImageLoader path={p} />
-      ))}
+      <ImageList cols={4} gap={6}>
+        {imagePaths.map((path, index) => (
+          <ImageListItem key={index}>
+            <ImageLoader path={path} width={size} height={size} />
+          </ImageListItem>
+        ))}
+      </ImageList>
     </div>
   );
 }

app/components/sidebar/index.tsx

@@ -5,6 +5,7 @@ import {
   Box,
   Divider,
   Drawer,
+  Link,
   List,
   ListItem,
   ListItemButton,
@@ -21,6 +22,12 @@ import { useTagTreeState } from "@/app/store/tagTree";
 const drawerWidth = 240;
 const collapsedWidth = 80;
 
+const NavList = [
+  { label: "Home", url: "/explorer" },
+  { label: "Database", url: "/database" },
+  { label: "Docs", url: "/api/docs" },
+];
+
 export default function Sidebar() {
   const [open, setOpen] = React.useState(true);
   const { tagTreeItems, updateTagTree, updateSelectedTagId } =
@@ -59,12 +66,9 @@ export default function Sidebar() {
       <Toolbar />
       <Box sx={{ overflow: "auto", flexGrow: 1 }}>
         <List>
-          {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
-            <ListItem key={text} disablePadding>
-              <ListItemButton>
-                <ListItemIcon></ListItemIcon>
-                <ListItemText primary={text} />
-              </ListItemButton>
+          {NavList.map((item, index) => (
+            <ListItem key={index} disablePadding>
+              <ListItemButton href={item.url}>{item.label}</ListItemButton>
             </ListItem>
           ))}
         </List>

app/database/databaseTable/dbTableHead/index.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import {
+  TableHead,
+  TableRow,
+  TableCell,
+  Checkbox,
+  TableSortLabel,
+} from "@mui/material";
+import { Order, Data, HeadCell } from "@/app/database/databaseTable/types";
+
+interface Props {
+  heads: HeadCell[];
+  numSelected: number;
+  order: Order;
+  orderBy: number;
+  rowCount: number;
+  onRequestSort: (event: React.MouseEvent<unknown>, property: number) => void;
+  onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export default function DbTableHead(props: Props) {
+  const {
+    heads,
+    onSelectAllClick,
+    order,
+    orderBy,
+    numSelected,
+    rowCount,
+    onRequestSort,
+  } = props;
+  const createSortHandler =
+    (property: number) => (event: React.MouseEvent<unknown>) => {
+      onRequestSort(event, property);
+    };
+
+  return (
+    <TableHead>
+      <TableRow>
+        <TableCell padding="checkbox">
+          <Checkbox
+            color="primary"
+            indeterminate={numSelected > 0 && numSelected < rowCount}
+            checked={rowCount > 0 && numSelected === rowCount}
+            onChange={onSelectAllClick}
+            inputProps={{
+              "aria-label": "select all desserts",
+            }}
+          />
+        </TableCell>
+        {heads.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            align={headCell.align}
+            padding="none"
+            sortDirection={orderBy === headCell.id ? order : false}
+          >
+            <TableSortLabel
+              active={orderBy === headCell.id}
+              direction={orderBy === headCell.id ? order : "asc"}
+              onClick={createSortHandler(headCell.id)}
+            >
+              {headCell.label}
+            </TableSortLabel>
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}

app/database/databaseTable/dbTableToolbar/index.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { alpha, IconButton, Toolbar, Tooltip, Typography } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import FilterListIcon from "@mui/icons-material/FilterList";
+
+interface Props {
+  numSelected: number;
+  title:string;
+}
+
+export default function DbTableToolbar(props: Props) {
+  const { numSelected ,title } = props;
+
+  return (
+    <Toolbar
+      sx={{
+        pl: { sm: 2 },
+        pr: { xs: 1, sm: 1 },
+        ...(numSelected > 0 && {
+          bgcolor: (theme) =>
+            alpha(
+              theme.palette.primary.main,
+              theme.palette.action.activatedOpacity
+            ),
+        }),
+      }}
+    >
+      {numSelected > 0 ? (
+        <Typography
+          sx={{ flex: "1 1 100%" }}
+          color="inherit"
+          variant="subtitle1"
+          component="div"
+        >
+          {numSelected} selected
+        </Typography>
+      ) : (
+        <Typography
+          sx={{ flex: "1 1 100%" }}
+          variant="h6"
+          id="tableTitle"
+          component="div"
+        >
+          {title}
+        </Typography>
+      )}
+      {numSelected > 0 ? (
+        <Tooltip title="Delete">
+          <IconButton>
+            <DeleteIcon />
+          </IconButton>
+        </Tooltip>
+      ) : (
+        <Tooltip title="Filter list">
+          <IconButton>
+            <FilterListIcon />
+          </IconButton>
+        </Tooltip>
+      )}
+    </Toolbar>
+  );
+}