From dba4e534fba79621db1d042789fb98d07ec7c902 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 8 Jan 2024 23:27:13 -0600
Subject: [PATCH] Fix admin tag editor icon alignment

---
 src/app/admin/tags/[tag]/edit/page.tsx | 12 ++++++++++--
 src/app/admin/tags/page.tsx            |  9 ++++++---
 src/tag/index.ts                       |  9 ++++++++-
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/app/admin/tags/[tag]/edit/page.tsx b/src/app/admin/tags/[tag]/edit/page.tsx
index c3b768bd..dc27e9b3 100644
--- a/src/app/admin/tags/[tag]/edit/page.tsx
+++ b/src/app/admin/tags/[tag]/edit/page.tsx
@@ -6,6 +6,8 @@ import { PATH_ADMIN, PATH_ADMIN_TAGS, pathForTag } from '@/site/paths';
 import PhotoTag from '@/tag/PhotoTag';
 import { photoLabelForCount } from '@/photo';
 import PhotoLightbox from '@/photo/PhotoLightbox';
+import FavsTag from '@/tag/FavsTag';
+import { isTagFavs } from '@/tag';
 
 const MAX_PHOTO_TO_SHOW = 6;
 
@@ -28,8 +30,14 @@ export default async function PhotoPageEdit({ params: { tag } }: Props) {
     <AdminChildPage
       backPath={PATH_ADMIN_TAGS}
       backLabel="Tags"
-      breadcrumb={<div className="flex item gap-2">
-        <PhotoTag {...{ tag }} />
+      breadcrumb={<div className="flex items-center gap-2">
+        {isTagFavs(tag)
+          ? <div className="[&>*>*>*>svg]:translate-y-[0.5px]">
+            <FavsTag />
+          </div>
+          : <div className="[&>*>*>*>svg]:translate-y-[1.5px]">
+            <PhotoTag {...{ tag }} />
+          </div>}
         <div className="text-dim uppercase">
           <span>{count}</span>
           <span className="hidden xs:inline-block">
diff --git a/src/app/admin/tags/page.tsx b/src/app/admin/tags/page.tsx
index 44ffb910..a3db7b47 100644
--- a/src/app/admin/tags/page.tsx
+++ b/src/app/admin/tags/page.tsx
@@ -7,10 +7,11 @@ import DeleteButton from '@/admin/DeleteButton';
 import { photoQuantityText } from '@/photo';
 import { getUniqueTagsHiddenCached } from '@/cache';
 import PhotoTag from '@/tag/PhotoTag';
-import { formatTag } from '@/tag';
+import { formatTag, isTagFavs, sortTagsObject } from '@/tag';
 import EditButton from '@/admin/EditButton';
 import { pathForAdminTagEdit } from '@/site/paths';
 import { clsx } from 'clsx/lite';
+import FavsTag from '@/tag/FavsTag';
 
 export default async function AdminTagsPage() {
   const tags = await getUniqueTagsHiddenCached();
@@ -21,10 +22,12 @@ export default async function AdminTagsPage() {
         <div className="space-y-6">
           <div className="space-y-4">
             <AdminGrid>
-              {tags.map(({ tag, count }) =>
+              {sortTagsObject(tags).map(({ tag, count }) =>
                 <Fragment key={tag}>
                   <div className="pr-2 -translate-y-0.5">
-                    <PhotoTag {...{ tag }} />
+                    {isTagFavs(tag)
+                      ? <FavsTag />
+                      : <PhotoTag {...{ tag }} />}
                   </div>
                   <div className="text-dim uppercase">
                     {photoQuantityText(count, false)}
diff --git a/src/tag/index.ts b/src/tag/index.ts
index a703182f..ceb71026 100644
--- a/src/tag/index.ts
+++ b/src/tag/index.ts
@@ -33,9 +33,16 @@ export const sortTags = (
   tags: string[],
   tagToHide?: string,
 ) => tags
-  .filter(t => t !== tagToHide)
+  .filter(tag => tag !== tagToHide)
   .sort((a, b) => isTagFavs(a) ? -1 : a.localeCompare(b));
 
+export const sortTagsObject = (
+  tags: Tags,
+  tagToHide?: string,
+) => tags
+  .filter(({ tag }) => tag!== tagToHide)
+  .sort(({ tag: a }, { tag: b }) => isTagFavs(a) ? -1 : a.localeCompare(b));
+
 export const descriptionForTaggedPhotos = (
   photos: Photo[],
   dateBased?: boolean,