From 1c3da972e088b90b5660a576b3cafc4aa209da83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1rbara=20Chaves?= <barbara.chaves@vizzuality.com>
Date: Wed, 27 Nov 2024 12:59:04 +0100
Subject: [PATCH 1/2] Add no results component

---
 client/src/components/ui/search-location.tsx  | 14 +++-
 client/src/containers/map/controls/index.tsx  |  6 +-
 client/src/containers/map/legends/index.tsx   | 16 ++--
 .../containers/map/search-location/index.tsx  | 74 ++++++++++++-------
 4 files changed, 74 insertions(+), 36 deletions(-)

diff --git a/client/src/components/ui/search-location.tsx b/client/src/components/ui/search-location.tsx
index da048d1..6d0ff9a 100644
--- a/client/src/components/ui/search-location.tsx
+++ b/client/src/components/ui/search-location.tsx
@@ -43,4 +43,16 @@ const SearchResultItem = <T,>({ option, onOptionClick, children }: SearchResultI
   );
 };
 
-export { SearchResultList, SearchResultItem };
+const SearchResultItemNotFound = ({ children }: PropsWithChildren) => (
+  <li
+    role="option"
+    aria-selected="false"
+    tabIndex={0}
+    className="flex gap-2 rounded px-2 py-2 text-sm opacity-70"
+  >
+    {children}
+    <span className="line-clamp-2">No results</span>
+  </li>
+);
+
+export { SearchResultList, SearchResultItem, SearchResultItemNotFound };
diff --git a/client/src/containers/map/controls/index.tsx b/client/src/containers/map/controls/index.tsx
index 6962a61..4b45862 100644
--- a/client/src/containers/map/controls/index.tsx
+++ b/client/src/containers/map/controls/index.tsx
@@ -1,13 +1,15 @@
 import MapZoomControl from "@/components/map/controls/zoom";
 import Legends from "../legends";
 import SearchLocation from "../search-location";
+import { useState } from "react";
 
 const MapControlsContainer = () => {
+  const [legendOpen, setLegendOpen] = useState(true);
   return (
     <div className="absolute bottom-6 right-5 space-y-1.5">
-      <SearchLocation />
+      <SearchLocation onOpenChange={(o: boolean) => o && setLegendOpen(false)} />
       <MapZoomControl />
-      <Legends />
+      <Legends open={legendOpen} onOpenChange={setLegendOpen} />
     </div>
   );
 };
diff --git a/client/src/containers/map/legends/index.tsx b/client/src/containers/map/legends/index.tsx
index edd5f08..7769d8c 100644
--- a/client/src/containers/map/legends/index.tsx
+++ b/client/src/containers/map/legends/index.tsx
@@ -4,7 +4,6 @@ import { useSyncDatasets } from "@/store/map";
 import { Layers3Icon } from "lucide-react";
 import LegendItem from "./item";
 import { Button } from "@/components/ui/button";
-import { useState } from "react";
 import {
   ScrollArea,
   ScrollAreaCorner,
@@ -13,10 +12,12 @@ import {
   Scrollbar,
 } from "@radix-ui/react-scroll-area";
 
-const Legends = () => {
+type LegendsProps = {
+  open: boolean;
+  onOpenChange: (o: boolean) => void;
+};
+const Legends = ({ open, onOpenChange }: LegendsProps) => {
   const [datasets] = useSyncDatasets();
-  const [open, setOpen] = useState(true);
-
   const legendItems = Array.from(datasets).reverse();
 
   return (
@@ -24,7 +25,7 @@ const Legends = () => {
       <Popover open={open}>
         <PopoverTrigger asChild>
           <Button
-            onClick={() => setOpen(!open)}
+            onClick={() => onOpenChange(!open)}
             variant="ghost"
             className="transition-color block h-min rounded-full border-2 border-background bg-background px-2 py-2 shadow-black/10 drop-shadow-md duration-300 hover:bg-orange-100 focus-visible:bg-global data-[state=open]:bg-global"
           >
@@ -32,11 +33,10 @@ const Legends = () => {
           </Button>
         </PopoverTrigger>
         <PopoverContent
-          align="start"
-          alignOffset={20}
+          align="end"
           sideOffset={20}
           side="left"
-          className="w-[348px] -translate-y-10 rounded-lg bg-background px-0 py-0 shadow-lg drop-shadow-2xl"
+          className="w-[348px] rounded-lg bg-background px-0 py-0 shadow-lg drop-shadow-2xl"
         >
           <ScrollArea type="scroll" className="relative overflow-hidden">
             <ScrollAreaViewport className="max-h-[70vh] w-full">
diff --git a/client/src/containers/map/search-location/index.tsx b/client/src/containers/map/search-location/index.tsx
index 185e7ef..225596c 100644
--- a/client/src/containers/map/search-location/index.tsx
+++ b/client/src/containers/map/search-location/index.tsx
@@ -2,8 +2,13 @@
 
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
-import { SearchResultItem, SearchResultList } from "@/components/ui/search-location";
+import {
+  SearchResultItem,
+  SearchResultItemNotFound,
+  SearchResultList,
+} from "@/components/ui/search-location";
 import { useOpenStreetMapsLocations } from "@/hooks/openstreetmaps";
+import { cn } from "@/lib/utils";
 import { PopoverClose } from "@radix-ui/react-popover";
 import { ChevronRightIcon, MapIcon, MapPinIcon, SearchIcon, XIcon } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
@@ -18,7 +23,10 @@ type LocationOption = {
 
 type StoryOption = Omit<LocationOption, "bbox">;
 
-const SearchLocation = () => {
+type SearchLocationProps = {
+  onOpenChange: (open: boolean) => void;
+};
+const SearchLocation = ({ onOpenChange }: SearchLocationProps) => {
   const [open, setOpen] = useState(true);
   const [locationSearch, setLocationSearch] = useState("");
 
@@ -78,9 +86,9 @@ const SearchLocation = () => {
           duration: 1000,
           padding: { top: 50, bottom: 50, left: 350, right: 50 },
         });
-
         setLocationSearch("");
         setOpen(false);
+        onOpenChange(false);
       }
     },
     [map],
@@ -93,6 +101,7 @@ const SearchLocation = () => {
   const handleOpenChange = useCallback((open: boolean) => {
     setLocationSearch("");
     setOpen(open);
+    onOpenChange(open);
   }, []);
 
   return (
@@ -108,11 +117,14 @@ const SearchLocation = () => {
           </Button>
         </PopoverTrigger>
         <PopoverContent
-          align="start"
-          alignOffset={20}
+          align={!debouncedSearch.length ? "center" : "start"}
+          // alignOffset={20}
           sideOffset={20}
           side="left"
-          className="relative z-50 w-[348px] -translate-y-10 overflow-hidden rounded-lg bg-background px-0 py-0 shadow-lg drop-shadow-2xl"
+          className={cn(
+            "relative z-50 w-[348px] overflow-hidden rounded-lg bg-background px-0 py-0 shadow-lg drop-shadow-2xl",
+            !!debouncedSearch.length && "mb-5",
+          )}
         >
           <div>
             <div className="relative flex items-center justify-between p-1">
@@ -122,7 +134,7 @@ const SearchLocation = () => {
                 type="text"
                 value={locationSearch}
                 placeholder="Search"
-                className="placeholder:text-popover-foreground/50 w-full border-2 border-background bg-background p-2 px-9 text-sm leading-none text-foreground placeholder:text-sm placeholder:font-light focus-visible:outline-global"
+                className="w-full border-2 border-background bg-background p-2 px-9 text-sm leading-none text-foreground placeholder:text-sm placeholder:font-light placeholder:text-popover-foreground/50 focus-visible:outline-global"
               />
               {locationSearch.length >= 1 && (
                 <Button
@@ -139,31 +151,43 @@ const SearchLocation = () => {
               </PopoverClose>
             </div>
 
-            {!!locationOptions.length && (
+            {!!debouncedSearch.length && (
               <SearchResultList title="Locations">
-                {locationOptions.map((option) => (
-                  <SearchResultItem
-                    key={option.value}
-                    option={option}
-                    onOptionClick={handleOptionClick}
-                  >
+                {!!locationOptions?.length ? (
+                  locationOptions.map((option) => (
+                    <SearchResultItem
+                      key={option.value}
+                      option={option}
+                      onOptionClick={handleOptionClick}
+                    >
+                      <MapPinIcon className="mt-0.5 h-4 w-4 shrink-0" />
+                    </SearchResultItem>
+                  ))
+                ) : (
+                  <SearchResultItemNotFound>
                     <MapPinIcon className="mt-0.5 h-4 w-4 shrink-0" />
-                  </SearchResultItem>
-                ))}
+                  </SearchResultItemNotFound>
+                )}
               </SearchResultList>
             )}
 
-            {!!storiesOptions?.length && (
+            {!!debouncedSearch?.length && (
               <SearchResultList title="Rangelands stories">
-                {storiesOptions.map((option) => (
-                  <SearchResultItem
-                    key={option.value}
-                    option={option}
-                    onOptionClick={handleStoryOptionClick}
-                  >
+                {storiesOptions?.length ? (
+                  storiesOptions.map((option) => (
+                    <SearchResultItem
+                      key={option.value}
+                      option={option}
+                      onOptionClick={handleStoryOptionClick}
+                    >
+                      <MapIcon className="mt-0.5 h-4 w-4 shrink-0" />
+                    </SearchResultItem>
+                  ))
+                ) : (
+                  <SearchResultItemNotFound>
                     <MapIcon className="mt-0.5 h-4 w-4 shrink-0" />
-                  </SearchResultItem>
-                ))}
+                  </SearchResultItemNotFound>
+                )}
               </SearchResultList>
             )}
           </div>

From 2c67140ea1dda266d2edaa7c540f9b60e9a34ca1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1rbara=20Chaves?= <barbara.chaves@vizzuality.com>
Date: Wed, 27 Nov 2024 16:56:43 +0100
Subject: [PATCH 2/2] Add translations to search locations box

---
 client/src/components/ui/search-location.tsx  | 26 +++++++++++--------
 .../containers/map/search-location/index.tsx  | 10 ++++---
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/client/src/components/ui/search-location.tsx b/client/src/components/ui/search-location.tsx
index 6d0ff9a..fc4ca70 100644
--- a/client/src/components/ui/search-location.tsx
+++ b/client/src/components/ui/search-location.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "@/i18n";
 import { PropsWithChildren } from "react";
 
 type SearchResultListProps = PropsWithChildren & {
@@ -43,16 +44,19 @@ const SearchResultItem = <T,>({ option, onOptionClick, children }: SearchResultI
   );
 };
 
-const SearchResultItemNotFound = ({ children }: PropsWithChildren) => (
-  <li
-    role="option"
-    aria-selected="false"
-    tabIndex={0}
-    className="flex gap-2 rounded px-2 py-2 text-sm opacity-70"
-  >
-    {children}
-    <span className="line-clamp-2">No results</span>
-  </li>
-);
+const SearchResultItemNotFound = ({ children }: PropsWithChildren) => {
+  const t = useTranslations();
+  return (
+    <li
+      role="option"
+      aria-selected="false"
+      tabIndex={0}
+      className="flex gap-2 rounded px-2 py-2 text-sm opacity-70"
+    >
+      {children}
+      <span className="line-clamp-2">{t("No results")}</span>
+    </li>
+  );
+};
 
 export { SearchResultList, SearchResultItem, SearchResultItemNotFound };
diff --git a/client/src/containers/map/search-location/index.tsx b/client/src/containers/map/search-location/index.tsx
index 225596c..b3965bd 100644
--- a/client/src/containers/map/search-location/index.tsx
+++ b/client/src/containers/map/search-location/index.tsx
@@ -8,6 +8,7 @@ import {
   SearchResultList,
 } from "@/components/ui/search-location";
 import { useOpenStreetMapsLocations } from "@/hooks/openstreetmaps";
+import { useTranslations } from "@/i18n";
 import { cn } from "@/lib/utils";
 import { PopoverClose } from "@radix-ui/react-popover";
 import { ChevronRightIcon, MapIcon, MapPinIcon, SearchIcon, XIcon } from "lucide-react";
@@ -27,6 +28,8 @@ type SearchLocationProps = {
   onOpenChange: (open: boolean) => void;
 };
 const SearchLocation = ({ onOpenChange }: SearchLocationProps) => {
+  const t = useTranslations();
+
   const [open, setOpen] = useState(true);
   const [locationSearch, setLocationSearch] = useState("");
 
@@ -118,7 +121,6 @@ const SearchLocation = ({ onOpenChange }: SearchLocationProps) => {
         </PopoverTrigger>
         <PopoverContent
           align={!debouncedSearch.length ? "center" : "start"}
-          // alignOffset={20}
           sideOffset={20}
           side="left"
           className={cn(
@@ -133,7 +135,7 @@ const SearchLocation = ({ onOpenChange }: SearchLocationProps) => {
                 onChange={handleSearchChange}
                 type="text"
                 value={locationSearch}
-                placeholder="Search"
+                placeholder={t("Search")}
                 className="w-full border-2 border-background bg-background p-2 px-9 text-sm leading-none text-foreground placeholder:text-sm placeholder:font-light placeholder:text-popover-foreground/50 focus-visible:outline-global"
               />
               {locationSearch.length >= 1 && (
@@ -152,7 +154,7 @@ const SearchLocation = ({ onOpenChange }: SearchLocationProps) => {
             </div>
 
             {!!debouncedSearch.length && (
-              <SearchResultList title="Locations">
+              <SearchResultList title={t("Locations")}>
                 {!!locationOptions?.length ? (
                   locationOptions.map((option) => (
                     <SearchResultItem
@@ -172,7 +174,7 @@ const SearchLocation = ({ onOpenChange }: SearchLocationProps) => {
             )}
 
             {!!debouncedSearch?.length && (
-              <SearchResultList title="Rangelands stories">
+              <SearchResultList title={t("Rangelands stories")}>
                 {storiesOptions?.length ? (
                   storiesOptions.map((option) => (
                     <SearchResultItem