diff --git a/.cursor/rules/icons.mdc b/.cursor/rules/icons.mdc index 30a7550dd..70e570f2d 100644 --- a/.cursor/rules/icons.mdc +++ b/.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 ; + return ; }); ``` #### 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) => ( ); ``` - - 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/index.tsx` (exports `AstraDBIcon` and passes `isdark`) + - `src/icons/AstraDB/AstraDB.jsx` (SVG as React component, uses `isDark` prop) + - `src/icons/AstraDB/index.tsx` (exports `AstraDBIcon` and passes `isDark`) - Add to `lazyIconImports.ts`: ```ts AstraDB: () => diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 4857d7977..7f8b1eb97 100644 --- a/.pre-commit-config.yaml +++ b/.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?)$" diff --git a/src/frontend/src/components/common/genericIconComponent/index.tsx b/src/frontend/src/components/common/genericIconComponent/index.tsx index edb613662..0a7eacc8d 100644 --- a/src/frontend/src/components/common/genericIconComponent/index.tsx +++ b/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(getCachedIcon(name)); @@ -109,6 +114,7 @@ export const ForwardedIconComponent = memo( className={className} style={style} ref={ref} + isDark={isDark} data-testid={ dataTestId ? dataTestId diff --git a/src/frontend/src/icons/AWS/AWS.jsx b/src/frontend/src/icons/AWS/AWS.jsx index 7a41cd1e5..fc2caa567 100644 --- a/src/frontend/src/icons/AWS/AWS.jsx +++ b/src/frontend/src/icons/AWS/AWS.jsx @@ -1,5 +1,3 @@ -import { stringToBool } from "@/utils/utils"; - const SvgAWS = (props) => ( ( >( (props, ref) => { - const isdark = useDarkStore((state) => state.dark).toString(); - return ; + return ; }, ); diff --git a/src/frontend/src/icons/AWSInverted/AWS.jsx b/src/frontend/src/icons/AWSInverted/AWS.jsx index a7bc6d24a..fc2caa567 100644 --- a/src/frontend/src/icons/AWSInverted/AWS.jsx +++ b/src/frontend/src/icons/AWSInverted/AWS.jsx @@ -1,5 +1,3 @@ -import { stringToBool } from "@/utils/utils"; - const SvgAWS = (props) => ( ( >((props, ref) => { - const isdark = useDarkStore((state) => state.dark).toString(); - return ; + return ; }); diff --git a/src/frontend/src/icons/Anthropic/Anthropic.jsx b/src/frontend/src/icons/Anthropic/Anthropic.jsx index 235f52762..790d7f5c3 100644 --- a/src/frontend/src/icons/Anthropic/Anthropic.jsx +++ b/src/frontend/src/icons/Anthropic/Anthropic.jsx @@ -1,5 +1,5 @@ -const SvgAnthropicBox = ({ isDark, ...props }) => { - return isDark ? ( +const SvgAnthropicBox = (props) => { + return props.isDark ? ( >((props, ref) => { - const isDark = useDarkStore((state) => state.dark); - - return ; + return ; }); diff --git a/src/frontend/src/icons/AstraDB/AstraDB.jsx b/src/frontend/src/icons/AstraDB/AstraDB.jsx index 468065213..b1962327a 100644 --- a/src/frontend/src/icons/AstraDB/AstraDB.jsx +++ b/src/frontend/src/icons/AstraDB/AstraDB.jsx @@ -1,5 +1,3 @@ -import { stringToBool } from "@/utils/utils"; - const AstraSVG = (props) => ( ( > ); diff --git a/src/frontend/src/icons/AstraDB/index.tsx b/src/frontend/src/icons/AstraDB/index.tsx index 3252422a3..6d57406c0 100644 --- a/src/frontend/src/icons/AstraDB/index.tsx +++ b/src/frontend/src/icons/AstraDB/index.tsx @@ -1,12 +1,9 @@ -import type React from "react"; -import { forwardRef } from "react"; -import { useDarkStore } from "@/stores/darkStore"; +import React, { forwardRef } from "react"; import AstraSVG from "./AstraDB"; export const AstraDBIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { - const isdark = useDarkStore((state) => state.dark).toString(); - return ; + return ; }); diff --git a/src/frontend/src/icons/BW python/Python.jsx b/src/frontend/src/icons/BW python/Python.jsx index da085dfa0..fe449d683 100644 --- a/src/frontend/src/icons/BW python/Python.jsx +++ b/src/frontend/src/icons/BW python/Python.jsx @@ -11,21 +11,17 @@ export const BWSvgPython = (props) => ( - + diff --git a/src/frontend/src/icons/BW python/index.tsx b/src/frontend/src/icons/BW python/index.tsx index 55a6dba0c..503a5cdde 100644 --- a/src/frontend/src/icons/BW python/index.tsx +++ b/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 ; + return ; }); diff --git a/src/frontend/src/icons/Cleanlab/Cleanlab.jsx b/src/frontend/src/icons/Cleanlab/Cleanlab.jsx index 86491a3fe..d83a0c62a 100644 --- a/src/frontend/src/icons/Cleanlab/Cleanlab.jsx +++ b/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 ( { ); diff --git a/src/frontend/src/icons/Cleanlab/index.tsx b/src/frontend/src/icons/Cleanlab/index.tsx index 86044e936..b68074960 100644 --- a/src/frontend/src/icons/Cleanlab/index.tsx +++ b/src/frontend/src/icons/Cleanlab/index.tsx @@ -1,12 +1,9 @@ -import type React from "react"; -import { forwardRef } from "react"; -import { useDarkStore } from "@/stores/darkStore"; +import React, { forwardRef } from "react"; import SvgCleanlab from "./Cleanlab"; export const CleanlabIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { - const isdark = useDarkStore((state) => state.dark).toString(); - return ; + return ; }); diff --git a/src/frontend/src/icons/Composio/composio.jsx b/src/frontend/src/icons/Composio/composio.jsx index 95557641f..7fd763649 100644 --- a/src/frontend/src/icons/Composio/composio.jsx +++ b/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"} /> diff --git a/src/frontend/src/icons/Composio/index.tsx b/src/frontend/src/icons/Composio/index.tsx index 494d7de83..91424b153 100644 --- a/src/frontend/src/icons/Composio/index.tsx +++ b/src/frontend/src/icons/Composio/index.tsx @@ -1,13 +1,9 @@ -import type React from "react"; -import { forwardRef } from "react"; -import { useDarkStore } from "@/stores/darkStore"; +import React, { forwardRef } from "react"; import ComposioIconSVG from "./composio"; export const ComposioIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { - const isdark = useDarkStore((state) => state.dark).toString(); - - return ; + return ; }); diff --git a/src/frontend/src/icons/DeepSeek/DeepSeekIcon.jsx b/src/frontend/src/icons/DeepSeek/DeepSeekIcon.jsx index b0747f2d4..1abb58ad5 100644 --- a/src/frontend/src/icons/DeepSeek/DeepSeekIcon.jsx +++ b/src/frontend/src/icons/DeepSeek/DeepSeekIcon.jsx @@ -1,5 +1,3 @@ -import { stringToBool } from "@/utils/utils"; - const DeepSeekSVG = (props) => ( ( > >((props, ref) => { - const isdark = useDarkStore((state) => state.dark).toString(); - return ; + return ; }); diff --git a/src/frontend/src/icons/HCD/HCD.jsx b/src/frontend/src/icons/HCD/HCD.jsx index b7e76ec89..1e2d7742d 100644 --- a/src/frontend/src/icons/HCD/HCD.jsx +++ b/src/frontend/src/icons/HCD/HCD.jsx @@ -1,5 +1,3 @@ -import { stringToBool } from "@/utils/utils"; - const HCDSVG = (props) => ( ( {/* */} diff --git a/src/frontend/src/icons/HCD/index.tsx b/src/frontend/src/icons/HCD/index.tsx index 595678c34..1503f9a07 100644 --- a/src/frontend/src/icons/HCD/index.tsx +++ b/src/frontend/src/icons/HCD/index.tsx @@ -1,12 +1,8 @@ -import type React from "react"; -import { forwardRef } from "react"; -import { useDarkStore } from "@/stores/darkStore"; +import React, { forwardRef } from "react"; import HCDSVG from "./HCD"; export const HCDIcon = forwardRef>( (props, ref) => { - const isdark = useDarkStore((state) => state.dark).toString(); - - return ; + return ; }, ); diff --git a/src/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx b/src/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx index 7e2111322..7f052d683 100644 --- a/src/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx +++ b/src/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx @@ -1,8 +1,6 @@ -import { stringToBool } from "@/utils/utils"; - const SvgWatsonxAI = (props) => ( >((props, ref) => { - const isdark = useDarkStore((state) => state.dark).toString(); - return ; + return ; }); diff --git a/src/frontend/src/icons/JSicon/JSIcon.jsx b/src/frontend/src/icons/JSicon/JSIcon.jsx index 0ccc8ddfc..43da263ac 100644 --- a/src/frontend/src/icons/JSicon/JSIcon.jsx +++ b/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%)"} > diff --git a/src/frontend/src/icons/JSicon/index.tsx b/src/frontend/src/icons/JSicon/index.tsx index 3b9963dc0..8065c111f 100644 --- a/src/frontend/src/icons/JSicon/index.tsx +++ b/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>( (props, ref) => { - const isdark = useDarkStore((state) => state.dark.toString()); - return ; + return ; }, ); diff --git a/src/frontend/src/icons/JigsawStack/JigsawStackIcon.jsx b/src/frontend/src/icons/JigsawStack/JigsawStackIcon.jsx index 363b76fcf..92efc8f08 100644 --- a/src/frontend/src/icons/JigsawStack/JigsawStackIcon.jsx +++ b/src/frontend/src/icons/JigsawStack/JigsawStackIcon.jsx @@ -1,4 +1,4 @@ -const JigsawStackIconSVG = ({ isdark, ...props }) => ( +const JigsawStackIconSVG = (props) => ( ( > >((props, ref) => { - const isdark = useDarkStore((state) => state.dark).toString(); - return ; + return ; }); diff --git a/src/frontend/src/icons/MCP/McpIcon.jsx b/src/frontend/src/icons/MCP/McpIcon.jsx index fcb354436..3711a211b 100644 --- a/src/frontend/src/icons/MCP/McpIcon.jsx +++ b/src/frontend/src/icons/MCP/McpIcon.jsx @@ -3,7 +3,7 @@ const SvgMcpIcon = (props) => { diff --git a/src/frontend/src/icons/MCP/index.tsx b/src/frontend/src/icons/MCP/index.tsx index 7a82927af..293e21254 100644 --- a/src/frontend/src/icons/MCP/index.tsx +++ b/src/frontend/src/icons/MCP/index.tsx @@ -1,11 +1,8 @@ -import type React from "react"; -import { forwardRef } from "react"; -import { useDarkStore } from "@/stores/darkStore"; +import React, { forwardRef } from "react"; import SvgMcpIcon from "./McpIcon"; export const McpIcon = forwardRef>( (props, ref) => { - const isdark = useDarkStore((state) => state.dark); - return ; + return ; }, ); diff --git a/src/frontend/src/icons/Mem0/SvgMem.jsx b/src/frontend/src/icons/Mem0/SvgMem.jsx index 84299362b..9a07e13fb 100644 --- a/src/frontend/src/icons/Mem0/SvgMem.jsx +++ b/src/frontend/src/icons/Mem0/SvgMem.jsx @@ -1,5 +1,3 @@ -import { stringToBool } from "@/utils/utils"; - export default function SvgMem0(props) { return ( diff --git a/src/frontend/src/icons/Mem0/index.tsx b/src/frontend/src/icons/Mem0/index.tsx index e54941d45..480ba6176 100644 --- a/src/frontend/src/icons/Mem0/index.tsx +++ b/src/frontend/src/icons/Mem0/index.tsx @@ -1,11 +1,8 @@ -import type React from "react"; -import { forwardRef } from "react"; -import { useDarkStore } from "@/stores/darkStore"; +import React, { forwardRef } from "react"; import SvgMem from "./SvgMem"; export const Mem0 = forwardRef>( (props, ref) => { - const isdark = useDarkStore((state) => state.dark).toString(); - return ; + return ; }, ); diff --git a/src/frontend/src/icons/Novita/index.tsx b/src/frontend/src/icons/Novita/index.tsx index b67a50930..1842b689e 100644 --- a/src/frontend/src/icons/Novita/index.tsx +++ b/src/frontend/src/icons/Novita/index.tsx @@ -1,13 +1,9 @@ -import type React from "react"; -import { forwardRef } from "react"; -import { useDarkStore } from "@/stores/darkStore"; +import React, { forwardRef } from "react"; import SvgNovita from "./novita"; export const NovitaIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { - const isdark = useDarkStore((state) => state.dark).toString(); - - return ; + return ; }); diff --git a/src/frontend/src/icons/Nvidia/index.tsx b/src/frontend/src/icons/Nvidia/index.tsx index 65528eaec..830b62b9b 100644 --- a/src/frontend/src/icons/Nvidia/index.tsx +++ b/src/frontend/src/icons/Nvidia/index.tsx @@ -1,12 +1,9 @@ -import type React from "react"; -import { forwardRef } from "react"; -import { useDarkStore } from "@/stores/darkStore"; +import React, { forwardRef } from "react"; import NvidiaSVG from "./nvidia"; export const NvidiaIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { - const isdark = useDarkStore((state) => state.dark).toString(); - return ; + return ; }); diff --git a/src/frontend/src/icons/Nvidia/nvidia.jsx b/src/frontend/src/icons/Nvidia/nvidia.jsx index 3d072d3b5..1b6fd2358 100644 --- a/src/frontend/src/icons/Nvidia/nvidia.jsx +++ b/src/frontend/src/icons/Nvidia/nvidia.jsx @@ -1,5 +1,3 @@ -import { stringToBool } from "@/utils/utils"; - const NvidiaSVG = (props) => ( ( - - - - - - -); +export const SvgOllama = (props) => { + const color = props.isDark ? "#fff" : "#000"; + + return ( + + + + + + + + ); +}; export default SvgOllama; diff --git a/src/frontend/src/icons/Ollama/index.tsx b/src/frontend/src/icons/Ollama/index.tsx index 1952e5f5e..4d49fa198 100644 --- a/src/frontend/src/icons/Ollama/index.tsx +++ b/src/frontend/src/icons/Ollama/index.tsx @@ -1,13 +1,9 @@ -import type React from "react"; -import { forwardRef } from "react"; -import { useDarkStore } from "@/stores/darkStore"; +import React, { forwardRef } from "react"; import SvgOllama from "./Ollama"; export const OllamaIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { - const isDark = useDarkStore((state) => state.dark); - - return ; + return ; }); diff --git a/src/frontend/src/icons/Pinecone/PineconeLogo.jsx b/src/frontend/src/icons/Pinecone/PineconeLogo.jsx index c69d44e9a..18857ac31 100644 --- a/src/frontend/src/icons/Pinecone/PineconeLogo.jsx +++ b/src/frontend/src/icons/Pinecone/PineconeLogo.jsx @@ -1,133 +1,137 @@ -const SvgPineconeLogo = (props) => ( - - - - - - - - - - - - - - - - - - - - - -); +const SvgPineconeLogo = (props) => { + const color = props.isDark ? "#fff" : "#000"; + + return ( + + + + + + + + + + + + + + + + + + + + + + ); +}; export default SvgPineconeLogo; diff --git a/src/frontend/src/icons/Pinecone/index.tsx b/src/frontend/src/icons/Pinecone/index.tsx index 3ad6381d6..972f3da69 100644 --- a/src/frontend/src/icons/Pinecone/index.tsx +++ b/src/frontend/src/icons/Pinecone/index.tsx @@ -1,15 +1,9 @@ -import type React from "react"; -import { forwardRef } from "react"; -import { useDarkStore } from "@/stores/darkStore"; +import React, { forwardRef } from "react"; import SvgPineconeLogo from "./PineconeLogo"; export const PineconeIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { - const isDark = useDarkStore((state) => state.dark); - - return ( - - ); + return ; }); diff --git a/src/frontend/src/icons/Twitter X/TwitterX.jsx b/src/frontend/src/icons/Twitter X/TwitterX.jsx index 15df12800..15a908a89 100644 --- a/src/frontend/src/icons/Twitter X/TwitterX.jsx +++ b/src/frontend/src/icons/Twitter X/TwitterX.jsx @@ -1,5 +1,5 @@ const TwitterXSVG = (props) => { - return props.isdark === "true" ? ( + return props.isDark ? ( >((props, ref) => { - const isdark = useDarkStore((state) => state.dark).toString(); - return ; + return ; }); diff --git a/src/frontend/src/icons/Windsurf/Windsurf.jsx b/src/frontend/src/icons/Windsurf/Windsurf.jsx index 1ef5e4784..30bcd0e57 100644 --- a/src/frontend/src/icons/Windsurf/Windsurf.jsx +++ b/src/frontend/src/icons/Windsurf/Windsurf.jsx @@ -1,5 +1,3 @@ -import { stringToBool } from "@/utils/utils"; - const SvgWindsurf = (props) => ( ( > ); diff --git a/src/frontend/src/icons/Windsurf/index.tsx b/src/frontend/src/icons/Windsurf/index.tsx index a8394bc48..2444d98d0 100644 --- a/src/frontend/src/icons/Windsurf/index.tsx +++ b/src/frontend/src/icons/Windsurf/index.tsx @@ -1,12 +1,9 @@ -import type React from "react"; -import { forwardRef } from "react"; -import { useDarkStore } from "@/stores/darkStore"; +import React, { forwardRef } from "react"; import SvgWindsurf from "./Windsurf"; export const WindsurfIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { - const isdark = useDarkStore((state) => state.dark).toString(); - return ; + return ; }); diff --git a/src/frontend/src/icons/xAI/index.tsx b/src/frontend/src/icons/xAI/index.tsx index 96d44a85e..76ea1ab8a 100644 --- a/src/frontend/src/icons/xAI/index.tsx +++ b/src/frontend/src/icons/xAI/index.tsx @@ -1,11 +1,8 @@ -import type React from "react"; -import { forwardRef } from "react"; -import { useDarkStore } from "@/stores/darkStore"; +import React, { forwardRef } from "react"; import XAISVG from "./xAIIcon.jsx"; export const XAIIcon = forwardRef>( (props, ref) => { - const isdark = useDarkStore((state) => state.dark).toString(); - return ; + return ; }, ); diff --git a/src/frontend/src/icons/xAI/xAIIcon.jsx b/src/frontend/src/icons/xAI/xAIIcon.jsx index 210356e3b..8e10ecc35 100644 --- a/src/frontend/src/icons/xAI/xAIIcon.jsx +++ b/src/frontend/src/icons/xAI/xAIIcon.jsx @@ -2,7 +2,7 @@ import { stringToBool } from "@/utils/utils"; const XAISVG = (props) => ( ((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: "",