Enhance UI components and navigation

client/src/components/ui/score-card.tsx

@@ -8,9 +8,9 @@ interface ScoreIndicatorProps {
 }
 
 export const DEFAULT_BG_CLASSES: Record<PROJECT_SCORE, string> = {
-  [PROJECT_SCORE.HIGH]: "bg-high",
-  [PROJECT_SCORE.MEDIUM]: "bg-medium",
-  [PROJECT_SCORE.LOW]: "bg-low",
+  [PROJECT_SCORE.HIGH]: "bg-ramps-green",
+  [PROJECT_SCORE.MEDIUM]: "bg-ramps-yellow",
+  [PROJECT_SCORE.LOW]: "bg-ramps-red",
 };
 
 export const ScoreIndicator = ({

client/src/components/ui/search.tsx

@@ -35,12 +35,12 @@ export default function Search({
 
   return (
     <div className={cn("flex items-center space-x-2", className)}>
-      <SearchIcon className="text-grey-900 h-6 w-6" />
       <div className="flex w-full">
         <div className="relative">
+          <SearchIcon className="text-grey-900 absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2" />
           <Input
             variant="ghost"
-            className="w-[325px] pl-3 pr-8"
+            className="w-[325px] pl-10 pr-8"
             placeholder={placeholder}
             onChange={(e) => {
               setValue(e.target.value);

client/src/components/ui/sidebar.tsx

@@ -37,6 +37,7 @@ type SidebarContext = {
   setOpenMobile: (open: boolean) => void;
   isMobile: boolean;
   toggleSidebar: () => void;
+  sidebarRef: React.RefObject<HTMLDivElement>;
 };
 
 const SidebarContext = React.createContext<SidebarContext | null>(null);
@@ -120,6 +121,9 @@ const SidebarProvider = React.forwardRef<
     // This makes it easier to style the sidebar with Tailwind classes.
     const state = open ? "expanded" : "collapsed";
 
+    const internalRef = React.useRef<HTMLDivElement>(null);
+    const sidebarRef = (ref as React.RefObject<HTMLDivElement>) || internalRef;
+
     const contextValue = React.useMemo<SidebarContext>(
       () => ({
         state,
@@ -129,6 +133,7 @@ const SidebarProvider = React.forwardRef<
         openMobile,
         setOpenMobile,
         toggleSidebar,
+        sidebarRef,
       }),
       [
         state,
@@ -138,13 +143,15 @@ const SidebarProvider = React.forwardRef<
         openMobile,
         setOpenMobile,
         toggleSidebar,
+        sidebarRef,
       ],
     );
 
     return (
       <SidebarContext.Provider value={contextValue}>
         <TooltipProvider delayDuration={0}>
           <div
+            ref={sidebarRef}
             style={
               {
                 "--sidebar-width": SIDEBAR_WIDTH,
@@ -156,7 +163,6 @@ const SidebarProvider = React.forwardRef<
               "group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar",
               className,
             )}
-            ref={ref}
             {...props}
           >
             {children}

client/src/containers/my-projects/columns.tsx

@@ -1,13 +1,19 @@
 import Link from "next/link";
 
-import { DotsHorizontalIcon, TrashIcon } from "@radix-ui/react-icons";
+import {
+  DotsHorizontalIcon,
+  ExclamationTriangleIcon,
+  TrashIcon,
+} from "@radix-ui/react-icons";
 import { ACTIVITY } from "@shared/entities/activity.enum";
 import { CustomProject as CustomProjectEntity } from "@shared/entities/custom-project.entity";
 import { Table as TableInstance, Row, ColumnDef } from "@tanstack/react-table";
 
 import { formatCurrency } from "@/lib/format";
 import { cn } from "@/lib/utils";
 
+import { useFeatureFlags } from "@/hooks/use-feature-flags";
+
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -24,25 +30,32 @@ type CustomColumn = ColumnDef<CustomProject, keyof CustomProject> & {
   className?: string;
 };
 
-const ActionsDropdown = () => (
-  <DropdownMenu>
-    <DropdownMenuTrigger asChild>
-      <Button variant="ghost" size="icon">
-        <DotsHorizontalIcon />
-      </Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent className="w-50" align="end">
-      {/* <DropdownMenuItem>
-        <ExclamationTriangleIcon className="mr-1 h-4 w-4" />
-        Update selection
-      </DropdownMenuItem> */}
-      <DropdownMenuItem>
-        <TrashIcon className="mr-1 h-6 w-6" />
-        Delete selection
-      </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-);
+const ActionsDropdown = () => {
+  const { "update-selection": updateSelection } = useFeatureFlags();
+  return (
+    <div className="flex w-full justify-end">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon">
+            <DotsHorizontalIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-50" align="end">
+          {updateSelection && (
+            <DropdownMenuItem>
+              <ExclamationTriangleIcon className="mr-1 h-4 w-4" />
+              Update selection
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuItem>
+            <TrashIcon className="mr-1 h-6 w-6" />
+            Delete selection
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
 
 export const columns: CustomColumn[] = [
   {

client/src/containers/my-projects/index.tsx

@@ -126,6 +126,7 @@ export default function MyProjectsView() {
     {
       select: (d) => d.body,
       queryKey: AllProjectsQueryKey,
+      placeholderData: keepPreviousData,
     },
   );
   const activities = useMemo(
@@ -219,14 +220,12 @@ export default function MyProjectsView() {
                                   : undefined
                               }
                             >
-                              <div>
-                                {flexRender(
-                                  header.column.columnDef.header,
-                                  header.getContext(),
-                                )}
-                              </div>
+                              {flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
                               {header.column.getCanSort() && (
-                                <div>
+                                <>
                                   {{
                                     asc: <ChevronUpIcon className="h-4 w-4" />,
                                     desc: (
@@ -235,7 +234,7 @@ export default function MyProjectsView() {
                                   }[header.column.getIsSorted() as string] ?? (
                                     <ChevronsUpDownIcon className="h-4 w-4" />
                                   )}
-                                </div>
+                                </>
                               )}
                             </div>
                           )}

client/src/containers/nav/index.tsx

@@ -9,6 +9,7 @@ import { ROLES } from "@shared/entities/users/roles.enum";
 import {
   ClipboardEditIcon,
   ClipboardListIcon,
+  FileQuestionIcon,
   LayoutDashboardIcon,
   ServerCogIcon,
   UserIcon,
@@ -17,6 +18,8 @@ import { useSession } from "next-auth/react";
 
 import { cn } from "@/lib/utils";
 
+import { useFeatureFlags } from "@/hooks/use-feature-flags";
+
 import {
   Sidebar,
   SidebarContent,
@@ -60,12 +63,12 @@ const navItems = {
     },
   ],
   footer: [
-    // {
-    //   title: "Methodology",
-    //   url: "/methodology",
-    //   icon: FileQuestionIcon,
-    //   match: (pathname: string) => pathname === "/methodology",
-    // },
+    {
+      title: "Methodology",
+      url: "/methodology",
+      icon: FileQuestionIcon,
+      match: (pathname: string) => pathname === "/methodology",
+    },
   ],
 };
 
@@ -74,7 +77,7 @@ export default function MainNav() {
   const { status, data } = useSession();
   const pathname = usePathname();
   const isAdmin = data?.user.role === ROLES.ADMIN;
-
+  const { "methodology-page": methodologyPage } = useFeatureFlags();
   const mainNavItems = useMemo(
     () =>
       navItems.main.filter((item) => {
@@ -88,6 +91,9 @@ export default function MainNav() {
       }),
     [isAdmin, status],
   );
+  const footerNavItems = useMemo(() => {
+    return navItems.footer.filter(() => methodologyPage);
+  }, [methodologyPage]);
 
   return (
     <Sidebar collapsible="icon" className="py-6">
@@ -127,7 +133,7 @@ export default function MainNav() {
       </SidebarContent>
       <SidebarFooter>
         <SidebarMenu>
-          {/* {navItems.footer.map((item) => (
+          {footerNavItems.map((item) => (
             <SidebarMenuItem key={item.title}>
               <SidebarMenuButton
                 asChild
@@ -142,7 +148,7 @@ export default function MainNav() {
                 </Link>
               </SidebarMenuButton>
             </SidebarMenuItem>
-          ))} */}
+          ))}
           <SidebarMenuItem>
             <SidebarMenuButton
               asChild

client/src/containers/overview/header/parameters/index.tsx

@@ -81,7 +81,6 @@ export const PROJECT_PARAMETERS: Parameter[] = [
 
 export default function ParametersProjects() {
   const [filters, setFilters] = useGlobalFilters();
-
   const handleParameters = async (
     v: string,
     parameter: keyof Omit<z.infer<typeof filtersSchema>, "keyword">,

client/src/containers/overview/map/index.tsx

@@ -1,4 +1,6 @@
-import { ComponentProps, useState } from "react";
+import { ComponentProps, useEffect, useState } from "react";
+
+import { useMap } from "react-map-gl";
 
 import { useSetAtom } from "jotai";
 import { LayersIcon } from "lucide-react";
@@ -21,6 +23,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { useSidebar } from "@/components/ui/sidebar";
 
 export default function ProjectsMap() {
   const [isLegendOpen, setIsLegendOpen] = useState(false);
@@ -31,9 +34,31 @@ export default function ProjectsMap() {
     }));
 
   const setPopup = useSetAtom(popupAtom);
+  const { state, sidebarRef } = useSidebar();
+  const { default: map } = useMap();
+
+  useEffect(() => {
+    if (state === "collapsed") {
+      const handleTransitionEnd = (e: TransitionEvent) => {
+        if (e.propertyName === "width") {
+          map?.resize();
+        }
+      };
+
+      const sidebarElement = sidebarRef.current;
+      sidebarElement?.addEventListener("transitionend", handleTransitionEnd);
+
+      return () => {
+        sidebarElement?.removeEventListener(
+          "transitionend",
+          handleTransitionEnd,
+        );
+      };
+    }
+  }, [state, map, sidebarRef]);
 
   return (
-    <div className="h-full overflow-hidden rounded-t-2xl">
+    <div className="h-full w-full overflow-hidden rounded-t-2xl">
       <Map
         minZoom={0}
         maxZoom={10}

client/src/containers/overview/project-details/index.tsx

@@ -143,7 +143,7 @@ const projectData = {
 
 export default function ProjectDetails() {
   const [projectDetails, setProjectDetails] = useAtom(projectDetailsAtom);
-  const featureFlags = useFeatureFlags();
+  const { "project-comparison": projectComparison } = useFeatureFlags();
 
   const handleOpenDetails = (open: boolean) =>
     setProjectDetails({ ...projectDetails, isOpen: open });
@@ -366,7 +366,7 @@ export default function ProjectDetails() {
                   <h3 className="text-md">Scorecard ratings</h3>
                 </Label>
               </div>
-              {featureFlags["project-comparison"] && (
+              {projectComparison && (
                 <div className="flex items-center gap-2">
                   <Label className="text-xs text-muted-foreground">
                     Compare with a different project
@@ -418,7 +418,7 @@ export default function ProjectDetails() {
                   <h3 className="text-md">Cost estimates</h3>
                 </Label>
               </div>
-              {featureFlags["project-comparison"] && (
+              {projectComparison && (
                 <div className="flex items-center gap-2">
                   <Label className="text-xs text-muted-foreground">
                     Compare with a different project

client/src/containers/overview/table/toolbar/index.tsx

@@ -218,15 +218,15 @@ export default function ToolbarProjectsTable() {
                           Each metric can go from a scale from low to high:
                         </p>
                         <div className="!mt-4 grid grid-cols-3 gap-2 text-center">
-                          <div className="height[fit-content] rounded-md bg-low p-2 text-sky-blue-950">
+                          <div className="h-fit rounded-md bg-ramps-red p-2 text-sky-blue-950">
                             <div className="font-medium">Low</div>
                             <div className="text-sm">Description of low</div>
                           </div>
-                          <div className="height[fit-content] rounded-md bg-medium p-2 text-sky-blue-950">
+                          <div className="h-fit rounded-md bg-ramps-yellow p-2 text-sky-blue-950">
                             <div className="font-medium">Medium</div>
                             <div className="text-sm">Description</div>
                           </div>
-                          <div className="height[fit-content] rounded-md bg-high p-2 text-sky-blue-950">
+                          <div className="h-fit rounded-md bg-ramps-green p-2 text-sky-blue-950">
                             <div className="font-medium">High</div>
                             <div className="text-sm">Description</div>
                           </div>

client/src/containers/overview/table/view/overview/index.tsx

@@ -196,7 +196,7 @@ export function OverviewTable() {
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
               <TableRow
-                className="cursor-pointer"
+                className="group cursor-pointer transition-colors hover:bg-big-stone-950"
                 key={row.id}
                 data-state={row.getIsSelected() && "selected"}
                 onClick={() => {
@@ -211,7 +211,16 @@ export function OverviewTable() {
                     key={cell.id}
                     className={cn({
                       "p-0": cell.column.id === "scoreCardRating",
+                      "group-hover:underline": cell.column.id === "projectName",
+                      "min-w-[200px] max-w-[200px] truncate":
+                        cell.column.id === "projectName",
+                      "px-4 py-2": cell.column.id !== "scoreCardRating",
                     })}
+                    title={
+                      typeof cell.getValue() === "string"
+                        ? (cell.getValue() as string)
+                        : undefined
+                    }
                   >
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </TableCell>