From 3337260d816d1f40f6d27e77ac7a6943a886115c Mon Sep 17 00:00:00 2001
From: byseif21 <byseif21@gmail.com>
Date: Mon, 6 Apr 2026 23:35:44 +0200
Subject: [PATCH 1/3] impr: clean up form field placeholder behavior

---
 frontend/src/ts/components/modals/WordFilterModal.tsx      | 7 +++----
 frontend/src/ts/components/pages/login/Login.tsx           | 2 ++
 frontend/src/ts/components/pages/login/Register.tsx        | 3 +++
 .../src/ts/components/pages/profile/ProfileSearchPage.tsx  | 1 +
 frontend/src/ts/components/ui/form/InputField.tsx          | 2 +-
 frontend/src/ts/components/ui/form/TextareaField.tsx       | 2 +-
 6 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/ts/components/modals/WordFilterModal.tsx b/frontend/src/ts/components/modals/WordFilterModal.tsx
index 2cc78942c7f2..2afae2d5b6cb 100644
--- a/frontend/src/ts/components/modals/WordFilterModal.tsx
+++ b/frontend/src/ts/components/modals/WordFilterModal.tsx
@@ -250,7 +250,7 @@ export function WordFilterModal(props: {
                   <div class="text-sub">min length</div>
                   <form.Field name="minLength">
                     {(field) => (
-                      <InputField field={field} type="number" placeholder="" />
+                      <InputField field={field} type="number" />
                     )}
                   </form.Field>
                 </div>
@@ -258,7 +258,7 @@ export function WordFilterModal(props: {
                   <div class="text-sub">max length</div>
                   <form.Field name="maxLength">
                     {(field) => (
-                      <InputField field={field} type="number" placeholder="" />
+                      <InputField field={field} type="number" />
                     )}
                   </form.Field>
                 </div>
@@ -266,7 +266,7 @@ export function WordFilterModal(props: {
               <div class="grid gap-1">
                 <div class="text-sub">include</div>
                 <form.Field name="include">
-                  {(field) => <InputField field={field} placeholder="" />}
+                  {(field) => <InputField field={field} />}
                 </form.Field>
                 <form.Field
                   name="exactMatch"
@@ -295,7 +295,6 @@ export function WordFilterModal(props: {
                     <InputField
                       field={field}
                       disabled={isExactMatch()}
-                      placeholder=""
                     />
                   )}
                 </form.Field>
diff --git a/frontend/src/ts/components/pages/login/Login.tsx b/frontend/src/ts/components/pages/login/Login.tsx
index 32c5636c728e..c07e9b44c9e3 100644
--- a/frontend/src/ts/components/pages/login/Login.tsx
+++ b/frontend/src/ts/components/pages/login/Login.tsx
@@ -106,6 +106,7 @@ export function Login(): JSXElement {
           children={(field) => (
             <InputField
               field={field}
+              placeholder="email"
               autocomplete="current-email"
               disabled={!getLoginPageInputsEnabled()}
             />
@@ -116,6 +117,7 @@ export function Login(): JSXElement {
           children={(field) => (
             <InputField
               field={field}
+              placeholder="password"
               type="password"
               autocomplete="current-password"
               disabled={!getLoginPageInputsEnabled()}
diff --git a/frontend/src/ts/components/pages/login/Register.tsx b/frontend/src/ts/components/pages/login/Register.tsx
index 2566a7f350a0..3625bd84ebf7 100644
--- a/frontend/src/ts/components/pages/login/Register.tsx
+++ b/frontend/src/ts/components/pages/login/Register.tsx
@@ -165,6 +165,7 @@ export function Register(): JSXElement {
           children={(field) => (
             <InputField
               field={field}
+              placeholder="username"
               showIndicator
               autocomplete="new-username"
               disabled={!getLoginPageInputsEnabled()}
@@ -185,6 +186,7 @@ export function Register(): JSXElement {
           children={(field) => (
             <InputField
               field={field}
+              placeholder="email"
               showIndicator
               autocomplete="new-email"
               disabled={!getLoginPageInputsEnabled()}
@@ -235,6 +237,7 @@ export function Register(): JSXElement {
           children={(field) => (
             <InputField
               field={field}
+              placeholder="password"
               showIndicator
               autocomplete="new-password"
               type="password"
diff --git a/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx b/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx
index 6f2076910f1a..5526f27d9065 100644
--- a/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx
+++ b/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx
@@ -85,6 +85,7 @@ export function ProfileSearchPage(): JSXElement {
                 children={(field) => (
                   <InputField
                     field={field}
+                    placeholder="username"
                     showIndicator
                     autocomplete="new-username"
                     disabled={!isEditable()}
diff --git a/frontend/src/ts/components/ui/form/InputField.tsx b/frontend/src/ts/components/ui/form/InputField.tsx
index 8ace7cb934d6..dc423c9c1927 100644
--- a/frontend/src/ts/components/ui/form/InputField.tsx
+++ b/frontend/src/ts/components/ui/form/InputField.tsx
@@ -28,7 +28,7 @@ export function InputField(props: {
           props.class,
         )}
         type={props.type ?? "text"}
-        placeholder={props.placeholder ?? (props.field().name as string)}
+        placeholder={props.placeholder ?? ""}
         // oxlint-disable-next-line react/no-unknown-property
         autocomplete={props.autocomplete}
         name={props.field().name as string}
diff --git a/frontend/src/ts/components/ui/form/TextareaField.tsx b/frontend/src/ts/components/ui/form/TextareaField.tsx
index 16fd420e3e53..3e67c542b858 100644
--- a/frontend/src/ts/components/ui/form/TextareaField.tsx
+++ b/frontend/src/ts/components/ui/form/TextareaField.tsx
@@ -23,7 +23,7 @@ export function TextareaField(props: {
       )}
       id={props.field().name as string}
       name={props.field().name as string}
-      placeholder={props.placeholder ?? (props.field().name as string)}
+      placeholder={props.placeholder ?? ""}
       value={props.field().state.value as string}
       onBlur={() => props.field().handleBlur()}
       onInput={(e) => props.field().handleChange(e.currentTarget.value)}

From ee3d68fc51ec95f3154b16a5e526d5b2326674e3 Mon Sep 17 00:00:00 2001
From: byseif21 <byseif21@gmail.com>
Date: Mon, 6 Apr 2026 23:49:20 +0200
Subject: [PATCH 2/3] add placeholder to custom textarea

---
 frontend/src/ts/components/modals/CustomTextModal.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/ts/components/modals/CustomTextModal.tsx b/frontend/src/ts/components/modals/CustomTextModal.tsx
index efad688d7f52..ae856a66868d 100644
--- a/frontend/src/ts/components/modals/CustomTextModal.tsx
+++ b/frontend/src/ts/components/modals/CustomTextModal.tsx
@@ -481,6 +481,7 @@ export function CustomTextModal(): JSXElement {
                   <TextareaField
                     field={field}
                     ref={textareaRef}
+                    placeholder="type or paste your custom text"
                     class="min-h-182.5 self-start overflow-x-hidden overflow-y-scroll p-4 text-base font-(--font) text-text"
                     onKeyDown={handleTextareaKeydown}
                     onKeyPress={handleTextareaKeypress}

From 13513b5a8fe96262155c562fe9008150fc147092 Mon Sep 17 00:00:00 2001
From: byseif21 <byseif21@gmail.com>
Date: Mon, 6 Apr 2026 23:59:32 +0200
Subject: [PATCH 3/3] .

---
 .../src/ts/components/modals/WordFilterModal.tsx    | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/frontend/src/ts/components/modals/WordFilterModal.tsx b/frontend/src/ts/components/modals/WordFilterModal.tsx
index 2afae2d5b6cb..89e3c1b3794e 100644
--- a/frontend/src/ts/components/modals/WordFilterModal.tsx
+++ b/frontend/src/ts/components/modals/WordFilterModal.tsx
@@ -249,17 +249,13 @@ export function WordFilterModal(props: {
                 <div class="grid gap-1">
                   <div class="text-sub">min length</div>
                   <form.Field name="minLength">
-                    {(field) => (
-                      <InputField field={field} type="number" />
-                    )}
+                    {(field) => <InputField field={field} type="number" />}
                   </form.Field>
                 </div>
                 <div class="grid gap-1">
                   <div class="text-sub">max length</div>
                   <form.Field name="maxLength">
-                    {(field) => (
-                      <InputField field={field} type="number" />
-                    )}
+                    {(field) => <InputField field={field} type="number" />}
                   </form.Field>
                 </div>
               </div>
@@ -292,10 +288,7 @@ export function WordFilterModal(props: {
                 <div class="text-sub">exclude</div>
                 <form.Field name="exclude">
                   {(field) => (
-                    <InputField
-                      field={field}
-                      disabled={isExactMatch()}
-                    />
+                    <InputField field={field} disabled={isExactMatch()} />
                   )}
                 </form.Field>
               </div>