Add character counters to suggestion form fields

wwwroot/js/ui.js

@@ -372,15 +372,24 @@ function buildSuggestionForm(initial = {}) {
     form.className = "stack suggestion-form";
     form.innerHTML = `
       <label class="stack">
-        <span class="label" data-i18n="form.gameName">${t("form.gameName")}</span>
+        <span class="label-row">
+          <span class="label" data-i18n="form.gameName">${t("form.gameName")}</span>
+          <span class="char-counter" data-for="name"></span>
+        </span>
         <input name="name" required maxlength="100" />
       </label>
       <label class="stack">
-        <span class="label" data-i18n="form.genre">${t("form.genre")}</span>
+        <span class="label-row">
+          <span class="label" data-i18n="form.genre">${t("form.genre")}</span>
+          <span class="char-counter" data-for="genre"></span>
+        </span>
         <input name="genre" maxlength="50" />
       </label>
       <label class="stack">
-        <span class="label" data-i18n="form.description">${t("form.description")}</span>
+        <span class="label-row">
+          <span class="label" data-i18n="form.description">${t("form.description")}</span>
+          <span class="char-counter" data-for="description"></span>
+        </span>
         <textarea name="description" maxlength="500"></textarea>
       </label>
       <div class="stack">
@@ -397,15 +406,24 @@ function buildSuggestionForm(initial = {}) {
         </div>
       </div>
       <label class="stack">
-        <span class="label" data-i18n="form.screenshot">${t("form.screenshot")}</span>
+        <span class="label-row">
+          <span class="label" data-i18n="form.screenshot">${t("form.screenshot")}</span>
+          <span class="char-counter" data-for="screenshotUrl"></span>
+        </span>
         <input name="screenshotUrl" maxlength="2048" />
       </label>
       <label class="stack">
-        <span class="label" data-i18n="form.youtube">${t("form.youtube")}</span>
+        <span class="label-row">
+          <span class="label" data-i18n="form.youtube">${t("form.youtube")}</span>
+          <span class="char-counter" data-for="youtubeUrl"></span>
+        </span>
         <input name="youtubeUrl" maxlength="2048" />
       </label>
       <label class="stack">
-        <span class="label" data-i18n="form.gameUrl">${t("form.gameUrl")}</span>
+        <span class="label-row">
+          <span class="label" data-i18n="form.gameUrl">${t("form.gameUrl")}</span>
+          <span class="char-counter" data-for="gameUrl"></span>
+        </span>
         <input name="gameUrl" maxlength="2048" />
       </label>
   `;
@@ -423,7 +441,24 @@ function buildSuggestionForm(initial = {}) {
     setVal("screenshotUrl", initial.screenshotUrl ?? "");
     setVal("youtubeUrl", initial.youtubeUrl ?? "");
     setVal("gameUrl", initial.gameUrl ?? "");
+    initCharCounters(form);
     return form;
+
+    function initCharCounters(formEl) {
+        const inputs = formEl.querySelectorAll("input[maxlength], textarea[maxlength]");
+        inputs.forEach((input) => {
+            const counter = formEl.querySelector(`.char-counter[data-for="${input.name}"]`);
+            if (!counter) return;
+            const update = () => {
+                const max = input.maxLength;
+                if (!max || max < 0) return;
+                const used = input.value?.length ?? 0;
+                counter.textContent = `${used}/${max}`;
+            };
+            input.addEventListener("input", update);
+            update();
+        });
+    }
 }
 
 function openSuggestionModal({ title, submitLabel, initial = {}, onSubmit }) {

wwwroot/styles.css

@@ -221,6 +221,17 @@ button.ghost:hover {
     color: #6c5a42;
     font-size: 14px;
 }
+.label-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+.char-counter {
+    color: #8c7a63;
+    font-size: 12px;
+    white-space: nowrap;
+}
 .hint {
     color: #8c7a63;
     font-size: 12px;