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>
+  );
+}