55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { FolderTree, Keyboard, Package, ToggleRight } from "lucide-react";
|
|
import { useMemo } from "react";
|
|
import { useCatalogManager } from "./use-catalog-store";
|
|
|
|
export function StatsBar() {
|
|
const { state } = useCatalogManager();
|
|
|
|
const stats = useMemo(() => {
|
|
const nodes = Array.from(state.nodes.values());
|
|
const enabled = nodes.filter((n) => n.enabled === "1").length;
|
|
const totalItems = nodes.reduce((sum, n) => sum + n.itemCount, 0);
|
|
return {
|
|
rootTabs: state.rootPages.length,
|
|
totalPages: nodes.length,
|
|
enabled,
|
|
totalItems,
|
|
};
|
|
}, [state.nodes, state.rootPages]);
|
|
|
|
return (
|
|
<div className="flex items-center justify-between gap-4 px-4 py-1.5 border-t bg-muted/30 text-[11px] text-muted-foreground shrink-0">
|
|
<div className="flex items-center gap-4">
|
|
<span className="flex items-center gap-1">
|
|
<FolderTree className="h-3 w-3" />
|
|
{stats.rootTabs} root
|
|
</span>
|
|
<span>{stats.totalPages} pages</span>
|
|
<span className="flex items-center gap-1">
|
|
<ToggleRight className="h-3 w-3" />
|
|
{stats.enabled} enabled
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Package className="h-3 w-3" />
|
|
{stats.totalItems} items
|
|
</span>
|
|
{state.multiSelectedIds.size > 0 && (
|
|
<span className="text-primary font-medium">{state.multiSelectedIds.size} selected</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Keyboard className="h-3 w-3" />
|
|
<span>
|
|
<kbd className="rounded border bg-background px-1 font-mono text-[9px]">Ctrl+S</kbd> save
|
|
<span className="mx-1">·</span>
|
|
<kbd className="rounded border bg-background px-1 font-mono text-[9px]">/</kbd> search
|
|
<span className="mx-1">·</span>
|
|
<kbd className="rounded border bg-background px-1 font-mono text-[9px]">Ctrl+K</kbd> quick add
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|