Merge branch 'develop'

ziteh · Sep 18, 2024 · 1e2d19b · 1e2d19b
2 parents 361ab03 + 3135c62
commit 1e2d19b
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 100 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,14 @@ Types of changes:
 
 ## Unreleased
 
+### Changed
+
+- Move "New Tag/Item/Folder" button from database page to sidebar
+
+### Security
+
+- Bump Next.js from `14.2.6` to `14.2.10`, refer to `CVE-2024-46982`
+
 ## [0.1.0-alpha.2] - 2024-09-17
 
 ### Added

diff --git a/README.md b/README.md
@@ -4,8 +4,28 @@
 [![GitHub Actions Workflow Status:docker-image](https://img.shields.io/github/actions/workflow/status/ziteh/hie/docker-image.yml?style=flat-square&label=Docker&logo=docker)](https://github.com/ziteh/hie/actions/workflows/docker-image.yml)
 [![Next JS](https://img.shields.io/badge/Next-black?style=flat-square&logo=next.js&logoColor=white)](https://nextjs.org/)
 
+![screenshot](https://i.imgur.com/5KAjjgz.png)
+
 Hie - ***Hi***erarchical tag-based image ***E***xplorer.
 
+Easily organize your images using a flexible, hierarchical tagging system, where tags can have nested sub-tags, and each image can be associated with multiple tags.
+
+All tag data is centrally stored in a database, ensuring that the original folder structure of your files remains untouched.
+
+Hie can run on a NAS via Docker, allowing you to access and view your images conveniently through web browser.
+
+<details>
+  <summary>About the sample images in screenshot</summary>
+  <p>These beautiful images are from <a href="https://unsplash.com/">Unsplash</a>, their authors and sources are:</p>
+  <ul>
+    <li><a href="https://unsplash.com/photos/macro-shot-photography-of-pink-petals-flower-11U6h85yJ9U">Aaron Burden</a></li>
+    <li><a href="https://unsplash.com/photos/shallow-focus-photography-of-white-flowers-urUdKCxsTUI">Anthony DELANOIX</a></li>
+    <li><a href="https://unsplash.com/photos/selective-focus-photo-of-pink-petaled-flower-GNKlowAIYXY">Christiane Nuetzel</a></li>
+    <li><a href="https://unsplash.com/photos/red-and-yellow-flower-digital-wallpaper-7m-Zigjxc8E">Luca</a></li>
+    <li><a href="https://unsplash.com/photos/yellow-daffodil-flowers-in-bloom-in-spring-4l9qmFImnnI">Tim Gouw</a></li>
+  </ul>
+</details>
+
 ## Usage
 
 ### Develop
@@ -20,7 +40,7 @@ API docs at <http://localhost:3000/api/docs>, powered by [Swagger UI](https://gi
 
 ### Docker
 
-Check [`Dockerfile`](./Dockerfile) and [`docker-compose.yml`](./docker-compose.yml).
+Refer to the [`Dockerfile`](./Dockerfile) and [`docker-compose.yml`](./docker-compose.yml) for more details.
 
 ```sh
 # Build
@@ -32,3 +52,5 @@ docker run -d --name hie -p 5888:3000 -v <HIE_VOLUME_DIR>:/app/volume hie
 # Save image
 docker save -o hie.tar hie
 ```
+
+`<HIE_VOLUME_DIR>` refer to the host directory where your images are stored. This will be mounted inside the Docker container at `/app/volume` to allow the app to access your images.
diff --git a/app/database/formDialog/folderFormDialog.tsx → ...t/sidebar/formDialog/folderFormDialog.tsx b/app/database/formDialog/folderFormDialog.tsx → ...t/sidebar/formDialog/folderFormDialog.tsx
@@ -6,9 +6,10 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  Grid,
   TextField,
 } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+
 import { Folder } from "@/app/lib/types";
 import { createFolder } from "@/app/lib/folders";
 
@@ -50,7 +51,7 @@ export default function FolderFormDialog(props: Props) {
       <DialogTitle>Folder</DialogTitle>
       <DialogContent>
         <Grid container spacing={2}>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <TextField
               label="Name"
               id="name"
@@ -61,7 +62,7 @@ export default function FolderFormDialog(props: Props) {
               autoComplete="off"
             />
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <TextField
               label="Path"
               id="path"

diff --git a/app/database/formDialog/itemFormDialog.tsx → ...out/sidebar/formDialog/itemFormDialog.tsx b/app/database/formDialog/itemFormDialog.tsx → ...out/sidebar/formDialog/itemFormDialog.tsx
@@ -9,19 +9,20 @@ import {
   DialogContent,
   DialogTitle,
   FormControlLabel,
-  Grid,
   MenuItem,
   OutlinedInput,
   Select,
   SelectChangeEvent,
   Switch,
   TextField,
 } from "@mui/material";
+import Grid from "@mui/material/Grid2";
 import { Item, ItemRelation, Folder, Tag } from "@/app/lib/types";
 import { createItem } from "@/app/lib/items";
-import { createFolder } from "@/app/lib/folders";
-import React from "react";
+import { createFolder, listFolder } from "@/app/lib/folders";
+import { useState, useEffect } from "react";
 import { createItemRelation } from "@/app/lib/itemRelation";
+import { listTag } from "@/app/lib/tags";
 
 const SEP = "\t";
 
@@ -38,15 +39,32 @@ const MenuProps = {
 
 interface Props {
   data?: Item;
-  folders: Folder[];
-  tags: Tag[];
   open: boolean;
   onClose: () => void;
 }
 
 export default function ItemFormDialog(props: Props) {
-  const { data, folders, tags, open, onClose } = props;
-  const [selectedTags, setSelectedTags] = React.useState<string[]>([]);
+  const { data, open, onClose } = props;
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [folders, setFolders] = useState<Folder[]>([]);
+  const [tags, setTags] = useState<Tag[]>([]);
+
+  useEffect(() => {
+    if (open) {
+      handleFetchTags();
+      handleFetchFolders();
+    }
+  }, [open]);
+
+  const handleFetchTags = async () => {
+    const tags = await listTag(false, false, false);
+    setTags(tags);
+  };
+
+  const handleFetchFolders = async () => {
+    const folders = await listFolder(false);
+    setFolders(folders);
+  };
 
   const handleClose = () => {
     onClose();
@@ -96,13 +114,13 @@ export default function ItemFormDialog(props: Props) {
       <DialogTitle>Item</DialogTitle>
       <DialogContent>
         <Grid container spacing={2}>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <FormControlLabel
               control={<Switch name="starred" />}
               label="Star"
             />
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <Select
               labelId="folder-label"
               label="Folder"
@@ -116,7 +134,7 @@ export default function ItemFormDialog(props: Props) {
               ))}
             </Select>
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <TextField
               label="Path"
               id="path"
@@ -126,7 +144,7 @@ export default function ItemFormDialog(props: Props) {
               autoComplete="off"
             />
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <TextField
               label="Name"
               id="name"
@@ -136,7 +154,7 @@ export default function ItemFormDialog(props: Props) {
               autoComplete="off"
             />
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <Select
               labelId="demo-multiple-chip-label"
               id="demo-multiple-chip"

diff --git a/app/database/formDialog/tagFormDialog.tsx → ...yout/sidebar/formDialog/tagFormDialog.tsx b/app/database/formDialog/tagFormDialog.tsx → ...yout/sidebar/formDialog/tagFormDialog.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState, useEffect } from "react";
 import { TagType, Tag } from "@/app/lib/types";
 import {
   Button,
@@ -8,24 +9,35 @@ import {
   DialogContent,
   DialogTitle,
   FormControlLabel,
-  Grid,
   MenuItem,
   Select,
   Switch,
   TextField,
 } from "@mui/material";
-import { createTag } from "@/app/lib/tags";
+import Grid from "@mui/material/Grid2";
+import { createTag, listTag } from "@/app/lib/tags";
 import { createTagRelation } from "@/app/lib/tagRelation";
 
 interface Props {
-  existingTags: Tag[];
   data?: Tag;
   open: boolean;
   onClose: () => void;
 }
 
 export default function TagFormDialog(props: Props) {
-  const { existingTags, data, open, onClose } = props;
+  const { data, open, onClose } = props;
+  const [existingTags, setExistingTags] = useState<Tag[]>([]);
+
+  useEffect(() => {
+    if (open) {
+      handleFetchTags();
+    }
+  }, [open]);
+
+  const handleFetchTags = async () => {
+    const tags = await listTag(false, false, false);
+    setExistingTags(tags);
+  };
 
   const handleClose = () => {
     onClose();
@@ -64,13 +76,13 @@ export default function TagFormDialog(props: Props) {
       <DialogTitle>Tag</DialogTitle>
       <DialogContent>
         <Grid container spacing={2}>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <FormControlLabel
               control={<Switch name="starred" />}
               label="Star"
             />
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <TextField
               label="Name"
               id="name"
@@ -81,7 +93,7 @@ export default function TagFormDialog(props: Props) {
               autoComplete="off"
             />
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <Select
               labelId="type-label"
               label="Type"
@@ -94,7 +106,7 @@ export default function TagFormDialog(props: Props) {
               <MenuItem value={TagType.Category}>Category</MenuItem>
             </Select>
           </Grid>
-          <Grid item xs={12}>
+          <Grid size={12}>
             <Select
               labelId="parent-label"
               label="Parent"
@@ -109,15 +121,15 @@ export default function TagFormDialog(props: Props) {
               ))}
             </Select>
           </Grid>
-          <Grid item xs={6}>
+          <Grid size={6}>
             <TextField
               label="Text Color"
               id="text-color"
               name="textColor"
               fullWidth
             />
           </Grid>
-          <Grid item xs={6}>
+          <Grid size={6}>
             <TextField
               label="Back Color"
               id="back-color"