diff --git a/wwwroot/js/ui.js b/wwwroot/js/ui.js
index 84622d1..557edc7 100644
--- a/wwwroot/js/ui.js
+++ b/wwwroot/js/ui.js
@@ -372,15 +372,24 @@ function buildSuggestionForm(initial = {}) {
form.className = "stack suggestion-form";
form.innerHTML = `
@@ -397,15 +406,24 @@ function buildSuggestionForm(initial = {}) {
`;
@@ -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 }) {
diff --git a/wwwroot/styles.css b/wwwroot/styles.css
index 24d3b55..9d5c8ba 100644
--- a/wwwroot/styles.css
+++ b/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;