refactor: Update icon dark mode comparison (#9060)

* Update icon dark mode comparison

* [autofix.ci] apply automated fixes

* coderabbit fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

.cursor/rules/icons.mdc

@@ -48,7 +48,6 @@ To ensure consistent, clear, and functional icon usage for components, covering
     ```
   - Create an `index.tsx` that exports your icon using `forwardRef`:
     ```tsx
-    import { useDarkStore } from "@/stores/darkStore";
     import React, { forwardRef } from "react";
     import AstraSVG from "./AstraDB";
 
@@ -56,26 +55,25 @@ To ensure consistent, clear, and functional icon usage for components, covering
       SVGSVGElement,
       React.PropsWithChildren<{}>
     >((props, ref) => {
-      const isdark = useDarkStore((state) => state.dark).toString();
+      return <AstraSVG ref={ref} isDark={isDark} {...props} />;
-      return <AstraSVG ref={ref} isdark={isdark} {...props} />;
     });
     ```
 
 #### Supporting Light and Dark Mode Icons
 
 - **How:**
-  - In your SVG component (e.g., `AstraDB.jsx`), use the `isdark` prop to switch colors:
+  - In your SVG component (e.g., `AstraDB.jsx`), use the `isDark` prop to switch colors:
     ```jsx
     const AstraSVG = (props) => (
       <svg {...props}>
         <path
-          fill={stringToBool(props.isdark) ? "#ffffff" : "#0A0A0A"}
+          fill={props.isDark ? "#ffffff" : "#0A0A0A"}
           // ...
         />
       </svg>
     );
     ```
-  - The `isdark` prop is passed from the icon wrapper (see above) and should be used to toggle between light and dark color schemes.
+  - The `isDark` prop is passed from the icon wrapper (see above) and should be used to toggle between light and dark color schemes.
   - You can use a utility like `stringToBool` to ensure the prop is interpreted correctly.
 
 ### b. Add to Lazy Icon Imports
@@ -102,7 +100,7 @@ To ensure consistent, clear, and functional icon usage for components, covering
 - **Missing Icon:**
   If no icon exists, use a [lucide icon](https://lucide.dev/icons)
 - **Light/Dark Mode:**
-  Always support both light and dark mode for custom icons by using the `isdark` prop in your SVG.
+  Always support both light and dark mode for custom icons by using the `isDark` prop in your SVG.
 
 ---
 
@@ -112,7 +110,7 @@ To ensure consistent, clear, and functional icon usage for components, covering
 - [ ] In your Python component, set `icon = "YourIconName"`.
 - [ ] Create a new icon directory in `src/frontend/src/icons/YourIconName/`.
 - [ ] Add your SVG as a React component (e.g., `YourIconNameIcon.jsx`).
-- [ ] Create an `index.tsx` that exports your icon using `forwardRef` and passes the `isdark` prop.
+- [ ] Create an `index.tsx` that exports your icon using `forwardRef` and passes the `isDark` prop.
 - [ ] Add your icon to `lazyIconsMapping` in `src/frontend/src/icons/lazyIconImports.ts` with the exact same name.
 - [ ] Verify the icon appears correctly in the UI in both light and dark mode.
 - [ ] If no suitable icon exists, use a generic icon and request a new one if needed.
@@ -125,8 +123,8 @@ To ensure consistent, clear, and functional icon usage for components, covering
   icon = "AstraDB"
   ```
 - Frontend:
-  - `src/icons/AstraDB/AstraDB.jsx` (SVG as React component, uses `isdark` prop)
+  - `src/icons/AstraDB/AstraDB.jsx` (SVG as React component, uses `isDark` prop)
-  - `src/icons/AstraDB/index.tsx` (exports `AstraDBIcon` and passes `isdark`)
+  - `src/icons/AstraDB/index.tsx` (exports `AstraDBIcon` and passes `isDark`)
   - Add to `lazyIconImports.ts`:
     ```ts
     AstraDB: () =>

.pre-commit-config.yaml

@@ -29,7 +29,7 @@ repos:
     hooks:
       - id: local-biome-check
         name: biome check
-        entry: bash -c 'cd src/frontend && npx @biomejs/biome check --write --files-ignore-unknown=true --no-errors-on-unmatched'
+        entry: bash -c 'cd src/frontend && npx @biomejs/biome check --write --files-ignore-unknown=true --no-errors-on-unmatched --diagnostic-level=error'
         language: system
         types: [text]
         files: "\\.(jsx?|tsx?|c(js|ts)|m(js|ts)|d\\.(ts|cts|mts)|jsonc?)$"

src/frontend/src/components/common/genericIconComponent/index.tsx

@@ -7,7 +7,8 @@ import React, {
   useState,
 } from "react";
 import { Skeleton } from "@/components/ui/skeleton";
-import type { IconComponentProps } from "../../../types/components";
+import { useDarkStore } from "../../../stores/darkStore";
+import { IconComponentProps } from "../../../types/components";
 import { getCachedIcon, getNodeIcon } from "../../../utils/styleUtils";
 import { cn } from "../../../utils/utils";
 
@@ -26,6 +27,10 @@ export const ForwardedIconComponent = memo(
       }: IconComponentProps,
       ref,
     ) => {
+      // Subscribe to dark store directly in memoized component
+      // This forces re-render when theme changes, bypassing memo
+      const { dark: isDark } = useDarkStore();
+
       const [showFallback, setShowFallback] = useState(false);
       const [iconError, setIconError] = useState(false);
       const [TargetIcon, setTargetIcon] = useState<any>(getCachedIcon(name));
@@ -109,6 +114,7 @@ export const ForwardedIconComponent = memo(
                 className={className}
                 style={style}
                 ref={ref}
+                isDark={isDark}
                 data-testid={
                   dataTestId
                     ? dataTestId

src/frontend/src/icons/AWS/AWS.jsx

@@ -1,5 +1,3 @@
-import { stringToBool } from "@/utils/utils";
-
 const SvgAWS = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -14,7 +12,7 @@ const SvgAWS = (props) => (
     <style>{".st1{fill-rule:evenodd;clip-rule:evenodd;fill:#f90}"}</style>
     <path
       d="M86.4 66.4c0 3.7.4 6.7 1.1 8.9.8 2.2 1.8 4.6 3.2 7.2.5.8.7 1.6.7 2.3 0 1-.6 2-1.9 3L83.2 92c-.9.6-1.8.9-2.6.9-1 0-2-.5-3-1.4-1.4-1.5-2.6-3.1-3.6-4.7-1-1.7-2-3.6-3.1-5.9-7.8 9.2-17.6 13.8-29.4 13.8-8.4 0-15.1-2.4-20-7.2-4.9-4.8-7.4-11.2-7.4-19.2 0-8.5 3-15.4 9.1-20.6 6.1-5.2 14.2-7.8 24.5-7.8 3.4 0 6.9.3 10.6.8 3.7.5 7.5 1.3 11.5 2.2v-7.3c0-7.6-1.6-12.9-4.7-16-3.2-3.1-8.6-4.6-16.3-4.6-3.5 0-7.1.4-10.8 1.3-3.7.9-7.3 2-10.8 3.4-1.6.7-2.8 1.1-3.5 1.3-.7.2-1.2.3-1.6.3-1.4 0-2.1-1-2.1-3.1v-4.9c0-1.6.2-2.8.7-3.5.5-.7 1.4-1.4 2.8-2.1 3.5-1.8 7.7-3.3 12.6-4.5C41 1.9 46.2 1.3 51.7 1.3c11.9 0 20.6 2.7 26.2 8.1 5.5 5.4 8.3 13.6 8.3 24.6v32.4zM45.8 81.6c3.3 0 6.7-.6 10.3-1.8 3.6-1.2 6.8-3.4 9.5-6.4 1.6-1.9 2.8-4 3.4-6.4.6-2.4 1-5.3 1-8.7v-4.2c-2.9-.7-6-1.3-9.2-1.7-3.2-.4-6.3-.6-9.4-.6-6.7 0-11.6 1.3-14.9 4-3.3 2.7-4.9 6.5-4.9 11.5 0 4.7 1.2 8.2 3.7 10.6 2.4 2.5 5.9 3.7 10.5 3.7zm80.3 10.8c-1.8 0-3-.3-3.8-1-.8-.6-1.5-2-2.1-3.9L96.7 10.2c-.6-2-.9-3.3-.9-4 0-1.6.8-2.5 2.4-2.5h9.8c1.9 0 3.2.3 3.9 1 .8.6 1.4 2 2 3.9l16.8 66.2 15.6-66.2c.5-2 1.1-3.3 1.9-3.9.8-.6 2.2-1 4-1h8c1.9 0 3.2.3 4 1 .8.6 1.5 2 1.9 3.9l15.8 67 17.3-67c.6-2 1.3-3.3 2-3.9.8-.6 2.1-1 3.9-1h9.3c1.6 0 2.5.8 2.5 2.5 0 .5-.1 1-.2 1.6-.1.6-.3 1.4-.7 2.5l-24.1 77.3c-.6 2-1.3 3.3-2.1 3.9-.8.6-2.1 1-3.8 1h-8.6c-1.9 0-3.2-.3-4-1-.8-.7-1.5-2-1.9-4L156 23l-15.4 64.4c-.5 2-1.1 3.3-1.9 4-.8.7-2.2 1-4 1h-8.6zm128.5 2.7c-5.2 0-10.4-.6-15.4-1.8-5-1.2-8.9-2.5-11.5-4-1.6-.9-2.7-1.9-3.1-2.8-.4-.9-.6-1.9-.6-2.8v-5.1c0-2.1.8-3.1 2.3-3.1.6 0 1.2.1 1.8.3.6.2 1.5.6 2.5 1 3.4 1.5 7.1 2.7 11 3.5 4 .8 7.9 1.2 11.9 1.2 6.3 0 11.2-1.1 14.6-3.3 3.4-2.2 5.2-5.4 5.2-9.5 0-2.8-.9-5.1-2.7-7-1.8-1.9-5.2-3.6-10.1-5.2L246 52c-7.3-2.3-12.7-5.7-16-10.2-3.3-4.4-5-9.3-5-14.5 0-4.2.9-7.9 2.7-11.1 1.8-3.2 4.2-6 7.2-8.2 3-2.3 6.4-4 10.4-5.2 4-1.2 8.2-1.7 12.6-1.7 2.2 0 4.5.1 6.7.4 2.3.3 4.4.7 6.5 1.1 2 .5 3.9 1 5.7 1.6 1.8.6 3.2 1.2 4.2 1.8 1.4.8 2.4 1.6 3 2.5.6.8.9 1.9.9 3.3v4.7c0 2.1-.8 3.2-2.3 3.2-.8 0-2.1-.4-3.8-1.2-5.7-2.6-12.1-3.9-19.2-3.9-5.7 0-10.2.9-13.3 2.8-3.1 1.9-4.7 4.8-4.7 8.9 0 2.8 1 5.2 3 7.1 2 1.9 5.7 3.8 11 5.5l14.2 4.5c7.2 2.3 12.4 5.5 15.5 9.6 3.1 4.1 4.6 8.8 4.6 14 0 4.3-.9 8.2-2.6 11.6-1.8 3.4-4.2 6.4-7.3 8.8-3.1 2.5-6.8 4.3-11.1 5.6-4.5 1.4-9.2 2.1-14.3 2.1z"
-      fill={stringToBool(props.isdark) ? "#ffffff" : "#252f3e"}
+      fill={props.isDark ? "#ffffff" : "#252f3e"}
     />
     <path
       d="M273.5 143.7c-32.9 24.3-80.7 37.2-121.8 37.2-57.6 0-109.5-21.3-148.7-56.7-3.1-2.8-.3-6.6 3.4-4.4 42.4 24.6 94.7 39.5 148.8 39.5 36.5 0 76.6-7.6 113.5-23.2 5.5-2.5 10.2 3.6 4.8 7.6z"

src/frontend/src/icons/AWS/index.tsx

@@ -1,11 +1,8 @@
-import type React from "react";
+import React, { forwardRef } from "react";
-import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import SvgAWS from "./AWS";
 
 export const AWSIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
-    const isdark = useDarkStore((state) => state.dark).toString();
+    return <SvgAWS ref={ref} {...props} />;
-    return <SvgAWS ref={ref} isdark={isdark} {...props} />;
   },
 );

src/frontend/src/icons/AWSInverted/AWS.jsx

@@ -1,5 +1,3 @@
-import { stringToBool } from "@/utils/utils";
-
 const SvgAWS = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -14,7 +12,7 @@ const SvgAWS = (props) => (
     <style>{".st1{fill-rule:evenodd;clip-rule:evenodd;fill:#f90}"}</style>
     <path
       d="M86.4 66.4c0 3.7.4 6.7 1.1 8.9.8 2.2 1.8 4.6 3.2 7.2.5.8.7 1.6.7 2.3 0 1-.6 2-1.9 3L83.2 92c-.9.6-1.8.9-2.6.9-1 0-2-.5-3-1.4-1.4-1.5-2.6-3.1-3.6-4.7-1-1.7-2-3.6-3.1-5.9-7.8 9.2-17.6 13.8-29.4 13.8-8.4 0-15.1-2.4-20-7.2-4.9-4.8-7.4-11.2-7.4-19.2 0-8.5 3-15.4 9.1-20.6 6.1-5.2 14.2-7.8 24.5-7.8 3.4 0 6.9.3 10.6.8 3.7.5 7.5 1.3 11.5 2.2v-7.3c0-7.6-1.6-12.9-4.7-16-3.2-3.1-8.6-4.6-16.3-4.6-3.5 0-7.1.4-10.8 1.3-3.7.9-7.3 2-10.8 3.4-1.6.7-2.8 1.1-3.5 1.3-.7.2-1.2.3-1.6.3-1.4 0-2.1-1-2.1-3.1v-4.9c0-1.6.2-2.8.7-3.5.5-.7 1.4-1.4 2.8-2.1 3.5-1.8 7.7-3.3 12.6-4.5C41 1.9 46.2 1.3 51.7 1.3c11.9 0 20.6 2.7 26.2 8.1 5.5 5.4 8.3 13.6 8.3 24.6v32.4zM45.8 81.6c3.3 0 6.7-.6 10.3-1.8 3.6-1.2 6.8-3.4 9.5-6.4 1.6-1.9 2.8-4 3.4-6.4.6-2.4 1-5.3 1-8.7v-4.2c-2.9-.7-6-1.3-9.2-1.7-3.2-.4-6.3-.6-9.4-.6-6.7 0-11.6 1.3-14.9 4-3.3 2.7-4.9 6.5-4.9 11.5 0 4.7 1.2 8.2 3.7 10.6 2.4 2.5 5.9 3.7 10.5 3.7zm80.3 10.8c-1.8 0-3-.3-3.8-1-.8-.6-1.5-2-2.1-3.9L96.7 10.2c-.6-2-.9-3.3-.9-4 0-1.6.8-2.5 2.4-2.5h9.8c1.9 0 3.2.3 3.9 1 .8.6 1.4 2 2 3.9l16.8 66.2 15.6-66.2c.5-2 1.1-3.3 1.9-3.9.8-.6 2.2-1 4-1h8c1.9 0 3.2.3 4 1 .8.6 1.5 2 1.9 3.9l15.8 67 17.3-67c.6-2 1.3-3.3 2-3.9.8-.6 2.1-1 3.9-1h9.3c1.6 0 2.5.8 2.5 2.5 0 .5-.1 1-.2 1.6-.1.6-.3 1.4-.7 2.5l-24.1 77.3c-.6 2-1.3 3.3-2.1 3.9-.8.6-2.1 1-3.8 1h-8.6c-1.9 0-3.2-.3-4-1-.8-.7-1.5-2-1.9-4L156 23l-15.4 64.4c-.5 2-1.1 3.3-1.9 4-.8.7-2.2 1-4 1h-8.6zm128.5 2.7c-5.2 0-10.4-.6-15.4-1.8-5-1.2-8.9-2.5-11.5-4-1.6-.9-2.7-1.9-3.1-2.8-.4-.9-.6-1.9-.6-2.8v-5.1c0-2.1.8-3.1 2.3-3.1.6 0 1.2.1 1.8.3.6.2 1.5.6 2.5 1 3.4 1.5 7.1 2.7 11 3.5 4 .8 7.9 1.2 11.9 1.2 6.3 0 11.2-1.1 14.6-3.3 3.4-2.2 5.2-5.4 5.2-9.5 0-2.8-.9-5.1-2.7-7-1.8-1.9-5.2-3.6-10.1-5.2L246 52c-7.3-2.3-12.7-5.7-16-10.2-3.3-4.4-5-9.3-5-14.5 0-4.2.9-7.9 2.7-11.1 1.8-3.2 4.2-6 7.2-8.2 3-2.3 6.4-4 10.4-5.2 4-1.2 8.2-1.7 12.6-1.7 2.2 0 4.5.1 6.7.4 2.3.3 4.4.7 6.5 1.1 2 .5 3.9 1 5.7 1.6 1.8.6 3.2 1.2 4.2 1.8 1.4.8 2.4 1.6 3 2.5.6.8.9 1.9.9 3.3v4.7c0 2.1-.8 3.2-2.3 3.2-.8 0-2.1-.4-3.8-1.2-5.7-2.6-12.1-3.9-19.2-3.9-5.7 0-10.2.9-13.3 2.8-3.1 1.9-4.7 4.8-4.7 8.9 0 2.8 1 5.2 3 7.1 2 1.9 5.7 3.8 11 5.5l14.2 4.5c7.2 2.3 12.4 5.5 15.5 9.6 3.1 4.1 4.6 8.8 4.6 14 0 4.3-.9 8.2-2.6 11.6-1.8 3.4-4.2 6.4-7.3 8.8-3.1 2.5-6.8 4.3-11.1 5.6-4.5 1.4-9.2 2.1-14.3 2.1z"
-      fill={!stringToBool(props.isdark) ? "#ffffff" : "#252f3e"}
+      fill={props.isDark ? "#ffffff" : "#252f3e"}
     />
     <path
       d="M273.5 143.7c-32.9 24.3-80.7 37.2-121.8 37.2-57.6 0-109.5-21.3-148.7-56.7-3.1-2.8-.3-6.6 3.4-4.4 42.4 24.6 94.7 39.5 148.8 39.5 36.5 0 76.6-7.6 113.5-23.2 5.5-2.5 10.2 3.6 4.8 7.6z"

src/frontend/src/icons/AWSInverted/index.tsx

@@ -1,12 +1,10 @@
 import type React from "react";
 import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import SvgAWS from "./AWS";
 
 export const AWSInvertedIcon = forwardRef<
   SVGSVGElement,
   React.PropsWithChildren<{}>
 >((props, ref) => {
-  const isdark = useDarkStore((state) => state.dark).toString();
+  return <SvgAWS ref={ref} {...props} />;
-  return <SvgAWS ref={ref} isdark={isdark} {...props} />;
 });

src/frontend/src/icons/Anthropic/Anthropic.jsx

@@ -1,5 +1,5 @@
-const SvgAnthropicBox = ({ isDark, ...props }) => {
+const SvgAnthropicBox = (props) => {
-  return isDark ? (
+  return props.isDark ? (
     <svg
       width="38"
       height="38"

src/frontend/src/icons/Anthropic/index.tsx

@@ -1,13 +1,9 @@
-import type React from "react";
+import React, { forwardRef } from "react";
-import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import SvgAnthropicBox from "./Anthropic";
 
 export const AnthropicIcon = forwardRef<
   SVGSVGElement,
   React.PropsWithChildren<{}>
 >((props, ref) => {
-  const isDark = useDarkStore((state) => state.dark);
+  return <SvgAnthropicBox ref={ref} {...props} />;
-
-  return <SvgAnthropicBox ref={ref} {...props} isDark={isDark} />;
 });

src/frontend/src/icons/AstraDB/AstraDB.jsx

@@ -1,5 +1,3 @@
-import { stringToBool } from "@/utils/utils";
-
 const AstraSVG = (props) => (
   <svg
     width="167"
@@ -11,11 +9,11 @@ const AstraSVG = (props) => (
   >
     <path
       d="M60.2338 0.25H0.000244141V67.75H60.2338L75.365 56.0752V11.9248L60.2338 0.25ZM11.6732 11.9248H63.692V56.0874H11.6732V11.9248Z"
-      fill={stringToBool(props.isdark) ? "#ffffff" : "#0A0A0A"}
+      fill={props.isDark ? "#ffffff" : "#0A0A0A"}
     />
     <path
       d="M162.038 12.415V1H106.964L92.0097 12.415V28.088L106.964 39.503H154.962V55.585H94.9883V67H151.546L166.5 55.585V39.503L151.546 28.088H103.547V12.415H162.038Z"
-      fill={stringToBool(props.isdark) ? "#ffffff" : "#0A0A0A"}
+      fill={props.isDark ? "#ffffff" : "#0A0A0A"}
     />
   </svg>
 );

src/frontend/src/icons/AstraDB/index.tsx

@@ -1,12 +1,9 @@
-import type React from "react";
+import React, { forwardRef } from "react";
-import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import AstraSVG from "./AstraDB";
 
 export const AstraDBIcon = forwardRef<
   SVGSVGElement,
   React.PropsWithChildren<{}>
 >((props, ref) => {
-  const isdark = useDarkStore((state) => state.dark).toString();
+  return <AstraSVG ref={ref} {...props} />;
-  return <AstraSVG ref={ref} isdark={isdark} {...props} />;
 });

src/frontend/src/icons/BW python/Python.jsx

@@ -11,21 +11,17 @@ export const BWSvgPython = (props) => (
       <path
         id="path1948"
         d="M7.73326 0.000129445C7.08782 0.00312847 6.47144 0.0581749 5.92909 0.154143C4.3314 0.436402 4.04133 1.0272 4.04133 2.11672V3.55565H7.81686V4.03529H4.04133H2.6244C1.52712 4.03529 0.566317 4.69482 0.265789 5.94946C-0.0808665 7.38757 -0.0962426 8.28498 0.265789 9.7866C0.534167 10.9044 1.17509 11.7008 2.27237 11.7008H3.57048V9.97582C3.57048 8.72964 4.64871 7.63041 5.92909 7.63041H9.70023C10.75 7.63041 11.588 6.76608 11.588 5.71184V2.11672C11.588 1.09353 10.7248 0.32491 9.70023 0.154143C9.05165 0.0461786 8.37869 -0.00286962 7.73326 0.000129445ZM5.69147 1.15743C6.08146 1.15743 6.39994 1.48111 6.39994 1.8791C6.39994 2.27567 6.08146 2.59636 5.69147 2.59636C5.30009 2.59636 4.98301 2.27567 4.98301 1.8791C4.98301 1.48111 5.30009 1.15743 5.69147 1.15743Z"
-        fill={props.isdark === "true" ? "white" : "black"}
+        fill={props.isDark ? "white" : "black"}
       />
       <path
         id="path1950"
         d="M12.0589 4.03528V5.71183C12.0589 7.01163 10.9569 8.10564 9.70029 8.10564H5.92915C4.89617 8.10564 4.04138 8.98973 4.04138 10.0242V13.6193C4.04138 14.6425 4.93112 15.2444 5.92915 15.5379C7.12427 15.8893 8.27033 15.9528 9.70029 15.5379C10.6508 15.2627 11.5881 14.7089 11.5881 13.6193V12.1804H7.81692V11.7008H11.5881H13.4758C14.5731 11.7008 14.982 10.9354 15.3636 9.78659C15.7578 8.60392 15.741 7.4666 15.3636 5.94945C15.0924 4.8571 14.5745 4.03528 13.4758 4.03528H12.0589ZM9.93791 13.1397C10.3293 13.1397 10.6464 13.4604 10.6464 13.857C10.6464 14.2549 10.3293 14.5786 9.93791 14.5786C9.54792 14.5786 9.22944 14.2549 9.22944 13.857C9.22945 13.4604 9.54792 13.1397 9.93791 13.1397Z"
-        fill={props.isdark === "true" ? "white" : "black"}
+        fill={props.isDark ? "white" : "black"}
       />
     </g>
     <defs>
       <clipPath id="clip0_2342_182">
-        <rect
+        <rect width="16" height="16" fill={props.isDark ? "black" : "white"} />
-          width="16"
-          height="16"
-          fill={props.isdark === "true" ? "black" : "white"}
-        />
       </clipPath>
     </defs>
   </svg>

src/frontend/src/icons/BW python/index.tsx

@@ -1,12 +1,10 @@
 import type React from "react";
 import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import BWSvgPython from "./Python";
 
 export const BWPythonIcon = forwardRef<
   SVGSVGElement,
   React.PropsWithChildren<{}>
 >((props, ref) => {
-  const isdark = useDarkStore((state) => state.dark.toString());
+  return <BWSvgPython ref={ref} {...props} />;
-  return <BWSvgPython ref={ref} {...props} isdark={isdark} />;
 });

src/frontend/src/icons/Cleanlab/Cleanlab.jsx

@@ -1,8 +1,4 @@
-import { stringToBool } from "@/utils/utils";
-
 const SvgCleanlab = (props) => {
-  const isDark = stringToBool(props.isdark);
-
   return (
     <svg
       width={697}
@@ -15,11 +11,11 @@ const SvgCleanlab = (props) => {
       <path
         d="M341.847921,185.264125c-13.42293,23.249376-12.347471,50.877388,0.401709,72.451244,3.225931,5.459143,3.345505,12.207007,0.174798,17.69869l-48.852472,84.61514c-3.18275,5.512656-9.1167,8.767205-15.481774,8.699138-12.415908-.13284-25.026497,2.950045-36.559278,9.6085-34.331853,19.821505-46.094999,63.721679-26.273494,98.053532,19.821549,34.33193,63.721743,46.094757,98.053597,26.273252,11.532781-6.658454,20.508022-16.037949,26.600933-26.85686,3.123545-5.546426,8.909087-9.058026,15.274517-9.058117l97.705052.000012c6.314731.000014,12.107535,3.432422,15.203594,8.93605,12.65789,22.501254,37.082709,37.493928,64.94011,36.600417,38.349672-1.230173,69.281722-33.108828,69.419913-71.478015.143192-39.764396-32.048611-72.044287-71.779567-72.044476-26.846015-.00009-50.235009,14.745435-62.54359,36.573359-3.114983,5.523677-8.899051,9.00096-15.239989,9.000931l-95.950864.000159c-15.201841-.000006-24.703043-16.45657-17.102128-29.621754l47.975569-83.095807c3.157398-5.468647,9.026328-8.769166,15.340538-8.698443,25.815666.288662,51.012155-13.367473,64.167032-37.93976,17.644134-32.958183,6.647958-74.587984-24.980446-94.51786-34.663711-21.84271-80.199374-10.350384-100.49376,24.800671Z
          M323.785578,413.729145c14.784192,25.606971,6.010559,58.350615-19.596489,73.134851s-58.350647,6.01068-73.134927-19.596445-6.010559-58.350615,19.596489-73.134851c25.607048-14.784236,58.350647-6.01068,73.134927,19.596445Z"
-        fill={isDark ? "#FFFFFF" : "#000000"}
+        fill={props.isDark ? "#FFFFFF" : "#000000"}
       />
       <path
         d="M572.283355,593.964596c-47.042646,32.305387-103.837611,51.438401-165.06516,52.07923-164.731918,1.724141-300.426141-132.22655-300.738501-296.967195-.312099-164.602718,133.029516-298.13692,297.559776-298.13692,62.422076,0,120.354912,19.221075,168.202634,52.06751,1.932802,1.326827,4.559313-.028862,4.559337-2.373257l.000546-53.16979c.000011-1.048757-.562682-2.02097-1.475604-2.537173C525.033846,16.489584,466.971795.188457,405.117629.001612,212.700173-.579629,55.540912,156.084111,55.54226,348.502446c.001349,192.470068,156.029578,348.497554,348.499958,348.497554,62.256594,0,120.700306-16.324561,171.284182-44.926817.912763-.516115,1.475336-1.488098,1.475331-2.536674l-.000234-53.172985c-.00001-2.322378-2.603713-3.713615-4.518142-2.398928Z"
-        fill={isDark ? "#FFFFFF" : "#000000"}
+        fill={props.isDark ? "#FFFFFF" : "#000000"}
       />
     </svg>
   );

src/frontend/src/icons/Cleanlab/index.tsx

@@ -1,12 +1,9 @@
-import type React from "react";
+import React, { forwardRef } from "react";
-import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import SvgCleanlab from "./Cleanlab";
 
 export const CleanlabIcon = forwardRef<
   SVGSVGElement,
   React.PropsWithChildren<{}>
 >((props, ref) => {
-  const isdark = useDarkStore((state) => state.dark).toString();
+  return <SvgCleanlab ref={ref} {...props} />;
-  return <SvgCleanlab ref={ref} isdark={isdark} {...props} />;
 });

src/frontend/src/icons/Composio/composio.jsx

@@ -13,7 +13,7 @@ const Icon = (props) => (
         fillRule="evenodd"
         clipRule="evenodd"
         d="M6.27406 0.685082C8.46664 -0.228361 10.9302 -0.228361 13.1229 0.685082C14.6773 1.33267 16.0054 2.40178 16.9702 3.75502C17.6126 4.65574 17.0835 5.84489 16.045 6.21613L13.5108 7.12189C12.9962 7.30585 12.4289 7.26812 11.9429 7.01756C11.8253 6.95701 11.7298 6.86089 11.6696 6.74266L10.2591 3.97469C10.0249 3.51519 9.37195 3.51519 9.13783 3.97469L7.72731 6.74274C7.66714 6.86089 7.57155 6.95701 7.454 7.01756L4.70187 8.43618C4.24501 8.67169 4.24501 9.3284 4.70187 9.56391L7.454 10.9825C7.57155 11.0431 7.66714 11.1392 7.72731 11.2574L9.13783 14.0254C9.37195 14.4849 10.0249 14.4849 10.2591 14.0254L11.6696 11.2574C11.7298 11.1392 11.8253 11.0431 11.9428 10.9825C12.429 10.7319 12.9965 10.6942 13.5112 10.8781L16.045 11.7838C17.0835 12.1551 17.6126 13.3442 16.9704 14.245C16.0054 15.5982 14.6774 16.6674 13.1229 17.315C10.9302 18.2283 8.46664 18.2283 6.27406 17.315C4.0814 16.4015 2.33935 14.6494 1.43116 12.4441C0.522946 10.2389 0.522946 7.76111 1.43116 5.55582C2.33935 3.3506 4.0814 1.59853 6.27406 0.685082ZM9.12456 7.82641L8.58683 8.60689L8.58642 8.60775C8.36097 8.93485 8.24822 9.09843 8.31033 9.22703L8.31366 9.23343C8.37938 9.36023 8.57412 9.36023 8.96401 9.36023C9.18056 9.36023 9.28872 9.36023 9.35667 9.42863L9.36021 9.43244C9.42677 9.50228 9.42677 9.61388 9.42677 9.83716V9.89555C9.42677 10.5145 9.42677 10.8238 9.58885 10.8771C9.7508 10.9304 9.92434 10.6786 10.2714 10.175L10.2724 10.1736L10.8101 9.39284C11.0358 9.0656 11.1487 8.90166 11.0866 8.77299L11.0834 8.76659C11.0175 8.63979 10.8228 8.63979 10.4329 8.63979C10.2163 8.63979 10.1082 8.63979 10.0402 8.57139L10.0367 8.56765C9.97012 8.49774 9.97012 8.38614 9.97012 8.16287V8.10447C9.97012 7.48556 9.97012 7.17618 9.80804 7.1229C9.64596 7.06955 9.47207 7.32183 9.12456 7.82641Z"
-        fill={props.isdark === "true" ? "white" : "black"}
+        fill={props.isDark ? "white" : "black"}
       />
     </g>
   </svg>

src/frontend/src/icons/Composio/index.tsx

@@ -1,13 +1,9 @@
-import type React from "react";
+import React, { forwardRef } from "react";
-import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import ComposioIconSVG from "./composio";
 
 export const ComposioIcon = forwardRef<
   SVGSVGElement,
   React.PropsWithChildren<{}>
 >((props, ref) => {
-  const isdark = useDarkStore((state) => state.dark).toString();
+  return <ComposioIconSVG ref={ref} {...props} />;
-
-  return <ComposioIconSVG ref={ref} isdark={isdark} {...props} />;
 });

src/frontend/src/icons/DeepSeek/DeepSeekIcon.jsx

@@ -1,5 +1,3 @@
-import { stringToBool } from "@/utils/utils";
-
 const DeepSeekSVG = (props) => (
   <svg
     version="1.0"
@@ -12,7 +10,7 @@ const DeepSeekSVG = (props) => (
   >
     <g
       transform="translate(0.000000,225.000000) scale(0.100000,-0.100000)"
-      fill={stringToBool(props.isdark) ? "#1f3a94" : "#4c6cfc"}
+      fill={props.isDark ? "#1f3a94" : "#4c6cfc"}
       stroke="none"
     >
       <path

src/frontend/src/icons/DeepSeek/index.tsx

@@ -1,12 +1,10 @@
 import type React from "react";
 import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import DeepSeekSVG from "./DeepSeekIcon";
 
 export const DeepSeekIcon = forwardRef<
   SVGSVGElement,
   React.PropsWithChildren<{}>
 >((props, ref) => {
-  const isdark = useDarkStore((state) => state.dark).toString();
+  return <DeepSeekSVG ref={ref} {...props} />;
-  return <DeepSeekSVG ref={ref} isdark={isdark} {...props} />;
 });

src/frontend/src/icons/HCD/HCD.jsx

@@ -1,5 +1,3 @@
-import { stringToBool } from "@/utils/utils";
-
 const HCDSVG = (props) => (
   <svg
     viewBox="12 33 72 29"
@@ -11,11 +9,11 @@ const HCDSVG = (props) => (
       {/* <rect width="96" height="96" rx="6" fill="white"/> */}
       <path
         d="M38.0469 33H12V62.1892H38.0469L44.5902 57.1406V38.0485L38.0469 33ZM17.0478 38.0485H39.5424V57.1459H17.0478V38.0485Z"
-        fill={stringToBool(props.isdark) ? "#ffffff" : "#0A0A0A"}
+        fill={props.isDark ? "#ffffff" : "#0A0A0A"}
       />
       <path
         d="M82.0705 38.2605V33.3243H58.2546L51.788 38.2605V45.038L58.2546 49.9742H79.0107V56.9286H53.076V61.8648H77.5334L84 56.9286V49.9742L77.5334 45.038H56.7772V38.2605H82.0705Z"
-        fill={stringToBool(props.isdark) ? "#ffffff" : "#0A0A0A"}
+        fill={props.isDark ? "#ffffff" : "#0A0A0A"}
       />
     </g>
     <defs>

src/frontend/src/icons/HCD/index.tsx

@@ -1,12 +1,8 @@
-import type React from "react";
+import React, { forwardRef } from "react";
-import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import HCDSVG from "./HCD";
 
 export const HCDIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
-    const isdark = useDarkStore((state) => state.dark).toString();
+    return <HCDSVG ref={ref} {...props} />;
-
-    return <HCDSVG ref={ref} isdark={isdark} {...props} />;
   },
 );

src/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx

@@ -1,8 +1,6 @@
-import { stringToBool } from "@/utils/utils";
-
 const SvgWatsonxAI = (props) => (
   <svg
-    fill={stringToBool(props.isdark) ? "#ffffff" : "#0A0A0A"}
+    fill={props.isDark ? "#ffffff" : "#0A0A0A"}
     fillRule="evenodd"
     style={{ flex: "none", lineHeight: 1 }}
     viewBox="0 0 32 32"

src/frontend/src/icons/IBMWatsonx/index.tsx

@@ -1,12 +1,9 @@
-import type React from "react";
+import React, { forwardRef } from "react";
-import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import SvgWatsonxAI from "./WatsonxAI";
 
 export const WatsonxAiIcon = forwardRef<
   SVGSVGElement,
   React.PropsWithChildren<{}>
 >((props, ref) => {
-  const isdark = useDarkStore((state) => state.dark).toString();
+  return <SvgWatsonxAI ref={ref} {...props} />;
-  return <SvgWatsonxAI ref={ref} isdark={isdark} {...props} />;
 });

src/frontend/src/icons/JSicon/JSIcon.jsx

@@ -4,7 +4,7 @@ const SvgJSIcon = (props) => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
-    filter={props.isdark === "true" ? "invert(100%)" : "invert(0%)"}
+    filter={props.isDark ? "invert(100%)" : "invert(0%)"}
   >
     <g id="Frame" clipPath="url(#clip0_2046_939)">
       <path id="Vector" d="M16 0H0V16H16V0Z" fill="black" />

src/frontend/src/icons/JSicon/index.tsx

@@ -1,11 +1,9 @@
 import type React from "react";
 import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import SvgJSIcon from "./JSIcon";
 
 export const JSIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
-    const isdark = useDarkStore((state) => state.dark.toString());
+    return <SvgJSIcon ref={ref} {...props} />;
-    return <SvgJSIcon ref={ref} {...props} isdark={isdark} />;
   },
 );

src/frontend/src/icons/JigsawStack/JigsawStackIcon.jsx

@@ -1,4 +1,4 @@
-const JigsawStackIconSVG = ({ isdark, ...props }) => (
+const JigsawStackIconSVG = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="278"
@@ -9,7 +9,7 @@ const JigsawStackIconSVG = ({ isdark, ...props }) => (
   >
     <path
       fill={
-        stringToBool(isdark)
+        props.isDark
           ? "url(#paint0_linear_102_21_dark)"
           : "url(#paint0_linear_102_21)"
       }

src/frontend/src/icons/JigsawStack/index.tsx

@@ -6,6 +6,5 @@ export const JigsawStackIcon = forwardRef<
   SVGSVGElement,
   React.PropsWithChildren<{}>
 >((props, ref) => {
-  const isdark = useDarkStore((state) => state.dark).toString();
+  return <JigsawStackIconSVG ref={ref} {...props} />;
-  return <JigsawStackIconSVG ref={ref} {...props} isdark={isdark} />;
 });

src/frontend/src/icons/MCP/McpIcon.jsx

@@ -3,7 +3,7 @@ const SvgMcpIcon = (props) => {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 16 16"
-      fill={props.isdark ? "white" : "black"}
+      fill={props.isDark ? "white" : "black"}
       {...props}
     >
       <g clip-path="url(#clip0_93_974)">

src/frontend/src/icons/MCP/index.tsx

@@ -1,11 +1,8 @@
-import type React from "react";
+import React, { forwardRef } from "react";
-import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import SvgMcpIcon from "./McpIcon";
 
 export const McpIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
-    const isdark = useDarkStore((state) => state.dark);
+    return <SvgMcpIcon ref={ref} {...props} />;
-    return <SvgMcpIcon ref={ref} isdark={isdark} {...props} />;
   },
 );

src/frontend/src/icons/Mem0/SvgMem.jsx

@@ -1,5 +1,3 @@
-import { stringToBool } from "@/utils/utils";
-
 export default function SvgMem0(props) {
   return (
     <svg
@@ -10,7 +8,7 @@ export default function SvgMem0(props) {
     >
       <g
         transform="translate(0.000000,127.000000) scale(0.100000,-0.100000)"
-        fill={stringToBool(props.isdark) ? "#ffffff" : "#000000"}
+        fill={props.isDark ? "#ffffff" : "#000000"}
         stroke="none"
       >
         <path d="M648 1248 c-26 -22 -29 -47 -8 -68 25 -25 42 -25 63 -2 22 24 21 45 -1 65 -22 20 -33 21 -54 5z" />

src/frontend/src/icons/Mem0/index.tsx

@@ -1,11 +1,8 @@
-import type React from "react";
+import React, { forwardRef } from "react";
-import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import SvgMem from "./SvgMem";
 
 export const Mem0 = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
-    const isdark = useDarkStore((state) => state.dark).toString();
+    return <SvgMem className="icon" ref={ref} {...props} />;
-    return <SvgMem className="icon" ref={ref} {...props} isdark={isdark} />;
   },
 );

src/frontend/src/icons/Novita/index.tsx

@@ -1,13 +1,9 @@
-import type React from "react";
+import React, { forwardRef } from "react";
-import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import SvgNovita from "./novita";
 
 export const NovitaIcon = forwardRef<
   SVGSVGElement,
   React.PropsWithChildren<{}>
 >((props, ref) => {
-  const isdark = useDarkStore((state) => state.dark).toString();
+  return <SvgNovita ref={ref} {...props} />;
-
-  return <SvgNovita ref={ref} {...props} isdark={isdark} />;
 });

src/frontend/src/icons/Nvidia/index.tsx

@@ -1,12 +1,9 @@
-import type React from "react";
+import React, { forwardRef } from "react";
-import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import NvidiaSVG from "./nvidia";
 
 export const NvidiaIcon = forwardRef<
   SVGSVGElement,
   React.PropsWithChildren<{}>
 >((props, ref) => {
-  const isdark = useDarkStore((state) => state.dark).toString();
+  return <NvidiaSVG ref={ref} {...props} />;
-  return <NvidiaSVG ref={ref} isdark={isdark} {...props} />;
 });

src/frontend/src/icons/Nvidia/nvidia.jsx

@@ -1,5 +1,3 @@
-import { stringToBool } from "@/utils/utils";
-
 const NvidiaSVG = (props) => (
   <svg
     version="1.1"
@@ -16,7 +14,7 @@ const NvidiaSVG = (props) => (
     </title>
     <path
       id="path17"
-      fill={stringToBool(props.isdark) ? "#fff" : "#000"}
+      fill={props.isDark ? "#fff" : "#000"}
       d="M384.195,282.109c0,3.771-2.769,6.302-6.047,6.302v-0.023c-3.371,0.023-6.089-2.508-6.089-6.278
 	c0-3.769,2.718-6.293,6.089-6.293C381.427,275.816,384.195,278.34,384.195,282.109z M386.648,282.109c0-5.175-4.02-8.179-8.5-8.179
 	c-4.511,0-8.531,3.004-8.531,8.179c0,5.172,4.021,8.188,8.531,8.188C382.629,290.297,386.648,287.281,386.648,282.109
@@ -25,7 +23,7 @@ const NvidiaSVG = (props) => (
     />
     <path
       id="path19"
-      fill={stringToBool(props.isdark) ? "#fff" : "#000"}
+      fill={props.isDark ? "#fff" : "#000"}
       d="M329.406,237.027l10.598,28.993H318.48L329.406,237.027z M318.056,225.738l-24.423,61.88h17.246l3.863-10.934
 	h28.903l3.656,10.934h18.722l-24.605-61.888L318.056,225.738z M269.023,287.641h17.497v-61.922l-17.5-0.004L269.023,287.641z
 	 M147.556,225.715l-14.598,49.078l-13.984-49.074l-18.879-0.004l19.972,61.926h25.207l20.133-61.926H147.556z M218.281,239.199h7.52

src/frontend/src/icons/Ollama/index.tsx

@@ -1,13 +1,9 @@
-import type React from "react";
+import React, { forwardRef } from "react";
-import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import SvgOllama from "./Ollama";
 
 export const OllamaIcon = forwardRef<
   SVGSVGElement,
   React.PropsWithChildren<{}>
 >((props, ref) => {
-  const isDark = useDarkStore((state) => state.dark);
+  return <SvgOllama ref={ref} {...props} />;
-
-  return <SvgOllama ref={ref} {...props} color={isDark ? "#fff" : "#000"} />;
 });

src/frontend/src/icons/Pinecone/PineconeLogo.jsx

@@ -1,133 +1,137 @@
-const SvgPineconeLogo = (props) => (
+const SvgPineconeLogo = (props) => {
-  <svg
+  const color = props.isDark ? "#fff" : "#000";
-    xmlns="http://www.w3.org/2000/svg"
+
-    width="1em"
+  return (
-    height="1em"
+    <svg
-    fill="none"
+      xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 32 35"
+      width="1em"
-    {...props}
+      height="1em"
-  >
+      fill="none"
-    <path
+      viewBox="0 0 32 35"
-      fill={props.color}
+      {...props}
-      d="M13.855 34.296c1.077 0 1.95-.85 1.95-1.9 0-1.05-.873-1.901-1.95-1.901-1.076 0-1.95.85-1.95 1.9 0 1.05.874 1.901 1.95 1.901Z"
+    >
-    />
+      <path
-    <path
+        fill={color}
-      stroke={props.color}
+        d="M13.855 34.296c1.077 0 1.95-.85 1.95-1.9 0-1.05-.873-1.901-1.95-1.901-1.076 0-1.95.85-1.95 1.9 0 1.05.874 1.901 1.95 1.901Z"
-      strokeLinecap="square"
+      />
-      strokeWidth={2.118}
+      <path
-      d="m18.414 7.197.837-4.537"
+        stroke={color}
-    />
+        strokeLinecap="square"
-    <path
+        strokeWidth={2.118}
-      stroke={props.color}
+        d="m18.414 7.197.837-4.537"
-      strokeLinecap="square"
+      />
-      strokeLinejoin="round"
+      <path
-      strokeWidth={2.118}
+        stroke={color}
-      d="m22.266 5.585-2.92-3.474-3.971 2.262"
+        strokeLinecap="square"
-    />
+        strokeLinejoin="round"
-    <path
+        strokeWidth={2.118}
-      stroke={props.color}
+        d="m22.266 5.585-2.92-3.474-3.971 2.262"
-      strokeLinecap="square"
+      />
-      strokeWidth={2.118}
+      <path
-      d="m14.92 26.553.814-4.536"
+        stroke={color}
-    />
+        strokeLinecap="square"
-    <path
+        strokeWidth={2.118}
-      stroke={props.color}
+        d="m14.92 26.553.814-4.536"
-      strokeLinecap="square"
+      />
-      strokeLinejoin="round"
+      <path
-      strokeWidth={2.118}
+        stroke={color}
-      d="m18.773 24.93-2.943-3.463-3.96 2.274"
+        strokeLinecap="square"
-    />
+        strokeLinejoin="round"
-    <path
+        strokeWidth={2.118}
-      stroke={props.color}
+        d="m18.773 24.93-2.943-3.463-3.96 2.274"
-      strokeLinecap="square"
+      />
-      strokeWidth={2.118}
+      <path
-      d="m16.608 17.2.813-4.537"
+        stroke={color}
-    />
+        strokeLinecap="square"
-    <path
+        strokeWidth={2.118}
-      stroke={props.color}
+        d="m16.608 17.2.813-4.537"
-      strokeLinecap="square"
+      />
-      strokeLinejoin="round"
+      <path
-      strokeWidth={2.118}
+        stroke={color}
-      d="m20.459 15.58-2.931-3.452-3.96 2.262"
+        strokeLinecap="square"
-    />
+        strokeLinejoin="round"
-    <path
+        strokeWidth={2.118}
-      stroke={props.color}
+        d="m20.459 15.58-2.931-3.452-3.96 2.262"
-      strokeLinecap="square"
+      />
-      strokeWidth={2.01}
+      <path
-      d="m8.329 26.155-3.577 2.426"
+        stroke={color}
-    />
+        strokeLinecap="square"
-    <path
+        strokeWidth={2.01}
-      stroke={props.color}
+        d="m8.329 26.155-3.577 2.426"
-      strokeLinecap="square"
+      />
-      strokeLinejoin="round"
+      <path
-      strokeWidth={2.01}
+        stroke={color}
-      d="M8.544 30.087 4.32 28.873l.31-4.28"
+        strokeLinecap="square"
-    />
+        strokeLinejoin="round"
-    <path
+        strokeWidth={2.01}
-      stroke={props.color}
+        d="M8.544 30.087 4.32 28.873l.31-4.28"
-      strokeLinecap="square"
+      />
-      strokeWidth={2.01}
+      <path
-      d="m21.321 28.43 2.489 3.498"
+        stroke={color}
-    />
+        strokeLinecap="square"
-    <path
+        strokeWidth={2.01}
-      stroke={props.color}
+        d="m21.321 28.43 2.489 3.498"
-      strokeLinecap="square"
+      />
-      strokeLinejoin="round"
+      <path
-      strokeWidth={2.01}
+        stroke={color}
-      d="m19.718 32.045 4.39.291 1.245-4.092"
+        strokeLinecap="square"
-    />
+        strokeLinejoin="round"
-    <path
+        strokeWidth={2.01}
-      stroke={props.color}
+        d="m19.718 32.045 4.39.291 1.245-4.092"
-      strokeLinecap="square"
+      />
-      strokeWidth={2.058}
+      <path
-      d="m25.4 21.33 4.378.77"
+        stroke={color}
-    />
+        strokeLinecap="square"
-    <path
+        strokeWidth={2.058}
-      stroke={props.color}
+        d="m25.4 21.33 4.378.77"
-      strokeLinecap="square"
+      />
-      strokeLinejoin="round"
+      <path
-      strokeWidth={2.058}
+        stroke={color}
-      d="m26.907 25.072 3.398-2.88-2.142-3.836"
+        strokeLinecap="square"
-    />
+        strokeLinejoin="round"
-    <path
+        strokeWidth={2.058}
-      stroke={props.color}
+        d="m26.907 25.072 3.398-2.88-2.142-3.836"
-      strokeLinecap="square"
+      />
-      strokeWidth={2.058}
+      <path
-      d="m24.12 12.861 3.9-2.098"
+        stroke={color}
-    />
+        strokeLinecap="square"
-    <path
+        strokeWidth={2.058}
-      stroke={props.color}
+        d="m24.12 12.861 3.9-2.098"
-      strokeLinecap="square"
+      />
-      strokeLinejoin="round"
+      <path
-      strokeWidth={2.058}
+        stroke={color}
-      d="m24.336 8.84 4.15 1.679-.777 4.303"
+        strokeLinecap="square"
-    />
+        strokeLinejoin="round"
-    <path
+        strokeWidth={2.058}
-      stroke={props.color}
+        d="m24.336 8.84 4.15 1.679-.777 4.303"
-      strokeLinecap="square"
+      />
-      strokeWidth={2.058}
+      <path
-      d="m6.916 18.157-4.39-.747"
+        stroke={color}
-    />
+        strokeLinecap="square"
-    <path
+        strokeWidth={2.058}
-      stroke={props.color}
+        d="m6.916 18.157-4.39-.747"
-      strokeLinecap="square"
+      />
-      strokeLinejoin="round"
+      <path
-      strokeWidth={2.058}
+        stroke={color}
-      d="M4.177 21.165 2 17.328l3.362-2.892"
+        strokeLinecap="square"
-    />
+        strokeLinejoin="round"
-    <path
+        strokeWidth={2.058}
-      stroke={props.color}
+        d="M4.177 21.165 2 17.328l3.362-2.892"
-      strokeLinecap="square"
+      />
-      strokeWidth={2.058}
+      <path
-      d="M11.08 10.613 8.149 7.348"
+        stroke={color}
-    />
+        strokeLinecap="square"
-    <path
+        strokeWidth={2.058}
-      stroke={props.color}
+        d="M11.08 10.613 8.149 7.348"
-      strokeLinecap="square"
+      />
-      strokeLinejoin="round"
+      <path
-      strokeWidth={2.058}
+        stroke={color}
-      d="m12.29 6.775-4.487.187-.79 4.303"
+        strokeLinecap="square"
-    />
+        strokeLinejoin="round"
-  </svg>
+        strokeWidth={2.058}
-);
+        d="m12.29 6.775-4.487.187-.79 4.303"
+      />
+    </svg>
+  );
+};
 export default SvgPineconeLogo;

src/frontend/src/icons/Pinecone/index.tsx

@@ -1,15 +1,9 @@
-import type React from "react";
+import React, { forwardRef } from "react";
-import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import SvgPineconeLogo from "./PineconeLogo";
 
 export const PineconeIcon = forwardRef<
   SVGSVGElement,
   React.PropsWithChildren<{}>
 >((props, ref) => {
-  const isDark = useDarkStore((state) => state.dark);
+  return <SvgPineconeLogo ref={ref} {...props} />;
-
-  return (
-    <SvgPineconeLogo ref={ref} {...props} color={isDark ? "#fff" : "#000"} />
-  );
 });

src/frontend/src/icons/Twitter X/TwitterX.jsx

@@ -1,5 +1,5 @@
 const TwitterXSVG = (props) => {
-  return props.isdark === "true" ? (
+  return props.isDark ? (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0,0,256,256"

src/frontend/src/icons/Twitter X/index.tsx

@@ -1,12 +1,9 @@
-import type React from "react";
+import React, { forwardRef } from "react";
-import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import TwitterXSVG from "./TwitterX.jsx";
 
 export const TwitterXIcon = forwardRef<
   SVGSVGElement,
   React.PropsWithChildren<{}>
 >((props, ref) => {
-  const isdark = useDarkStore((state) => state.dark).toString();
+  return <TwitterXSVG ref={ref} {...props} />;
-  return <TwitterXSVG ref={ref} isdark={isdark} {...props} />;
 });

src/frontend/src/icons/Windsurf/Windsurf.jsx

@@ -1,5 +1,3 @@
-import { stringToBool } from "@/utils/utils";
-
 const SvgWindsurf = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -11,7 +9,7 @@ const SvgWindsurf = (props) => (
   >
     <path
       d="M507.28 0.142623H502.4C476.721 0.10263 455.882 20.899 455.882 46.5745V150.416C455.882 171.153 438.743 187.95 418.344 187.95C406.224 187.95 394.125 181.851 386.945 171.613L280.889 20.1391C272.089 7.56133 257.77 0.0626373 242.271 0.0626373C218.091 0.0626373 196.332 20.6191 196.332 45.9946V150.436C196.332 171.173 179.333 187.97 158.794 187.97C146.634 187.97 134.555 181.871 127.375 171.633L8.69966 2.12228C6.01976 -1.71705 0 0.182617 0 4.8618V95.426C0 100.005 1.39995 104.444 4.01984 108.204L120.815 274.995C127.715 284.853 137.895 292.172 149.634 294.831C179.013 301.51 206.052 278.894 206.052 250.079V145.697C206.052 124.961 222.851 108.164 243.59 108.164H243.65C256.15 108.164 267.87 114.263 275.049 124.501L381.125 275.955C389.945 288.552 403.524 296.031 419.724 296.031C444.443 296.031 465.622 275.455 465.622 250.099V145.677C465.622 124.941 482.421 108.144 503.16 108.144H507.3C509.9 108.144 512 106.044 512 103.445V4.8418C512 2.24226 509.9 0.142623 507.3 0.142623H507.28Z"
-      fill={stringToBool(props.isdark) ? "white" : "black"}
+      fill={props.isDark ? "white" : "black"}
     />
   </svg>
 );

src/frontend/src/icons/Windsurf/index.tsx

@@ -1,12 +1,9 @@
-import type React from "react";
+import React, { forwardRef } from "react";
-import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import SvgWindsurf from "./Windsurf";
 
 export const WindsurfIcon = forwardRef<
   SVGSVGElement,
   React.PropsWithChildren<{}>
 >((props, ref) => {
-  const isdark = useDarkStore((state) => state.dark).toString();
+  return <SvgWindsurf ref={ref} {...props} />;
-  return <SvgWindsurf ref={ref} isdark={isdark} {...props} />;
 });

src/frontend/src/icons/xAI/index.tsx

@@ -1,11 +1,8 @@
-import type React from "react";
+import React, { forwardRef } from "react";
-import { forwardRef } from "react";
-import { useDarkStore } from "@/stores/darkStore";
 import XAISVG from "./xAIIcon.jsx";
 
 export const XAIIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
-    const isdark = useDarkStore((state) => state.dark).toString();
+    return <XAISVG ref={ref} {...props} />;
-    return <XAISVG ref={ref} isdark={isdark} {...props} />;
   },
 );

src/frontend/src/icons/xAI/xAIIcon.jsx

@@ -2,7 +2,7 @@ import { stringToBool } from "@/utils/utils";
 
 const XAISVG = (props) => (
   <svg
-    fill={stringToBool(props.isdark) ? "#ffffff" : "#0A0A0A"}
+    fill={props.isDark ? "#ffffff" : "#0A0A0A"}
     fillRule="evenodd"
     style={{ flex: "none", lineHeight: 1 }}
     viewBox="0 0 24 24"

src/frontend/src/stores/darkStore.ts

@@ -5,7 +5,10 @@ import type { DarkStoreType } from "../types/zustand/dark";
 const startedStars = Number(window.localStorage.getItem("githubStars")) ?? 0;
 
 export const useDarkStore = create<DarkStoreType>((set, get) => ({
-  dark: JSON.parse(window.localStorage.getItem("isDark")!) ?? false,
+  dark: (() => {
+    const stored = window.localStorage.getItem("isDark");
+    return stored !== null ? JSON.parse(stored) : false;
+  })(),
   stars: startedStars,
   version: "",
   latestVersion: "",