address map controls review

Author: dnywh

src/features/map/components/GeocodingSearch.tsx

@@ -14,7 +14,10 @@ import { css, styled } from "next-yak";
 import type { GeocodingFeature, Position } from "@maptiler/client";
 
 import { theme } from "@/styles/theme.yak";
-import { useGeocodingSearch } from "../hooks/useGeocodingSearch";
+import {
+  MAP_GEOCODING_MIN_QUERY_LENGTH,
+  useGeocodingSearch,
+} from "../hooks/useGeocodingSearch";
 
 export type GeocodingSearchHandle = {
   blur: () => void;
@@ -259,7 +262,8 @@ const GeocodingSearch = forwardRef<GeocodingSearchHandle, GeocodingSearchProps>(
       countryCode,
       proximity,
     });
-    const hasSearchableQuery = query.trim().length >= 3;
+    const hasSearchableQuery =
+      query.trim().length >= MAP_GEOCODING_MIN_QUERY_LENGTH;
     const showResults =
       hasSearchableQuery && (variant === "palette" || isFocused);
     const showNoResults =

src/features/map/components/MapControls.tsx

@@ -80,24 +80,14 @@ const controlButtonStyles = css`
   }
 `;
 
-const Cluster = styled.div`
-  position: absolute;
-  right: 0.75rem;
-  top: 0.75rem;
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  pointer-events: auto;
-`;
-
-const ZoomCluster = styled.div`
+const ControlAnchor = styled.div<{ $gap?: boolean }>`
   position: absolute;
   right: 0.75rem;
   top: 0.75rem;
   z-index: 2;
   display: flex;
   flex-direction: column;
+  gap: ${({ $gap }) => ($gap ? "0.375rem" : 0)};
   pointer-events: auto;
 `;
 
@@ -139,14 +129,14 @@ export function MapZoomControls({
   zoomOutLabel,
 }: MapZoomControlsProps) {
   return (
-    <ZoomCluster>
+    <ControlAnchor>
       <ZoomControlGroup
         onZoomIn={onZoomIn}
         onZoomOut={onZoomOut}
         zoomInLabel={zoomInLabel}
         zoomOutLabel={zoomOutLabel}
       />
-    </ZoomCluster>
+    </ControlAnchor>
   );
 }
 
@@ -192,7 +182,7 @@ export default function MapControls({
   zoomOutLabel,
 }: MapControlClusterProps) {
   return (
-    <Cluster>
+    <ControlAnchor $gap>
       {onSearch && searchLabel ? (
         <ControlButton
           type="button"
@@ -223,6 +213,6 @@ export default function MapControls({
         zoomInLabel={zoomInLabel}
         zoomOutLabel={zoomOutLabel}
       />
-    </Cluster>
+    </ControlAnchor>
   );
 }

src/features/map/hooks/useGeocodingSearch.ts

@@ -16,6 +16,7 @@ export const MAP_GEOCODING_TYPES: GeocodingPlaceType[] = [
   "municipal_district",
   "municipality",
 ];
+export const MAP_GEOCODING_MIN_QUERY_LENGTH = 3;
 
 type GeocodingSearchStatus = "idle" | "loading" | "success" | "error";
 
@@ -34,7 +35,7 @@ export function useGeocodingSearch({
   countryCode,
   proximity,
   enabled = true,
-  minLength = 3,
+  minLength = MAP_GEOCODING_MIN_QUERY_LENGTH,
   debounceMs = 250,
   limit = 5,
 }: UseGeocodingSearchOptions) {