Settings Modal 01

"use client";

import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
import {
  RiExpandUpDownLine,
  RiFileExcel2Line,
  RiFileVideoLine,
  RiStoreLine,
  RiPaletteLine,
  RiBankCardLine,
  RiNetworkLine,
  RiPlugLine,
  RiCodeLine,
  RiBookOpenLine,
  RiGitMergeLine,
  RiDatabaseLine,
  RiFileTextLine,
  RiMoreLine,
  RiAddLine,
  RiSettingsLine,
  RiDeleteBinLine,
  RiUserLine,
  RiWrenchLine,
  RiCloseLine,
  RiComputerLine,
  RiDownload2Line,
  RiMoonLine,
  RiPlayLine,
  RiPuzzleLine,
  RiSettings4Line,
  RiSunLine,
} from "@remixicon/react";
import { cn } from "cn";
import { useTheme } from "next-themes";
import * as React from "react";

import { PlanArtFlame } from "@/components/blocks/settings-modal-01/components/plan-art-flame";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card as BaseCard, CardContent } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { DatePicker } from "@/components/ui/date-picker";
import {
  Dialog,
  DialogClose,
  DialogPortal,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
} from "@/components/ui/empty";
import { FileUpload, formatFileSize } from "@/components/ui/file-upload";
import { Input } from "@/components/ui/input";
import { SearchField } from "@/components/ui/search-field";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";

const noopSubscribe = () => () => {};
const subscribeNarrow = (onChange: () => void) => {
  const query = window.matchMedia("(max-width: 639px)");
  query.addEventListener("change", onChange);
  return () => query.removeEventListener("change", onChange);
};

function Card({ children }: { children: React.ReactNode }) {
  return (
    <BaseCard variant="muted" radius={16} size="flush" className="w-full">
      {children}
    </BaseCard>
  );
}
// The popups (select, menu, date picker) render in portals, so the pages pass
// the modal's theme scope down as `popupClassName`.

// Row descriptions and section labels: the reference sets them in 13px body-2.
function SettingsText({
  medium,
  className,
  ...props
}: React.ComponentProps<"p"> & { medium?: boolean }) {
  return (
    <p
      className={cn(
        // oxlint-disable-next-line shadcn/no-arbitrary-values -- reference: 13px description/section label (typography.css)
        "text-[13px] text-[color:var(--foreground-secondary,var(--muted-foreground))]",
        medium && "font-medium",
        className
      )}
      {...props}
    />
  );
}

function Row({
  label,
  description,
  children,
}: {
  label: string;
  description?: string;
  children?: React.ReactNode;
}) {
  return (
    <div className="group/row ps-3">
      <div className="flex min-h-[52px] items-center justify-between gap-4 py-2.5 pe-2.5">
        <div className="min-w-0 flex-1">
          <p className="text-sm">{label}</p>
          {description && (
            <SettingsText className="hidden sm:block">
              {description}
            </SettingsText>
          )}
        </div>
        {children}
      </div>
      <Separator className="group-last/row:hidden" />
    </div>
  );
}
function Choice({
  label,
  options,
  popupClassName,
}: {
  label: string;
  options: { label: string; value: string }[];
  popupClassName?: string;
}) {
  return (
    <Select items={options} defaultValue={options[0].value}>
      <SelectTrigger aria-label={label} size="sm" className="w-auto">
        <SelectValue />
      </SelectTrigger>
      <SelectContent className={popupClassName}>
        <SelectGroup>
          {options.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}
function General({ popupClassName }: { popupClassName?: string }) {
  return (
    <div className="flex flex-col gap-6">
      <BaseCard variant="muted" radius={16} size="sm" className="relative">
        <PlanArtFlame className="pointer-events-none absolute inset-y-0 right-0 h-full w-2/5 opacity-70 mask-l-from-50%" />
        <CardContent className="relative flex w-3/5 flex-col items-start gap-2.5">
          <Badge variant="caption" tone="neutral">
            Current plan
          </Badge>
          <div>
            <p className="font-medium">Pro, $20/month</p>
            <SettingsText>
              You use about twice what a free workspace gets.
            </SettingsText>
          </div>
          <Button size="sm" variant="outline" className="w-fit">
            Upgrade plan
          </Button>
        </CardContent>
      </BaseCard>
      <Card>
        <Row label="Usage" description="Review your workspace limits">
          <Button size="sm" variant="outline">
            Manage limits
          </Button>
        </Row>
      </Card>
      <div className="flex flex-col gap-2">
        <SettingsText medium className="px-3">
          Pull requests
        </SettingsText>
        <Card>
          <Row
            label="Review provider"
            description="Choose a provider for reviews"
          >
            <Choice
              popupClassName={popupClassName}
              label="Review provider"
              options={[
                { label: "GitHub", value: "github" },
                { label: "GitLab", value: "gitlab" },
                { label: "Bitbucket", value: "bitbucket" },
              ]}
            />
          </Row>
          <Row
            label="Pull request destination"
            description="Choose where links open"
          >
            <Choice
              popupClassName={popupClassName}
              label="Pull request destination"
              options={[
                { label: "In the app", value: "app" },
                { label: "In the browser", value: "browser" },
              ]}
            />
          </Row>
        </Card>
      </div>
      <div className="flex flex-col gap-2">
        <SettingsText medium className="px-3">
          Notifications
        </SettingsText>
        <Card>
          {[
            ["Important requests", "Get notified when a decision is needed"],
            [
              "System notifications",
              "Show notifications when a task completes",
            ],
            ["Completion sound", "Play a sound when a task completes"],
            ["Mobile alerts", "Receive notifications on your phone"],
          ].map(([label, description], i) => (
            <Row key={label} label={label} description={description}>
              <Switch aria-label={label} defaultChecked={i === 0} />
            </Row>
          ))}
        </Card>
      </div>
    </div>
  );
}
function SavableInput({
  label,
  initialValue,
  onSaved,
}: {
  label: string;
  initialValue: string;
  onSaved: () => void;
}) {
  const [value, setValue] = React.useState(initialValue);
  const committed = React.useRef(initialValue);
  return (
    <Input
      aria-label={label}
      type={label === "Email" ? "email" : "text"}
      value={value}
      onChange={(event) => setValue(event.target.value)}
      onKeyDown={(event) => {
        if (event.key === "Enter") {
          event.currentTarget.blur();
        }
      }}
      onBlur={() => {
        if (value !== committed.current) {
          committed.current = value;
          onSaved();
        }
      }}
      size="sm"
      className="w-[202px] max-w-[50%]"
    />
  );
}
function Profile({
  onSaved,
  popupClassName,
}: {
  onSaved: () => void;
  popupClassName?: string;
}) {
  return (
    <div className="flex flex-col gap-6">
      <Card>
        {[
          ["Email", "alex@example.com"],
          ["First name", "Alex"],
          ["Last name", "Morgan"],
        ].map(([label, value]) => (
          <Row key={label} label={label}>
            <SavableInput
              label={label}
              initialValue={value}
              onSaved={onSaved}
            />
          </Row>
        ))}
        <Row label="Date of birth">
          <DatePicker
            aria-label="Date of birth"
            defaultValue={new Date(1997, 6, 28)}
            className="h-8 w-[202px] max-w-[50%]"
            popoverClassName={popupClassName}
          />
        </Row>
      </Card>
      <Card>
        <Row label="Account">
          <Button size="sm" variant="outline">
            Manage
          </Button>
        </Row>
        <Row
          label="Public profile"
          description="Allow others to see your profile"
        >
          <Switch aria-label="Public profile" defaultChecked />
        </Row>
        <Row label="Device ID">
          <span className="max-w-[202px] truncate text-sm text-muted-foreground">
            a67e41d0-b2c4-47d1-98a6-51bd281a
          </span>
        </Row>
        <Row label="Log out from all devices">
          <Button size="sm" variant="outline">
            Log out
          </Button>
        </Row>
      </Card>
    </div>
  );
}
// reference: each server has its own coloured letter tile (the avatar colour pairs).
// oxlint-disable-next-line shadcn/no-arbitrary-values -- reference: per-server tile colour from the avatar tokens
const tilePink =
  "bg-[var(--avatar-pink-background,var(--surface-strong))] text-[color:var(--settings-tile-pink,var(--avatar-pink-foreground,var(--foreground)))]";
// oxlint-disable-next-line shadcn/no-arbitrary-values -- reference: per-server tile colour from the avatar tokens
const tileBlue =
  "bg-[var(--avatar-blue-background,var(--surface-strong))] text-[color:var(--avatar-blue-foreground,var(--foreground))]";
const servers = [
  {
    name: "Canvas",
    tile: tilePink,
    status: "Connected",
    tools: ["read_document", "list_pages", "export_file"],
  },
  {
    name: "Analytics",
    tile: "bg-surface-strong text-[color:var(--foreground-secondary,var(--muted-foreground))]",
    status: "Error",
    tools: [],
  },
  {
    name: "Hosting",
    tile: tileBlue,
    status: "Connected",
    tools: ["list_projects", "view_logs", "deploy"],
  },
];
function ServerRow({
  server,
  popupClassName,
}: {
  server: (typeof servers)[number];
  popupClassName?: string;
}) {
  const [expanded, setExpanded] = React.useState(false);
  return (
    <Collapsible
      open={expanded}
      onOpenChange={setExpanded}
      className="group/row"
    >
      <div className="py-2.5 ps-3 pe-2.5">
        <div className="flex items-center gap-2.5">
          <span
            className={cn(
              "relative flex size-8 shrink-0 items-center justify-center rounded-[8px] text-sm font-medium",
              server.tile
            )}
          >
            {server.name[0]}
            <span
              aria-hidden
              className={cn(
                "absolute -start-0.5 -bottom-0.5 size-2.5 rounded-full ring-2 ring-surface-sunken",
                server.status === "Connected"
                  ? "bg-(--settings-connected)"
                  : "bg-(--settings-error)"
              )}
            />
          </span>
          <div className="min-w-0 flex-1">
            <div className="flex items-baseline gap-2">
              <p className="text-sm font-medium">{server.name}</p>
              {/* reference: quiet inline action, 13px tertiary text that steps to secondary on hover, no fill */}
              <Button
                variant="unstyled"
                size="xs"
                // oxlint-disable-next-line shadcn/no-arbitrary-values, shadcn/no-restyle -- reference: 13px tertiary inline action
                className="text-[13px] font-normal tracking-normal text-[color:var(--foreground-faint,var(--muted-foreground))] transition-colors duration-150 ease-out hover:text-[color:var(--foreground-secondary,var(--muted-foreground))] motion-reduce:transition-none"
              >
                Log out
              </Button>
            </div>
            <div
              // oxlint-disable-next-line shadcn/no-arbitrary-values -- reference: 13px description/section label (typography.css)
              className="flex items-center gap-1 text-[13px] text-[color:var(--foreground-secondary,var(--muted-foreground))]"
            >
              {server.status === "Connected"
                ? `${server.tools.length} tools enabled`
                : "Error — Show output"}
              {server.tools.length > 0 && (
                <CollapsibleTrigger
                  render={
                    <Button
                      variant="unstyled"
                      // oxlint-disable-next-line shadcn/no-restyle, shadcn/no-arbitrary-values -- reference: 16px chevron, tertiary icon that steps to secondary on hover, no fill
                      className="size-4 rounded-[4px] text-[color:var(--foreground-faint,var(--muted-foreground))] transition-colors duration-150 ease-out hover:text-[color:var(--foreground-secondary,var(--muted-foreground))] motion-reduce:transition-none"
                      tooltip={{
                        children: `${expanded ? "Hide" : "Show"} ${server.name} tools`,
                        className: popupClassName,
                      }}
                    />
                  }
                >
                  <RiExpandUpDownLine className="size-4" />
                </CollapsibleTrigger>
              )}
            </div>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger
              render={
                <Button
                  variant="ghost"
                  size="icon-sm"
                  // oxlint-disable-next-line shadcn/no-restyle -- reference: the row "..." button is 28px (6px radius), between icon-xs (24) and icon-sm (32)
                  className="size-7 rounded-[6px] text-(--foreground-secondary,var(--muted-foreground)) hover:text-(--foreground-secondary,var(--muted-foreground)) aria-expanded:text-(--foreground-secondary,var(--muted-foreground))"
                  tooltip={{
                    children: "More actions",
                    className: popupClassName,
                  }}
                  aria-label={`Actions for ${server.name}`}
                />
              }
            >
              <RiMoreLine />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className={popupClassName}>
              <DropdownMenuGroup>
                {["Show output", "Refresh tools", "Remove server"].map(
                  (item) => (
                    <DropdownMenuItem key={item}>{item}</DropdownMenuItem>
                  )
                )}
              </DropdownMenuGroup>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
        <CollapsibleContent>
          <div className="flex flex-wrap gap-1.5 pt-2 ps-10.5">
            {server.tools.map((tool) => (
              <Badge
                key={tool}
                variant="caption"
                tone="neutral"
                className="max-w-full break-all whitespace-normal"
              >
                {tool}
              </Badge>
            ))}
          </div>
        </CollapsibleContent>
      </div>
      <Separator className="group-last/row:hidden" />
    </Collapsible>
  );
}
function Tools({ popupClassName }: { popupClassName?: string }) {
  const [scope, setScope] = React.useState("Home");
  const scopes = ["Home", "Studio", "Projects", "Cloud"];
  return (
    <div className="flex flex-col gap-6">
      {/* reference: gray pill tabs (10px, px-2 py-[5px]) with a sliding thumb */}
      <Tabs
        value={scope}
        onValueChange={(value) => {
          if (value) {
            setScope(String(value));
          }
        }}
      >
        <TabsList
          aria-label="Project scope"
          variant="pill-muted"
          className="max-w-full overflow-x-auto"
        >
          {scopes.map((name) => (
            <TabsTrigger key={name} value={name}>
              {name}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>
      <div className="flex flex-col gap-2">
        <SettingsText medium className="px-2">
          Authentication
        </SettingsText>
        <Card>
          <Row
            label="Wait for authentication"
            description="Wait for tools to authenticate before continuing"
          >
            <Switch aria-label="Wait for authentication" defaultChecked />
          </Row>
        </Card>
      </div>
      <div className="flex flex-col gap-2">
        <div className="px-2">
          <SettingsText medium>{scope} servers</SettingsText>
          <SettingsText>Servers available in this scope.</SettingsText>
        </div>
        <Card>
          {(scope === "Projects"
            ? []
            : scope === "Cloud"
              ? [servers[2]]
              : servers.slice(0, 2)
          ).map((server) => (
            <ServerRow
              key={server.name}
              server={server}
              popupClassName={popupClassName}
            />
          ))}
          {/* reference: the whole row is the button; only the tile steps on hover */}
          <Button
            variant="unstyled"
            // oxlint-disable-next-line shadcn/no-restyle -- reference: the whole new-server row is the button, padded like the other rows
            className="group w-full justify-start gap-2.5 py-2.5 ps-3 pe-2.5 text-start"
          >
            <span className="flex size-8 shrink-0 items-center justify-center rounded-[8px] bg-surface-strong text-(--foreground-secondary,var(--muted-foreground)) transition-colors duration-150 ease-out group-hover:bg-border motion-reduce:transition-none">
              <RiAddLine className="size-5" aria-hidden />
            </span>
            <span className="flex min-w-0 flex-col">
              <span className="text-sm font-normal">New server</span>
              {/* oxlint-disable-next-line shadcn/no-arbitrary-values -- reference: 13px description */}
              <span className="text-[13px] font-normal text-[color:var(--foreground-secondary,var(--muted-foreground))]">
                Add a custom server
              </span>
            </span>
          </Button>
        </Card>
      </div>
      <div className="flex flex-col gap-2">
        <div className="flex items-end justify-between px-2">
          <div>
            <SettingsText medium>Team servers</SettingsText>
            <SettingsText>Configured in the dashboard</SettingsText>
          </div>
          <Button size="sm" variant="outline">
            Manage
          </Button>
        </div>
        <BaseCard variant="muted" radius={16}>
          <Empty variant="ghost">
            <EmptyHeader>
              <EmptyTitle>No team servers</EmptyTitle>
              <EmptyDescription>
                Configure servers for your team workspace.
              </EmptyDescription>
            </EmptyHeader>
            <Button size="sm" variant="outline">
              Configure team servers
            </Button>
          </Empty>
        </BaseCard>
      </div>
      <div className="flex flex-col gap-2">
        <SettingsText medium className="px-2">
          Plugin servers
        </SettingsText>
        <Card>
          {servers.map((server) => (
            <ServerRow
              key={server.name}
              server={server}
              popupClassName={popupClassName}
            />
          ))}
        </Card>
      </div>
    </div>
  );
}
interface StoredFile {
  id: string;
  name: string;
  kind: string;
  date: string;
  bytes: number;
  stamp: number;
}
const initialFiles: StoredFile[] = Array.from({ length: 24 }, (_, i) => ({
  id: `file-${i}`,
  name: `${
    ["Project brief", "Budget", "Planning notes", "Presentation"][i % 4]
  } ${i + 1}`,
  kind: i % 4 === 1 ? "spreadsheet" : "document",
  date: "May 11, 2026",
  bytes: (i + 1) * 100_000,
  stamp: 24 - i,
}));
function Storage({ popupClassName }: { popupClassName?: string }) {
  const [files, setFiles] = React.useState(initialFiles);
  const [entering, setEntering] = React.useState<string | null>(null);
  const [deleting, setDeleting] = React.useState<string[]>([]);
  const timers = React.useRef<ReturnType<typeof setTimeout>[]>([]);
  React.useEffect(
    () => () => {
      for (const timer of timers.current) {
        clearTimeout(timer);
      }
    },
    []
  );
  const deleteFile = (id: string) => {
    setDeleting((prev) => [...prev, id]);
    const reduced = window.matchMedia(
      "(prefers-reduced-motion: reduce)"
    ).matches;
    timers.current.push(
      setTimeout(
        () => {
          setFiles((prev) => prev.filter((file) => file.id !== id));
          setSelected((prev) => prev.filter((item) => item !== id));
          setDeleting((prev) => prev.filter((item) => item !== id));
        },
        reduced ? 0 : 225
      )
    );
  };
  const [selected, setSelected] = React.useState<string[]>([]);
  const [query, setQuery] = React.useState("");
  const [kind, setKind] = React.useState("all");
  const [order, setOrder] = React.useState("newest");
  const [page, setPage] = React.useState(1);
  const [sort, setSort] = React.useState<{
    key: "name" | "stamp" | "bytes";
    asc: boolean;
  } | null>(null);
  const filtered = files
    .filter(
      (file) =>
        (kind === "all" || file.kind === kind) &&
        file.name.toLowerCase().includes(query.toLowerCase())
    )
    .toSorted((a, b) => {
      if (!sort) {
        return order === "newest" ? b.stamp - a.stamp : a.stamp - b.stamp;
      }
      const cmp =
        sort.key === "name"
          ? a.name.localeCompare(b.name)
          : a[sort.key] - b[sort.key];
      return sort.asc ? cmp : -cmp;
    });
  const pages = Math.max(1, Math.ceil(filtered.length / 6));
  const current = Math.min(page, pages);
  const rows = filtered.slice((current - 1) * 6, current * 6);
  const toggle = (id: string) =>
    setSelected((prev) =>
      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
    );
  return (
    <div className="flex flex-col gap-6 pt-2.5">
      <FileUpload
        onUploadComplete={(file) => {
          const now = Date.now();
          setFiles((prev) => [
            {
              id: `upload-${now}`,
              name: file.name,
              kind: file.name.toLowerCase().endsWith(".xlsx")
                ? "spreadsheet"
                : "document",
              date: new Date(now).toLocaleDateString(),
              bytes: file.size,
              stamp: now,
            },
            ...prev,
          ]);
          setPage(1);
          setEntering(`upload-${now}`);
          timers.current.push(setTimeout(() => setEntering(null), 400));
        }}
      />
      <section className="settings-modal-01-rows overflow-x-auto rounded-[16px] border border-border pt-2 pb-3">
        <div className="flex min-w-[520px] items-center justify-between gap-2 px-3 py-1">
          <div className="text-sm whitespace-nowrap">
            <span className="block text-muted-foreground">Stored in</span>
            {filtered.length} files
          </div>
          <Select
            value={kind}
            onValueChange={(value) => {
              if (value != null) {
                setKind(value);
                setPage(1);
              }
            }}
            items={[
              { value: "all", label: "File type" },
              { value: "document", label: "Documents" },
              { value: "spreadsheet", label: "Spreadsheets" },
              { value: "video", label: "Videos" },
            ]}
          >
            <SelectTrigger aria-label="Filter by file type" className="w-auto">
              <SelectValue />
            </SelectTrigger>
            <SelectContent className={popupClassName}>
              <SelectGroup>
                {[
                  ["all", "File type"],
                  ["document", "Documents"],
                  ["spreadsheet", "Spreadsheets"],
                  ["video", "Videos"],
                ].map(([value, label]) => (
                  <SelectItem key={value} value={value}>
                    {label}
                  </SelectItem>
                ))}
              </SelectGroup>
            </SelectContent>
          </Select>
          <Select
            value={order}
            onValueChange={(value) => {
              if (value != null) {
                setOrder(value);
                setSort(null);
                setPage(1);
              }
            }}
            items={[
              { value: "newest", label: "Modified" },
              { value: "oldest", label: "Oldest first" },
            ]}
          >
            <SelectTrigger aria-label="Order by" className="w-auto">
              <SelectValue />
            </SelectTrigger>
            <SelectContent className={popupClassName}>
              <SelectGroup>
                <SelectItem value="newest">Modified</SelectItem>
                <SelectItem value="oldest">Oldest first</SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
          <SearchField
            aria-label="Search files"
            placeholder="Search"
            value={query}
            onChange={(value) => {
              setQuery(value);
              setPage(1);
            }}
            size="sm"
            fieldClassName="w-[153px]"
          />
        </div>

        <Table className="mt-2 min-w-[520px]">
          <TableHeader>
            <TableRow>
              <TableHead>
                <Checkbox
                  aria-label="Select all files on this page"
                  checked={
                    rows.length > 0 &&
                    rows.every((f) => selected.includes(f.id))
                  }
                  indeterminate={
                    rows.some((f) => selected.includes(f.id)) &&
                    !rows.every((f) => selected.includes(f.id))
                  }
                  onCheckedChange={(checked) =>
                    setSelected((prev) =>
                      checked
                        ? [...new Set([...prev, ...rows.map((f) => f.id)])]
                        : prev.filter((id) => !rows.some((f) => f.id === id))
                    )
                  }
                />
              </TableHead>
              {(
                [
                  ["File name", "name"],
                  ["Uploaded on", "stamp"],
                  ["File size", "bytes"],
                ] as const
              ).map(([label, key]) => (
                <TableHead key={key}>
                  <Button
                    variant="text"
                    size="xs"
                    onClick={() =>
                      setSort((prev) =>
                        prev?.key === key
                          ? prev.asc
                            ? { key, asc: false }
                            : null
                          : { key, asc: true }
                      )
                    }
                  >
                    {label} ↕
                  </Button>
                </TableHead>
              ))}
              <TableHead>Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.map((file) => (
              <TableRow
                key={file.id}
                data-motion={
                  deleting.includes(file.id)
                    ? "out"
                    : entering === file.id
                      ? "in"
                      : undefined
                }
              >
                <TableCell>
                  <Checkbox
                    aria-label={`Select ${file.name}`}
                    checked={selected.includes(file.id)}
                    onCheckedChange={() => toggle(file.id)}
                  />
                </TableCell>
                <TableCell>
                  <span className="flex items-center gap-2">
                    {file.kind === "spreadsheet" ? (
                      <RiFileExcel2Line className="size-5 shrink-0" />
                    ) : file.kind === "video" ? (
                      <RiFileVideoLine className="size-5 shrink-0" />
                    ) : (
                      <RiFileTextLine className="size-5 shrink-0" />
                    )}
                    {file.name}
                  </span>
                </TableCell>
                <TableCell className="whitespace-nowrap">{file.date}</TableCell>
                <TableCell className="whitespace-nowrap">
                  {formatFileSize(file.bytes)}
                </TableCell>
                <TableCell>
                  <div className="flex gap-2">
                    <Button
                      variant="outline"
                      size="icon-sm"
                      tooltip={{
                        children: "Delete file",
                        className: popupClassName,
                        size: "default",
                      }}
                      aria-label={`Delete ${file.name}`}
                      onClick={() => deleteFile(file.id)}
                    >
                      <RiDeleteBinLine />
                    </Button>
                    <DropdownMenu>
                      <DropdownMenuTrigger
                        render={
                          <Button
                            variant="outline"
                            size="icon-sm"
                            tooltip={{
                              children: "More actions",
                              className: popupClassName,
                            }}
                            aria-label={`More actions for ${file.name}`}
                          />
                        }
                      >
                        <RiMoreLine />
                      </DropdownMenuTrigger>
                      <DropdownMenuContent
                        align="end"
                        className={popupClassName}
                      >
                        <DropdownMenuGroup>
                          {["Download file", "Rename", "Copy link"].map(
                            (action) => (
                              <DropdownMenuItem key={action}>
                                {action}
                              </DropdownMenuItem>
                            )
                          )}
                        </DropdownMenuGroup>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>

        {rows.length === 0 && (
          <Empty className="min-h-48">
            <EmptyHeader>
              <EmptyDescription>No files match your filters.</EmptyDescription>
            </EmptyHeader>
          </Empty>
        )}
        <div className="flex items-center justify-between px-3 pt-3 text-sm">
          <Button
            variant="outline"
            size="sm"
            disabled={current === 1}
            onClick={() => setPage(current - 1)}
          >
            Previous
          </Button>
          <div className="flex items-center gap-1" aria-label="Pages">
            {Array.from({ length: pages }, (_, i) => (
              <Button
                key={i}
                size="icon-sm"
                variant={current === i + 1 ? "secondary" : "ghost"}
                aria-label={`Go to page ${i + 1}`}
                aria-current={current === i + 1 ? "page" : undefined}
                onClick={() => setPage(i + 1)}
              >
                {i + 1}
              </Button>
            ))}
          </div>
          <Button
            variant="outline"
            size="sm"
            disabled={current === pages}
            onClick={() => setPage(current + 1)}
          >
            Next
          </Button>
        </div>
      </section>
    </div>
  );
}

function Group({
  title,
  action,
  children,
}: {
  title?: string;
  action?: React.ReactNode;
  children: React.ReactNode;
}) {
  return (
    <div className="flex flex-col gap-2">
      {title && (
        <div className="flex items-center justify-between ps-3">
          <SettingsText medium>{title}</SettingsText>
          {action}
        </div>
      )}
      <Card>{children}</Card>
    </div>
  );
}
function SwitchRow({
  label,
  description,
  defaultChecked,
}: {
  label: string;
  description?: string;
  defaultChecked?: boolean;
}) {
  return (
    <Row label={label} description={description}>
      <Switch aria-label={label} defaultChecked={defaultChecked} />
    </Row>
  );
}
function TextRow({
  label,
  description,
  defaultValue,
  placeholder,
}: {
  label: string;
  description?: string;
  defaultValue?: string;
  placeholder?: string;
}) {
  return (
    <Row label={label} description={description}>
      <Input
        aria-label={label}
        defaultValue={defaultValue}
        placeholder={placeholder}
        size="sm"
        className="w-[202px] max-w-[50%]"
      />
    </Row>
  );
}
function Tile({ icon: Icon }: { icon: typeof RiSettingsLine }) {
  return (
    <span className="flex size-8 shrink-0 items-center justify-center rounded-[8px] bg-surface-strong text-muted-foreground">
      <Icon className="size-4" aria-hidden />
    </span>
  );
}
function ListRow({
  icon,
  label,
  description,
  children,
}: {
  icon: typeof RiSettingsLine;
  label: string;
  description: string;
  children: React.ReactNode;
}) {
  return (
    <div className="group/row ps-3">
      <div className="flex items-center gap-2.5 py-2.5 pe-2.5">
        <Tile icon={icon} />
        <div className="min-w-0 flex-1">
          <p className="truncate text-sm">{label}</p>
          <SettingsText className="truncate">{description}</SettingsText>
        </div>
        {children}
      </div>
      <Separator className="group-last/row:hidden" />
    </div>
  );
}

const themeOptions = [
  { value: "light", label: "Light", icon: RiSunLine },
  { value: "dark", label: "Dark", icon: RiMoonLine },
  { value: "system", label: "System", icon: RiComputerLine },
] as const;
function Appearance({
  onThemeChange,
  popupClassName,
}: {
  popupClassName?: string;
  onThemeChange?: (theme: "light" | "dark" | "system") => void;
}) {
  const { theme, setTheme } = useTheme();
  const mounted = React.useSyncExternalStore(
    noopSubscribe,
    () => true,
    () => false
  );
  const current = mounted ? (theme ?? "system") : "system";
  return (
    <div className="flex flex-col gap-6 pt-3">
      <Group title="Theme">
        <Row label="Color theme" description="Match your system or pick one">
          <ToggleGroup
            aria-label="Color theme"
            variant="segmented"
            value={[current]}
            onValueChange={(next) => {
              const value = next[0] as "light" | "dark" | "system" | undefined;
              if (!value) {
                return;
              }
              if (onThemeChange) {
                onThemeChange(value);
              } else {
                setTheme(value);
              }
            }}
          >
            {themeOptions.map(({ value, label, icon: Icon }) => (
              <ToggleGroupItem key={value} value={value} className="gap-1.5">
                <Icon aria-hidden />
                {label}
              </ToggleGroupItem>
            ))}
          </ToggleGroup>
        </Row>
      </Group>
      <Group title="Interface">
        <Row label="Text size" description="Scale text across the app">
          <Choice
            popupClassName={popupClassName}
            label="Text size"
            options={[
              { label: "Default", value: "default" },
              { label: "Large", value: "large" },
              { label: "Compact", value: "compact" },
            ]}
          />
        </Row>
        <Row label="Density" description="Space between rows and controls">
          <Choice
            popupClassName={popupClassName}
            label="Density"
            options={[
              { label: "Comfortable", value: "comfortable" },
              { label: "Compact", value: "compact" },
            ]}
          />
        </Row>
        <SwitchRow
          label="Reduce motion"
          description="Use simple fades instead of movement"
        />
        <SwitchRow
          label="Show line numbers"
          description="Number lines in code blocks"
          defaultChecked
        />
      </Group>
    </div>
  );
}

const invoices = [
  { id: "INV-1042", date: "Oct 1, 2026", amount: "$20.00", status: "Paid" },
  { id: "INV-1031", date: "Sep 1, 2026", amount: "$20.00", status: "Paid" },
  { id: "INV-1019", date: "Aug 1, 2026", amount: "$20.00", status: "Paid" },
  { id: "INV-1007", date: "Jul 1, 2026", amount: "$20.00", status: "Paid" },
];
function Billing({ popupClassName }: { popupClassName?: string }) {
  return (
    <div className="flex flex-col gap-6">
      <BaseCard variant="muted" radius={16} size="sm" className="relative">
        <PlanArtFlame className="pointer-events-none absolute inset-y-0 right-0 h-full w-1/2 opacity-70" />
        <CardContent className="relative flex w-1/2 flex-col items-start gap-2.5">
          <Badge variant="caption" tone="neutral">
            Next payment
          </Badge>
          <div>
            <p className="font-medium">$20.00 on Nov 1, 2026</p>
            <SettingsText>Personal plan, billed monthly.</SettingsText>
          </div>
          <Button size="sm" variant="outline" className="w-fit">
            Change plan
          </Button>
        </CardContent>
      </BaseCard>
      <Group title="Payment">
        <Row label="Payment method" description="Visa ending in 4242">
          <Button size="sm" variant="outline">
            Update
          </Button>
        </Row>
        <Row label="Billing cycle" description="Switch to yearly and save 15%">
          <Choice
            popupClassName={popupClassName}
            label="Billing cycle"
            options={[
              { label: "Monthly", value: "monthly" },
              { label: "Yearly", value: "yearly" },
            ]}
          />
        </Row>
        <TextRow
          label="Billing email"
          description="Receipts are sent here"
          defaultValue="billing@example.com"
        />
      </Group>
      <div className="flex flex-col gap-2">
        <SettingsText medium className="ps-3">
          Invoices
        </SettingsText>
        <Card>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Invoice</TableHead>
                <TableHead>Date</TableHead>
                <TableHead>Amount</TableHead>
                <TableHead className="text-end">
                  <span className="sr-only">Download</span>
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {invoices.map((invoice) => (
                <TableRow key={invoice.id}>
                  <TableCell>{invoice.id}</TableCell>
                  <TableCell>{invoice.date}</TableCell>
                  <TableCell>{invoice.amount}</TableCell>
                  <TableCell className="text-end">
                    <Button
                      size="icon-sm"
                      variant="ghost"
                      aria-label={`Download ${invoice.id}`}
                      tooltip="Download"
                    >
                      <RiDownload2Line />
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </Card>
      </div>
    </div>
  );
}

function Rules() {
  const [rules, setRules] = React.useState([
    {
      id: "r1",
      name: "Ask before running commands",
      note: "Pause for approval on shell commands",
      on: true,
    },
    {
      id: "r2",
      name: "Summarize long threads",
      note: "Add a summary after 20 messages",
      on: true,
    },
    {
      id: "r3",
      name: "Auto-label new tickets",
      note: "Tag tickets by topic when created",
      on: false,
    },
  ]);
  return (
    <div className="flex flex-col gap-6 pt-3">
      <Group
        title="Rules"
        action={
          <Button
            size="xs"
            variant="ghost"
            onClick={() =>
              setRules((prev) => [
                ...prev,
                {
                  id: `r${prev.length + 1}-${Date.now()}`,
                  name: "Untitled rule",
                  note: "Describe when this rule applies",
                  on: true,
                },
              ])
            }
          >
            <RiAddLine />
            New rule
          </Button>
        }
      >
        {rules.map((rule) => (
          <Row key={rule.id} label={rule.name} description={rule.note}>
            <Switch
              aria-label={rule.name}
              checked={rule.on}
              onCheckedChange={(on) =>
                setRules((prev) =>
                  prev.map((item) =>
                    item.id === rule.id ? { ...item, on } : item
                  )
                )
              }
            />
          </Row>
        ))}
      </Group>
      <Group title="Workflows">
        {[
          ["Weekly digest", "Every Monday at 9:00"],
          ["Release checklist", "When a release is tagged"],
          ["Stale ticket sweep", "Every day at 18:00"],
        ].map(([name, when]) => (
          <Row key={name} label={name} description={when}>
            <Button size="sm" variant="outline">
              <RiPlayLine />
              Run
            </Button>
          </Row>
        ))}
      </Group>
    </div>
  );
}

function DesktopGeneral({ popupClassName }: { popupClassName?: string }) {
  return (
    <div className="flex flex-col gap-6 pt-3">
      <Group title="Startup">
        <SwitchRow
          label="Launch at login"
          description="Open the app when you sign in"
        />
        <SwitchRow
          label="Show in menu bar"
          description="Keep a shortcut in the menu bar"
          defaultChecked
        />
        <Row label="Open links in" description="Where web links open">
          <Choice
            popupClassName={popupClassName}
            label="Open links in"
            options={[
              { label: "Default browser", value: "default" },
              { label: "In the app", value: "app" },
            ]}
          />
        </Row>
      </Group>
      <Group title="Window">
        <Row label="Zoom" description="Scale the whole window">
          <Choice
            popupClassName={popupClassName}
            label="Zoom"
            options={[
              { label: "100%", value: "100" },
              { label: "110%", value: "110" },
              { label: "125%", value: "125" },
            ]}
          />
        </Row>
        <SwitchRow
          label="Keep on top"
          description="Float above other windows"
        />
      </Group>
      <Group title="Updates">
        <Row label="Update channel" description="Choose how early you update">
          <Choice
            popupClassName={popupClassName}
            label="Update channel"
            options={[
              { label: "Stable", value: "stable" },
              { label: "Beta", value: "beta" },
            ]}
          />
        </Row>
        <Row label="Version" description="Up to date">
          <Button size="sm" variant="outline">
            Check for updates
          </Button>
        </Row>
      </Group>
    </div>
  );
}

function Plugins() {
  const [installed, setInstalled] = React.useState<string[]>(["calendar-sync"]);
  const items = [
    ["calendar-sync", "Calendar sync", "Show events beside your tasks"],
    ["issue-links", "Issue links", "Turn ticket IDs into links"],
    ["voice-notes", "Voice notes", "Dictate into any field"],
    ["team-digest", "Team digest", "Send a weekly summary"],
  ];
  return (
    <div className="pt-3">
      <Group title="Available">
        {items.map(([id, name, note]) => {
          const on = installed.includes(id);
          return (
            <ListRow
              key={id}
              icon={RiPuzzleLine}
              label={name}
              description={note}
            >
              <Button
                size="sm"
                variant="outline"
                aria-pressed={on}
                onClick={() =>
                  setInstalled((prev) =>
                    on ? prev.filter((item) => item !== id) : [...prev, id]
                  )
                }
              >
                {on ? "Remove" : "Install"}
              </Button>
            </ListRow>
          );
        })}
      </Group>
    </div>
  );
}

function Developer() {
  return (
    <div className="flex flex-col gap-6 pt-3">
      <Group title="Tools">
        <SwitchRow
          label="Developer mode"
          description="Show inspector and extra menus"
        />
        <SwitchRow
          label="Verbose logging"
          description="Write detailed logs to disk"
        />
        <TextRow
          label="Local server port"
          description="Used for local previews"
          defaultValue="3000"
        />
      </Group>
      <Group title="Data">
        <Row label="Logs" description="Export the last 7 days">
          <Button size="sm" variant="outline">
            Export logs
          </Button>
        </Row>
        <Row label="Reset settings" description="Restore every default">
          <Button size="sm" variant="outline">
            Reset
          </Button>
        </Row>
      </Group>
    </div>
  );
}

function Skills() {
  const [query, setQuery] = React.useState("");
  const skills = [
    ["Code review", "Check a change for bugs and style"],
    ["Write tests", "Add tests that cover new code"],
    ["Release notes", "Draft notes from merged changes"],
    ["Explain code", "Describe how a file works"],
    ["Refactor", "Simplify code without changing behavior"],
  ].filter(([name]) => name.toLowerCase().includes(query.trim().toLowerCase()));
  return (
    <div className="flex flex-col gap-6">
      <SearchField
        aria-label="Search skills"
        placeholder="Search skills"
        value={query}
        onChange={setQuery}
        shape="rounded"
      />
      <Group title="Skills">
        {skills.length === 0 ? (
          <p className="py-6 pe-3 text-center text-sm text-muted-foreground">
            No skills match.
          </p>
        ) : (
          skills.map(([name, note], i) => (
            <ListRow
              key={name}
              icon={RiBookOpenLine}
              label={name}
              description={note}
            >
              <Switch aria-label={name} defaultChecked={i < 3} />
            </ListRow>
          ))
        )}
      </Group>
    </div>
  );
}

function Git({ popupClassName }: { popupClassName?: string }) {
  return (
    <div className="flex flex-col gap-6 pt-3">
      <Group title="Branches">
        <Row label="Default branch" description="Used when starting new work">
          <Choice
            popupClassName={popupClassName}
            label="Default branch"
            options={[
              { label: "main", value: "main" },
              { label: "develop", value: "develop" },
            ]}
          />
        </Row>
        <TextRow
          label="Branch prefix"
          description="Added to new branch names"
          defaultValue="alex/"
        />
        <SwitchRow
          label="Delete merged branches"
          description="Clean up after a merge"
          defaultChecked
        />
      </Group>
      <Group title="Commits">
        <Row label="Message style" description="How messages are written">
          <Choice
            popupClassName={popupClassName}
            label="Message style"
            options={[
              { label: "Conventional", value: "conventional" },
              { label: "Plain", value: "plain" },
            ]}
          />
        </Row>
        <SwitchRow
          label="Sign commits"
          description="Sign every commit with your key"
        />
        <SwitchRow
          label="Fetch automatically"
          description="Check the remote every few minutes"
          defaultChecked
        />
      </Group>
    </div>
  );
}

export type Page =
  | "general"
  | "profile"
  | "appearance"
  | "billing"
  | "rules"
  | "tools"
  | "storage"
  | "desktop"
  | "plugins"
  | "developer"
  | "skills"
  | "git"
  | "marketplace";
const navGroups: {
  label: string;
  items: {
    id: Page;
    label: string;
    title?: string;
    icon: typeof RiSettingsLine;
  }[];
}[] = [
  {
    label: "Settings",
    items: [
      { id: "general", label: "General", icon: RiSettingsLine },
      { id: "profile", label: "Profile", icon: RiUserLine },
      { id: "marketplace", label: "Marketplace", icon: RiStoreLine },
      { id: "appearance", label: "Appearance", icon: RiPaletteLine },
      { id: "billing", label: "Billing", icon: RiBankCardLine },
      { id: "rules", label: "Rules and Workflows", icon: RiNetworkLine },
      { id: "tools", label: "Tools", icon: RiWrenchLine },
      { id: "storage", label: "Storage", icon: RiDatabaseLine },
    ],
  },
  {
    label: "Desktop app",
    items: [
      { id: "desktop", label: "General", icon: RiSettings4Line },
      { id: "plugins", label: "Plugins", icon: RiPlugLine },
      { id: "developer", label: "Developer", icon: RiCodeLine },
    ],
  },
  {
    label: "Customize",
    items: [
      { id: "skills", label: "Skills", icon: RiBookOpenLine },
      { id: "git", label: "Git", icon: RiGitMergeLine },
    ],
  },
];

export function SettingsModal({
  open,
  onOpenChange,
  defaultPage = "general",
  className,
  marketplace,
  returnFocusRef,
  onThemeChange,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  defaultPage?: Page;
  className?: string;
  marketplace?: React.ReactNode;
  returnFocusRef?: React.RefObject<HTMLElement | null>;
  /** Called when the theme is picked on the Appearance page. Defaults to next-themes. */
  onThemeChange?: (theme: "light" | "dark" | "system") => void;
}) {
  const [page, setPage] = React.useState<Page>(defaultPage);
  // The rail shows labels from the sm breakpoint up; below it only icons, so
  // only then does a native title add anything.
  const iconOnly = React.useSyncExternalStore(
    subscribeNarrow,
    () => window.matchMedia("(max-width: 639px)").matches,
    () => false
  );
  const [scrolled, setScrolled] = React.useState(false);
  // A controlled `open` never fires onOpenChange(true), so reopen from here.
  React.useEffect(() => {
    if (open) {
      setPage(defaultPage);
      setScrolled(false);
    }
  }, [open, defaultPage]);
  const [saved, setSaved] = React.useState<"hidden" | "shown" | "leaving">(
    "hidden"
  );
  const savedTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
  React.useEffect(
    () => () => {
      if (savedTimer.current) {
        clearTimeout(savedTimer.current);
      }
    },
    []
  );
  const showSaved = () => {
    setSaved("shown");
    if (savedTimer.current) {
      clearTimeout(savedTimer.current);
    }
    savedTimer.current = setTimeout(() => {
      setSaved("leaving");
      savedTimer.current = setTimeout(() => setSaved("hidden"), 220);
    }, 2000);
  };
  return (
    <Dialog
      open={open}
      onOpenChange={(next) => {
        if (next) {
          setPage(defaultPage);
          setScrolled(false);
        }
        onOpenChange(next);
      }}
    >
      <DialogPortal>
        <DialogPrimitive.Backdrop className="fixed inset-0 z-50 bg-black/70 transition-opacity duration-300 ease-out data-starting-style:opacity-0 data-ending-style:opacity-0 motion-reduce:transition-none" />
        <DialogPrimitive.Popup
          finalFocus={returnFocusRef}
          className={cn(
            // oxlint-disable-next-line shadcn/no-arbitrary-values -- reference: panel open/close uses cubic-bezier(0.32,0.72,0,1), 300ms
            "fixed top-1/2 left-1/2 z-50 flex h-[614px] max-h-[calc(100dvh-32px)] w-[871px] max-w-[calc(100vw-32px)] -translate-x-1/2 -translate-y-1/2 overflow-clip rounded-[24px] bg-surface-overlay text-popover-foreground shadow-xs outline-none transition-all duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] data-starting-style:scale-[0.85] data-starting-style:opacity-0 data-starting-style:blur-xs data-ending-style:scale-[0.85] data-ending-style:opacity-0 data-ending-style:blur-xs motion-reduce:transition-none",
            className
          )}
        >
          <nav
            aria-label="Settings sections"
            className="flex w-14 shrink-0 flex-col gap-5 overflow-y-auto bg-surface-sunken p-2.5 [--surface-hover:var(--surface-strong)] sm:w-48 lg:w-60"
          >
            {navGroups.map((group) => (
              <div key={group.label} className="flex flex-col gap-1.5 pt-1">
                <span className="hidden ps-2 text-sm font-medium text-muted-foreground sm:block">
                  {group.label}
                </span>
                <div className="flex flex-col gap-1">
                  {group.items
                    .filter(
                      ({ id }) => id !== "marketplace" || marketplace != null
                    )
                    .map(({ id, label, icon: Icon }) => (
                      <Button
                        key={id}
                        variant="text"
                        aria-label={`${group.label}: ${label}`}
                        title={iconOnly ? label : undefined}
                        aria-current={page === id ? "page" : undefined}
                        onClick={() => {
                          setPage(id);
                          setScrolled(false);
                        }}
                        // reference: selected row is the hover fill (here --surface-strong) and
                        // stays put on hover; unselected rows hover at 60% of it.
                        className={cn(
                          // oxlint-disable-next-line shadcn/no-restyle -- reference (light): icon sits 8px from the row edge
                          "w-full justify-start gap-2 px-2 text-start",
                          page === id
                            ? // oxlint-disable-next-line shadcn/no-restyle -- reference: selected nav row fill
                              "bg-surface-hover"
                            : // oxlint-disable-next-line shadcn/no-restyle -- reference: unselected nav hover is 60% of the selected fill
                              "hover:bg-surface-strong/60"
                        )}
                      >
                        <Icon
                          className="size-5 shrink-0 text-muted-foreground"
                          aria-hidden
                        />
                        <span
                          className={cn(
                            "hidden truncate text-sm font-medium sm:block",
                            page === id && "text-foreground"
                          )}
                        >
                          {label}
                        </span>
                      </Button>
                    ))}
                </div>
              </div>
            ))}
          </nav>
          <Separator orientation="vertical" />
          <div className="flex min-w-0 flex-1 flex-col">
            <div className="flex shrink-0 items-center justify-between px-4 pt-8 pb-3 sm:px-8">
              <DialogTitle>
                {
                  navGroups
                    .flatMap((group) => group.items)
                    .find((item) => item.id === page)?.label
                }
              </DialogTitle>
              <DialogClose
                render={
                  <Button
                    variant="close"
                    size="icon-xs"
                    tooltip="Close settings"
                  />
                }
              >
                <RiCloseLine />
              </DialogClose>
            </div>
            <div className="relative min-h-0 flex-1">
              <div
                className="h-full overflow-y-auto px-4 pb-8 sm:px-8"
                onScroll={(event) =>
                  setScrolled(event.currentTarget.scrollTop > 0)
                }
              >
                <div key={page}>
                  {page === "marketplace" ? (
                    marketplace
                  ) : page === "general" ? (
                    <General popupClassName={className} />
                  ) : page === "profile" ? (
                    <Profile onSaved={showSaved} popupClassName={className} />
                  ) : page === "appearance" ? (
                    <Appearance
                      onThemeChange={onThemeChange}
                      popupClassName={className}
                    />
                  ) : page === "billing" ? (
                    <Billing popupClassName={className} />
                  ) : page === "rules" ? (
                    <Rules />
                  ) : page === "tools" ? (
                    <Tools popupClassName={className} />
                  ) : page === "storage" ? (
                    <Storage popupClassName={className} />
                  ) : page === "desktop" ? (
                    <DesktopGeneral popupClassName={className} />
                  ) : page === "plugins" ? (
                    <Plugins />
                  ) : page === "developer" ? (
                    <Developer />
                  ) : page === "skills" ? (
                    <Skills />
                  ) : (
                    <Git popupClassName={className} />
                  )}
                </div>
              </div>
              <div
                aria-hidden
                className={cn(
                  "pointer-events-none absolute inset-x-0 top-0 h-10 bg-linear-to-b from-surface-overlay to-transparent transition-opacity duration-200 ease-out motion-reduce:transition-none",
                  scrolled ? "opacity-100" : "opacity-0"
                )}
              />
            </div>
          </div>
          <div
            role="status"
            aria-live="polite"
            className={cn(
              "pointer-events-none absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full border border-border bg-background px-3 py-1 text-xs shadow-xs transition-all duration-200 ease-out motion-reduce:transition-none motion-reduce:scale-100 motion-reduce:blur-none",
              saved === "shown"
                ? "translate-y-0 scale-100 opacity-100 blur-none"
                : saved === "leaving"
                  ? "-translate-y-[10px] scale-90 opacity-0 blur-xs"
                  : "translate-y-3 scale-90 opacity-0 blur-xs"
            )}
          >
            {saved !== "hidden" ? "Saved" : ""}
          </div>
        </DialogPrimitive.Popup>
      </DialogPortal>
    </Dialog>
  );
}