From 235d73db3fa108eb7a7e6c3e9e263cf4188a5855 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 17 Jul 2024 23:52:05 -0500
Subject: [PATCH] Add basic tag validation

---
 src/admin/AdminBatchEditPanelClient.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/admin/AdminBatchEditPanelClient.tsx b/src/admin/AdminBatchEditPanelClient.tsx
index 5e0e2f8a..214f5813 100644
--- a/src/admin/AdminBatchEditPanelClient.tsx
+++ b/src/admin/AdminBatchEditPanelClient.tsx
@@ -9,7 +9,7 @@ import { IoCloseSharp } from 'react-icons/io5';
 import DeleteButton from './DeleteButton';
 import { useState } from 'react';
 import TagInput from '@/components/TagInput';
-import { convertTagsForForm, Tags } from '@/tag';
+import { convertTagsForForm, getValidationMessageForTags, Tags } from '@/tag';
 import { usePathname } from 'next/navigation';
 import { PATH_GRID_INFERRED } from '@/site/paths';
 
@@ -27,6 +27,7 @@ export default function AdminBatchEditPanelClient({
   } = useAppState();
 
   const [tags, setTags] = useState<string>();
+  const tagValidationMessage = getValidationMessageForTags(tags);
   const isTagging = tags !== undefined;
 
   const photosPlural = selectedPhotoIds?.length === 1 ? 'photo' : 'photos';
@@ -47,6 +48,7 @@ export default function AdminBatchEditPanelClient({
         className="min-h-[2.5rem]"
         // eslint-disable-next-line max-len
         confirmText={`Are you sure you want to apply tags to ${selectedPhotoIds?.length} ${photosPlural}? This action cannot be undone.`}
+        disabled={!tags || Boolean(tagValidationMessage)}
         primary
       >
         Apply Tags
@@ -95,6 +97,9 @@ export default function AdminBatchEditPanelClient({
             options={convertTagsForForm(existingTags)}
             onChange={setTags}
             placeholder={`Tag ${selectedPhotoIds?.length} ${photosPlural} ...`}
+            className={clsx(
+              Boolean(tagValidationMessage) && 'error',
+            )}
           />
           : <div className="text-base">
             {renderPhotoText()}