import { Link, Outlet, useMatchRoute } from "@tanstack/react-router"; import { useCallback, useEffect, useState } from "react"; import { useSources, type Source } from "@executor/react"; import { cn } from "../lib/utils"; import { IconPlus, IconCopy, IconCheck } from "./icons"; import { LoadableBlock } from "./loadable"; import { SourceFavicon } from "./source-favicon"; // ── Status dot color ───────────────────────────────────────────────────── const statusColor: Record = { connected: "bg-primary", probing: "bg-amber-400", draft: "bg-muted-foreground/30", auth_required: "bg-amber-500", error: "bg-destructive", }; type AppMetaEnv = { readonly VITE_APP_VERSION: string; readonly VITE_GITHUB_URL: string; }; const { VITE_APP_VERSION, VITE_GITHUB_URL } = (import.meta as ImportMeta & { readonly env: AppMetaEnv; }).env; // ── useLatestVersion ───────────────────────────────────────────────────── function useLatestVersion(currentVersion: string) { const [latestVersion, setLatestVersion] = useState(null); useEffect(() => { let cancelled = false; fetch("https://registry.npmjs.org/executor/latest") .then((res) => res.json()) .then((data: { version?: string }) => { if (!cancelled && data.version) setLatestVersion(data.version); }) .catch(() => {}); return () => { cancelled = true; }; }, []); const updateAvailable = latestVersion !== null && latestVersion !== currentVersion; return { latestVersion, updateAvailable }; } // ── UpdateCard ─────────────────────────────────────────────────────────── function UpdateCard(props: { latestVersion: string }) { const command = `npm i -g executor@latest`; const [copied, setCopied] = useState(false); const handleCopy = useCallback(() => { void navigator.clipboard.writeText(command).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1500); }); }, [command]); return (

Update available

v{props.latestVersion}

); } // ── AppShell ───────────────────────────────────────────────────────────── export function AppShell() { const sources = useSources(); const matchRoute = useMatchRoute(); const isHome = matchRoute({ to: "/" }); const isSecrets = matchRoute({ to: "/secrets" }); const { latestVersion, updateAvailable } = useLatestVersion(VITE_APP_VERSION); return (
{/* Sidebar */} {/* Main content */}
); } // ── SourceItem ─────────────────────────────────────────────────────────── function SourceItem(props: { source: Source; matchRoute: ReturnType; }) { const { source, matchRoute } = props; const active = matchRoute({ to: "/sources/$sourceId", params: { sourceId: source.id }, fuzzy: true, }); return (
{source.name} ); } // ── NavItem ────────────────────────────────────────────────────────────── function NavItem(props: { to: string; label: string; active: boolean }) { return ( {props.label} ); }