External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: subscribe to bundles array reactively in ToolCard for download badge

Browse Source 
The previous selector returned the isToolInstalled function reference
which never changes, so the component didn't re-render when bundles
loaded. Now subscribes to the bundles array directly via useMemo.
This commit is contained in:
ashim-hq
2026-04-18 11:34:22 +08:00
parent 46739a135e
commit fa9c94f7ad
1 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/common/tool-card.tsx
+10 -2
View File
@@ -1,6 +1,7 @@
import type { Tool } from "@ashim/shared"; import type { Tool } from "@ashim/shared";
import { PYTHON_SIDECAR_TOOLS } from "@ashim/shared"; import { PYTHON_SIDECAR_TOOLS, TOOL_BUNDLE_MAP } from "@ashim/shared";
import { Download, FileImage, Star } from "lucide-react"; import { Download, FileImage, Star } from "lucide-react";
import { useMemo } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { ICON_MAP } from "@/lib/icon-map"; import { ICON_MAP } from "@/lib/icon-map";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@@ -15,7 +16,14 @@ export function ToolCard({ tool }: ToolCardProps) {
(ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ?? FileImage; (ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ?? FileImage;
const isAiTool = (PYTHON_SIDECAR_TOOLS as readonly string[]).includes(tool.id); const isAiTool = (PYTHON_SIDECAR_TOOLS as readonly string[]).includes(tool.id);
const isInstalled = useFeaturesStore((s) => s.isToolInstalled)(tool.id); const bundles = useFeaturesStore((s) => s.bundles);
const isInstalled = useMemo(() => {
if (!isAiTool) return true;
const bundleId = TOOL_BUNDLE_MAP[tool.id];
if (!bundleId) return true;
const bundle = bundles.find((b) => b.id === bundleId);
return bundle?.status === "installed";
}, [isAiTool, tool.id, bundles]);
const showDownloadBadge = isAiTool && !isInstalled; const showDownloadBadge = isAiTool && !isInstalled;
return ( return (