Create protected hidden routes for admins

__tests__/path.test.ts

@@ -1,5 +1,4 @@
 /* eslint-disable max-len */
-import '@testing-library/jest-dom';
 import {
   getEscapePath,
   getPathComponents,
@@ -13,11 +12,13 @@ import {
   isPathFilmSimulationShare,
   isPathPhoto,
   isPathPhotoShare,
+  isPathProtected,
   isPathTag,
   isPathTagPhoto,
   isPathTagPhotoShare,
   isPathTagShare,
 } from '@/site/paths';
+import { TAG_HIDDEN } from '@/tag';
 
 const PHOTO_ID        = 'UsKSGcbt';
 const TAG             = 'tag-name';
@@ -39,6 +40,11 @@ const PATH_TAG_SHARE                    = `${PATH_TAG}/${SHARE}`;
 const PATH_TAG_PHOTO                    = `${PATH_TAG}/${PHOTO_ID}`;
 const PATH_TAG_PHOTO_SHARE              = `${PATH_TAG_PHOTO}/${SHARE}`;
 
+const PATH_TAG_HIDDEN                   = `/tag/${TAG_HIDDEN}`;
+const PATH_TAG_HIDDEN_SHARE             = `${PATH_TAG_HIDDEN}/${SHARE}`;
+const PATH_TAG_HIDDEN_PHOTO             = `${PATH_TAG_HIDDEN}/${PHOTO_ID}`;
+const PATH_TAG_HIDDEN_PHOTO_SHARE       = `${PATH_TAG_HIDDEN_PHOTO}/${SHARE}`;
+
 const PATH_CAMERA                       = `/shot-on/${CAMERA_MAKE}/${CAMERA_MODEL}`;
 const PATH_CAMERA_SHARE                 = `${PATH_CAMERA}/${SHARE}`;
 const PATH_CAMERA_PHOTO                 = `${PATH_CAMERA}/${PHOTO_ID}`;
@@ -50,6 +56,21 @@ const PATH_FILM_SIMULATION_PHOTO        = `${PATH_FILM_SIMULATION}/${PHOTO_ID}`;
 const PATH_FILM_SIMULATION_PHOTO_SHARE  = `${PATH_FILM_SIMULATION_PHOTO}/${SHARE}`;
  
 describe('Paths', () => {
+  it('can be protected', () => {
+    // Public
+    expect(isPathProtected(PATH_ROOT)).toBe(false);
+    expect(isPathProtected(PATH_PHOTO)).toBe(false);
+    expect(isPathProtected(PATH_TAG)).toBe(false);
+    expect(isPathProtected(PATH_TAG_PHOTO)).toBe(false);
+    expect(isPathProtected(PATH_CAMERA)).toBe(false);
+    expect(isPathProtected(PATH_FILM_SIMULATION)).toBe(false);
+    // Private
+    expect(isPathProtected(PATH_ADMIN)).toBe(true);
+    expect(isPathProtected(PATH_TAG_HIDDEN)).toBe(true);
+    expect(isPathProtected(PATH_TAG_HIDDEN_SHARE)).toBe(true);
+    expect(isPathProtected(PATH_TAG_HIDDEN_PHOTO)).toBe(true);
+    expect(isPathProtected(PATH_TAG_HIDDEN_PHOTO_SHARE)).toBe(true);
+  });
   it('can be classified', () => {
     // Positive
     expect(isPathPhoto(PATH_PHOTO)).toBe(true);

package.json

@@ -5,7 +5,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "test": "jest --watch",
+    "test": "jest --watch --transformIgnorePatterns 'node_modules/(?!my-library-dir)/'",
     "analyze": "ANALYZE=true next build"
   },
   "dependencies": {

src/admin/AdminNavClient.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import InfoBlock from '@/components/InfoBlock';
+import Banner from '@/components/Banner';
 import SiteGrid from '@/components/SiteGrid';
 import {
   PATH_ADMIN_CONFIGURATION,
@@ -96,13 +96,10 @@ export default function AdminNavClient({
             </Link>
           </div>
           {shouldShowBanner &&
-            <InfoBlock centered={false} padding="tight" color="blue">
-              <div className="flex items-center gap-3">
-                <FaRegClock className="flex-shrink-0" />
-                Photo updates detected—they may take several minutes to show up
-                for visitors
-              </div>
-            </InfoBlock>}
+            <Banner icon={<FaRegClock className="flex-shrink-0" />}>
+              Photo updates detected—they may take several minutes to show upe
+              for visitors
+            </Banner>}
         </div>
       }
     />

src/admin/AdminPhotosTable.tsx

@@ -50,15 +50,16 @@ export default function AdminPhotosTable({
               prefetch={false}
             >
               <span className={clsx(
-                'inline-flex items-center gap-2',
                 photo.hidden && 'text-dim',
               )}>
-                <span>{titleForPhoto(photo)}</span>
-                {photo.hidden &&
+                {titleForPhoto(photo)}
+                {photo.hidden && <span className="whitespace-nowrap">
+                  {' '}
                   <AiOutlineEyeInvisible
-                    className="translate-y-[0.25px]"
+                    className="inline translate-y-[-0.5px]"
                     size={16}
-                  />}
+                  />
+                </span>}
               </span>
               {photo.priorityOrder !== null &&
                 <span className={clsx(

src/app/admin/photos/[photoId]/edit/page.tsx

@@ -11,7 +11,7 @@ export default async function PhotoEditPage({
 }: {
   params: { photoId: string }
 }) {
-  const photo = await getPhotoNoStore(photoId);
+  const photo = await getPhotoNoStore(photoId, true);
 
   if (!photo) { redirect(PATH_ADMIN); }
 

src/app/admin/photos/page.tsx

@@ -23,7 +23,7 @@ export default async function AdminPhotosPage() {
     blobPhotoUrls,
   ] = await Promise.all([
     getPhotos({
-      includeHidden: true,
+      hidden: 'include',
       sortBy: 'createdAt',
       limit: INFINITE_SCROLL_INITIAL_ADMIN_PHOTOS,
     }).catch(() => []),

src/app/tag/[tag]/page.tsx

@@ -1,5 +1,6 @@
 import { GRID_THUMBNAILS_TO_SHOW_MAX } from '@/photo';
 import { PaginationParams } from '@/site/pagination';
+import { PATH_ROOT } from '@/site/paths';
 import { generateMetaForTag } from '@/tag';
 import TagOverview from '@/tag/TagOverview';
 import {
@@ -7,6 +8,7 @@ import {
   getPhotosTagDataCachedWithPagination,
 } from '@/tag/data';
 import type { Metadata } from 'next';
+import { redirect } from 'next/navigation';
 
 interface TagProps {
   params: { tag: string }
@@ -25,6 +27,8 @@ export async function generateMetadata({
     limit: GRID_THUMBNAILS_TO_SHOW_MAX,
   });
 
+  if (photos.length === 0) { return {}; }
+
   const {
     url,
     title,
@@ -65,6 +69,8 @@ export default async function TagPage({
     searchParams,
   });
 
+  if (photos.length === 0) { redirect(PATH_ROOT); }
+
   return (
     <TagOverview {...{ tag, photos, count, dateRange, showMorePath }} />
   );

src/app/tag/hidden/[photoId]/page.tsx

@@ -0,0 +1,58 @@
+import { descriptionForPhoto, titleForPhoto } from '@/photo';
+import PhotoDetailPage from '@/photo/PhotoDetailPage';
+import { getPhotoCached, getPhotosCached } from '@/photo/cache';
+import { PATH_ROOT, absolutePathForPhoto } from '@/site/paths';
+import { TAG_HIDDEN } from '@/tag';
+import { Metadata } from 'next';
+import { redirect } from 'next/navigation';
+import { ReactNode, cache } from 'react';
+
+const getPhotoCachedCached = cache(getPhotoCached);
+
+interface PhotoTagProps {
+  params: { photoId: string }
+}
+
+export async function generateMetadata({
+  params: { photoId },
+}: PhotoTagProps): Promise<Metadata> {
+  const photo = await getPhotoCachedCached(photoId, true);
+
+  if (!photo) { return {}; }
+
+  const title = titleForPhoto(photo);
+  const description = descriptionForPhoto(photo);
+  const url = absolutePathForPhoto(photo, TAG_HIDDEN);
+
+  return {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      url,
+    },
+    twitter: {
+      title,
+      description,
+      card: 'summary_large_image',
+    },
+  };
+}
+
+export default async function PhotoTagPage({
+  params: { photoId },
+  children,
+}: PhotoTagProps & { children: ReactNode }) {
+  const photo = await getPhotoCachedCached(photoId, true);
+
+  if (!photo) { redirect(PATH_ROOT); }
+
+  const photos = await getPhotosCached({ hidden: 'only' });
+  const count = photos.length;
+
+  return <>
+    {children}
+    <PhotoDetailPage {...{ photo, photos, count, tag: TAG_HIDDEN }} />
+  </>;
+}

src/app/tag/hidden/page.tsx

@@ -0,0 +1,69 @@
+import AnimateItems from '@/components/AnimateItems';
+import Banner from '@/components/Banner';
+import SiteGrid from '@/components/SiteGrid';
+import PhotoGrid from '@/photo/PhotoGrid';
+import { getPhotosCached, getPhotosTagHiddenMetaCached } from '@/photo/cache';
+import { absolutePathForTag } from '@/site/paths';
+import { TAG_HIDDEN, descriptionForTaggedPhotos, titleForTag } from '@/tag';
+import HiddenHeader from '@/tag/HiddenHeader';
+import { Metadata } from 'next';
+import { cache } from 'react';
+
+const getPhotosTagHiddenMetaCachedCached = cache(getPhotosTagHiddenMetaCached);
+
+export async function generateMetadata(): Promise<Metadata> {
+  const { count, dateRange } = await getPhotosTagHiddenMetaCachedCached();
+
+  if (count === 0) { return {}; }
+
+  const title = titleForTag(TAG_HIDDEN, undefined, count);
+  const description = descriptionForTaggedPhotos(
+    undefined,
+    undefined,
+    count,
+    dateRange,
+  );
+  const url = absolutePathForTag(TAG_HIDDEN);
+
+  return {
+    title,
+    openGraph: {
+      title,
+      description,
+      url,
+    },
+    twitter: {
+      description,
+      card: 'summary_large_image',
+    },
+    description,
+  };
+}
+
+export default async function HiddenTagPage() {
+  const [
+    photos,
+    { count, dateRange },
+  ] = await Promise.all([
+    getPhotosCached({ hidden: 'only' }),
+    getPhotosTagHiddenMetaCached(),
+  ]);
+  return (
+    <SiteGrid
+      contentMain={<div className="space-y-8 mt-4">
+        <AnimateItems
+          type="bottom"
+          items={[<HiddenHeader
+            key="HiddenHeader"
+            {...{ photos, count, dateRange }}
+          />]}
+          animateOnFirstLoadOnly
+        />
+        <Banner animate>
+          Only authenticated admins can see hidden photos.
+        </Banner>
+        <PhotoGrid {...{ photos }} />
+      </div>}
+    />
+  );
+}

src/components/Banner.tsx

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import InfoBlock from './InfoBlock';
+import AnimateItems from './AnimateItems';
+
+export default function Banner({
+  icon,
+  children,
+  animate,
+  className,
+}: {
+  icon?: ReactNode
+  children: ReactNode
+  animate?: boolean
+  className?: string
+}) {
+  return (
+    <AnimateItems
+      type={animate ? 'bottom' : 'none'}
+      items={[
+        <InfoBlock
+          key="Banner"
+          className={className}
+          centered={false}
+          padding="tight"
+          color="blue"
+        >
+          <div className="flex items-center gap-3">
+            {icon}
+            {children}
+          </div>
+        </InfoBlock>,
+      ]}
+      animateOnFirstLoadOnly
+    />
+  );
+}

src/components/FieldSetWithStatus.tsx

@@ -59,7 +59,7 @@ export default function FieldSetWithStatus({
           <span className="text-gray-400 dark:text-gray-600">
             ({note})
           </span>}
-        {isModified &&
+        {isModified && !error &&
           <span className={clsx(
             'text-main font-medium text-[0.9rem] -ml-1.5 translate-y-[-1px]'
           )}>

src/photo/PhotoDetailPage.tsx

@@ -10,6 +10,8 @@ import { Camera } from '@/camera';
 import CameraHeader from '@/camera/CameraHeader';
 import { FilmSimulation } from '@/simulation';
 import FilmSimulationHeader from '@/simulation/FilmSimulationHeader';
+import { TAG_HIDDEN } from '@/tag';
+import HiddenHeader from '@/tag/HiddenHeader';
 
 export default function PhotoDetailPage({
   photo,
@@ -35,8 +37,13 @@ export default function PhotoDetailPage({
       {tag &&
         <SiteGrid
           className="mt-4 mb-8"
-          contentMain={
-            <TagHeader
+          contentMain={tag === TAG_HIDDEN
+            ? <HiddenHeader
+              photos={photos}
+              selectedPhoto={photo}
+              count={count ?? 0}
+            />
+            : <TagHeader
               key={tag}
               tag={tag}
               photos={photos}

src/photo/PhotoSetHeader.tsx

@@ -17,11 +17,11 @@ export default function PhotoSetHeader({
   dateRange,
 }: {
   entity: ReactNode
-  entityVerb: string
+  entityVerb?: string
   entityDescription: string
   photos: Photo[]
   selectedPhoto?: Photo
-  sharePath: string
+  sharePath?: string
   count?: number
   dateRange?: PhotoDateRange
 }) {
@@ -45,7 +45,7 @@ export default function PhotoSetHeader({
             : 'xs:grid-cols-2 sm:grid-cols-4 md:grid-cols-3 lg:grid-cols-4',
         )}>
         <span className={clsx(
-          'inline-flex',
+          'inline-flex uppercase',
           HIGH_DENSITY_GRID && 'sm:col-span-2',
         )}>
           {entity}
@@ -59,9 +59,9 @@ export default function PhotoSetHeader({
         )}>
           {selectedPhotoIndex !== undefined
             // eslint-disable-next-line max-len
-            ? `${entityVerb} ${selectedPhotoIndex + 1} of ${count ?? photos.length}`
+            ? `${entityVerb ? `${entityVerb} ` : ''}${selectedPhotoIndex + 1} of ${count ?? photos.length}`
             : entityDescription}
-          {selectedPhotoIndex === undefined &&
+          {selectedPhotoIndex === undefined && sharePath &&
             <ShareButton
               className="translate-y-[1.5px]"
               path={sharePath}

src/photo/cache.ts

@@ -20,6 +20,7 @@ import {
   getPhotosDateRange,
   getPhotosNearId,
   getPhotosMostRecentUpdate,
+  getPhotosTagHiddenMeta,
 } from '@/photo/db';
 import { parseCachedPhotoDates, parseCachedPhotosDates } from '@/photo';
 import { createCameraKey } from '@/camera';
@@ -179,6 +180,12 @@ export const getPhotosTagMetaCached =
     [KEY_PHOTOS, KEY_TAGS, KEY_DATE_RANGE],
   );
 
+export const getPhotosTagHiddenMetaCached =
+  unstable_cache(
+    getPhotosTagHiddenMeta,
+    [KEY_PHOTOS, KEY_TAGS, KEY_HIDDEN, KEY_DATE_RANGE],
+  );
+
 export const getPhotosCameraMetaCached =
   unstable_cache(
     getPhotosCameraMeta,

src/photo/db.ts

@@ -173,11 +173,10 @@ export const sqlDeletePhoto = (id: string) =>
     'sqlDeletePhoto',
   );
 
-const sqlGetPhoto = (id: string) =>
-  safelyQueryPhotos(
-    () => sql<PhotoDb>`SELECT * FROM photos WHERE id=${id} LIMIT 1`,
-    'sqlGetPhoto',
-  );
+const sqlGetPhoto = (id: string, includeHidden?: boolean) => includeHidden
+  ? sql<PhotoDb>`SELECT * FROM photos WHERE id=${id} LIMIT 1`
+  // eslint-disable-next-line max-len
+  : sql<PhotoDb>`SELECT * FROM photos WHERE id=${id} AND hidden IS NOT TRUE LIMIT 1`;
 
 const sqlGetPhotosCount = async () => sql`
   SELECT COUNT(*) FROM photos
@@ -212,6 +211,17 @@ const sqlGetPhotosTagMeta = async (tag: string) => sql`
       : undefined,
   }));
 
+const sqlGetPhotosTagHiddenMeta = async () => sql`
+  SELECT COUNT(*), MIN(taken_at_naive) as start, MAX(taken_at_naive) as end
+  FROM photos
+  WHERE hidden IS TRUE
+  `.then(({ rows }) => ({
+    count: parseInt(rows[0].count, 10),
+    ...rows[0]?.start && rows[0]?.end
+      ? { dateRange: rows[0] as PhotoDateRange }
+      : undefined,
+  }));
+
 const sqlGetPhotosCameraMeta = async (camera: Camera) => sql`
   SELECT COUNT(*), MIN(taken_at_naive) as start, MAX(taken_at_naive) as end
   FROM photos
@@ -297,7 +307,7 @@ export type GetPhotosOptions = {
   simulation?: FilmSimulation
   takenBefore?: Date
   takenAfterInclusive?: Date
-  includeHidden?: boolean
+  hidden?: 'exclude' | 'include' | 'only'
 }
 
 const safelyQueryPhotos = async <T>(
@@ -359,7 +369,7 @@ export const getPhotos = async (options: GetPhotosOptions = {}) => {
     simulation,
     takenBefore,
     takenAfterInclusive,
-    includeHidden,
+    hidden = 'exclude',
   } = options;
 
   let sql = ['SELECT * FROM photos'];
@@ -368,8 +378,14 @@ export const getPhotos = async (options: GetPhotosOptions = {}) => {
 
   // WHERE
   let wheres = [] as string[];
-  if (!includeHidden) {
+
+  switch (hidden) {
+  case 'exclude':
     wheres.push('hidden IS NOT TRUE');
+    break;
+  case 'only':
+    wheres.push('hidden IS TRUE');
+    break;
   }
   if (takenBefore) {
     wheres.push(`taken_at > $${valueIndex++}`);
@@ -428,6 +444,7 @@ export const getPhotos = async (options: GetPhotosOptions = {}) => {
 export const getPhotosNearId = async (
   id: string,
   limit: number,
+  onlyHidden?: boolean,
 ) => {
   const orderBy = PRIORITY_ORDER_ENABLED
     ? 'ORDER BY priority_order ASC, taken_at DESC'
@@ -440,7 +457,7 @@ export const getPhotosNearId = async (
           SELECT *, row_number()
           OVER (${orderBy}) as row_number
           FROM photos
-          WHERE hidden IS NOT TRUE
+          WHERE hidden is ${onlyHidden ? 'TRUE' : 'NOT TRUE'}
         ),
         current AS (SELECT row_number FROM twi WHERE id = $1)
         SELECT twi.*
@@ -468,11 +485,15 @@ export const getPhotoIds = async ({ limit }: { limit?: number }) => {
     .then(({ rows }) => rows.map(({ id }) => id as string));
 };
 
-export const getPhoto = async (id: string): Promise<Photo | undefined> => {
+export const getPhoto = async (
+  id: string,
+  includeHidden?: boolean,
+): Promise<Photo | undefined> => {
   // Check for photo id forwarding
   // and convert short ids to uuids
   const photoId = translatePhotoId(id);
-  return safelyQueryPhotos(() => sqlGetPhoto(photoId), 'getPhoto')
+  return safelyQueryPhotos(() =>
+    sqlGetPhoto(photoId, includeHidden), 'sqlGetPhoto')
     .then(({ rows }) => rows.map(parsePhotoFromDb))
     .then(photos => photos.length > 0 ? photos[0] : undefined);
 };
@@ -497,10 +518,9 @@ export const getUniqueTags = () =>
 export const getUniqueTagsHidden = () =>
   safelyQueryPhotos(sqlGetUniqueTagsHidden, 'getUniqueTagsHidden');
 export const getPhotosTagMeta = (tag: string) =>
-  safelyQueryPhotos(
-    () => sqlGetPhotosTagMeta(tag),
-    'getPhotosTagMeta',
-  );
+  safelyQueryPhotos(() => sqlGetPhotosTagMeta(tag), 'getPhotosTagMeta');
+export const getPhotosTagHiddenMeta = () =>
+  safelyQueryPhotos(sqlGetPhotosTagHiddenMeta, 'sqlGetPhotosTagHiddenMeta');
 
 // CAMERAS
 export const getUniqueCameras = () =>

src/photo/form/index.ts

@@ -16,7 +16,7 @@ import {
 } from '@/vendors/fujifilm';
 import { FilmSimulation } from '@/simulation';
 import { GEO_PRIVACY_ENABLED } from '@/site/config';
-import { TAG_FAVS, doesTagsStringIncludeFavs } from '@/tag';
+import { TAG_FAVS, TAG_HIDDEN, doesStringContainReservedTags } from '@/tag';
 
 type VirtualFields = 'favorite';
 
@@ -76,8 +76,8 @@ const FORM_METADATA = (
   tags: {
     label: 'tags',
     tagOptions,
-    validate: tags => doesTagsStringIncludeFavs(tags)
-      ? `'${TAG_FAVS}' is a reserved tag`
+    validate: tags => doesStringContainReservedTags(tags)
+      ? `Reserved tags (${TAG_FAVS}, ${TAG_HIDDEN})`
       : undefined,
   },
   semanticDescription: {
@@ -141,10 +141,9 @@ export const isFormValid = (formData: Partial<PhotoFormData>) =>
   FORM_METADATA_ENTRIES().every(
     ([key, { required, validate, validateStringMaxLength }]) =>
       (!required || Boolean(formData[key])) &&
-      (validate?.(formData[key]) === undefined) &&
+      (!validate?.(formData[key])) &&
       // eslint-disable-next-line max-len
-      (!validateStringMaxLength || (formData[key]?.length ?? 0) <= validateStringMaxLength) &&
-      (key !== 'tags' || !doesTagsStringIncludeFavs(formData.tags ?? ''))
+      (!validateStringMaxLength || (formData[key]?.length ?? 0) <= validateStringMaxLength)
   );
 
 export const formHasTextContent = ({

src/photo/index.ts

@@ -201,7 +201,7 @@ export const deleteConfirmationTextForPhoto = (photo: Photo) =>
 export type PhotoDateRange = { start: string, end: string };
 
 export const descriptionForPhotoSet = (
-  photos:Photo[],
+  photos:Photo[] = [],
   descriptor?: string,
   dateBased?: boolean,
   explicitCount?: number,

src/site/paths.ts

@@ -3,6 +3,7 @@ import { BASE_URL } from './config';
 import { Camera } from '@/camera';
 import { FilmSimulation } from '@/simulation';
 import { parameterize } from '@/utility/string';
+import { TAG_HIDDEN } from '@/tag';
 
 // Core paths
 export const PATH_ROOT      = '/';
@@ -98,13 +99,15 @@ export const pathForPhoto = (
   camera?: Camera,
   simulation?: FilmSimulation,
 ) =>
-  tag
-    ? `${pathForTag(tag)}/${getPhotoId(photo)}`
-    : camera
-      ? `${pathForCamera(camera)}/${getPhotoId(photo)}`
-      : simulation
-        ? `${pathForFilmSimulation(simulation)}/${getPhotoId(photo)}`
-        : `${PREFIX_PHOTO}/${getPhotoId(photo)}`;
+  typeof photo !== 'string' && photo.hidden
+    ? `${pathForTag(TAG_HIDDEN)}/${getPhotoId(photo)}`
+    : tag
+      ? `${pathForTag(tag)}/${getPhotoId(photo)}`
+      : camera
+        ? `${pathForCamera(camera)}/${getPhotoId(photo)}`
+        : simulation
+          ? `${pathForFilmSimulation(simulation)}/${getPhotoId(photo)}`
+          : `${PREFIX_PHOTO}/${getPhotoId(photo)}`;
 
 export const pathForPhotoShare = (
   photo: PhotoOrPhotoId,
@@ -248,7 +251,8 @@ export const isPathAdminConfiguration = (pathname?: string) =>
   checkPathPrefix(pathname, PATH_ADMIN_CONFIGURATION);
 
 export const isPathProtected = (pathname?: string) =>
-  checkPathPrefix(pathname, PATH_ADMIN);
+  checkPathPrefix(pathname, PATH_ADMIN) ||
+  checkPathPrefix(pathname, pathForTag(TAG_HIDDEN));
 
 export const getPathComponents = (pathname = ''): {
   photoId?: string

src/tag/FavsTag.tsx

@@ -17,16 +17,15 @@ export default function FavsTag({
 } & EntityLinkExternalProps) {
   return (
     <EntityLink
-      label={
-        badged
-          ? <span className="inline-flex gap-1">
-            {TAG_FAVS}
-            <FaStar
-              size={10}
-              className="text-amber-500"
-            />
-          </span>
-          : TAG_FAVS}
+      label={badged
+        ? <span className="inline-flex gap-1">
+          {TAG_FAVS}
+          <FaStar
+            size={10}
+            className="text-amber-500"
+          />
+        </span>
+        : TAG_FAVS}
       href={pathForTag(TAG_FAVS)}
       icon={!badged &&
         <FaStar

src/tag/HiddenHeader.tsx

@@ -0,0 +1,23 @@
+import { Photo, photoQuantityText } from '@/photo';
+import PhotoSetHeader from '@/photo/PhotoSetHeader';
+import HiddenTag from './HiddenTag';
+
+export default function HiddenHeader({
+  photos,
+  selectedPhoto,
+  count,
+}: {
+  photos: Photo[]
+  selectedPhoto?: Photo
+  count: number
+}) {
+  return (
+    <PhotoSetHeader
+      key="HiddenHeader"
+      entity={<HiddenTag contrast="high" />}
+      entityDescription={photoQuantityText(count, false)}
+      photos={photos}
+      selectedPhoto={selectedPhoto}
+    />
+  );
+}

src/tag/HiddenTag.tsx

@@ -0,0 +1,34 @@
+import { TAG_HIDDEN } from '.';
+import { pathForTag } from '@/site/paths';
+import EntityLink, {
+  EntityLinkExternalProps,
+} from '@/components/primitives/EntityLink';
+import { AiOutlineEyeInvisible } from 'react-icons/ai';
+
+export default function HiddenTag({
+  type,
+  badged,
+  contrast,
+  prefetch,
+  countOnHover,
+}: {
+  countOnHover?: number
+} & EntityLinkExternalProps) {
+  return (
+    <EntityLink
+      label={badged
+        ? <span className="inline-flex gap-1">
+          {TAG_HIDDEN}
+          <AiOutlineEyeInvisible size={14} />
+        </span>
+        : TAG_HIDDEN}
+      href={pathForTag(TAG_HIDDEN)}
+      icon={!badged && <AiOutlineEyeInvisible size={16} />}
+      type={type}
+      hoverEntity={countOnHover}
+      badged={badged}
+      contrast={contrast}
+      prefetch={prefetch}
+    />
+  );
+}

src/tag/TagHeader.tsx

@@ -21,7 +21,7 @@ export default function TagHeader({
   return (
     <PhotoSetHeader
       entity={isTagFavs(tag) 
-        ? <FavsTag />
+        ? <FavsTag contrast="high" />
         : <PhotoTag tag={tag} contrast="high" />}
       entityVerb="Tagged"
       entityDescription={descriptionForTaggedPhotos(photos, undefined, count)}

src/tag/index.ts

@@ -11,7 +11,9 @@ import {
 } from '@/site/paths';
 import { capitalizeWords, convertStringToArray } from '@/utility/string';
 
-export const TAG_FAVS = 'favs';
+// Reserved/virtual tags
+export const TAG_FAVS   = 'favs';   // Reserved
+export const TAG_HIDDEN = 'hidden'; // Virtual 
 
 export type TagsWithMeta = {
   tag: string
@@ -21,12 +23,15 @@ export type TagsWithMeta = {
 export const formatTag = (tag?: string) =>
   capitalizeWords(tag?.replaceAll('-', ' '));
 
-export const doesTagsStringIncludeFavs = (tags?: string) =>
-  convertStringToArray(tags)?.some(tag => isTagFavs(tag));
+export const doesStringContainReservedTags = (tags?: string) =>
+  convertStringToArray(tags)?.some(tag => (
+    isTagFavs(tag) ||
+    tag.toLowerCase() === TAG_HIDDEN
+  ));
 
 export const titleForTag = (
   tag: string,
-  photos:Photo[],
+  photos:Photo[] = [],
   explicitCount?: number,
 ) => [
   formatTag(tag),
@@ -54,7 +59,7 @@ export const sortTagsObjectWithoutFavs = (tags: TagsWithMeta) =>
   sortTagsObject(tags, TAG_FAVS);
 
 export const descriptionForTaggedPhotos = (
-  photos: Photo[],
+  photos: Photo[] = [],
   dateBased?: boolean,
   explicitCount?: number,
   explicitDateRange?: PhotoDateRange,