Wire up initial recipe paths

src/photo/PhotoGridSidebar.tsx

@@ -21,6 +21,8 @@ import {
   safelyParseFormattedHtml,
 } from '@/utility/html';
 import { clsx } from 'clsx/lite';
+import { convertTagToRecipe, isTagRecipe } from '@/recipe';
+import PhotoRecipe from '@/recipe/PhotoRecipe';
 
 export default function PhotoGridSidebar({
   tags,
@@ -51,35 +53,47 @@ export default function PhotoGridSidebar({
         className="text-icon translate-y-[1px]"
       />}
       items={tagsIncludingHidden.map(({ tag, count }) => {
-        switch (tag) {
+        if (isTagRecipe(tag)) {
-        case TAG_FAVS:
+          return <PhotoRecipe
-          return <FavsTag
-            key={TAG_FAVS}
-            countOnHover={count}
-            type="icon-last"
-            prefetch={false}
-            contrast="low"
-            badged
-          />;
-        case TAG_HIDDEN:
-          return <HiddenTag
-            key={TAG_HIDDEN}
-            countOnHover={count}
-            type="icon-last"
-            prefetch={false}
-            contrast="low"
-            badged
-          />;
-        default:
-          return <PhotoTag
             key={tag}
-            tag={tag}
+            recipe={convertTagToRecipe(tag)}
-            type="text-only"
             countOnHover={count}
+            type="icon-last"
             prefetch={false}
             contrast="low"
             badged
           />;
+        } else {
+          switch (tag) {
+          case TAG_FAVS:
+            return <FavsTag
+              key={TAG_FAVS}
+              countOnHover={count}
+              type="icon-last"
+              prefetch={false}
+              contrast="low"
+              badged
+            />;
+          case TAG_HIDDEN:
+            return <HiddenTag
+              key={TAG_HIDDEN}
+              countOnHover={count}
+              type="icon-last"
+              prefetch={false}
+              contrast="low"
+              badged
+            />;
+          default:
+            return <PhotoTag
+              key={tag}
+              tag={tag}
+              type="text-only"
+              countOnHover={count}
+              prefetch={false}
+              contrast="low"
+              badged
+            />;
+          }
         }
       })}
     />

src/recipe/PhotoRecipe.tsx

@@ -1,4 +1,4 @@
-import { pathForTag } from '@/app/paths';
+import { pathForRecipe } from '@/app/paths';
 import EntityLink, {
   EntityLinkExternalProps,
 } from '@/components/primitives/EntityLink';
@@ -25,8 +25,13 @@ export default function PhotoRecipe({
       <EntityLink
         title="Recipe"
         label={formatRecipe(recipe)}
-        href={pathForTag(recipe)}
+        href={pathForRecipe(recipe)}
-        icon={<TbChecklist size={16} />}
+        icon={<TbChecklist
+          size={16}
+          className={clsx(
+            badged && 'translate-x-[-1px] translate-y-[0.5px]',
+          )}
+        />}
         className={className}
         type={type}
         badged={badged}
@@ -34,15 +39,17 @@ export default function PhotoRecipe({
         prefetch={prefetch}
         hoverEntity={countOnHover}
       />
-      <button
+      {recipeOnClick &&
-        onClick={recipeOnClick}
+        <button
-        className={clsx(
+          onClick={recipeOnClick}
-          'px-1! py-0!',
+          className={clsx(
-          'text-[11px] text-medium tracking-wider',
+            'self-start',
-        )}
+            'px-1 py-0.5 mt-[1px]',
-      >
+            'text-[10px] text-medium tracking-wider',
-        OPEN
+          )}
-      </button>
+        >
+          RECIPE
+        </button>}
     </div>
   );
 }

src/recipe/RecipeModal.tsx

@@ -2,7 +2,7 @@
 
 import Modal from '@/components/Modal';
 import { useAppState } from '@/state/AppState';
-import PhotoRecipeOGTile from './PhotoRecipeOGTile';
+import PhotoRecipeGrid from './PhotoRecipeGrid';
 
 export default function ShareModals() {
   const {
@@ -15,7 +15,10 @@ export default function ShareModals() {
       onClose={() => setRecipeModalProps?.(undefined)}
       container={false}
     >
-      <PhotoRecipeOGTile {...recipeModalProps}/>
+      <PhotoRecipeGrid {...{
+        ...recipeModalProps,
+        onClose: () => setRecipeModalProps?.(undefined),
+      }}/>
     </Modal>;
   }
 }

src/recipe/index.ts

@@ -1,13 +1,8 @@
 import { absolutePathForRecipe, absolutePathForRecipeImage } from '@/app/paths';
-import { Photo, photoQuantityText } from '@/photo';
+import { descriptionForPhotoSet, Photo, photoQuantityText } from '@/photo';
 import { PhotoDateRange } from '@/photo';
-import {
+import { Tags } from '../tag';
-  descriptionForTaggedPhotos,
+import { parameterize } from '@/utility/string';
-  isTagFavs,
-  isTagHidden,
-  Tags,
-} from '../tag';
-import { convertStringToArray, parameterize } from '@/utility/string';
 import { capitalizeWords } from '@/utility/string';
 import { FujifilmRecipe } from '@/platforms/fujifilm/recipe';
 import { FilmSimulation } from '@/simulation';
@@ -21,8 +16,11 @@ export interface RecipeProps {
   exposure?: string   
 }
 
+export const isTagRecipe = (tag: string) =>
+  (new RegExp(`^${KEY_RECIPE}-?`).test(tag));
+
 export const convertTagsToRecipes = (tags: Tags) =>
-  tags.filter(({ tag }) => tag.startsWith(KEY_RECIPE))
+  tags.filter(({ tag }) => isTagRecipe(tag))
     .map(({ tag }) => convertTagToRecipe(tag));
 
 export const convertRecipeToTag = (recipe: string) =>
@@ -34,15 +32,6 @@ export const convertTagToRecipe = (tag: string) =>
 export const formatRecipe = (recipe?: string) =>
   capitalizeWords(recipe?.replaceAll('-', ' '));
 
-export const getValidationMessageForTags = (tags?: string) => {
-  const reservedTags = (convertStringToArray(tags) ?? [])
-    .filter(tag => isTagFavs(tag) || isTagHidden(tag))
-    .map(tag => tag.toLocaleUpperCase());
-  return reservedTags.length
-    ? `Reserved tags: ${reservedTags.join(', ').toLocaleLowerCase()}`
-    : undefined;
-};
-
 export const titleForRecipe = (
   recipe: string,
   photos:Photo[] = [],
@@ -52,6 +41,20 @@ export const titleForRecipe = (
   photoQuantityText(explicitCount ?? photos.length),
 ].join(' ');
 
+export const descriptionForRecipePhotos = (
+  photos: Photo[] = [],
+  dateBased?: boolean,
+  explicitCount?: number,
+  explicitDateRange?: PhotoDateRange,
+) =>
+  descriptionForPhotoSet(
+    photos,
+    undefined,
+    dateBased,
+    explicitCount,
+    explicitDateRange,
+  );
+
 export const generateMetaForRecipe = (
   recipe: string,
   photos: Photo[],
@@ -61,6 +64,6 @@ export const generateMetaForRecipe = (
   url: absolutePathForRecipe(recipe),
   title: titleForRecipe(recipe, photos, explicitCount),
   description:
-    descriptionForTaggedPhotos(photos, true, explicitCount, explicitDateRange),
+    descriptionForRecipePhotos(photos, true, explicitCount, explicitDateRange),
   images: absolutePathForRecipeImage(recipe),
 });

src/tag/PhotoTags.tsx

@@ -3,6 +3,8 @@ import { isTagFavs } from '.';
 import FavsTag from './FavsTag';
 import { EntityLinkExternalProps } from '@/components/primitives/EntityLink';
 import { Fragment } from 'react';
+import { convertTagToRecipe, isTagRecipe } from '@/recipe';
+import PhotoRecipe from '@/recipe/PhotoRecipe';
 
 export default function PhotoTags({
   tags,
@@ -15,9 +17,14 @@ export default function PhotoTags({
     <div className="flex flex-col">
       {tags.map(tag =>
         <Fragment key={tag}>
-          {isTagFavs(tag)
+          {isTagRecipe(tag)
-            ? <FavsTag {...{ contrast, prefetch }} />
+            ? <PhotoRecipe {...{
-            : <PhotoTag {...{ tag, contrast, prefetch }} />}
+              recipe: convertTagToRecipe(tag),
+              recipeOnClick: () => console.log('clicked'),
+            }} />
+            : isTagFavs(tag)
+              ? <FavsTag {...{ contrast, prefetch }} />
+              : <PhotoTag {...{ tag, contrast, prefetch }} />}
         </Fragment>)}
     </div>
   );