add album editing and start working on file picker component for picking thumbnail

backend/internal/routes/album.go

@@ -25,6 +25,22 @@ func RegisterAlbumRoutes(rg *gin.RouterGroup) {
 		}
 		c.JSON(http.StatusOK, albums)
 	})
+	album.POST("/getAlbum", func(c *gin.Context) {
+		accessToken := c.GetHeader("Authorization")
+		var request struct {
+			ID string `json:"id"`
+		}
+		if err := c.ShouldBindJSON(&request); err != nil {
+			c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
+			return
+		}
+		album, err := services.GetAlbum(request.ID, accessToken)
+		if err != nil {
+			c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+			return
+		}
+		c.JSON(http.StatusOK, album)
+	})
 	album.POST("/createAlbum", func(c *gin.Context) {
 		accessToken := c.GetHeader("Authorization")
 		if accessToken == "" {
@@ -47,6 +63,28 @@ func RegisterAlbumRoutes(rg *gin.RouterGroup) {
 		}
 		c.JSON(http.StatusOK, result)
 	})
+	album.POST("/editAlbum", func(c *gin.Context) {
+		accessToken := c.GetHeader("Authorization")
+		if accessToken == "" {
+			c.JSON(http.StatusUnauthorized, gin.H{"error": "Unauthorized"})
+			return
+		}
+		var request struct {
+			ID         string                 `json:"id"`
+			Properties map[string]interface{} `json:"properties"`
+		}
+		if err := c.ShouldBindJSON(&request); err != nil {
+			c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
+			return
+		}
+		result, err := services.EditAlbum(accessToken, request.ID, request.Properties)
+		if err != nil {
+			c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+			return
+		}
+		c.JSON(http.StatusOK, result)
+	})
+
 	album.POST("/getIDFromPath", func(c *gin.Context) {
 		var request struct {
 			Path string `json:"path"`

backend/internal/services/album.go

@@ -50,7 +50,20 @@ func GetAlbumsInParent(parentID string, authToken string) ([]models.Album, error
 }
 
 func GetAlbum(id string, authToken string) (models.Album, error) {
-	// TODO: Add authentication
+	userID, err := ValidateAccessToken(authToken)
+	if err != nil {
+		return models.Album{}, err
+	}
+	if userID == "" {
+		return models.Album{}, fmt.Errorf("invalid access token")
+	}
+	accessLevel, err := CheckUserAlbumAccess(userID, id)
+	if err != nil {
+		return models.Album{}, err
+	}
+	if accessLevel < 0 {
+		return models.Album{}, fmt.Errorf("user does not have permission to view this album")
+	}
 	album := models.Album{}
 	result := db.GetDB().First(&album, "id = ?", id)
 	if result.Error != nil {
@@ -151,3 +164,45 @@ func IsAlbumPublic(albumID string) (bool, error) {
 	}
 	return !album.Private, nil
 }
+
+func EditAlbum(accessToken string, id string, properties map[string]interface{}) (models.Album, error) {
+	userID, err := ValidateAccessToken(accessToken)
+	if err != nil {
+		return models.Album{}, err
+	}
+	if userID == "" {
+		return models.Album{}, fmt.Errorf("invalid access token")
+	}
+	accessLevel, err := CheckUserAlbumAccess(userID, id)
+	if err != nil {
+		return models.Album{}, err
+	}
+	if accessLevel < 2 {
+		return models.Album{}, fmt.Errorf("user does not have permission to edit this album")
+	}
+	if properties["id"] != nil {
+		return models.Album{}, fmt.Errorf("cannot edit album ID")
+	}
+	if properties["private"] != nil {
+		return models.Album{}, fmt.Errorf("cannot edit album private status directly (use the dedicated endpoint for this)")
+	}
+	if properties["parent_id"] != nil {
+		return models.Album{}, fmt.Errorf("cannot edit album parent ID directly (use the dedicated endpoint for this)")
+	}
+	if properties["updated_at"] != nil {
+		return models.Album{}, fmt.Errorf("cannot edit album updatedAt")
+	}
+	if properties["created_at"] != nil {
+		return models.Album{}, fmt.Errorf("cannot edit album createdAt")
+	}
+
+	album := models.Album{}
+	result := db.GetDB().Model(&album).Where("id = ?", id).Updates(properties).First(&album)
+	if result.Error != nil {
+		return models.Album{}, result.Error
+	}
+	if result.RowsAffected == 0 {
+		return models.Album{}, fmt.Errorf("failed to update album")
+	}
+	return album, nil
+}

frontend/src/gallery/components/AlbumEditModal.jsx

@@ -0,0 +1,53 @@
+import Modal from '../../components/Modal'
+import { getServerUrl } from '../../hooks/getConstants'
+import { useAccount } from '../../contexts/useAccount'
+import { useState, useEffect } from 'react'
+import { useNotifier } from '../../contexts/useNotifier'
+import FilePicker from './FilePicker'
+export default function AlbumEditModal({ open, onOpenChange, trigger, id, startTitle, startDescription, currentAlbum }) {
+    const { getAccessToken } = useAccount()
+    const [title, setTitle] = useState(startTitle || '')
+    const [description, setDescription] = useState(startDescription || '')
+    const { showError } = useNotifier()
+    const handleEditAlbum = async () => {
+        const response = await fetch(`${getServerUrl()}/api/albums/editAlbum`, {
+            method: 'POST',
+            headers: {
+                'Authorization': getAccessToken(),
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                id: id,
+                properties: {
+                    title: title,
+                    description: description,
+                }
+            })
+        })
+        const data = await response.json()
+        if (data.error) {
+            showError(data.error)
+        } else {
+            onOpenChange(false)
+        }
+    }
+    useEffect(() => {
+        if (open) {
+            setTitle(startTitle || '')
+            setDescription(startDescription || '')
+        }
+    }, [open])
+    return (
+        <Modal open={open} onOpenChange={onOpenChange} trigger={trigger} title="Edit Album">
+            <div className="flex flex-col gap-2">
+                <p className="text-white red-hat-mono">Name</p>
+                <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" value={title} onChange={(e) => setTitle(e.target.value)} />
+                <p className="text-white red-hat-mono">Description</p>
+                <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" value={description} onChange={(e) => setDescription(e.target.value)} />
+                <p className="text-white red-hat-mono">Thumbnail</p>
+                <FilePicker currentAlbum={currentAlbum} />
+                <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" onClick={handleEditAlbum}>Save Changes</button>
+            </div>
+        </Modal>
+    )
+}

frontend/src/gallery/components/AlbumList.jsx

@@ -1,13 +1,16 @@
-import { PlusIcon } from 'lucide-react'
+import { PlusIcon, EllipsisVertical } from 'lucide-react'
 import AlbumCreateModal from './AlbumCreateModal'
 import { useState, useEffect } from 'react'
 import { getServerUrl } from '../../hooks/getConstants'
 import { useAccount } from '../../contexts/useAccount'
 import { useNavigate } from 'react-router-dom'
 import { useNotifier } from '../../contexts/useNotifier'
+import AlbumEditModal from './AlbumEditModal'
 export default function AlbumList({ currentAlbumName }) {
     const { getAccessToken } = useAccount()
     const [open, setOpen] = useState(false)
+    const [openEdit, setOpenEdit] = useState(false)
+    const [editingAlbum, setEditingAlbum] = useState(null)
     const [albums, setAlbums] = useState([])
     const navigate = useNavigate()
     const { showError } = useNotifier()
@@ -43,11 +46,11 @@ export default function AlbumList({ currentAlbumName }) {
             }
         }
 
-        if (!open && currentAlbumName !== null) {
+        if (!open && !openEdit && currentAlbumName !== null) {
             getAlbums()
         }
         return () => { ignore = true; }
-    }, [currentAlbumName, open])
+    }, [currentAlbumName, open, openEdit])
     return (
         <div className="flex flex-col items-center justify-start h-min w-full bg-[#141414]">
             <div className="flex flex-row items-center justify-between gap-2 w-full px-6 py-4">
@@ -57,6 +60,7 @@ export default function AlbumList({ currentAlbumName }) {
             <div className="flex flex-row items-center justify-start gap-2 w-full px-6 flex-wrap">
                 {albums.map((album) => (
                     <div
+                        key={album.ID}
                         className="flex flex-row items-center justify-start gap-2 w-1/8 aspect-square border border-[#2B2B2B] rounded-md px-6 py-4 cursor-pointer"
                         onClick={() => {
                             // Get current path and append the album's title
@@ -72,10 +76,25 @@ export default function AlbumList({ currentAlbumName }) {
                         }}
                     >
                         <p className="text-white red-hat-mono">{album.Title}</p>
+                        <EllipsisVertical className="w-6 h-6 cursor-pointer" color="white" onClick={(e) => {
+                            e.stopPropagation()
+                            setEditingAlbum(album)
+                            setOpenEdit(true)
+                        }} />
                     </div>
                 ))}
             </div>
             <AlbumCreateModal open={open} onOpenChange={setOpen} parentId={currentAlbumName === 'gallery' ? '' : currentAlbumName} />
+            {editingAlbum && (
+                <AlbumEditModal
+                    open={openEdit}
+                    onOpenChange={setOpenEdit}
+                    id={editingAlbum.ID}
+                    startTitle={editingAlbum.Title}
+                    startDescription={editingAlbum.Description}
+                    currentAlbum={editingAlbum}
+                />
+            )}
         </div>
     )
 }

frontend/src/gallery/components/FilePicker.jsx

@@ -0,0 +1,143 @@
+import { File, Folder } from 'lucide-react'
+import { useState, useEffect } from 'react'
+import Modal from '../../components/Modal'
+import { useAccount } from '../../contexts/useAccount'
+import { getServerUrl } from '../../hooks/getConstants'
+import { useNotifier } from '../../contexts/useNotifier'
+import { ArrowLeft } from 'lucide-react'
+export default function FilePicker({ currentAlbum }) {
+    const [selectedFile, setSelectedFile] = useState(null)
+    const [selectedAlbum, setSelectedAlbum] = useState(currentAlbum)
+    const [currentPath, setCurrentPath] = useState([])
+    const [albums, setAlbums] = useState([])
+    const [media, setMedia] = useState([])
+    const [filePickerOpen, setFilePickerOpen] = useState(false)
+    const { getAccessToken } = useAccount()
+    const { showError } = useNotifier()
+    useEffect(() => {
+        const getAlbum = async () => {
+            const response = await fetch(`${getServerUrl()}/api/albums/getAlbumsInParent`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': getAccessToken(),
+                },
+                body: JSON.stringify({
+                    parentId: selectedAlbum.ID,
+                }),
+            })
+            const data = await response.json()
+            if (data.error) {
+                showError(data.error)
+            } else {
+                setAlbums(data)
+            }
+        }
+        const getAlbumInfo = async () => {
+            const response = await fetch(`${getServerUrl()}/api/albums/getAlbum`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': getAccessToken(),
+                },
+                body: JSON.stringify({
+                    id: selectedAlbum.ID,
+                }),
+            })
+            const data = await response.json()
+            if (data.error) {
+                showError(data.error)
+            } else {
+                setSelectedAlbum(data)
+            }
+        }
+        const reconstructPath = async () => {
+            if (!selectedAlbum?.ID) {
+                setCurrentPath(['gallery'])
+                return
+            }
+
+            const pathSegments = []
+            let albumTemp = selectedAlbum
+
+            while (albumTemp) {
+                if (albumTemp.Title) {
+                    pathSegments.unshift(albumTemp.Title)
+                }
+
+                const parentId = albumTemp.ParentID ?? albumTemp.parentID ?? ''
+                if (!parentId) {
+                    break
+                }
+
+                const response = await fetch(`${getServerUrl()}/api/albums/getAlbum`, {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': getAccessToken(),
+                    },
+                    body: JSON.stringify({
+                        id: parentId,
+                    }),
+                })
+
+                const data = await response.json()
+                if (data.error) {
+                    showError(data.error)
+                    break
+                }
+
+                if (!data?.ID || data.ID === albumTemp.ID) {
+                    break
+                }
+
+                albumTemp = data
+            }
+            pathSegments.unshift("gallery")
+
+            setCurrentPath(pathSegments)
+        }
+        if (selectedAlbum && selectedAlbum.fetchinfo) {
+            getAlbumInfo()
+        }
+        getAlbum()
+        reconstructPath()
+    }, [selectedAlbum])
+    return (
+        <div className="flex flex-row gap-2 border border-[#2B2B2B] rounded-lg p-2 cursor-pointer" onClick={() => {
+            setFilePickerOpen(true)
+        }}>
+            <File className="w-6 h-6" />
+            <p className="text-white red-hat-mono">{selectedFile?.name || 'No image selected'}</p>
+            <Modal open={filePickerOpen} onOpenChange={setFilePickerOpen} title="Select File">
+                <div className="flex flex-col gap-2">
+                    <div className="flex flex-row gap-2 items-center justify-start">
+                        <ArrowLeft className="w-6 h-6 cursor-pointer" onClick={() => {
+                            setSelectedAlbum({ ID: selectedAlbum.ParentID, fetchinfo: true })
+                        }} />
+                        <p className="text-white red-hat-mono">{currentPath.join(' / ')}</p>
+                    </div>
+                    {albums.map((album) => (
+                        <div key={album.ID} className="flex flex-row gap-2 cursor-pointer hover:bg-[#2B2B2B] rounded-md p-2 border border-[#2B2B2B]" onClick={() => {
+                            setSelectedAlbum(album)
+                        }}>
+                            <Folder className="w-6 h-6" />
+                            <p className="text-white red-hat-mono">{album.Title}</p>
+                        </div>
+                    ))}
+                    <hr className="border-[#2B2B2B] my-2" />
+                    {media.length === 0 && (
+                        <p className="text-white red-hat-mono">No media found</p>
+                    )}
+                    {media.length > 0 && (
+                        <div className="flex flex-col gap-2">
+                            {media.map((m) => (
+                                <div key={m.ID} className="flex flex-row gap-2 cursor-pointer hover:bg-[#2B2B2B] rounded-md p-2 border border-[#2B2B2B]">
+                                    <File className="w-6 h-6" />
+                                    <p className="text-white red-hat-mono">{m.Title}</p>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </Modal>
+        </div>
+    )
+}