fix: only show bundle counter in install indicator during batch install

The bottom-right install indicator showed "1/6 installed" even when
installing a single bundle, implying all 6 would be installed. Now the
counter only appears during "Install All" operations.
This commit is contained in:
ashim-hq
2026-04-19 21:15:17 +08:00
parent 62dd1ae211
commit b78e0741b3
@@ -3,7 +3,7 @@ import { useEffect } from "react";
import { useFeaturesStore } from "@/stores/features-store"; import { useFeaturesStore } from "@/stores/features-store";
export function AiInstallIndicator() { export function AiInstallIndicator() {
const { bundles, installing, queued, fetch } = useFeaturesStore(); const { bundles, installing, queued, installAllActive, fetch } = useFeaturesStore();
useEffect(() => { useEffect(() => {
fetch(); fetch();
@@ -16,54 +16,35 @@ export function AiInstallIndicator() {
const activeBundle = bundles.find((b) => installing[b.id]); const activeBundle = bundles.find((b) => installing[b.id]);
const progress = activeBundle ? installing[activeBundle.id] : null; const progress = activeBundle ? installing[activeBundle.id] : null;
const isBatchInstall = installAllActive || queued.length > 0;
const completedCount = bundles.filter((b) => b.status === "installed").length; const completedCount = bundles.filter((b) => b.status === "installed").length;
const totalBundles = bundles.length; const totalBundles = bundles.length;
return (
<IndicatorContent
name={activeBundle?.name ?? "AI Feature"}
percent={progress?.percent ?? 0}
completedCount={completedCount}
totalBundles={totalBundles}
queuedCount={queued.length}
/>
);
}
function IndicatorContent({
name,
percent,
completedCount,
totalBundles,
queuedCount,
}: {
name: string;
percent: number;
completedCount: number;
totalBundles: number;
queuedCount: number;
}) {
return ( return (
<div className="fixed bottom-16 right-4 z-40 bg-background border border-border rounded-xl shadow-lg px-4 py-3 min-w-[260px] max-w-[320px]"> <div className="fixed bottom-16 right-4 z-40 bg-background border border-border rounded-xl shadow-lg px-4 py-3 min-w-[260px] max-w-[320px]">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<Download className="h-4 w-4 text-primary shrink-0" /> <Download className="h-4 w-4 text-primary shrink-0" />
<p className="text-sm font-medium text-foreground truncate">Installing {name}</p> <p className="text-sm font-medium text-foreground truncate">
Installing {activeBundle?.name ?? "AI Feature"}
</p>
</div> </div>
<div className="h-1.5 bg-muted rounded-full overflow-hidden mb-1.5"> <div className="h-1.5 bg-muted rounded-full overflow-hidden mb-1.5">
<div <div
className="h-full bg-primary rounded-full transition-all duration-500" className="h-full bg-primary rounded-full transition-all duration-500"
style={{ width: `${percent}%` }} style={{ width: `${progress?.percent ?? 0}%` }}
/> />
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<Loader2 className="h-3 w-3 animate-spin text-muted-foreground" /> <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
<span className="text-xs text-muted-foreground">{percent}%</span> <span className="text-xs text-muted-foreground">{progress?.percent ?? 0}%</span>
</div> </div>
{isBatchInstall && (
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
{completedCount}/{totalBundles} installed {completedCount}/{totalBundles} installed
{queuedCount > 0 && ` · ${queuedCount} queued`} {queued.length > 0 && ` · ${queued.length} queued`}
</span> </span>
)}
</div> </div>
</div> </div>
); );