feat: radix image report

src/components/CombinedFeaturePanel/components/FeatureGallery.tsx

@@ -29,7 +29,7 @@ export const FeatureGallery: FC<{
 }> = ({ feature, activeImageId }) => {
   const ids = makeImageIds(feature);
   const { baseUrl, appToken } = useAccessibilityCloudAPI({ cached: true });
-  const { data } = useSWR(
+  const { data, mutate } = useSWR(
     baseUrl && appToken
       ? ids.map((x) => makeImageLocation(baseUrl, appToken, x.context, x.id))
       : null,
@@ -39,7 +39,11 @@ export const FeatureGallery: FC<{
 
   return (
     <>
-      <Gallery images={images} activeImageId={activeImageId} />
+      <Gallery
+        images={images}
+        activeImageId={activeImageId}
+        onReloadRequested={mutate}
+      />
     </>
   );
 };

src/components/CombinedFeaturePanel/components/Gallery/Gallery.tsx

@@ -9,7 +9,6 @@ import {
 } from "react";
 import { t } from "ttag";
 import type { AccessibilityCloudImage } from "~/lib/model/ac/Feature";
-import { useAppStateAwareRouter } from "~/lib/util/useAppStateAwareRouter";
 import { FeaturePanelContext } from "../../FeaturePanelContext";
 import { GalleryFullscreenItem } from "./GalleryFullscreenItem";
 import { GalleryGrid } from "./GalleryGrid";
@@ -24,7 +23,9 @@ type GalleryContextType = {
   goTo: (imageId: string) => void;
   close: () => void;
   getDetailPageUrl: (imageId: string) => string;
-  getReportUrl: (imageId: string) => string;
+  reload: () => void;
+  isReportPopoverOpen: boolean;
+  setIsReportPopoverOpen: (value: boolean) => void;
 };
 export const GalleryContext = createContext<GalleryContextType>({
   size: 0,
@@ -37,46 +38,49 @@ export const GalleryContext = createContext<GalleryContextType>({
   getDetailPageUrl(imageId) {
     return "";
   },
-  getReportUrl(imageId) {
-    return "";
-  },
+  reload() {},
+  isReportPopoverOpen: false,
+  setIsReportPopoverOpen(value) {},
 });
 
 export const Gallery: FC<{
   images: AccessibilityCloudImage[];
   activeImageId?: string;
-}> = ({ images, activeImageId }) => {
+  onReloadRequested?: () => void;
+}> = ({ images, activeImageId, onReloadRequested }) => {
   const { baseFeatureUrl } = useContext(FeaturePanelContext);
-  const router = useAppStateAwareRouter();
 
   const getImageIndex = (imageId?: string) => {
     if (!imageId) return -1;
     return images.findIndex((image) => image._id === imageId);
   };
 
-  const keysPressed = new Set<string>();
   const [activeIndex, setActiveIndex] = useState(-1);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isReportPopoverOpen, setIsReportPopoverOpen] = useState(false);
 
   const activeImage = images[activeIndex];
   const next = () => {
     setActiveIndex(activeIndex + 1 >= images.length ? 0 : activeIndex + 1);
+    setIsReportPopoverOpen(false);
   };
   const previous = () => {
     setActiveIndex(activeIndex - 1 < 0 ? images.length - 1 : activeIndex - 1);
+    setIsReportPopoverOpen(false);
   };
   const goTo = (imageId: string) => {
     setActiveIndex(getImageIndex(imageId));
     setIsDialogOpen(true);
+    setIsReportPopoverOpen(false);
   };
   const close = () => {
     setIsDialogOpen(false);
   };
   const getDetailPageUrl = (imageId: string) => {
     return `${baseFeatureUrl}/images/${imageId}`;
   };
-  const getReportUrl = (imageId: string) => {
-    return `${getDetailPageUrl(imageId)}/report`;
+  const reload = () => {
+    onReloadRequested?.();
   };
 
   const api: GalleryContextType = {
@@ -88,7 +92,9 @@ export const Gallery: FC<{
     close,
     previous,
     getDetailPageUrl,
-    getReportUrl,
+    reload,
+    isReportPopoverOpen,
+    setIsReportPopoverOpen,
   };
 
   // Open the dialog on initial page load when visiting the /images/[imageId] page
@@ -139,13 +145,16 @@ export const Gallery: FC<{
       ?.focus();
   };
 
+  const keysPressed = new Set<string>();
+
   const handleKeyDown: KeyboardEventHandler<HTMLElement> = (event) => {
     keysPressed.add(event.key);
+    if (keysPressed.size !== 1) {
+      return;
+    }
     switch (event.key) {
       case "r":
-        if (keysPressed.size === 1) {
-          router.push(getReportUrl(activeImage._id));
-        }
+        setIsReportPopoverOpen(true);
         break;
       case "ArrowLeft":
         previous();

src/components/CombinedFeaturePanel/components/Gallery/GalleryFullscreenItem.tsx

@@ -1,7 +1,6 @@
 import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
 import {
   Box,
-  Button,
   Flex,
   IconButton,
   Kbd,
@@ -12,7 +11,7 @@ import { CloseIcon } from "next/dist/client/components/react-dev-overlay/interna
 import { type FC, useContext, useMemo } from "react";
 import styled from "styled-components";
 import { t } from "ttag";
-import { AppStateLink } from "~/components/App/AppStateLink";
+import GalleryReportPopover from "~/components/CombinedFeaturePanel/components/Gallery/GalleryReportPopover";
 import useAccessibilityCloudAPI from "~/lib/fetchers/ac/useAccessibilityCloudAPI";
 import type { AccessibilityCloudImage } from "~/lib/model/ac/Feature";
 import { GalleryContext } from "./Gallery";
@@ -87,11 +86,6 @@ export const GalleryFullscreenItem: FC<{
     if (!image) return undefined;
     return makeSrcSetLocation(makeSrcSet(baseUrl, fullScreenSizes, image));
   }, [baseUrl, image]);
-  // biome-ignore lint/correctness/useExhaustiveDependencies:
-  const reportUrl = useMemo(() => {
-    if (!image) return undefined;
-    return api.getReportUrl(image._id);
-  }, [image]);
 
   return (
     <>
@@ -129,12 +123,8 @@ export const GalleryFullscreenItem: FC<{
           </Flex>
           <Box as="span" />
           <Flex as="span" align="center" gap="6">
-            <Text>{t`Image ${api.activeIndex + 1} of ${api.size}`}</Text>
-            <Button asChild color="gray" variant="surface">
-              {reportUrl && (
-                <AppStateLink href={reportUrl}>{t`Report Image`}</AppStateLink>
-              )}
-            </Button>
+            <Text>{t`Image ${api.activeIndex + 1} of ${api.size}`}</Text>{" "}
+            <GalleryReportPopover image={image} />
           </Flex>
         </Flex>