fix(gallery): update photo count display to reflect visible photos

Signed-off-by: Innei <tukon479@gmail.com>

apps/web/src/modules/gallery/MasonryHeaderMasonryItem.tsx

@@ -1,15 +1,13 @@
-import { photoLoader } from '@afilmory/data'
 import { siteConfig } from '@config'
 import { repository } from '@pkg'
 import * as AvatarPrimitive from '@radix-ui/react-avatar'
 import { useTranslation } from 'react-i18next'
 
+import { usePhotos } from '~/hooks/usePhotoViewer'
 import { clsxm } from '~/lib/cn'
 
 import { ActionGroup } from './ActionGroup'
 
-const data = photoLoader.getPhotos()
-
 export const MasonryHeaderMasonryItem = ({
   style,
   className,
@@ -19,6 +17,7 @@ export const MasonryHeaderMasonryItem = ({
 }) => {
   const { t } = useTranslation()
   const { i18n } = useTranslation()
+  const visiblePhotoCount = usePhotos().length
   return (
     <div
       className={clsxm(
@@ -98,7 +97,7 @@ export const MasonryHeaderMasonryItem = ({
         )}
 
         <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
-          {t('gallery.photos', { count: data?.length || 0 })}
+          {t('gallery.photos', { count: visiblePhotoCount || 0 })}
         </p>
       </div>