Finalize batch select core behavior

src/admin/select/AdminBatchEditPanelClient.tsx

@@ -31,7 +31,6 @@ export default function AdminBatchEditPanelClient({
     isSelectingPhotos,
     stopSelectingPhotos,
     selectedPhotoIds,
-    setSelectedPhotoIds,
     isPerformingSelectEdit,
     setIsPerformingSelectEdit,
   } = useSelectPhotosState();
@@ -42,12 +41,6 @@ export default function AdminBatchEditPanelClient({
   const [tagErrorMessage, setTagErrorMessage] = useState('');
   const isInTagMode = tags !== undefined;
 
-  const resetForm = () => {
-    setSelectedPhotoIds?.([]);
-    setTags(undefined);
-    setTagErrorMessage('');
-  };
-
   const photosText = photoQuantityText(
     selectedPhotoIds?.length ?? 0,
     appText,
@@ -99,7 +92,7 @@ export default function AdminBatchEditPanelClient({
           )
             .then(() => {
               toastSuccess(`${photosText} tagged`);
-              resetForm();
+              stopSelectingPhotos?.();
             })
             .finally(() => setIsPerformingSelectEdit?.(false));
         }}
@@ -119,7 +112,7 @@ export default function AdminBatchEditPanelClient({
         photoIds={selectedPhotoIds}
         disabled={isFormDisabled}
         onClick={() => setIsPerformingSelectEdit?.(true)}
-        onDelete={resetForm}
+        onDelete={stopSelectingPhotos}
         onFinish={() => setIsPerformingSelectEdit?.(false)}
       />
       <LoaderButton
@@ -134,7 +127,7 @@ export default function AdminBatchEditPanelClient({
           )
             .then(() => {
               toastSuccess(`${photosText} favorited`);
-              resetForm();
+              stopSelectingPhotos?.();
             })
             .finally(() => setIsPerformingSelectEdit?.(false));
         }}

src/admin/select/SelectPhotosProvider.tsx

@@ -6,6 +6,7 @@ import { PARAM_SELECT, PATH_GRID_INFERRED } from '@/app/path';
 import { usePathname } from 'next/navigation';
 import { useAppState } from '@/app/AppState';
 import useClientSearchParams from '@/utility/useClientSearchParams';
+import { pushPathWithEvent } from '@/utility/url';
 
 export const DATA_KEY_PHOTO_GRID = 'data-photo-grid';
 
@@ -21,7 +22,11 @@ export default function SelectPhotosProvider({
   const searchParamsSelect = useClientSearchParams(PARAM_SELECT);
 
   const [canCurrentPageSelectPhotos, setCanCurrentPageSelectPhotos] =
-    useState(true);
+    useState(false);
+  const [selectedPhotoIds, setSelectedPhotoIds] =
+    useState<string[]>([]);
+  const [isPerformingSelectEdit, setIsPerformingSelectEdit] =
+    useState(false);
 
   useEffect(() => {
     setCanCurrentPageSelectPhotos(document
@@ -33,32 +38,23 @@ export default function SelectPhotosProvider({
     searchParamsSelect === 'true'
   , [isUserSignedIn, searchParamsSelect]);
     
-  const startSelectingPhotos = useCallback(() => {
+  const startSelectingPhotos = useCallback(() =>
-    window.history.pushState(
+    pushPathWithEvent(canCurrentPageSelectPhotos
-      null,
+      ? `${pathname}?${PARAM_SELECT}=true`
-      '',
+      // Redirect to grid if current view does not support photo selection
-      canCurrentPageSelectPhotos
+      : `${PATH_GRID_INFERRED}?${PARAM_SELECT}=true`)
-        ? `${pathname}?${PARAM_SELECT}=true`
+  , [canCurrentPageSelectPhotos, pathname]);
-        : `${PATH_GRID_INFERRED}?batch=true`,
-    );
-    dispatchEvent(new Event('pushstate'));
-  }, [canCurrentPageSelectPhotos, pathname]);
   
-  const stopSelectingPhotos = useCallback(() => {
+  const stopSelectingPhotos = useCallback(() =>
-    window.history.pushState(null, '', pathname);
+    pushPathWithEvent(pathname)
-    dispatchEvent(new Event('pushstate'));
+  , [pathname]);
-  }, [pathname]);
 
   useEffect(() => {
-    if (!isSelectingPhotos) { setSelectedPhotoIds([]); }
+    if (!isSelectingPhotos) {
+      setSelectedPhotoIds([]);
+    }
   }, [isSelectingPhotos]);
 
-  const [selectedPhotoIds, setSelectedPhotoIds] =
-    useState<string[]>([]);
-
-  const [isPerformingSelectEdit, setIsPerformingSelectEdit] =
-    useState(false);
-
   return (
     <SelectPhotosContext.Provider value={{
       canCurrentPageSelectPhotos,

src/cmdk/CommandKClient.tsx

@@ -185,7 +185,6 @@ export default function CommandKClient({
     isSelectingPhotos,
     startSelectingPhotos,
     stopSelectingPhotos,
-    selectedPhotoIds,
   } = useSelectPhotosState();
 
   const {
@@ -646,9 +645,9 @@ export default function CommandKClient({
       });
     }
     adminSection.items.push({
-      label: selectedPhotoIds === undefined
+      label: isSelectingPhotos
-        ? appText.admin.batchEdit
+        ? appText.admin.batchExitEdit
-        : appText.admin.batchExitEdit,
+        : appText.admin.batchEdit,
       annotation: <IconLock narrow />,
       action: () => {
         if (!isSelectingPhotos) {

src/photo/PhotoGrid.tsx

@@ -88,7 +88,7 @@ export default function PhotoGrid({
               className={clsx(
                 'flex w-full h-full',
                 // Prevent photo navigation when selecting
-                selectedPhotoIds?.length !== undefined && 'pointer-events-none',
+                isSelectingPhotos && 'pointer-events-none',
               )}
               {...{
                 photo,

src/utility/url.ts

@@ -41,3 +41,9 @@ export const downloadFileFromBrowser = async (
   document.body.removeChild(link);
   window.URL.revokeObjectURL(downloadUrl);
 };
+
+// Necessary for useClientSearchParams to see window.location changes
+export const pushPathWithEvent = (pathname: string) => {
+  window.history.pushState(null, '', pathname);
+  dispatchEvent(new Event('pushstate'));
+};