Add tags to sidebar of grid view

src/app/(static)/grid/page.tsx

@@ -1,9 +1,11 @@
+import AnimateItems from '@/components/AnimateItems';
 import MorePhotos from '@/components/MorePhotos';
 import SiteGrid from '@/components/SiteGrid';
 import { generateOgImageMetaForPhotos, getPhotosLimitForQuery } from '@/photo';
 import PhotoGrid from '@/photo/PhotoGrid';
 import PhotosEmptyState from '@/photo/PhotosEmptyState';
-import { getPhotos, getPhotosCount } from '@/services/postgres';
+import { getPhotos, getPhotosCount, getUniqueTags } from '@/services/postgres';
+import PhotoTag from '@/tag/PhotoTag';
 import { Metadata } from 'next';
 
 export const runtime = 'edge';
@@ -24,6 +26,8 @@ export default async function GridPage({
 
   const count = await getPhotosCount();
 
+  const tags = await getUniqueTags();
+
   const showMorePhotos = count > photos.length;
   
   return (
@@ -34,6 +38,11 @@ export default async function GridPage({
           {showMorePhotos &&
             <MorePhotos path={`/grid?next=${offset + 1}`} />}
         </div>}
+        contentSide={tags &&
+          <AnimateItems
+            items={tags.map(tag => <PhotoTag key={tag} tag={tag} />)}
+          />}
+        sideHiddenOnMobile
       />
       : <PhotosEmptyState />
   );

src/components/SiteGrid.tsx

@@ -5,11 +5,13 @@ export default function SiteGrid({
   contentMain,
   contentSide,
   sideFirstOnMobile,
+  sideHiddenOnMobile,
 }: {
   className?: string
   contentMain: JSX.Element
   contentSide?: JSX.Element
   sideFirstOnMobile?: boolean
+  sideHiddenOnMobile?: boolean
 }) {
   return (
     <div className={cc(
@@ -27,7 +29,8 @@ export default function SiteGrid({
       {contentSide &&
         <div className={cc(
           'col-span-1 md:col-span-3',
-          sideFirstOnMobile && 'order-1 md:order-none'
+          sideFirstOnMobile && 'order-1 md:order-none',
+          sideHiddenOnMobile && 'hidden md:block',
         )}>
           {contentSide}
         </div>}

src/tag/TagHeader.tsx

@@ -29,7 +29,7 @@ export default function TagHeader({
         'sm:col-span-2 md:col-span-1 lg:col-span-2',
       )}>
         {selectedPhotoIndex !== undefined
-          ? `Tagged photo ${selectedPhotoIndex + 1} of ${photos.length}`
+          ? `Tagged ${selectedPhotoIndex + 1} of ${photos.length}`
           : descriptionForTaggedPhotos(photos)}
       </span>
       <span className={cc(