import { RotateCcwIcon } from "lucide-react";import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";import { useEffect, useState } from "react"; import {  ensurePrimaryEnvironmentReady,  resolveInitialServerAuthGateState,} from "../environments/primary";import { useSettingsRestore } from "../components/settings/SettingsPanels";import { Button } from "../components/ui/button";import { SidebarInset, SidebarTrigger } from "../components/ui/sidebar";import { isElectron } from "../env"; function SettingsContentLayout() {  const [restoreSignal, setRestoreSignal] = useState(0);  const { changedSettingLabels, restoreDefaults } = useSettingsRestore(() =>    setRestoreSignal((value) => value + 1),  );   useEffect(() => {    const onKeyDown = (event: KeyboardEvent) => {      if (event.defaultPrevented) return;      if (event.key === "Escape") {        event.preventDefault();        window.history.back();      }    };     window.addEventListener("keydown", onKeyDown);    return () => {      window.removeEventListener("keydown", onKeyDown);    };  }, []);   return (    <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground isolate">      <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground">        {!isElectron && (          <header className="border-b border-border px-3 py-2 sm:px-5">            <div className="flex items-center gap-2">              <SidebarTrigger className="size-7 shrink-0 md:hidden" />              <span className="text-sm font-medium text-foreground">Settings</span>              <div className="ms-auto flex items-center gap-2">                <Button                  size="xs"                  variant="outline"                  disabled={changedSettingLabels.length === 0}                  onClick={() => void restoreDefaults()}                >                  <RotateCcwIcon className="size-3.5" />                  Restore defaults                </Button>              </div>            </div>          </header>        )}         {isElectron && (          <div className="drag-region flex h-[52px] shrink-0 items-center border-b border-border px-5">            <span className="text-xs font-medium tracking-wide text-muted-foreground/70">              Settings            </span>            <div className="ms-auto flex items-center gap-2">              <Button                size="xs"                variant="outline"                disabled={changedSettingLabels.length === 0}                onClick={() => void restoreDefaults()}              >                <RotateCcwIcon className="size-3.5" />                Restore defaults              </Button>            </div>          </div>        )}         <div key={restoreSignal} className="min-h-0 flex flex-1 flex-col">          <Outlet />        </div>      </div>    </SidebarInset>  );} function SettingsRouteLayout() {  return <SettingsContentLayout />;} export const Route = createFileRoute("/settings")({  beforeLoad: async ({ location }) => {    const [, authGateState] = await Promise.all([      ensurePrimaryEnvironmentReady(),      resolveInitialServerAuthGateState(),    ]);    if (authGateState.status !== "authenticated") {      throw redirect({ to: "/pair", replace: true });    }     if (location.pathname === "/settings") {      throw redirect({ to: "/settings/general", replace: true });    }  },  component: SettingsRouteLayout,});