From a025f709a849f26907584ab73d6e36928cf3e2cf Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Thu, 3 Aug 2023 18:00:57 +0200
Subject: [PATCH 01/23] item list

---
 .../inventory-panel/features/list/index.tsx   |  16 +-
 .../inventory-panel/item-list/index.tsx       | 183 ++++++++++++++++++
 2 files changed, 194 insertions(+), 5 deletions(-)
 create mode 100644 app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx

diff --git a/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx
index 34218148fa..2436275b0c 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx
@@ -11,12 +11,13 @@ import { useAllFeatures } from 'hooks/features';
 
 import Checkbox from 'components/forms/checkbox';
 import Loading from 'components/loading';
+import ItemList from 'layout/project/sidebar/project/inventory-panel/item-list';
 import { Feature } from 'types/api/feature';
 import { cn } from 'utils/cn';
 
 import FeaturesBulkActionMenu from '../bulk-action-menu';
 
-import FeatureItemList from './item';
+// import FeatureItemList from './item';
 
 export const ProjectFeatureList = (): JSX.Element => {
   const dispatch = useAppDispatch();
@@ -178,14 +179,19 @@ export const ProjectFeatureList = (): JSX.Element => {
           >
             <ul className="max-h-[calc(100vh-400px)] divide-y divide-gray-400 overflow-y-auto py-3 pl-1 pr-2">
               {allFeaturesQuery.data?.map((feature) => (
-                <li key={feature.id} className="flex items-center justify-between py-3">
-                  <FeatureItemList
+                <li key={feature.id} className="flex items-center justify-between py-2 ">
+                  {/* <FeatureItemList
                     feature={feature}
                     projectId={pid}
                     onSelectFeature={handleSelectFeature}
                     isSelected={selectedFeaturesIds.includes(feature.id)}
-                    toggleSeeOnMap={() => toggleSeeOnMap(feature.id)}
-                    isShown={visibleFeatures.includes(feature.id)}
+                  /> */}
+                  <ItemList
+                    item={feature}
+                    projectId={pid}
+                    onSelectFeature={handleSelectFeature}
+                    isSelected={selectedFeaturesIds.includes(feature.id)}
+                    id="features"
                   />
                 </li>
               ))}
diff --git a/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx b/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx
new file mode 100644
index 0000000000..fde702fd1b
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx
@@ -0,0 +1,183 @@
+import { useCallback, useState, ChangeEvent, useRef, InputHTMLAttributes } from 'react';
+
+import { useQueryClient } from 'react-query';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { setSelectedFeatures as setVisibleFeatures } from 'store/slices/projects/[id]';
+
+import { MoreHorizontal } from 'lucide-react';
+
+import { useEditFeature } from 'hooks/features';
+import { useToasts } from 'hooks/toast';
+
+import Checkbox from 'components/forms/checkbox';
+import Icon from 'components/icon';
+import { Popover, PopoverContent, PopoverTrigger } from 'components/popover';
+import Tag from 'components/tag';
+import FeatureActions from 'layout/project/sidebar/project/inventory-panel/features/list/item/actions';
+import { Feature } from 'types/api/feature';
+import { Project } from 'types/api/project';
+import { cn } from 'utils/cn';
+
+import HIDE_SVG from 'svgs/ui/hide.svg?sprite';
+import SHOW_SVG from 'svgs/ui/show.svg?sprite';
+
+const ItemList = ({
+  id,
+  item,
+  projectId,
+  isSelected,
+  onSelectFeature,
+}: {
+  id: string;
+  item: Feature;
+  projectId: Project['id'];
+  isSelected: boolean;
+  onSelectFeature: (evt: ChangeEvent<HTMLInputElement>) => void;
+}): JSX.Element => {
+  const queryClient = useQueryClient();
+  const { addToast } = useToasts();
+  const dispatch = useDispatch();
+  const { selectedFeatures: visibleFeatures } = useSelector((state) => state['/projects/[id]']);
+  const [isEditable, setEditable] = useState(false);
+  const nameInputRef = useRef<HTMLInputElement>(null);
+  const { mutate: editFeature } = useEditFeature();
+
+  const handleRename = useCallback(() => {
+    setEditable(true);
+    nameInputRef.current?.focus();
+  }, [nameInputRef]);
+
+  const handleNameChanges = useCallback(
+    (evt: Parameters<InputHTMLAttributes<HTMLInputElement>['onKeyDown']>[0]) => {
+      if (evt.key === 'Enter') {
+        setEditable(false);
+        nameInputRef.current?.blur();
+
+        editFeature(
+          {
+            fid: item.id,
+            body: {
+              featureClassName: evt.currentTarget.value,
+            },
+          },
+          {
+            onSuccess: async () => {
+              await queryClient.invalidateQueries(['all-features', projectId]);
+
+              addToast(
+                'edit-project-features',
+                <>
+                  <h2 className="font-medium">Success</h2>
+                  <p className="text-sm">The feature was updated successfully.</p>
+                </>,
+                {
+                  level: 'success',
+                }
+              );
+            },
+            onError: () => {
+              addToast(
+                'edit-project-features',
+                <>
+                  <h2 className="font-medium">Error</h2>
+                  <p className="text-sm">Something went wrong editing the feature.</p>
+                </>,
+                {
+                  level: 'error',
+                }
+              );
+            },
+          }
+        );
+      }
+    },
+    [nameInputRef, projectId, item.id, editFeature, addToast, queryClient]
+  );
+
+  const toggleSeeOnMap = useCallback(
+    (featureId: Feature['id']) => {
+      const newSelectedFeatures = [...visibleFeatures];
+
+      if (!newSelectedFeatures.includes(featureId)) {
+        newSelectedFeatures.push(featureId);
+      } else {
+        const i = newSelectedFeatures.indexOf(featureId);
+        newSelectedFeatures.splice(i, 1);
+      }
+      dispatch(setVisibleFeatures(newSelectedFeatures));
+    },
+    [dispatch, visibleFeatures]
+  );
+
+  return (
+    <>
+      <div className="col-span-3 flex space-x-2">
+        <Checkbox
+          id={`item-${item.id}`}
+          theme="light"
+          className="block h-4 w-4 checked:bg-blue-400"
+          onChange={onSelectFeature}
+          checked={isSelected}
+          value={item.id}
+        />
+        <div className="flex flex-col space-y-2">
+          <input
+            ref={nameInputRef}
+            defaultValue={item.featureClassName}
+            readOnly={!isEditable}
+            className={cn({
+              'text-ellipsis bg-transparent p-0 text-sm font-medium leading-none': true,
+              'border-transparent': isEditable,
+            })}
+            onKeyDown={handleNameChanges}
+          />
+          {Boolean(item.scenarioUsageCount) && (
+            <span className="flex space-x-1 text-xs">
+              <span>Currently in use in</span>
+              <span className="block rounded-[4px]  bg-blue-400/25 px-1 text-xs font-semibold text-blue-400">
+                {item.scenarioUsageCount}
+              </span>
+              <span>scenarios.</span>
+            </span>
+          )}
+        </div>
+      </div>
+      <div className="col-span-2">
+        {item.tag && (
+          <Tag className="rounded-2xl bg-yellow-500/10 px-3 py-[2px] font-medium text-yellow-500">
+            <span className="text-xs">{item.tag}</span>
+          </Tag>
+        )}
+      </div>
+      <div className="col-span-1 flex space-x-3">
+        <button type="button" onClick={() => toggleSeeOnMap(item.id)}>
+          <Icon className="h-4 w-4" icon={true ? SHOW_SVG : HIDE_SVG} />
+        </button>
+        <Popover>
+          <PopoverTrigger asChild>
+            <button type="button" className="rounded-full bg-black">
+              <MoreHorizontal className="text-white" />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-auto rounded-2xl border-transparent p-0"
+            side="bottom"
+            sideOffset={5}
+            align="start"
+          >
+            {id === 'features' && (
+              <FeatureActions
+                feature={item}
+                onEditName={handleRename}
+                isDeletable={item.isCustom && !item.scenarioUsageCount}
+              />
+            )}
+          </PopoverContent>
+        </Popover>
+      </div>
+    </>
+  );
+};
+
+export default ItemList;

From 600895d9a66b64b8f21774573176dcea316d57d4 Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Thu, 3 Aug 2023 18:08:22 +0200
Subject: [PATCH 02/23] reove old specific component

---
 .../list/{item => }/actions/index.tsx         |   0
 .../inventory-panel/features/list/index.tsx   |   2 +-
 .../features/list/item/index.tsx              | 171 ------------------
 .../inventory-panel/item-list/index.tsx       |   4 +-
 4 files changed, 3 insertions(+), 174 deletions(-)
 rename app/layout/project/sidebar/project/inventory-panel/features/list/{item => }/actions/index.tsx (100%)
 delete mode 100644 app/layout/project/sidebar/project/inventory-panel/features/list/item/index.tsx

diff --git a/app/layout/project/sidebar/project/inventory-panel/features/list/item/actions/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/list/actions/index.tsx
similarity index 100%
rename from app/layout/project/sidebar/project/inventory-panel/features/list/item/actions/index.tsx
rename to app/layout/project/sidebar/project/inventory-panel/features/list/actions/index.tsx
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx
index 2436275b0c..2ff0c6b4ef 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx
@@ -191,7 +191,7 @@ export const ProjectFeatureList = (): JSX.Element => {
                     projectId={pid}
                     onSelectFeature={handleSelectFeature}
                     isSelected={selectedFeaturesIds.includes(feature.id)}
-                    id="features"
+                    id="feature"
                   />
                 </li>
               ))}
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/list/item/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/list/item/index.tsx
deleted file mode 100644
index a7ad4068fc..0000000000
--- a/app/layout/project/sidebar/project/inventory-panel/features/list/item/index.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import { useCallback, useState, ChangeEvent, useRef, InputHTMLAttributes } from 'react';
-
-import { useQueryClient } from 'react-query';
-
-import { MoreHorizontal } from 'lucide-react';
-
-import { useEditFeature } from 'hooks/features';
-import { useToasts } from 'hooks/toast';
-
-import Checkbox from 'components/forms/checkbox';
-import Icon from 'components/icon';
-import { Popover, PopoverContent, PopoverTrigger } from 'components/popover';
-import Tag from 'components/tag';
-import { Feature } from 'types/api/feature';
-import { Project } from 'types/api/project';
-import { cn } from 'utils/cn';
-
-import HIDE_SVG from 'svgs/ui/hide.svg?sprite';
-import SHOW_SVG from 'svgs/ui/show.svg?sprite';
-
-import FeatureActions from './actions';
-
-const FeatureItemList = ({
-  feature,
-  projectId,
-  isSelected,
-  onSelectFeature,
-  toggleSeeOnMap,
-  isShown,
-}: {
-  feature: Feature;
-  projectId: Project['id'];
-  isSelected: boolean;
-  onSelectFeature: (evt: ChangeEvent<HTMLInputElement>) => void;
-  toggleSeeOnMap: () => void;
-  isShown: boolean;
-}): JSX.Element => {
-  const queryClient = useQueryClient();
-  const { addToast } = useToasts();
-
-  const [isEditable, setEditable] = useState(false);
-  const nameInputRef = useRef<HTMLInputElement>(null);
-  const { mutate: editFeature } = useEditFeature();
-
-  const handleRename = useCallback(() => {
-    setEditable(true);
-    nameInputRef.current?.focus();
-  }, [nameInputRef]);
-
-  const handleNameChanges = useCallback(
-    (evt: Parameters<InputHTMLAttributes<HTMLInputElement>['onKeyDown']>[0]) => {
-      if (evt.key === 'Enter') {
-        setEditable(false);
-        nameInputRef.current?.blur();
-
-        editFeature(
-          {
-            fid: feature.id,
-            body: {
-              featureClassName: evt.currentTarget.value,
-            },
-          },
-          {
-            onSuccess: async () => {
-              await queryClient.invalidateQueries(['all-features', projectId]);
-
-              addToast(
-                'edit-project-features',
-                <>
-                  <h2 className="font-medium">Success</h2>
-                  <p className="text-sm">The feature was updated successfully.</p>
-                </>,
-                {
-                  level: 'success',
-                }
-              );
-            },
-            onError: () => {
-              addToast(
-                'edit-project-features',
-                <>
-                  <h2 className="font-medium">Error</h2>
-                  <p className="text-sm">Something went wrong editing the feature.</p>
-                </>,
-                {
-                  level: 'error',
-                }
-              );
-            },
-          }
-        );
-      }
-    },
-    [nameInputRef, projectId, feature.id, editFeature, addToast, queryClient]
-  );
-
-  return (
-    <>
-      <div className="col-span-3 flex space-x-2">
-        <Checkbox
-          id={`item-${feature.id}`}
-          theme="light"
-          className="block h-4 w-4 checked:bg-blue-400"
-          onChange={onSelectFeature}
-          checked={isSelected}
-          value={feature.id}
-        />
-        <div className="flex flex-col space-y-2">
-          <input
-            ref={nameInputRef}
-            defaultValue={feature.featureClassName}
-            readOnly={!isEditable}
-            className={cn({
-              'text-ellipsis bg-transparent p-0 text-sm font-medium leading-none': true,
-              'border-transparent': isEditable,
-            })}
-            onKeyDown={handleNameChanges}
-          />
-          {Boolean(feature.scenarioUsageCount) && (
-            <span className="flex space-x-1 text-xs">
-              <span>Currently in use in</span>
-              <span className="block rounded-[4px]  bg-blue-400/25 px-1 text-xs font-semibold text-blue-400">
-                {feature.scenarioUsageCount}
-              </span>
-              <span>scenarios.</span>
-            </span>
-          )}
-        </div>
-      </div>
-      <div className="col-span-2">
-        {feature.tag && (
-          <Tag className="rounded-2xl bg-yellow-500/10 px-3 py-[2px] font-medium text-yellow-500">
-            <span className="text-xs">{feature.tag}</span>
-          </Tag>
-        )}
-      </div>
-      <div className="col-span-1 flex space-x-3">
-        <button type="button" onClick={toggleSeeOnMap}>
-          <Icon
-            className={cn({
-              'h-4 w-4': true,
-              'text-blue-400': isShown,
-            })}
-            icon={isShown ? SHOW_SVG : HIDE_SVG}
-          />
-        </button>
-        <Popover>
-          <PopoverTrigger asChild>
-            <button type="button" className="rounded-full bg-black">
-              <MoreHorizontal className="text-white" />
-            </button>
-          </PopoverTrigger>
-          <PopoverContent
-            className="w-auto rounded-2xl border-transparent p-0"
-            side="bottom"
-            sideOffset={5}
-            align="start"
-          >
-            <FeatureActions
-              feature={feature}
-              onEditName={handleRename}
-              isDeletable={feature.isCustom && !feature.scenarioUsageCount}
-            />
-          </PopoverContent>
-        </Popover>
-      </div>
-    </>
-  );
-};
-
-export default FeatureItemList;
diff --git a/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx b/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx
index fde702fd1b..78cf2eb176 100644
--- a/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx
@@ -14,7 +14,7 @@ import Checkbox from 'components/forms/checkbox';
 import Icon from 'components/icon';
 import { Popover, PopoverContent, PopoverTrigger } from 'components/popover';
 import Tag from 'components/tag';
-import FeatureActions from 'layout/project/sidebar/project/inventory-panel/features/list/item/actions';
+import FeatureActions from 'layout/project/sidebar/project/inventory-panel/features/list/actions';
 import { Feature } from 'types/api/feature';
 import { Project } from 'types/api/project';
 import { cn } from 'utils/cn';
@@ -166,7 +166,7 @@ const ItemList = ({
             sideOffset={5}
             align="start"
           >
-            {id === 'features' && (
+            {id === 'feature' && (
               <FeatureActions
                 feature={item}
                 onEditName={handleRename}

From aa5305f7686da3c56649b1361f50d71b8437e5f5 Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Thu, 3 Aug 2023 18:29:16 +0200
Subject: [PATCH 03/23] default value and types depends of panel section

---
 .../inventory-panel/features/list/index.tsx   |  4 +--
 .../inventory-panel/item-list/index.tsx       | 29 ++++++++++++-------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx
index 2ff0c6b4ef..5dc81deff7 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState, ChangeEvent, useEffect } from 'react';
+import { useCallback, useState, ChangeEvent, useEffect, useMemo } from 'react';
 
 import { useRouter } from 'next/router';
 
@@ -189,7 +189,7 @@ export const ProjectFeatureList = (): JSX.Element => {
                   <ItemList
                     item={feature}
                     projectId={pid}
-                    onSelectFeature={handleSelectFeature}
+                    onSelect={handleSelectFeature}
                     isSelected={selectedFeaturesIds.includes(feature.id)}
                     id="feature"
                   />
diff --git a/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx b/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx
index 78cf2eb176..65e76be3e4 100644
--- a/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx
@@ -1,8 +1,8 @@
-import { useCallback, useState, ChangeEvent, useRef, InputHTMLAttributes } from 'react';
+import { useCallback, useState, ChangeEvent, useRef, InputHTMLAttributes, useMemo } from 'react';
 
 import { useQueryClient } from 'react-query';
-import { useDispatch, useSelector } from 'react-redux';
 
+import { useAppDispatch, useAppSelector } from 'store/hooks';
 import { setSelectedFeatures as setVisibleFeatures } from 'store/slices/projects/[id]';
 
 import { MoreHorizontal } from 'lucide-react';
@@ -27,18 +27,19 @@ const ItemList = ({
   item,
   projectId,
   isSelected,
-  onSelectFeature,
+  onSelect,
 }: {
   id: string;
+  // !TODO: Add ProtectedArea | Feature | CostSurface types
   item: Feature;
   projectId: Project['id'];
   isSelected: boolean;
-  onSelectFeature: (evt: ChangeEvent<HTMLInputElement>) => void;
+  onSelect: (evt: ChangeEvent<HTMLInputElement>) => void;
 }): JSX.Element => {
   const queryClient = useQueryClient();
   const { addToast } = useToasts();
-  const dispatch = useDispatch();
-  const { selectedFeatures: visibleFeatures } = useSelector((state) => state['/projects/[id]']);
+  const dispatch = useAppDispatch();
+  const { selectedFeatures } = useAppSelector((state) => state['/projects/[id]']);
   const [isEditable, setEditable] = useState(false);
   const nameInputRef = useRef<HTMLInputElement>(null);
   const { mutate: editFeature } = useEditFeature();
@@ -97,7 +98,7 @@ const ItemList = ({
 
   const toggleSeeOnMap = useCallback(
     (featureId: Feature['id']) => {
-      const newSelectedFeatures = [...visibleFeatures];
+      const newSelectedFeatures = [...selectedFeatures];
 
       if (!newSelectedFeatures.includes(featureId)) {
         newSelectedFeatures.push(featureId);
@@ -107,9 +108,13 @@ const ItemList = ({
       }
       dispatch(setVisibleFeatures(newSelectedFeatures));
     },
-    [dispatch, visibleFeatures]
+    [dispatch, selectedFeatures]
   );
 
+  const defaultValue = useMemo(() => {
+    if (id === 'feature') return item.featureClassName;
+  }, [id, item]);
+
   return (
     <>
       <div className="col-span-3 flex space-x-2">
@@ -117,14 +122,14 @@ const ItemList = ({
           id={`item-${item.id}`}
           theme="light"
           className="block h-4 w-4 checked:bg-blue-400"
-          onChange={onSelectFeature}
+          onChange={onSelect}
           checked={isSelected}
           value={item.id}
         />
         <div className="flex flex-col space-y-2">
           <input
             ref={nameInputRef}
-            defaultValue={item.featureClassName}
+            defaultValue={defaultValue}
             readOnly={!isEditable}
             className={cn({
               'text-ellipsis bg-transparent p-0 text-sm font-medium leading-none': true,
@@ -143,13 +148,15 @@ const ItemList = ({
           )}
         </div>
       </div>
+
       <div className="col-span-2">
-        {item.tag && (
+        {id === 'feature' && item.tag && (
           <Tag className="rounded-2xl bg-yellow-500/10 px-3 py-[2px] font-medium text-yellow-500">
             <span className="text-xs">{item.tag}</span>
           </Tag>
         )}
       </div>
+
       <div className="col-span-1 flex space-x-3">
         <button type="button" onClick={() => toggleSeeOnMap(item.id)}>
           <Icon className="h-4 w-4" icon={true ? SHOW_SVG : HIDE_SVG} />

From ee51ef608ed0e628413b87befac9b49b11143542 Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Thu, 3 Aug 2023 18:50:52 +0200
Subject: [PATCH 04/23] add toggle see on map

---
 .../inventory-panel/features/list/index.tsx   | 10 ++++-----
 .../inventory-panel/item-list/index.tsx       | 22 ++++---------------
 2 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx
index 5dc81deff7..78b036a907 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx
@@ -73,10 +73,13 @@ export const ProjectFeatureList = (): JSX.Element => {
     [filters.sort]
   );
 
+  useEffect(() => {
+    setSelectedFeaturesIds([]);
+  }, [search]);
+
   const toggleSeeOnMap = useCallback(
     (featureId: Feature['id']) => {
       const newSelectedFeatures = [...visibleFeatures];
-
       if (!newSelectedFeatures.includes(featureId)) {
         newSelectedFeatures.push(featureId);
       } else {
@@ -88,10 +91,6 @@ export const ProjectFeatureList = (): JSX.Element => {
     [dispatch, visibleFeatures]
   );
 
-  useEffect(() => {
-    setSelectedFeaturesIds([]);
-  }, [search]);
-
   return (
     <div className="space-y-4">
       <div className="grid grid-cols-2 gap-8 py-2 pl-1">
@@ -191,6 +190,7 @@ export const ProjectFeatureList = (): JSX.Element => {
                     projectId={pid}
                     onSelect={handleSelectFeature}
                     isSelected={selectedFeaturesIds.includes(feature.id)}
+                    toggleSeeOnMap={() => toggleSeeOnMap(feature.id)}
                     id="feature"
                   />
                 </li>
diff --git a/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx b/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx
index 65e76be3e4..9b15e32ac2 100644
--- a/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx
@@ -28,6 +28,7 @@ const ItemList = ({
   projectId,
   isSelected,
   onSelect,
+  toggleSeeOnMap,
 }: {
   id: string;
   // !TODO: Add ProtectedArea | Feature | CostSurface types
@@ -35,11 +36,11 @@ const ItemList = ({
   projectId: Project['id'];
   isSelected: boolean;
   onSelect: (evt: ChangeEvent<HTMLInputElement>) => void;
+  toggleSeeOnMap: () => void;
 }): JSX.Element => {
   const queryClient = useQueryClient();
   const { addToast } = useToasts();
-  const dispatch = useAppDispatch();
-  const { selectedFeatures } = useAppSelector((state) => state['/projects/[id]']);
+
   const [isEditable, setEditable] = useState(false);
   const nameInputRef = useRef<HTMLInputElement>(null);
   const { mutate: editFeature } = useEditFeature();
@@ -96,21 +97,6 @@ const ItemList = ({
     [nameInputRef, projectId, item.id, editFeature, addToast, queryClient]
   );
 
-  const toggleSeeOnMap = useCallback(
-    (featureId: Feature['id']) => {
-      const newSelectedFeatures = [...selectedFeatures];
-
-      if (!newSelectedFeatures.includes(featureId)) {
-        newSelectedFeatures.push(featureId);
-      } else {
-        const i = newSelectedFeatures.indexOf(featureId);
-        newSelectedFeatures.splice(i, 1);
-      }
-      dispatch(setVisibleFeatures(newSelectedFeatures));
-    },
-    [dispatch, selectedFeatures]
-  );
-
   const defaultValue = useMemo(() => {
     if (id === 'feature') return item.featureClassName;
   }, [id, item]);
@@ -158,7 +144,7 @@ const ItemList = ({
       </div>
 
       <div className="col-span-1 flex space-x-3">
-        <button type="button" onClick={() => toggleSeeOnMap(item.id)}>
+        <button type="button" onClick={() => toggleSeeOnMap()}>
           <Icon className="h-4 w-4" icon={true ? SHOW_SVG : HIDE_SVG} />
         </button>
         <Popover>

From cf77810a9bc3f43586fd11459bf9161dd226bf67 Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Fri, 4 Aug 2023 13:20:03 +0200
Subject: [PATCH 05/23] edit item by id

---
 .../inventory-panel/item-list/index.tsx       | 77 +++++++++----------
 1 file changed, 38 insertions(+), 39 deletions(-)

diff --git a/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx b/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx
index 9b15e32ac2..340480b4c0 100644
--- a/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx
@@ -2,9 +2,6 @@ import { useCallback, useState, ChangeEvent, useRef, InputHTMLAttributes, useMem
 
 import { useQueryClient } from 'react-query';
 
-import { useAppDispatch, useAppSelector } from 'store/hooks';
-import { setSelectedFeatures as setVisibleFeatures } from 'store/slices/projects/[id]';
-
 import { MoreHorizontal } from 'lucide-react';
 
 import { useEditFeature } from 'hooks/features';
@@ -56,45 +53,47 @@ const ItemList = ({
         setEditable(false);
         nameInputRef.current?.blur();
 
-        editFeature(
-          {
-            fid: item.id,
-            body: {
-              featureClassName: evt.currentTarget.value,
-            },
-          },
-          {
-            onSuccess: async () => {
-              await queryClient.invalidateQueries(['all-features', projectId]);
-
-              addToast(
-                'edit-project-features',
-                <>
-                  <h2 className="font-medium">Success</h2>
-                  <p className="text-sm">The feature was updated successfully.</p>
-                </>,
-                {
-                  level: 'success',
-                }
-              );
-            },
-            onError: () => {
-              addToast(
-                'edit-project-features',
-                <>
-                  <h2 className="font-medium">Error</h2>
-                  <p className="text-sm">Something went wrong editing the feature.</p>
-                </>,
-                {
-                  level: 'error',
-                }
-              );
+        if (id === 'feature') {
+          editFeature(
+            {
+              fid: item.id,
+              body: {
+                featureClassName: evt.currentTarget.value,
+              },
             },
-          }
-        );
+            {
+              onSuccess: async () => {
+                await queryClient.invalidateQueries(['all-features', projectId]);
+
+                addToast(
+                  'edit-project-features',
+                  <>
+                    <h2 className="font-medium">Success</h2>
+                    <p className="text-sm">The feature was updated successfully.</p>
+                  </>,
+                  {
+                    level: 'success',
+                  }
+                );
+              },
+              onError: () => {
+                addToast(
+                  'edit-project-features',
+                  <>
+                    <h2 className="font-medium">Error</h2>
+                    <p className="text-sm">Something went wrong editing the feature.</p>
+                  </>,
+                  {
+                    level: 'error',
+                  }
+                );
+              },
+            }
+          );
+        }
       }
     },
-    [nameInputRef, projectId, item.id, editFeature, addToast, queryClient]
+    [nameInputRef, projectId, item.id, editFeature, addToast, queryClient, id]
   );
 
   const defaultValue = useMemo(() => {

From c3ae401d9898a98fbb4499c6a63c89e0d70cc5d5 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Tue, 22 Aug 2023 08:02:37 +0100
Subject: [PATCH 06/23] Add inventory panel table

---
 .../inventory-table/header-item/index.tsx     |  59 ++++++++++
 .../components/inventory-table/index.tsx      | 109 ++++++++++++++++++
 .../inventory-table/row-item/index.tsx        | 102 ++++++++++++++++
 3 files changed, 270 insertions(+)
 create mode 100644 app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx
 create mode 100644 app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
 create mode 100644 app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx

diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx
new file mode 100644
index 0000000000..e718bf4807
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx
@@ -0,0 +1,59 @@
+import { ArrowDown, ArrowUp } from 'lucide-react';
+
+import { cn } from 'utils/cn';
+
+const HeaderItem = ({
+  className,
+  text,
+  name,
+  columns,
+  sorting,
+  onClick,
+}: {
+  className?: string;
+  text: string;
+  name: string;
+  columns: {
+    [key: string]: string;
+  };
+  sorting: string;
+  onClick?: (field: string) => void;
+}) => {
+  const sortingMatches = /^(-?)(.+)$/.exec(sorting);
+  const sortField = sortingMatches[2];
+  const sortOrder = sortingMatches[1] === '-' ? 'desc' : 'asc';
+
+  const isActive = columns[name] === sortField;
+
+  const handleClick = () => {
+    onClick(columns[name]);
+  };
+
+  return (
+    <button
+      type="button"
+      className={cn({
+        'inline-flex w-full items-center space-x-2 pb-2 pt-5': true,
+        [className]: true,
+      })}
+      onClick={handleClick}
+    >
+      <span
+        className={cn({
+          'text-xs font-semibold uppercase leading-none text-gray-400': true,
+          'text-white': isActive,
+          [className]: true,
+        })}
+      >
+        {text}
+      </span>
+      {sortOrder === 'asc' ? (
+        <ArrowDown className={isActive ? 'text-blue-400' : 'text-gray-400'} size={20} />
+      ) : (
+        <ArrowUp className={isActive ? 'text-blue-400' : 'text-gray-400'} size={20} />
+      )}
+    </button>
+  );
+};
+
+export default HeaderItem;
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
new file mode 100644
index 0000000000..a94bdfbeee
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
@@ -0,0 +1,109 @@
+import { ChangeEvent } from 'react';
+
+import Checkbox from 'components/forms/checkbox';
+import Loading from 'components/loading';
+
+import HeaderItem from './header-item';
+import RowItem from './row-item';
+
+const InventoryTable = ({
+  loading,
+  data,
+  noDataMessage,
+  columns,
+  sorting,
+  selectedIds,
+  visibleFeatures,
+  onSortChange,
+  onToggleSeeOnMap,
+  onSelectRow,
+  onSelectAll,
+  ActionsComponent,
+}: {
+  loading: boolean;
+  data: {
+    id: string;
+    name: string;
+    scenarios: number;
+    tag: string;
+  }[];
+  noDataMessage: string;
+  columns: {
+    [key: string]: string;
+  };
+  sorting: string;
+  selectedIds: string[];
+  visibleFeatures: string[];
+  onSortChange: (field: string) => void;
+  onToggleSeeOnMap: (id: string) => void;
+  onSelectRow: (evt: ChangeEvent<HTMLInputElement>) => void;
+  onSelectAll: (evt: ChangeEvent<HTMLInputElement>) => void;
+  ActionsComponent: ({ item }) => JSX.Element;
+}): JSX.Element => {
+  const noData = !loading && data?.length === 0;
+
+  return (
+    <>
+      {loading && (
+        <div className="relative min-h-[200px]">
+          <Loading
+            visible={true}
+            className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+          />
+        </div>
+      )}
+      {noData && <div className="flex h-[200px] items-center justify-center">{noDataMessage}</div>}
+      {!loading && !noData && (
+        <table className="w-full table-auto">
+          <thead className="text-left text-xs font-semibold uppercase">
+            <tr>
+              <th className="pb-2 pt-5">
+                <Checkbox
+                  id="select-all"
+                  theme="light"
+                  className="block h-4 w-4 checked:bg-blue-400"
+                  onChange={onSelectAll}
+                />
+              </th>
+              <th className="w-full">
+                <HeaderItem
+                  text={'Name'}
+                  name={'name'}
+                  columns={columns}
+                  sorting={sorting}
+                  onClick={onSortChange}
+                />
+              </th>
+              <th className="pb-2 pt-5 text-center">
+                <HeaderItem
+                  className="justify-center"
+                  text={'Type'}
+                  name={'tag'}
+                  columns={columns}
+                  sorting={sorting}
+                  onClick={onSortChange}
+                />
+              </th>
+              <th className="pb-2 pt-5"></th>
+            </tr>
+          </thead>
+          <tbody className="align-baseline text-sm">
+            {data?.map((item) => (
+              <RowItem
+                key={item.id}
+                item={item}
+                visibleFeatures={visibleFeatures}
+                selectedIds={selectedIds}
+                onSelectRow={onSelectRow}
+                onToggleSeeOnMap={onToggleSeeOnMap}
+                ActionsComponent={ActionsComponent}
+              />
+            ))}
+          </tbody>
+        </table>
+      )}
+    </>
+  );
+};
+
+export default InventoryTable;
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx
new file mode 100644
index 0000000000..382b850478
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx
@@ -0,0 +1,102 @@
+import { ChangeEvent } from 'react';
+
+import { MoreHorizontal } from 'lucide-react';
+
+import Checkbox from 'components/forms/checkbox';
+import Icon from 'components/icon';
+import { Popover, PopoverContent, PopoverTrigger } from 'components/popover';
+import { cn } from 'utils/cn';
+
+import HIDE_SVG from 'svgs/ui/hide.svg?sprite';
+import SHOW_SVG from 'svgs/ui/show.svg?sprite';
+
+type RowItem = {
+  id: string;
+  name: string;
+  scenarios: number;
+  tag: string;
+};
+
+const RowItem = ({
+  item,
+  visibleFeatures,
+  selectedIds,
+  onSelectRow,
+  onToggleSeeOnMap,
+  ActionsComponent,
+}: {
+  item: RowItem;
+  visibleFeatures: string[];
+  selectedIds: string[];
+  onSelectRow: (evt: ChangeEvent<HTMLInputElement>) => void;
+  onToggleSeeOnMap: (id: string) => void;
+  ActionsComponent: ({ item }) => JSX.Element;
+}) => {
+  const { id, name, scenarios, tag } = item;
+  const visibleOnMap = visibleFeatures.includes(id);
+
+  return (
+    <tr key={id} className="border-b border-gray-400">
+      <td className="pb-2 pr-1 pt-5">
+        <Checkbox
+          id={`select-${id}`}
+          theme="light"
+          className="-mb-0.5 block h-4 w-4 checked:bg-blue-400"
+          onChange={onSelectRow}
+          value={id}
+          checked={selectedIds.includes(id)}
+        />
+      </td>
+      <td className="px-1 pb-2 pt-5">
+        <div>{name}</div>
+        <div className="mt-1.5 text-xs text-gray-300">
+          Currently in use in {/* TODO Simao: Replace with <Tag /> component */}
+          <span className="rounded bg-blue-500 bg-opacity-10 px-1 text-blue-500">
+            {scenarios}
+          </span>{' '}
+          scenarios.
+        </div>
+      </td>
+      <td className="px-6 pb-2 pt-5 text-xs">
+        {tag && (
+          <div className="flex justify-center">
+            <span className="whitespace-nowrap rounded-full bg-yellow-600 bg-opacity-10 px-2 pb-1 pt-0.5 text-yellow-600">
+              {tag}
+            </span>
+          </div>
+        )}
+      </td>
+      <td className="pb-2 pl-1 pt-5">
+        <div className="flex gap-6">
+          <button type="button" onClick={() => onToggleSeeOnMap(id)}>
+            <Icon
+              className={cn({
+                'h-5 w-5': true,
+                'text-gray-400': !visibleOnMap,
+                'text-blue-400': visibleOnMap,
+              })}
+              icon={visibleOnMap ? SHOW_SVG : HIDE_SVG}
+            />
+          </button>
+          <Popover>
+            <PopoverTrigger asChild>
+              <button type="button" className="h-5 w-5">
+                <MoreHorizontal className="h-4 w-4 text-white" />
+              </button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto rounded-2xl border-transparent p-0"
+              side="bottom"
+              sideOffset={5}
+              align="start"
+            >
+              <ActionsComponent item={item} />
+            </PopoverContent>
+          </Popover>
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+export default RowItem;

From 691fb73a8695cc4593b11349c68ef37591477aec Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Tue, 22 Aug 2023 08:04:03 +0100
Subject: [PATCH 07/23] Add cost surface info component to use in the modal

---
 .../cost-surface/info/index.tsx               | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 app/layout/project/sidebar/project/inventory-panel/cost-surface/info/index.tsx

diff --git a/app/layout/project/sidebar/project/inventory-panel/cost-surface/info/index.tsx b/app/layout/project/sidebar/project/inventory-panel/cost-surface/info/index.tsx
new file mode 100644
index 0000000000..6c5bc50ae0
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/cost-surface/info/index.tsx
@@ -0,0 +1,28 @@
+import COST_LAND_IMG from 'images/info-buttons/img_cost_surface_marine.png';
+import COST_SEA_IMG from 'images/info-buttons/img_cost_surface_terrestrial.png';
+
+const CostSurfaceInfo = (): JSX.Element => {
+  return (
+    <>
+      <h4 className="mb-2.5 font-heading text-lg">What is a Cost Surface?</h4>
+      <div className="space-y-2">
+        <p>
+          Marxan aims to minimize socio-economic impacts and conflicts between uses through what is
+          called the “cost” surface. In conservation planning, cost data may reflect acquisition,
+          management, or opportunity costs ($), but may also reflect non-monetary impacts. Proxies
+          are commonly used in absence of fine-scale socio-economic information. A default value for
+          cost will be the planning unit area but you can upload your cost surface.
+        </p>
+        <p>
+          In the examples below, we illustrate how distance from a city, road or port can be used as
+          a proxy cost surface. In these examples, areas with many competing activities will make a
+          planning unit cost more than areas further away with less competition for access.
+        </p>
+        <img src={COST_SEA_IMG} alt="Cost sea" />
+        <img src={COST_LAND_IMG} alt="Cost Land" />
+      </div>
+    </>
+  );
+};
+
+export default CostSurfaceInfo;

From 1210106bec7af0f4164d9c6026c7b0346502f27e Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Tue, 22 Aug 2023 08:04:57 +0100
Subject: [PATCH 08/23] Add features info component to use in the modal

---
 .../inventory-panel/features/info/index.tsx   | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 app/layout/project/sidebar/project/inventory-panel/features/info/index.tsx

diff --git a/app/layout/project/sidebar/project/inventory-panel/features/info/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/info/index.tsx
new file mode 100644
index 0000000000..2b3160e600
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/features/info/index.tsx
@@ -0,0 +1,27 @@
+import FEATURE_ABUND_IMG from 'images/info-buttons/img_abundance_data.png';
+import FEATURE_SOCIAL_IMG from 'images/info-buttons/img_social_uses.png';
+import FEATURE_SPECIES_IMG from 'images/info-buttons/img_species_range.png';
+
+const FeaturesInfo = (): JSX.Element => {
+  return (
+    <>
+      <h4 className="mb-2.5 font-heading text-lg">What are features?</h4>
+      <div className="space-y-2">
+        <p>
+          Features are the important habitats, species, processes, activities, and discrete areas
+          that you want to consider in your planning process. Common feature data formats are range
+          maps, polygons, abundances, and continuous scale or probability of occurrence maps (e.g.
+          0-1). Features can include more than just ecological data but also be cultural and
+          socio-economic areas like community fishing grounds or traditional-use areas, and other
+          human activities and industries. Every feature must have a minimum target amount set. Some
+          examples include:
+        </p>
+        <img src={FEATURE_SPECIES_IMG} alt="Feature-Range" />
+        <img src={FEATURE_ABUND_IMG} alt="Feature-Abundance" />
+        <img src={FEATURE_SOCIAL_IMG} alt="Feature-Social" />
+      </div>
+    </>
+  );
+};
+
+export default FeaturesInfo;

From f0d9322dd09488f39655538b306dab802afd899e Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Tue, 22 Aug 2023 08:05:51 +0100
Subject: [PATCH 09/23] Add type for navigation inventory tabs

---
 app/layout/project/navigation/types.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/layout/project/navigation/types.ts b/app/layout/project/navigation/types.ts
index 325b538052..1e8a58aaa3 100644
--- a/app/layout/project/navigation/types.ts
+++ b/app/layout/project/navigation/types.ts
@@ -4,3 +4,5 @@ export type NavigationTreeCategories =
   | 'gridSetup'
   | 'solutions'
   | 'advancedSettings';
+
+export type NavigationInventoryTabs = 'protected-areas' | 'cost-surface' | 'features';

From 3ceb358899acc64fe7450fb8b49012994bf20814 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Tue, 22 Aug 2023 08:07:51 +0100
Subject: [PATCH 10/23] Add new ActionsMenu component for use in the new
 Features table

---
 .../features/actions-menu/index.tsx           | 109 ++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx

diff --git a/app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx
new file mode 100644
index 0000000000..3416b7da0e
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx
@@ -0,0 +1,109 @@
+import { useCallback, useState, ButtonHTMLAttributes } from 'react';
+
+import { FileEdit, Trash2, Tag } from 'lucide-react';
+
+import Modal from 'components/modal/component';
+import DeleteModal from 'layout/project/sidebar/project/inventory-panel/features/modals/delete';
+import EditModal from 'layout/project/sidebar/project/inventory-panel/features/modals/edit';
+import { cn } from 'utils/cn';
+
+const BUTTON_CLASSES =
+  'flex items-center px-4 py-2 w-full text-sm cursor-pointer bg-gray-700 hover:bg-gray-500 transition transition-colors space-x-2 group';
+
+const ICON_CLASSES = 'text-gray-400 group-hover:text-white';
+
+const ActionsMenu = ({
+  item,
+  onEditName,
+}: {
+  item: {
+    id: string;
+    name: string;
+    scenarios: number;
+    tag: string;
+    custom: boolean;
+  };
+  onEditName: (evt: Parameters<ButtonHTMLAttributes<HTMLButtonElement>['onClick']>[0]) => void;
+}): JSX.Element => {
+  const isDeletable = !item.custom && !item.scenarios;
+
+  // item.isCustom && !item.scenarioUsageCount
+  const [modalState, setModalState] = useState<{ edit: boolean; delete: boolean }>({
+    edit: false,
+    delete: false,
+  });
+
+  const handleModal = useCallback((modalKey: keyof typeof modalState, isVisible: boolean) => {
+    setModalState((prevState) => ({ ...prevState, [modalKey]: isVisible }));
+  }, []);
+
+  return (
+    <ul className="rounded-2xl border-gray-500">
+      <li>
+        <button
+          type="button"
+          onClick={onEditName}
+          className={cn({
+            [BUTTON_CLASSES]: true,
+            'rounded-t-2xl': true,
+          })}
+        >
+          <FileEdit className={ICON_CLASSES} size={20} />
+          <span>Rename</span>
+        </button>
+      </li>
+      <li>
+        <button
+          type="button"
+          onClick={() => handleModal('edit', true)}
+          className={cn({
+            [BUTTON_CLASSES]: true,
+            'last:rounded-b-2xl': !isDeletable,
+          })}
+        >
+          <Tag className={ICON_CLASSES} size={20} />
+          <span>Edit</span>
+        </button>
+        <Modal
+          id="edit-feature-modal"
+          title="All features"
+          open={modalState.edit}
+          size="narrow"
+          onDismiss={() => handleModal('edit', false)}
+        >
+          <EditModal featureId={item.id} handleModal={handleModal} />
+        </Modal>
+      </li>
+      {isDeletable && (
+        <li>
+          <button
+            type="button"
+            onClick={() => {
+              handleModal('delete', true);
+            }}
+            className={cn({
+              [BUTTON_CLASSES]: true,
+              'rounded-b-2xl': true,
+            })}
+          >
+            <Trash2 className={ICON_CLASSES} size={20} />
+            <span>Delete</span>
+          </button>
+          <Modal
+            id="delete-feature-modal"
+            dismissable
+            open={modalState.delete}
+            size="narrow"
+            onDismiss={() => {
+              handleModal('delete', false);
+            }}
+          >
+            <DeleteModal selectedFeaturesIds={[item.id]} />
+          </Modal>
+        </li>
+      )}
+    </ul>
+  );
+};
+
+export default ActionsMenu;

From b8020693fc68396596050e03f6f8d71aa56624ff Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Tue, 22 Aug 2023 08:07:10 +0100
Subject: [PATCH 11/23] Add new Features table making use of the new
 InventoryTable component

---
 .../inventory-panel/features/table/index.tsx  | 134 ++++++++++++++++++
 1 file changed, 134 insertions(+)
 create mode 100644 app/layout/project/sidebar/project/inventory-panel/features/table/index.tsx

diff --git a/app/layout/project/sidebar/project/inventory-panel/features/table/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/table/index.tsx
new file mode 100644
index 0000000000..862bfbc630
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/features/table/index.tsx
@@ -0,0 +1,134 @@
+import { useCallback, useState, ChangeEvent, useEffect, useMemo } from 'react';
+
+import { useRouter } from 'next/router';
+
+import { useAppDispatch, useAppSelector } from 'store/hooks';
+import { setSelectedFeatures as setVisibleFeatures } from 'store/slices/projects/[id]';
+
+import { useAllFeatures } from 'hooks/features';
+
+import { Feature } from 'types/api/feature';
+
+import InventoryTable from '../../components/inventory-table';
+import ActionsMenu from '../actions-menu';
+import FeaturesBulkActionMenu from '../bulk-action-menu';
+
+const FeaturesTable = ({ noData: noDataMessage }: { noData: string }): JSX.Element => {
+  const dispatch = useAppDispatch();
+
+  const { selectedFeatures: visibleFeatures, search } = useAppSelector(
+    (state) => state['/projects/[id]']
+  );
+
+  const [filters, setFilters] = useState<Parameters<typeof useAllFeatures>[1]>({
+    sort: 'featureClassName',
+  });
+  const [selectedFeaturesIds, setSelectedFeaturesIds] = useState<Feature['id'][]>([]);
+  const { query } = useRouter();
+  const { pid } = query as { pid: string };
+
+  const allFeaturesQuery = useAllFeatures<Feature[]>(
+    pid,
+    {
+      ...filters,
+      search,
+    },
+    {
+      select: ({ data }) => data,
+      placeholderData: { data: [] },
+    }
+  );
+
+  const featureIds = allFeaturesQuery.data?.map((feature) => feature.id);
+
+  const handleSelectAll = useCallback(
+    (evt: ChangeEvent<HTMLInputElement>) => {
+      setSelectedFeaturesIds(evt.target.checked ? featureIds : []);
+    },
+    [featureIds]
+  );
+
+  const handleSelectFeature = useCallback((evt: ChangeEvent<HTMLInputElement>) => {
+    if (evt.target.checked) {
+      setSelectedFeaturesIds((prevSelectedFeatures) => [...prevSelectedFeatures, evt.target.value]);
+    } else {
+      setSelectedFeaturesIds((prevSelectedFeatures) =>
+        prevSelectedFeatures.filter((featureId) => featureId !== evt.target.value)
+      );
+    }
+  }, []);
+
+  const handleSort = useCallback(
+    (_sortType: (typeof filters)['sort']) => {
+      const sort = filters.sort === _sortType ? `-${_sortType}` : _sortType;
+
+      setFilters((prevFilters) => ({
+        ...prevFilters,
+        sort,
+      }));
+    },
+    [filters.sort]
+  );
+
+  useEffect(() => {
+    setSelectedFeaturesIds([]);
+  }, [search]);
+
+  const toggleSeeOnMap = useCallback(
+    (featureId: Feature['id']) => {
+      const newSelectedFeatures = [...visibleFeatures];
+      if (!newSelectedFeatures.includes(featureId)) {
+        newSelectedFeatures.push(featureId);
+      } else {
+        const i = newSelectedFeatures.indexOf(featureId);
+        newSelectedFeatures.splice(i, 1);
+      }
+      dispatch(setVisibleFeatures(newSelectedFeatures));
+    },
+    [dispatch, visibleFeatures]
+  );
+
+  const displayBulkActions = selectedFeaturesIds.length > 0;
+
+  const tableColumns = useMemo(
+    () => ({
+      name: 'featureClassName',
+      tag: 'tag',
+    }),
+    []
+  );
+
+  const tableData = useMemo(
+    () =>
+      allFeaturesQuery?.data?.map((entry) => ({
+        id: entry.id,
+        name: entry.featureClassName,
+        scenarios: entry.scenarioUsageCount,
+        tag: entry.tag,
+        isCustom: entry.isCustom,
+      })),
+    [allFeaturesQuery?.data]
+  );
+
+  return (
+    <>
+      <InventoryTable
+        loading={allFeaturesQuery.isFetching}
+        data={tableData}
+        noDataMessage={noDataMessage}
+        columns={tableColumns}
+        sorting={filters?.sort}
+        selectedIds={selectedFeaturesIds}
+        visibleFeatures={visibleFeatures}
+        onSortChange={handleSort}
+        onSelectAll={handleSelectAll}
+        onSelectRow={handleSelectFeature}
+        onToggleSeeOnMap={toggleSeeOnMap}
+        ActionsComponent={ActionsMenu}
+      />
+      {displayBulkActions && <FeaturesBulkActionMenu selectedFeaturesIds={selectedFeaturesIds} />}
+    </>
+  );
+};
+
+export default FeaturesTable;

From c5a74a359c776dd18078beeb82168dfed789b04f Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Tue, 22 Aug 2023 08:09:07 +0100
Subject: [PATCH 12/23] Add new CostSuface table component

---
 .../project/inventory-panel/cost-surface/table/index.tsx     | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 app/layout/project/sidebar/project/inventory-panel/cost-surface/table/index.tsx

diff --git a/app/layout/project/sidebar/project/inventory-panel/cost-surface/table/index.tsx b/app/layout/project/sidebar/project/inventory-panel/cost-surface/table/index.tsx
new file mode 100644
index 0000000000..02c501d8c1
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/cost-surface/table/index.tsx
@@ -0,0 +1,5 @@
+const CostSurfaceTable = ({ noData: noDataMessage }: { noData: string }): JSX.Element => {
+  return <div className="flex h-[200px] items-center justify-center">{noDataMessage}</div>;
+};
+
+export default CostSurfaceTable;

From 8e2b38ca41841389c0634a63cb11c8fa42051744 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Tue, 22 Aug 2023 08:09:59 +0100
Subject: [PATCH 13/23] Add new ProtectedAreas table component

---
 .../project/inventory-panel/protected-areas/table/index.tsx  | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 app/layout/project/sidebar/project/inventory-panel/protected-areas/table/index.tsx

diff --git a/app/layout/project/sidebar/project/inventory-panel/protected-areas/table/index.tsx b/app/layout/project/sidebar/project/inventory-panel/protected-areas/table/index.tsx
new file mode 100644
index 0000000000..f90392b26a
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/protected-areas/table/index.tsx
@@ -0,0 +1,5 @@
+const ProtectedAreasTable = ({ noData: noDataMessage }: { noData: string }): JSX.Element => {
+  return <div className="flex h-[200px] items-center justify-center">{noDataMessage}</div>;
+};
+
+export default ProtectedAreasTable;

From bf9a515d39e1a441636471f56fec84b2ea3c9800 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Tue, 22 Aug 2023 08:10:57 +0100
Subject: [PATCH 14/23] Add ProtectedAreasFooter component to display in the
 protected areas inventory panel

---
 .../protected-areas/footer/index.tsx          | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 app/layout/project/sidebar/project/inventory-panel/protected-areas/footer/index.tsx

diff --git a/app/layout/project/sidebar/project/inventory-panel/protected-areas/footer/index.tsx b/app/layout/project/sidebar/project/inventory-panel/protected-areas/footer/index.tsx
new file mode 100644
index 0000000000..3a5fa35e0d
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/protected-areas/footer/index.tsx
@@ -0,0 +1,21 @@
+const ProtectedAreasFooter = (): JSX.Element => {
+  return (
+    <div className="mt-8 text-xs">
+      <p className="text-gray-300">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt sem non arcu
+        elementum, et dignissim felis volutpat consectetur adipiscing elit consectetur adipiscing
+        elit.
+      </p>
+
+      <p className="mt-7">
+        Lorem ipsum:{' '}
+        <a className="text-blue-400" href="https://www.google.com" target="_blank">
+          www.google.com
+        </a>
+        .
+      </p>
+    </div>
+  );
+};
+
+export default ProtectedAreasFooter;

From 97611084c0e737d3cb6284a351ad781bbeec654f Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Tue, 22 Aug 2023 08:12:10 +0100
Subject: [PATCH 15/23] Create shared InventoryPanel component to be shared
 between Inventory panel tabs

---
 .../project/inventory-panel/constants.ts      |  37 +++++++
 .../sidebar/project/inventory-panel/index.tsx | 103 ++++++++++++++++++
 .../sidebar/project/inventory-panel/types.ts  |  17 +++
 3 files changed, 157 insertions(+)
 create mode 100644 app/layout/project/sidebar/project/inventory-panel/constants.ts
 create mode 100644 app/layout/project/sidebar/project/inventory-panel/index.tsx
 create mode 100644 app/layout/project/sidebar/project/inventory-panel/types.ts

diff --git a/app/layout/project/sidebar/project/inventory-panel/constants.ts b/app/layout/project/sidebar/project/inventory-panel/constants.ts
new file mode 100644
index 0000000000..a416e36fba
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/constants.ts
@@ -0,0 +1,37 @@
+import { NavigationInventoryTabs } from 'layout/project/navigation/types';
+
+import CostSurfaceInfo from './cost-surface/info';
+import CostSurfaceTable from './cost-surface/table';
+import FeaturesInfo from './features/info';
+import FeatureUploadModal from './features/modals/upload';
+import FeaturesTable from './features/table';
+import ProtectedAreasFooter from './protected-areas/footer';
+import ProtectedAreasTable from './protected-areas/table';
+import { Panel } from './types';
+
+export const INVENTORY_TABS = {
+  'protected-areas': {
+    title: 'Protected Areas',
+    search: 'Search protected areas',
+    noData: 'No protected areas found.',
+    TableComponent: ProtectedAreasTable,
+    FooterComponent: ProtectedAreasFooter,
+  },
+  'cost-surface': {
+    title: 'Cost Surface',
+    search: 'Search cost surfaces',
+    noData: 'No cost surfaces found.',
+    InfoComponent: CostSurfaceInfo,
+    TableComponent: CostSurfaceTable,
+  },
+  features: {
+    title: 'Features',
+    search: 'Search features',
+    noData: 'No features found.',
+    InfoComponent: FeaturesInfo,
+    UploadModalComponent: FeatureUploadModal,
+    TableComponent: FeaturesTable,
+  },
+} satisfies {
+  [key in NavigationInventoryTabs]: Panel;
+};
diff --git a/app/layout/project/sidebar/project/inventory-panel/index.tsx b/app/layout/project/sidebar/project/inventory-panel/index.tsx
new file mode 100644
index 0000000000..776bc38e93
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/index.tsx
@@ -0,0 +1,103 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { useRouter } from 'next/router';
+
+import { useAppDispatch } from 'store/hooks';
+import { setSearch } from 'store/slices/projects/[id]';
+
+import Button from 'components/button';
+import Icon from 'components/icon';
+import InfoButton from 'components/info-button';
+import Search, { SearchProps } from 'components/search';
+import { NavigationInventoryTabs } from 'layout/project/navigation/types';
+
+import UPLOAD_SVG from 'svgs/ui/upload.svg?sprite';
+
+import { INVENTORY_TABS } from './constants';
+import { Panel } from './types';
+
+const InventoryPanel = (): JSX.Element => {
+  const dispatch = useAppDispatch();
+  const { query } = useRouter();
+  const { tab } = query as { tab: NavigationInventoryTabs };
+
+  const panel: Panel = INVENTORY_TABS[tab];
+
+  const [isOpenUploader, setOpenUploader] = useState(false);
+
+  // Ensure uploader modals are closed if we change panels
+  useEffect(() => {
+    setOpenUploader(false);
+  }, [panel]);
+
+  // Handle upload modals
+  const handleUploader = useCallback(() => {
+    setOpenUploader(true);
+  }, []);
+
+  const closeUploadModal = useCallback(() => {
+    setOpenUploader(false);
+  }, []);
+
+  // Handle search
+  const handleSearch = useCallback(
+    (value: Parameters<SearchProps['onChange']>[0]) => {
+      dispatch(setSearch(value));
+    },
+    [dispatch]
+  );
+
+  // Shouldn't happen that the panel/tab doesn't exist, but in case it happens let's
+  // add a guard to prevent the app from crashing.
+  if (!panel) return null;
+
+  const {
+    title,
+    search,
+    noData,
+    InfoComponent,
+    UploadModalComponent,
+    TableComponent,
+    FooterComponent,
+  } = panel;
+
+  return (
+    <section className="relative mt-6 space-y-2 rounded-[20px] bg-gray-700 p-6">
+      <header className="flex items-center justify-between">
+        <div className="space-y-1">
+          <span className="text-xs font-semibold text-blue-400">Inventory Panel</span>
+          <h3 className="flex items-center space-x-2">
+            <span className="text-lg font-medium">{title}</span>
+            {/* Not all panels have an InfoComponent */}
+            {InfoComponent && (
+              <InfoButton theme="tertiary">
+                <InfoComponent />
+              </InfoButton>
+            )}
+          </h3>
+        </div>
+        <Button theme="primary" size="base" className="space-x-3" onClick={handleUploader}>
+          <span>Upload</span>
+          <Icon icon={UPLOAD_SVG} className="h-5 w-5 stroke-current" />
+        </Button>
+      </header>
+      <Search
+        id="inventory-search"
+        size="sm"
+        placeholder={search}
+        aria-label={search}
+        onChange={handleSearch}
+        theme="dark"
+      />
+      {TableComponent && <TableComponent noData={noData} />}
+      {/* TODO: Upload modal won't be optional; currently checking their existence only for development purposes */}
+      {UploadModalComponent && (
+        <UploadModalComponent isOpen={isOpenUploader} onDismiss={closeUploadModal} />
+      )}
+      {/* Not all panels have a FooterComponent */}
+      {FooterComponent && <FooterComponent />}
+    </section>
+  );
+};
+
+export default InventoryPanel;
diff --git a/app/layout/project/sidebar/project/inventory-panel/types.ts b/app/layout/project/sidebar/project/inventory-panel/types.ts
new file mode 100644
index 0000000000..8e1214c504
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/types.ts
@@ -0,0 +1,17 @@
+export type Panel = {
+  title: string;
+  search: string;
+  noData: string;
+  InfoComponent?: () => JSX.Element;
+  // TODO Simao: Remove optional when we have upload modals for all tabs
+  UploadModalComponent?: ({
+    isOpen,
+    onDismiss,
+  }: {
+    isOpen?: boolean;
+    onDismiss: () => void;
+  }) => JSX.Element;
+  // TODO Simao: Remove optional when we have table components for all tabs
+  TableComponent?: (props) => JSX.Element;
+  FooterComponent?: () => JSX.Element;
+};

From 304018001e6005dd950085697526d46e2ee3fed7 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Tue, 22 Aug 2023 08:13:07 +0100
Subject: [PATCH 16/23] Make use of the new InventoryPanel component in
 projects pages

---
 app/pages/projects/[pid]/index.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/app/pages/projects/[pid]/index.tsx b/app/pages/projects/[pid]/index.tsx
index b4a76068a9..a8389d9596 100644
--- a/app/pages/projects/[pid]/index.tsx
+++ b/app/pages/projects/[pid]/index.tsx
@@ -8,9 +8,7 @@ import ProjectLayout from 'layout/project';
 import Breadcrumbs from 'layout/project/navigation/breadcrumbs';
 import Sidebar from 'layout/project/sidebar';
 import InventoryProjectHeader from 'layout/project/sidebar/project/header';
-import InventoryPanelCostSurface from 'layout/project/sidebar/project/inventory-panel/cost-surface';
-import InventoryPanelFeatures from 'layout/project/sidebar/project/inventory-panel/features';
-import InventoryPanelProtectedAreas from 'layout/project/sidebar/project/inventory-panel/protected-areas';
+import InventoryPanel from 'layout/project/sidebar/project/inventory-panel';
 import ScenariosList from 'layout/project/sidebar/project/scenarios-list';
 import ProjectMap from 'layout/projects/show/map';
 import ProjectStatus from 'layout/projects/show/status';
@@ -30,12 +28,8 @@ const ShowProjectsPage = (): JSX.Element => {
       <ProjectLayout className="relative z-10">
         <Sidebar className="flex-col">
           <Breadcrumbs />
-
           <InventoryProjectHeader />
-
-          {tab === 'features' && <InventoryPanelFeatures />}
-          {tab === 'protected-areas' && <InventoryPanelProtectedAreas />}
-          {tab === 'cost-surface' && <InventoryPanelCostSurface />}
+          {tab && <InventoryPanel />}
           {!tab && <ScenariosList />}
         </Sidebar>
         <ProjectStatus />

From cecda326875c7198186e93ef48ededf0466e2913 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Tue, 22 Aug 2023 08:19:48 +0100
Subject: [PATCH 17/23] Minor Inventory Panel file reorganization

---
 .../project/inventory-panel/constants.ts      |   6 +-
 .../inventory-panel/cost-surface/index.tsx    |   6 +-
 .../cost-surface/table/index.tsx              |   5 -
 .../inventory-panel/features/index.tsx        | 183 +++++++++++-------
 .../inventory-panel/features/table/index.tsx  | 134 -------------
 .../inventory-panel/protected-areas/index.tsx |  10 +-
 .../protected-areas/table/index.tsx           |   5 -
 7 files changed, 126 insertions(+), 223 deletions(-)
 delete mode 100644 app/layout/project/sidebar/project/inventory-panel/cost-surface/table/index.tsx
 delete mode 100644 app/layout/project/sidebar/project/inventory-panel/features/table/index.tsx
 delete mode 100644 app/layout/project/sidebar/project/inventory-panel/protected-areas/table/index.tsx

diff --git a/app/layout/project/sidebar/project/inventory-panel/constants.ts b/app/layout/project/sidebar/project/inventory-panel/constants.ts
index a416e36fba..b0fa600a57 100644
--- a/app/layout/project/sidebar/project/inventory-panel/constants.ts
+++ b/app/layout/project/sidebar/project/inventory-panel/constants.ts
@@ -1,12 +1,12 @@
 import { NavigationInventoryTabs } from 'layout/project/navigation/types';
 
+import CostSurfaceTable from './cost-surface';
 import CostSurfaceInfo from './cost-surface/info';
-import CostSurfaceTable from './cost-surface/table';
+import FeaturesTable from './features';
 import FeaturesInfo from './features/info';
 import FeatureUploadModal from './features/modals/upload';
-import FeaturesTable from './features/table';
+import ProtectedAreasTable from './protected-areas';
 import ProtectedAreasFooter from './protected-areas/footer';
-import ProtectedAreasTable from './protected-areas/table';
 import { Panel } from './types';
 
 export const INVENTORY_TABS = {
diff --git a/app/layout/project/sidebar/project/inventory-panel/cost-surface/index.tsx b/app/layout/project/sidebar/project/inventory-panel/cost-surface/index.tsx
index e54c0cc7bb..20c04506aa 100644
--- a/app/layout/project/sidebar/project/inventory-panel/cost-surface/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/cost-surface/index.tsx
@@ -1,7 +1,5 @@
-import Section from 'layout/section';
-
-const InventoryPanelCostSurface = (): JSX.Element => {
-  return <Section>InventoryPanelCostSurface</Section>;
+const InventoryPanelCostSurface = ({ noData: noDataMessage }: { noData: string }): JSX.Element => {
+  return <div className="flex h-[200px] items-center justify-center">{noDataMessage}</div>;
 };
 
 export default InventoryPanelCostSurface;
diff --git a/app/layout/project/sidebar/project/inventory-panel/cost-surface/table/index.tsx b/app/layout/project/sidebar/project/inventory-panel/cost-surface/table/index.tsx
deleted file mode 100644
index 02c501d8c1..0000000000
--- a/app/layout/project/sidebar/project/inventory-panel/cost-surface/table/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const CostSurfaceTable = ({ noData: noDataMessage }: { noData: string }): JSX.Element => {
-  return <div className="flex h-[200px] items-center justify-center">{noDataMessage}</div>;
-};
-
-export default CostSurfaceTable;
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/index.tsx
index e032a977ed..8b9e049909 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/index.tsx
@@ -1,87 +1,134 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useState, ChangeEvent, useEffect, useMemo } from 'react';
 
-import { useAppDispatch } from 'store/hooks';
-import { setSearch } from 'store/slices/projects/[id]';
+import { useRouter } from 'next/router';
 
-import Button from 'components/button';
-import Icon from 'components/icon';
-import InfoButton from 'components/info-button';
-import Search, { SearchProps } from 'components/search';
-import Section from 'layout/section';
+import { useAppDispatch, useAppSelector } from 'store/hooks';
+import { setSelectedFeatures as setVisibleFeatures } from 'store/slices/projects/[id]';
 
-import FEATURE_ABUND_IMG from 'images/info-buttons/img_abundance_data.png';
-import FEATURE_SOCIAL_IMG from 'images/info-buttons/img_social_uses.png';
-import FEATURE_SPECIES_IMG from 'images/info-buttons/img_species_range.png';
+import { useAllFeatures } from 'hooks/features';
 
-import UPLOAD_SVG from 'svgs/ui/upload.svg?sprite';
+import { Feature } from 'types/api/feature';
 
-import ProjectFeatureList from './list';
-import FeatureUploadModal from './modals/upload';
+import InventoryTable from '../components/inventory-table';
 
-const InventoryPanelFeatures = (): JSX.Element => {
+import ActionsMenu from './actions-menu';
+import FeaturesBulkActionMenu from './bulk-action-menu';
+
+const InventoryPanelFeatures = ({ noData: noDataMessage }: { noData: string }): JSX.Element => {
   const dispatch = useAppDispatch();
 
-  const handleSearch = useCallback(
-    (value: Parameters<SearchProps['onChange']>[0]) => {
-      dispatch(setSearch(value));
+  const { selectedFeatures: visibleFeatures, search } = useAppSelector(
+    (state) => state['/projects/[id]']
+  );
+
+  const [filters, setFilters] = useState<Parameters<typeof useAllFeatures>[1]>({
+    sort: 'featureClassName',
+  });
+  const [selectedFeaturesIds, setSelectedFeaturesIds] = useState<Feature['id'][]>([]);
+  const { query } = useRouter();
+  const { pid } = query as { pid: string };
+
+  const allFeaturesQuery = useAllFeatures<Feature[]>(
+    pid,
+    {
+      ...filters,
+      search,
     },
-    [dispatch]
+    {
+      select: ({ data }) => data,
+      placeholderData: { data: [] },
+    }
   );
-  const [isOpenFeatureUploader, setOpenFeatureUploader] = useState(false);
 
-  const handleFeatureUploader = useCallback(() => {
-    setOpenFeatureUploader(true);
-  }, []);
+  const featureIds = allFeaturesQuery.data?.map((feature) => feature.id);
 
-  const closeFeatureUploadModal = useCallback(() => {
-    setOpenFeatureUploader(false);
+  const handleSelectAll = useCallback(
+    (evt: ChangeEvent<HTMLInputElement>) => {
+      setSelectedFeaturesIds(evt.target.checked ? featureIds : []);
+    },
+    [featureIds]
+  );
+
+  const handleSelectFeature = useCallback((evt: ChangeEvent<HTMLInputElement>) => {
+    if (evt.target.checked) {
+      setSelectedFeaturesIds((prevSelectedFeatures) => [...prevSelectedFeatures, evt.target.value]);
+    } else {
+      setSelectedFeaturesIds((prevSelectedFeatures) =>
+        prevSelectedFeatures.filter((featureId) => featureId !== evt.target.value)
+      );
+    }
   }, []);
 
+  const handleSort = useCallback(
+    (_sortType: (typeof filters)['sort']) => {
+      const sort = filters.sort === _sortType ? `-${_sortType}` : _sortType;
+
+      setFilters((prevFilters) => ({
+        ...prevFilters,
+        sort,
+      }));
+    },
+    [filters.sort]
+  );
+
+  useEffect(() => {
+    setSelectedFeaturesIds([]);
+  }, [search]);
+
+  const toggleSeeOnMap = useCallback(
+    (featureId: Feature['id']) => {
+      const newSelectedFeatures = [...visibleFeatures];
+      if (!newSelectedFeatures.includes(featureId)) {
+        newSelectedFeatures.push(featureId);
+      } else {
+        const i = newSelectedFeatures.indexOf(featureId);
+        newSelectedFeatures.splice(i, 1);
+      }
+      dispatch(setVisibleFeatures(newSelectedFeatures));
+    },
+    [dispatch, visibleFeatures]
+  );
+
+  const displayBulkActions = selectedFeaturesIds.length > 0;
+
+  const tableColumns = useMemo(
+    () => ({
+      name: 'featureClassName',
+      tag: 'tag',
+    }),
+    []
+  );
+
+  const tableData = useMemo(
+    () =>
+      allFeaturesQuery?.data?.map((entry) => ({
+        id: entry.id,
+        name: entry.featureClassName,
+        scenarios: entry.scenarioUsageCount,
+        tag: entry.tag,
+        isCustom: entry.isCustom,
+      })),
+    [allFeaturesQuery?.data]
+  );
+
   return (
-    <Section className="relative">
-      <header className="flex items-center justify-between">
-        <div className="space-y-1">
-          <span className="text-xs font-semibold text-blue-400">Inventory Panel</span>
-          <h3 className="flex items-center space-x-2">
-            <span className="text-lg font-medium">Features</span>
-            <InfoButton theme="tertiary">
-              <>
-                <h4 className="mb-2.5 font-heading text-lg">What are features?</h4>
-                <div className="space-y-2">
-                  <p>
-                    Features are the important habitats, species, processes, activities, and
-                    discrete areas that you want to consider in your planning process. Common
-                    feature data formats are range maps, polygons, abundances, and continuous scale
-                    or probability of occurrence maps (e.g. 0-1). Features can include more than
-                    just ecological data but also be cultural and socio-economic areas like
-                    community fishing grounds or traditional-use areas, and other human activities
-                    and industries. Every feature must have a minimum target amount set. Some
-                    examples include:
-                  </p>
-                  <img src={FEATURE_SPECIES_IMG} alt="Feature-Range" />
-                  <img src={FEATURE_ABUND_IMG} alt="Feature-Abundance" />
-                  <img src={FEATURE_SOCIAL_IMG} alt="Feature-Social" />
-                </div>
-              </>
-            </InfoButton>
-          </h3>
-        </div>
-        <Button theme="primary" size="base" onClick={handleFeatureUploader} className="space-x-3">
-          <span>Upload</span>
-          <Icon icon={UPLOAD_SVG} className="h-5 w-5 stroke-current" />
-        </Button>
-      </header>
-      <Search
-        id="feature-search"
-        size="sm"
-        placeholder="Search features"
-        aria-label="Search features"
-        onChange={handleSearch}
-        theme="dark"
+    <>
+      <InventoryTable
+        loading={allFeaturesQuery.isFetching}
+        data={tableData}
+        noDataMessage={noDataMessage}
+        columns={tableColumns}
+        sorting={filters?.sort}
+        selectedIds={selectedFeaturesIds}
+        visibleFeatures={visibleFeatures}
+        onSortChange={handleSort}
+        onSelectAll={handleSelectAll}
+        onSelectRow={handleSelectFeature}
+        onToggleSeeOnMap={toggleSeeOnMap}
+        ActionsComponent={ActionsMenu}
       />
-      <ProjectFeatureList />
-      <FeatureUploadModal isOpen={isOpenFeatureUploader} onDismiss={closeFeatureUploadModal} />
-    </Section>
+      {displayBulkActions && <FeaturesBulkActionMenu selectedFeaturesIds={selectedFeaturesIds} />}
+    </>
   );
 };
 
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/table/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/table/index.tsx
deleted file mode 100644
index 862bfbc630..0000000000
--- a/app/layout/project/sidebar/project/inventory-panel/features/table/index.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { useCallback, useState, ChangeEvent, useEffect, useMemo } from 'react';
-
-import { useRouter } from 'next/router';
-
-import { useAppDispatch, useAppSelector } from 'store/hooks';
-import { setSelectedFeatures as setVisibleFeatures } from 'store/slices/projects/[id]';
-
-import { useAllFeatures } from 'hooks/features';
-
-import { Feature } from 'types/api/feature';
-
-import InventoryTable from '../../components/inventory-table';
-import ActionsMenu from '../actions-menu';
-import FeaturesBulkActionMenu from '../bulk-action-menu';
-
-const FeaturesTable = ({ noData: noDataMessage }: { noData: string }): JSX.Element => {
-  const dispatch = useAppDispatch();
-
-  const { selectedFeatures: visibleFeatures, search } = useAppSelector(
-    (state) => state['/projects/[id]']
-  );
-
-  const [filters, setFilters] = useState<Parameters<typeof useAllFeatures>[1]>({
-    sort: 'featureClassName',
-  });
-  const [selectedFeaturesIds, setSelectedFeaturesIds] = useState<Feature['id'][]>([]);
-  const { query } = useRouter();
-  const { pid } = query as { pid: string };
-
-  const allFeaturesQuery = useAllFeatures<Feature[]>(
-    pid,
-    {
-      ...filters,
-      search,
-    },
-    {
-      select: ({ data }) => data,
-      placeholderData: { data: [] },
-    }
-  );
-
-  const featureIds = allFeaturesQuery.data?.map((feature) => feature.id);
-
-  const handleSelectAll = useCallback(
-    (evt: ChangeEvent<HTMLInputElement>) => {
-      setSelectedFeaturesIds(evt.target.checked ? featureIds : []);
-    },
-    [featureIds]
-  );
-
-  const handleSelectFeature = useCallback((evt: ChangeEvent<HTMLInputElement>) => {
-    if (evt.target.checked) {
-      setSelectedFeaturesIds((prevSelectedFeatures) => [...prevSelectedFeatures, evt.target.value]);
-    } else {
-      setSelectedFeaturesIds((prevSelectedFeatures) =>
-        prevSelectedFeatures.filter((featureId) => featureId !== evt.target.value)
-      );
-    }
-  }, []);
-
-  const handleSort = useCallback(
-    (_sortType: (typeof filters)['sort']) => {
-      const sort = filters.sort === _sortType ? `-${_sortType}` : _sortType;
-
-      setFilters((prevFilters) => ({
-        ...prevFilters,
-        sort,
-      }));
-    },
-    [filters.sort]
-  );
-
-  useEffect(() => {
-    setSelectedFeaturesIds([]);
-  }, [search]);
-
-  const toggleSeeOnMap = useCallback(
-    (featureId: Feature['id']) => {
-      const newSelectedFeatures = [...visibleFeatures];
-      if (!newSelectedFeatures.includes(featureId)) {
-        newSelectedFeatures.push(featureId);
-      } else {
-        const i = newSelectedFeatures.indexOf(featureId);
-        newSelectedFeatures.splice(i, 1);
-      }
-      dispatch(setVisibleFeatures(newSelectedFeatures));
-    },
-    [dispatch, visibleFeatures]
-  );
-
-  const displayBulkActions = selectedFeaturesIds.length > 0;
-
-  const tableColumns = useMemo(
-    () => ({
-      name: 'featureClassName',
-      tag: 'tag',
-    }),
-    []
-  );
-
-  const tableData = useMemo(
-    () =>
-      allFeaturesQuery?.data?.map((entry) => ({
-        id: entry.id,
-        name: entry.featureClassName,
-        scenarios: entry.scenarioUsageCount,
-        tag: entry.tag,
-        isCustom: entry.isCustom,
-      })),
-    [allFeaturesQuery?.data]
-  );
-
-  return (
-    <>
-      <InventoryTable
-        loading={allFeaturesQuery.isFetching}
-        data={tableData}
-        noDataMessage={noDataMessage}
-        columns={tableColumns}
-        sorting={filters?.sort}
-        selectedIds={selectedFeaturesIds}
-        visibleFeatures={visibleFeatures}
-        onSortChange={handleSort}
-        onSelectAll={handleSelectAll}
-        onSelectRow={handleSelectFeature}
-        onToggleSeeOnMap={toggleSeeOnMap}
-        ActionsComponent={ActionsMenu}
-      />
-      {displayBulkActions && <FeaturesBulkActionMenu selectedFeaturesIds={selectedFeaturesIds} />}
-    </>
-  );
-};
-
-export default FeaturesTable;
diff --git a/app/layout/project/sidebar/project/inventory-panel/protected-areas/index.tsx b/app/layout/project/sidebar/project/inventory-panel/protected-areas/index.tsx
index 08698c3301..c564d99d16 100644
--- a/app/layout/project/sidebar/project/inventory-panel/protected-areas/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/protected-areas/index.tsx
@@ -1,7 +1,9 @@
-import Section from 'layout/section';
-
-const InventoryPanelProtectedAreas = (): JSX.Element => {
-  return <Section>InventoryPanelProtectedAreas</Section>;
+const InventoryPanelProtectedAreas = ({
+  noData: noDataMessage,
+}: {
+  noData: string;
+}): JSX.Element => {
+  return <div className="flex h-[200px] items-center justify-center">{noDataMessage}</div>;
 };
 
 export default InventoryPanelProtectedAreas;
diff --git a/app/layout/project/sidebar/project/inventory-panel/protected-areas/table/index.tsx b/app/layout/project/sidebar/project/inventory-panel/protected-areas/table/index.tsx
deleted file mode 100644
index f90392b26a..0000000000
--- a/app/layout/project/sidebar/project/inventory-panel/protected-areas/table/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const ProtectedAreasTable = ({ noData: noDataMessage }: { noData: string }): JSX.Element => {
-  return <div className="flex h-[200px] items-center justify-center">{noDataMessage}</div>;
-};
-
-export default ProtectedAreasTable;

From 78a7b5df2913cbe2bc57ffa7c9b4322a774a72ab Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Tue, 22 Aug 2023 08:21:19 +0100
Subject: [PATCH 18/23] Remove no longer used item-list component

---
 .../inventory-panel/item-list/index.tsx       | 175 ------------------
 1 file changed, 175 deletions(-)
 delete mode 100644 app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx

diff --git a/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx b/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx
deleted file mode 100644
index 340480b4c0..0000000000
--- a/app/layout/project/sidebar/project/inventory-panel/item-list/index.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import { useCallback, useState, ChangeEvent, useRef, InputHTMLAttributes, useMemo } from 'react';
-
-import { useQueryClient } from 'react-query';
-
-import { MoreHorizontal } from 'lucide-react';
-
-import { useEditFeature } from 'hooks/features';
-import { useToasts } from 'hooks/toast';
-
-import Checkbox from 'components/forms/checkbox';
-import Icon from 'components/icon';
-import { Popover, PopoverContent, PopoverTrigger } from 'components/popover';
-import Tag from 'components/tag';
-import FeatureActions from 'layout/project/sidebar/project/inventory-panel/features/list/actions';
-import { Feature } from 'types/api/feature';
-import { Project } from 'types/api/project';
-import { cn } from 'utils/cn';
-
-import HIDE_SVG from 'svgs/ui/hide.svg?sprite';
-import SHOW_SVG from 'svgs/ui/show.svg?sprite';
-
-const ItemList = ({
-  id,
-  item,
-  projectId,
-  isSelected,
-  onSelect,
-  toggleSeeOnMap,
-}: {
-  id: string;
-  // !TODO: Add ProtectedArea | Feature | CostSurface types
-  item: Feature;
-  projectId: Project['id'];
-  isSelected: boolean;
-  onSelect: (evt: ChangeEvent<HTMLInputElement>) => void;
-  toggleSeeOnMap: () => void;
-}): JSX.Element => {
-  const queryClient = useQueryClient();
-  const { addToast } = useToasts();
-
-  const [isEditable, setEditable] = useState(false);
-  const nameInputRef = useRef<HTMLInputElement>(null);
-  const { mutate: editFeature } = useEditFeature();
-
-  const handleRename = useCallback(() => {
-    setEditable(true);
-    nameInputRef.current?.focus();
-  }, [nameInputRef]);
-
-  const handleNameChanges = useCallback(
-    (evt: Parameters<InputHTMLAttributes<HTMLInputElement>['onKeyDown']>[0]) => {
-      if (evt.key === 'Enter') {
-        setEditable(false);
-        nameInputRef.current?.blur();
-
-        if (id === 'feature') {
-          editFeature(
-            {
-              fid: item.id,
-              body: {
-                featureClassName: evt.currentTarget.value,
-              },
-            },
-            {
-              onSuccess: async () => {
-                await queryClient.invalidateQueries(['all-features', projectId]);
-
-                addToast(
-                  'edit-project-features',
-                  <>
-                    <h2 className="font-medium">Success</h2>
-                    <p className="text-sm">The feature was updated successfully.</p>
-                  </>,
-                  {
-                    level: 'success',
-                  }
-                );
-              },
-              onError: () => {
-                addToast(
-                  'edit-project-features',
-                  <>
-                    <h2 className="font-medium">Error</h2>
-                    <p className="text-sm">Something went wrong editing the feature.</p>
-                  </>,
-                  {
-                    level: 'error',
-                  }
-                );
-              },
-            }
-          );
-        }
-      }
-    },
-    [nameInputRef, projectId, item.id, editFeature, addToast, queryClient, id]
-  );
-
-  const defaultValue = useMemo(() => {
-    if (id === 'feature') return item.featureClassName;
-  }, [id, item]);
-
-  return (
-    <>
-      <div className="col-span-3 flex space-x-2">
-        <Checkbox
-          id={`item-${item.id}`}
-          theme="light"
-          className="block h-4 w-4 checked:bg-blue-400"
-          onChange={onSelect}
-          checked={isSelected}
-          value={item.id}
-        />
-        <div className="flex flex-col space-y-2">
-          <input
-            ref={nameInputRef}
-            defaultValue={defaultValue}
-            readOnly={!isEditable}
-            className={cn({
-              'text-ellipsis bg-transparent p-0 text-sm font-medium leading-none': true,
-              'border-transparent': isEditable,
-            })}
-            onKeyDown={handleNameChanges}
-          />
-          {Boolean(item.scenarioUsageCount) && (
-            <span className="flex space-x-1 text-xs">
-              <span>Currently in use in</span>
-              <span className="block rounded-[4px]  bg-blue-400/25 px-1 text-xs font-semibold text-blue-400">
-                {item.scenarioUsageCount}
-              </span>
-              <span>scenarios.</span>
-            </span>
-          )}
-        </div>
-      </div>
-
-      <div className="col-span-2">
-        {id === 'feature' && item.tag && (
-          <Tag className="rounded-2xl bg-yellow-500/10 px-3 py-[2px] font-medium text-yellow-500">
-            <span className="text-xs">{item.tag}</span>
-          </Tag>
-        )}
-      </div>
-
-      <div className="col-span-1 flex space-x-3">
-        <button type="button" onClick={() => toggleSeeOnMap()}>
-          <Icon className="h-4 w-4" icon={true ? SHOW_SVG : HIDE_SVG} />
-        </button>
-        <Popover>
-          <PopoverTrigger asChild>
-            <button type="button" className="rounded-full bg-black">
-              <MoreHorizontal className="text-white" />
-            </button>
-          </PopoverTrigger>
-          <PopoverContent
-            className="w-auto rounded-2xl border-transparent p-0"
-            side="bottom"
-            sideOffset={5}
-            align="start"
-          >
-            {id === 'feature' && (
-              <FeatureActions
-                feature={item}
-                onEditName={handleRename}
-                isDeletable={item.isCustom && !item.scenarioUsageCount}
-              />
-            )}
-          </PopoverContent>
-        </Popover>
-      </div>
-    </>
-  );
-};
-
-export default ItemList;

From 393d2fb96b8e4b08b66e14fbc6da2b234f0afc67 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Tue, 22 Aug 2023 08:26:41 +0100
Subject: [PATCH 19/23] Remove no longer used list component (inventory panel
 features)

---
 .../features/list/actions/index.tsx           | 103 ---------
 .../inventory-panel/features/list/index.tsx   | 210 ------------------
 2 files changed, 313 deletions(-)
 delete mode 100644 app/layout/project/sidebar/project/inventory-panel/features/list/actions/index.tsx
 delete mode 100644 app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx

diff --git a/app/layout/project/sidebar/project/inventory-panel/features/list/actions/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/list/actions/index.tsx
deleted file mode 100644
index c64032733a..0000000000
--- a/app/layout/project/sidebar/project/inventory-panel/features/list/actions/index.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { useCallback, useState, ButtonHTMLAttributes } from 'react';
-
-import { FileEdit, Trash2, Tag } from 'lucide-react';
-
-import Modal from 'components/modal/component';
-import DeleteModal from 'layout/project/sidebar/project/inventory-panel/features/modals/delete';
-import EditModal from 'layout/project/sidebar/project/inventory-panel/features/modals/edit';
-import { Feature } from 'types/api/feature';
-import { cn } from 'utils/cn';
-
-const BUTTON_CLASSES =
-  'flex items-center px-4 py-2 w-full text-sm cursor-pointer bg-gray-700 hover:bg-gray-500 transition transition-colors space-x-2 group';
-
-const ICON_CLASSES = 'text-gray-400 group-hover:text-white';
-
-const FeatureActions = ({
-  feature,
-  onEditName,
-  isDeletable,
-}: {
-  feature: Feature;
-  isDeletable: boolean;
-  onEditName: (evt: Parameters<ButtonHTMLAttributes<HTMLButtonElement>['onClick']>[0]) => void;
-}): JSX.Element => {
-  const [modalState, setModalState] = useState<{ edit: boolean; delete: boolean }>({
-    edit: false,
-    delete: false,
-  });
-
-  const handleModal = useCallback((modalKey: keyof typeof modalState, isVisible: boolean) => {
-    setModalState((prevState) => ({ ...prevState, [modalKey]: isVisible }));
-  }, []);
-
-  return (
-    <ul className="rounded-2xl border-gray-500">
-      <li>
-        <button
-          type="button"
-          onClick={onEditName}
-          className={cn({
-            [BUTTON_CLASSES]: true,
-            'rounded-t-2xl': true,
-          })}
-        >
-          <FileEdit className={ICON_CLASSES} size={20} />
-          <span>Rename</span>
-        </button>
-      </li>
-      <li>
-        <button
-          type="button"
-          onClick={() => handleModal('edit', true)}
-          className={cn({
-            [BUTTON_CLASSES]: true,
-            'last:rounded-b-2xl': !isDeletable,
-          })}
-        >
-          <Tag className={ICON_CLASSES} size={20} />
-          <span>Edit</span>
-        </button>
-        <Modal
-          id="edit-feaure-modal"
-          title="All features"
-          open={modalState.edit}
-          size="narrow"
-          onDismiss={() => handleModal('edit', false)}
-        >
-          <EditModal featureId={feature.id} handleModal={handleModal} />
-        </Modal>
-      </li>
-      {isDeletable && (
-        <li>
-          <button
-            type="button"
-            onClick={() => {
-              handleModal('delete', true);
-            }}
-            className={cn({
-              [BUTTON_CLASSES]: true,
-              'rounded-b-2xl': true,
-            })}
-          >
-            <Trash2 className={ICON_CLASSES} size={20} />
-            <span>Delete</span>
-          </button>
-          <Modal
-            id="delete-feature-modal"
-            dismissable
-            open={modalState.delete}
-            size="narrow"
-            onDismiss={() => {
-              handleModal('delete', false);
-            }}
-          >
-            <DeleteModal selectedFeaturesIds={[feature.id]} />
-          </Modal>
-        </li>
-      )}
-    </ul>
-  );
-};
-
-export default FeatureActions;
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx
deleted file mode 100644
index 78b036a907..0000000000
--- a/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import { useCallback, useState, ChangeEvent, useEffect, useMemo } from 'react';
-
-import { useRouter } from 'next/router';
-
-import { useAppDispatch, useAppSelector } from 'store/hooks';
-import { setSelectedFeatures as setVisibleFeatures } from 'store/slices/projects/[id]';
-
-import { ArrowDown, ArrowUp } from 'lucide-react';
-
-import { useAllFeatures } from 'hooks/features';
-
-import Checkbox from 'components/forms/checkbox';
-import Loading from 'components/loading';
-import ItemList from 'layout/project/sidebar/project/inventory-panel/item-list';
-import { Feature } from 'types/api/feature';
-import { cn } from 'utils/cn';
-
-import FeaturesBulkActionMenu from '../bulk-action-menu';
-
-// import FeatureItemList from './item';
-
-export const ProjectFeatureList = (): JSX.Element => {
-  const dispatch = useAppDispatch();
-  const { selectedFeatures: visibleFeatures, search } = useAppSelector(
-    (state) => state['/projects/[id]']
-  );
-
-  const [filters, setFilters] = useState<Parameters<typeof useAllFeatures>[1]>({
-    sort: 'featureClassName',
-  });
-  const [selectedFeaturesIds, setSelectedFeaturesIds] = useState<Feature['id'][]>([]);
-  const { query } = useRouter();
-  const { pid } = query as { pid: string };
-  const allFeaturesQuery = useAllFeatures<Feature[]>(
-    pid,
-    {
-      ...filters,
-      search,
-    },
-    {
-      select: ({ data }) => data,
-      placeholderData: { data: [] },
-    }
-  );
-  const featureIds = allFeaturesQuery.data?.map((feature) => feature.id);
-
-  const handleSelectAll = useCallback(
-    (evt: ChangeEvent<HTMLInputElement>) => {
-      setSelectedFeaturesIds(evt.target.checked ? featureIds : []);
-    },
-    [featureIds]
-  );
-
-  const handleSelectFeature = useCallback((evt: ChangeEvent<HTMLInputElement>) => {
-    if (evt.target.checked) {
-      setSelectedFeaturesIds((prevSelectedFeatures) => [...prevSelectedFeatures, evt.target.value]);
-    } else {
-      setSelectedFeaturesIds((prevSelectedFeatures) =>
-        prevSelectedFeatures.filter((featureId) => featureId !== evt.target.value)
-      );
-    }
-  }, []);
-
-  const handleSort = useCallback(
-    (_sortType: (typeof filters)['sort']) => {
-      const sort = filters.sort === _sortType ? `-${_sortType}` : _sortType;
-
-      setFilters((prevFilters) => ({
-        ...prevFilters,
-        sort,
-      }));
-    },
-    [filters.sort]
-  );
-
-  useEffect(() => {
-    setSelectedFeaturesIds([]);
-  }, [search]);
-
-  const toggleSeeOnMap = useCallback(
-    (featureId: Feature['id']) => {
-      const newSelectedFeatures = [...visibleFeatures];
-      if (!newSelectedFeatures.includes(featureId)) {
-        newSelectedFeatures.push(featureId);
-      } else {
-        const i = newSelectedFeatures.indexOf(featureId);
-        newSelectedFeatures.splice(i, 1);
-      }
-      dispatch(setVisibleFeatures(newSelectedFeatures));
-    },
-    [dispatch, visibleFeatures]
-  );
-
-  return (
-    <div className="space-y-4">
-      <div className="grid grid-cols-2 gap-8 py-2 pl-1">
-        <div className="col-span-1 flex items-center space-x-2">
-          <Checkbox
-            id="select-all"
-            theme="light"
-            className="block h-4 w-4 checked:bg-blue-400"
-            onChange={handleSelectAll}
-          />
-          <button
-            type="button"
-            className="flex items-center space-x-2"
-            onClick={() => handleSort('featureClassName')}
-          >
-            <span
-              className={cn({
-                'leading-none text-gray-400': true,
-                'text-white': filters.sort.includes('featureClassName'),
-              })}
-            >
-              Name
-            </span>
-            {filters.sort === 'featureClassName' ? (
-              <ArrowDown
-                className={filters.sort === 'featureClassName' ? 'text-blue-400' : 'text-gray-400'}
-                size={20}
-              />
-            ) : (
-              <ArrowUp
-                className={filters.sort === '-featureClassName' ? 'text-blue-400' : 'text-gray-400'}
-                size={20}
-              />
-            )}
-          </button>
-        </div>
-        <div className="col-span-1 flex items-center space-x-2">
-          <button
-            type="button"
-            className="flex items-center space-x-2"
-            onClick={() => handleSort('tag')}
-          >
-            <span
-              className={cn({
-                'leading-none text-gray-400': true,
-                'text-white': filters.sort.includes('tag'),
-              })}
-            >
-              Type
-            </span>
-            {filters.sort === 'tag' ? (
-              <ArrowDown
-                className={filters.sort === 'tag' ? 'text-blue-400' : 'text-gray-400'}
-                size={20}
-              />
-            ) : (
-              <ArrowUp
-                className={filters.sort === '-tag' ? 'text-blue-400' : 'text-gray-400'}
-                size={20}
-              />
-            )}
-          </button>
-        </div>
-      </div>
-      <div className="relative">
-        {allFeaturesQuery.isFetching && (
-          <div className="relative min-h-[200px]">
-            <Loading
-              visible={allFeaturesQuery.isFetching}
-              className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
-            />
-          </div>
-        )}
-
-        {!allFeaturesQuery.data?.length && allFeaturesQuery.isFetching === false && (
-          <div className="flex h-[200px] items-center justify-center">No features found.</div>
-        )}
-        {!allFeaturesQuery.isFetching && (
-          <div
-            className={cn({
-              "flex min-h-0 flex-grow flex-col overflow-hidden before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-[calc(100%-20px)] before:bg-gradient-to-b before:from-gray-700 before:content-[''] after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-[calc(100%-20px)] after:bg-gradient-to-t after:from-gray-700 after:content-['']":
-                true,
-              'after:bottom-12': selectedFeaturesIds.length > 0,
-            })}
-          >
-            <ul className="max-h-[calc(100vh-400px)] divide-y divide-gray-400 overflow-y-auto py-3 pl-1 pr-2">
-              {allFeaturesQuery.data?.map((feature) => (
-                <li key={feature.id} className="flex items-center justify-between py-2 ">
-                  {/* <FeatureItemList
-                    feature={feature}
-                    projectId={pid}
-                    onSelectFeature={handleSelectFeature}
-                    isSelected={selectedFeaturesIds.includes(feature.id)}
-                  /> */}
-                  <ItemList
-                    item={feature}
-                    projectId={pid}
-                    onSelect={handleSelectFeature}
-                    isSelected={selectedFeaturesIds.includes(feature.id)}
-                    toggleSeeOnMap={() => toggleSeeOnMap(feature.id)}
-                    id="feature"
-                  />
-                </li>
-              ))}
-            </ul>
-
-            {selectedFeaturesIds.length > 0 && (
-              <FeaturesBulkActionMenu selectedFeaturesIds={selectedFeaturesIds} />
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ProjectFeatureList;

From 7907cb2f6922a970af0512d42ab093adec113eb4 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Tue, 22 Aug 2023 08:32:22 +0100
Subject: [PATCH 20/23] Fix scrolling issues on features panel

---
 .../inventory-panel/components/inventory-table/index.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
index a94bdfbeee..ba9b35b29a 100644
--- a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
@@ -55,7 +55,7 @@ const InventoryTable = ({
       {noData && <div className="flex h-[200px] items-center justify-center">{noDataMessage}</div>}
       {!loading && !noData && (
         <table className="w-full table-auto">
-          <thead className="text-left text-xs font-semibold uppercase">
+          <thead className="mr-26 block text-left text-xs font-semibold uppercase">
             <tr>
               <th className="pb-2 pt-5">
                 <Checkbox
@@ -65,7 +65,7 @@ const InventoryTable = ({
                   onChange={onSelectAll}
                 />
               </th>
-              <th className="w-full">
+              <th className="w-full pl-2">
                 <HeaderItem
                   text={'Name'}
                   name={'name'}
@@ -74,7 +74,7 @@ const InventoryTable = ({
                   onClick={onSortChange}
                 />
               </th>
-              <th className="pb-2 pt-5 text-center">
+              <th className="pb-2 pt-2 text-center">
                 <HeaderItem
                   className="justify-center"
                   text={'Type'}
@@ -87,7 +87,7 @@ const InventoryTable = ({
               <th className="pb-2 pt-5"></th>
             </tr>
           </thead>
-          <tbody className="align-baseline text-sm">
+          <tbody className="block max-h-[calc(100vh-430px)] divide-y divide-gray-400 overflow-y-scroll pb-3 pl-1 pr-2 align-baseline text-sm">
             {data?.map((item) => (
               <RowItem
                 key={item.id}

From 106c725b4794e665dc0a6d8bfe415b8e61b99b24 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Tue, 22 Aug 2023 09:55:36 +0100
Subject: [PATCH 21/23] Improve how the inventory panel types are defined

---
 .../inventory-table/header-item/index.tsx     | 20 +++------------
 .../inventory-table/header-item/types.ts      | 10 ++++++++
 .../components/inventory-table/index.tsx      | 25 ++-----------------
 .../inventory-table/row-item/index.tsx        | 18 ++-----------
 .../inventory-table/row-item/types.ts         | 12 +++++++++
 .../components/inventory-table/types.ts       | 25 +++++++++++++++++++
 .../project/inventory-panel/constants.ts      |  4 +--
 .../sidebar/project/inventory-panel/index.tsx |  4 +--
 .../sidebar/project/inventory-panel/types.ts  |  6 ++---
 9 files changed, 61 insertions(+), 63 deletions(-)
 create mode 100644 app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/types.ts
 create mode 100644 app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/types.ts
 create mode 100644 app/layout/project/sidebar/project/inventory-panel/components/inventory-table/types.ts

diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx
index e718bf4807..696ecf9d4f 100644
--- a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx
@@ -2,23 +2,9 @@ import { ArrowDown, ArrowUp } from 'lucide-react';
 
 import { cn } from 'utils/cn';
 
-const HeaderItem = ({
-  className,
-  text,
-  name,
-  columns,
-  sorting,
-  onClick,
-}: {
-  className?: string;
-  text: string;
-  name: string;
-  columns: {
-    [key: string]: string;
-  };
-  sorting: string;
-  onClick?: (field: string) => void;
-}) => {
+import { HeaderItem } from './types';
+
+const HeaderItem = ({ className, text, name, columns, sorting, onClick }: HeaderItem) => {
   const sortingMatches = /^(-?)(.+)$/.exec(sorting);
   const sortField = sortingMatches[2];
   const sortOrder = sortingMatches[1] === '-' ? 'desc' : 'asc';
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/types.ts b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/types.ts
new file mode 100644
index 0000000000..b550e8447d
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/types.ts
@@ -0,0 +1,10 @@
+export type HeaderItem = {
+  className?: string;
+  text: string;
+  name: string;
+  columns: {
+    [key: string]: string;
+  };
+  sorting: string;
+  onClick?: (field: string) => void;
+};
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
index ba9b35b29a..c6b398cec8 100644
--- a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
@@ -1,10 +1,9 @@
-import { ChangeEvent } from 'react';
-
 import Checkbox from 'components/forms/checkbox';
 import Loading from 'components/loading';
 
 import HeaderItem from './header-item';
 import RowItem from './row-item';
+import { InventoryTable } from './types';
 
 const InventoryTable = ({
   loading,
@@ -19,27 +18,7 @@ const InventoryTable = ({
   onSelectRow,
   onSelectAll,
   ActionsComponent,
-}: {
-  loading: boolean;
-  data: {
-    id: string;
-    name: string;
-    scenarios: number;
-    tag: string;
-  }[];
-  noDataMessage: string;
-  columns: {
-    [key: string]: string;
-  };
-  sorting: string;
-  selectedIds: string[];
-  visibleFeatures: string[];
-  onSortChange: (field: string) => void;
-  onToggleSeeOnMap: (id: string) => void;
-  onSelectRow: (evt: ChangeEvent<HTMLInputElement>) => void;
-  onSelectAll: (evt: ChangeEvent<HTMLInputElement>) => void;
-  ActionsComponent: ({ item }) => JSX.Element;
-}): JSX.Element => {
+}: InventoryTable): JSX.Element => {
   const noData = !loading && data?.length === 0;
 
   return (
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx
index 382b850478..91c5642379 100644
--- a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx
@@ -1,5 +1,3 @@
-import { ChangeEvent } from 'react';
-
 import { MoreHorizontal } from 'lucide-react';
 
 import Checkbox from 'components/forms/checkbox';
@@ -10,12 +8,7 @@ import { cn } from 'utils/cn';
 import HIDE_SVG from 'svgs/ui/hide.svg?sprite';
 import SHOW_SVG from 'svgs/ui/show.svg?sprite';
 
-type RowItem = {
-  id: string;
-  name: string;
-  scenarios: number;
-  tag: string;
-};
+import { RowItem } from './types';
 
 const RowItem = ({
   item,
@@ -24,14 +17,7 @@ const RowItem = ({
   onSelectRow,
   onToggleSeeOnMap,
   ActionsComponent,
-}: {
-  item: RowItem;
-  visibleFeatures: string[];
-  selectedIds: string[];
-  onSelectRow: (evt: ChangeEvent<HTMLInputElement>) => void;
-  onToggleSeeOnMap: (id: string) => void;
-  ActionsComponent: ({ item }) => JSX.Element;
-}) => {
+}: RowItem) => {
   const { id, name, scenarios, tag } = item;
   const visibleOnMap = visibleFeatures.includes(id);
 
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/types.ts b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/types.ts
new file mode 100644
index 0000000000..fcc82348b8
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/types.ts
@@ -0,0 +1,12 @@
+import { ChangeEvent } from 'react';
+
+import { DataItem } from '../types';
+
+export type RowItem = {
+  item: DataItem;
+  visibleFeatures: string[];
+  selectedIds: string[];
+  onSelectRow: (evt: ChangeEvent<HTMLInputElement>) => void;
+  onToggleSeeOnMap: (id: string) => void;
+  ActionsComponent: ({ item }) => JSX.Element;
+};
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/types.ts b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/types.ts
new file mode 100644
index 0000000000..93410ef193
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/types.ts
@@ -0,0 +1,25 @@
+import { ChangeEvent } from 'react';
+
+export type DataItem = {
+  id: string;
+  name: string;
+  scenarios: number;
+  tag: string;
+};
+
+export type InventoryTable = {
+  loading: boolean;
+  data: DataItem[];
+  noDataMessage: string;
+  columns: {
+    [key: string]: string;
+  };
+  sorting: string;
+  selectedIds: string[];
+  visibleFeatures: string[];
+  onSortChange: (field: string) => void;
+  onToggleSeeOnMap: (id: string) => void;
+  onSelectRow: (evt: ChangeEvent<HTMLInputElement>) => void;
+  onSelectAll: (evt: ChangeEvent<HTMLInputElement>) => void;
+  ActionsComponent: ({ item }) => JSX.Element;
+};
diff --git a/app/layout/project/sidebar/project/inventory-panel/constants.ts b/app/layout/project/sidebar/project/inventory-panel/constants.ts
index b0fa600a57..7acacc1f3d 100644
--- a/app/layout/project/sidebar/project/inventory-panel/constants.ts
+++ b/app/layout/project/sidebar/project/inventory-panel/constants.ts
@@ -7,7 +7,7 @@ import FeaturesInfo from './features/info';
 import FeatureUploadModal from './features/modals/upload';
 import ProtectedAreasTable from './protected-areas';
 import ProtectedAreasFooter from './protected-areas/footer';
-import { Panel } from './types';
+import { InventoryPanel } from './types';
 
 export const INVENTORY_TABS = {
   'protected-areas': {
@@ -33,5 +33,5 @@ export const INVENTORY_TABS = {
     TableComponent: FeaturesTable,
   },
 } satisfies {
-  [key in NavigationInventoryTabs]: Panel;
+  [key in NavigationInventoryTabs]: InventoryPanel;
 };
diff --git a/app/layout/project/sidebar/project/inventory-panel/index.tsx b/app/layout/project/sidebar/project/inventory-panel/index.tsx
index 776bc38e93..16902534ef 100644
--- a/app/layout/project/sidebar/project/inventory-panel/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/index.tsx
@@ -14,14 +14,14 @@ import { NavigationInventoryTabs } from 'layout/project/navigation/types';
 import UPLOAD_SVG from 'svgs/ui/upload.svg?sprite';
 
 import { INVENTORY_TABS } from './constants';
-import { Panel } from './types';
+import { InventoryPanel } from './types';
 
 const InventoryPanel = (): JSX.Element => {
   const dispatch = useAppDispatch();
   const { query } = useRouter();
   const { tab } = query as { tab: NavigationInventoryTabs };
 
-  const panel: Panel = INVENTORY_TABS[tab];
+  const panel = INVENTORY_TABS[tab] as InventoryPanel;
 
   const [isOpenUploader, setOpenUploader] = useState(false);
 
diff --git a/app/layout/project/sidebar/project/inventory-panel/types.ts b/app/layout/project/sidebar/project/inventory-panel/types.ts
index 8e1214c504..644c32bccd 100644
--- a/app/layout/project/sidebar/project/inventory-panel/types.ts
+++ b/app/layout/project/sidebar/project/inventory-panel/types.ts
@@ -1,9 +1,9 @@
-export type Panel = {
+export type InventoryPanel = {
   title: string;
   search: string;
   noData: string;
   InfoComponent?: () => JSX.Element;
-  // TODO Simao: Remove optional when we have upload modals for all tabs
+  // TODO: Remove optional when we have upload modals for all tabs
   UploadModalComponent?: ({
     isOpen,
     onDismiss,
@@ -11,7 +11,7 @@ export type Panel = {
     isOpen?: boolean;
     onDismiss: () => void;
   }) => JSX.Element;
-  // TODO Simao: Remove optional when we have table components for all tabs
+  // TODO: Remove optional when we have table components for all tabs
   TableComponent?: (props) => JSX.Element;
   FooterComponent?: () => JSX.Element;
 };

From 59a82cf8dbeca605816afa6cb024ee613fc61812 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Thu, 24 Aug 2023 13:39:20 +0200
Subject: [PATCH 22/23] minor adjustments to inventory table

---
 .../inventory-table/header-item/index.tsx     |  23 +-
 .../components/inventory-table/index.tsx      |  25 +-
 .../inventory-table/row-item/index.tsx        |  23 +-
 .../inventory-table/row-item/types.ts         |   1 -
 .../components/inventory-table/types.ts       |   2 +-
 .../features/actions-menu/index.tsx           |  30 +-
 .../features/bulk-action-menu/index.tsx       |   2 +-
 .../inventory-panel/features/index.tsx        |  55 ++--
 .../features/modals/edit-bulk/index.tsx       |   2 +-
 .../protected-areas/footer/index.tsx          |  17 +-
 app/layout/sidebar/constants.ts               |  21 --
 app/layout/sidebar/hooks.tsx                  | 113 -------
 app/layout/sidebar/index.tsx                  | 295 ------------------
 app/layout/sidebar/submenu/index.tsx          |  51 ---
 app/layout/sidebar/types.ts                   |   6 -
 app/layout/sidebar/user-menu/constants.ts     |   3 -
 app/layout/sidebar/user-menu/index.tsx        | 184 -----------
 17 files changed, 86 insertions(+), 767 deletions(-)
 delete mode 100644 app/layout/sidebar/constants.ts
 delete mode 100644 app/layout/sidebar/hooks.tsx
 delete mode 100644 app/layout/sidebar/index.tsx
 delete mode 100644 app/layout/sidebar/submenu/index.tsx
 delete mode 100644 app/layout/sidebar/types.ts
 delete mode 100644 app/layout/sidebar/user-menu/constants.ts
 delete mode 100644 app/layout/sidebar/user-menu/index.tsx

diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx
index 696ecf9d4f..45285a4b0c 100644
--- a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx
@@ -1,26 +1,35 @@
+import { useCallback } from 'react';
+
 import { ArrowDown, ArrowUp } from 'lucide-react';
 
 import { cn } from 'utils/cn';
 
 import { HeaderItem } from './types';
 
-const HeaderItem = ({ className, text, name, columns, sorting, onClick }: HeaderItem) => {
+const HeaderItem = ({
+  className,
+  text,
+  name,
+  columns,
+  sorting,
+  onClick,
+}: HeaderItem): JSX.Element => {
   const sortingMatches = /^(-?)(.+)$/.exec(sorting);
   const sortField = sortingMatches[2];
   const sortOrder = sortingMatches[1] === '-' ? 'desc' : 'asc';
 
   const isActive = columns[name] === sortField;
 
-  const handleClick = () => {
+  const handleClick = useCallback(() => {
     onClick(columns[name]);
-  };
+  }, [onClick, columns, name]);
 
   return (
     <button
       type="button"
       className={cn({
-        'inline-flex w-full items-center space-x-2 pb-2 pt-5': true,
-        [className]: true,
+        'inline-flex items-center space-x-2': true,
+        [className]: !!className,
       })}
       onClick={handleClick}
     >
@@ -28,12 +37,12 @@ const HeaderItem = ({ className, text, name, columns, sorting, onClick }: Header
         className={cn({
           'text-xs font-semibold uppercase leading-none text-gray-400': true,
           'text-white': isActive,
-          [className]: true,
+          [className]: !!className,
         })}
       >
         {text}
       </span>
-      {sortOrder === 'asc' ? (
+      {sortOrder === 'asc' && isActive ? (
         <ArrowDown className={isActive ? 'text-blue-400' : 'text-gray-400'} size={20} />
       ) : (
         <ArrowUp className={isActive ? 'text-blue-400' : 'text-gray-400'} size={20} />
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
index c6b398cec8..906bb73aa3 100644
--- a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
@@ -12,7 +12,6 @@ const InventoryTable = ({
   columns,
   sorting,
   selectedIds,
-  visibleFeatures,
   onSortChange,
   onToggleSeeOnMap,
   onSelectRow,
@@ -23,7 +22,7 @@ const InventoryTable = ({
 
   return (
     <>
-      {loading && (
+      {loading && !data.length && (
         <div className="relative min-h-[200px]">
           <Loading
             visible={true}
@@ -32,11 +31,11 @@ const InventoryTable = ({
         </div>
       )}
       {noData && <div className="flex h-[200px] items-center justify-center">{noDataMessage}</div>}
-      {!loading && !noData && (
-        <table className="w-full table-auto">
-          <thead className="mr-26 block text-left text-xs font-semibold uppercase">
-            <tr>
-              <th className="pb-2 pt-5">
+      {!!data?.length && (
+        <table className="w-full table-auto space-y-2">
+          <thead className="text-left text-xs font-semibold uppercase">
+            <tr className="flex w-full items-center pl-1">
+              <th>
                 <Checkbox
                   id="select-all"
                   theme="light"
@@ -44,7 +43,7 @@ const InventoryTable = ({
                   onChange={onSelectAll}
                 />
               </th>
-              <th className="w-full pl-2">
+              <th className="flex-1 pl-2">
                 <HeaderItem
                   text={'Name'}
                   name={'name'}
@@ -53,7 +52,7 @@ const InventoryTable = ({
                   onClick={onSortChange}
                 />
               </th>
-              <th className="pb-2 pt-2 text-center">
+              <th className="flex flex-1 justify-start py-2 pl-14">
                 <HeaderItem
                   className="justify-center"
                   text={'Type'}
@@ -63,15 +62,13 @@ const InventoryTable = ({
                   onClick={onSortChange}
                 />
               </th>
-              <th className="pb-2 pt-5"></th>
             </tr>
           </thead>
-          <tbody className="block max-h-[calc(100vh-430px)] divide-y divide-gray-400 overflow-y-scroll pb-3 pl-1 pr-2 align-baseline text-sm">
-            {data?.map((item) => (
+          <tbody className="block max-h-[calc(100vh-430px)] divide-y divide-gray-400 overflow-y-auto overflow-x-hidden pl-1 align-baseline text-sm">
+            {data.map((item) => (
               <RowItem
                 key={item.id}
                 item={item}
-                visibleFeatures={visibleFeatures}
                 selectedIds={selectedIds}
                 onSelectRow={onSelectRow}
                 onToggleSeeOnMap={onToggleSeeOnMap}
@@ -85,4 +82,6 @@ const InventoryTable = ({
   );
 };
 
+export { type DataItem } from './types';
+
 export default InventoryTable;
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx
index 91c5642379..9facd7eb38 100644
--- a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx
@@ -12,31 +12,29 @@ import { RowItem } from './types';
 
 const RowItem = ({
   item,
-  visibleFeatures,
   selectedIds,
   onSelectRow,
   onToggleSeeOnMap,
   ActionsComponent,
 }: RowItem) => {
-  const { id, name, scenarios, tag } = item;
-  const visibleOnMap = visibleFeatures.includes(id);
+  const { id, name, scenarios, tag, isVisibleOnMap } = item;
 
   return (
-    <tr key={id} className="border-b border-gray-400">
+    <tr key={id} className="align-top">
       <td className="pb-2 pr-1 pt-5">
         <Checkbox
           id={`select-${id}`}
           theme="light"
-          className="-mb-0.5 block h-4 w-4 checked:bg-blue-400"
+          className="block h-4 w-4 checked:bg-blue-400"
           onChange={onSelectRow}
           value={id}
           checked={selectedIds.includes(id)}
         />
       </td>
       <td className="px-1 pb-2 pt-5">
-        <div>{name}</div>
+        <span className="inline-flex">{name}</span>
         <div className="mt-1.5 text-xs text-gray-300">
-          Currently in use in {/* TODO Simao: Replace with <Tag /> component */}
+          Currently in use in
           <span className="rounded bg-blue-500 bg-opacity-10 px-1 text-blue-500">
             {scenarios}
           </span>{' '}
@@ -46,22 +44,21 @@ const RowItem = ({
       <td className="px-6 pb-2 pt-5 text-xs">
         {tag && (
           <div className="flex justify-center">
-            <span className="whitespace-nowrap rounded-full bg-yellow-600 bg-opacity-10 px-2 pb-1 pt-0.5 text-yellow-600">
+            <span className="whitespace-nowrap rounded-full bg-yellow-600 bg-opacity-10 px-2 py-1 text-yellow-600">
               {tag}
             </span>
           </div>
         )}
       </td>
-      <td className="pb-2 pl-1 pt-5">
+      <td className="pb-2 pl-1 pr-2 pt-5">
         <div className="flex gap-6">
           <button type="button" onClick={() => onToggleSeeOnMap(id)}>
             <Icon
               className={cn({
-                'h-5 w-5': true,
-                'text-gray-400': !visibleOnMap,
-                'text-blue-400': visibleOnMap,
+                'h-5 w-5 text-gray-400': true,
+                'text-blue-400': isVisibleOnMap,
               })}
-              icon={visibleOnMap ? SHOW_SVG : HIDE_SVG}
+              icon={isVisibleOnMap ? SHOW_SVG : HIDE_SVG}
             />
           </button>
           <Popover>
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/types.ts b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/types.ts
index fcc82348b8..350ee574ec 100644
--- a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/types.ts
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/types.ts
@@ -4,7 +4,6 @@ import { DataItem } from '../types';
 
 export type RowItem = {
   item: DataItem;
-  visibleFeatures: string[];
   selectedIds: string[];
   onSelectRow: (evt: ChangeEvent<HTMLInputElement>) => void;
   onToggleSeeOnMap: (id: string) => void;
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/types.ts b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/types.ts
index 93410ef193..b89b6d68c8 100644
--- a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/types.ts
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/types.ts
@@ -5,6 +5,7 @@ export type DataItem = {
   name: string;
   scenarios: number;
   tag: string;
+  isVisibleOnMap: boolean;
 };
 
 export type InventoryTable = {
@@ -16,7 +17,6 @@ export type InventoryTable = {
   };
   sorting: string;
   selectedIds: string[];
-  visibleFeatures: string[];
   onSortChange: (field: string) => void;
   onToggleSeeOnMap: (id: string) => void;
   onSelectRow: (evt: ChangeEvent<HTMLInputElement>) => void;
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx
index 3416b7da0e..8f328d2ecb 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx
@@ -1,20 +1,21 @@
-import { useCallback, useState, ButtonHTMLAttributes } from 'react';
-
-import { FileEdit, Trash2, Tag } from 'lucide-react';
+import { useCallback, useState } from 'react';
 
+import Icon from 'components/icon';
 import Modal from 'components/modal/component';
 import DeleteModal from 'layout/project/sidebar/project/inventory-panel/features/modals/delete';
 import EditModal from 'layout/project/sidebar/project/inventory-panel/features/modals/edit';
 import { cn } from 'utils/cn';
 
+import EDIT_SVG from 'svgs/project/edit.svg?sprite';
+import DELETE_SVG from 'svgs/ui/new-layout/delete.svg?sprite';
+
 const BUTTON_CLASSES =
   'flex items-center px-4 py-2 w-full text-sm cursor-pointer bg-gray-700 hover:bg-gray-500 transition transition-colors space-x-2 group';
 
-const ICON_CLASSES = 'text-gray-400 group-hover:text-white';
+const ICON_CLASSES = 'h-5 w-5 text-gray-400 group-hover:text-white';
 
 const ActionsMenu = ({
   item,
-  onEditName,
 }: {
   item: {
     id: string;
@@ -23,7 +24,6 @@ const ActionsMenu = ({
     tag: string;
     custom: boolean;
   };
-  onEditName: (evt: Parameters<ButtonHTMLAttributes<HTMLButtonElement>['onClick']>[0]) => void;
 }): JSX.Element => {
   const isDeletable = !item.custom && !item.scenarios;
 
@@ -39,29 +39,17 @@ const ActionsMenu = ({
 
   return (
     <ul className="rounded-2xl border-gray-500">
-      <li>
-        <button
-          type="button"
-          onClick={onEditName}
-          className={cn({
-            [BUTTON_CLASSES]: true,
-            'rounded-t-2xl': true,
-          })}
-        >
-          <FileEdit className={ICON_CLASSES} size={20} />
-          <span>Rename</span>
-        </button>
-      </li>
       <li>
         <button
           type="button"
           onClick={() => handleModal('edit', true)}
           className={cn({
             [BUTTON_CLASSES]: true,
+            'rounded-t-2xl': true,
             'last:rounded-b-2xl': !isDeletable,
           })}
         >
-          <Tag className={ICON_CLASSES} size={20} />
+          <Icon icon={EDIT_SVG} className={ICON_CLASSES} />
           <span>Edit</span>
         </button>
         <Modal
@@ -86,7 +74,7 @@ const ActionsMenu = ({
               'rounded-b-2xl': true,
             })}
           >
-            <Trash2 className={ICON_CLASSES} size={20} />
+            <Icon icon={DELETE_SVG} className={ICON_CLASSES} />
             <span>Delete</span>
           </button>
           <Modal
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/bulk-action-menu/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/bulk-action-menu/index.tsx
index b692fed2f6..28e051d750 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/bulk-action-menu/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/bulk-action-menu/index.tsx
@@ -30,7 +30,7 @@ const FeaturesBulkActionMenu = ({
 
   return (
     <>
-      <div className="mt-1 grid w-full grid-cols-3 items-center space-x-2 rounded-xl bg-gray-500 p-1">
+      <div className="grid w-full grid-cols-3 items-center space-x-2 rounded-xl bg-gray-500 p-1">
         <span className="col-span-1 flex items-center justify-center space-x-2">
           <span className="block w-[20px] rounded-[4px] bg-blue-400/25 px-1 text-center text-xs font-semibold text-blue-400">
             {selectedFeaturesIds.length}
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/index.tsx
index 8b9e049909..2e5f5967a2 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState, ChangeEvent, useEffect, useMemo } from 'react';
+import { useCallback, useState, ChangeEvent, useEffect } from 'react';
 
 import { useRouter } from 'next/router';
 
@@ -9,11 +9,16 @@ import { useAllFeatures } from 'hooks/features';
 
 import { Feature } from 'types/api/feature';
 
-import InventoryTable from '../components/inventory-table';
+import InventoryTable, { type DataItem } from '../components/inventory-table';
 
 import ActionsMenu from './actions-menu';
 import FeaturesBulkActionMenu from './bulk-action-menu';
 
+const FEATURES_TABLE_COLUMNS = {
+  name: 'featureClassName',
+  tag: 'tag',
+};
+
 const InventoryPanelFeatures = ({ noData: noDataMessage }: { noData: string }): JSX.Element => {
   const dispatch = useAppDispatch();
 
@@ -28,15 +33,23 @@ const InventoryPanelFeatures = ({ noData: noDataMessage }: { noData: string }):
   const { query } = useRouter();
   const { pid } = query as { pid: string };
 
-  const allFeaturesQuery = useAllFeatures<Feature[]>(
+  const allFeaturesQuery = useAllFeatures(
     pid,
     {
       ...filters,
       search,
     },
     {
-      select: ({ data }) => data,
+      select: ({ data }) =>
+        data?.map((feature) => ({
+          id: feature.id,
+          name: feature.featureClassName,
+          scenarios: feature.scenarioUsageCount,
+          tag: feature.tag,
+          isCustom: feature.isCustom,
+        })),
       placeholderData: { data: [] },
+      keepPreviousData: true,
     }
   );
 
@@ -91,36 +104,20 @@ const InventoryPanelFeatures = ({ noData: noDataMessage }: { noData: string }):
 
   const displayBulkActions = selectedFeaturesIds.length > 0;
 
-  const tableColumns = useMemo(
-    () => ({
-      name: 'featureClassName',
-      tag: 'tag',
-    }),
-    []
-  );
-
-  const tableData = useMemo(
-    () =>
-      allFeaturesQuery?.data?.map((entry) => ({
-        id: entry.id,
-        name: entry.featureClassName,
-        scenarios: entry.scenarioUsageCount,
-        tag: entry.tag,
-        isCustom: entry.isCustom,
-      })),
-    [allFeaturesQuery?.data]
-  );
+  const data: DataItem[] = allFeaturesQuery.data?.map((feature) => ({
+    ...feature,
+    isVisibleOnMap: visibleFeatures.includes(feature.id),
+  }));
 
   return (
-    <>
+    <div className="space-y-6">
       <InventoryTable
         loading={allFeaturesQuery.isFetching}
-        data={tableData}
+        data={data}
         noDataMessage={noDataMessage}
-        columns={tableColumns}
-        sorting={filters?.sort}
+        columns={FEATURES_TABLE_COLUMNS}
+        sorting={filters.sort}
         selectedIds={selectedFeaturesIds}
-        visibleFeatures={visibleFeatures}
         onSortChange={handleSort}
         onSelectAll={handleSelectAll}
         onSelectRow={handleSelectFeature}
@@ -128,7 +125,7 @@ const InventoryPanelFeatures = ({ noData: noDataMessage }: { noData: string }):
         ActionsComponent={ActionsMenu}
       />
       {displayBulkActions && <FeaturesBulkActionMenu selectedFeaturesIds={selectedFeaturesIds} />}
-    </>
+    </div>
   );
 };
 
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/modals/edit-bulk/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/modals/edit-bulk/index.tsx
index 3b9b66ca29..33b30b7824 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/modals/edit-bulk/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/modals/edit-bulk/index.tsx
@@ -216,7 +216,7 @@ const EditBulkModal = ({
                       {values.tag && tagIsDone && (
                         <div className="flex items-center space-x-1">
                           <div className="inline-block items-center space-x-2 rounded-2xl border border-yellow-600 bg-yellow-400/50 px-3 py-0.5 hover:bg-yellow-600">
-                            <p className="text-sm first-letter:text-gray-800">{values.tag}</p>
+                            <p className="text-sm text-gray-800">{values.tag}</p>
                           </div>
                           <button
                             className="group flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-gray-300 hover:bg-gray-500"
diff --git a/app/layout/project/sidebar/project/inventory-panel/protected-areas/footer/index.tsx b/app/layout/project/sidebar/project/inventory-panel/protected-areas/footer/index.tsx
index 3a5fa35e0d..081684cc67 100644
--- a/app/layout/project/sidebar/project/inventory-panel/protected-areas/footer/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/protected-areas/footer/index.tsx
@@ -2,17 +2,20 @@ const ProtectedAreasFooter = (): JSX.Element => {
   return (
     <div className="mt-8 text-xs">
       <p className="text-gray-300">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt sem non arcu
-        elementum, et dignissim felis volutpat consectetur adipiscing elit consectetur adipiscing
-        elit.
+        UNEP-WCMC and IUCN (2022), Protected Planet: The World Database on Protected Areas (WDPA)
+        [On-line], [05/2022], Cambridge, UK: UNEP-WCMC and IUCN.
       </p>
 
       <p className="mt-7">
-        Lorem ipsum:{' '}
-        <a className="text-blue-400" href="https://www.google.com" target="_blank">
-          www.google.com
+        Available at:{' '}
+        <a
+          className="text-blue-400"
+          href="https://www.protectedplanet.net/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          www.protectedplanet.net
         </a>
-        .
       </p>
     </div>
   );
diff --git a/app/layout/sidebar/constants.ts b/app/layout/sidebar/constants.ts
deleted file mode 100644
index 50ead6fd76..0000000000
--- a/app/layout/sidebar/constants.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { SidebarTreeCategories } from './types';
-
-export const SIDEBAR_TREE = {
-  user: [],
-  inventory: ['protected-areas', 'cost-surface', 'features'],
-  gridSetup: ['protected-areas', 'cost-surface', 'planning-unit-status'],
-  solutions: ['solutions', 'target-achievement'],
-  advancedSettings: ['advanced-settings', 'blm-calibration'],
-} satisfies { [key in SidebarTreeCategories]: string[] };
-
-export const MENU_COMMON_CLASSES = 'flex flex-col items-center space-y-2';
-export const MENU_ITEM_COMMON_CLASSES =
-  'flex group rounded-xl cursor-pointer bg-transparent transition-colors first:mt-2';
-
-export const MENU_ITEM_ACTIVE_CLASSES =
-  'group/active bg-primary-400 border-primary-400 hover:border-primary-400';
-
-export const ICONS_COMMON_CLASSES =
-  'h-5 w-5 text-gray-500 group-hover:text-white group-hover/active:!text-gray-500';
-
-export const MENU_ITEM_BUTTON_COMMON_CLASSES = 'flex p-[10px]';
diff --git a/app/layout/sidebar/hooks.tsx b/app/layout/sidebar/hooks.tsx
deleted file mode 100644
index 4e9d3cdb98..0000000000
--- a/app/layout/sidebar/hooks.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { useRouter } from 'next/router';
-
-import COST_SURFACE_SVG from 'svgs/sidebar/cost-surface.svg?sprite';
-import FEATURES_SVG from 'svgs/sidebar/features.svg?sprite';
-import PLANNING_UNIT_STATUS_SVG from 'svgs/sidebar/planning-unit-status.svg?sprite';
-import PROTECTED_AREA_SVG from 'svgs/sidebar/protected-area.svg?sprite';
-
-import type { SubMenuItem } from './submenu';
-
-const SCENARIO_ROUTE = '/projects/[pid]/scenarios/[sid]/edit';
-
-export const useInventoryItems = (): SubMenuItem[] => {
-  const { query, route } = useRouter();
-  const { pid, tab } = query as { pid: string; tab: string };
-  const isProjectRoute = route === '/projects/[pid]';
-
-  return [
-    {
-      name: 'Protected areas',
-      route: `/projects/${pid}?tab=protected-areas`,
-      icon: PROTECTED_AREA_SVG,
-      selected: isProjectRoute && tab === 'protected-areas',
-    },
-    {
-      name: 'Cost surface',
-      route: `/projects/${pid}?tab=cost-surface`,
-      icon: COST_SURFACE_SVG,
-      selected: isProjectRoute && tab === 'cost-surface',
-    },
-
-    {
-      name: 'Features',
-      route: `/projects/${pid}?tab=features`,
-      icon: FEATURES_SVG,
-      selected: isProjectRoute && tab === 'features',
-    },
-  ];
-};
-
-export const useGridSetupItems = (): SubMenuItem[] => {
-  const { query, route } = useRouter();
-  const { pid, sid, tab } = query as { pid: string; sid: string; tab: string };
-  const isScenarioRoute = route === SCENARIO_ROUTE;
-
-  return [
-    {
-      name: 'Protected areas',
-      route: `/projects/${pid}/scenarios/${sid}/edit?tab=protected-areas`,
-      icon: PROTECTED_AREA_SVG,
-      selected: isScenarioRoute && tab === 'protected-areas',
-    },
-    {
-      name: 'Cost Surface',
-      route: `/projects/${pid}/scenarios/${sid}/edit?tab=cost-surface`,
-      icon: COST_SURFACE_SVG,
-      selected: isScenarioRoute && tab === 'cost-surface',
-    },
-    {
-      name: 'Planning unit status',
-      route: `/projects/${pid}/scenarios/${sid}/edit?tab=planning-unit-status`,
-      icon: PLANNING_UNIT_STATUS_SVG,
-      selected: isScenarioRoute && tab === 'planning-unit-status',
-    },
-    {
-      name: 'Features',
-      route: `/projects/${pid}/scenarios/${sid}/edit?tab=features`,
-      icon: PROTECTED_AREA_SVG,
-      selected: isScenarioRoute && tab === 'features',
-    },
-  ];
-};
-
-export const useSolutionItems = (): SubMenuItem[] => {
-  const { query, route } = useRouter();
-  const { pid, sid, tab } = query as { pid: string; sid: string; tab: string };
-  const isScenarioRoute = route === SCENARIO_ROUTE;
-
-  return [
-    {
-      name: 'Overview',
-      route: `/projects/${pid}/scenarios/${sid}/edit?tab=solutions`,
-      icon: PROTECTED_AREA_SVG,
-      selected: isScenarioRoute && tab === 'solutions',
-    },
-    {
-      name: 'Target achievement',
-      route: `/projects/${pid}/scenarios/${sid}/edit?tab=target-achievement`,
-      icon: PROTECTED_AREA_SVG,
-      selected: isScenarioRoute && tab === 'target-achievement',
-    },
-  ];
-};
-
-export const useAdvancedSettingsItems = (): SubMenuItem[] => {
-  const { query, route } = useRouter();
-  const { pid, sid, tab } = query as { pid: string; sid: string; tab: string };
-  const isScenarioRoute = route === SCENARIO_ROUTE;
-
-  return [
-    {
-      name: 'Overview',
-      route: `/projects/${pid}/scenarios/${sid}/edit?tab=advanced-settings`,
-      icon: PROTECTED_AREA_SVG,
-      selected: isScenarioRoute && tab === 'advanced-settings',
-    },
-    {
-      name: 'BLM calibration',
-      route: `/projects/${pid}/scenarios/${sid}/edit?tab=blm-calibration`,
-      icon: PROTECTED_AREA_SVG,
-      selected: isScenarioRoute && tab === 'blm-calibration',
-    },
-  ];
-};
diff --git a/app/layout/sidebar/index.tsx b/app/layout/sidebar/index.tsx
deleted file mode 100644
index a83291f674..0000000000
--- a/app/layout/sidebar/index.tsx
+++ /dev/null
@@ -1,295 +0,0 @@
-import { PropsWithChildren, useCallback, useState } from 'react';
-
-import Image from 'next/image';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-
-import { TippyProps } from '@tippyjs/react/headless';
-
-import Icon from 'components/icon';
-import { Popover, PopoverContent, PopoverTrigger } from 'components/popover';
-import Tooltip from 'components/tooltip';
-import { cn } from 'utils/cn';
-
-import ADVANCED_SETTINGS_SVG from 'svgs/sidebar/advanced-settings.svg?sprite';
-import GRID_SETUP_SVG from 'svgs/sidebar/grid-setup.svg?sprite';
-import INVENTORY_SVG from 'svgs/sidebar/inventory.svg?sprite';
-import WHITE_LOGO_SVG from 'svgs/sidebar/logo-white.svg';
-import MENU_SVG from 'svgs/sidebar/menu.svg?sprite';
-import RUN_SCENARIO_SVG from 'svgs/sidebar/run-scenario.svg?sprite';
-import SCENARIO_LIST_SVG from 'svgs/sidebar/scenario-list.svg?sprite';
-import SOLUTIONS_SVG from 'svgs/sidebar/solutions.svg?sprite';
-
-import {
-  MENU_COMMON_CLASSES,
-  MENU_ITEM_COMMON_CLASSES,
-  MENU_ITEM_ACTIVE_CLASSES,
-  MENU_ITEM_BUTTON_COMMON_CLASSES,
-  ICONS_COMMON_CLASSES,
-  SIDEBAR_TREE,
-} from './constants';
-import {
-  useInventoryItems,
-  useGridSetupItems,
-  useSolutionItems,
-  useAdvancedSettingsItems,
-} from './hooks';
-import SubMenu from './submenu';
-import type { SidebarTreeCategories } from './types';
-import UserMenu from './user-menu';
-
-export const MenuTooltip = ({ children }: PropsWithChildren): JSX.Element => {
-  return (
-    <div className="rounded-xl border border-gray-400 bg-gray-700 px-2 py-[0.5px] text-sm text-blue-300">
-      {children}
-    </div>
-  );
-};
-
-export const TOOLTIP_OFFSET: TippyProps['offset'] = [0, 10];
-
-export const Sidebar = (): JSX.Element => {
-  const { query, route } = useRouter();
-  const { pid, sid, tab } = query as { pid: string; sid: string; tab: string };
-
-  const isProjectRoute = route === '/projects/[pid]';
-  const isScenarioRoute = route === '/projects/[pid]/scenarios/[sid]/edit';
-
-  const [submenuState, setSubmenuState] = useState<{ [key in SidebarTreeCategories]: boolean }>({
-    user: false,
-    inventory: isProjectRoute && SIDEBAR_TREE.inventory.includes(tab),
-    gridSetup: isScenarioRoute && SIDEBAR_TREE.gridSetup.includes(tab),
-    solutions: isScenarioRoute && SIDEBAR_TREE.solutions.includes(tab),
-    advancedSettings: isScenarioRoute && SIDEBAR_TREE.advancedSettings.includes(tab),
-  });
-
-  const inventoryItems = useInventoryItems();
-  const gridSetupItems = useGridSetupItems();
-  const solutionsItems = useSolutionItems();
-  const advancedSettingsItems = useAdvancedSettingsItems();
-
-  const toggleSubmenu = useCallback((submenuKey: SidebarTreeCategories) => {
-    if (submenuKey === 'user') {
-      return setSubmenuState((prevState) => ({
-        ...prevState,
-        [submenuKey]: !prevState[submenuKey],
-      }));
-    }
-
-    return setSubmenuState((prevState) => {
-      return Object.keys(prevState).reduce<typeof submenuState>(
-        (acc, key) => ({
-          ...acc,
-          [key]: key === submenuKey ? !prevState[key] : false,
-        }),
-        prevState
-      );
-    });
-  }, []);
-
-  const handleRunScenario = useCallback(() => {
-    // todo: define run scenario button behaviour
-    console.log('handleRunScenario', sid);
-  }, [sid]);
-
-  return (
-    <nav className="flex h-screen max-w-[70px] flex-col items-center justify-between bg-gray-700 px-2 py-8">
-      <div className="flex flex-col">
-        <Link href="/">
-          <Image alt="Marxan logo" width={55} height={7} src={WHITE_LOGO_SVG} />
-        </Link>
-        <div className="space-y-2 divide-y divide-gray-400">
-          {/* // ? Common menu */}
-          <div className="flex flex-col items-center">
-            <ul className={MENU_COMMON_CLASSES}>
-              <li
-                className={cn({
-                  [MENU_ITEM_COMMON_CLASSES]: true,
-                  [MENU_ITEM_ACTIVE_CLASSES]: submenuState.user,
-                })}
-              >
-                <Tooltip
-                  placement="right"
-                  offset={TOOLTIP_OFFSET}
-                  content={<MenuTooltip>Menu</MenuTooltip>}
-                >
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <button
-                        type="button"
-                        className={MENU_ITEM_BUTTON_COMMON_CLASSES}
-                        onClick={() => toggleSubmenu('user')}
-                      >
-                        <Icon className={ICONS_COMMON_CLASSES} icon={MENU_SVG} />
-                      </button>
-                    </PopoverTrigger>
-                    <PopoverContent
-                      side="right"
-                      sideOffset={20}
-                      className="w-80 rounded-b-4xl rounded-tl-xl rounded-tr-4xl bg-white p-4"
-                      collisionPadding={48}
-                      onInteractOutside={() => toggleSubmenu('user')}
-                    >
-                      <UserMenu />
-                    </PopoverContent>
-                  </Popover>
-                </Tooltip>
-              </li>
-            </ul>
-          </div>
-          {/* // ? Project menu */}
-          {(isProjectRoute || isScenarioRoute) && (
-            <ul className={MENU_COMMON_CLASSES}>
-              <li
-                className={cn({
-                  [MENU_ITEM_COMMON_CLASSES]: true,
-                  [MENU_ITEM_ACTIVE_CLASSES]: isProjectRoute && tab,
-                })}
-              >
-                <Tooltip
-                  placement="right"
-                  offset={TOOLTIP_OFFSET}
-                  content={<MenuTooltip>Inventory</MenuTooltip>}
-                >
-                  <button
-                    type="button"
-                    className={MENU_ITEM_BUTTON_COMMON_CLASSES}
-                    onClick={() => toggleSubmenu('inventory')}
-                  >
-                    <Icon
-                      className={cn({
-                        [ICONS_COMMON_CLASSES]: true,
-                        'pointer-events-none': true,
-                      })}
-                      icon={INVENTORY_SVG}
-                    />
-                  </button>
-                </Tooltip>
-              </li>
-              {submenuState.inventory && (
-                <li>
-                  <SubMenu items={inventoryItems} />
-                </li>
-              )}
-              <li
-                className={cn({
-                  [MENU_ITEM_COMMON_CLASSES]: true,
-                  [MENU_ITEM_ACTIVE_CLASSES]: isProjectRoute && !tab,
-                })}
-              >
-                <Tooltip
-                  placement="right"
-                  offset={TOOLTIP_OFFSET}
-                  content={<MenuTooltip>Scenario</MenuTooltip>}
-                >
-                  <Link href={`/projects/${pid}`} className={MENU_ITEM_BUTTON_COMMON_CLASSES}>
-                    <Icon className={ICONS_COMMON_CLASSES} icon={SCENARIO_LIST_SVG} />
-                  </Link>
-                </Tooltip>
-              </li>
-            </ul>
-          )}
-          {/* // ? Scenario menu */}
-          {isScenarioRoute && (
-            <ul className={MENU_COMMON_CLASSES}>
-              <li
-                className={cn({
-                  [MENU_ITEM_COMMON_CLASSES]: true,
-                  [MENU_ITEM_ACTIVE_CLASSES]:
-                    isScenarioRoute && SIDEBAR_TREE.gridSetup.includes(tab),
-                })}
-              >
-                <Tooltip
-                  placement="right"
-                  offset={TOOLTIP_OFFSET}
-                  content={<MenuTooltip>Grid setup</MenuTooltip>}
-                >
-                  <button
-                    type="button"
-                    className={MENU_ITEM_BUTTON_COMMON_CLASSES}
-                    onClick={() => toggleSubmenu('gridSetup')}
-                  >
-                    <Icon className={ICONS_COMMON_CLASSES} icon={GRID_SETUP_SVG} />
-                  </button>
-                </Tooltip>
-              </li>
-              {submenuState.gridSetup && (
-                <li>
-                  <SubMenu items={gridSetupItems} />
-                </li>
-              )}
-              <li
-                className={cn({
-                  [MENU_ITEM_COMMON_CLASSES]: true,
-                  [MENU_ITEM_ACTIVE_CLASSES]:
-                    isScenarioRoute && SIDEBAR_TREE.advancedSettings.includes(tab),
-                })}
-              >
-                <Tooltip
-                  placement="right"
-                  offset={TOOLTIP_OFFSET}
-                  content={<MenuTooltip>Advanced settings</MenuTooltip>}
-                >
-                  <button
-                    type="button"
-                    className={MENU_ITEM_BUTTON_COMMON_CLASSES}
-                    onClick={() => toggleSubmenu('advancedSettings')}
-                  >
-                    <Icon className={ICONS_COMMON_CLASSES} icon={ADVANCED_SETTINGS_SVG} />
-                  </button>
-                </Tooltip>
-              </li>
-              {submenuState.advancedSettings && (
-                <li>
-                  <SubMenu items={advancedSettingsItems} />
-                </li>
-              )}
-              <li
-                className={cn({
-                  [MENU_ITEM_COMMON_CLASSES]: true,
-                  [MENU_ITEM_ACTIVE_CLASSES]:
-                    isScenarioRoute && SIDEBAR_TREE.solutions.includes(tab),
-                })}
-              >
-                <Tooltip
-                  placement="right"
-                  offset={TOOLTIP_OFFSET}
-                  content={<MenuTooltip>Solutions</MenuTooltip>}
-                >
-                  <button
-                    type="button"
-                    className={MENU_ITEM_BUTTON_COMMON_CLASSES}
-                    onClick={() => toggleSubmenu('solutions')}
-                  >
-                    <Icon className={ICONS_COMMON_CLASSES} icon={SOLUTIONS_SVG} />
-                  </button>
-                </Tooltip>
-              </li>
-              {submenuState.solutions && (
-                <li>
-                  <SubMenu items={solutionsItems} />
-                </li>
-              )}
-            </ul>
-          )}
-        </div>
-      </div>
-      {sid && (
-        <div className="group flex flex-col-reverse items-center">
-          <button
-            type="button"
-            className="peer relative flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-tl from-[#01BDFE] to-[#843DC0] transition-colors after:absolute after:left-1/2 after:top-1/2 after:block after:h-[calc(100%-1px)] after:w-[calc(100%-1px)] after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:border after:border-transparent after:bg-gray-700 hover:after:bg-transparent"
-            onClick={handleRunScenario}
-          >
-            <Icon className="z-10 h-6 w-6" icon={RUN_SCENARIO_SVG} />
-          </button>
-          <span className="mb-2 block text-center text-xs text-gray-400 transition-colors peer-hover:text-primary-200">
-            Run scenario
-          </span>
-        </div>
-      )}
-    </nav>
-  );
-};
-
-export default Sidebar;
diff --git a/app/layout/sidebar/submenu/index.tsx b/app/layout/sidebar/submenu/index.tsx
deleted file mode 100644
index 052cbea826..0000000000
--- a/app/layout/sidebar/submenu/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import Link from 'next/link';
-
-import { cn } from 'utils/cn';
-
-import Icon, { IconProps } from 'components/icon';
-import Tooltip from 'components/tooltip';
-
-import { MenuTooltip, TOOLTIP_OFFSET } from '../';
-
-export interface SubMenuItem {
-  name: string;
-  icon: IconProps['icon'];
-  route: string;
-  selected: boolean;
-}
-
-export const SubMenu = ({ items }: { items: SubMenuItem[] }): JSX.Element => {
-  return (
-    <ul className="space-y-5 rounded-xl border border-gray-400 py-4">
-      {items.map((item) => (
-        <Tooltip
-          key={item.route}
-          placement="right"
-          offset={TOOLTIP_OFFSET}
-          content={<MenuTooltip>{item.name}</MenuTooltip>}
-        >
-          <li className="group">
-            <Link
-              href={item.route}
-              className={cn({
-                'flex px-[10px]': true,
-                'relative overflow-hidden before:absolute before:-left-[1px] before:block before:h-full before:w-[3px] before:rounded-sm before:bg-blue-400 before:drop-shadow-blue after:absolute after:-right-[1px] after:block after:h-full after:w-[3px] after:rounded-sm after:bg-blue-400 after:drop-shadow-blue':
-                  item.selected,
-              })}
-            >
-              <Icon
-                icon={item.icon}
-                className={cn({
-                  'h-5 w-5 group-hover:text-primary-400': true,
-                  'text-primary-400': item.selected,
-                })}
-              />
-            </Link>
-          </li>
-        </Tooltip>
-      ))}
-    </ul>
-  );
-};
-
-export default SubMenu;
diff --git a/app/layout/sidebar/types.ts b/app/layout/sidebar/types.ts
deleted file mode 100644
index c1877a3ee4..0000000000
--- a/app/layout/sidebar/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type SidebarTreeCategories =
-  | 'user'
-  | 'inventory'
-  | 'gridSetup'
-  | 'solutions'
-  | 'advancedSettings';
diff --git a/app/layout/sidebar/user-menu/constants.ts b/app/layout/sidebar/user-menu/constants.ts
deleted file mode 100644
index fdd86b29fc..0000000000
--- a/app/layout/sidebar/user-menu/constants.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const ITEM_COMMON_CLASSES = 'flex items-center justify-between rounded-3xl bg-gray-50 p-4';
-export const ITEM_TITLE_COMMON_CLASSES = 'flex items-center space-x-2 font-medium text-black';
-export const ITEM_DESCRIPTION_COMMON_CLASSES = 'text-gray-400 leading-normal';
diff --git a/app/layout/sidebar/user-menu/index.tsx b/app/layout/sidebar/user-menu/index.tsx
deleted file mode 100644
index 5e3be10301..0000000000
--- a/app/layout/sidebar/user-menu/index.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import { useCallback } from 'react';
-
-import { useQuery } from 'react-query';
-
-import Link from 'next/link';
-
-import axios from 'axios';
-import { signOut, useSession } from 'next-auth/react';
-import { usePlausible } from 'next-plausible';
-
-import { useHelp } from 'hooks/help';
-import { useMe } from 'hooks/me';
-import { COLOR_ME } from 'hooks/project-users';
-
-import Avatar from 'components/avatar';
-import Button from 'components/button';
-import { Switch } from 'components/forms/switch';
-import Icon from 'components/icon';
-import { cn } from 'utils/cn';
-
-import HELP_GUIDE_SVG from 'svgs/sidebar/help-guide.svg?sprite';
-import EDIT_PROFILE_SVG from 'svgs/sidebar/pencil.svg?sprite';
-import DOCUMENTATION_SVG from 'svgs/ui/documentation.svg?sprite';
-import SIGN_OUT_SVG from 'svgs/ui/sign-out.svg?sprite';
-
-import {
-  ITEM_COMMON_CLASSES,
-  ITEM_TITLE_COMMON_CLASSES,
-  ITEM_DESCRIPTION_COMMON_CLASSES,
-} from './constants';
-
-export const UserMenu = (): JSX.Element => {
-  const { data: session } = useSession();
-  const { user } = useMe();
-  const { active, onActive } = useHelp();
-  const plausible = usePlausible();
-
-  const { data: totalProjects } = useQuery(['user-total-projects', user.id], {
-    queryFn: () =>
-      axios
-        .get(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/projects`, {
-          headers: {
-            Authorization: `Bearer ${session.accessToken}`,
-          },
-        })
-        .then((response) => response.data),
-    enabled: Boolean(session),
-    select: ({ meta }) => meta.totalItems,
-  });
-
-  const handleSignOut = useCallback(async () => {
-    await signOut();
-  }, []);
-
-  const onToggleHelpGuide = useCallback(() => {
-    onActive(!active);
-    if (active) {
-      plausible('Activate help guide', {
-        props: {
-          userId: `${user.id}`,
-          userEmail: `${user.email}`,
-        },
-      });
-    }
-  }, [active, onActive, plausible, user.id, user.email]);
-
-  return (
-    <div className="flex flex-col divide-y divide-gray-200 text-gray-500">
-      <div className="mb-3 flex space-x-2">
-        <div>
-          <Avatar
-            bgImage={user.avatar}
-            {...(!user.avatar && { bgColor: COLOR_ME })}
-            className="border-transparent"
-          >
-            {!user.avatar && user.displayName.slice(0, 2).toUpperCase()}
-          </Avatar>
-        </div>
-        <div className="flex flex-col space-y-2">
-          <div className="">
-            <h2>{user.displayName}</h2>
-            <h3 className="text-sm text-gray-400">{user.email}</h3>
-          </div>
-          <div className="flex space-x-2">
-            <Button
-              href="/me"
-              theme="clear"
-              size="s"
-              className="flex items-center space-x-2 rounded-xl border border-gray-500"
-            >
-              <Icon icon={EDIT_PROFILE_SVG} className="h-5 w-5" />
-              <span>Edit profile</span>
-            </Button>
-            <Button
-              theme="clear"
-              size="s"
-              onClick={handleSignOut}
-              className="flex items-center space-x-2 rounded-xl border border-gray-500"
-            >
-              <Icon icon={SIGN_OUT_SVG} className="h-5 w-5" />
-              <span>Log out</span>
-            </Button>
-          </div>
-        </div>
-      </div>
-      <div>
-        <ul className="mt-2 space-y-2">
-          <li>
-            <Link
-              href="/projects"
-              className={cn({
-                [ITEM_COMMON_CLASSES]: true,
-                'items-start space-x-5 bg-transparent': true,
-              })}
-            >
-              <div className="rounded-xl bg-gray-50 p-2">
-                <Icon icon={EDIT_PROFILE_SVG} className="h-5 w-5" />
-              </div>
-              <div className="space-y-1">
-                <h4 className={ITEM_TITLE_COMMON_CLASSES}>
-                  <span>Projects dashboard</span>
-                  <span className="block rounded-[4px] border border-blue-300 bg-blue-100 px-1 text-xs font-semibold">
-                    {totalProjects}
-                  </span>
-                </h4>
-                <span className={ITEM_DESCRIPTION_COMMON_CLASSES}>
-                  Get a high-level summary of your projects and progress.
-                </span>
-              </div>
-            </Link>
-          </li>
-          {/* <li>
-            <Link
-              href="/team"
-              className={cn({
-                [ITEM_COMMON_CLASSES]: true,
-                'items-start space-x-5 bg-transparent': true,
-              })}
-            >
-              <div className="rounded-xl bg-gray-50 p-2">
-                <Icon icon={COMMUNITY_SVG} className="h-5 w-5" />
-              </div>
-              <div>
-                <h4 className={ITEM_TITLE_COMMON_CLASSES}>Manage team</h4>
-                <span className={ITEM_DESCRIPTION_COMMON_CLASSES}>
-                  Lorem ipsum dolor sit amet augue fringilla consequat
-                </span>
-              </div>
-            </Link>
-          </li> */}
-          <li className={ITEM_COMMON_CLASSES}>
-            <div className="flex items-center space-x-2">
-              <div className="rounded-xl bg-white p-2">
-                <Icon icon={HELP_GUIDE_SVG} className="h-5 w-5" />
-              </div>
-              <span className={ITEM_TITLE_COMMON_CLASSES}>Help Guide</span>
-            </div>
-            <Switch onCheckedChange={onToggleHelpGuide} className="bg-gray-500" />
-          </li>
-          <li>
-            <Link
-              href="/community/projects"
-              className="flex items-center space-x-2 rounded-3xl bg-[url('/images/bg-community-projects.png')] bg-right-bottom p-4"
-            >
-              <div className="rounded-xl bg-blue-400 p-2 text-white">
-                <Icon icon={DOCUMENTATION_SVG} className="h-5 w-5" />
-              </div>
-              <h4
-                className={cn({
-                  [ITEM_TITLE_COMMON_CLASSES]: true,
-                  'text-white': true,
-                })}
-              >
-                Community projects
-              </h4>
-            </Link>
-          </li>
-        </ul>
-      </div>
-    </div>
-  );
-};
-
-export default UserMenu;

From b0c97a5671b0daffdf417fac4982701dbf361dc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Thu, 24 Aug 2023 16:52:26 +0200
Subject: [PATCH 23/23] updates icons

---
 .../project/inventory-panel/features/actions-menu/index.tsx   | 4 ++--
 .../inventory-panel/features/bulk-action-menu/index.tsx       | 2 +-
 app/svgs/ui/edit.svg                                          | 4 ++++
 app/svgs/ui/tag.svg                                           | 3 +++
 4 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 app/svgs/ui/edit.svg
 create mode 100644 app/svgs/ui/tag.svg

diff --git a/app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx
index 8f328d2ecb..9d5cf5c54d 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx
@@ -6,8 +6,8 @@ import DeleteModal from 'layout/project/sidebar/project/inventory-panel/features
 import EditModal from 'layout/project/sidebar/project/inventory-panel/features/modals/edit';
 import { cn } from 'utils/cn';
 
-import EDIT_SVG from 'svgs/project/edit.svg?sprite';
 import DELETE_SVG from 'svgs/ui/new-layout/delete.svg?sprite';
+import TAG_SVG from 'svgs/ui/tag.svg?sprite';
 
 const BUTTON_CLASSES =
   'flex items-center px-4 py-2 w-full text-sm cursor-pointer bg-gray-700 hover:bg-gray-500 transition transition-colors space-x-2 group';
@@ -49,7 +49,7 @@ const ActionsMenu = ({
             'last:rounded-b-2xl': !isDeletable,
           })}
         >
-          <Icon icon={EDIT_SVG} className={ICON_CLASSES} />
+          <Icon icon={TAG_SVG} className={ICON_CLASSES} />
           <span>Edit</span>
         </button>
         <Modal
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/bulk-action-menu/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/bulk-action-menu/index.tsx
index 28e051d750..ab35ef62c6 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/bulk-action-menu/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/bulk-action-menu/index.tsx
@@ -7,7 +7,7 @@ import DeleteModal from 'layout/project/sidebar/project/inventory-panel/features
 import EditBulkModal from 'layout/project/sidebar/project/inventory-panel/features/modals/edit-bulk';
 import { Feature } from 'types/api/feature';
 
-import EDIT_SVG from 'svgs/project/edit.svg?sprite';
+import EDIT_SVG from 'svgs/ui/edit.svg?sprite';
 import DELETE_SVG from 'svgs/ui/new-layout/delete.svg?sprite';
 
 const BUTTON_CLASSES =
diff --git a/app/svgs/ui/edit.svg b/app/svgs/ui/edit.svg
new file mode 100644
index 0000000000..2ce49b14ad
--- /dev/null
+++ b/app/svgs/ui/edit.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.43327 13.9172L6.69527 10.7622C6.89641 10.2596 7.19749 9.80302 7.58027 9.42018L14.5003 2.50218C14.8981 2.10436 15.4377 1.88086 16.0003 1.88086C16.5629 1.88086 17.1024 2.10436 17.5003 2.50218C17.8981 2.9 18.1216 3.43957 18.1216 4.00218C18.1216 4.56479 17.8981 5.10435 17.5003 5.50218L10.5803 12.4202C10.1973 12.8032 9.74027 13.1052 9.23727 13.3062L6.08327 14.5682C5.9924 14.6046 5.89286 14.6135 5.79699 14.5938C5.70111 14.5741 5.61311 14.5267 5.54391 14.4575C5.4747 14.3883 5.42733 14.3003 5.40766 14.2045C5.38799 14.1086 5.3969 14.009 5.43327 13.9182V13.9172Z" />
+<path d="M3.5 5.75C3.5 5.06 4.06 4.5 4.75 4.5H10C10.1989 4.5 10.3897 4.42098 10.5303 4.28033C10.671 4.13968 10.75 3.94891 10.75 3.75C10.75 3.55109 10.671 3.36032 10.5303 3.21967C10.3897 3.07902 10.1989 3 10 3H4.75C4.02065 3 3.32118 3.28973 2.80546 3.80546C2.28973 4.32118 2 5.02065 2 5.75V15.25C2 15.9793 2.28973 16.6788 2.80546 17.1945C3.32118 17.7103 4.02065 18 4.75 18H14.25C14.9793 18 15.6788 17.7103 16.1945 17.1945C16.7103 16.6788 17 15.9793 17 15.25V10C17 9.80109 16.921 9.61032 16.7803 9.46967C16.6397 9.32902 16.4489 9.25 16.25 9.25C16.0511 9.25 15.8603 9.32902 15.7197 9.46967C15.579 9.61032 15.5 9.80109 15.5 10V15.25C15.5 15.94 14.94 16.5 14.25 16.5H4.75C4.06 16.5 3.5 15.94 3.5 15.25V5.75Z" />
+</svg>
diff --git a/app/svgs/ui/tag.svg b/app/svgs/ui/tag.svg
new file mode 100644
index 0000000000..a8f174ebd0
--- /dev/null
+++ b/app/svgs/ui/tag.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 3C4.83696 3 4.20107 3.26339 3.73223 3.73223C3.26339 4.20107 3 4.83696 3 5.5V8.379C3.00014 9.04174 3.26343 9.67731 3.732 10.146L10.232 16.646C10.4642 16.8782 10.7398 17.0624 11.0431 17.1881C11.3465 17.3138 11.6716 17.3785 12 17.3785C12.3284 17.3785 12.6535 17.3138 12.9569 17.1881C13.2602 17.0624 13.5358 16.8782 13.768 16.646L16.646 13.768C16.8782 13.5358 17.0624 13.2602 17.1881 12.9569C17.3138 12.6535 17.3785 12.3284 17.3785 12C17.3785 11.6716 17.3138 11.3465 17.1881 11.0431C17.0624 10.7398 16.8782 10.4642 16.646 10.232L10.146 3.732C9.67755 3.26368 9.0424 3.00041 8.38 3H5.5ZM6 7C6.26522 7 6.51957 6.89464 6.70711 6.70711C6.89464 6.51957 7 6.26522 7 6C7 5.73478 6.89464 5.48043 6.70711 5.29289C6.51957 5.10536 6.26522 5 6 5C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6C5 6.26522 5.10536 6.51957 5.29289 6.70711C5.48043 6.89464 5.73478 7 6 7Z" />
+</svg>