fix: replace hardcoded tag options with free-form text input (#284)

* fix: replace hardcoded tag options with free-form text input

Tags in upload and edit recording dialogs were limited to a fixed set
(TvT, COOP, Zeus, Training). Replace with a text input that accepts any
value, with datalist suggestions populated from existing tags.

* fix: use unique datalist IDs and update tests for free-form tag input

Address review feedback: use createUniqueId() for datalist IDs to avoid
potential duplicates. Update dialog and upload tests to work with the new
text input instead of the removed tag button group.

Author: fank

ui/src/pages/recording-selector/RecordingSelector.tsx

@@ -419,6 +419,7 @@ export function RecordingSelector(): JSX.Element {
         <Show when={showUpload() && authenticated()}>
           <UploadDialog
             maps={uniqueMaps()}
+            tags={uniqueTags()}
             onUpload={handleUpload}
             onCancel={() => setShowUpload(false)}
             uploading={uploading()}

ui/src/pages/recording-selector/__tests__/RecordingSelector.test.tsx

@@ -1297,11 +1297,9 @@ describe("RecordingSelector (Admin)", () => {
     const mapInput = screen.getByPlaceholderText(/altis/) as HTMLInputElement;
     fireEvent.input(mapInput, { target: { value: "altis" } });
 
-    // Select a tag — find the TvT button inside the upload dialog
-    const tagLabel = screen.getByText("TAG");
-    const tagGroup = tagLabel.nextElementSibling!;
-    const tvtBtn = within(tagGroup as HTMLElement).getByText("TvT");
-    fireEvent.click(tvtBtn);
+    // Type a tag in the free-form input
+    const tagInput = screen.getByPlaceholderText("e.g. TvT, COOP, Zeus") as HTMLInputElement;
+    fireEvent.input(tagInput, { target: { value: "TvT" } });
 
     // Submit
     fireEvent.click(screen.getByTestId("upload-submit"));

ui/src/pages/recording-selector/__tests__/dialogs.test.tsx

@@ -69,29 +69,26 @@ describe("EditModal", () => {
     });
   });
 
-  it("shows tag buttons and allows selection", () => {
+  it("shows tag input and allows free-form entry", () => {
     const onClose = vi.fn();
     const onSave = vi.fn();
 
     const { container } = render(() => (
-      <EditModal rec={mockRec} tags={[]} onClose={onClose} onSave={onSave} />
+      <EditModal rec={mockRec} tags={["TvT", "COOP"]} onClose={onClose} onSave={onSave} />
     ));
 
-    // All tag option buttons should be rendered
-    expect(screen.getByText("TvT")).not.toBeNull();
-    expect(screen.getByText("COOP")).not.toBeNull();
-    expect(screen.getByText("Zeus")).not.toBeNull();
-    expect(screen.getByText("Training")).not.toBeNull();
-    expect(screen.getByText("None")).not.toBeNull();
+    // Tag input should show current value
+    const tagInput = screen.getByPlaceholderText("e.g. TvT, COOP, Zeus") as HTMLInputElement;
+    expect(tagInput.value).toBe("TvT");
 
-    // Select a different tag
-    fireEvent.click(screen.getByText("COOP"));
+    // Type a custom tag
+    fireEvent.input(tagInput, { target: { value: "CustomTag" } });
 
     // Submit and verify the new tag is sent
     fireEvent.submit(container.querySelector("form")!);
     expect(onSave).toHaveBeenCalledWith("42", {
       missionName: "Op Thunder",
-      tag: "COOP",
+      tag: "CustomTag",
       date: expectedDateUTC,
     });
   });

ui/src/pages/recording-selector/constants.ts

@@ -35,8 +35,6 @@ export const SIDE_HEX: Record<string, string> = {
   CIV:    "#A78BFA",
 };
 
-/** Tag values for the tag selector. Empty string = "None" (no tag). */
-export const TAG_OPTIONS = ["TvT", "COOP", "Zeus", "Training", ""] as const;
 
 export const LOCALE_LABELS: Record<Locale, { label: string; flag: string }> = {
   cs: { label: "\u010Ce\u0161tina",  flag: "\uD83C\uDDE8\uD83C\uDDFF" },

ui/src/pages/recording-selector/dialogs.module.css

@@ -48,30 +48,6 @@
   font-weight: 600;
 }
 
-.editTagGroup {
-  display: flex;
-  gap: 4px;
-  flex-wrap: wrap;
-}
-
-.editTagBtn {
-  padding: 6px 12px;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: var(--font-size-md);
-  font-family: var(--font-mono);
-  font-weight: 600;
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--text-dimmer);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  transition: 0.15s;
-}
-
-.editTagBtnActive {
-  background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
-  color: var(--accent-primary);
-  border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
-}
 
 /* ── Delete confirm ── */
 .deleteBody {

ui/src/pages/recording-selector/dialogs.tsx

@@ -1,9 +1,8 @@
-import { createSignal, Show, For } from "solid-js";
+import { createSignal, createUniqueId, Show, For } from "solid-js";
 import type { JSX } from "solid-js";
 import type { Recording } from "../../data/types";
 import { EditIcon, XIcon, CheckIcon, UploadIcon, FilePlusIcon, RefreshCwIcon, AlertTriangleIcon, TrashIcon } from "../../components/Icons";
 import { formatDuration, formatDate, stripRecordingExtension, isoToLocalInput, localInputToIso } from "./helpers";
-import { TAG_OPTIONS } from "./constants";
 import ui from "../../components/ui.module.css";
 import styles from "./dialogs.module.css";
 
@@ -15,6 +14,7 @@ export function EditModal(props: {
   onClose: () => void;
   onSave: (id: string, data: { missionName?: string; tag?: string; date?: string }) => void;
 }): JSX.Element {
+  const tagListId = createUniqueId();
   // eslint-disable-next-line solid/reactivity -- intentional one-time init for form state
   const [name, setName] = createSignal(props.rec.missionName);
   // eslint-disable-next-line solid/reactivity -- intentional one-time init for form state
@@ -80,28 +80,22 @@ export function EditModal(props: {
               />
             </div>
 
-            {/* Tag + Date side by side */}
-            <div style={{ display: "flex", gap: "12px" }}>
-              <div class={styles.editField} style={{ flex: "1" }}>
-                <label class={styles.editLabel}>Tag</label>
-                <div class={styles.editTagGroup}>
-                  <For each={TAG_OPTIONS}>
-                    {(t) => {
-                      const active = () => tag() === t;
-                      return (
-                        <button
-                          type="button"
-                          class={styles.editTagBtn}
-                          classList={{ [styles.editTagBtnActive]: active() }}
-                          onClick={() => setTag(t)}
-                        >
-                          {t || "None"}
-                        </button>
-                      );
-                    }}
-                  </For>
-                </div>
-              </div>
+            {/* Tag */}
+            <div class={styles.editField}>
+              <label class={styles.editLabel}>Tag</label>
+              <input
+                type="text"
+                value={tag()}
+                onInput={(e) => setTag(e.currentTarget.value)}
+                placeholder="e.g. TvT, COOP, Zeus"
+                list={tagListId}
+                class={ui.input}
+              />
+              <datalist id={tagListId}>
+                <For each={props.tags}>
+                  {(t) => <option value={t} />}
+                </For>
+              </datalist>
             </div>
 
             {/* Date */}
@@ -131,10 +125,12 @@ export function EditModal(props: {
 
 export function UploadDialog(props: {
   maps: string[];
+  tags?: string[];
   onUpload: (data: { file: File; name: string; map: string; tag: string; date: string }) => void;
   onCancel: () => void;
   uploading: boolean;
 }): JSX.Element {
+  const tagListId = createUniqueId();
   const [dragOver, setDragOver] = createSignal(false);
   const [file, setFile] = createSignal<File | null>(null);
   const [name, setName] = createSignal("");
@@ -252,23 +248,19 @@ export function UploadDialog(props: {
           {/* Tag */}
           <div class={styles.editField}>
             <label class={styles.editLabel}>TAG</label>
-            <div class={styles.editTagGroup}>
-              <For each={TAG_OPTIONS}>
-                {(t) => {
-                  const active = () => tag() === t;
-                  return (
-                    <button
-                      type="button"
-                      class={styles.editTagBtn}
-                      classList={{ [styles.editTagBtnActive]: active() }}
-                      onClick={() => setTag(t)}
-                    >
-                      {t || "None"}
-                    </button>
-                  );
-                }}
+            <input
+              type="text"
+              value={tag()}
+              onInput={(e) => setTag(e.currentTarget.value)}
+              placeholder="e.g. TvT, COOP, Zeus"
+              list={tagListId}
+              class={ui.input}
+            />
+            <datalist id={tagListId}>
+              <For each={props.tags ?? []}>
+                {(t) => <option value={t} />}
               </For>
-            </div>
+            </datalist>
           </div>
 
           {/* Date */}