[Init] Initial commit - NetMesh terminal manager

components/settings/settings-ui.tsx

@@ -0,0 +1,267 @@
+import React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { settingsAnchorDomId } from "../../domain/settingsSearchCatalog";
+import { cn } from "../../lib/utils";
+import { TabsContent } from "../ui/tabs";
+
+interface ToggleProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+  ariaLabel?: string;
+}
+
+export const Toggle: React.FC<ToggleProps> = ({ checked, onChange, disabled, ariaLabel }) => (
+  <button
+    type="button"
+    role="switch"
+    aria-checked={checked}
+    aria-label={ariaLabel}
+    disabled={disabled}
+    onClick={() => onChange(!checked)}
+    className={cn(
+      "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      checked ? "bg-primary" : "bg-input",
+    )}
+  >
+    <span
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform",
+        checked ? "translate-x-4" : "translate-x-0",
+      )}
+    />
+  </button>
+);
+
+interface SelectProps {
+  value: string;
+  options: { value: string; label: string; icon?: React.ReactNode }[];
+  onChange: (value: string) => void;
+  className?: string;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+export const Select: React.FC<SelectProps> = ({
+  value,
+  options,
+  onChange,
+  className,
+  disabled,
+  placeholder,
+}) => {
+  const selectedOption = options.find((opt) => opt.value === value);
+  const fitSelectedText = typeof className !== "string" || !className.includes("w-full");
+  return (
+    <SelectPrimitive.Root value={value} onValueChange={onChange} disabled={disabled}>
+      <SelectPrimitive.Trigger
+        className={cn(
+          "flex h-9 max-w-full items-center justify-between rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:min-w-0 [&>span]:truncate [&>span]:whitespace-nowrap",
+          fitSelectedText && "min-w-max",
+          className,
+        )}
+      >
+        <SelectPrimitive.Value placeholder={placeholder}>
+          <span className="flex min-w-0 items-center gap-2 truncate whitespace-nowrap">
+            {selectedOption?.icon}
+            <span className="truncate whitespace-nowrap">{selectedOption?.label}</span>
+          </span>
+        </SelectPrimitive.Value>
+        <SelectPrimitive.Icon asChild>
+          <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </SelectPrimitive.Icon>
+      </SelectPrimitive.Trigger>
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+          className="z-[200000] max-h-80 w-max max-w-[min(24rem,var(--radix-select-content-available-width))] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
+          position="popper"
+          sideOffset={4}
+          style={{ minWidth: "max(12rem, var(--radix-select-trigger-width))" }}
+        >
+          <SelectPrimitive.ScrollUpButton className="flex cursor-default items-center justify-center py-1">
+            <ChevronUp className="h-4 w-4" />
+          </SelectPrimitive.ScrollUpButton>
+          <SelectPrimitive.Viewport className="p-1">
+            {options.map((opt) => (
+              <SelectPrimitive.Item
+                key={opt.value}
+                value={opt.value}
+                className="relative flex w-full min-w-0 cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+              >
+                <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                  <SelectPrimitive.ItemIndicator>
+                    <Check className="h-4 w-4" />
+                  </SelectPrimitive.ItemIndicator>
+                </span>
+                <SelectPrimitive.ItemText>
+                  <span className="flex min-w-0 items-center gap-2 whitespace-normal break-words leading-snug">
+                    {opt.icon}
+                    {opt.label}
+                  </span>
+                </SelectPrimitive.ItemText>
+              </SelectPrimitive.Item>
+            ))}
+          </SelectPrimitive.Viewport>
+          <SelectPrimitive.ScrollDownButton className="flex cursor-default items-center justify-center py-1">
+            <ChevronDown className="h-4 w-4" />
+          </SelectPrimitive.ScrollDownButton>
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+  );
+};
+
+export const SectionHeader: React.FC<{
+  title: string;
+  className?: string;
+  anchorId?: string;
+}> = ({ title, className, anchorId }) => (
+  <h3
+    id={anchorId ? settingsAnchorDomId(anchorId) : undefined}
+    data-settings-anchor={anchorId}
+    className={cn("text-sm font-semibold text-foreground mb-3 rounded-md", className)}
+  >
+    {title}
+  </h3>
+);
+
+/** Section title row → content gap (shared across settings pages). */
+export const settingsSectionGapClassName = "gap-2";
+
+/** Groups a section title (optional icon/actions) with its content at a uniform gap. */
+export const SettingsSection: React.FC<{
+  title?: string;
+  leading?: React.ReactNode;
+  actions?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+  anchorId?: string;
+}> = ({ title, leading, actions, children, className, anchorId }) => (
+  <section
+    id={anchorId ? settingsAnchorDomId(anchorId) : undefined}
+    data-settings-anchor={anchorId}
+    className={cn("flex flex-col rounded-md", settingsSectionGapClassName, className)}
+  >
+    {(title || leading || actions) && (
+      <div
+        className={cn(
+          "flex min-h-8 items-center gap-2",
+          actions && "justify-between gap-4",
+        )}
+      >
+        <div className="flex min-w-0 items-center gap-2">
+          {leading}
+          {title ? <h3 className="text-sm font-semibold text-foreground">{title}</h3> : null}
+        </div>
+        {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
+      </div>
+    )}
+    {children}
+  </section>
+);
+
+/** Footer note under a SettingCard. Keep a gap so it does not kiss the card. */
+export const settingHintClassName = "mt-3 text-xs text-muted-foreground";
+
+export const SettingHint: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+}> = ({ children, className }) => (
+  <p className={cn(settingHintClassName, className)}>{children}</p>
+);
+
+export const settingCardClassName = "rounded-lg border bg-card";
+
+interface SettingCardProps {
+  children: React.ReactNode;
+  className?: string;
+  /** Row list with dividers; vertical spacing comes from SettingRow. */
+  divided?: boolean;
+  /** Free-form content; apply even padding on all sides. */
+  padded?: boolean;
+}
+
+export const SettingCard: React.FC<SettingCardProps> = ({
+  children,
+  className,
+  divided = false,
+  padded = false,
+}) => (
+  <div
+    className={cn(
+      settingCardClassName,
+      padded ? "p-4" : "px-4",
+      divided && "space-y-0 divide-y divide-border",
+      className,
+    )}
+  >
+    {children}
+  </div>
+);
+
+interface SettingRowProps {
+  label?: string;
+  description?: string;
+  children: React.ReactNode;
+  align?: "center" | "start";
+  /** Stable catalog id for settings search jump targets. */
+  anchorId?: string;
+}
+
+export const SettingRow: React.FC<SettingRowProps> = ({
+  label,
+  description,
+  children,
+  align = "center",
+  anchorId,
+}) => (
+  <div
+    id={anchorId ? settingsAnchorDomId(anchorId) : undefined}
+    data-settings-anchor={anchorId}
+    className={cn(
+      // Keep square corners: rounded rows bend divide-y separators at both ends.
+      "flex justify-between py-3 gap-4",
+      align === "start" ? "items-start" : "items-center",
+    )}
+  >
+    <div className="flex-1 min-w-0">
+      {label && <div className="text-sm font-medium">{label}</div>}
+      {description && (
+        <div className={cn("text-xs text-muted-foreground", label && "mt-0.5")}>{description}</div>
+      )}
+    </div>
+    <div className="shrink-0">{children}</div>
+  </div>
+);
+
+/** Lightweight wrapper for non-SettingRow search targets. */
+export const SettingsAnchor: React.FC<{
+  anchorId: string;
+  className?: string;
+  children: React.ReactNode;
+}> = ({ anchorId, className, children }) => (
+  <div
+    id={settingsAnchorDomId(anchorId)}
+    data-settings-anchor={anchorId}
+    // No default rounded-md: inside divide-y cards, child border-radius bends separators.
+    className={className}
+  >
+    {children}
+  </div>
+);
+
+export const SettingsTabContent: React.FC<{
+  value: string;
+  children: React.ReactNode;
+}> = ({ value, children }) => (
+  <TabsContent value={value} className="flex-1 m-0 h-full overflow-hidden">
+    {/* data-settings-scroll-pane: search jump scrolls only this pane, not the window */}
+    <div
+      data-settings-scroll-pane
+      className="h-full overflow-y-auto overflow-x-hidden"
+    >
+      <div className="p-6 space-y-6">{children}</div>
+    </div>
+  </TabsContent>
+);