add thumbnail field to album model, update album retrieval to use POST method, and enhance album list component with dynamic fetching

backend/internal/models/album.go

@@ -15,6 +15,7 @@ type Album struct {
 	// Public albums have a default access level of 0 for all visitors, including guests.
 	// Private albums require a user with access to be logged in to view, or a magic link to be used.
 	ParentID  string `gorm:"not null"` // The ID of the parent album, if any. This is an empty string for root albums.
+	Thumbnail string `gorm:"not null"` // The media ID of the thumbnail for the album.
 	CreatedAt time.Time
 	UpdatedAt time.Time
 }

backend/internal/routes/album.go

@@ -9,7 +9,7 @@ import (
 
 func RegisterAlbumRoutes(rg *gin.RouterGroup) {
 	album := rg.Group("/albums")
-	album.GET("/getAlbumsInParent", func(c *gin.Context) {
+	album.POST("/getAlbumsInParent", func(c *gin.Context) {
 		accessToken := c.GetHeader("Authorization")
 		if accessToken == "" {
 			c.JSON(http.StatusUnauthorized, gin.H{"error": "Unauthorized"})

backend/internal/services/album.go

@@ -73,6 +73,7 @@ func CreateAlbum(accessToken string, title string, description string, parentID
 		Title:       title,
 		Description: description,
 		ParentID:    parentID,
+		Thumbnail:   "",
 	}
 	result := db.GetDB().Create(&album)
 	if result.Error != nil {

frontend/src/gallery/components/AlbumList.jsx

@@ -1,14 +1,49 @@
 import { PlusIcon } from 'lucide-react'
 import AlbumCreateModal from './AlbumCreateModal'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
-export default function AlbumList() {
+import { getServerUrl } from '../../hooks/getConstants'
+import { useAccount } from '../../contexts/useAccount'
+export default function AlbumList({ currentAlbumName }) {
+    const { getAccessToken } = useAccount()
     const [open, setOpen] = useState(false)
+    const [albums, setAlbums] = useState([])
+    const getAlbums = async () => {
+        console.log('Getting albums in parent', currentAlbumName)
+        if (currentAlbumName === 'gallery') { // Root album
+            const response = await fetch(`${getServerUrl()}/api/albums/getAlbumsInParent`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': getAccessToken(),
+                },
+                body: JSON.stringify({
+                    parentId: "",
+                }),
+            })
+            const data = await response.json()
+            console.log('Albums', data)
+            setAlbums(data)
+        } else {
+            setAlbums([])
+        }
+    }
+    useEffect(() => {
+        if (!open) {
+            getAlbums()
+        }
+    }, [currentAlbumName, open])
     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>
+            <div className="flex flex-row items-center justify-start gap-2 w-full px-6 flex-wrap">
+                {albums.map((album) => (
+                    <div className="flex flex-row items-center justify-start gap-2 w-1/8 aspect-square border border-[#2B2B2B] rounded-md px-6 py-4">
+                        <p className="text-white red-hat-mono">{album.Title}</p>
+                    </div>
+                ))}
+            </div>
             <AlbumCreateModal open={open} onOpenChange={setOpen} />
         </div>
     )

frontend/src/gallery/index.jsx

@@ -6,6 +6,7 @@ import AlbumList from './components/AlbumList';
 export default function Gallery() {
     const currentPath = useLocation().pathname;
     const pathList = currentPath.split('/').slice(1);
+    const currentAlbumName = pathList[pathList.length - 1];
     const { fetchUserData, user } = useAccount()
 
     useEffect(() => {
@@ -15,7 +16,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 />
+            <AlbumList currentAlbumName={currentAlbumName} />
         </div>
     )
 }