[FE](feat): scroll area [AF-104]

client/src/components/ui/scroll-area.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import * as React from 'react';
+
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '@/lib/classnames';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

client/src/containers/countries/item.tsx

@@ -40,10 +40,14 @@ export default function CountryItem({ data }: { data: CountryListResponseDataIte
 
         <h3>{data.attributes?.name}</h3>
       </div>
-      <p>
-        <span className="font-semibold">{projectsCountIndicator?.attributes?.value as number}</span>{' '}
-        {projectsCountIndicator?.attributes?.value === 1 ? 'project' : 'projects'}
-      </p>
+      {projectsCountIndicator?.attributes && (
+        <p>
+          <span className="font-semibold">
+            {projectsCountIndicator?.attributes?.value as number}
+          </span>{' '}
+          {projectsCountIndicator?.attributes?.value === 1 ? 'project' : 'projects'}
+        </p>
+      )}
     </Link>
   );
 }

client/src/containers/countries/list.tsx

@@ -10,6 +10,7 @@ import CountryItem from '@/containers/countries/item';
 
 import { Input } from '@/components/ui/input';
 import ContentLoader from '@/components/ui/loader';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 export default function CountriesList() {
   const [searchValue, setSearchValue] = useState<string | null>(null);
@@ -56,9 +57,13 @@ export default function CountriesList() {
 
         <div className="flex flex-col space-y-2">
           <p className="text-xs text-gray-500">Select a country</p>
-          {data?.data?.map((country) => (
-            <CountryItem key={country.id} data={country} />
-          ))}
+          <ScrollArea className="h-[70vh] 2xl:h-[75vh]">
+            <div className="flex flex-col space-y-1">
+              {data?.data?.map((country) => (
+                <CountryItem key={country.id} data={country} />
+              ))}
+            </div>
+          </ScrollArea>
         </div>
       </div>
     </ContentLoader>

client/src/containers/panel/index.tsx

@@ -60,7 +60,7 @@ export default function Panel({ children }: { children: React.ReactNode }) {
       <div
         ref={scrollRef}
         className={cn({
-          'no-scrollbar my-1 flex grow scroll-pt-28 flex-col overflow-y-auto': true,
+          'my-1 flex grow scroll-pt-28 flex-col': true,
           'opacity-100': open,
           'opacity-0': !open,
         })}

client/src/containers/projects/detail/panel.tsx

@@ -28,6 +28,7 @@ import Share from '@/containers/share';
 import { Button } from '@/components/ui/button';
 import { Drawer, DrawerClose, DrawerContent, DrawerTrigger } from '@/components/ui/drawer';
 import ContentLoader from '@/components/ui/loader';
+import { ScrollArea } from '@/components/ui/scroll-area';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 
 import ProjectDashboard from './dashboard';
@@ -140,7 +141,7 @@ export default function ProjectDetailPanel() {
   }
 
   return (
-    <div className="no-scrollbar h-full overflow-x-hidden rounded-3xl bg-neutral-50 p-6 pb-40">
+    <div className="h-full rounded-3xl bg-neutral-50 p-6 pb-40">
       <div className="absolute left-0 top-0 w-full">
         {data && indicators && (
           <div className="relative">
@@ -190,7 +191,7 @@ export default function ProjectDetailPanel() {
         isError={isError || indicatorIsFetched}
         loaderClassName="mt-52"
       >
-        <div className="mt-72 flex flex-col space-y-8">
+        <ScrollArea className="mt-64 flex flex-col space-y-8">
           {data?.description && (
             <p className="pt-2 text-sm text-gray-500">
               <DescriptionWithoutMarkdown description={data?.description} />
@@ -202,10 +203,6 @@ export default function ProjectDetailPanel() {
               <p className="text-xs font-medium uppercase text-gray-500">Status</p>
               <p className="text-sm text-yellow-900">{data?.status}</p>
             </div>
-            {/* <div className="flex justify-between border-b-2 border-dotted border-gray-400 py-4">
-            <p className="text-xs font-medium uppercase text-gray-500">Priority areas</p>
-            <p className="text-sm text-yellow-900">{}</p>
-          </div> */}
             <div className="flex justify-between border-b-2 border-dotted border-gray-400 py-4">
               <p className="text-xs font-medium uppercase text-gray-500">Location</p>
               <p className="text-sm text-yellow-900">
@@ -247,7 +244,7 @@ export default function ProjectDetailPanel() {
               </p>
             </div>
           </div>
-          <div className="flex flex-col space-y-2">
+          <div className="flex flex-col space-y-2 pt-6">
             <h4 className="text-xs font-medium uppercase text-yellow-900">Project Gallery</h4>
             <div className="flex space-x-1">
               <Image
@@ -290,7 +287,7 @@ export default function ProjectDetailPanel() {
               </a>
             </p>
           </div>
-        </div>
+        </ScrollArea>
         <Drawer>
           <DrawerTrigger asChild className="group">
             <Button

client/src/containers/projects/list.tsx

@@ -5,6 +5,8 @@ import { useCallback, useState, MouseEvent } from 'react';
 import { useSetAtom } from 'jotai';
 import { Search, X } from 'lucide-react';
 
+import { cn } from '@/lib/classnames';
+
 import { hoveredProjectListAtom } from '@/store';
 
 import { useGetProjects } from '@/types/generated/project';
@@ -16,6 +18,7 @@ import ProjectItem from '@/containers/projects/item';
 
 import { Input } from '@/components/ui/input';
 import ContentLoader from '@/components/ui/loader';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 import FiltersSelected from '../filters/selected';
 
@@ -137,6 +140,11 @@ export default function ProjectsList() {
     [setHoveredProjectList]
   );
 
+  const filtersLength = Object.entries(filtersSettings)
+    .flat()
+    .filter((el) => typeof el === 'object')
+    .flat().length;
+
   return (
     <ContentLoader
       data={data}
@@ -146,7 +154,7 @@ export default function ProjectsList() {
       isError={isError}
       loaderClassName="mt-28"
     >
-      <div className="no-scrollbar flex max-h-[75vh] flex-col space-y-2 overflow-y-auto">
+      <div className="flex flex-col space-y-2">
         <div className="mx-1 mt-1 flex justify-between space-x-2">
           <div className="relative w-full">
             <Input
@@ -171,18 +179,28 @@ export default function ProjectsList() {
           <Filters nrResults={data?.length as number} />
         </div>
         <FiltersSelected />
-        {data &&
-          data.map((project) => (
-            <button
-              type="button"
-              key={project?.id}
-              data-value={project?.attributes?.project_code}
-              onMouseEnter={handleHover}
-              onMouseLeave={() => setHoveredProjectList(null)}
-            >
-              <ProjectItem data={project} />
-            </button>
-          ))}
+        <ScrollArea
+          className={cn({
+            'h-[67vh] 2xl:h-[73vh]': true,
+            'h-[60vh] 2xl:h-[68vh]': filtersLength >= 1,
+            'h-[56vh] 2xl:h-[64vh]': filtersLength >= 2,
+          })}
+        >
+          <div className="flex flex-col space-y-2">
+            {data &&
+              data.map((project) => (
+                <button
+                  type="button"
+                  key={project?.id}
+                  data-value={project?.attributes?.project_code}
+                  onMouseEnter={handleHover}
+                  onMouseLeave={() => setHoveredProjectList(null)}
+                >
+                  <ProjectItem data={project} />
+                </button>
+              ))}
+          </div>
+        </ScrollArea>
       </div>
     </ContentLoader>
   );