feat: album info in header

Signed-off-by: Varun Raj <varun@skcript.com>

src/components/shared/Sidebar.tsx

@@ -19,8 +19,8 @@ export default function Sidebar() {
   return (
     <div className="hidden border-r bg-muted/40 md:block max-h-screen min-h-screen">
       <div className="flex h-full max-h-screen flex-col gap-2">
-        <div className="flex h-14 items-center justify-between border-b px-4 lg:h-[60px] lg:px-6">
-          <Link href="/" className="flex items-center  gap-2 font-semibold">
+        <div className="flex h-14 items-center justify-between border-b px-2 lg:h-[60px] lg:px-2">
+          <Link href="/" className="flex items-center gap-1 font-semibold">
             <img
               src="/favicon.png"
               width={32}
@@ -39,7 +39,7 @@ export default function Sidebar() {
                 key={nav.title}
                 href={nav.link}
                 className={cn(
-                  "flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary",
+                  "flex items-center gap-3 rounded-lg py-2 text-muted-foreground transition-all hover:text-primary",
                   {
                     "text-primary": pathname === nav.link,
                   }

src/pages/albums/[albumId].tsx

@@ -13,8 +13,11 @@ import { Button } from '@/components/ui/button'
 import { useRouter } from 'next/router'
 import AlbumPeople from '@/components/albums/info/AlbumPeople'
 import AlbumImages from '@/components/albums/info/AlbumImages'
+import { Camera, ExternalLink, LinkIcon, Users } from 'lucide-react'
+import { humanizeNumber, pluralize } from '@/helpers/string.helper'
 
 export default function AlbumListPage() {
+  const { exImmichUrl } = useConfig()
   const router = useRouter()
   const { pathname } = router
   const { albumId, faceId } = router.query as { albumId: string, faceId: string }
@@ -92,8 +95,23 @@ export default function AlbumListPage() {
         rightComponent={
           !loading && (
             <div className="flex items-center gap-2">
-              <p className="text-sm text-gray-700 dark:text-gray-500">{albumInfo?.assetCount} photos</p>
-              <p className="text-sm text-gray-700 dark:text-gray-500">{albumInfo?.faceCount} faces</p>
+              <p className="flex items-center gap-1 text-sm text-gray-700 dark:text-gray-500">
+                {humanizeNumber(albumInfo?.assetCount || 0)}
+                {' '}
+                <Camera className="w-4 h-4" />
+              </p>
+              <p className="flex items-center gap-1 text-sm text-gray-700 dark:text-gray-500">
+                {humanizeNumber(albumInfo?.faceCount || 0)}
+                {' '}
+                <Users className="w-4 h-4" />
+              </p>
+              <Link
+                className="flex items-center gap-1 text-xs text-gray-700 dark:text-gray-500"
+                target="_blank"
+                href={`${exImmichUrl}/albums/${albumId}`}>
+                <ExternalLink className="w-4 h-4" />
+                Open In Immich
+              </Link> 
             </div>
           )
         }

src/pages/albums/index.tsx

@@ -66,7 +66,6 @@ export default function AlbumListPage() {
 
 
   const renderContent = () => {
-
     if (loading) {
       return <Loader />
     }
@@ -84,7 +83,7 @@ export default function AlbumListPage() {
   return (
     <PageLayout className="!p-0 !mb-0">
       <Header
-        leftComponent="Albums"
+        leftComponent="Manage Albums"
         rightComponent={
           <div className="flex items-center gap-2">
             <Select

src/pages/api/albums/potential-albums-dates.ts

@@ -3,6 +3,7 @@ import { db } from "@/config/db";
 import { IPotentialAlbumsDatesResponse } from "@/handlers/api/album.handler";
 import { getCurrentUser } from "@/handlers/serverUtils/user.utils";
 import { parseDate } from "@/helpers/date.helper";
+import { sql } from "drizzle-orm";
 import type { NextApiRequest, NextApiResponse } from "next";
 
 const SELECT_ORPHAN_PHOTOS = (ownerId: string) => sql`