impr: clean up form field fallback placeholder behavior (@byseif21) (#7781)

* I think it's better to have the fallback as empty than showing the
internal filed name as placeholder
<img width="703" height="370" alt="Screenshot 2026-04-06 155427"
src="https://github.com/user-attachments/assets/e289425d-7df6-4e10-bc0c-c160f6cbd9cd"
/>


fields with labels don't need a placeholder at all, and the ones that do
we put them manually

Author: byseif21

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}

frontend/src/ts/components/modals/WordFilterModal.tsx

@@ -249,24 +249,20 @@ 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" placeholder="" />
-                    )}
+                    {(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" placeholder="" />
-                    )}
+                    {(field) => <InputField field={field} type="number" />}
                   </form.Field>
                 </div>
               </div>
               <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"
@@ -292,11 +288,7 @@ export function WordFilterModal(props: {
                 <div class="text-sub">exclude</div>
                 <form.Field name="exclude">
                   {(field) => (
-                    <InputField
-                      field={field}
-                      disabled={isExactMatch()}
-                      placeholder=""
-                    />
+                    <InputField field={field} disabled={isExactMatch()} />
                   )}
                 </form.Field>
               </div>

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()}

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"

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()}

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}

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)}