mirror of
https://github.com/hanzoai/bootnode.git
synced 2026-09-30 20:46:32 +00:00
zeekayandHanzo Dev
da98c0de75
74 files imported `lucide-react` directly, pinned ^1.26.0, while @luxfi/ui — which this console renders alongside — resolves 1.27. Two Lucide copies from two resolutions in one bundle is how a set stops being one set. Two more glyphs were not from any icon library at all: the node list drew its network in/out arrows as the literal characters "↓" and "↑", and the chain onboarding selector drew its tick as "✓". Those are font glyphs — they take the text metrics, not the icon box, so they sit on a different baseline and scale with the font, not `size-*`. One source now: `@luxfi/ui/icons`, Lucide as @hanzo/gui standardises on it and @luxfi/ui themes it. `lucide-react` is out of package.json, so per-surface drift is no longer expressible; @luxfi/ui comes in at 7.4.3, which is where `./icons` lives. The three text glyphs are ArrowDown / ArrowUp / Check. All 121 distinct icon names this console uses were checked against the 6014 symbols @luxfi/ui/icons exports before the rewrite — zero missing, with a negative control. `next build` is clean: 78 routes, Next 16.2.11 + Turbopack. The d3 chart roots (node-globe, node-map, globe-view, donut-chart, fleet-map) keep their <svg>: those are plots, not glyphs. The command menu's "↑↓" stays — it is a keyboard legend inside <kbd>, and it means the keys. Co-authored-by: Hanzo Dev <[email protected]>
133 lines
3.9 KiB
TypeScript
133 lines
3.9 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo, useState } from "react"
|
|
import { useRouter } from "next/navigation"
|
|
import { ArrowRight, Search } from "@luxfi/ui/icons"
|
|
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog"
|
|
import { Input } from "@/components/ui/input"
|
|
import { buildCommandItems } from "@/lib/dashboard-navigation"
|
|
|
|
interface DashboardCommandPaletteProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
}
|
|
|
|
export function DashboardCommandPalette({
|
|
open,
|
|
onOpenChange,
|
|
}: DashboardCommandPaletteProps) {
|
|
const router = useRouter()
|
|
const [query, setQuery] = useState("")
|
|
|
|
const items = useMemo(() => buildCommandItems(), [])
|
|
|
|
const filtered = useMemo(() => {
|
|
const q = query.trim().toLowerCase()
|
|
if (!q) return items
|
|
|
|
return items.filter((item) => {
|
|
const haystack = [item.title, item.description, ...item.keywords]
|
|
.join(" ")
|
|
.toLowerCase()
|
|
return haystack.includes(q)
|
|
})
|
|
}, [items, query])
|
|
|
|
const navigationItems = filtered.filter((item) => item.section === "Navigation")
|
|
const actionItems = filtered.filter((item) => item.section === "Actions")
|
|
|
|
const run = (href: string) => {
|
|
router.push(href)
|
|
onOpenChange(false)
|
|
setQuery("")
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-2xl border-zinc-200 p-0 sm:rounded-2xl">
|
|
<DialogHeader className="border-b border-zinc-200 px-5 py-4">
|
|
<DialogTitle className="text-xl">Command Center</DialogTitle>
|
|
<DialogDescription>
|
|
Jump anywhere in the cloud console with <kbd className="rounded border border-zinc-300 px-1 py-0.5 text-xs">⌘K</kbd>.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="p-4">
|
|
<div className="relative">
|
|
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
|
|
<Input
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
autoFocus
|
|
placeholder="Search routes, actions, billing, chain deploy..."
|
|
className="h-11 pl-9"
|
|
/>
|
|
</div>
|
|
|
|
<div className="mt-4 max-h-[420px] overflow-y-auto pr-1">
|
|
<Section
|
|
title="Actions"
|
|
items={actionItems}
|
|
onSelect={run}
|
|
/>
|
|
<Section
|
|
title="Navigation"
|
|
items={navigationItems}
|
|
onSelect={run}
|
|
/>
|
|
|
|
{filtered.length === 0 ? (
|
|
<div className="rounded-lg border border-dashed border-zinc-300 p-6 text-center text-sm text-zinc-500">
|
|
No results for "{query}".
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|
|
|
|
function Section({
|
|
title,
|
|
items,
|
|
onSelect,
|
|
}: {
|
|
title: string
|
|
items: Array<{ id: string; title: string; description: string; href: string }>
|
|
onSelect: (href: string) => void
|
|
}) {
|
|
if (items.length === 0) return null
|
|
|
|
return (
|
|
<div className="mb-4">
|
|
<p className="mb-2 px-1 text-xs font-semibold uppercase tracking-[0.14em] text-zinc-500">
|
|
{title}
|
|
</p>
|
|
<div className="space-y-1">
|
|
{items.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
onClick={() => onSelect(item.href)}
|
|
className="flex w-full items-start justify-between gap-3 rounded-lg border border-transparent px-3 py-2 text-left transition hover:border-zinc-200 hover:bg-zinc-50"
|
|
>
|
|
<div>
|
|
<p className="text-sm font-medium text-zinc-900">{item.title}</p>
|
|
<p className="text-xs text-zinc-500">{item.description}</p>
|
|
</div>
|
|
<ArrowRight className="mt-1 h-4 w-4 text-zinc-400" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|