feat(webui): add central selection list

webui/src/components/SelectionList.tsx

@@ -0,0 +1,67 @@
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { usePlatformLanguage } from "../i18n/LanguageContext";
+
+export type SelectionListProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "role"> & {
+  children: ReactNode;
+  label?: string;
+};
+
+export type SelectionListItemProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "aria-selected" | "children" | "role"
+> & {
+  children: ReactNode;
+  selected: boolean;
+};
+
+export default function SelectionList({
+  "aria-label": ariaLabel,
+  children,
+  className = "",
+  label,
+  ...props
+}: SelectionListProps) {
+  const { translateText } = usePlatformLanguage();
+  const rootClassName = ["selection-list", className].filter(Boolean).join(" ");
+
+  return (
+    <div
+      {...props}
+      className={rootClassName}
+      role="listbox"
+      aria-label={label ? translateText(label) : ariaLabel}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function SelectionListItem({
+  children,
+  className = "",
+  disabled = false,
+  selected,
+  type = "button",
+  ...props
+}: SelectionListItemProps) {
+  const itemClassName = [
+    "selection-list-item",
+    selected ? "is-selected" : "",
+    disabled ? "is-disabled" : "",
+    className
+  ].filter(Boolean).join(" ");
+
+  return (
+    <button
+      {...props}
+      type={type}
+      role="option"
+      aria-selected={selected}
+      aria-disabled={disabled || undefined}
+      className={itemClassName}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+}

webui/src/index.ts

@@ -96,6 +96,8 @@ export { default as PolicyLockedHint } from "./components/PolicyLockedHint";
 export type { PolicyLockedHintProps } from "./components/PolicyLockedHint";
 export { default as SegmentedControl } from "./components/SegmentedControl";
 export type { SegmentedControlOption, SegmentedControlProps, SegmentedControlSize, SegmentedControlWidth } from "./components/SegmentedControl";
+export { default as SelectionList, SelectionListItem } from "./components/SelectionList";
+export type { SelectionListItemProps, SelectionListProps } from "./components/SelectionList";
 export { default as StatusBadge } from "./components/StatusBadge";
 export { default as Stepper } from "./components/Stepper";
 export { default as ToggleSwitch } from "./components/ToggleSwitch";

webui/src/styles/components.css

@@ -2525,6 +2525,55 @@
   opacity: .55;
 }
 
+.selection-list {
+  display: grid;
+  min-width: 0;
+}
+
+:where(.selection-list-item) {
+  appearance: none;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: 8px 10px;
+  text-align: left;
+  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
+}
+
+:where(.selection-list-item):hover:not(:disabled) {
+  background: var(--hover-tint-soft);
+}
+
+:where(.selection-list-item).is-selected {
+  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
+  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
+}
+
+:where(.selection-list-item):focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: -2px;
+}
+
+:where(.selection-list-item)[draggable="true"] {
+  cursor: grab;
+}
+
+:where(.selection-list-item)[draggable="true"]:active {
+  cursor: grabbing;
+}
+
+:where(.selection-list-item):disabled,
+:where(.selection-list-item).is-disabled {
+  cursor: not-allowed;
+  opacity: .55;
+}
+
 .theme-preview-list {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));