Add configurable attack ratio keybind increment setting (#2835)

If this PR fixes an issue, link it below. If not, delete these two
lines.
Resolves #2822

## Description:

Adds an attack ratio keybind increment setting with a new dropdown UI,
wires keybinds to use the configured step, updates the attack ratio
adjustment logic, and makes the select reflect stored settings.

<img width="806" height="165" alt="スクリーンショット 2026-01-12 9 11 12"
src="https://github.com/user-attachments/assets/c6eaa96d-e147-4927-b3ed-964e832ecc36"
/>

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:
aotumuri

---------

Co-authored-by: Ryan <7389646+ryanbarlow97@users.noreply.github.com>
Co-authored-by: iamlewis <lewismmmm@gmail.com>

src/client/components/baseComponents/setting/SettingSelect.ts

@@ -0,0 +1,90 @@
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+type SelectOption = {
+  value: number | string;
+  label: string;
+};
+
+@customElement("setting-select")
+export class SettingSelect extends LitElement {
+  @property() label = "Setting";
+  @property() description = "";
+  @property({ type: Array }) options: SelectOption[] = [];
+  @property({ type: String }) value = "";
+
+  createRenderRoot() {
+    return this;
+  }
+
+  private handleChange(e: Event) {
+    const input = e.target as HTMLSelectElement;
+    const selected = this.options.find(
+      (option) => String(option.value) === input.value,
+    );
+    const selectedValue = selected?.value ?? input.value;
+    this.value = String(selectedValue);
+
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: selectedValue },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render() {
+    return html`
+      <div
+        class="flex flex-row items-center justify-between w-full p-4 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 transition-all gap-4"
+      >
+        <div class="flex flex-col flex-1 min-w-0 mr-4">
+          <label
+            class="text-white font-bold text-base block mb-1"
+            for="setting-select-input"
+            >${this.label}</label
+          >
+          <div class="text-white/50 text-sm leading-snug">
+            ${this.description}
+          </div>
+        </div>
+        <div class="relative shrink-0 w-[200px]">
+          <select
+            id="setting-select-input"
+            class="w-full appearance-none py-2 pl-3 pr-9 border border-white/20 rounded-lg bg-black/40 text-white font-mono text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all"
+            .value=${String(this.value)}
+            @change=${this.handleChange}
+          >
+            ${this.options.map(
+              (option) =>
+                html`<option
+                  value=${String(option.value)}
+                  ?selected=${String(option.value) === String(this.value)}
+                >
+                  ${option.label}
+                </option>`,
+            )}
+          </select>
+          <span
+            class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-white/60"
+            aria-hidden="true"
+          >
+            <svg
+              class="h-4 w-4"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.24a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    `;
+  }
+}