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: show download badge on home page inline tool list

Browse Source 
The home page's file-uploaded view rendered its own tool list without
checking AI feature install status, so download icons disappeared after
uploading a file. Now both Quick Actions and All Tools sections show the
download badge consistently with the sidebar ToolPanel.
This commit is contained in:
ashim-hq
2026-04-19 20:20:53 +08:00
parent 8c83d7efcd
commit 5c897f3c1d
1 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/home-page.tsx
+16 -3
View File
@@ -1,11 +1,12 @@
import { CATEGORIES, TOOLS } from "@ashim/shared";
import { Loader2 } from "lucide-react";
import { CATEGORIES, PYTHON_SIDECAR_TOOLS, TOOLS } from "@ashim/shared";
import { Download, Loader2 } from "lucide-react";
import { useCallback, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { ImageViewer } from "@/components/common/image-viewer";
import { MultiImageViewer } from "@/components/common/multi-image-viewer";
import { AppLayout } from "@/components/layout/app-layout";
import { ICON_MAP } from "@/lib/icon-map";
import { useFeaturesStore } from "@/stores/features-store";
import { useFileStore } from "@/stores/file-store";
import { useSettingsStore } from "@/stores/settings-store";
@@ -24,10 +25,12 @@ export function HomePage() {
} = useFileStore();
const navigate = useNavigate();
const { fetch: fetchSettings } = useSettingsStore();
const { fetch: fetchFeatures, isToolInstalled } = useFeaturesStore();
useEffect(() => {
fetchSettings();
}, [fetchSettings]);
fetchFeatures();
}, [fetchSettings, fetchFeatures]);
const handleFiles = useCallback(
(newFiles: File[]) => {
@@ -83,6 +86,8 @@ export function HomePage() {
const Icon =
(ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ??
ICON_MAP.FileImage;
const isAi = (PYTHON_SIDECAR_TOOLS as readonly string[]).includes(id);
const needsDownload = isAi && !isToolInstalled(id);
return (
<button
key={id}
@@ -94,6 +99,9 @@ export function HomePage() {
<Icon className="h-4 w-4" />
</div>
<span className="text-xs font-medium text-foreground">{tool.name}</span>
{needsDownload && (
<Download className="h-3.5 w-3.5 text-muted-foreground ml-auto" />
)}
</button>
);
})}
@@ -121,6 +129,8 @@ export function HomePage() {
const Icon =
(ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ??
ICON_MAP.FileImage;
const isAi = (PYTHON_SIDECAR_TOOLS as readonly string[]).includes(tool.id);
const needsDownload = isAi && !isToolInstalled(tool.id);
return (
<button
key={tool.id}
@@ -130,6 +140,9 @@ export function HomePage() {
>
<Icon className="h-4 w-4 text-muted-foreground shrink-0" />
<span className="text-sm">{tool.name}</span>
{needsDownload && (
<Download className="h-3.5 w-3.5 text-muted-foreground ml-auto" />
)}
</button>
);
})}