feat: select label preferences with dropdown

frontend/src/lib/components/FieldCard.svelte

@@ -9,8 +9,8 @@
 </script>
 
 <div>
-  <h4>{field.name}</h4>
-  <ul class="list-unstyled">
+  <h3>{field.name}</h3>
+  <ul class="list-unstyled fs-5">
     {#each field.entries as entry}
       <li><StatusIcon status={entry.status} /> {entry.value}</li>
     {/each}

frontend/src/lib/components/StatusIcon.svelte

@@ -4,6 +4,7 @@
   import { WordStatus } from "$lib/api/entities";
 
   export let status: WordStatus;
+  export let className: string | null = null;
 
   const iconFor = (wordStatus: WordStatus) => {
     switch (wordStatus) {
@@ -48,5 +49,5 @@
   let iconElement: HTMLElement;
 </script>
 
-<span bind:this={iconElement} tabindex={0}><Icon name={statusIcon} /></span>
+<span bind:this={iconElement} tabindex={0}><Icon name={statusIcon} class={className} /></span>
 <Tooltip target={iconElement} placement="top">{statusText}</Tooltip>

frontend/src/routes/+layout.svelte

@@ -5,7 +5,6 @@
   import Navigation from "./nav/Navigation.svelte";
   import type { LayoutData } from "./$types";
   import { version } from "$app/environment";
-  import { PUBLIC_BASE_URL } from "$env/static/public";
 
   export let data: LayoutData;
 
@@ -13,7 +12,6 @@
 </script>
 
 <svelte:head>
-  <title>pronouns.cc</title>
   <meta property="og:type" content="website" />
   <meta name="theme-color" content="#aa8ed6" />
   <meta property="og:site_name" content="pronouns.cc" />

frontend/src/routes/edit/EditableField.svelte

@@ -2,6 +2,7 @@
   import { WordStatus, type Field } from "$lib/api/entities";
   import IconButton from "$lib/components/IconButton.svelte";
   import { Button, Input, InputGroup, InputGroupText } from "sveltestrap";
+  import FieldEntry from "./FieldEntry.svelte";
 
   export let field: Field;
   export let deleteField: () => void;
@@ -25,12 +26,8 @@
   };
 
   const removeEntry = (index: number) => {
-    if (field.entries.length === 1) field.entries = [];
-    else if (index === 0) field.entries = field.entries.slice(1);
-    else if (index === field.entries.length - 1)
-      field.entries = field.entries.slice(0, field.entries.length - 1);
-    else
-      field.entries = [...field.entries.slice(0, index - 1), ...field.entries.slice(0, index + 1)];
+    field.entries.splice(index, 1);
+    field.entries = [...field.entries];
   };
 </script>
 
@@ -41,62 +38,13 @@
     <Button color="danger" on:click={() => deleteField()}>Delete field</Button>
   </InputGroup>
   {#each field.entries as _, index}
-    <div class="input-group m-1">
-      <IconButton
-        color="secondary"
-        icon="chevron-up"
-        tooltip="Move entry up"
-        click={() => moveEntry(index, true)}
-      />
-      <IconButton
-        color="secondary"
-        icon="chevron-down"
-        tooltip="Move entry down"
-        click={() => moveEntry(index, false)}
-      />
-      <input type="text" class="form-control" bind:value={field.entries[index].value} />
-      <IconButton
-        color="secondary"
-        icon="heart-fill"
-        tooltip="Favourite"
-        click={() => (field.entries[index].status = WordStatus.Favourite)}
-        active={field.entries[index].status === WordStatus.Favourite}
-      />
-      <IconButton
-        color="secondary"
-        icon="hand-thumbs-up"
-        tooltip="Okay"
-        click={() => (field.entries[index].status = WordStatus.Okay)}
-        active={field.entries[index].status === WordStatus.Okay}
-      />
-      <IconButton
-        color="secondary"
-        icon="emoji-laughing"
-        tooltip="Jokingly"
-        click={() => (field.entries[index].status = WordStatus.Jokingly)}
-        active={field.entries[index].status === WordStatus.Jokingly}
-      />
-      <IconButton
-        color="secondary"
-        icon="people"
-        tooltip="Friends only"
-        click={() => (field.entries[index].status = WordStatus.FriendsOnly)}
-        active={field.entries[index].status === WordStatus.FriendsOnly}
-      />
-      <IconButton
-        color="secondary"
-        icon="hand-thumbs-down"
-        tooltip="Avoid"
-        click={() => (field.entries[index].status = WordStatus.Avoid)}
-        active={field.entries[index].status === WordStatus.Avoid}
-      />
-      <IconButton
-        color="danger"
-        icon="trash3"
-        tooltip="Remove entry"
-        click={() => removeEntry(index)}
-      />
-    </div>
+    <FieldEntry
+      bind:value={field.entries[index].value}
+      bind:status={field.entries[index].status}
+      moveUp={() => moveEntry(index, true)}
+      moveDown={() => moveEntry(index, false)}
+      remove={() => removeEntry(index)}
+    />
   {/each}
 
   <div class="input-group m-1">

frontend/src/routes/edit/EditableName.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { WordStatus } from "$lib/api/entities";
+  import IconButton from "$lib/components/IconButton.svelte";
+  import {
+    ButtonDropdown,
+    DropdownItem,
+    DropdownMenu,
+    DropdownToggle,
+    Icon,
+    Tooltip,
+  } from "sveltestrap";
+
+  export let value: string;
+  export let status: WordStatus;
+  export let moveUp: () => void;
+  export let moveDown: () => void;
+  export let remove: () => void;
+
+  let buttonElement: HTMLElement;
+
+  const iconFor = (wordStatus: WordStatus) => {
+    switch (wordStatus) {
+      case WordStatus.Favourite:
+        return "heart-fill";
+      case WordStatus.Okay:
+        return "hand-thumbs-up";
+      case WordStatus.Jokingly:
+        return "emoji-laughing";
+      case WordStatus.FriendsOnly:
+        return "people";
+      case WordStatus.Avoid:
+        return "hand-thumbs-down";
+      default:
+        return "hand-thumbs-up";
+    }
+  };
+
+  const textFor = (wordStatus: WordStatus) => {
+    switch (wordStatus) {
+      case WordStatus.Favourite:
+        return "Favourite";
+      case WordStatus.Okay:
+        return "Okay";
+      case WordStatus.Jokingly:
+        return "Jokingly";
+      case WordStatus.FriendsOnly:
+        return "Friends only";
+      case WordStatus.Avoid:
+        return "Avoid";
+      default:
+        return "Okay";
+    }
+  };
+</script>
+
+<div class="input-group m-1">
+  <IconButton icon="chevron-up" color="secondary" tooltip="Move name up" click={moveUp} />
+  <IconButton icon="chevron-down" color="secondary" tooltip="Move name down" click={moveDown} />
+  <input type="text" class="form-control" bind:value />
+  <ButtonDropdown>
+    <Tooltip target={buttonElement} placement="top">{textFor(status)}</Tooltip>
+    <DropdownToggle color="secondary" caret bind:inner={buttonElement}>
+      <Icon name={iconFor(status)} />
+    </DropdownToggle>
+    <DropdownMenu>
+      <DropdownItem
+        on:click={() => (status = WordStatus.Favourite)}
+        active={status === WordStatus.Favourite}>Favourite</DropdownItem
+      >
+      <DropdownItem on:click={() => (status = WordStatus.Okay)} active={status === WordStatus.Okay}
+        >Okay</DropdownItem
+      >
+      <DropdownItem
+        on:click={() => (status = WordStatus.Jokingly)}
+        active={status === WordStatus.Jokingly}>Jokingly</DropdownItem
+      >
+      <DropdownItem
+        on:click={() => (status = WordStatus.FriendsOnly)}
+        active={status === WordStatus.FriendsOnly}>Friends only</DropdownItem
+      >
+      <DropdownItem
+        on:click={() => (status = WordStatus.Avoid)}
+        active={status === WordStatus.Avoid}>Avoid</DropdownItem
+      >
+    </DropdownMenu>
+  </ButtonDropdown>
+  <IconButton color="danger" icon="trash3" tooltip="Remove name" click={remove} />
+</div>

frontend/src/routes/edit/EditablePronouns.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { WordStatus, type Pronoun } from "$lib/api/entities";
+  import IconButton from "$lib/components/IconButton.svelte";
+  import {
+    ButtonDropdown,
+    DropdownItem,
+    DropdownMenu,
+    DropdownToggle,
+    Icon,
+    Tooltip,
+  } from "sveltestrap";
+
+  export let pronoun: Pronoun;
+  export let moveUp: () => void;
+  export let moveDown: () => void;
+  export let remove: () => void;
+
+  let buttonElement: HTMLElement;
+
+  const iconFor = (wordStatus: WordStatus) => {
+    switch (wordStatus) {
+      case WordStatus.Favourite:
+        return "heart-fill";
+      case WordStatus.Okay:
+        return "hand-thumbs-up";
+      case WordStatus.Jokingly:
+        return "emoji-laughing";
+      case WordStatus.FriendsOnly:
+        return "people";
+      case WordStatus.Avoid:
+        return "hand-thumbs-down";
+      default:
+        return "hand-thumbs-up";
+    }
+  };
+
+  const textFor = (wordStatus: WordStatus) => {
+    switch (wordStatus) {
+      case WordStatus.Favourite:
+        return "Favourite";
+      case WordStatus.Okay:
+        return "Okay";
+      case WordStatus.Jokingly:
+        return "Jokingly";
+      case WordStatus.FriendsOnly:
+        return "Friends only";
+      case WordStatus.Avoid:
+        return "Avoid";
+      default:
+        return "Okay";
+    }
+  };
+</script>
+
+<div class="input-group m-1">
+  <IconButton icon="chevron-up" color="secondary" tooltip="Move pronouns up" click={moveUp} />
+  <IconButton icon="chevron-down" color="secondary" tooltip="Move pronouns down" click={moveDown} />
+  <input
+    placeholder="Full set (e.g. it/it/its/its/itself)"
+    type="text"
+    class="form-control"
+    bind:value={pronoun.pronouns}
+    required
+  />
+  <input
+    placeholder="Optional display text (e.g. it/its)"
+    type="text"
+    class="form-control"
+    bind:value={pronoun.display_text}
+  />
+  <ButtonDropdown>
+    <Tooltip target={buttonElement} placement="top">{textFor(pronoun.status)}</Tooltip>
+    <DropdownToggle color="secondary" caret bind:inner={buttonElement}>
+      <Icon name={iconFor(pronoun.status)} />
+    </DropdownToggle>
+    <DropdownMenu>
+      <DropdownItem
+        on:click={() => (pronoun.status = WordStatus.Favourite)}
+        active={pronoun.status === WordStatus.Favourite}>Favourite</DropdownItem
+      >
+      <DropdownItem
+        on:click={() => (pronoun.status = WordStatus.Okay)}
+        active={pronoun.status === WordStatus.Okay}>Okay</DropdownItem
+      >
+      <DropdownItem
+        on:click={() => (pronoun.status = WordStatus.Jokingly)}
+        active={pronoun.status === WordStatus.Jokingly}>Jokingly</DropdownItem
+      >
+      <DropdownItem
+        on:click={() => (pronoun.status = WordStatus.FriendsOnly)}
+        active={pronoun.status === WordStatus.FriendsOnly}>Friends only</DropdownItem
+      >
+      <DropdownItem
+        on:click={() => (pronoun.status = WordStatus.Avoid)}
+        active={pronoun.status === WordStatus.Avoid}>Avoid</DropdownItem
+      >
+    </DropdownMenu>
+  </ButtonDropdown>
+  <IconButton color="danger" icon="trash3" tooltip="Remove pronouns" click={remove} />
+</div>

frontend/src/routes/edit/FieldEntry.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { WordStatus } from "$lib/api/entities";
+  import IconButton from "$lib/components/IconButton.svelte";
+  import {
+    ButtonDropdown,
+    DropdownItem,
+    DropdownMenu,
+    DropdownToggle,
+    Icon,
+    Tooltip,
+  } from "sveltestrap";
+
+  export let value: string;
+  export let status: WordStatus;
+  export let moveUp: () => void;
+  export let moveDown: () => void;
+  export let remove: () => void;
+
+  let buttonElement: HTMLElement;
+
+  const iconFor = (wordStatus: WordStatus) => {
+    switch (wordStatus) {
+      case WordStatus.Favourite:
+        return "heart-fill";
+      case WordStatus.Okay:
+        return "hand-thumbs-up";
+      case WordStatus.Jokingly:
+        return "emoji-laughing";
+      case WordStatus.FriendsOnly:
+        return "people";
+      case WordStatus.Avoid:
+        return "hand-thumbs-down";
+      default:
+        return "hand-thumbs-up";
+    }
+  };
+
+  const textFor = (wordStatus: WordStatus) => {
+    switch (wordStatus) {
+      case WordStatus.Favourite:
+        return "Favourite";
+      case WordStatus.Okay:
+        return "Okay";
+      case WordStatus.Jokingly:
+        return "Jokingly";
+      case WordStatus.FriendsOnly:
+        return "Friends only";
+      case WordStatus.Avoid:
+        return "Avoid";
+      default:
+        return "Okay";
+    }
+  };
+</script>
+
+<div class="input-group m-1">
+  <IconButton icon="chevron-up" color="secondary" tooltip="Move entry up" click={moveUp} />
+  <IconButton icon="chevron-down" color="secondary" tooltip="Move entry down" click={moveDown} />
+  <input type="text" class="form-control" bind:value />
+  <ButtonDropdown>
+    <Tooltip target={buttonElement} placement="top">{textFor(status)}</Tooltip>
+    <DropdownToggle color="secondary" caret bind:inner={buttonElement}>
+      <Icon name={iconFor(status)} />
+    </DropdownToggle>
+    <DropdownMenu>
+      <DropdownItem
+        on:click={() => (status = WordStatus.Favourite)}
+        active={status === WordStatus.Favourite}>Favourite</DropdownItem
+      >
+      <DropdownItem on:click={() => (status = WordStatus.Okay)} active={status === WordStatus.Okay}
+        >Okay</DropdownItem
+      >
+      <DropdownItem
+        on:click={() => (status = WordStatus.Jokingly)}
+        active={status === WordStatus.Jokingly}>Jokingly</DropdownItem
+      >
+      <DropdownItem
+        on:click={() => (status = WordStatus.FriendsOnly)}
+        active={status === WordStatus.FriendsOnly}>Friends only</DropdownItem
+      >
+      <DropdownItem
+        on:click={() => (status = WordStatus.Avoid)}
+        active={status === WordStatus.Avoid}>Avoid</DropdownItem
+      >
+    </DropdownMenu>
+  </ButtonDropdown>
+  <IconButton color="danger" icon="trash3" tooltip="Remove entry" click={remove} />
+</div>

frontend/src/routes/edit/profile/+page.svelte

@@ -12,11 +12,21 @@
   } from "$lib/api/entities";
   import FallbackImage from "$lib/components/FallbackImage.svelte";
   import { userStore } from "$lib/store";
-  import { Alert, Button, FormGroup, Icon, Input } from "sveltestrap";
+  import {
+    Alert,
+    Button,
+    ButtonDropdown,
+    DropdownToggle,
+    FormGroup,
+    Icon,
+    Input,
+  } from "sveltestrap";
   import { encode } from "base64-arraybuffer";
   import { apiFetchClient } from "$lib/api/fetch";
   import IconButton from "$lib/components/IconButton.svelte";
   import EditableField from "../EditableField.svelte";
+  import EditableName from "../EditableName.svelte";
+  import EditablePronouns from "../EditablePronouns.svelte";
 
   const MAX_AVATAR_BYTES = 1_000_000;
 
@@ -284,56 +294,13 @@
       <div class="col-md">
         <h4>Names</h4>
         {#each names as _, index}
-          <div class="input-group m-1">
-            <Button color="secondary" on:click={() => moveName(index, true)}>
-              <Icon name="chevron-up" />
-            </Button>
-            <Button color="secondary" on:click={() => moveName(index, false)}>
-              <Icon name="chevron-down" />
-            </Button>
-            <input type="text" class="form-control" bind:value={names[index].value} />
-            <IconButton
-              color="secondary"
-              icon="heart-fill"
-              tooltip="Favourite"
-              click={() => (names[index].status = WordStatus.Favourite)}
-              active={names[index].status === WordStatus.Favourite}
-            />
-            <IconButton
-              color="secondary"
-              icon="hand-thumbs-up"
-              tooltip="Okay"
-              click={() => (names[index].status = WordStatus.Okay)}
-              active={names[index].status === WordStatus.Okay}
-            />
-            <IconButton
-              color="secondary"
-              icon="emoji-laughing"
-              tooltip="Jokingly"
-              click={() => (names[index].status = WordStatus.Jokingly)}
-              active={names[index].status === WordStatus.Jokingly}
-            />
-            <IconButton
-              color="secondary"
-              icon="people"
-              tooltip="Friends only"
-              click={() => (names[index].status = WordStatus.FriendsOnly)}
-              active={names[index].status === WordStatus.FriendsOnly}
-            />
-            <IconButton
-              color="secondary"
-              icon="hand-thumbs-down"
-              tooltip="Avoid"
-              click={() => (names[index].status = WordStatus.Avoid)}
-              active={names[index].status === WordStatus.Avoid}
-            />
-            <IconButton
-              color="danger"
-              icon="trash3"
-              tooltip="Remove name"
-              click={() => removeName(index)}
-            />
-          </div>
+          <EditableName
+            bind:value={names[index].value}
+            bind:status={names[index].status}
+            moveUp={() => moveName(index, true)}
+            moveDown={() => moveName(index, false)}
+            remove={() => removeName(index)}
+          />
         {/each}
         <div class="input-group m-1">
           <input type="text" class="form-control" bind:value={newName} />
@@ -363,61 +330,27 @@
       <div class="col-md">
         <h4>Pronouns</h4>
         {#each pronouns as _, index}
-          <div class="input-group m-1">
-            <Button color="secondary" on:click={() => movePronoun(index, true)}>
-              <Icon name="chevron-up" />
-            </Button>
-            <Button color="secondary" on:click={() => movePronoun(index, false)}>
-              <Icon name="chevron-down" />
-            </Button>
-            <input type="text" class="form-control" bind:value={pronouns[index].pronouns} />
-            <input type="text" class="form-control" bind:value={pronouns[index].display_text} />
-            <IconButton
-              color="secondary"
-              icon="heart-fill"
-              tooltip="Favourite"
-              click={() => (pronouns[index].status = WordStatus.Favourite)}
-              active={pronouns[index].status === WordStatus.Favourite}
-            />
-            <IconButton
-              color="secondary"
-              icon="hand-thumbs-up"
-              tooltip="Okay"
-              click={() => (pronouns[index].status = WordStatus.Okay)}
-              active={pronouns[index].status === WordStatus.Okay}
-            />
-            <IconButton
-              color="secondary"
-              icon="emoji-laughing"
-              tooltip="Jokingly"
-              click={() => (pronouns[index].status = WordStatus.Jokingly)}
-              active={pronouns[index].status === WordStatus.Jokingly}
-            />
-            <IconButton
-              color="secondary"
-              icon="people"
-              tooltip="Friends only"
-              click={() => (pronouns[index].status = WordStatus.FriendsOnly)}
-              active={pronouns[index].status === WordStatus.FriendsOnly}
-            />
-            <IconButton
-              color="secondary"
-              icon="hand-thumbs-down"
-              tooltip="Avoid"
-              click={() => (pronouns[index].status = WordStatus.Avoid)}
-              active={pronouns[index].status === WordStatus.Avoid}
-            />
-            <IconButton
-              color="danger"
-              icon="trash3"
-              tooltip="Remove pronouns"
-              click={() => removePronoun(index)}
-            />
-          </div>
+          <EditablePronouns
+            bind:pronoun={pronouns[index]}
+            moveUp={() => movePronoun(index, true)}
+            moveDown={() => movePronoun(index, false)}
+            remove={() => removePronoun(index)}
+          />
         {/each}
         <div class="input-group m-1">
-          <input type="text" class="form-control" bind:value={newPronouns} />
-          <input type="text" class="form-control" bind:value={newPronounsDisplay} />
+          <input
+            type="text"
+            class="form-control"
+            placeholder="Full set (e.g. it/it/its/its/itself)"
+            bind:value={newPronouns}
+            required
+          />
+          <input
+            type="text"
+            class="form-control"
+            placeholder="Optional display text (e.g. it/its)"
+            bind:value={newPronounsDisplay}
+          />
           <IconButton
             color="success"
             icon="plus"