feat: radix image upload

package.json

@@ -49,6 +49,7 @@
     "query-string": "^6.13.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-dropzone": "^14.3.5",
     "react-error-boundary": "^4.1.2",
     "react-map-gl": "^7.1.7",
     "react-radio-group": "^3.0.3",

src/components/CombinedFeaturePanel/CombinedFeaturePanel.tsx

@@ -1,84 +1,93 @@
-import { useHotkeys } from '@blueprintjs/core'
-import { uniqBy } from 'lodash'
-import React, { useMemo, useState } from 'react'
-import styled from 'styled-components'
-import { t } from 'ttag'
+import { useHotkeys } from "@blueprintjs/core";
+import { Box, Callout } from "@radix-ui/themes";
+import { uniqBy } from "lodash";
+import React, { useMemo, useState } from "react";
+import { t } from "ttag";
 import {
-  AnyFeature, getKey, isOSMFeature, isSearchResultFeature,
-} from '../../lib/model/geo/AnyFeature'
-import colors from '../../lib/util/colors'
-import FeaturesDebugJSON from './components/FeaturesDebugJSON'
-import PlaceOfInterestDetails from './type-specific/poi/PlaceOfInterestDetails'
-import ErrorBoundary from '../shared/ErrorBoundary'
-import OSMSidewalkDetails from './type-specific/surroundings/OSMSidewalkDetails'
-import OSMBuildingDetails from './type-specific/building/OSMBuildingDetails'
-import { Box, Callout } from '@radix-ui/themes'
+  type AnyFeature,
+  getKey,
+  isOSMFeature,
+  isSearchResultFeature,
+} from "../../lib/model/geo/AnyFeature";
+import ErrorBoundary from "../shared/ErrorBoundary";
+import FeaturesDebugJSON from "./components/FeaturesDebugJSON";
+import OSMBuildingDetails from "./type-specific/building/OSMBuildingDetails";
+import PlaceOfInterestDetails from "./type-specific/poi/PlaceOfInterestDetails";
+import OSMSidewalkDetails from "./type-specific/surroundings/OSMSidewalkDetails";
 
 type Props = {
   features: AnyFeature[];
-  focusImage?: string
-}
+  activeImageId?: string;
+  isUploadDialogOpen?: boolean;
+};
 
 function FeatureSection({ feature }: { feature: AnyFeature }) {
   if (!isOSMFeature(feature)) {
-    return <section>Feature type not supported</section>
+    return <section>Feature type not supported</section>;
   }
 
   if (feature.properties.building) {
-    return <OSMBuildingDetails feature={feature} />
+    return <OSMBuildingDetails feature={feature} />;
   }
 
   if (
-    feature.properties.highway === 'footway'
-    || feature.properties.highway === 'pedestrian'
+    feature.properties.highway === "footway" ||
+    feature.properties.highway === "pedestrian"
   ) {
-    return <OSMSidewalkDetails feature={feature} />
+    return <OSMSidewalkDetails feature={feature} />;
   }
 
   return (
     <section>
       <h2>Feature type not supported</h2>
     </section>
-  )
+  );
 }
 
-
 export function CombinedFeaturePanel(props: Props) {
-  const features = uniqBy(props.features, (feature) => (isSearchResultFeature(feature) ? feature.properties.osm_id : feature._id))
+  const features = uniqBy(props.features, (feature) =>
+    isSearchResultFeature(feature) ? feature.properties.osm_id : feature._id,
+  );
 
-  const [showDebugger, setShowDebugger] = useState(false)
-  const hotkeys = useMemo(() => [
-    {
-      combo: 'j',
-      global: true,
-      label: 'Show JSON Feature Debugger',
-      onKeyDown: () => setShowDebugger(!showDebugger),
-    },
-
-  ], [showDebugger])
-  const { handleKeyDown, handleKeyUp } = useHotkeys(hotkeys)
-  const surroundings = features?.length > 1 ? features.slice(1) : undefined
+  const [showDebugger, setShowDebugger] = useState(false);
+  const hotkeys = useMemo(
+    () => [
+      {
+        combo: "j",
+        global: true,
+        label: "Show JSON Feature Debugger",
+        onKeyDown: () => setShowDebugger(!showDebugger),
+      },
+    ],
+    [showDebugger],
+  );
+  const { handleKeyDown, handleKeyUp } = useHotkeys(hotkeys);
+  const surroundings = features?.length > 1 ? features.slice(1) : undefined;
 
   return (
     <React.StrictMode>
       <ErrorBoundary>
         <Box onKeyDown={handleKeyDown} onKeyUp={handleKeyUp}>
-          {features[0] && <PlaceOfInterestDetails feature={features[0]} focusImage={props.focusImage} />}
-          {surroundings?.map((feature) => <FeatureSection key={getKey(feature)} feature={feature} />)}
+          {features[0] && (
+            <PlaceOfInterestDetails
+              feature={features[0]}
+              activeImageId={props.activeImageId}
+              isUploadDialogOpen={props.isUploadDialogOpen}
+            />
+          )}
+          {surroundings?.map((feature) => (
+            <FeatureSection key={getKey(feature)} feature={feature} />
+          ))}
 
           {(!features || features.length === 0) && (
             <Callout.Root>
-              <Callout.Text>
-                {t`No features found.`}
-              </Callout.Text>
+              <Callout.Text>{t`No features found.`}</Callout.Text>
             </Callout.Root>
           )}
 
-          <p>
-            {showDebugger && <FeaturesDebugJSON features={features} /> }
-          </p>
+          <p>{showDebugger && <FeaturesDebugJSON features={features} />}</p>
         </Box>
       </ErrorBoundary>
     </React.StrictMode>
-  )
+  );
 }

src/components/CombinedFeaturePanel/components/FeatureGallery.tsx

@@ -1,35 +1,9 @@
-import { CameraIcon } from "@radix-ui/react-icons";
-import {
-  AspectRatio,
-  Box,
-  Button,
-  Callout,
-  Card,
-  Dialog,
-  Flex,
-  Grid,
-  Inset,
-  VisuallyHidden,
-} from "@radix-ui/themes";
-import { useRouter } from "next/router";
-import {
-  type FC,
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-/* eslint-disable jsx-a11y/alt-text */
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-/* eslint-disable @next/next/no-img-element */
+import { type FC, useMemo } from "react";
 import useSWR from "swr";
 import useAccessibilityCloudAPI from "~/lib/fetchers/ac/useAccessibilityCloudAPI";
 import type { AccessibilityCloudImage } from "~/lib/model/ac/Feature";
 import type { AnyFeature } from "~/lib/model/geo/AnyFeature";
 import { Gallery } from "./Gallery/Gallery";
-import { GalleryAddImageButton } from "./Gallery/GalleryAddImageButton";
 import { makeImageIds, makeImageLocation } from "./Gallery/util";
 
 const fetcher = (urls: string[]) => {
@@ -51,8 +25,8 @@ interface ImageResponse {
 
 export const FeatureGallery: FC<{
   feature: AnyFeature;
-  focusImage?: string;
-}> = ({ feature, focusImage }) => {
+  activeImageId?: string;
+}> = ({ feature, activeImageId }) => {
   const ids = makeImageIds(feature);
   const { baseUrl, appToken } = useAccessibilityCloudAPI({ cached: true });
   const { data } = useSWR(
@@ -65,8 +39,7 @@ export const FeatureGallery: FC<{
 
   return (
     <>
-      <Gallery images={images} activeImageId={focusImage} />
-      <GalleryAddImageButton />
+      <Gallery images={images} activeImageId={activeImageId} />
     </>
   );
 };