fix(admin): add empty states for image and album management

Author: besscroft

components/admin/album/album-list.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react'
 import { useSwrHydrated } from '~/hooks/use-swr-hydrated'
-import { ArrowDown10 } from 'lucide-react'
+import { ArrowDown10, FolderOpen } from 'lucide-react'
 import { toast } from 'sonner'
 import type { AlbumType } from '~/types'
 import type { HandleProps } from '~/types/props'
@@ -24,9 +24,10 @@ import { DeleteIcon } from '~/components/icons/delete'
 import { useTranslations } from 'next-intl'
 import { Badge } from '~/components/ui/badge'
 import { AnimatedIconTrigger, mergeAnimatedTriggerProps } from '~/components/icons/animated-trigger'
+import AdminEmptyState from '~/components/admin/empty-state'
 
 export default function AlbumList(props : Readonly<HandleProps>) {
-  const { data, mutate } = useSwrHydrated(props)
+  const { data, isLoading, mutate } = useSwrHydrated(props)
   const [album, setAlbum] = useState({} as AlbumType)
   const [deleteLoading, setDeleteLoading] = useState(false)
   const [updateAlbumLoading, setUpdateAlbumLoading] = useState(false)
@@ -35,6 +36,8 @@ export default function AlbumList(props : Readonly<HandleProps>) {
     (state) => state,
   )
   const t = useTranslations()
+  const albumList: AlbumType[] = data ?? []
+  const isEmpty = !isLoading && albumList.length === 0
 
   async function deleteAlbum() {
     setDeleteLoading(true)
@@ -86,7 +89,14 @@ export default function AlbumList(props : Readonly<HandleProps>) {
 
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-      {data && data.map((album: AlbumType) => (
+      {isEmpty ? (
+        <AdminEmptyState
+          className="col-span-full min-h-[22rem]"
+          icon={FolderOpen}
+          title={t('Album.emptyTitle')}
+          description={t('Album.emptyDescription')}
+        />
+      ) : albumList.map((album: AlbumType) => (
         <Card key={album.id} className="flex flex-col h-72 show-up-motion items-center gap-0 py-0">
           <div className="flex h-12 justify-start w-full p-2 space-x-2">
             <Badge aria-label={t('Album.albumName')}>{album.name}</Badge>

components/admin/empty-state.tsx

@@ -0,0 +1,38 @@
+import type { LucideIcon } from 'lucide-react'
+
+import { cn } from '~/lib/utils'
+
+type AdminEmptyStateProps = {
+  icon: LucideIcon
+  title: string
+  description: string
+  className?: string
+}
+
+export default function AdminEmptyState({
+  icon: Icon,
+  title,
+  description,
+  className,
+}: Readonly<AdminEmptyStateProps>) {
+  return (
+    <div
+      className={cn(
+        'show-up-motion flex w-full items-center justify-center rounded-[1.35rem] border border-dashed border-border/80 bg-background/60 px-6 py-10 text-center',
+        className
+      )}
+    >
+      <div className='mx-auto flex max-w-md flex-col items-center'>
+        <div className='flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary/80'>
+          <Icon className='size-5' />
+        </div>
+        <h3 className='mt-4 font-display text-[1.35rem] leading-none text-foreground'>
+          {title}
+        </h3>
+        <p className='mt-2 max-w-sm text-sm leading-6 text-muted-foreground line-clamp-2'>
+          {description}
+        </p>
+      </div>
+    </div>
+  )
+}

components/admin/list/list-props.tsx

@@ -5,7 +5,7 @@ import type { ImageType, AlbumType } from '~/types'
 import type { ImageListDataProps, ImageServerHandleProps } from '~/types/props'
 import { useSwrInfiniteServerHook } from '~/hooks/use-swr-infinite-server-hook'
 import { useSwrPageTotalServerHook } from '~/hooks/use-swr-page-total-server-hook'
-import { ArrowDown10, ScanSearch, Replace } from 'lucide-react'
+import { ArrowDown10, Images, Replace, ScanSearch } from 'lucide-react'
 import { toast } from 'sonner'
 import { useButtonStore } from '~/app/providers/button-store-providers'
 import ImageEditSheet from '~/components/admin/list/image-edit-sheet'
@@ -48,6 +48,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '~/components/ui/popover'
+import AdminEmptyState from '~/components/admin/empty-state'
 import { RefreshCWIcon } from '~/components/icons/refresh-cw.tsx'
 import { CircleChevronDownIcon } from '~/components/icons/circle-chevron-down.tsx'
 import { AnimatedIconTrigger, mergeAnimatedTriggerProps } from '~/components/icons/animated-trigger'
@@ -106,6 +107,17 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
     }
   }, [adminConfig])
 
+  useEffect(() => {
+    setPageNum((current) => current === 1 ? current : 1)
+  }, [album, showStatus, selectedCamera, selectedLens])
+
+  useEffect(() => {
+    const totalPages = Math.max(1, Math.ceil((total ?? 0) / pageSize))
+    if (!isLoading && (total ?? 0) > 0 && pageNum > totalPages) {
+      setPageNum(totalPages)
+    }
+  }, [isLoading, pageNum, pageSize, total])
+
   const updateImageShow = useCallback(async (id: string, show: number) => {
     try {
       setUpdateShowLoading(true)
@@ -166,6 +178,14 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
     }
   }
 
+  const hasActiveFilters = [album, showStatus, selectedCamera, selectedLens].some(
+    (value) => value !== '' && value !== 'all'
+  )
+  const imageCount = Array.isArray(data) ? data.length : 0
+  const isCollectionEmpty = !isLoading && imageCount === 0 && (total ?? 0) === 0
+  const isEmptyDatabase = isCollectionEmpty && !hasActiveFilters
+  const isFilteredEmpty = isCollectionEmpty && hasActiveFilters
+
   return (
     <div className="flex flex-col space-y-2 h-full flex-1">
       <div className="flex justify-between space-x-1">
@@ -270,6 +290,7 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
                 variant="outline"
                 size="icon"
                 aria-label={t('Button.batchDelete')}
+                disabled={isLoading || (total ?? 0) === 0}
                 {...mergeAnimatedTriggerProps({
                   onClick: () => setImageBatchDelete(true)
                 }, triggerProps)}
@@ -386,7 +407,21 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
         </div>
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-        {Array.isArray(data) && data?.map((image: ImageType) => (
+        {isEmptyDatabase ? (
+          <AdminEmptyState
+            className="col-span-full min-h-[22rem]"
+            icon={Images}
+            title={t('List.emptyTitle')}
+            description={t('List.emptyDescription')}
+          />
+        ) : isFilteredEmpty ? (
+          <AdminEmptyState
+            className="col-span-full min-h-[22rem]"
+            icon={Images}
+            title={t('List.filteredEmptyTitle')}
+            description={t('List.filteredEmptyDescription')}
+          />
+        ) : Array.isArray(data) && data?.map((image: ImageType) => (
           <Card key={image.id} className="flex flex-col h-72 show-up-motion items-center gap-0 py-0">
             <div className="flex h-12 justify-between w-full p-2 space-x-2">
               <Badge variant="secondary" aria-label={t('Words.album')}>{image.album_name}</Badge>

messages/en.json

@@ -292,7 +292,11 @@
     "showStatus": "Show Status",
     "showStatusDesc": "Whether to display the image",
     "homepageShowStatus": "Homepage Show Status",
-    "homepageShowStatusDesc": "Whether to display the image on the homepage"
+    "homepageShowStatusDesc": "Whether to display the image on the homepage",
+    "emptyTitle": "No images yet",
+    "emptyDescription": "Uploaded images will appear here for management.",
+    "filteredEmptyTitle": "No matching images",
+    "filteredEmptyDescription": "There are no images under the current filters. Adjust them and try again."
   },
   "Album": {
     "router": "Router",
@@ -328,7 +332,9 @@
     "update": "Update",
     "requiredFields": "Please fill in the required fields first!",
     "routerStartWithSlash": "Router must start with /!",
-    "rootRouterWarning": "/ router cannot be set to hidden!"
+    "rootRouterWarning": "/ router cannot be set to hidden!",
+    "emptyTitle": "No albums yet",
+    "emptyDescription": "Your album list will appear here after you create one."
   },
   "Preferences": {
     "webSiteTitle": "Website Title",

messages/ja.json

@@ -292,7 +292,11 @@
     "showStatus": "表示状態",
     "showStatusDesc": "画像を表示するかどうか",
     "homepageShowStatus": "ホーム表示状態",
-    "homepageShowStatusDesc": "ホームページに画像を表示するかどうか"
+    "homepageShowStatusDesc": "ホームページに画像を表示するかどうか",
+    "emptyTitle": "画像はまだありません",
+    "emptyDescription": "画像をアップロードすると、ここでまとめて管理できます。",
+    "filteredEmptyTitle": "一致する画像がありません",
+    "filteredEmptyDescription": "現在の絞り込み条件では結果がありません。条件を調整してもう一度確認してください。"
   },
   "Album": {
     "router": "ルーター",
@@ -328,7 +332,9 @@
     "update": "更新",
     "requiredFields": "必須項目を入力してください！",
     "routerStartWithSlash": "ルーターは / で始める必要があります！",
-    "rootRouterWarning": "/ ルーターは非表示に設定できません！"
+    "rootRouterWarning": "/ ルーターは非表示に設定できません！",
+    "emptyTitle": "アルバムはまだありません",
+    "emptyDescription": "アルバムを作成すると、ここに一覧が表示されます。"
   },
   "Preferences": {
     "webSiteTitle": "ウェブサイトタイトル",

messages/zh-TW.json

@@ -292,7 +292,11 @@
     "showStatus": "顯示狀態",
     "showStatusDesc": "是否需要顯示圖片",
     "homepageShowStatus": "首頁顯示狀態",
-    "homepageShowStatusDesc": "是否需要在首頁顯示圖片"
+    "homepageShowStatusDesc": "是否需要在首頁顯示圖片",
+    "emptyTitle": "還沒有圖片",
+    "emptyDescription": "圖片上傳後會在這裡統一維護。",
+    "filteredEmptyTitle": "沒有匹配的圖片",
+    "filteredEmptyDescription": "目前篩選條件下沒有結果，調整篩選後再查看。"
   },
   "Album": {
     "router": "路由",
@@ -328,7 +332,9 @@
     "update": "更新",
     "requiredFields": "請先填寫必填項！",
     "routerStartWithSlash": "路由必須以 / 開頭！",
-    "rootRouterWarning": "/ 路由不允許設置為不顯示！"
+    "rootRouterWarning": "/ 路由不允許設置為不顯示！",
+    "emptyTitle": "還沒有相簿",
+    "emptyDescription": "建立相簿後，這裡會顯示你的相簿列表。"
   },
   "Preferences": {
     "webSiteTitle": "網站標題",

messages/zh.json

@@ -292,7 +292,11 @@
     "showStatus": "显示状态",
     "showStatusDesc": "是否需要显示图片",
     "homepageShowStatus": "首页显示状态",
-    "homepageShowStatusDesc": "是否需要在首页显示图片"
+    "homepageShowStatusDesc": "是否需要在首页显示图片",
+    "emptyTitle": "还没有图片",
+    "emptyDescription": "图片上传后会在这里统一维护。",
+    "filteredEmptyTitle": "没有匹配的图片",
+    "filteredEmptyDescription": "当前筛选条件下暂无结果，调整筛选后再查看。"
   },
   "Album": {
     "router": "路由",
@@ -328,7 +332,9 @@
     "update": "更新",
     "requiredFields": "请先填写必填项！",
     "routerStartWithSlash": "路由必须以 / 开头！",
-    "rootRouterWarning": "/ 路由不允许设置为不显示！"
+    "rootRouterWarning": "/ 路由不允许设置为不显示！",
+    "emptyTitle": "还没有相册",
+    "emptyDescription": "创建相册后，这里会显示你的相册列表。"
   },
   "Preferences": {
     "webSiteTitle": "网站标题",