Refine batch edit interactions

src/admin/AdminAppMenu.tsx

@@ -5,8 +5,8 @@ import { GRID_HOMEPAGE_ENABLED } from '@/site/config';
 import { PATH_ADMIN_CONFIGURATION, PATH_GRID, PATH_ROOT } from '@/site/paths';
 import { useAppState } from '@/state/AppState';
 import { BiCog } from 'react-icons/bi';
-import { FaTimes } from 'react-icons/fa';
 import { ImCheckboxUnchecked } from 'react-icons/im';
+import { IoCloseSharp } from 'react-icons/io5';
 
 export default function AdminAppMenu() {
   const {
@@ -27,11 +27,11 @@ export default function AdminAppMenu() {
           ? 'Exit Select'
           : 'Select Multiple',
         icon: isSelecting
-          ? <FaTimes
-            className="translate-y-[1px]"
+          ? <IoCloseSharp
+            className="text-[18px] translate-y-[-0.5px]"
           />
           : <ImCheckboxUnchecked
-            className="text-[0.75rem] translate-y-[2px]"
+            className="text-[0.75rem]"
           />,
         href: GRID_HOMEPAGE_ENABLED ? PATH_ROOT : PATH_GRID,
         action: () => {

src/admin/AdminBatchEditPanel.tsx

@@ -26,20 +26,28 @@ export default function AdminBatchEditPanel() {
           '!bg-gray-100/90 dark:!bg-gray-900/70'
         )}
         cta={<div className="flex gap-2">
-          <LoaderButton>
-            Tag ...
-          </LoaderButton>
-          <DeleteButton />
+          {selectedPhotoIds.length > 0 &&
+            <>
+              <LoaderButton>
+                Tag ...
+              </LoaderButton>
+              <DeleteButton />
+            </>}
           <LoaderButton
             icon={<IoCloseSharp size={20} className="translate-y-[-1.5px]" />}
             onClick={() => setSelectedPhotoIds?.(undefined)}
           />
         </div>}
+        hideIcon
       >
-        {selectedPhotoIds.length}
-        {selectedPhotoIds.length === 1 ? ' photo' : ' photos'}
-        {' '}
-        selected
+        {selectedPhotoIds.length === 0
+          ? 'Select photos below'
+          : <>
+            {selectedPhotoIds.length}
+            {selectedPhotoIds.length === 1 ? ' photo' : ' photos'}
+            {' '}
+            selected
+          </>}
       </Note>} />
     : null;
 }

src/components/Note.tsx

@@ -11,10 +11,12 @@ export default function Note({
   icon,
   animate,
   cta,
+  hideIcon,
 }: {
   icon?: ReactNode
   animate?: boolean
   cta?: ReactNode
+  hideIcon?: boolean
 } & ComponentProps<typeof Container>) {
   return (
     <AnimateItems
@@ -28,15 +30,16 @@ export default function Note({
           color={color}
         >
           <div className="flex items-center gap-2.5 pb-[1px]">
-            <span className={clsx(
-              'w-5 flex justify-center shrink-0',
-              'opacity-90',
-            )}>
-              {icon ?? <IoInformationCircleOutline
-                size={19}
-                className="translate-x-[0.5px] translate-y-[0.5px]"
-              />}
-            </span>
+            {!hideIcon &&
+              <span className={clsx(
+                'w-5 flex justify-center shrink-0',
+                'opacity-90',
+              )}>
+                {icon ?? <IoInformationCircleOutline
+                  size={19}
+                  className="translate-x-[0.5px] translate-y-[0.5px]"
+                />}
+              </span>}
             <span className="text-sm grow">
               {children}
             </span>

src/components/primitives/LoaderButton.tsx

@@ -55,7 +55,7 @@ export default function LoaderButton(props: {
     >
       {(icon || isLoading) &&
         <span className={clsx(
-          'min-w-[1.25rem] h-4',
+          'min-w-[1.25rem] max-h-4 overflow-hidden',
           styleAs === 'button' ? 'translate-y-[-0.5px]' : 'translate-y-[0.5px]',
           'inline-flex justify-center shrink-0',
         )}>