From 7948e4b2e08773e4dd8602185824669857aadff0 Mon Sep 17 00:00:00 2001
From: GurTati <118075413+gurtatiLND@users.noreply.github.com>
Date: Mon, 9 Dec 2024 23:09:16 +0000
Subject: [PATCH] refactor: add styles

---
 src/app/toolkit/components/CategoriesBar.tsx | 112 +++++++++++++------
 src/app/toolkit/components/ToolList.tsx      |   2 +-
 2 files changed, 80 insertions(+), 34 deletions(-)

diff --git a/src/app/toolkit/components/CategoriesBar.tsx b/src/app/toolkit/components/CategoriesBar.tsx
index 2c8df0d1..2d30e381 100644
--- a/src/app/toolkit/components/CategoriesBar.tsx
+++ b/src/app/toolkit/components/CategoriesBar.tsx
@@ -35,7 +35,7 @@ function CategoriesBar({ openModal, refreshCategories }: CategoriesBarProps) {
       }
     };
     fetchCategories();
-  }, [refreshCategories]);
+  }, [refreshCategories, database]);
 
   const handleCategoriesClick = (category: string) => {
     setSelectedCategories(
@@ -46,39 +46,85 @@ function CategoriesBar({ openModal, refreshCategories }: CategoriesBarProps) {
   };
 
   return (
-    <div className={categoriesBarClass} data-testid="categories-bar">
-      <Button label="+" onClick={openModal} />
-      <Button
-        key={"All"}
-        label={"All"}
-        className={`${
-          selectedCategories.length == 0
-            ? "bg-twd-secondary-purple text-white"
-            : "bg-twd-background text-white"
-        }`}
-        onClick={() => setSelectedCategories([])}
-        ariaPressed={selectedCategories.length == 0}
-      />
-
-      {categories.map((categories) => {
-        const isActive = selectedCategories.includes(categories);
-
-        return (
-          <Button
-            key={categories}
-            label={categories}
-            className={`${
-              isActive
-                ? "bg-twd-secondary-purple text-white"
-                : "bg-twd-background text-white"
-            }`}
-            onClick={() => handleCategoriesClick(categories)}
-            ariaPressed={isActive}
-          />
-        );
-      })}
+    <div
+      className={categoriesBarClass}
+      data-testid="categories-bar"
+    >
+      {/* Fixed "+" Button */}
+      <div className="flex-shrink-0">
+        <Button label="+" onClick={openModal} className="bg-twd-primary-purple"/>
+      </div>
+  
+      {/* Scrollable Categories */}
+      <div className="flex overflow-x-auto whitespace-nowrap space-x-2 flex-grow">
+        <Button
+          key={"All"}
+          label={"All"}
+          className={`${
+            selectedCategories.length === 0
+              ? "bg-twd-secondary-purple text-white"
+              : "bg-twd-background text-white"
+          }`}
+          onClick={() => setSelectedCategories([])}
+          ariaPressed={selectedCategories.length === 0}
+        />
+  
+        {categories.map((category) => {
+          const isActive = selectedCategories.includes(category);
+  
+          return (
+            <Button
+              key={category}
+              label={category}
+              className={`${
+                isActive
+                  ? "bg-twd-secondary-purple text-white"
+                  : "bg-twd-background text-white"
+              }`}
+              onClick={() => handleCategoriesClick(category)}
+              ariaPressed={isActive}
+            />
+          );
+        })}
+      </div>
     </div>
   );
-};
+}
+
+//   return (
+//     <div className={categoriesBarClass} data-testid="categories-bar">
+//       <Button label="+" onClick={openModal} />
+//       <Button
+//         key={"All"}
+//         label={"All"}
+//         className={`${
+//           selectedCategories.length == 0
+//             ? "bg-twd-secondary-purple text-white"
+//             : "bg-twd-background text-white"
+//         }`}
+//         onClick={() => setSelectedCategories([])}
+//         ariaPressed={selectedCategories.length == 0}
+//       />
+
+//       {categories.map((categories) => {
+//         const isActive = selectedCategories.includes(categories);
+
+//         return (
+//           <Button
+//             key={categories}
+//             label={categories}
+//             className={`${
+//               isActive
+//                 ? "bg-twd-secondary-purple text-white"
+//                 : "bg-twd-background text-white"
+//             }`}
+//             onClick={() => handleCategoriesClick(categories)}
+//             ariaPressed={isActive}
+//           />
+//         );
+//       })}
+//     </div>
+//   );
+// };
 
 export default CategoriesBar;
diff --git a/src/app/toolkit/components/ToolList.tsx b/src/app/toolkit/components/ToolList.tsx
index e70c42cc..5a441c00 100644
--- a/src/app/toolkit/components/ToolList.tsx
+++ b/src/app/toolkit/components/ToolList.tsx
@@ -41,7 +41,7 @@ export default function ToolkitList() {
       }
     };
     fetchData();
-  }, []);
+  }, [database]);
 
   // Toggle item `checked` state
   const handleToggle = (id: string) => {