From 9b12482921224b22ed806fb68f024290f56c709d Mon Sep 17 00:00:00 2001
From: Aaron Wood <aaron.wood@mac.lan>
Date: Fri, 10 Apr 2026 00:32:12 -0400
Subject: [PATCH] Replace native select elements with custom themed
 SelectDropdown

- New SelectDropdown component with themed styling matching item/talent pickers
- Replaced all 6 native <select> elements (InfoPanel, CampaignView, GearList)
- Consistent appearance across Linux, Mac, and all browsers
- Alegreya font, gold hover highlights, proper theme colors

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 client/src/components/GearList.tsx            | 16 ++--
 client/src/components/InfoPanel.tsx           | 43 ++++-------
 .../src/components/SelectDropdown.module.css  | 74 +++++++++++++++++++
 client/src/components/SelectDropdown.tsx      | 63 ++++++++++++++++
 client/src/pages/CampaignView.tsx             | 33 +++------
 5 files changed, 165 insertions(+), 64 deletions(-)
 create mode 100644 client/src/components/SelectDropdown.module.css
 create mode 100644 client/src/components/SelectDropdown.tsx

diff --git a/client/src/components/GearList.tsx b/client/src/components/GearList.tsx
index 886921c..5a90d49 100644
--- a/client/src/components/GearList.tsx
+++ b/client/src/components/GearList.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import type { Gear, GameItem } from "../types";
 import ItemPicker from "./ItemPicker";
 import CurrencyRow from "./CurrencyRow";
+import SelectDropdown from "./SelectDropdown";
 import styles from "./GearList.module.css";
 
 interface GearListProps {
@@ -148,16 +149,11 @@ export default function GearList({
                 onChange={(e) => setCustomName(e.target.value)}
                 autoFocus
               />
-              <select
-                className={styles.customSelect}
-                value={customType}
-                onChange={(e) => setCustomType(e.target.value)}
-              >
-                <option value="weapon">Weapon</option>
-                <option value="armor">Armor</option>
-                <option value="gear">Gear</option>
-                <option value="spell">Spell</option>
-              </select>
+              <SelectDropdown
+                value={customType.charAt(0).toUpperCase() + customType.slice(1)}
+                options={["Weapon", "Armor", "Gear", "Spell"]}
+                onChange={(v) => setCustomType(v.toLowerCase())}
+              />
               <button className={styles.addBtn} type="submit">
                 Add
               </button>
diff --git a/client/src/components/InfoPanel.tsx b/client/src/components/InfoPanel.tsx
index 8579e78..a91624e 100644
--- a/client/src/components/InfoPanel.tsx
+++ b/client/src/components/InfoPanel.tsx
@@ -1,6 +1,7 @@
 import { useRef, useEffect } from "react";
 import type { Character } from "../types";
 import TalentList from "./TalentList";
+import SelectDropdown from "./SelectDropdown";
 import styles from "./InfoPanel.module.css";
 
 const CLASSES = ["Fighter", "Priest", "Thief", "Wizard"];
@@ -100,31 +101,19 @@ export default function InfoPanel({
           <div className={styles.editRow}>
             <div className={styles.field}>
               <label className={styles.fieldLabel}>Class</label>
-              <select
-                className={styles.editSelect}
+              <SelectDropdown
                 value={character.class}
-                onChange={(e) => handleField("class", e.target.value)}
-              >
-                {CLASSES.map((c) => (
-                  <option key={c} value={c}>
-                    {c}
-                  </option>
-                ))}
-              </select>
+                options={CLASSES}
+                onChange={(v) => handleField("class", v)}
+              />
             </div>
             <div className={styles.field}>
               <label className={styles.fieldLabel}>Ancestry</label>
-              <select
-                className={styles.editSelect}
+              <SelectDropdown
                 value={character.ancestry}
-                onChange={(e) => handleField("ancestry", e.target.value)}
-              >
-                {ANCESTRIES.map((a) => (
-                  <option key={a} value={a}>
-                    {a}
-                  </option>
-                ))}
-              </select>
+                options={ANCESTRIES}
+                onChange={(v) => handleField("ancestry", v)}
+              />
             </div>
           </div>
           <div className={styles.editRow}>
@@ -140,17 +129,11 @@ export default function InfoPanel({
             </div>
             <div className={styles.field}>
               <label className={styles.fieldLabel}>Alignment</label>
-              <select
-                className={styles.editSelect}
+              <SelectDropdown
                 value={character.alignment}
-                onChange={(e) => handleField("alignment", e.target.value)}
-              >
-                {ALIGNMENTS.map((a) => (
-                  <option key={a} value={a}>
-                    {a}
-                  </option>
-                ))}
-              </select>
+                options={ALIGNMENTS}
+                onChange={(v) => handleField("alignment", v)}
+              />
             </div>
           </div>
           <div className={styles.field}>
diff --git a/client/src/components/SelectDropdown.module.css b/client/src/components/SelectDropdown.module.css
new file mode 100644
index 0000000..99c6d09
--- /dev/null
+++ b/client/src/components/SelectDropdown.module.css
@@ -0,0 +1,74 @@
+.container {
+  position: relative;
+  width: 100%;
+}
+
+.trigger {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 0.3rem 0.5rem;
+  background: var(--bg-inset);
+  border: 1px solid rgba(var(--gold-rgb), 0.15);
+  border-radius: 4px;
+  color: var(--text-primary);
+  font-size: 0.85rem;
+  font-family: "Alegreya", Georgia, serif;
+  cursor: pointer;
+  text-align: left;
+}
+
+.trigger:hover {
+  border-color: rgba(var(--gold-rgb), 0.35);
+}
+
+.arrow {
+  font-size: 0.65rem;
+  color: var(--text-tertiary);
+  margin-left: 0.5rem;
+}
+
+.dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 0.2rem;
+  background-color: var(--bg-modal);
+  background-image: var(--texture-surface);
+  background-size: 256px 256px;
+  background-repeat: repeat;
+  border: 1px solid rgba(var(--gold-rgb), 0.3);
+  border-radius: 4px;
+  z-index: 200;
+  max-height: 180px;
+  overflow-y: auto;
+  box-shadow:
+    0 4px 16px rgba(var(--shadow-rgb), 0.5),
+    inset 0 1px 0 rgba(var(--gold-rgb), 0.06);
+  scrollbar-width: thin;
+  scrollbar-color: rgba(var(--gold-rgb), 0.15) transparent;
+}
+
+.option {
+  display: block;
+  width: 100%;
+  padding: 0.35rem 0.6rem;
+  background: none;
+  border: none;
+  color: var(--text-primary);
+  font-size: 0.85rem;
+  font-family: "Alegreya", Georgia, serif;
+  cursor: pointer;
+  text-align: left;
+}
+
+.option:hover {
+  background: rgba(var(--gold-rgb), 0.12);
+}
+
+.option.active {
+  color: var(--gold);
+  font-weight: 600;
+}
diff --git a/client/src/components/SelectDropdown.tsx b/client/src/components/SelectDropdown.tsx
new file mode 100644
index 0000000..535e44f
--- /dev/null
+++ b/client/src/components/SelectDropdown.tsx
@@ -0,0 +1,63 @@
+import { useState, useRef, useEffect } from "react";
+import styles from "./SelectDropdown.module.css";
+
+interface SelectDropdownProps {
+  value: string;
+  options: string[];
+  onChange: (value: string) => void;
+  className?: string;
+}
+
+export default function SelectDropdown({
+  value,
+  options,
+  onChange,
+  className,
+}: SelectDropdownProps) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClickOutside(e: MouseEvent) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+
+  return (
+    <div className={styles.container} ref={containerRef}>
+      <button
+        type="button"
+        className={`${styles.trigger} ${className || ""}`}
+        onClick={() => setOpen(!open)}
+      >
+        <span>{value}</span>
+        <span className={styles.arrow}>{open ? "▴" : "▾"}</span>
+      </button>
+      {open && (
+        <div className={styles.dropdown}>
+          {options.map((opt) => (
+            <button
+              key={opt}
+              type="button"
+              className={`${styles.option} ${opt === value ? styles.active : ""}`}
+              onClick={() => {
+                onChange(opt);
+                setOpen(false);
+              }}
+            >
+              {opt}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/client/src/pages/CampaignView.tsx b/client/src/pages/CampaignView.tsx
index 83cda54..ea455d8 100644
--- a/client/src/pages/CampaignView.tsx
+++ b/client/src/pages/CampaignView.tsx
@@ -19,6 +19,7 @@ import CharacterCard from "../components/CharacterCard";
 import CharacterDetail from "../components/CharacterDetail";
 import RollLog from "../components/RollLog";
 import DiceTray from "../components/DiceTray";
+import SelectDropdown from "../components/SelectDropdown";
 import styles from "./CampaignView.module.css";
 
 const CLASSES = ["Fighter", "Priest", "Thief", "Wizard"];
@@ -400,35 +401,19 @@ export default function CampaignView() {
               </div>
               <div className={styles.formField}>
                 <label className={styles.formLabel}>Class</label>
-                <select
-                  className={styles.formSelect}
+                <SelectDropdown
                   value={newChar.class}
-                  onChange={(e) =>
-                    setNewChar({ ...newChar, class: e.target.value })
-                  }
-                >
-                  {CLASSES.map((c) => (
-                    <option key={c} value={c}>
-                      {c}
-                    </option>
-                  ))}
-                </select>
+                  options={CLASSES}
+                  onChange={(v) => setNewChar({ ...newChar, class: v })}
+                />
               </div>
               <div className={styles.formField}>
                 <label className={styles.formLabel}>Ancestry</label>
-                <select
-                  className={styles.formSelect}
+                <SelectDropdown
                   value={newChar.ancestry}
-                  onChange={(e) =>
-                    setNewChar({ ...newChar, ancestry: e.target.value })
-                  }
-                >
-                  {ANCESTRIES.map((a) => (
-                    <option key={a} value={a}>
-                      {a}
-                    </option>
-                  ))}
-                </select>
+                  options={ANCESTRIES}
+                  onChange={(v) => setNewChar({ ...newChar, ancestry: v })}
+                />
               </div>
               <div className={styles.formField}>
                 <label className={styles.formLabel}>Max HP</label>