UtilitySwitcher bug fixes

components/portal/UtilitySwitcher.tsx

@@ -4,8 +4,26 @@
 import { useRouter, useSearchParams } from "next/navigation";
 import { cn } from "@/lib/utils";
 
+type Item = {
+    label: string;
+    note: string;
+    icon: string;
+    href: string;
+    check?: string;
+    /** present only for subdomain links */
+    target?: "_blank";
+};
+
+type Tab = "onsite" | "subdomains";
+
+const TABS: { key: Tab; label: string }[] = [
+    { key: "onsite", label: "On-site" },
+{ key: "subdomains", label: "Subdomains" },
+];
+
 /** Raw catalog (from your old dashboard) */
-const RAW_ITEMS = [
+const RAW_ITEMS: Item[] = [
+    // --- on-site (same tab)
     {
         label: "Laser Toolkit",
         note: "convert laser settings, interval and more",
@@ -41,7 +59,7 @@ const RAW_ITEMS = [
     href: "https://makearmy.io/background-remover",
     check: "https://makearmy.io/background-remover",
 },
-// --- subdomains (open in new tab)
+// --- subdomains (new tab)
 {
     label: "Picsur",
     note: "Simple Image Host",
@@ -66,18 +84,9 @@ const RAW_ITEMS = [
     target: "_blank",
     check: "https://forge.makearmy.io",
 },
-] as const;
-
-type Item = (typeof RAW_ITEMS)[number];
-
-type Tab = "onsite" | "subdomains";
-
-const TABS: { key: Tab; label: string }[] = [
-    { key: "onsite", label: "On-site" },
-{ key: "subdomains", label: "Subdomains" },
 ];
 
-function classify(items: readonly Item[]) {
+function classify(items: Item[]) {
     const onsite: Item[] = [];
     const subdomains: Item[] = [];
     for (const it of items) {
@@ -86,8 +95,8 @@ function classify(items: readonly Item[]) {
             if (u.hostname === "makearmy.io") onsite.push(it);
             else subdomains.push(it);
         } catch {
-            // if it isn't a URL for some reason, treat as on-site path
-            onsite.push(it as Item);
+            // Treat malformed URLs as on-site paths
+            onsite.push(it);
         }
     }
     return { onsite, subdomains };
@@ -99,7 +108,6 @@ function Grid({ items, external }: { items: Item[]; external: boolean }) {
     return (
         <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
         {items.map((it) => {
-            // derive icon path (put your images wherever you keep them)
             const iconSrc = `/images/utils/${it.icon}`;
             const isExternal = external || it.target === "_blank";
             return (
@@ -118,7 +126,6 @@ function Grid({ items, external }: { items: Item[]; external: boolean }) {
                 height={32}
                 className="h-8 w-8 rounded-md border object-cover"
                 onError={(e) => {
-                    // tiny fallback if an icon is missing
                     (e.currentTarget as HTMLImageElement).style.display = "none";
                 }}
                 />