Fix select photo ... navigation quirks

src/admin/AdminAppMenu.tsx

@@ -8,7 +8,6 @@ import {
   PATH_ADMIN_RECIPES,
   PATH_ADMIN_TAGS,
   PATH_ADMIN_UPLOADS,
-  PATH_GRID_INFERRED,
 } from '@/app/path';
 import { useAppState } from '@/app/AppState';
 import { IoArrowDown, IoArrowUp } from 'react-icons/io5';
@@ -54,7 +53,6 @@ export default function AdminAppMenu({
   } = useAppState();
 
   const {
-    canCurrentPageSelectPhotos,
     isSelectingPhotos,
     startSelectingPhotos,
     stopSelectingPhotos,
@@ -160,9 +158,6 @@ export default function AdminAppMenu({
             size={16}
             className="translate-x-[-0.5px] translate-y-[0.5px]"
           />,
-        ...!canCurrentPageSelectPhotos && {
-          href: `${PATH_GRID_INFERRED}?batch=true`,
-        },
         action: isSelectingPhotos
           ? stopSelectingPhotos
           : startSelectingPhotos,
@@ -184,7 +179,6 @@ export default function AdminAppMenu({
     return { items };
   }, [
     appText,
-    canCurrentPageSelectPhotos,
     isSelectingPhotos,
     startSelectingPhotos,
     stopSelectingPhotos,

src/admin/select/SelectPhotosProvider.tsx

@@ -3,10 +3,10 @@
 import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 import { SelectPhotosContext } from './SelectPhotosState';
 import { PARAM_SELECT, PATH_GRID_INFERRED } from '@/app/path';
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { useAppState } from '@/app/AppState';
 import useClientSearchParams from '@/utility/useClientSearchParams';
-import { pushPathWithEvent } from '@/utility/url';
+import { replacePathWithEvent } from '@/utility/url';
 import { isElementPartiallyInViewport } from '@/utility/dom';
 
 export const DATA_KEY_PHOTO_GRID = 'data-photo-grid';
@@ -16,6 +16,8 @@ export default function SelectPhotosProvider({
 }: {
   children: ReactNode
 }) {
+  const router = useRouter();
+
   const pathname = usePathname();
 
   const { isUserSignedIn } = useAppState();
@@ -44,14 +46,15 @@ export default function SelectPhotosProvider({
   , [isUserSignedIn, searchParamsSelect]);
     
   const startSelectingPhotos = useCallback(() =>
-    pushPathWithEvent(canCurrentPageSelectPhotos
-      ? `${pathname}?${PARAM_SELECT}=true`
+    canCurrentPageSelectPhotos
+      // Use replacePathWithEvent because only query params change
+      ? replacePathWithEvent(`${pathname}?${PARAM_SELECT}=true`)
       // Redirect to grid if current view does not support photo selection
-      : `${PATH_GRID_INFERRED}?${PARAM_SELECT}=true`)
-  , [canCurrentPageSelectPhotos, pathname]);
+      : router.push(`${PATH_GRID_INFERRED}?${PARAM_SELECT}=true`)
+  , [router, canCurrentPageSelectPhotos, pathname]);
   
   const stopSelectingPhotos = useCallback(() =>
-    pushPathWithEvent(pathname)
+    replacePathWithEvent(pathname)
   , [pathname]);
 
   useEffect(() => {

src/utility/url.ts

@@ -42,8 +42,9 @@ export const downloadFileFromBrowser = async (
   window.URL.revokeObjectURL(downloadUrl);
 };
 
-// Necessary for useClientSearchParams to see window.location changes
-export const pushPathWithEvent = (pathname: string) => {
+// Necessary for useClientSearchParams to see window.location changes,
+// particularly for paths that only change query params
+export const replacePathWithEvent = (pathname: string) => {
   window.history.pushState(null, '', pathname);
-  dispatchEvent(new Event('pushstate'));
+  dispatchEvent(new Event('replacestate'));
 };