import { resolveEnvironmentMachineKind } from "@t3tools/contracts";import { ChevronDownIcon, FolderIcon } from "lucide-react";import { type ReactNode, useState } from "react";import { EnvironmentMachineIcon } from "../EnvironmentMachineIcon";import { ProjectFavicon } from "../ProjectFavicon";import { WorkspacePageContainer } from "../WorkspacePageContainer";import { useEnvironments } from "../../state/environments";import { Toggle, ToggleGroup } from "../ui/toggle-group";import {  Combobox,  ComboboxEmpty,  ComboboxSearchInput,  ComboboxItem,  ComboboxList,  ComboboxPopup,  ComboboxTrigger,} from "../ui/combobox";import { selectTriggerVariants } from "../ui/select";import { cn } from "../../lib/utils";import { ProjectSettingsPanel, useSettingsProjectGroups } from "./ProjectSettingsPanel";import { ProjectDefaultsSettings } from "./ProjectDefaultsSettings"; function ScopePicker({  label,  value,  options,  onChange,}: {  label: "project" | "machine";  value: string | null;  options: ReadonlyArray<{ value: string; label: string; icon?: ReactNode }>;  onChange: (value: string | null) => void;}) {  const [query, setQuery] = useState("");  const selected = options.find((option) => option.value === value);  const allIcon =    label === "project" ? <FolderIcon aria-hidden className="size-3.5 shrink-0" /> : null;  const items = [{ value: "all", label: `All ${label}s`, icon: allIcon }, ...options];  return (    <Combobox      items={items}      value={items.find((item) => item.value === (value ?? "all")) ?? null}      inputValue={query}      onInputValueChange={setQuery}      onOpenChange={() => setQuery("")}      onValueChange={(next) => {        if (next) onChange(next.value === "all" ? null : next.value);      }}    >      <ComboboxTrigger        aria-label={`${label === "project" ? "Project" : "Machine"} scope`}        className={cn(selectTriggerVariants({ size: "compact" }), "w-auto min-w-0 max-w-52")}      >        <span className="flex min-w-0 items-center gap-1.5">          {value === null ? allIcon : selected?.icon}          <span className="truncate">            {value === null ? `All ${label}s` : (selected?.label ?? `Unavailable ${label}`)}          </span>        </span>        <ChevronDownIcon aria-hidden className="-me-1 size-3 opacity-50" />      </ComboboxTrigger>      <ComboboxPopup align="start" className="w-64">        <ComboboxSearchInput aria-label={`Search ${label}s`} placeholder={`Search ${label}s...`} />        <ComboboxEmpty>No matching {label}s.</ComboboxEmpty>        <ComboboxList>          {(item: (typeof items)[number]) => (            <ComboboxItem              key={item.value}              value={item}              contentClassName="flex min-w-0 items-center gap-2"            >              {item.icon}              <span className="truncate">{item.label}</span>            </ComboboxItem>          )}        </ComboboxList>      </ComboboxPopup>    </Combobox>  );} export function ProjectsSettings({  projectKey,  machineId,  onScopeChange,}: {  projectKey: string | null;  machineId: string | null;  onScopeChange: (project: string | null, machine: string | null) => void;}) {  const groups = useSettingsProjectGroups();  const { environments } = useEnvironments();  const machine = environments.find((environment) => environment.environmentId === machineId);  const machineOptions = environments.map((environment) => ({    value: environment.environmentId,    label: environment.label,    icon: (      <EnvironmentMachineIcon        aria-hidden        kind={resolveEnvironmentMachineKind(environment.serverConfig)}        className="size-3.5 shrink-0"      />    ),  }));  return (    <div className="flex min-h-0 flex-1 flex-col">      <div className="scrollbar-gutter-both shrink-0 overflow-y-auto">        <WorkspacePageContainer className="pb-0">          <div            className="flex flex-wrap items-center gap-2"            role="group"            aria-label="Settings scope"          >            {environments.length > 3 ? (              <ScopePicker                label="machine"                value={machineId}                options={machineOptions}                onChange={(value) => onScopeChange(projectKey, value)}              />            ) : (              <ToggleGroup                aria-label="Machine scope"                variant="segmented"                className="max-w-full flex-wrap"                value={[machineId ?? "all"]}                onValueChange={(next) => {                  const value = next[0];                  if (value) onScopeChange(projectKey, value === "all" ? null : value);                }}              >                <Toggle value="all">All machines</Toggle>                {machineOptions.map((option) => (                  <Toggle key={option.value} value={option.value} title={option.label}>                    {option.icon}                    <span className="max-w-36 truncate">{option.label}</span>                  </Toggle>                ))}              </ToggleGroup>            )}            <div className="ms-auto">              <ScopePicker                label="project"                value={projectKey}                options={groups.map((group) => ({                  value: group.projectKey,                  label: group.displayName,                  icon: <ProjectFavicon project={group} className="size-3.5" />,                }))}                onChange={(value) => onScopeChange(value, machineId)}              />            </div>          </div>        </WorkspacePageContainer>      </div>      {machineId !== null && !machine ? (        <p className="p-8 text-sm text-muted-foreground">This machine is no longer available.</p>      ) : projectKey === null ? (        <ProjectDefaultsSettings environmentId={machine?.environmentId ?? null} />      ) : (        <ProjectSettingsPanel          projectKey={projectKey}          environmentId={machine?.environmentId ?? null}        />      )}    </div>  );}