feat: hide display text box by default

frontend/src/lib/components/IconButton.svelte

@@ -7,6 +7,7 @@
   export let active: boolean = false;
   export let disabled: boolean = false;
   export let type: string | undefined = undefined;
+  export let id: string | undefined = undefined;
 
   export let click: ((e: MouseEvent) => void) | undefined = undefined;
   export let href: string | undefined = undefined;
@@ -16,6 +17,7 @@
 
 <Tooltip target={button} aria-hidden placement="top">{tooltip}</Tooltip>
 <Button
+  {id}
   {type}
   {color}
   {active}

frontend/src/routes/edit/EditablePronouns.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
-  import { WordStatus, type Pronoun } from "$lib/api/entities";
+  import { WordStatus, type Pronoun, pronounDisplay } from "$lib/api/entities";
   import IconButton from "$lib/components/IconButton.svelte";
   import {
+    Button,
     ButtonDropdown,
+    Collapse,
     DropdownItem,
     DropdownMenu,
     DropdownToggle,
     Icon,
+    InputGroupText,
+    Popover,
     Tooltip,
   } from "sveltestrap";
 
@@ -16,6 +20,8 @@
   export let remove: () => void;
 
   let buttonElement: HTMLElement;
+  let displayOpen = false;
+  const toggleDisplay = () => (displayOpen = !displayOpen);
 
   const iconFor = (wordStatus: WordStatus) => {
     switch (wordStatus) {
@@ -62,11 +68,11 @@
     bind:value={pronoun.pronouns}
     required
   />
-  <input
+  <IconButton
-    placeholder="Optional display text (e.g. it/its)"
+    icon={pronoun.display_text ? "tag-fill" : "tag"}
-    type="text"
+    color="secondary"
-    class="form-control"
+    tooltip={pronoun.display_text ? "Edit or remove display text" : "Add display text"}
-    bind:value={pronoun.display_text}
+    click={toggleDisplay}
   />
   <ButtonDropdown>
     <Tooltip target={buttonElement} placement="top">{textFor(pronoun.status)}</Tooltip>
@@ -98,3 +104,19 @@
   </ButtonDropdown>
   <IconButton color="danger" icon="trash3" tooltip="Remove pronouns" click={remove} />
 </div>
+<Collapse isOpen={displayOpen}>
+  <div class="input-group">
+    <InputGroupText>Display text</InputGroupText>
+    <input
+      placeholder="Optional display text (e.g. it/its)"
+      type="text"
+      class="form-control"
+      bind:value={pronoun.display_text}
+    />
+    <IconButton id="display-help" icon="question" tooltip="Help" color="secondary" />
+    <Popover target="display-help" placement="bottom">
+      This is the short text shown on your profile page. If you leave it empty, it will default to
+      the first two forms of the full set.
+    </Popover>
+  </div>
+</Collapse>