refactor(select): unify dropdown implementations

src/components/ui/Select.tsx

@@ -9,37 +9,56 @@ export interface SelectOption {
 
 interface SelectProps {
   value: string;
-  options: SelectOption[];
+  options: ReadonlyArray<SelectOption>;
   onChange: (value: string) => void;
   placeholder?: string;
   className?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  fullWidth?: boolean;
 }
 
-export function Select({ value, options, onChange, placeholder, className }: SelectProps) {
+export function Select({
+  value,
+  options,
+  onChange,
+  placeholder,
+  className,
+  disabled = false,
+  ariaLabel,
+  fullWidth = true
+}: SelectProps) {
   const [open, setOpen] = useState(false);
   const wrapRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    if (!open) return;
+    if (!open || disabled) return;
     const handleClickOutside = (event: MouseEvent) => {
       if (!wrapRef.current?.contains(event.target as Node)) setOpen(false);
     };
     document.addEventListener('mousedown', handleClickOutside);
     return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [open]);
+  }, [disabled, open]);
+
+  const isOpen = open && !disabled;
 
   const selected = options.find((o) => o.value === value);
   const displayText = selected?.label ?? placeholder ?? '';
   const isPlaceholder = !selected && placeholder;
 
   return (
-    <div className={`${styles.wrap} ${className ?? ''}`} ref={wrapRef}>
+    <div
+      className={`${styles.wrap} ${fullWidth ? styles.wrapFullWidth : ''} ${className ?? ''}`}
+      ref={wrapRef}
+    >
       <button
         type="button"
         className={styles.trigger}
-        onClick={() => setOpen((prev) => !prev)}
+        onClick={disabled ? undefined : () => setOpen((prev) => !prev)}
         aria-haspopup="listbox"
-        aria-expanded={open}
+        aria-expanded={isOpen}
+        aria-label={ariaLabel}
+        disabled={disabled}
       >
         <span className={`${styles.triggerText} ${isPlaceholder ? styles.placeholder : ''}`}>
           {displayText}
@@ -48,8 +67,8 @@ export function Select({ value, options, onChange, placeholder, className }: Sel
           <IconChevronDown size={14} />
         </span>
       </button>
-      {open && (
-        <div className={styles.dropdown} role="listbox">
+      {isOpen && (
+        <div className={styles.dropdown} role="listbox" aria-label={ariaLabel}>
           {options.map((opt) => {
             const active = opt.value === value;
             return (