Add reusable modal component

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-popover": "^1.1.15",
         "@tailwindcss/vite": "^4.1.12",
         "lucide-react": "^0.554.0",
@@ -1114,6 +1115,42 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
+      "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-popover": "^1.1.15",
     "@tailwindcss/vite": "^4.1.12",
     "lucide-react": "^0.554.0",
@@ -29,4 +30,4 @@
     "globals": "^16.3.0",
     "vite": "^7.1.2"
   }
-}
+}

frontend/src/components/Modal.jsx

@@ -0,0 +1,46 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+export default function Modal({ open, onOpenChange, trigger, title, children, isProtected = false }) {
+    return (
+        <Dialog.Root open={open} onOpenChange={onOpenChange}>
+            {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}
+            <Dialog.Portal>
+                <Dialog.Overlay className="fixed inset-0 bg-black/60 z-50" />
+                <Dialog.Content
+                    onInteractOutside={(e) => {
+                        if (isProtected) e.preventDefault();
+                    }}
+                    onEscapeKeyDown={(e) => {
+                        if (isProtected) {
+                            if (!window.confirm("Are you sure you want to close this?")) {
+                                e.preventDefault();
+                            }
+                        }
+                    }}
+                    className="fixed left-[50%] top-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-lg bg-[#141414] border border-[#2B2B2B] shadow-xl focus:outline-none z-50 overflow-hidden">
+                    <div className="flex items-center justify-between px-4 py-3 border-b border-[#2B2B2B] bg-[#1A1A1A]">
+                        <Dialog.Title className="text-sm font-bold text-white red-hat-text">
+                            {title}
+                        </Dialog.Title>
+                        <Dialog.Close
+                            onClick={(e) => {
+                                if (isProtected) {
+                                    if (!window.confirm("Are you sure you want to close this?")) {
+                                        e.preventDefault();
+                                    }
+                                }
+                            }}
+                            className="text-gray-400 hover:text-white transition-colors cursor-pointer outline-none">
+                            <X className="w-4 h-4" />
+                        </Dialog.Close>
+                    </div>
+                    <div className="p-4 text-gray-300 red-hat-text">
+                        {children}
+                    </div>
+                </Dialog.Content>
+            </Dialog.Portal>
+        </Dialog.Root>
+    );
+}
+

frontend/src/gallery/components/AlbumCreateModal.jsx

@@ -0,0 +1,12 @@
+import Modal from '../../components/Modal'
+export default function AlbumCreateModal({ open, onOpenChange, trigger }) {
+    return (
+        <Modal open={open} onOpenChange={onOpenChange} trigger={trigger} title="Create Album">
+            <div className="flex flex-col gap-2">
+                <input type="text" placeholder="Name" className="w-full px-3 py-2.5 bg-[#141414] border border-[#2B2B2B] rounded-md text-white placeholder-gray-600 focus:outline-none focus:border-[#3B3B3B] transition-colors red-hat-text" />
+                <textarea type="text" placeholder="Description" className="w-full h-[20vh] px-3 py-2.5 bg-[#141414] border border-[#2B2B2B] rounded-md text-white placeholder-gray-600 focus:outline-none focus:border-[#3B3B3B] transition-colors red-hat-text resize-none" />
+                <button className="w-full py-2.5 bg-[#2B2B2B] hover:bg-[#3B3B3B] text-white rounded-md font-medium transition-colors red-hat-mono cursor-pointer mt-2">Create Album</button>
+            </div>
+        </Modal>
+    )
+}

frontend/src/gallery/components/AlbumList.jsx

@@ -0,0 +1,15 @@
+import { PlusIcon } from 'lucide-react'
+import AlbumCreateModal from './AlbumCreateModal'
+import { useState } from 'react'
+export default function AlbumList() {
+    const [open, setOpen] = useState(false)
+    return (
+        <div className="flex flex-col items-center justify-start h-full w-full bg-[#141414]">
+            <div className="flex flex-row items-center justify-between gap-2 w-full px-6 py-4">
+                <h1 className="text-xl font-bold text-white red-hat-mono">Albums</h1>
+                <PlusIcon className="w-6 h-6 cursor-pointer" color="white" onClick={() => setOpen(true)} />
+            </div>
+            <AlbumCreateModal open={open} onOpenChange={setOpen} />
+        </div>
+    )
+}

frontend/src/gallery/index.jsx

@@ -2,6 +2,7 @@ import NavBar from '../components/NavBar'
 import { useLocation } from 'react-router-dom';
 import { useAccount } from '../contexts/useAccount';
 import { useEffect } from 'react';
+import AlbumList from './components/AlbumList';
 export default function Gallery() {
     const currentPath = useLocation().pathname;
     const pathList = currentPath.split('/').slice(1);
@@ -14,6 +15,7 @@ export default function Gallery() {
     return (
         <div className="flex flex-col items-center justify-start h-full w-full bg-[#141414]">
             <NavBar path={pathList} />
+            <AlbumList />
         </div>
     )
 }