From e82e33e1161288dd395592a1ea232611a9376c36 Mon Sep 17 00:00:00 2001
From: Minecon724 <minecon724@noreply.git.m724.eu>
Date: Sun, 16 Mar 2025 15:48:05 +0100
Subject: [PATCH] Improve this

Signed-off-by: Minecon724 <minecon724@noreply.git.m724.eu>
---
 templates/user/settings/profile.tmpl | 33 ++----------------
 web_src/js/features/user-settings.js | 51 +---------------------------
 2 files changed, 3 insertions(+), 81 deletions(-)

diff --git a/templates/user/settings/profile.tmpl b/templates/user/settings/profile.tmpl
index 5ecaada4e2..84e8955ebc 100644
--- a/templates/user/settings/profile.tmpl
+++ b/templates/user/settings/profile.tmpl
@@ -26,38 +26,9 @@
 						<input name="full_name" value="{{.SignedUser.FullName}}" maxlength="100">
 					</label>
 
-					<label id="label-pronouns" class="tw-hidden">
-						{{ctx.Locale.Tr "settings.pronouns"}}
-						<div id="pronouns-dropdown" class="ui selection dropdown" aria-labelledby="label-pronouns">
-							<input type="hidden" value="{{.SignedUser.Pronouns}}">
-							<div class="text">
-								{{if .PronounsAreCustom}}
-									{{ctx.Locale.Tr "settings.pronouns_custom"}}
-								{{else if eq "" .SignedUser.Pronouns}}
-									{{ctx.Locale.Tr "settings.pronouns_unspecified"}}
-								{{else}}
-									{{.SignedUser.Pronouns}}
-								{{end}}
-							</div>
-							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-							<div class="menu">
-								<div class="item{{if eq "" .SignedUser.Pronouns}} active selected{{end}}" data-value=""><p>{{ctx.Locale.Tr "settings.pronouns_unspecified"}}</p></div>
-								<div class="item{{if eq "he/him" .SignedUser.Pronouns}} active selected{{end}}" data-value="he/him">he/him</div>
-								<div class="item{{if eq "she/her" .SignedUser.Pronouns}} active selected{{end}}" data-value="she/her">she/her</div>
-								<div class="item{{if eq "they/them" .SignedUser.Pronouns}} active selected{{end}}" data-value="they/them">they/them</div>
-								<div class="item{{if eq "it/its" .SignedUser.Pronouns}} active selected{{end}}" data-value="it/its">it/its</div>
-								<div class="item{{if eq "any pronouns" .SignedUser.Pronouns}} active selected{{end}}" data-value="any pronouns">any pronouns</div>
-								{{if .PronounsAreCustom}}
-									<div class="item active selected" data-value="{{.SignedUser.Pronouns}}">{{ctx.Locale.Tr "settings.pronouns_custom"}}</div>
-								{{else}}
-									<div class="item" data-value="!"><i>{{ctx.Locale.Tr "settings.pronouns_custom"}}</i></div>
-								{{end}}
-							</div>
-						</div>
-					</label>
 					<label id="label-pronouns-custom">
-						{{ctx.Locale.Tr "settings.pronouns_custom_label"}}
-						<input name="pronouns" value="{{.SignedUser.Pronouns}}" maxlength="50">
+						{{ctx.Locale.Tr "settings.pronouns"}}
+						<input name="pronouns" value="{{.SignedUser.Pronouns}}" maxlength="50" placeholder="{{ctx.Locale.Tr "settings.pronouns_unspecified"}}">
 					</label>
 
 					<label {{if .Err_Biography}}class="field error"{{end}}>
diff --git a/web_src/js/features/user-settings.js b/web_src/js/features/user-settings.js
index 85815aa6ff..57303611e1 100644
--- a/web_src/js/features/user-settings.js
+++ b/web_src/js/features/user-settings.js
@@ -1,50 +1 @@
-import {hideElem, showElem} from '../utils/dom.js';
-
-function onPronounsDropdownUpdate() {
-  const pronounsCustom = document.getElementById('label-pronouns-custom');
-  const pronounsCustomInput = pronounsCustom.querySelector('input');
-  const pronounsDropdown = document.getElementById('pronouns-dropdown');
-  const pronounsInput = pronounsDropdown.querySelector('input');
-  // must be kept in sync with `routers/web/user/setting/profile.go`
-  const isCustom = !(
-    pronounsInput.value === '' ||
-    pronounsInput.value === 'he/him' ||
-    pronounsInput.value === 'she/her' ||
-    pronounsInput.value === 'they/them' ||
-    pronounsInput.value === 'it/its' ||
-    pronounsInput.value === 'any pronouns'
-  );
-  if (isCustom) {
-    if (pronounsInput.value === '!') {
-      pronounsCustomInput.value = '';
-    } else {
-      pronounsCustomInput.value = pronounsInput.value;
-    }
-    showElem(pronounsCustom);
-  } else {
-    hideElem(pronounsCustom);
-  }
-}
-function onPronounsCustomUpdate() {
-  const pronounsCustomInput = document.querySelector('#label-pronouns-custom input');
-  const pronounsInput = document.querySelector('#pronouns-dropdown input');
-  pronounsInput.value = pronounsCustomInput.value;
-}
-
-export function initUserSettings() {
-  if (!document.querySelectorAll('.user.settings.profile').length) return;
-
-  const pronounsDropdown = document.getElementById('label-pronouns');
-  const pronounsCustomInput = document.querySelector('#label-pronouns-custom input');
-  const pronounsInput = pronounsDropdown.querySelector('input');
-
-  // If JS is disabled, the page will show the custom input, as the dropdown requires JS to work.
-  // JS progressively enhances the input by adding a dropdown, but it works regardless.
-  pronounsCustomInput.removeAttribute('name');
-  pronounsInput.setAttribute('name', 'pronouns');
-  showElem(pronounsDropdown);
-
-  onPronounsDropdownUpdate();
-  pronounsInput.addEventListener('change', onPronounsDropdownUpdate);
-  pronounsCustomInput.addEventListener('input', onPronounsCustomUpdate);
-}
+export function initUserSettings() {}