From 305ea41ad33ec311b42531881c57af8965f4c54f Mon Sep 17 00:00:00 2001
From: makearmy <alex@makearmy.io>
Date: Fri, 10 Jul 2026 17:25:34 -0400
Subject: [PATCH] improve utilities workspace navigation

---
 app/app/portal/utilities/Client.tsx           | 10 +++---
 app/app/styles/globals.css                    | 20 +++++++++++
 .../portal/LaserToolkitSwitcher.tsx           | 28 ++++++++++++----
 app/components/portal/UtilitySwitcher.tsx     | 33 +++++++++++--------
 app/components/toolkit/ToolShell.tsx          | 17 +++-------
 5 files changed, 71 insertions(+), 37 deletions(-)

diff --git a/app/app/portal/utilities/Client.tsx b/app/app/portal/utilities/Client.tsx
index 0e8e1e1..5c58e3a 100644
--- a/app/app/portal/utilities/Client.tsx
+++ b/app/app/portal/utilities/Client.tsx
@@ -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>
     );
 }
diff --git a/app/app/styles/globals.css b/app/app/styles/globals.css
index 4841171..9ec318d 100644
--- a/app/app/styles/globals.css
+++ b/app/app/styles/globals.css
@@ -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;
+  }
+}
diff --git a/app/components/portal/LaserToolkitSwitcher.tsx b/app/components/portal/LaserToolkitSwitcher.tsx
index 69ddfda..3448b7f 100644
--- a/app/components/portal/LaserToolkitSwitcher.tsx
+++ b/app/components/portal/LaserToolkitSwitcher.tsx
@@ -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>
diff --git a/app/components/portal/UtilitySwitcher.tsx b/app/components/portal/UtilitySwitcher.tsx
index 36faf0e..86260aa 100644
--- a/app/components/portal/UtilitySwitcher.tsx
+++ b/app/components/portal/UtilitySwitcher.tsx
@@ -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>
     );
 }
diff --git a/app/components/toolkit/ToolShell.tsx b/app/components/toolkit/ToolShell.tsx
index 3611a9d..28d134d 100644
--- a/app/components/toolkit/ToolShell.tsx
+++ b/app/components/toolkit/ToolShell.tsx
@@ -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>
   );
 }
-