Merge pull request #416 from besscroft/feat/ui-refactor-impeccable

Author: Zheaoli

.impeccable.md

@@ -0,0 +1,15 @@
+# Design Context
+
+## Target Audience
+Mixed user base: photography enthusiasts showcasing personal work, professional photographers needing portfolio sites for clients, and technical self-hosters who value functionality. The interface must serve all three without feeling too casual or too enterprise.
+
+## Use Cases
+- Browse and enjoy a photography gallery (visitors)
+- Upload, organize, and manage photos with EXIF/geolocation data (owners)
+- Configure storage, auth, and site settings (admin)
+
+## Brand Personality / Tone
+Warm and textured — like leafing through a beautifully printed photography book. The interface should feel crafted, tactile, and unhurried. Photos are the hero; the UI is the frame that elevates them without competing. Think gallery exhibition, not tech dashboard.
+
+## Pain Points
+All areas need attention: typography, color, spacing/layout, motion/interaction. Full audit requested.

app/(default)/layout.tsx

@@ -1,7 +1,9 @@
 import { fetchAlbumsShow } from '~/server/db/query/albums'
+import { fetchConfigsByKeys } from '~/server/db/query/configs'
 import type { AlbumType } from '~/types'
 import type { AlbumDataProps } from '~/types/props'
-import DockMenu from '~/components/layout/dock-menu'
+import TopNav from '~/components/layout/top-nav'
+import { PageTransition } from '~/components/layout/page-transition'
 
 export default async function DefaultLayout({
   children,
@@ -13,16 +15,26 @@ export default async function DefaultLayout({
     return await fetchAlbumsShow()
   }
 
+  const getTitle = async () => {
+    'use server'
+    const configs = await fetchConfigsByKeys(['custom_title'])
+    return configs?.find((item) => item.config_key === 'custom_title')?.config_value || 'PicImpact'
+  }
+
   const data: AlbumType[] = await getData()
+  const title = await getTitle()
 
   const props: AlbumDataProps = {
-    data: data
+    data: data,
+    title: title
   }
 
   return (
     <>
-      <DockMenu {...props} />
-      {children}
+      <TopNav {...props} />
+      <main id="main-content" className="pt-14">
+        <PageTransition>{children}</PageTransition>
+      </main>
     </>
   )
 }

app/(default)/page.tsx

@@ -3,7 +3,6 @@ import { fetchClientImagesListByAlbum, fetchClientImagesPageTotalByAlbum } from
 import SimpleGallery from '~/components/layout/theme/simple/simple-gallery.tsx'
 import { fetchConfigsByKeys } from '~/server/db/query/configs'
 import DefaultGallery from '~/components/layout/theme/default/default-gallery.tsx'
-import 'react-photo-album/masonry.css'
 import type { Config } from '~/types'
 import PolaroidGallery from '~/components/layout/theme/polaroid/polaroid-gallery.tsx'
 

app/(default)/preview/[...id]/page.tsx

@@ -2,6 +2,44 @@ import { fetchImageByIdAndAuth } from '~/server/db/query/images'
 import type { PreviewImageHandleProps } from '~/types/props'
 import PreviewImage from '~/components/album/preview-image'
 import { fetchConfigsByKeys } from '~/server/db/query/configs'
+import type { Metadata } from 'next/types'
+
+export async function generateMetadata({ params }: { params: any }): Promise<Metadata> {
+  const { id } = await params
+  const imageData = await fetchImageByIdAndAuth(String(id))
+
+  if (!imageData) {
+    return { title: 'Photo not found' }
+  }
+
+  const title = imageData.title || 'Photo'
+  const description = [
+    imageData.exif?.make,
+    imageData.exif?.model,
+    imageData.exif?.focal_length,
+    imageData.exif?.f_number ?? null,
+    imageData.exif?.iso_speed_rating ? `ISO ${imageData.exif.iso_speed_rating}` : null,
+  ].filter(Boolean).join(' · ') || imageData.detail || title
+
+  const imageUrl = imageData.preview_url || imageData.url
+
+  return {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      type: 'article',
+      images: imageUrl ? [{ url: imageUrl, width: imageData.width, height: imageData.height, alt: title }] : [],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title,
+      description,
+      images: imageUrl ? [imageUrl] : [],
+    },
+  }
+}
 
 export default async function PreView({params}: { params: any }) {
   const { id } = await params
@@ -30,4 +68,4 @@ export default async function PreView({params}: { params: any }) {
   return (
     <PreviewImage {...props} />
   )
-}
+}

app/(theme)/[...album]/layout.tsx

@@ -1,7 +1,8 @@
 import { fetchAlbumsShow } from '~/server/db/query/albums'
+import { fetchConfigsByKeys } from '~/server/db/query/configs'
 import type { AlbumType } from '~/types'
 import type { AlbumDataProps } from '~/types/props'
-import DockMenu from '~/components/layout/dock-menu'
+import TopNav from '~/components/layout/top-nav'
 
 export default async function ThemeAlbumLayout({
   children,
@@ -15,15 +16,23 @@ export default async function ThemeAlbumLayout({
     return await fetchAlbumsShow()
   }
 
+  const getTitle = async () => {
+    'use server'
+    const configs = await fetchConfigsByKeys(['custom_title'])
+    return configs?.find((item) => item.config_key === 'custom_title')?.config_value || 'PicImpact'
+  }
+
   const dataList: AlbumType[] = await getData()
+  const title = await getTitle()
   const props: AlbumDataProps = {
-    data: dataList
+    data: dataList,
+    title: title
   }
 
   return (
     <>
-      <DockMenu {...props} />
-      {children}
+      <TopNav {...props} />
+      <main className="pt-14">{children}</main>
     </>
   )
 }

app/(theme)/[...album]/page.tsx

@@ -47,10 +47,13 @@ export default async function Page({
     configHandle: getConfig
   }
 
+  if (!data) {
+    return <DefaultGallery {...props} />
+  }
+
   return (
     <>
-      {data
-      && data.theme === '1' ? <SimpleGallery {...props} />
+      {data.theme === '1' ? <SimpleGallery {...props} />
         : data.theme === '2' ? <PolaroidGallery {...props} />
         : <DefaultGallery {...props} />
       }

app/(theme)/map/layout.tsx

@@ -1,7 +1,8 @@
 import { fetchAlbumsShow } from '~/server/db/query/albums'
+import { fetchConfigsByKeys } from '~/server/db/query/configs'
 import type { AlbumType } from '~/types'
 import type { AlbumDataProps } from '~/types/props'
-import DockMenu from '~/components/layout/dock-menu'
+import TopNav from '~/components/layout/top-nav'
 
 export default async function MapLayout({
   children,
@@ -13,16 +14,24 @@ export default async function MapLayout({
     return await fetchAlbumsShow()
   }
 
+  const getTitle = async () => {
+    'use server'
+    const configs = await fetchConfigsByKeys(['custom_title'])
+    return configs?.find((item) => item.config_key === 'custom_title')?.config_value || 'PicImpact'
+  }
+
   const data: AlbumType[] = await getData()
+  const title = await getTitle()
 
   const props: AlbumDataProps = {
-    data: data
+    data: data,
+    title: title
   }
 
   return (
     <>
-      <DockMenu {...props} />
-      {children}
+      <TopNav {...props} />
+      <main className="pt-14">{children}</main>
     </>
   )
 }

app/@modal/(...)preview/[id]/page.tsx

@@ -7,4 +7,4 @@ export default async function Page({params}: { params: any }) {
       <PreView params={params} />
     </Modal>
   )
-}
+}

app/admin/about/page.tsx

@@ -28,23 +28,23 @@ export default async function About() {
             return (
               <div
                 key={item.login}
-                className="select-none border border-black/[0.2] dark:border-white/[0.2] flex flex-col items-start w-full mx-auto p-4 relative"
+                className="select-none border border-foreground/20 flex flex-col items-start w-full mx-auto p-4 relative"
               >
-                <Icon className="absolute h-6 w-6 -top-3 -left-3 dark:text-white text-black" />
-                <Icon className="absolute h-6 w-6 -bottom-3 -left-3 dark:text-white text-black" />
-                <Icon className="absolute h-6 w-6 -top-3 -right-3 dark:text-white text-black" />
-                <Icon className="absolute h-6 w-6 -bottom-3 -right-3 dark:text-white text-black" />
+                <Icon className="absolute h-6 w-6 -top-3 -left-3 text-foreground" />
+                <Icon className="absolute h-6 w-6 -bottom-3 -left-3 text-foreground" />
+                <Icon className="absolute h-6 w-6 -top-3 -right-3 text-foreground" />
+                <Icon className="absolute h-6 w-6 -bottom-3 -right-3 text-foreground" />
 
                 <EvervaultCard text={item.avatar_url} />
 
-                <h2 className="dark:text-white text-black mt-4 text-lg font-light">
+                <h2 className="text-foreground mt-4 text-lg font-light">
                   {item.login}
                 </h2>
                 <Link
                   href={item.html_url}
                   target="_blank"
                 >
-                  <p className="select-none text-sm border font-light dark:border-white/[0.2] border-black/[0.2] rounded-full mt-4 text-black dark:text-white px-2 py-0.5">
+                  <p className="select-none text-sm border font-light border-foreground/20 rounded-full mt-4 text-foreground px-2 py-0.5">
                     Follow
                   </p>
                 </Link>

app/admin/layout.tsx

@@ -7,9 +7,9 @@ export default function AdminLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <SidebarProvider>
+    <SidebarProvider defaultOpen={false}>
       <AppSidebar />
-      <main className="flex w-full h-full flex-1 flex-col p-4">
+      <main id="main-content" className="flex w-full h-full flex-1 flex-col p-4">
         <SidebarTrigger className="cursor-pointer" />
         <div className="w-full h-full p-2">
           {children}