image viewer page, improved gallery tiling, thumbnail generation and caching

frontend/src/App.jsx

@@ -1,4 +1,5 @@
 import { Navigate, Routes, Route, useNavigate, useLocation } from 'react-router-dom'
+import Viewer from './viewer'
 import Gallery from './gallery'
 import Login from './account/login'
 import { getServerUrl } from './hooks/getConstants'
@@ -41,6 +42,7 @@ function App() {
         <Routes>
           <Route path="/" element={<RedirectHandler />} />
           <Route path="/gallery/*" element={<Gallery />} />
+          <Route path="/viewer/:albumId/:mediaId" element={<Viewer />} />
           <Route path="/login" element={<Login />} />
           <Route path="/onboarding/createRootUser" element={<CreateRootUser />} />
         </Routes>

frontend/src/gallery/components/MediaList.jsx

@@ -5,14 +5,14 @@ import { useState, useEffect } from 'react'
 import { getServerUrl } from '../../hooks/getConstants'
 import { useAccount } from '../../contexts/useAccount'
 import { useNotifier } from '../../contexts/useNotifier'
-
+import { useNavigate } from 'react-router-dom'
 export default function MediaList({ albumId, albumName }) {
     const { getAccessToken } = useAccount()
     const [open, setOpen] = useState(false)
     const [media, setMedia] = useState([])
     const [aspectRatios, setAspectRatios] = useState({})
     const { showError } = useNotifier()
-
+    const navigate = useNavigate()
     useEffect(() => {
         let ignore = false;
         const getMedia = async () => {
@@ -73,10 +73,16 @@ export default function MediaList({ albumId, albumName }) {
                                 flexGrow: ar,
                                 flexBasis: `${220 * ar}px`,
                             }}
-                            className="relative bg-[#1A1A1A] rounded-md overflow-hidden border border-[#2B2B2B] min-w-[100px]"
+                            className="relative bg-[#1A1A1A] rounded-md overflow-hidden border border-[#2B2B2B] min-w-[100px] hover:scale-102 transition-all duration-300 cursor-pointer"
+                            onClick={() => {
+                                navigate(`/viewer/${albumId ? albumId : 'root'}/${item.ID}`)
+                            }}
                         >
+                            <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-[#1A1A1A] via-transparent to-transparent flex items-start justify-start opacity-0 hover:opacity-100 transition-all duration-300">
+                                <p className="text-white text-sm truncate max-w-[100%] p-2 red-hat-mono">{item.Title}</p>
+                            </div>
                             <AuthImage
-                                src={`${getServerUrl()}/api/media/${albumId ? albumId : 'root'}/${item.ID}`}
+                                src={`${getServerUrl()}/api/media/thumb/${albumId ? albumId : 'root'}/${item.ID}`}
                                 token={getAccessToken()}
                                 alt={item.Title}
                                 className="w-full h-full object-cover"

frontend/src/viewer/components/ImageViewer.jsx

@@ -0,0 +1,18 @@
+import AuthImage from '../../components/AuthImage'
+import { getServerUrl } from '../../hooks/getConstants'
+
+export default function ImageViewer({ albumId, mediaId, token, title }) {
+    const src = `${getServerUrl()}/api/media/${albumId}/${mediaId}`
+
+    return (
+        <div className="flex-1 flex items-center justify-center bg-black relative overflow-hidden h-full">
+            <AuthImage
+                src={src}
+                token={token}
+                alt={title}
+                className="max-w-full max-h-full object-contain"
+            />
+        </div>
+    )
+}
+

frontend/src/viewer/components/MetadataPanel.jsx

@@ -0,0 +1,51 @@
+export default function MetadataPanel({ mediaItem }) {
+    if (!mediaItem) return <div className="w-80 bg-[#1A1A1A] h-full border-l border-[#2B2B2B] p-4 text-white">Loading...</div>
+
+    return (
+        <div className="w-80 bg-[#1A1A1A] h-full border-l border-[#2B2B2B] p-6 text-white overflow-y-auto flex-shrink-0">
+            <h2 className="text-xl font-bold mb-6 red-hat-mono break-words">{mediaItem.Title}</h2>
+
+            <div className="space-y-6">
+                <div className="space-y-2">
+                    <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">Details</h3>
+                    <div className="bg-[#222] rounded p-3 space-y-2 text-sm">
+                        <div className="flex justify-between">
+                            <span className="text-gray-500">Type</span>
+                            <span className="text-white">{mediaItem.Type || 'Unknown'}</span>
+                        </div>
+                        <div className="flex justify-between">
+                            <span className="text-gray-500">Size</span>
+                            {/* Placeholder for size formatting if not available */}
+                            <span className="text-white">{mediaItem.Metadata?.fileSize ? (mediaItem.Metadata.fileSize / 1024 / 1024).toFixed(2) + ' MB' : 'N/A'}</span>
+                        </div>
+                        <div className="flex justify-between">
+                            <span className="text-gray-500">Uploaded</span>
+                            <span className="text-white">{mediaItem.CreatedAt ? new Date(mediaItem.CreatedAt).toLocaleDateString() : '-'}</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="space-y-2">
+                    <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">EXIF Data</h3>
+                    <p className="text-xs text-gray-500 italic">Metadata editing not yet implemented.</p>
+                    {/* Placeholder for EXIF data */}
+                    <div className="bg-[#222] rounded p-3 space-y-2 text-sm opacity-50">
+                        <div className="flex justify-between">
+                            <span className="text-gray-500">Camera</span>
+                            <span className="text-white">-</span>
+                        </div>
+                        <div className="flex justify-between">
+                            <span className="text-gray-500">ISO</span>
+                            <span className="text-white">-</span>
+                        </div>
+                        <div className="flex justify-between">
+                            <span className="text-gray-500">Aperture</span>
+                            <span className="text-white">-</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+

frontend/src/viewer/index.jsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react'
+import { useParams, useLocation, useNavigate } from 'react-router-dom'
+import ImageViewer from './components/ImageViewer'
+import MetadataPanel from './components/MetadataPanel'
+import { useAccount } from '../contexts/useAccount'
+import { getServerUrl } from '../hooks/getConstants'
+import { useNotifier } from '../contexts/useNotifier'
+import { ArrowLeft } from 'lucide-react'
+
+export default function Viewer() {
+    const { albumId, mediaId } = useParams()
+    const location = useLocation()
+    const navigate = useNavigate()
+    const { getAccessToken } = useAccount()
+    const { showError } = useNotifier()
+    const [mediaItem, setMediaItem] = useState(location.state?.mediaItem || null)
+
+    useEffect(() => {
+        if (mediaItem) return
+
+        const fetchMediaDetails = async () => {
+            try {
+                // Use '' if albumId is 'root'
+                const targetAlbumId = albumId === 'root' ? '' : albumId
+
+                const response = await fetch(`${getServerUrl()}/api/media/getAllMediaInAlbum?albumId=${targetAlbumId}`, {
+                    headers: {
+                        'Authorization': getAccessToken()
+                    }
+                })
+
+                const data = await response.json()
+
+                if (data.error) {
+                    showError(data.error)
+                } else {
+                    const found = data.media.find(m => m.ID === mediaId)
+                    if (found) {
+                        setMediaItem(found)
+                    } else {
+                        showError("Media not found")
+                    }
+                }
+            } catch (err) {
+                showError("Failed to fetch media details")
+            }
+        }
+
+        fetchMediaDetails()
+    }, [albumId, mediaId, getAccessToken, showError, mediaItem])
+
+    const handleBack = () => {
+        if (window.history.state && window.history.state.idx > 0) {
+            navigate(-1)
+        } else {
+            // Fallback if opened directly
+            navigate('/gallery')
+        }
+    }
+
+    return (
+        <div className="flex flex-col h-screen w-full bg-[#141414]">
+            <div className="flex items-center h-14 px-4 border-b border-[#2B2B2B] bg-[#141414] flex-shrink-0 gap-4">
+                <button onClick={handleBack} className="text-gray-400 hover:text-white transition-colors p-1 cursor-pointer">
+                    <ArrowLeft size={20} />
+                </button>
+                <span className="text-white font-medium truncate red-hat-mono">
+                    {mediaItem ? mediaItem.Title : 'Loading...'}
+                </span>
+            </div>
+
+            <div className="flex flex-1 overflow-hidden">
+                <ImageViewer
+                    albumId={albumId === 'root' ? '' : albumId}
+                    mediaId={mediaId}
+                    token={getAccessToken()}
+                    title={mediaItem?.Title || ''}
+                />
+                <MetadataPanel mediaItem={mediaItem} />
+            </div>
+        </div>
+    )
+}
+