improve utilities workspace navigation
This commit is contained in:
parent
0855724cb0
commit
305ea41ad3
5 changed files with 71 additions and 37 deletions
|
|
@ -9,11 +9,13 @@ const UtilitySwitcher = dynamic(() => import("@/components/portal/UtilitySwitche
|
|||
|
||||
export default function UtilitiesClient() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-lg border p-6">
|
||||
<h2 className="mb-4 text-xl font-semibold">Utilities</h2>
|
||||
<UtilitySwitcher />
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<div className="mb-1 font-mono text-xs uppercase tracking-[0.2em] text-accent">~/utilities</div>
|
||||
<h2 className="text-xl font-semibold tracking-tight">Workshop utilities</h2>
|
||||
<p className="mt-1 text-sm text-muted-foreground">Calculators and production tools in one workspace.</p>
|
||||
</div>
|
||||
<UtilitySwitcher />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,3 +64,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Dense, terminal-inspired calculator workspace without nested floating cards. */
|
||||
.laser-tool-workspace [class~="rounded-lg"][class~="border"] {
|
||||
@apply rounded-lg border-border/60 bg-background/20 shadow-none;
|
||||
}
|
||||
|
||||
.laser-tool-workspace [class~="rounded-lg"][class~="border"] > div:first-child {
|
||||
@apply px-4 py-3;
|
||||
}
|
||||
|
||||
.laser-tool-workspace [class~="rounded-lg"][class~="border"] > div:not(:first-child) {
|
||||
@apply px-4 pb-4;
|
||||
}
|
||||
|
||||
.laser-tool-workspace input,
|
||||
.laser-tool-workspace select,
|
||||
.laser-tool-workspace button[role="combobox"] {
|
||||
@apply border-border/70 bg-background/70 shadow-none transition-colors focus:border-accent/70 focus:ring-1 focus:ring-accent/30;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import { useMemo } from "react";
|
||||
import { useSearchParams, useRouter } from "next/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Calculator, ChevronDown } from "lucide-react";
|
||||
import { TOOLKIT_TABS } from "@/components/utilities/laser-toolkit/registry";
|
||||
|
||||
export default function LaserToolkitSwitcher({ basePath = "/portal/utilities" }: { basePath?: string }) {
|
||||
|
|
@ -34,23 +35,38 @@ export default function LaserToolkitSwitcher({ basePath = "/portal/utilities" }:
|
|||
const ActiveCmp = active.component;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<div className="min-w-0">
|
||||
<div className="border-b border-border/60 bg-background/30 p-3">
|
||||
<div className="relative sm:hidden">
|
||||
<Calculator className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-accent" />
|
||||
<select
|
||||
aria-label="Select laser calculator"
|
||||
value={activeKey}
|
||||
onChange={(e) => setTab(e.target.value)}
|
||||
className="h-10 w-full appearance-none rounded-lg border-border/70 bg-card pl-10 pr-9 text-sm"
|
||||
>
|
||||
{TOOLKIT_TABS.map((t) => <option key={t.key} value={t.key}>{t.label}</option>)}
|
||||
</select>
|
||||
<ChevronDown className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 opacity-50" />
|
||||
</div>
|
||||
<div className="hidden flex-wrap gap-1 sm:flex">
|
||||
{TOOLKIT_TABS.map(t => (
|
||||
<button
|
||||
key={t.key}
|
||||
onClick={() => setTab(t.key)}
|
||||
className={cn(
|
||||
"rounded-md border px-3 py-1.5 text-sm",
|
||||
activeKey === t.key ? "bg-primary text-primary-foreground" : "hover:bg-muted"
|
||||
"rounded-md border border-transparent px-3 py-1.5 text-xs transition-colors",
|
||||
activeKey === t.key
|
||||
? "border-border/60 bg-card text-foreground shadow-sm"
|
||||
: "text-muted-foreground hover:bg-muted/30 hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<div className="rounded-md border p-4">
|
||||
<div className="laser-tool-workspace">
|
||||
<ActiveCmp />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
|
|||
import dynamic from "next/dynamic";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ChevronRight, ExternalLink, TerminalSquare } from "lucide-react";
|
||||
|
||||
type Item = {
|
||||
key: string; // used in ?t=
|
||||
|
|
@ -216,9 +217,13 @@ export default function UtilitySwitcher() {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* top buttons unchanged */}
|
||||
<div className="mb-4 flex flex-wrap items-center gap-2">
|
||||
<div className="grid min-w-0 gap-4 lg:grid-cols-[220px_minmax(0,1fr)]">
|
||||
<aside className="h-fit overflow-hidden rounded-xl border border-border/70 bg-card/40 lg:sticky lg:top-4">
|
||||
<div className="flex items-center gap-2 border-b border-border/60 px-3 py-2.5 text-[11px] uppercase tracking-[0.16em] text-muted-foreground">
|
||||
<TerminalSquare className="h-3.5 w-3.5 text-accent" />
|
||||
Select utility
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-1 p-1.5 sm:grid-cols-3 lg:grid-cols-1">
|
||||
{ITEMS.map((it) => {
|
||||
const isInline = Boolean(it.component);
|
||||
const external = !isInline && isExternalHref(it.href);
|
||||
|
|
@ -235,10 +240,10 @@ export default function UtilitySwitcher() {
|
|||
}
|
||||
}}
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition",
|
||||
"group flex min-w-0 items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-xs transition-all sm:text-sm",
|
||||
isActive
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "hover:bg-muted"
|
||||
? "bg-accent/15 text-foreground shadow-[inset_2px_0_0_hsl(var(--accent))]"
|
||||
: "text-muted-foreground hover:bg-muted/30 hover:text-foreground"
|
||||
)}
|
||||
title={it.note || it.label}
|
||||
>
|
||||
|
|
@ -249,27 +254,27 @@ export default function UtilitySwitcher() {
|
|||
alt=""
|
||||
width={16}
|
||||
height={16}
|
||||
className="h-4 w-4 rounded-sm border object-cover"
|
||||
className="h-5 w-5 shrink-0 rounded border border-border/60 object-cover opacity-80"
|
||||
onError={(e) => {
|
||||
(e.currentTarget as HTMLImageElement).style.display = "none";
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<span className="truncate">{it.label}</span>
|
||||
<span className="min-w-0 flex-1 truncate">{it.label}</span>
|
||||
|
||||
{!isInline && external && (
|
||||
<span className="rounded bg-muted px-1 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground">
|
||||
new tab
|
||||
</span>
|
||||
<ExternalLink className="h-3 w-3 shrink-0 opacity-50" />
|
||||
)}
|
||||
{isInline && <ChevronRight className="hidden h-3.5 w-3.5 shrink-0 opacity-0 transition group-hover:opacity-50 lg:block" />}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div></aside>
|
||||
|
||||
{/* ⛔️ removed the old border/padding frame here */}
|
||||
<Panel item={activeItem} />
|
||||
<section className="min-w-0 overflow-hidden rounded-xl border border-border/70 bg-card/20 shadow-sm">
|
||||
<Panel item={activeItem} />
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import Link from "next/link";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type ToolShellProps = {
|
||||
|
|
@ -19,31 +18,23 @@ export default function ToolShell({
|
|||
subtitle,
|
||||
className,
|
||||
children,
|
||||
backHref = "/laser-toolkit",
|
||||
backLabel = "Back to Toolkit",
|
||||
}: ToolShellProps) {
|
||||
const desc = description ?? subtitle;
|
||||
|
||||
return (
|
||||
<div className={cn("mx-auto w-full max-w-5xl px-4 py-6", className)}>
|
||||
<div className="mb-6 flex items-start justify-between gap-4">
|
||||
<div className={cn("w-full p-4 sm:p-5", className)}>
|
||||
<div className="mb-4 flex items-start justify-between gap-4 border-b border-border/50 pb-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
|
||||
<div className="mb-1 text-[10px] uppercase tracking-[0.18em] text-accent">laser.calc</div>
|
||||
<h1 className="text-xl font-semibold tracking-tight">{title}</h1>
|
||||
{desc ? (
|
||||
<p className="mt-1 text-sm text-muted-foreground">{desc}</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href={backHref}
|
||||
className="inline-flex h-9 items-center rounded-md border border-input bg-background px-3 text-sm shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
{backLabel}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue