makearmy/le-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improve utilities workspace navigation

Browse source
This commit is contained in:
makearmy 2026-07-10 17:25:34 -04:00
parent 0855724cb0
commit 305ea41ad3
5 changed files with 71 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

33
app/components/portal/UtilitySwitcher.tsx
View file

@ -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>
);
}