feat(frontend): redesign edit profile page, add member list title + hide list options

frontend/src/routes/@[username]/+page.svelte

@@ -178,7 +178,7 @@
         <div class="col">
           <hr />
           <h2>
-            Members
+            {data.member_title || "Members"}
             {#if $userStore && $userStore.id === data.id}
               <Button
                 color="success"

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

@@ -11,7 +11,20 @@
   } from "$lib/api/entities";
   import FallbackImage from "$lib/components/FallbackImage.svelte";
   import { userStore } from "$lib/store";
-  import { Button, ButtonGroup, FormGroup, Icon, Input, Popover } from "sveltestrap";
+  import {
+    Alert,
+    Button,
+    ButtonGroup,
+    Card,
+    CardBody,
+    CardHeader,
+    FormGroup,
+    Icon,
+    Input,
+    Popover,
+    TabContent,
+    TabPane,
+  } from "sveltestrap";
   import { encode } from "base64-arraybuffer";
   import { apiFetchClient } from "$lib/api/fetch";
   import IconButton from "$lib/components/IconButton.svelte";
@@ -21,6 +34,7 @@
   import ErrorAlert from "$lib/components/ErrorAlert.svelte";
   import { addToast, delToast } from "$lib/toast";
   import type { PageData } from "./$types";
+  import renderMarkdown from "$lib/api/markdown";
 
   const MAX_AVATAR_BYTES = 1_000_000;
 
@@ -30,10 +44,12 @@
 
   let bio: string = data.user.bio || "";
   let display_name: string = data.user.display_name || "";
+  let member_title: string = data.user.member_title || "";
   let links: string[] = window.structuredClone(data.user.links);
   let names: FieldEntry[] = window.structuredClone(data.user.names);
   let pronouns: Pronoun[] = window.structuredClone(data.user.pronouns);
   let fields: Field[] = window.structuredClone(data.user.fields);
+  let list_private = data.user.list_private;
 
   let avatar: string | null;
   let avatar_files: FileList | null;
@@ -44,7 +60,7 @@
 
   let modified = false;
 
-  $: modified = isModified(bio, display_name, links, names, pronouns, fields, avatar);
+  $: modified = isModified(bio, display_name, links, names, pronouns, fields, avatar, member_title, list_private);
   $: getAvatar(avatar_files).then((b64) => (avatar = b64));
 
   const isModified = (
@@ -55,14 +71,18 @@
     pronouns: Pronoun[],
     fields: Field[],
     avatar: string | null,
+    member_title: string,
+    list_private: boolean,
   ) => {
-    if (bio !== data.user.bio) return true;
+    if (bio !== (data.user.bio || "")) return true;
-    if (display_name !== data.user.display_name) return true;
+    if (display_name !== (data.user.display_name || "")) return true;
+    if (member_title !== (data.user.member_title || "")) return true;
     if (!linksEqual(links, data.user.links)) return true;
     if (!fieldsEqual(fields, data.user.fields)) return true;
     if (!namesEqual(names, data.user.names)) return true;
     if (!pronounsEqual(pronouns, data.user.pronouns)) return true;
     if (avatar !== null) return true;
+    if (list_private !== data.user.list_private) return true;
 
     return false;
   };
@@ -220,6 +240,8 @@
         names,
         pronouns,
         fields,
+        member_title,
+        list_private,
       });
 
       data.user = resp;
@@ -260,67 +282,64 @@
   <ErrorAlert {error} />
 {/if}
 
-<div class="grid">
+<TabContent>
-  <div class="row m-1">
+  <TabPane tabId="avatar" tab="Names and avatar" active>
-    <div class="col-md">
+    <div class="row mt-3">
-      <h4>Avatar</h4>
+      <div class="col-md">
-      <div class="row">
+        <div class="row">
-        <div class="col-md text-center">
+          <div class="col-md text-center">
-          {#if avatar === ""}
+            {#if avatar === ""}
-            <FallbackImage alt="Current avatar" urls={[]} width={200} />
+              <FallbackImage alt="Current avatar" urls={[]} width={200} />
-          {:else if avatar}
+            {:else if avatar}
-            <img
+              <img
-              width={200}
+                width={200}
-              height={200}
+                height={200}
-              src={avatar}
+                src={avatar}
-              alt="New avatar"
+                alt="New avatar"
-              class="rounded-circle img-fluid"
+                class="rounded-circle img-fluid"
+              />
+            {:else}
+              <FallbackImage alt="Current avatar" urls={userAvatars(data.user)} width={200} />
+            {/if}
+          </div>
+          <div class="col-md">
+            <input
+              class="form-control"
+              id="avatar"
+              type="file"
+              bind:files={avatar_files}
+              accept="image/png, image/jpeg, image/gif, image/webp"
             />
-          {:else}
+            <p class="text-muted mt-3">
-            <FallbackImage alt="Current avatar" urls={userAvatars(data.user)} width={200} />
+              <Icon name="info-circle-fill" aria-hidden /> Only PNG, JPEG, GIF, and WebP images can be
-          {/if}
+              used as avatars. Avatars cannot be larger than 1 MB, and animated avatars will be made
-        </div>
+              static.
-        <div class="col-md mt-2">
+            </p>
-          <input
+            <p>
-            class="form-control"
+              <a href="" on:click={() => (avatar = "")}>Remove avatar</a>
-            id="avatar"
+            </p>
-            type="file"
+          </div>
-            bind:files={avatar_files}
-            accept="image/png, image/jpeg, image/gif, image/webp"
-          />
-          <p class="text-muted mt-3">
-            <Icon name="info-circle-fill" aria-hidden /> Only PNG, JPEG, GIF, and WebP images can be
-            used as avatars. Avatars cannot be larger than 1 MB, and animated avatars will be made static.
-          </p>
-          <p>
-            <a href="" on:click={() => (avatar = "")}>Remove avatar</a>
-          </p>
         </div>
       </div>
-    </div>
+      <div class="col-md">
-    <div class="col-md">
+        <FormGroup floating label="Username">
-      <FormGroup floating label="Display name">
+          <Input bind:value={data.user.name} readonly />
-        <Input bind:value={display_name} />
+          <p class="text-muted mt-1">
-      </FormGroup>
+            <Icon name="info-circle-fill" aria-hidden />
-      <div>
+            You can change your username in
-        <div class="form">
+            <a href="/settings" class="text-reset">your settings</a>.
-          <label for="bio"><strong>Bio ({bio.length}/{MAX_DESCRIPTION_LENGTH})</strong></label>
+          </p>
-          <textarea class="form-control" style="height: 200px;" id="bio" bind:value={bio} />
+        </FormGroup>
-        </div>
+        <FormGroup floating label="Display name">
-        <p class="text-muted mt-3">
+          <Input bind:value={display_name} />
-          <Icon name="info-circle-fill" aria-hidden /> Your bio supports limited
+          <p class="text-muted mt-1">
-          <a
+            <Icon name="info-circle-fill" aria-hidden />
-            class="text-reset"
+            Your display name is used in page titles and as a header.
-            href="https://commonmark.org/help/"
+          </p>
-            target="_blank"
+        </FormGroup>
-            rel="noopener noreferrer">Markdown</a
-          >.
-        </p>
       </div>
     </div>
-  </div>
+    <div>
-  <div class="row m-1">
-    <div class="col-md">
       <h4>Names</h4>
       {#each names as _, index}
         <EditableName
@@ -336,8 +355,94 @@
         <IconButton type="submit" color="success" icon="plus" tooltip="Add name" />
       </form>
     </div>
-    <div class="col-md">
+  </TabPane>
-      <h4>Links</h4>
+  <TabPane tabId="bio" tab="Bio">
+    <div class="mt-3">
+      <div class="form">
+        <textarea class="form-control" style="height: 200px;" bind:value={bio} />
+      </div>
+      <p class="text-muted mt-1">
+        Using {bio.length}/{MAX_DESCRIPTION_LENGTH} characters
+      </p>
+      <p class="text-muted my-2">
+        <Icon name="info-circle-fill" aria-hidden /> Your bio supports limited
+        <a
+          class="text-reset"
+          href="https://commonmark.org/help/"
+          target="_blank"
+          rel="noopener noreferrer">Markdown</a
+        >.
+      </p>
+      <hr />
+      <Card>
+        <CardHeader>Preview</CardHeader>
+        <CardBody>
+          {@html renderMarkdown(bio)}
+        </CardBody>
+      </Card>
+    </div>
+  </TabPane>
+  <TabPane tabId="pronouns" tab="Pronouns">
+    <div class="mt-3">
+      <div class="col-md">
+        {#each pronouns as _, index}
+          <EditablePronouns
+            bind:pronoun={pronouns[index]}
+            moveUp={() => movePronoun(index, true)}
+            moveDown={() => movePronoun(index, false)}
+            remove={() => removePronoun(index)}
+          />
+        {/each}
+        <form class="input-group m-1" on:submit={addPronouns}>
+          <input
+            type="text"
+            class="form-control"
+            placeholder="New pronouns"
+            bind:value={newPronouns}
+            required
+          />
+          <IconButton
+            type="submit"
+            color="success"
+            icon="plus"
+            tooltip="Add pronouns"
+            disabled={newPronouns === ""}
+          />
+          <Button id="pronouns-help" color="secondary"><Icon name="question" /></Button>
+          <Popover target="pronouns-help" placement="bottom">
+            For common pronouns, the short form (e.g. "she/her" or "he/him") is enough; for less
+            common pronouns, you will have to use all five forms (e.g. "ce/cir/cir/cirs/cirself").
+          </Popover>
+        </form>
+      </div>
+    </div>
+  </TabPane>
+  <TabPane tabId="fields" tab="Fields">
+    {#if data.user.fields.length === 0}
+      <Alert class="mt-3" color="secondary" fade={false}>
+        Fields are extra categories you can add separate from names and pronouns.<br />
+        For example, you could use them for gender terms, honorifics, or compliments.
+      </Alert>
+    {/if}
+    <div class="grid gap-3">
+      <div class="row row-cols-1 row-cols-md-2">
+        {#each fields as _, index}
+          <EditableField
+            bind:field={fields[index]}
+            deleteField={() => removeField(index)}
+            moveField={(up) => moveField(index, up)}
+          />
+        {/each}
+      </div>
+    </div>
+    <div>
+      <Button on:click={() => (fields = [...fields, { name: "New field", entries: [] }])}>
+        <Icon name="plus" aria-hidden /> Add new field
+      </Button>
+    </div>
+  </TabPane>
+  <TabPane tabId="links" tab="Links">
+    <div class="mt-3">
       {#each links as _, index}
         <div class="input-group m-1">
           <input type="text" class="form-control" bind:value={links[index]} />
@@ -354,56 +459,32 @@
         <IconButton type="submit" color="success" icon="plus" tooltip="Add link" />
       </form>
     </div>
-  </div>
+  </TabPane>
-  <div class="row m-1">
+  <TabPane tabId="other" tab="Other">
-    <div class="col-md">
+    <div class="mt-3">
-      <h4>Pronouns</h4>
+      <FormGroup floating label={'"Members" header text'}>
-      {#each pronouns as _, index}
+        <Input bind:value={member_title} placeholder="Members" />
-        <EditablePronouns
+        <p class="text-muted mt-1">
-          bind:pronoun={pronouns[index]}
+          <Icon name="info-circle-fill" aria-hidden />
-          moveUp={() => movePronoun(index, true)}
+          This is the text used for the "Members" heading. If you leave it blank, the default text will
-          moveDown={() => movePronoun(index, false)}
+          be used.
-          remove={() => removePronoun(index)}
+        </p>
-        />
+      </FormGroup>
-      {/each}
+
-      <form class="input-group m-1" on:submit={addPronouns}>
+      <div class="form-check">
         <input
-          type="text"
+          class="form-check-input"
-          class="form-control"
+          type="checkbox"
-          placeholder="New pronouns"
+          bind:checked={list_private}
-          bind:value={newPronouns}
+          id="listPrivate"
-          required
         />
-        <IconButton
+        <label class="form-check-label" for="listPrivate">Hide member list</label>
-          type="submit"
+      </div>
-          color="success"
+      <p class="text-muted mt-1">
-          icon="plus"
+        <Icon name="info-circle-fill" aria-hidden />
-          tooltip="Add pronouns"
+        If this is checked, your member list will be hidden from other users.
-          disabled={newPronouns === ""}
+        <strong>This will not make any of your members' pages or information private.</strong>
-        />
+      </p>
-        <Button id="pronouns-help" color="secondary"><Icon name="question" /></Button>
-        <Popover target="pronouns-help" placement="bottom">
-          For common pronouns, the short form (e.g. "she/her" or "he/him") is enough; for less
-          common pronouns, you will have to use all five forms (e.g. "ce/cir/cir/cirs/cirself").
-        </Popover>
-      </form>
     </div>
-  </div>
+  </TabPane>
-  <hr />
+</TabContent>
-  <h4>
-    Fields <Button on:click={() => (fields = [...fields, { name: "New field", entries: [] }])}>
-      Add new field
-    </Button>
-  </h4>
-</div>
-<div class="grid gap-3">
-  <div class="row row-cols-1 row-cols-md-2">
-    {#each fields as _, index}
-      <EditableField
-        bind:field={fields[index]}
-        deleteField={() => removeField(index)}
-        moveField={(up) => moveField(index, up)}
-      />
-    {/each}
-  </div>
-</div>