From e0069a93754cb651a58016b721fd7e679b9843dd Mon Sep 17 00:00:00 2001
From: sam <sam@sleepycat.moe>
Date: Fri, 4 Aug 2023 20:52:15 +0200
Subject: [PATCH 01/10] feat(frontend): start splitting edit profile page into
 subpages

---
 .../src/routes/edit/profile-old/+page.svelte  | 862 +++++++++++++++++
 .../edit/{profile => profile-old}/+page.ts    |   0
 .../CustomPreference.svelte                   |   0
 .../IconPicker.svelte                         |   0
 .../src/routes/edit/profile/+layout.svelte    | 213 ++++
 frontend/src/routes/edit/profile/+layout.ts   |  23 +
 frontend/src/routes/edit/profile/+page.svelte | 909 ++----------------
 7 files changed, 1193 insertions(+), 814 deletions(-)
 create mode 100644 frontend/src/routes/edit/profile-old/+page.svelte
 rename frontend/src/routes/edit/{profile => profile-old}/+page.ts (100%)
 rename frontend/src/routes/edit/{profile => profile-old}/CustomPreference.svelte (100%)
 rename frontend/src/routes/edit/{profile => profile-old}/IconPicker.svelte (100%)
 create mode 100644 frontend/src/routes/edit/profile/+layout.svelte
 create mode 100644 frontend/src/routes/edit/profile/+layout.ts

diff --git a/frontend/src/routes/edit/profile-old/+page.svelte b/frontend/src/routes/edit/profile-old/+page.svelte
new file mode 100644
index 0000000..8baa2d4
--- /dev/null
+++ b/frontend/src/routes/edit/profile-old/+page.svelte
@@ -0,0 +1,862 @@
+<script lang="ts">
+  import {
+    MAX_DESCRIPTION_LENGTH,
+    userAvatars,
+    type APIError,
+    type Field,
+    type FieldEntry,
+    type MeUser,
+    type Pronoun,
+    PreferenceSize,
+    type CustomPreferences,
+    type PrideFlag,
+  } from "$lib/api/entities";
+  import FallbackImage from "$lib/components/FallbackImage.svelte";
+  import { userStore } from "$lib/store";
+  import {
+    Alert,
+    Button,
+    ButtonGroup,
+    Card,
+    CardBody,
+    CardHeader,
+    FormGroup,
+    InputGroup,
+    Icon,
+    Input,
+    Popover,
+    TabContent,
+    TabPane,
+    InputGroupText,
+  } from "sveltestrap";
+  import { encode } from "base64-arraybuffer";
+  import { DateTime, FixedOffsetZone } from "luxon";
+  import { apiFetchClient } from "$lib/api/fetch";
+  import { PUBLIC_SHORT_BASE } from "$env/static/public";
+  import IconButton from "$lib/components/IconButton.svelte";
+  import EditableField from "../EditableField.svelte";
+  import EditableName from "../EditableName.svelte";
+  import EditablePronouns from "../EditablePronouns.svelte";
+  import ErrorAlert from "$lib/components/ErrorAlert.svelte";
+  import { addToast, delToast } from "$lib/toast";
+  import type { PageData, Snapshot } from "./$types";
+  import { charCount, renderMarkdown } from "$lib/utils";
+  import MarkdownHelp from "../MarkdownHelp.svelte";
+  import prettyBytes from "pretty-bytes";
+  import CustomPreference from "./CustomPreference.svelte";
+  import FlagButton from "../FlagButton.svelte";
+
+  const MAX_AVATAR_BYTES = 1_000_000;
+
+  export let data: PageData;
+
+  let error: APIError | null = null;
+
+  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 flags: PrideFlag[] = window.structuredClone(data.user.flags);
+  let list_private = data.user.list_private;
+  let custom_preferences = window.structuredClone(data.user.custom_preferences);
+  let timezone = data.user.timezone;
+
+  let avatar: string | null;
+  let avatar_files: FileList | null;
+
+  let newName = "";
+  let newPronouns = "";
+  let newLink = "";
+
+  let flagSearch = "";
+  let filteredFlags: PrideFlag[];
+  $: filteredFlags = filterFlags(flagSearch, data.flags);
+
+  const filterFlags = (search: string, flags: PrideFlag[]) => {
+    return (
+      search
+        ? flags.filter((flag) => flag.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
+        : flags
+    ).slice(0, 25);
+  };
+
+  let preferenceIds: string[];
+  $: preferenceIds = Object.keys(custom_preferences);
+
+  let modified = false;
+
+  $: modified = isModified(
+    data.user,
+    bio,
+    display_name,
+    links,
+    names,
+    pronouns,
+    fields,
+    flags,
+    avatar,
+    member_title,
+    list_private,
+    custom_preferences,
+    timezone,
+  );
+  $: getAvatar(avatar_files).then((b64) => (avatar = b64));
+
+  const isModified = (
+    user: MeUser,
+    bio: string,
+    display_name: string,
+    links: string[],
+    names: FieldEntry[],
+    pronouns: Pronoun[],
+    fields: Field[],
+    flags: PrideFlag[],
+    avatar: string | null,
+    member_title: string,
+    list_private: boolean,
+    custom_preferences: CustomPreferences,
+    timezone: string | null,
+  ) => {
+    if (bio !== (user.bio || "")) return true;
+    if (display_name !== (user.display_name || "")) return true;
+    if (member_title !== (user.member_title || "")) return true;
+    if (!linksEqual(links, user.links)) return true;
+    if (!fieldsEqual(fields, user.fields)) return true;
+    if (!flagsEqual(flags, user.flags)) return true;
+    if (!namesEqual(names, user.names)) return true;
+    if (!pronounsEqual(pronouns, user.pronouns)) return true;
+    if (!customPreferencesEqual(custom_preferences, user.custom_preferences)) return true;
+    if (avatar !== null) return true;
+    if (list_private !== user.list_private) return true;
+    if (timezone !== user.timezone) return true;
+
+    return false;
+  };
+
+  const fieldsEqual = (arr1: Field[], arr2: Field[]) => {
+    if (arr1?.length !== arr2?.length) return false;
+    if (!arr1.every((_, i) => arr1[i].entries.length === arr2[i].entries.length)) return false;
+    if (!arr1.every((_, i) => arr1[i].name === arr2[i].name)) return false;
+
+    return arr1.every((_, i) =>
+      arr1[i].entries.every(
+        (entry, j) =>
+          entry.value === arr2[i].entries[j].value && entry.status === arr2[i].entries[j].status,
+      ),
+    );
+  };
+
+  const namesEqual = (arr1: FieldEntry[], arr2: FieldEntry[]) => {
+    if (arr1?.length !== arr2?.length) return false;
+    if (!arr1.every((_, i) => arr1[i].value === arr2[i].value)) return false;
+    if (!arr1.every((_, i) => arr1[i].status === arr2[i].status)) return false;
+
+    return true;
+  };
+
+  const pronounsEqual = (arr1: Pronoun[], arr2: Pronoun[]) => {
+    if (arr1?.length !== arr2?.length) return false;
+    if (!arr1.every((_, i) => arr1[i].pronouns === arr2[i].pronouns)) return false;
+    if (!arr1.every((_, i) => arr1[i].display_text === arr2[i].display_text)) return false;
+    if (!arr1.every((_, i) => arr1[i].status === arr2[i].status)) return false;
+
+    return true;
+  };
+
+  const linksEqual = (arr1: string[], arr2: string[]) => {
+    if (arr1.length !== arr2.length) return false;
+    return arr1.every((_, i) => arr1[i] === arr2[i]);
+  };
+
+  const flagsEqual = (arr1: PrideFlag[], arr2: PrideFlag[]) => {
+    if (arr1.length !== arr2.length) return false;
+    return arr1.every((_, i) => arr1[i].id === arr2[i].id);
+  };
+
+  const customPreferencesEqual = (obj1: CustomPreferences, obj2: CustomPreferences) => {
+    if (Object.keys(obj2).some((key) => !(key in obj1))) return false;
+
+    return Object.keys(obj1)
+      .map((key) => {
+        if (!(key in obj2)) return false;
+        return (
+          obj1[key].icon === obj2[key].icon &&
+          obj1[key].tooltip === obj2[key].tooltip &&
+          obj1[key].favourite === obj2[key].favourite &&
+          obj1[key].muted === obj2[key].muted &&
+          obj1[key].size === obj2[key].size
+        );
+      })
+      .every((entry) => entry);
+  };
+
+  const getAvatar = async (list: FileList | null) => {
+    if (!list || list.length === 0) return null;
+    if (list[0].size > MAX_AVATAR_BYTES) {
+      addToast({
+        header: "Avatar too large",
+        body: `This avatar is too large, please resize it (maximum is ${prettyBytes(
+          MAX_AVATAR_BYTES,
+        )}, the file you tried to upload is ${prettyBytes(list[0].size)})`,
+      });
+      return null;
+    }
+
+    const buffer = await list[0].arrayBuffer();
+    const base64 = encode(buffer);
+
+    const uri = `data:${list[0].type};base64,${base64}`;
+    console.log(uri.slice(0, 128));
+
+    return uri;
+  };
+
+  let currentTime = "";
+  let displayTimezone = "";
+  $: setTime(timezone);
+
+  const setTime = (timezone: string | null) => {
+    if (!timezone) {
+      currentTime = "";
+      displayTimezone = "";
+      return;
+    }
+
+    const offset = DateTime.now().setZone(timezone).offset;
+    const zone = FixedOffsetZone.instance(offset);
+
+    currentTime = now.setZone(zone).toLocaleString(DateTime.TIME_SIMPLE);
+    displayTimezone = zone.formatOffset(now.toUnixInteger(), "narrow");
+  };
+
+  const moveName = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == names.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = names[index];
+    names[index] = names[newIndex];
+    names[newIndex] = temp;
+  };
+
+  const movePronoun = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == pronouns.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = pronouns[index];
+    pronouns[index] = pronouns[newIndex];
+    pronouns[newIndex] = temp;
+  };
+
+  const moveField = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == fields.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = fields[index];
+    fields[index] = fields[newIndex];
+    fields[newIndex] = temp;
+  };
+
+  const moveLink = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == links.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = links[index];
+    links[index] = links[newIndex];
+    links[newIndex] = temp;
+  };
+
+  const moveFlag = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == flags.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = flags[index];
+    flags[index] = flags[newIndex];
+    flags[newIndex] = temp;
+  };
+
+  const addFlag = (flag: PrideFlag) => {
+    flags = [...flags, flag];
+  };
+
+  const removeFlag = (index: number) => {
+    flags.splice(index, 1);
+    flags = [...flags];
+  };
+
+  const addName = (event: Event) => {
+    event.preventDefault();
+
+    names = [...names, { value: newName, status: "okay" }];
+    newName = "";
+  };
+
+  const addPronouns = (event: Event) => {
+    event.preventDefault();
+
+    if (newPronouns in data.pronouns) {
+      const fullSet = data.pronouns[newPronouns];
+      pronouns = [
+        ...pronouns,
+        {
+          pronouns: fullSet.pronouns.join("/"),
+          display_text: fullSet.display || null,
+          status: "okay",
+        },
+      ];
+    } else {
+      pronouns = [...pronouns, { pronouns: newPronouns, display_text: null, status: "okay" }];
+    }
+    newPronouns = "";
+  };
+
+  const addLink = (event: Event) => {
+    event.preventDefault();
+
+    links = [...links, newLink];
+    newLink = "";
+  };
+
+  const addPreference = () => {
+    const id = crypto.randomUUID();
+
+    custom_preferences[id] = {
+      icon: "question",
+      tooltip: "New preference",
+      size: PreferenceSize.Normal,
+      muted: false,
+      favourite: false,
+    };
+    custom_preferences = custom_preferences;
+  };
+
+  const removeName = (index: number) => {
+    names.splice(index, 1);
+    names = [...names];
+  };
+
+  const removePronoun = (index: number) => {
+    pronouns.splice(index, 1);
+    pronouns = [...pronouns];
+  };
+
+  const removeLink = (index: number) => {
+    links.splice(index, 1);
+    links = [...links];
+  };
+
+  const removeField = (index: number) => {
+    fields.splice(index, 1);
+    fields = [...fields];
+  };
+
+  const removePreference = (id: string) => {
+    delete custom_preferences[id];
+    custom_preferences = custom_preferences;
+  };
+
+  const updateUser = async () => {
+    const toastId = addToast({
+      header: "Saving changes",
+      body: "Saving changes, please wait...",
+      duration: -1,
+    });
+
+    try {
+      const resp = await apiFetchClient<MeUser>("/users/@me", "PATCH", {
+        display_name,
+        avatar,
+        bio,
+        links,
+        names,
+        pronouns,
+        fields,
+        member_title,
+        list_private,
+        timezone: timezone || "",
+        custom_preferences,
+        flags: flags.map((flag) => flag.id),
+      });
+
+      data.user = resp;
+      custom_preferences = resp.custom_preferences;
+      userStore.set(resp);
+      localStorage.setItem("pronouns-user", JSON.stringify(resp));
+
+      addToast({ header: "Success", body: "Successfully saved changes!" });
+
+      avatar = null;
+      error = null;
+    } catch (e) {
+      error = e as APIError;
+    } finally {
+      delToast(toastId);
+    }
+  };
+
+  const now = DateTime.now().toLocal();
+  let canRerollSid: boolean;
+  $: canRerollSid =
+    now.diff(DateTime.fromISO(data.user.last_sid_reroll).toLocal(), "hours").hours >= 1;
+
+  const rerollSid = async () => {
+    try {
+      const resp = await apiFetchClient<MeUser>("/users/@me/reroll");
+      addToast({ header: "Success", body: "Rerolled short ID!" });
+      error = null;
+      data.user.sid = resp.sid;
+    } catch (e) {
+      error = e as APIError;
+    }
+  };
+
+  const copyShortURL = async () => {
+    const url = `${PUBLIC_SHORT_BASE}/${data.user.sid}`;
+    await navigator.clipboard.writeText(url);
+    addToast({ body: "Copied the short link to your clipboard!", duration: 2000 });
+  };
+
+  const detectTimezone = () => {
+    timezone = DateTime.local().zoneName;
+  };
+
+  interface SnapshotData {
+    bio: string;
+    display_name: string;
+    member_title: string;
+    links: string[];
+    names: FieldEntry[];
+    pronouns: Pronoun[];
+    fields: Field[];
+    flags: PrideFlag[];
+    list_private: boolean;
+    timezone: string | null;
+    custom_preferences: CustomPreferences;
+
+    avatar: string | null;
+    newName: string;
+    newPronouns: string;
+    newLink: string;
+  }
+
+  export const snapshot: Snapshot<SnapshotData> = {
+    capture: () => ({
+      bio,
+      display_name,
+      member_title,
+      links,
+      names,
+      pronouns,
+      fields,
+      flags,
+      list_private,
+      timezone,
+      custom_preferences,
+      avatar,
+      newName,
+      newPronouns,
+      newLink,
+    }),
+    restore: (value) => {
+      bio = value.bio;
+      display_name = value.display_name;
+      member_title = value.member_title;
+      links = value.links;
+      names = value.names;
+      pronouns = value.pronouns;
+      fields = value.fields;
+      flags = value.flags;
+      list_private = value.list_private;
+      timezone = value.timezone;
+      custom_preferences = value.custom_preferences;
+      avatar = value.avatar;
+      newName = value.newName;
+      newPronouns = value.newPronouns;
+      newLink = value.newLink;
+    },
+  };
+</script>
+
+<svelte:head>
+  <title>Edit profile - pronouns.cc</title>
+</svelte:head>
+
+<h1>
+  Edit profile
+  <ButtonGroup>
+    <Button color="secondary" href="/@{data.user.name}">
+      <Icon name="chevron-left" />
+      Back to your profile
+    </Button>
+    {#if modified}
+      <Button color="success" on:click={() => updateUser()}>Save changes</Button>
+    {/if}
+  </ButtonGroup>
+</h1>
+
+{#if error}
+  <ErrorAlert {error} />
+{/if}
+
+<TabContent>
+  <TabPane tabId="avatar" tab="Names and avatar" active>
+    <div class="row mt-3">
+      <div class="col-md">
+        <div class="row">
+          <div class="col-md text-center">
+            {#if avatar === ""}
+              <FallbackImage alt="Current avatar" urls={[]} width={200} />
+            {:else if avatar}
+              <img
+                width={200}
+                height={200}
+                src={avatar}
+                alt="New avatar"
+                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"
+            />
+            <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>
+              <!-- svelte-ignore a11y-invalid-attribute -->
+              <a href="" on:click={() => (avatar = "")}>Remove avatar</a>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="col-md">
+        <FormGroup floating label="Username">
+          <Input bind:value={data.user.name} readonly />
+          <p class="text-muted mt-1">
+            <Icon name="info-circle-fill" aria-hidden />
+            You can change your username in
+            <a href="/settings" class="text-reset">your settings</a>.
+          </p>
+        </FormGroup>
+        <FormGroup floating label="Display name">
+          <Input bind:value={display_name} />
+          <p class="text-muted mt-1">
+            <Icon name="info-circle-fill" aria-hidden />
+            Your display name is used in page titles and as a header.
+          </p>
+        </FormGroup>
+      </div>
+    </div>
+    <div>
+      <h4>Names</h4>
+      {#each names as _, index}
+        <EditableName
+          bind:value={names[index].value}
+          bind:status={names[index].status}
+          preferences={custom_preferences}
+          moveUp={() => moveName(index, true)}
+          moveDown={() => moveName(index, false)}
+          remove={() => removeName(index)}
+        />
+      {/each}
+      <form class="input-group m-1" on:submit={addName}>
+        <input type="text" class="form-control" bind:value={newName} />
+        <IconButton type="submit" color="success" icon="plus" tooltip="Add name" />
+      </form>
+    </div>
+  </TabPane>
+  <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 {charCount(bio)}/{MAX_DESCRIPTION_LENGTH} characters
+      </p>
+      <p class="text-muted my-2">
+        <MarkdownHelp />
+      </p>
+      {#if bio}
+        <hr />
+        <Card>
+          <CardHeader>Preview</CardHeader>
+          <CardBody>
+            {@html renderMarkdown(bio)}
+          </CardBody>
+        </Card>
+      {/if}
+    </div>
+  </TabPane>
+  <TabPane tabId="pronouns" tab="Pronouns">
+    <div class="mt-3">
+      <div class="col-md">
+        {#each pronouns as _, index}
+          <EditablePronouns
+            bind:pronoun={pronouns[index]}
+            preferences={custom_preferences}
+            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]}
+            preferences={custom_preferences}
+            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="flags" tab="Flags">
+    <div class="mt-3">
+      {#each flags as _, index}
+        <ButtonGroup class="m-1">
+          <IconButton
+            icon="chevron-left"
+            color="secondary"
+            tooltip="Move flag to the left"
+            click={() => moveFlag(index, true)}
+          />
+          <IconButton
+            icon="chevron-right"
+            color="secondary"
+            tooltip="Move flag to the right"
+            click={() => moveFlag(index, false)}
+          />
+          <FlagButton
+            flag={flags[index]}
+            tooltip="Remove this flag from your profile"
+            on:click={() => removeFlag(index)}
+          />
+        </ButtonGroup>
+      {/each}
+    </div>
+    <hr />
+    <div class="row">
+      <div class="col-md">
+        <Input
+          placeholder="Filter flags"
+          bind:value={flagSearch}
+          disabled={data.flags.length === 0}
+        />
+        <div class="p-2">
+          {#each filteredFlags as flag (flag.id)}
+            <FlagButton
+              {flag}
+              tooltip="Add this flag to your profile"
+              on:click={() => addFlag(flag)}
+            />
+          {:else}
+            {#if data.flags.length === 0}
+              You haven't uploaded any flags yet.
+            {:else}
+              There are no flags matching your search <strong>{flagSearch}</strong>.
+            {/if}
+          {/each}
+        </div>
+      </div>
+      <div class="col-md">
+        <Alert color="secondary" fade={false}>
+          {#if data.flags.length === 0}
+            <p><strong>Why can't I see any flags?</strong></p>
+            <p>
+              There are thousands of pride flags, and it would be impossible to bundle all of them
+              by default. Many labels also have multiple different flags that are favoured by
+              different people. Because of this, there are no flags available by default--instead,
+              you can upload flags in your <a href="/settings/flags">settings</a>. Your main profile
+              and your member profiles can all have different flags.
+            </p>
+          {:else}
+            To upload and delete flags, go to your <a href="/settings/flags">settings</a>.
+          {/if}
+        </Alert>
+      </div>
+    </div>
+  </TabPane>
+  <TabPane tabId="links" tab="Links">
+    <div class="mt-3">
+      {#each links as _, index}
+        <div class="input-group m-1">
+          <IconButton
+            icon="chevron-up"
+            color="secondary"
+            tooltip="Move link up"
+            click={() => moveLink(index, true)}
+          />
+          <IconButton
+            icon="chevron-down"
+            color="secondary"
+            tooltip="Move link down"
+            click={() => moveLink(index, false)}
+          />
+          <input type="text" class="form-control" bind:value={links[index]} />
+          <IconButton
+            color="danger"
+            icon="trash3"
+            tooltip="Remove link"
+            click={() => removeLink(index)}
+          />
+        </div>
+      {/each}
+      <form class="input-group m-1" on:submit={addLink}>
+        <input type="text" class="form-control" bind:value={newLink} />
+        <IconButton type="submit" color="success" icon="plus" tooltip="Add link" />
+      </form>
+    </div>
+  </TabPane>
+  <TabPane tabId="other" tab="Preferences & other">
+    <div class="row mt-3">
+      <div class="col-md">
+        <FormGroup floating label={'"Members" header text'}>
+          <Input bind:value={member_title} placeholder="Members" />
+          <p class="text-muted mt-1">
+            <Icon name="info-circle-fill" aria-hidden />
+            This is the text used for the "Members" heading. If you leave it blank, the default text
+            will be used.
+          </p>
+        </FormGroup>
+        {#if PUBLIC_SHORT_BASE}
+          <hr />
+          <p>
+            Current short ID: <code>{data.user.sid}</code>
+            <ButtonGroup class="mb-1">
+              <Button color="secondary" disabled={!canRerollSid} on:click={() => rerollSid()}
+                >Reroll short ID</Button
+              >
+              <IconButton
+                icon="link-45deg"
+                tooltip="Copy short link"
+                color="secondary"
+                click={copyShortURL}
+              />
+            </ButtonGroup>
+            <br />
+            <span class="text-muted">
+              <Icon name="info-circle-fill" aria-hidden />
+              This ID is used in <code>prns.cc</code> links. You can reroll one short ID every hour (shared
+              between your main profile and all members) by pressing the button above.
+            </span>
+          </p>
+        {/if}
+      </div>
+      <div class="col-md">
+        <div class="form-check">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            bind:checked={list_private}
+            id="listPrivate"
+          />
+          <label class="form-check-label" for="listPrivate">Hide member list</label>
+        </div>
+        <p class="text-muted mt-1">
+          <Icon name="info-circle-fill" aria-hidden />
+          This only hides your member <em>list</em>.
+          <strong>
+            Your members will still be visible to anyone at
+            <code class="text-nowrap">pronouns.cc/@{data.user.name}/[member-name]</code>.
+          </strong>
+        </p>
+        <hr />
+        <div class="m-1">
+          <p class="mt-1 my-2">
+            You can optionally set your timezone, which will show your current local time on your
+            profile.
+          </p>
+          <InputGroup>
+            <Button on:click={detectTimezone}>Detect timezone</Button>
+            <Input disabled value={timezone !== null ? timezone : "Unset"} />
+            <Button on:click={() => (timezone = null)}>Reset</Button>
+          </InputGroup>
+          <p class="mt-2">
+            {#if timezone}
+              This will show up on your profile like this:
+              <Icon name="clock" aria-hidden />
+              {currentTime} <span class="text-body-secondary">(UTC{displayTimezone})</span>
+              <br />
+            {/if}
+            <span class="text-muted">
+              Your timezone is never shared directly, only the difference between UTC and your
+              current timezone is.
+            </span>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div>
+      <h3>
+        Preferences <Button on:click={addPreference} color="success"
+          ><Icon name="plus" aria-hidden /> Add new</Button
+        >
+      </h3>
+      {#each preferenceIds as id}
+        <CustomPreference
+          bind:preference={custom_preferences[id]}
+          remove={() => removePreference(id)}
+        />
+      {/each}
+    </div>
+  </TabPane>
+</TabContent>
diff --git a/frontend/src/routes/edit/profile/+page.ts b/frontend/src/routes/edit/profile-old/+page.ts
similarity index 100%
rename from frontend/src/routes/edit/profile/+page.ts
rename to frontend/src/routes/edit/profile-old/+page.ts
diff --git a/frontend/src/routes/edit/profile/CustomPreference.svelte b/frontend/src/routes/edit/profile-old/CustomPreference.svelte
similarity index 100%
rename from frontend/src/routes/edit/profile/CustomPreference.svelte
rename to frontend/src/routes/edit/profile-old/CustomPreference.svelte
diff --git a/frontend/src/routes/edit/profile/IconPicker.svelte b/frontend/src/routes/edit/profile-old/IconPicker.svelte
similarity index 100%
rename from frontend/src/routes/edit/profile/IconPicker.svelte
rename to frontend/src/routes/edit/profile-old/IconPicker.svelte
diff --git a/frontend/src/routes/edit/profile/+layout.svelte b/frontend/src/routes/edit/profile/+layout.svelte
new file mode 100644
index 0000000..4bedc64
--- /dev/null
+++ b/frontend/src/routes/edit/profile/+layout.svelte
@@ -0,0 +1,213 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+  import { page } from "$app/stores";
+  import type { LayoutData } from "./$types";
+  import { Button, ButtonGroup, Icon, Nav, NavItem, NavLink } from "sveltestrap";
+  import type {
+    FieldEntry,
+    Field,
+    MeUser,
+    Pronoun,
+    PrideFlag,
+    CustomPreferences,
+    APIError,
+  } from "$lib/api/entities";
+  import ErrorAlert from "$lib/components/ErrorAlert.svelte";
+  import { addToast, delToast } from "$lib/toast";
+  import { apiFetchClient } from "$lib/api/fetch";
+  import { userStore } from "$lib/store";
+
+  export let data: LayoutData;
+
+  // The user context used in all other pages.
+  // Avatar is explicitly set to null here as it holds the base64-encoded version of the new avatar later.
+  const user = writable<MeUser>(structuredClone({ ...data.user, avatar: null }));
+  const currentUser = writable<MeUser>(data.user);
+  setContext("user", user);
+  setContext("currentUser", currentUser);
+
+  let error: APIError | null = null;
+  let modified = false;
+  $: modified = isModified($currentUser, $user);
+
+  /** Returns whether or not the user in the store (referred to as newUser) is modified. */
+  const isModified = (user: MeUser, newUser: MeUser) => {
+    if ((newUser.bio || "") !== (user.bio || "")) return true;
+    if ((newUser.display_name || "") !== (user.display_name || "")) return true;
+    if ((newUser.member_title || "") !== (user.member_title || "")) return true;
+    if (!linksEqual(newUser.links, user.links)) return true;
+    if (!fieldsEqual(newUser.fields, user.fields)) return true;
+    if (!flagsEqual(newUser.flags, user.flags)) return true;
+    if (!namesEqual(newUser.names, user.names)) return true;
+    if (!pronounsEqual(newUser.pronouns, user.pronouns)) return true;
+    if (!customPreferencesEqual(newUser.custom_preferences, user.custom_preferences)) return true;
+    if (newUser.avatar !== null) return true;
+    if (newUser.list_private !== user.list_private) return true;
+    if (newUser.timezone !== user.timezone) return true;
+
+    return false;
+  };
+
+  const updateUser = async () => {
+    const toastId = addToast({
+      header: "Saving changes",
+      body: "Saving changes, please wait...",
+      duration: -1,
+    });
+
+    try {
+      const resp = await apiFetchClient<MeUser>("/users/@me", "PATCH", {
+        display_name: $user.display_name || "",
+        avatar: $user.avatar,
+        bio: $user.bio,
+        links: $user.links,
+        names: $user.names,
+        pronouns: $user.pronouns,
+        fields: $user.fields,
+        member_title: $user.member_title || "",
+        list_private: $user.list_private,
+        timezone: $user.timezone || "",
+        custom_preferences: $user.custom_preferences,
+        flags: $user.flags.map((flag) => flag.id),
+      });
+
+      currentUser.set(resp);
+      userStore.set(resp);
+      localStorage.setItem("pronouns-user", JSON.stringify(resp));
+
+      addToast({ header: "Success", body: "Successfully saved changes!" });
+
+      user.update((_) => ({ ...resp, avatar: null }));
+      error = null;
+    } catch (e) {
+      error = e as APIError;
+    } finally {
+      delToast(toastId);
+    }
+  };
+
+  // The individual functions called in isModified follow.
+  const fieldsEqual = (arr1: Field[], arr2: Field[]) => {
+    if (arr1?.length !== arr2?.length) return false;
+    if (!arr1.every((_, i) => arr1[i].entries.length === arr2[i].entries.length)) return false;
+    if (!arr1.every((_, i) => arr1[i].name === arr2[i].name)) return false;
+
+    return arr1.every((_, i) =>
+      arr1[i].entries.every(
+        (entry, j) =>
+          entry.value === arr2[i].entries[j].value && entry.status === arr2[i].entries[j].status,
+      ),
+    );
+  };
+
+  const namesEqual = (arr1: FieldEntry[], arr2: FieldEntry[]) => {
+    console.log("new:", JSON.stringify(arr1));
+    console.log("current:", JSON.stringify(arr2));
+
+    if (arr1?.length !== arr2?.length) return false;
+    if (!arr1.every((_, i) => arr1[i].value === arr2[i].value)) return false;
+    if (!arr1.every((_, i) => arr1[i].status === arr2[i].status)) return false;
+
+    return true;
+  };
+
+  const pronounsEqual = (arr1: Pronoun[], arr2: Pronoun[]) => {
+    if (arr1?.length !== arr2?.length) return false;
+    if (!arr1.every((_, i) => arr1[i].pronouns === arr2[i].pronouns)) return false;
+    if (!arr1.every((_, i) => arr1[i].display_text === arr2[i].display_text)) return false;
+    if (!arr1.every((_, i) => arr1[i].status === arr2[i].status)) return false;
+
+    return true;
+  };
+
+  const linksEqual = (arr1: string[], arr2: string[]) => {
+    if (arr1.length !== arr2.length) return false;
+    return arr1.every((_, i) => arr1[i] === arr2[i]);
+  };
+
+  const flagsEqual = (arr1: PrideFlag[], arr2: PrideFlag[]) => {
+    if (arr1.length !== arr2.length) return false;
+    return arr1.every((_, i) => arr1[i].id === arr2[i].id);
+  };
+
+  const customPreferencesEqual = (obj1: CustomPreferences, obj2: CustomPreferences) => {
+    if (Object.keys(obj2).some((key) => !(key in obj1))) return false;
+
+    return Object.keys(obj1)
+      .map((key) => {
+        if (!(key in obj2)) return false;
+        return (
+          obj1[key].icon === obj2[key].icon &&
+          obj1[key].tooltip === obj2[key].tooltip &&
+          obj1[key].favourite === obj2[key].favourite &&
+          obj1[key].muted === obj2[key].muted &&
+          obj1[key].size === obj2[key].size
+        );
+      })
+      .every((entry) => entry);
+  };
+</script>
+
+<svelte:head>
+  <title>Edit profile - pronouns.cc</title>
+</svelte:head>
+
+<h1>
+  Edit profile
+  <ButtonGroup>
+    <Button color="secondary" href="/@{data.user.name}">
+      <Icon name="chevron-left" />
+      Back to your profile
+    </Button>
+    {#if modified}
+      <Button color="success" on:click={() => updateUser()}>Save changes</Button>
+    {/if}
+  </ButtonGroup>
+</h1>
+
+{#if error}
+  <ErrorAlert {error} />
+{/if}
+
+<Nav tabs>
+  <NavItem>
+    <NavLink href="/edit/profile" active={$page.url.pathname === "/edit/profile"}
+      >Names and avatar</NavLink
+    >
+  </NavItem>
+  <NavItem>
+    <NavLink href="/edit/profile/bio" active={$page.url.pathname === "/edit/profile/bio"}
+      >Bio</NavLink
+    >
+  </NavItem>
+  <NavItem>
+    <NavLink href="/edit/profile/pronouns" active={$page.url.pathname === "/edit/profile/pronouns"}
+      >Pronouns</NavLink
+    >
+  </NavItem>
+  <NavItem>
+    <NavLink href="/edit/profile/fields" active={$page.url.pathname === "/edit/profile/fields"}
+      >Fields</NavLink
+    >
+  </NavItem>
+  <NavItem>
+    <NavLink href="/edit/profile/flags" active={$page.url.pathname === "/edit/profile/flags"}
+      >Flags</NavLink
+    >
+  </NavItem>
+  <NavItem>
+    <NavLink href="/edit/profile/links" active={$page.url.pathname === "/edit/profile/links"}
+      >Links</NavLink
+    >
+  </NavItem>
+  <NavItem>
+    <NavLink href="/edit/profile/other" active={$page.url.pathname === "/edit/profile/other"}
+      >Preferences & other</NavLink
+    >
+  </NavItem>
+</Nav>
+
+<div class="mt-3">
+  <slot />
+</div>
diff --git a/frontend/src/routes/edit/profile/+layout.ts b/frontend/src/routes/edit/profile/+layout.ts
new file mode 100644
index 0000000..894eb83
--- /dev/null
+++ b/frontend/src/routes/edit/profile/+layout.ts
@@ -0,0 +1,23 @@
+import type { PrideFlag, APIError, MeUser, PronounsJson } from "$lib/api/entities";
+import { apiFetchClient } from "$lib/api/fetch";
+import { error } from "@sveltejs/kit";
+
+import pronounsRaw from "$lib/pronouns.json";
+const pronouns = pronounsRaw as PronounsJson;
+
+export const ssr = false;
+
+export const load = async () => {
+  try {
+    const user = await apiFetchClient<MeUser>(`/users/@me`);
+    const flags = await apiFetchClient<PrideFlag[]>("/users/@me/flags");
+
+    return {
+      user,
+      pronouns: pronouns.autocomplete,
+      flags,
+    };
+  } catch (e) {
+    throw error((e as APIError).code, (e as APIError).message);
+  }
+};
diff --git a/frontend/src/routes/edit/profile/+page.svelte b/frontend/src/routes/edit/profile/+page.svelte
index 8baa2d4..441d0ad 100644
--- a/frontend/src/routes/edit/profile/+page.svelte
+++ b/frontend/src/routes/edit/profile/+page.svelte
@@ -1,196 +1,50 @@
 <script lang="ts">
-  import {
-    MAX_DESCRIPTION_LENGTH,
-    userAvatars,
-    type APIError,
-    type Field,
-    type FieldEntry,
-    type MeUser,
-    type Pronoun,
-    PreferenceSize,
-    type CustomPreferences,
-    type PrideFlag,
-  } from "$lib/api/entities";
-  import FallbackImage from "$lib/components/FallbackImage.svelte";
-  import { userStore } from "$lib/store";
-  import {
-    Alert,
-    Button,
-    ButtonGroup,
-    Card,
-    CardBody,
-    CardHeader,
-    FormGroup,
-    InputGroup,
-    Icon,
-    Input,
-    Popover,
-    TabContent,
-    TabPane,
-    InputGroupText,
-  } from "sveltestrap";
-  import { encode } from "base64-arraybuffer";
-  import { DateTime, FixedOffsetZone } from "luxon";
-  import { apiFetchClient } from "$lib/api/fetch";
-  import { PUBLIC_SHORT_BASE } from "$env/static/public";
-  import IconButton from "$lib/components/IconButton.svelte";
-  import EditableField from "../EditableField.svelte";
-  import EditableName from "../EditableName.svelte";
-  import EditablePronouns from "../EditablePronouns.svelte";
-  import ErrorAlert from "$lib/components/ErrorAlert.svelte";
-  import { addToast, delToast } from "$lib/toast";
-  import type { PageData, Snapshot } from "./$types";
-  import { charCount, renderMarkdown } from "$lib/utils";
-  import MarkdownHelp from "../MarkdownHelp.svelte";
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
   import prettyBytes from "pretty-bytes";
-  import CustomPreference from "./CustomPreference.svelte";
-  import FlagButton from "../FlagButton.svelte";
+  import { encode } from "base64-arraybuffer";
+  import { FormGroup, Icon, Input } from "sveltestrap";
+  import { userAvatars, type MeUser } from "$lib/api/entities";
+  import FallbackImage from "$lib/components/FallbackImage.svelte";
+  import EditableName from "../EditableName.svelte";
+  import { addToast } from "$lib/toast";
+  import IconButton from "$lib/components/IconButton.svelte";
 
   const MAX_AVATAR_BYTES = 1_000_000;
 
-  export let data: PageData;
+  const user = getContext<Writable<MeUser>>("user");
+  const currentUser = getContext<Writable<MeUser>>("currentUser");
 
-  let error: APIError | null = null;
-
-  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 flags: PrideFlag[] = window.structuredClone(data.user.flags);
-  let list_private = data.user.list_private;
-  let custom_preferences = window.structuredClone(data.user.custom_preferences);
-  let timezone = data.user.timezone;
-
-  let avatar: string | null;
+  // The list of avatar files uploaded by the user.
+  // Only the first of these is ever used.
   let avatar_files: FileList | null;
+  $: getAvatar(avatar_files).then((b64) => ($user.avatar = b64));
 
+  // The variable for a new name being inputted by the user.
   let newName = "";
-  let newPronouns = "";
-  let newLink = "";
 
-  let flagSearch = "";
-  let filteredFlags: PrideFlag[];
-  $: filteredFlags = filterFlags(flagSearch, data.flags);
+  const moveName = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == $user.names.length - 1) return;
 
-  const filterFlags = (search: string, flags: PrideFlag[]) => {
-    return (
-      search
-        ? flags.filter((flag) => flag.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
-        : flags
-    ).slice(0, 25);
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = $user.names[index];
+    $user.names[index] = $user.names[newIndex];
+    $user.names[newIndex] = temp;
+    $user.names = [...$user.names];
   };
 
-  let preferenceIds: string[];
-  $: preferenceIds = Object.keys(custom_preferences);
-
-  let modified = false;
-
-  $: modified = isModified(
-    data.user,
-    bio,
-    display_name,
-    links,
-    names,
-    pronouns,
-    fields,
-    flags,
-    avatar,
-    member_title,
-    list_private,
-    custom_preferences,
-    timezone,
-  );
-  $: getAvatar(avatar_files).then((b64) => (avatar = b64));
-
-  const isModified = (
-    user: MeUser,
-    bio: string,
-    display_name: string,
-    links: string[],
-    names: FieldEntry[],
-    pronouns: Pronoun[],
-    fields: Field[],
-    flags: PrideFlag[],
-    avatar: string | null,
-    member_title: string,
-    list_private: boolean,
-    custom_preferences: CustomPreferences,
-    timezone: string | null,
-  ) => {
-    if (bio !== (user.bio || "")) return true;
-    if (display_name !== (user.display_name || "")) return true;
-    if (member_title !== (user.member_title || "")) return true;
-    if (!linksEqual(links, user.links)) return true;
-    if (!fieldsEqual(fields, user.fields)) return true;
-    if (!flagsEqual(flags, user.flags)) return true;
-    if (!namesEqual(names, user.names)) return true;
-    if (!pronounsEqual(pronouns, user.pronouns)) return true;
-    if (!customPreferencesEqual(custom_preferences, user.custom_preferences)) return true;
-    if (avatar !== null) return true;
-    if (list_private !== user.list_private) return true;
-    if (timezone !== user.timezone) return true;
-
-    return false;
+  const removeName = (index: number) => {
+    $user.names.splice(index, 1);
+    $user.names = [...$user.names];
   };
 
-  const fieldsEqual = (arr1: Field[], arr2: Field[]) => {
-    if (arr1?.length !== arr2?.length) return false;
-    if (!arr1.every((_, i) => arr1[i].entries.length === arr2[i].entries.length)) return false;
-    if (!arr1.every((_, i) => arr1[i].name === arr2[i].name)) return false;
+  const addName = (event: Event) => {
+    event.preventDefault();
 
-    return arr1.every((_, i) =>
-      arr1[i].entries.every(
-        (entry, j) =>
-          entry.value === arr2[i].entries[j].value && entry.status === arr2[i].entries[j].status,
-      ),
-    );
-  };
-
-  const namesEqual = (arr1: FieldEntry[], arr2: FieldEntry[]) => {
-    if (arr1?.length !== arr2?.length) return false;
-    if (!arr1.every((_, i) => arr1[i].value === arr2[i].value)) return false;
-    if (!arr1.every((_, i) => arr1[i].status === arr2[i].status)) return false;
-
-    return true;
-  };
-
-  const pronounsEqual = (arr1: Pronoun[], arr2: Pronoun[]) => {
-    if (arr1?.length !== arr2?.length) return false;
-    if (!arr1.every((_, i) => arr1[i].pronouns === arr2[i].pronouns)) return false;
-    if (!arr1.every((_, i) => arr1[i].display_text === arr2[i].display_text)) return false;
-    if (!arr1.every((_, i) => arr1[i].status === arr2[i].status)) return false;
-
-    return true;
-  };
-
-  const linksEqual = (arr1: string[], arr2: string[]) => {
-    if (arr1.length !== arr2.length) return false;
-    return arr1.every((_, i) => arr1[i] === arr2[i]);
-  };
-
-  const flagsEqual = (arr1: PrideFlag[], arr2: PrideFlag[]) => {
-    if (arr1.length !== arr2.length) return false;
-    return arr1.every((_, i) => arr1[i].id === arr2[i].id);
-  };
-
-  const customPreferencesEqual = (obj1: CustomPreferences, obj2: CustomPreferences) => {
-    if (Object.keys(obj2).some((key) => !(key in obj1))) return false;
-
-    return Object.keys(obj1)
-      .map((key) => {
-        if (!(key in obj2)) return false;
-        return (
-          obj1[key].icon === obj2[key].icon &&
-          obj1[key].tooltip === obj2[key].tooltip &&
-          obj1[key].favourite === obj2[key].favourite &&
-          obj1[key].muted === obj2[key].muted &&
-          obj1[key].size === obj2[key].size
-        );
-      })
-      .every((entry) => entry);
+    $user.names = [...$user.names, { value: newName, status: "okay" }];
+    newName = "";
   };
 
   const getAvatar = async (list: FileList | null) => {
@@ -213,650 +67,77 @@
 
     return uri;
   };
-
-  let currentTime = "";
-  let displayTimezone = "";
-  $: setTime(timezone);
-
-  const setTime = (timezone: string | null) => {
-    if (!timezone) {
-      currentTime = "";
-      displayTimezone = "";
-      return;
-    }
-
-    const offset = DateTime.now().setZone(timezone).offset;
-    const zone = FixedOffsetZone.instance(offset);
-
-    currentTime = now.setZone(zone).toLocaleString(DateTime.TIME_SIMPLE);
-    displayTimezone = zone.formatOffset(now.toUnixInteger(), "narrow");
-  };
-
-  const moveName = (index: number, up: boolean) => {
-    if (up && index == 0) return;
-    if (!up && index == names.length - 1) return;
-
-    const newIndex = up ? index - 1 : index + 1;
-
-    const temp = names[index];
-    names[index] = names[newIndex];
-    names[newIndex] = temp;
-  };
-
-  const movePronoun = (index: number, up: boolean) => {
-    if (up && index == 0) return;
-    if (!up && index == pronouns.length - 1) return;
-
-    const newIndex = up ? index - 1 : index + 1;
-
-    const temp = pronouns[index];
-    pronouns[index] = pronouns[newIndex];
-    pronouns[newIndex] = temp;
-  };
-
-  const moveField = (index: number, up: boolean) => {
-    if (up && index == 0) return;
-    if (!up && index == fields.length - 1) return;
-
-    const newIndex = up ? index - 1 : index + 1;
-
-    const temp = fields[index];
-    fields[index] = fields[newIndex];
-    fields[newIndex] = temp;
-  };
-
-  const moveLink = (index: number, up: boolean) => {
-    if (up && index == 0) return;
-    if (!up && index == links.length - 1) return;
-
-    const newIndex = up ? index - 1 : index + 1;
-
-    const temp = links[index];
-    links[index] = links[newIndex];
-    links[newIndex] = temp;
-  };
-
-  const moveFlag = (index: number, up: boolean) => {
-    if (up && index == 0) return;
-    if (!up && index == flags.length - 1) return;
-
-    const newIndex = up ? index - 1 : index + 1;
-
-    const temp = flags[index];
-    flags[index] = flags[newIndex];
-    flags[newIndex] = temp;
-  };
-
-  const addFlag = (flag: PrideFlag) => {
-    flags = [...flags, flag];
-  };
-
-  const removeFlag = (index: number) => {
-    flags.splice(index, 1);
-    flags = [...flags];
-  };
-
-  const addName = (event: Event) => {
-    event.preventDefault();
-
-    names = [...names, { value: newName, status: "okay" }];
-    newName = "";
-  };
-
-  const addPronouns = (event: Event) => {
-    event.preventDefault();
-
-    if (newPronouns in data.pronouns) {
-      const fullSet = data.pronouns[newPronouns];
-      pronouns = [
-        ...pronouns,
-        {
-          pronouns: fullSet.pronouns.join("/"),
-          display_text: fullSet.display || null,
-          status: "okay",
-        },
-      ];
-    } else {
-      pronouns = [...pronouns, { pronouns: newPronouns, display_text: null, status: "okay" }];
-    }
-    newPronouns = "";
-  };
-
-  const addLink = (event: Event) => {
-    event.preventDefault();
-
-    links = [...links, newLink];
-    newLink = "";
-  };
-
-  const addPreference = () => {
-    const id = crypto.randomUUID();
-
-    custom_preferences[id] = {
-      icon: "question",
-      tooltip: "New preference",
-      size: PreferenceSize.Normal,
-      muted: false,
-      favourite: false,
-    };
-    custom_preferences = custom_preferences;
-  };
-
-  const removeName = (index: number) => {
-    names.splice(index, 1);
-    names = [...names];
-  };
-
-  const removePronoun = (index: number) => {
-    pronouns.splice(index, 1);
-    pronouns = [...pronouns];
-  };
-
-  const removeLink = (index: number) => {
-    links.splice(index, 1);
-    links = [...links];
-  };
-
-  const removeField = (index: number) => {
-    fields.splice(index, 1);
-    fields = [...fields];
-  };
-
-  const removePreference = (id: string) => {
-    delete custom_preferences[id];
-    custom_preferences = custom_preferences;
-  };
-
-  const updateUser = async () => {
-    const toastId = addToast({
-      header: "Saving changes",
-      body: "Saving changes, please wait...",
-      duration: -1,
-    });
-
-    try {
-      const resp = await apiFetchClient<MeUser>("/users/@me", "PATCH", {
-        display_name,
-        avatar,
-        bio,
-        links,
-        names,
-        pronouns,
-        fields,
-        member_title,
-        list_private,
-        timezone: timezone || "",
-        custom_preferences,
-        flags: flags.map((flag) => flag.id),
-      });
-
-      data.user = resp;
-      custom_preferences = resp.custom_preferences;
-      userStore.set(resp);
-      localStorage.setItem("pronouns-user", JSON.stringify(resp));
-
-      addToast({ header: "Success", body: "Successfully saved changes!" });
-
-      avatar = null;
-      error = null;
-    } catch (e) {
-      error = e as APIError;
-    } finally {
-      delToast(toastId);
-    }
-  };
-
-  const now = DateTime.now().toLocal();
-  let canRerollSid: boolean;
-  $: canRerollSid =
-    now.diff(DateTime.fromISO(data.user.last_sid_reroll).toLocal(), "hours").hours >= 1;
-
-  const rerollSid = async () => {
-    try {
-      const resp = await apiFetchClient<MeUser>("/users/@me/reroll");
-      addToast({ header: "Success", body: "Rerolled short ID!" });
-      error = null;
-      data.user.sid = resp.sid;
-    } catch (e) {
-      error = e as APIError;
-    }
-  };
-
-  const copyShortURL = async () => {
-    const url = `${PUBLIC_SHORT_BASE}/${data.user.sid}`;
-    await navigator.clipboard.writeText(url);
-    addToast({ body: "Copied the short link to your clipboard!", duration: 2000 });
-  };
-
-  const detectTimezone = () => {
-    timezone = DateTime.local().zoneName;
-  };
-
-  interface SnapshotData {
-    bio: string;
-    display_name: string;
-    member_title: string;
-    links: string[];
-    names: FieldEntry[];
-    pronouns: Pronoun[];
-    fields: Field[];
-    flags: PrideFlag[];
-    list_private: boolean;
-    timezone: string | null;
-    custom_preferences: CustomPreferences;
-
-    avatar: string | null;
-    newName: string;
-    newPronouns: string;
-    newLink: string;
-  }
-
-  export const snapshot: Snapshot<SnapshotData> = {
-    capture: () => ({
-      bio,
-      display_name,
-      member_title,
-      links,
-      names,
-      pronouns,
-      fields,
-      flags,
-      list_private,
-      timezone,
-      custom_preferences,
-      avatar,
-      newName,
-      newPronouns,
-      newLink,
-    }),
-    restore: (value) => {
-      bio = value.bio;
-      display_name = value.display_name;
-      member_title = value.member_title;
-      links = value.links;
-      names = value.names;
-      pronouns = value.pronouns;
-      fields = value.fields;
-      flags = value.flags;
-      list_private = value.list_private;
-      timezone = value.timezone;
-      custom_preferences = value.custom_preferences;
-      avatar = value.avatar;
-      newName = value.newName;
-      newPronouns = value.newPronouns;
-      newLink = value.newLink;
-    },
-  };
 </script>
 
-<svelte:head>
-  <title>Edit profile - pronouns.cc</title>
-</svelte:head>
-
-<h1>
-  Edit profile
-  <ButtonGroup>
-    <Button color="secondary" href="/@{data.user.name}">
-      <Icon name="chevron-left" />
-      Back to your profile
-    </Button>
-    {#if modified}
-      <Button color="success" on:click={() => updateUser()}>Save changes</Button>
-    {/if}
-  </ButtonGroup>
-</h1>
-
-{#if error}
-  <ErrorAlert {error} />
-{/if}
-
-<TabContent>
-  <TabPane tabId="avatar" tab="Names and avatar" active>
-    <div class="row mt-3">
-      <div class="col-md">
-        <div class="row">
-          <div class="col-md text-center">
-            {#if avatar === ""}
-              <FallbackImage alt="Current avatar" urls={[]} width={200} />
-            {:else if avatar}
-              <img
-                width={200}
-                height={200}
-                src={avatar}
-                alt="New avatar"
-                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"
-            />
-            <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>
-              <!-- svelte-ignore a11y-invalid-attribute -->
-              <a href="" on:click={() => (avatar = "")}>Remove avatar</a>
-            </p>
-          </div>
-        </div>
-      </div>
-      <div class="col-md">
-        <FormGroup floating label="Username">
-          <Input bind:value={data.user.name} readonly />
-          <p class="text-muted mt-1">
-            <Icon name="info-circle-fill" aria-hidden />
-            You can change your username in
-            <a href="/settings" class="text-reset">your settings</a>.
-          </p>
-        </FormGroup>
-        <FormGroup floating label="Display name">
-          <Input bind:value={display_name} />
-          <p class="text-muted mt-1">
-            <Icon name="info-circle-fill" aria-hidden />
-            Your display name is used in page titles and as a header.
-          </p>
-        </FormGroup>
-      </div>
-    </div>
-    <div>
-      <h4>Names</h4>
-      {#each names as _, index}
-        <EditableName
-          bind:value={names[index].value}
-          bind:status={names[index].status}
-          preferences={custom_preferences}
-          moveUp={() => moveName(index, true)}
-          moveDown={() => moveName(index, false)}
-          remove={() => removeName(index)}
-        />
-      {/each}
-      <form class="input-group m-1" on:submit={addName}>
-        <input type="text" class="form-control" bind:value={newName} />
-        <IconButton type="submit" color="success" icon="plus" tooltip="Add name" />
-      </form>
-    </div>
-  </TabPane>
-  <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 {charCount(bio)}/{MAX_DESCRIPTION_LENGTH} characters
-      </p>
-      <p class="text-muted my-2">
-        <MarkdownHelp />
-      </p>
-      {#if bio}
-        <hr />
-        <Card>
-          <CardHeader>Preview</CardHeader>
-          <CardBody>
-            {@html renderMarkdown(bio)}
-          </CardBody>
-        </Card>
-      {/if}
-    </div>
-  </TabPane>
-  <TabPane tabId="pronouns" tab="Pronouns">
-    <div class="mt-3">
-      <div class="col-md">
-        {#each pronouns as _, index}
-          <EditablePronouns
-            bind:pronoun={pronouns[index]}
-            preferences={custom_preferences}
-            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]}
-            preferences={custom_preferences}
-            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="flags" tab="Flags">
-    <div class="mt-3">
-      {#each flags as _, index}
-        <ButtonGroup class="m-1">
-          <IconButton
-            icon="chevron-left"
-            color="secondary"
-            tooltip="Move flag to the left"
-            click={() => moveFlag(index, true)}
-          />
-          <IconButton
-            icon="chevron-right"
-            color="secondary"
-            tooltip="Move flag to the right"
-            click={() => moveFlag(index, false)}
-          />
-          <FlagButton
-            flag={flags[index]}
-            tooltip="Remove this flag from your profile"
-            on:click={() => removeFlag(index)}
-          />
-        </ButtonGroup>
-      {/each}
-    </div>
-    <hr />
+<div class="row">
+  <div class="col-md">
     <div class="row">
-      <div class="col-md">
-        <Input
-          placeholder="Filter flags"
-          bind:value={flagSearch}
-          disabled={data.flags.length === 0}
-        />
-        <div class="p-2">
-          {#each filteredFlags as flag (flag.id)}
-            <FlagButton
-              {flag}
-              tooltip="Add this flag to your profile"
-              on:click={() => addFlag(flag)}
-            />
-          {:else}
-            {#if data.flags.length === 0}
-              You haven't uploaded any flags yet.
-            {:else}
-              There are no flags matching your search <strong>{flagSearch}</strong>.
-            {/if}
-          {/each}
-        </div>
-      </div>
-      <div class="col-md">
-        <Alert color="secondary" fade={false}>
-          {#if data.flags.length === 0}
-            <p><strong>Why can't I see any flags?</strong></p>
-            <p>
-              There are thousands of pride flags, and it would be impossible to bundle all of them
-              by default. Many labels also have multiple different flags that are favoured by
-              different people. Because of this, there are no flags available by default--instead,
-              you can upload flags in your <a href="/settings/flags">settings</a>. Your main profile
-              and your member profiles can all have different flags.
-            </p>
-          {:else}
-            To upload and delete flags, go to your <a href="/settings/flags">settings</a>.
-          {/if}
-        </Alert>
-      </div>
-    </div>
-  </TabPane>
-  <TabPane tabId="links" tab="Links">
-    <div class="mt-3">
-      {#each links as _, index}
-        <div class="input-group m-1">
-          <IconButton
-            icon="chevron-up"
-            color="secondary"
-            tooltip="Move link up"
-            click={() => moveLink(index, true)}
+      <div class="col-md text-center">
+        {#if $user.avatar === ""}
+          <FallbackImage alt="Current avatar" urls={[]} width={200} />
+        {:else if $user.avatar}
+          <img
+            width={200}
+            height={200}
+            src={$user.avatar}
+            alt="New avatar"
+            class="rounded-circle img-fluid"
           />
-          <IconButton
-            icon="chevron-down"
-            color="secondary"
-            tooltip="Move link down"
-            click={() => moveLink(index, false)}
-          />
-          <input type="text" class="form-control" bind:value={links[index]} />
-          <IconButton
-            color="danger"
-            icon="trash3"
-            tooltip="Remove link"
-            click={() => removeLink(index)}
-          />
-        </div>
-      {/each}
-      <form class="input-group m-1" on:submit={addLink}>
-        <input type="text" class="form-control" bind:value={newLink} />
-        <IconButton type="submit" color="success" icon="plus" tooltip="Add link" />
-      </form>
-    </div>
-  </TabPane>
-  <TabPane tabId="other" tab="Preferences & other">
-    <div class="row mt-3">
-      <div class="col-md">
-        <FormGroup floating label={'"Members" header text'}>
-          <Input bind:value={member_title} placeholder="Members" />
-          <p class="text-muted mt-1">
-            <Icon name="info-circle-fill" aria-hidden />
-            This is the text used for the "Members" heading. If you leave it blank, the default text
-            will be used.
-          </p>
-        </FormGroup>
-        {#if PUBLIC_SHORT_BASE}
-          <hr />
-          <p>
-            Current short ID: <code>{data.user.sid}</code>
-            <ButtonGroup class="mb-1">
-              <Button color="secondary" disabled={!canRerollSid} on:click={() => rerollSid()}
-                >Reroll short ID</Button
-              >
-              <IconButton
-                icon="link-45deg"
-                tooltip="Copy short link"
-                color="secondary"
-                click={copyShortURL}
-              />
-            </ButtonGroup>
-            <br />
-            <span class="text-muted">
-              <Icon name="info-circle-fill" aria-hidden />
-              This ID is used in <code>prns.cc</code> links. You can reroll one short ID every hour (shared
-              between your main profile and all members) by pressing the button above.
-            </span>
-          </p>
+        {:else}
+          <FallbackImage alt="Current avatar" urls={userAvatars($currentUser)} width={200} />
         {/if}
       </div>
       <div class="col-md">
-        <div class="form-check">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            bind:checked={list_private}
-            id="listPrivate"
-          />
-          <label class="form-check-label" for="listPrivate">Hide member list</label>
-        </div>
-        <p class="text-muted mt-1">
-          <Icon name="info-circle-fill" aria-hidden />
-          This only hides your member <em>list</em>.
-          <strong>
-            Your members will still be visible to anyone at
-            <code class="text-nowrap">pronouns.cc/@{data.user.name}/[member-name]</code>.
-          </strong>
+        <input
+          class="form-control"
+          id="avatar"
+          type="file"
+          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>
+          <!-- svelte-ignore a11y-invalid-attribute -->
+          <a href="" on:click={() => ($user.avatar = "")}>Remove avatar</a>
         </p>
-        <hr />
-        <div class="m-1">
-          <p class="mt-1 my-2">
-            You can optionally set your timezone, which will show your current local time on your
-            profile.
-          </p>
-          <InputGroup>
-            <Button on:click={detectTimezone}>Detect timezone</Button>
-            <Input disabled value={timezone !== null ? timezone : "Unset"} />
-            <Button on:click={() => (timezone = null)}>Reset</Button>
-          </InputGroup>
-          <p class="mt-2">
-            {#if timezone}
-              This will show up on your profile like this:
-              <Icon name="clock" aria-hidden />
-              {currentTime} <span class="text-body-secondary">(UTC{displayTimezone})</span>
-              <br />
-            {/if}
-            <span class="text-muted">
-              Your timezone is never shared directly, only the difference between UTC and your
-              current timezone is.
-            </span>
-          </p>
-        </div>
       </div>
     </div>
-    <div>
-      <h3>
-        Preferences <Button on:click={addPreference} color="success"
-          ><Icon name="plus" aria-hidden /> Add new</Button
-        >
-      </h3>
-      {#each preferenceIds as id}
-        <CustomPreference
-          bind:preference={custom_preferences[id]}
-          remove={() => removePreference(id)}
-        />
-      {/each}
-    </div>
-  </TabPane>
-</TabContent>
+  </div>
+  <div class="col-md">
+    <FormGroup floating label="Username">
+      <Input bind:value={$user.name} readonly />
+      <p class="text-muted mt-1">
+        <Icon name="info-circle-fill" aria-hidden />
+        You can change your username in
+        <a href="/settings" class="text-reset">your settings</a>.
+      </p>
+    </FormGroup>
+    <FormGroup floating label="Display name">
+      <Input bind:value={$user.display_name} />
+      <p class="text-muted mt-1">
+        <Icon name="info-circle-fill" aria-hidden />
+        Your display name is used in page titles and as a header.
+      </p>
+    </FormGroup>
+  </div>
+</div>
+<div>
+  <h4>Names</h4>
+  {#each $user.names as _, index}
+    <EditableName
+      bind:value={$user.names[index].value}
+      bind:status={$user.names[index].status}
+      preferences={$user.custom_preferences}
+      moveUp={() => moveName(index, true)}
+      moveDown={() => moveName(index, false)}
+      remove={() => removeName(index)}
+    />
+  {/each}
+  <form class="input-group m-1" on:submit={addName}>
+    <input type="text" class="form-control" bind:value={newName} />
+    <IconButton type="submit" color="success" icon="plus" tooltip="Add name" />
+  </form>
+</div>

From 93a113206f3349b99f17b312344ca57635c8eaf5 Mon Sep 17 00:00:00 2001
From: sam <sam@sleepycat.moe>
Date: Sun, 6 Aug 2023 15:38:33 +0200
Subject: [PATCH 02/10] tweak: always show 'save changes' button

---
 .../src/routes/edit/profile/+layout.svelte    | 85 +------------------
 1 file changed, 1 insertion(+), 84 deletions(-)

diff --git a/frontend/src/routes/edit/profile/+layout.svelte b/frontend/src/routes/edit/profile/+layout.svelte
index 4bedc64..1323b45 100644
--- a/frontend/src/routes/edit/profile/+layout.svelte
+++ b/frontend/src/routes/edit/profile/+layout.svelte
@@ -28,26 +28,6 @@
   setContext("currentUser", currentUser);
 
   let error: APIError | null = null;
-  let modified = false;
-  $: modified = isModified($currentUser, $user);
-
-  /** Returns whether or not the user in the store (referred to as newUser) is modified. */
-  const isModified = (user: MeUser, newUser: MeUser) => {
-    if ((newUser.bio || "") !== (user.bio || "")) return true;
-    if ((newUser.display_name || "") !== (user.display_name || "")) return true;
-    if ((newUser.member_title || "") !== (user.member_title || "")) return true;
-    if (!linksEqual(newUser.links, user.links)) return true;
-    if (!fieldsEqual(newUser.fields, user.fields)) return true;
-    if (!flagsEqual(newUser.flags, user.flags)) return true;
-    if (!namesEqual(newUser.names, user.names)) return true;
-    if (!pronounsEqual(newUser.pronouns, user.pronouns)) return true;
-    if (!customPreferencesEqual(newUser.custom_preferences, user.custom_preferences)) return true;
-    if (newUser.avatar !== null) return true;
-    if (newUser.list_private !== user.list_private) return true;
-    if (newUser.timezone !== user.timezone) return true;
-
-    return false;
-  };
 
   const updateUser = async () => {
     const toastId = addToast({
@@ -86,67 +66,6 @@
       delToast(toastId);
     }
   };
-
-  // The individual functions called in isModified follow.
-  const fieldsEqual = (arr1: Field[], arr2: Field[]) => {
-    if (arr1?.length !== arr2?.length) return false;
-    if (!arr1.every((_, i) => arr1[i].entries.length === arr2[i].entries.length)) return false;
-    if (!arr1.every((_, i) => arr1[i].name === arr2[i].name)) return false;
-
-    return arr1.every((_, i) =>
-      arr1[i].entries.every(
-        (entry, j) =>
-          entry.value === arr2[i].entries[j].value && entry.status === arr2[i].entries[j].status,
-      ),
-    );
-  };
-
-  const namesEqual = (arr1: FieldEntry[], arr2: FieldEntry[]) => {
-    console.log("new:", JSON.stringify(arr1));
-    console.log("current:", JSON.stringify(arr2));
-
-    if (arr1?.length !== arr2?.length) return false;
-    if (!arr1.every((_, i) => arr1[i].value === arr2[i].value)) return false;
-    if (!arr1.every((_, i) => arr1[i].status === arr2[i].status)) return false;
-
-    return true;
-  };
-
-  const pronounsEqual = (arr1: Pronoun[], arr2: Pronoun[]) => {
-    if (arr1?.length !== arr2?.length) return false;
-    if (!arr1.every((_, i) => arr1[i].pronouns === arr2[i].pronouns)) return false;
-    if (!arr1.every((_, i) => arr1[i].display_text === arr2[i].display_text)) return false;
-    if (!arr1.every((_, i) => arr1[i].status === arr2[i].status)) return false;
-
-    return true;
-  };
-
-  const linksEqual = (arr1: string[], arr2: string[]) => {
-    if (arr1.length !== arr2.length) return false;
-    return arr1.every((_, i) => arr1[i] === arr2[i]);
-  };
-
-  const flagsEqual = (arr1: PrideFlag[], arr2: PrideFlag[]) => {
-    if (arr1.length !== arr2.length) return false;
-    return arr1.every((_, i) => arr1[i].id === arr2[i].id);
-  };
-
-  const customPreferencesEqual = (obj1: CustomPreferences, obj2: CustomPreferences) => {
-    if (Object.keys(obj2).some((key) => !(key in obj1))) return false;
-
-    return Object.keys(obj1)
-      .map((key) => {
-        if (!(key in obj2)) return false;
-        return (
-          obj1[key].icon === obj2[key].icon &&
-          obj1[key].tooltip === obj2[key].tooltip &&
-          obj1[key].favourite === obj2[key].favourite &&
-          obj1[key].muted === obj2[key].muted &&
-          obj1[key].size === obj2[key].size
-        );
-      })
-      .every((entry) => entry);
-  };
 </script>
 
 <svelte:head>
@@ -160,9 +79,7 @@
       <Icon name="chevron-left" />
       Back to your profile
     </Button>
-    {#if modified}
-      <Button color="success" on:click={() => updateUser()}>Save changes</Button>
-    {/if}
+    <Button color="success" on:click={() => updateUser()}>Save changes</Button>
   </ButtonGroup>
 </h1>
 

From 61f1464e370e419fe7ba83c10f2d618061df228f Mon Sep 17 00:00:00 2001
From: sam <sam@sleepycat.moe>
Date: Mon, 7 Aug 2023 03:10:46 +0200
Subject: [PATCH 03/10] add bio and pronouns subpages

---
 frontend/src/lib/components/ActiveLink.svelte | 10 +++
 .../src/routes/edit/profile/+layout.svelte    | 56 +++----------
 .../src/routes/edit/profile/bio/+page.svelte  | 29 +++++++
 .../routes/edit/profile/pronouns/+page.svelte | 84 +++++++++++++++++++
 4 files changed, 133 insertions(+), 46 deletions(-)
 create mode 100644 frontend/src/lib/components/ActiveLink.svelte
 create mode 100644 frontend/src/routes/edit/profile/bio/+page.svelte
 create mode 100644 frontend/src/routes/edit/profile/pronouns/+page.svelte

diff --git a/frontend/src/lib/components/ActiveLink.svelte b/frontend/src/lib/components/ActiveLink.svelte
new file mode 100644
index 0000000..d9bc887
--- /dev/null
+++ b/frontend/src/lib/components/ActiveLink.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { NavLink } from "sveltestrap";
+  import { page } from "$app/stores";
+
+  export let href: string;
+</script>
+
+<NavLink {href} active={$page.url.pathname === href}>
+  <slot />
+</NavLink>
diff --git a/frontend/src/routes/edit/profile/+layout.svelte b/frontend/src/routes/edit/profile/+layout.svelte
index 1323b45..59a8f95 100644
--- a/frontend/src/routes/edit/profile/+layout.svelte
+++ b/frontend/src/routes/edit/profile/+layout.svelte
@@ -1,22 +1,14 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
-  import { page } from "$app/stores";
   import type { LayoutData } from "./$types";
-  import { Button, ButtonGroup, Icon, Nav, NavItem, NavLink } from "sveltestrap";
-  import type {
-    FieldEntry,
-    Field,
-    MeUser,
-    Pronoun,
-    PrideFlag,
-    CustomPreferences,
-    APIError,
-  } from "$lib/api/entities";
+  import { Button, ButtonGroup, Icon, Nav, NavItem } from "sveltestrap";
+  import type { MeUser, APIError } from "$lib/api/entities";
   import ErrorAlert from "$lib/components/ErrorAlert.svelte";
   import { addToast, delToast } from "$lib/toast";
   import { apiFetchClient } from "$lib/api/fetch";
   import { userStore } from "$lib/store";
+  import ActiveLink from "$lib/components/ActiveLink.svelte";
 
   export let data: LayoutData;
 
@@ -88,41 +80,13 @@
 {/if}
 
 <Nav tabs>
-  <NavItem>
-    <NavLink href="/edit/profile" active={$page.url.pathname === "/edit/profile"}
-      >Names and avatar</NavLink
-    >
-  </NavItem>
-  <NavItem>
-    <NavLink href="/edit/profile/bio" active={$page.url.pathname === "/edit/profile/bio"}
-      >Bio</NavLink
-    >
-  </NavItem>
-  <NavItem>
-    <NavLink href="/edit/profile/pronouns" active={$page.url.pathname === "/edit/profile/pronouns"}
-      >Pronouns</NavLink
-    >
-  </NavItem>
-  <NavItem>
-    <NavLink href="/edit/profile/fields" active={$page.url.pathname === "/edit/profile/fields"}
-      >Fields</NavLink
-    >
-  </NavItem>
-  <NavItem>
-    <NavLink href="/edit/profile/flags" active={$page.url.pathname === "/edit/profile/flags"}
-      >Flags</NavLink
-    >
-  </NavItem>
-  <NavItem>
-    <NavLink href="/edit/profile/links" active={$page.url.pathname === "/edit/profile/links"}
-      >Links</NavLink
-    >
-  </NavItem>
-  <NavItem>
-    <NavLink href="/edit/profile/other" active={$page.url.pathname === "/edit/profile/other"}
-      >Preferences & other</NavLink
-    >
-  </NavItem>
+  <NavItem><ActiveLink href="/edit/profile">Names and avatar</ActiveLink></NavItem>
+  <NavItem><ActiveLink href="/edit/profile/bio">Bio</ActiveLink></NavItem>
+  <NavItem><ActiveLink href="/edit/profile/pronouns">Pronouns</ActiveLink></NavItem>
+  <NavItem><ActiveLink href="/edit/profile/fields">Fields</ActiveLink></NavItem>
+  <NavItem><ActiveLink href="/edit/profile/flags">Flags</ActiveLink></NavItem>
+  <NavItem><ActiveLink href="/edit/profile/links">Links</ActiveLink></NavItem>
+  <NavItem><ActiveLink href="/edit/profile/other">Preferences & other</ActiveLink></NavItem>
 </Nav>
 
 <div class="mt-3">
diff --git a/frontend/src/routes/edit/profile/bio/+page.svelte b/frontend/src/routes/edit/profile/bio/+page.svelte
new file mode 100644
index 0000000..19c9c6f
--- /dev/null
+++ b/frontend/src/routes/edit/profile/bio/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+  import { MAX_DESCRIPTION_LENGTH, type MeUser } from "$lib/api/entities";
+  import { charCount, renderMarkdown } from "$lib/utils";
+  import MarkdownHelp from "../../MarkdownHelp.svelte";
+  import { Card, CardBody, CardHeader } from "sveltestrap";
+
+  const user = getContext<Writable<MeUser>>("user");
+</script>
+
+<div class="form">
+  <textarea class="form-control" style="height: 200px;" bind:value={$user.bio} />
+</div>
+<p class="text-muted mt-1">
+  Using {charCount($user.bio || "")}/{MAX_DESCRIPTION_LENGTH} characters
+</p>
+<p class="text-muted my-2">
+  <MarkdownHelp />
+</p>
+{#if $user.bio}
+  <hr />
+  <Card>
+    <CardHeader>Preview</CardHeader>
+    <CardBody>
+      {@html renderMarkdown($user.bio)}
+    </CardBody>
+  </Card>
+{/if}
diff --git a/frontend/src/routes/edit/profile/pronouns/+page.svelte b/frontend/src/routes/edit/profile/pronouns/+page.svelte
new file mode 100644
index 0000000..c3a33a3
--- /dev/null
+++ b/frontend/src/routes/edit/profile/pronouns/+page.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+  import type { MeUser } from "$lib/api/entities";
+  import { Button, Icon, Popover } from "sveltestrap";
+  import EditablePronouns from "../../EditablePronouns.svelte";
+  import IconButton from "$lib/components/IconButton.svelte";
+  import type { PageData } from "./$types";
+
+  export let data: PageData;
+
+  const user = getContext<Writable<MeUser>>("user");
+  let newPronouns = "";
+
+  const movePronoun = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == $user.pronouns.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = $user.pronouns[index];
+    $user.pronouns[index] = $user.pronouns[newIndex];
+    $user.pronouns[newIndex] = temp;
+    $user.pronouns = [...$user.pronouns];
+  };
+
+  const addPronouns = (event: Event) => {
+    event.preventDefault();
+
+    if (newPronouns in data.pronouns) {
+      const fullSet = data.pronouns[newPronouns];
+      $user.pronouns = [
+        ...$user.pronouns,
+        {
+          pronouns: fullSet.pronouns.join("/"),
+          display_text: fullSet.display || null,
+          status: "okay",
+        },
+      ];
+    } else {
+      $user.pronouns = [
+        ...$user.pronouns,
+        { pronouns: newPronouns, display_text: null, status: "okay" },
+      ];
+    }
+    newPronouns = "";
+  };
+
+  const removePronoun = (index: number) => {
+    $user.pronouns.splice(index, 1);
+    $user.pronouns = [...$user.pronouns];
+  };
+</script>
+
+{#each $user.pronouns as _, index}
+  <EditablePronouns
+    bind:pronoun={$user.pronouns[index]}
+    preferences={$user.custom_preferences}
+    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>

From 575aa01fa5adec24c9d4100579941b7a4c376a2b Mon Sep 17 00:00:00 2001
From: sam <sam@sleepycat.moe>
Date: Thu, 10 Aug 2023 18:09:10 +0200
Subject: [PATCH 04/10] add fields and flags to new edit page

---
 .../src/routes/edit/profile-old/+page.svelte  | 360 ------------------
 .../routes/edit/profile/fields/+page.svelte   |  51 +++
 .../routes/edit/profile/flags/+page.svelte    | 104 +++++
 3 files changed, 155 insertions(+), 360 deletions(-)
 create mode 100644 frontend/src/routes/edit/profile/fields/+page.svelte
 create mode 100644 frontend/src/routes/edit/profile/flags/+page.svelte

diff --git a/frontend/src/routes/edit/profile-old/+page.svelte b/frontend/src/routes/edit/profile-old/+page.svelte
index 8baa2d4..ea1648a 100644
--- a/frontend/src/routes/edit/profile-old/+page.svelte
+++ b/frontend/src/routes/edit/profile-old/+page.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
   import {
-    MAX_DESCRIPTION_LENGTH,
-    userAvatars,
     type APIError,
     type Field,
     type FieldEntry,
@@ -11,42 +9,25 @@
     type CustomPreferences,
     type PrideFlag,
   } from "$lib/api/entities";
-  import FallbackImage from "$lib/components/FallbackImage.svelte";
   import { userStore } from "$lib/store";
   import {
-    Alert,
     Button,
     ButtonGroup,
-    Card,
-    CardBody,
-    CardHeader,
     FormGroup,
     InputGroup,
     Icon,
     Input,
-    Popover,
     TabContent,
     TabPane,
-    InputGroupText,
   } from "sveltestrap";
-  import { encode } from "base64-arraybuffer";
   import { DateTime, FixedOffsetZone } from "luxon";
   import { apiFetchClient } from "$lib/api/fetch";
   import { PUBLIC_SHORT_BASE } from "$env/static/public";
   import IconButton from "$lib/components/IconButton.svelte";
-  import EditableField from "../EditableField.svelte";
-  import EditableName from "../EditableName.svelte";
-  import EditablePronouns from "../EditablePronouns.svelte";
   import ErrorAlert from "$lib/components/ErrorAlert.svelte";
   import { addToast, delToast } from "$lib/toast";
   import type { PageData, Snapshot } from "./$types";
-  import { charCount, renderMarkdown } from "$lib/utils";
-  import MarkdownHelp from "../MarkdownHelp.svelte";
-  import prettyBytes from "pretty-bytes";
   import CustomPreference from "./CustomPreference.svelte";
-  import FlagButton from "../FlagButton.svelte";
-
-  const MAX_AVATAR_BYTES = 1_000_000;
 
   export let data: PageData;
 
@@ -65,7 +46,6 @@
   let timezone = data.user.timezone;
 
   let avatar: string | null;
-  let avatar_files: FileList | null;
 
   let newName = "";
   let newPronouns = "";
@@ -103,7 +83,6 @@
     custom_preferences,
     timezone,
   );
-  $: getAvatar(avatar_files).then((b64) => (avatar = b64));
 
   const isModified = (
     user: MeUser,
@@ -193,27 +172,6 @@
       .every((entry) => entry);
   };
 
-  const getAvatar = async (list: FileList | null) => {
-    if (!list || list.length === 0) return null;
-    if (list[0].size > MAX_AVATAR_BYTES) {
-      addToast({
-        header: "Avatar too large",
-        body: `This avatar is too large, please resize it (maximum is ${prettyBytes(
-          MAX_AVATAR_BYTES,
-        )}, the file you tried to upload is ${prettyBytes(list[0].size)})`,
-      });
-      return null;
-    }
-
-    const buffer = await list[0].arrayBuffer();
-    const base64 = encode(buffer);
-
-    const uri = `data:${list[0].type};base64,${base64}`;
-    console.log(uri.slice(0, 128));
-
-    return uri;
-  };
-
   let currentTime = "";
   let displayTimezone = "";
   $: setTime(timezone);
@@ -232,39 +190,6 @@
     displayTimezone = zone.formatOffset(now.toUnixInteger(), "narrow");
   };
 
-  const moveName = (index: number, up: boolean) => {
-    if (up && index == 0) return;
-    if (!up && index == names.length - 1) return;
-
-    const newIndex = up ? index - 1 : index + 1;
-
-    const temp = names[index];
-    names[index] = names[newIndex];
-    names[newIndex] = temp;
-  };
-
-  const movePronoun = (index: number, up: boolean) => {
-    if (up && index == 0) return;
-    if (!up && index == pronouns.length - 1) return;
-
-    const newIndex = up ? index - 1 : index + 1;
-
-    const temp = pronouns[index];
-    pronouns[index] = pronouns[newIndex];
-    pronouns[newIndex] = temp;
-  };
-
-  const moveField = (index: number, up: boolean) => {
-    if (up && index == 0) return;
-    if (!up && index == fields.length - 1) return;
-
-    const newIndex = up ? index - 1 : index + 1;
-
-    const temp = fields[index];
-    fields[index] = fields[newIndex];
-    fields[newIndex] = temp;
-  };
-
   const moveLink = (index: number, up: boolean) => {
     if (up && index == 0) return;
     if (!up && index == links.length - 1) return;
@@ -276,52 +201,6 @@
     links[newIndex] = temp;
   };
 
-  const moveFlag = (index: number, up: boolean) => {
-    if (up && index == 0) return;
-    if (!up && index == flags.length - 1) return;
-
-    const newIndex = up ? index - 1 : index + 1;
-
-    const temp = flags[index];
-    flags[index] = flags[newIndex];
-    flags[newIndex] = temp;
-  };
-
-  const addFlag = (flag: PrideFlag) => {
-    flags = [...flags, flag];
-  };
-
-  const removeFlag = (index: number) => {
-    flags.splice(index, 1);
-    flags = [...flags];
-  };
-
-  const addName = (event: Event) => {
-    event.preventDefault();
-
-    names = [...names, { value: newName, status: "okay" }];
-    newName = "";
-  };
-
-  const addPronouns = (event: Event) => {
-    event.preventDefault();
-
-    if (newPronouns in data.pronouns) {
-      const fullSet = data.pronouns[newPronouns];
-      pronouns = [
-        ...pronouns,
-        {
-          pronouns: fullSet.pronouns.join("/"),
-          display_text: fullSet.display || null,
-          status: "okay",
-        },
-      ];
-    } else {
-      pronouns = [...pronouns, { pronouns: newPronouns, display_text: null, status: "okay" }];
-    }
-    newPronouns = "";
-  };
-
   const addLink = (event: Event) => {
     event.preventDefault();
 
@@ -342,26 +221,11 @@
     custom_preferences = custom_preferences;
   };
 
-  const removeName = (index: number) => {
-    names.splice(index, 1);
-    names = [...names];
-  };
-
-  const removePronoun = (index: number) => {
-    pronouns.splice(index, 1);
-    pronouns = [...pronouns];
-  };
-
   const removeLink = (index: number) => {
     links.splice(index, 1);
     links = [...links];
   };
 
-  const removeField = (index: number) => {
-    fields.splice(index, 1);
-    fields = [...fields];
-  };
-
   const removePreference = (id: string) => {
     delete custom_preferences[id];
     custom_preferences = custom_preferences;
@@ -511,230 +375,6 @@
 {/if}
 
 <TabContent>
-  <TabPane tabId="avatar" tab="Names and avatar" active>
-    <div class="row mt-3">
-      <div class="col-md">
-        <div class="row">
-          <div class="col-md text-center">
-            {#if avatar === ""}
-              <FallbackImage alt="Current avatar" urls={[]} width={200} />
-            {:else if avatar}
-              <img
-                width={200}
-                height={200}
-                src={avatar}
-                alt="New avatar"
-                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"
-            />
-            <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>
-              <!-- svelte-ignore a11y-invalid-attribute -->
-              <a href="" on:click={() => (avatar = "")}>Remove avatar</a>
-            </p>
-          </div>
-        </div>
-      </div>
-      <div class="col-md">
-        <FormGroup floating label="Username">
-          <Input bind:value={data.user.name} readonly />
-          <p class="text-muted mt-1">
-            <Icon name="info-circle-fill" aria-hidden />
-            You can change your username in
-            <a href="/settings" class="text-reset">your settings</a>.
-          </p>
-        </FormGroup>
-        <FormGroup floating label="Display name">
-          <Input bind:value={display_name} />
-          <p class="text-muted mt-1">
-            <Icon name="info-circle-fill" aria-hidden />
-            Your display name is used in page titles and as a header.
-          </p>
-        </FormGroup>
-      </div>
-    </div>
-    <div>
-      <h4>Names</h4>
-      {#each names as _, index}
-        <EditableName
-          bind:value={names[index].value}
-          bind:status={names[index].status}
-          preferences={custom_preferences}
-          moveUp={() => moveName(index, true)}
-          moveDown={() => moveName(index, false)}
-          remove={() => removeName(index)}
-        />
-      {/each}
-      <form class="input-group m-1" on:submit={addName}>
-        <input type="text" class="form-control" bind:value={newName} />
-        <IconButton type="submit" color="success" icon="plus" tooltip="Add name" />
-      </form>
-    </div>
-  </TabPane>
-  <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 {charCount(bio)}/{MAX_DESCRIPTION_LENGTH} characters
-      </p>
-      <p class="text-muted my-2">
-        <MarkdownHelp />
-      </p>
-      {#if bio}
-        <hr />
-        <Card>
-          <CardHeader>Preview</CardHeader>
-          <CardBody>
-            {@html renderMarkdown(bio)}
-          </CardBody>
-        </Card>
-      {/if}
-    </div>
-  </TabPane>
-  <TabPane tabId="pronouns" tab="Pronouns">
-    <div class="mt-3">
-      <div class="col-md">
-        {#each pronouns as _, index}
-          <EditablePronouns
-            bind:pronoun={pronouns[index]}
-            preferences={custom_preferences}
-            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]}
-            preferences={custom_preferences}
-            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="flags" tab="Flags">
-    <div class="mt-3">
-      {#each flags as _, index}
-        <ButtonGroup class="m-1">
-          <IconButton
-            icon="chevron-left"
-            color="secondary"
-            tooltip="Move flag to the left"
-            click={() => moveFlag(index, true)}
-          />
-          <IconButton
-            icon="chevron-right"
-            color="secondary"
-            tooltip="Move flag to the right"
-            click={() => moveFlag(index, false)}
-          />
-          <FlagButton
-            flag={flags[index]}
-            tooltip="Remove this flag from your profile"
-            on:click={() => removeFlag(index)}
-          />
-        </ButtonGroup>
-      {/each}
-    </div>
-    <hr />
-    <div class="row">
-      <div class="col-md">
-        <Input
-          placeholder="Filter flags"
-          bind:value={flagSearch}
-          disabled={data.flags.length === 0}
-        />
-        <div class="p-2">
-          {#each filteredFlags as flag (flag.id)}
-            <FlagButton
-              {flag}
-              tooltip="Add this flag to your profile"
-              on:click={() => addFlag(flag)}
-            />
-          {:else}
-            {#if data.flags.length === 0}
-              You haven't uploaded any flags yet.
-            {:else}
-              There are no flags matching your search <strong>{flagSearch}</strong>.
-            {/if}
-          {/each}
-        </div>
-      </div>
-      <div class="col-md">
-        <Alert color="secondary" fade={false}>
-          {#if data.flags.length === 0}
-            <p><strong>Why can't I see any flags?</strong></p>
-            <p>
-              There are thousands of pride flags, and it would be impossible to bundle all of them
-              by default. Many labels also have multiple different flags that are favoured by
-              different people. Because of this, there are no flags available by default--instead,
-              you can upload flags in your <a href="/settings/flags">settings</a>. Your main profile
-              and your member profiles can all have different flags.
-            </p>
-          {:else}
-            To upload and delete flags, go to your <a href="/settings/flags">settings</a>.
-          {/if}
-        </Alert>
-      </div>
-    </div>
-  </TabPane>
   <TabPane tabId="links" tab="Links">
     <div class="mt-3">
       {#each links as _, index}
diff --git a/frontend/src/routes/edit/profile/fields/+page.svelte b/frontend/src/routes/edit/profile/fields/+page.svelte
new file mode 100644
index 0000000..8f5e2de
--- /dev/null
+++ b/frontend/src/routes/edit/profile/fields/+page.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+  import { Alert, Button, Icon } from "sveltestrap";
+
+  import type { MeUser } from "$lib/api/entities";
+  import EditableField from "../../EditableField.svelte";
+
+  const user = getContext<Writable<MeUser>>("user");
+
+  const moveField = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == $user.fields.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = $user.fields[index];
+    $user.fields[index] = $user.fields[newIndex];
+    $user.fields[newIndex] = temp;
+    $user.fields = [...$user.fields];
+  };
+
+  const removeField = (index: number) => {
+    $user.fields.splice(index, 1);
+    $user.fields = [...$user.fields];
+  };
+</script>
+
+{#if $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 $user.fields as _, index}
+      <EditableField
+        bind:field={$user.fields[index]}
+        preferences={$user.custom_preferences}
+        deleteField={() => removeField(index)}
+        moveField={(up) => moveField(index, up)}
+      />
+    {/each}
+  </div>
+</div>
+<div>
+  <Button on:click={() => ($user.fields = [...$user.fields, { name: "New field", entries: [] }])}>
+    <Icon name="plus" aria-hidden /> Add new field
+  </Button>
+</div>
diff --git a/frontend/src/routes/edit/profile/flags/+page.svelte b/frontend/src/routes/edit/profile/flags/+page.svelte
new file mode 100644
index 0000000..d62122a
--- /dev/null
+++ b/frontend/src/routes/edit/profile/flags/+page.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+  import { Alert, ButtonGroup, Input } from "sveltestrap";
+  import type { PageData } from "./$types";
+
+  import type { MeUser, PrideFlag } from "$lib/api/entities";
+  import IconButton from "$lib/components/IconButton.svelte";
+  import FlagButton from "../../FlagButton.svelte";
+
+  export let data: PageData;
+
+  const user = getContext<Writable<MeUser>>("user");
+
+  let flagSearch = "";
+  let filteredFlags: PrideFlag[];
+  $: filteredFlags = filterFlags(flagSearch, data.flags);
+
+  const filterFlags = (search: string, flags: PrideFlag[]) => {
+    return (
+      search
+        ? flags.filter((flag) => flag.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
+        : flags
+    ).slice(0, 25);
+  };
+
+  const addFlag = (flag: PrideFlag) => {
+    $user.flags = [...$user.flags, flag];
+  };
+
+  const moveFlag = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == $user.flags.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = $user.flags[index];
+    $user.flags[index] = $user.flags[newIndex];
+    $user.flags[newIndex] = temp;
+    $user.flags = [...$user.flags];
+  };
+
+  const removeFlag = (index: number) => {
+    $user.flags.splice(index, 1);
+    $user.flags = [...$user.flags];
+  };
+</script>
+
+<div>
+  {#each $user.flags as _, index}
+    <ButtonGroup class="m-1">
+      <IconButton
+        icon="chevron-left"
+        color="secondary"
+        tooltip="Move flag to the left"
+        click={() => moveFlag(index, true)}
+      />
+      <IconButton
+        icon="chevron-right"
+        color="secondary"
+        tooltip="Move flag to the right"
+        click={() => moveFlag(index, false)}
+      />
+      <FlagButton
+        flag={$user.flags[index]}
+        tooltip="Remove this flag from your profile"
+        on:click={() => removeFlag(index)}
+      />
+    </ButtonGroup>
+  {/each}
+</div>
+<hr />
+<div class="row">
+  <div class="col-md">
+    <Input placeholder="Filter flags" bind:value={flagSearch} disabled={data.flags.length === 0} />
+    <div class="p-2">
+      {#each filteredFlags as flag (flag.id)}
+        <FlagButton {flag} tooltip="Add this flag to your profile" on:click={() => addFlag(flag)} />
+      {:else}
+        {#if data.flags.length === 0}
+          You haven't uploaded any flags yet.
+        {:else}
+          There are no flags matching your search <strong>{flagSearch}</strong>.
+        {/if}
+      {/each}
+    </div>
+  </div>
+  <div class="col-md">
+    <Alert color="secondary" fade={false}>
+      {#if data.flags.length === 0}
+        <p><strong>Why can't I see any flags?</strong></p>
+        <p>
+          There are thousands of pride flags, and it would be impossible to bundle all of them by
+          default. Many labels also have multiple different flags that are favoured by different
+          people. Because of this, there are no flags available by default--instead, you can upload
+          flags in your <a href="/settings/flags">settings</a>. Your main profile and your member
+          profiles can all have different flags.
+        </p>
+      {:else}
+        To upload and delete flags, go to your <a href="/settings/flags">settings</a>.
+      {/if}
+    </Alert>
+  </div>
+</div>

From 785f94dd9fc21b379cd1b03a6f15744aa809d5fe Mon Sep 17 00:00:00 2001
From: sam <sam@sleepycat.moe>
Date: Thu, 10 Aug 2023 20:48:29 +0200
Subject: [PATCH 05/10] split entire edit user profile page

---
 .../components}/edit/EditableField.svelte     |   0
 .../components}/edit/EditableName.svelte      |   0
 .../components}/edit/EditablePronouns.svelte  |   0
 .../components}/edit/FieldEntry.svelte        |   0
 .../components}/edit/FlagButton.svelte        |   0
 .../components}/edit/MarkdownHelp.svelte      |   0
 .../src/routes/edit/member/[id]/+page.svelte  |  10 +-
 .../src/routes/edit/profile-old/+page.svelte  | 502 ------------------
 frontend/src/routes/edit/profile-old/+page.ts |  23 -
 frontend/src/routes/edit/profile/+page.svelte |   2 +-
 .../src/routes/edit/profile/bio/+page.svelte  |   2 +-
 .../routes/edit/profile/fields/+page.svelte   |   2 +-
 .../routes/edit/profile/flags/+page.svelte    |   2 +-
 .../routes/edit/profile/links/+page.svelte    |  63 +++
 .../routes/edit/profile/other/+page.svelte    | 180 +++++++
 .../other}/CustomPreference.svelte            |   0
 .../other}/IconPicker.svelte                  |   2 +-
 .../routes/edit/profile/pronouns/+page.svelte |   2 +-
 18 files changed, 254 insertions(+), 536 deletions(-)
 rename frontend/src/{routes => lib/components}/edit/EditableField.svelte (100%)
 rename frontend/src/{routes => lib/components}/edit/EditableName.svelte (100%)
 rename frontend/src/{routes => lib/components}/edit/EditablePronouns.svelte (100%)
 rename frontend/src/{routes => lib/components}/edit/FieldEntry.svelte (100%)
 rename frontend/src/{routes => lib/components}/edit/FlagButton.svelte (100%)
 rename frontend/src/{routes => lib/components}/edit/MarkdownHelp.svelte (100%)
 delete mode 100644 frontend/src/routes/edit/profile-old/+page.svelte
 delete mode 100644 frontend/src/routes/edit/profile-old/+page.ts
 create mode 100644 frontend/src/routes/edit/profile/links/+page.svelte
 create mode 100644 frontend/src/routes/edit/profile/other/+page.svelte
 rename frontend/src/routes/edit/{profile-old => profile/other}/CustomPreference.svelte (100%)
 rename frontend/src/routes/edit/{profile-old => profile/other}/IconPicker.svelte (97%)

diff --git a/frontend/src/routes/edit/EditableField.svelte b/frontend/src/lib/components/edit/EditableField.svelte
similarity index 100%
rename from frontend/src/routes/edit/EditableField.svelte
rename to frontend/src/lib/components/edit/EditableField.svelte
diff --git a/frontend/src/routes/edit/EditableName.svelte b/frontend/src/lib/components/edit/EditableName.svelte
similarity index 100%
rename from frontend/src/routes/edit/EditableName.svelte
rename to frontend/src/lib/components/edit/EditableName.svelte
diff --git a/frontend/src/routes/edit/EditablePronouns.svelte b/frontend/src/lib/components/edit/EditablePronouns.svelte
similarity index 100%
rename from frontend/src/routes/edit/EditablePronouns.svelte
rename to frontend/src/lib/components/edit/EditablePronouns.svelte
diff --git a/frontend/src/routes/edit/FieldEntry.svelte b/frontend/src/lib/components/edit/FieldEntry.svelte
similarity index 100%
rename from frontend/src/routes/edit/FieldEntry.svelte
rename to frontend/src/lib/components/edit/FieldEntry.svelte
diff --git a/frontend/src/routes/edit/FlagButton.svelte b/frontend/src/lib/components/edit/FlagButton.svelte
similarity index 100%
rename from frontend/src/routes/edit/FlagButton.svelte
rename to frontend/src/lib/components/edit/FlagButton.svelte
diff --git a/frontend/src/routes/edit/MarkdownHelp.svelte b/frontend/src/lib/components/edit/MarkdownHelp.svelte
similarity index 100%
rename from frontend/src/routes/edit/MarkdownHelp.svelte
rename to frontend/src/lib/components/edit/MarkdownHelp.svelte
diff --git a/frontend/src/routes/edit/member/[id]/+page.svelte b/frontend/src/routes/edit/member/[id]/+page.svelte
index 1ab1819..3547165 100644
--- a/frontend/src/routes/edit/member/[id]/+page.svelte
+++ b/frontend/src/routes/edit/member/[id]/+page.svelte
@@ -34,16 +34,16 @@
   import { PUBLIC_SHORT_BASE } from "$env/static/public";
   import { apiFetchClient, fastFetchClient } 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";
+  import EditableField from "$lib/components/edit/EditableField.svelte";
+  import EditableName from "$lib/components/edit/EditableName.svelte";
+  import EditablePronouns from "$lib/components/edit/EditablePronouns.svelte";
   import ErrorAlert from "$lib/components/ErrorAlert.svelte";
   import type { PageData, Snapshot } from "./$types";
   import { addToast, delToast } from "$lib/toast";
   import { memberNameRegex } from "$lib/api/regex";
   import { charCount, renderMarkdown } from "$lib/utils";
-  import MarkdownHelp from "../../MarkdownHelp.svelte";
-  import FlagButton from "../../FlagButton.svelte";
+  import MarkdownHelp from "$lib/components/edit/MarkdownHelp.svelte";
+  import FlagButton from "$lib/components/edit/FlagButton.svelte";
 
   const MAX_AVATAR_BYTES = 1_000_000;
 
diff --git a/frontend/src/routes/edit/profile-old/+page.svelte b/frontend/src/routes/edit/profile-old/+page.svelte
deleted file mode 100644
index ea1648a..0000000
--- a/frontend/src/routes/edit/profile-old/+page.svelte
+++ /dev/null
@@ -1,502 +0,0 @@
-<script lang="ts">
-  import {
-    type APIError,
-    type Field,
-    type FieldEntry,
-    type MeUser,
-    type Pronoun,
-    PreferenceSize,
-    type CustomPreferences,
-    type PrideFlag,
-  } from "$lib/api/entities";
-  import { userStore } from "$lib/store";
-  import {
-    Button,
-    ButtonGroup,
-    FormGroup,
-    InputGroup,
-    Icon,
-    Input,
-    TabContent,
-    TabPane,
-  } from "sveltestrap";
-  import { DateTime, FixedOffsetZone } from "luxon";
-  import { apiFetchClient } from "$lib/api/fetch";
-  import { PUBLIC_SHORT_BASE } from "$env/static/public";
-  import IconButton from "$lib/components/IconButton.svelte";
-  import ErrorAlert from "$lib/components/ErrorAlert.svelte";
-  import { addToast, delToast } from "$lib/toast";
-  import type { PageData, Snapshot } from "./$types";
-  import CustomPreference from "./CustomPreference.svelte";
-
-  export let data: PageData;
-
-  let error: APIError | null = null;
-
-  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 flags: PrideFlag[] = window.structuredClone(data.user.flags);
-  let list_private = data.user.list_private;
-  let custom_preferences = window.structuredClone(data.user.custom_preferences);
-  let timezone = data.user.timezone;
-
-  let avatar: string | null;
-
-  let newName = "";
-  let newPronouns = "";
-  let newLink = "";
-
-  let flagSearch = "";
-  let filteredFlags: PrideFlag[];
-  $: filteredFlags = filterFlags(flagSearch, data.flags);
-
-  const filterFlags = (search: string, flags: PrideFlag[]) => {
-    return (
-      search
-        ? flags.filter((flag) => flag.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
-        : flags
-    ).slice(0, 25);
-  };
-
-  let preferenceIds: string[];
-  $: preferenceIds = Object.keys(custom_preferences);
-
-  let modified = false;
-
-  $: modified = isModified(
-    data.user,
-    bio,
-    display_name,
-    links,
-    names,
-    pronouns,
-    fields,
-    flags,
-    avatar,
-    member_title,
-    list_private,
-    custom_preferences,
-    timezone,
-  );
-
-  const isModified = (
-    user: MeUser,
-    bio: string,
-    display_name: string,
-    links: string[],
-    names: FieldEntry[],
-    pronouns: Pronoun[],
-    fields: Field[],
-    flags: PrideFlag[],
-    avatar: string | null,
-    member_title: string,
-    list_private: boolean,
-    custom_preferences: CustomPreferences,
-    timezone: string | null,
-  ) => {
-    if (bio !== (user.bio || "")) return true;
-    if (display_name !== (user.display_name || "")) return true;
-    if (member_title !== (user.member_title || "")) return true;
-    if (!linksEqual(links, user.links)) return true;
-    if (!fieldsEqual(fields, user.fields)) return true;
-    if (!flagsEqual(flags, user.flags)) return true;
-    if (!namesEqual(names, user.names)) return true;
-    if (!pronounsEqual(pronouns, user.pronouns)) return true;
-    if (!customPreferencesEqual(custom_preferences, user.custom_preferences)) return true;
-    if (avatar !== null) return true;
-    if (list_private !== user.list_private) return true;
-    if (timezone !== user.timezone) return true;
-
-    return false;
-  };
-
-  const fieldsEqual = (arr1: Field[], arr2: Field[]) => {
-    if (arr1?.length !== arr2?.length) return false;
-    if (!arr1.every((_, i) => arr1[i].entries.length === arr2[i].entries.length)) return false;
-    if (!arr1.every((_, i) => arr1[i].name === arr2[i].name)) return false;
-
-    return arr1.every((_, i) =>
-      arr1[i].entries.every(
-        (entry, j) =>
-          entry.value === arr2[i].entries[j].value && entry.status === arr2[i].entries[j].status,
-      ),
-    );
-  };
-
-  const namesEqual = (arr1: FieldEntry[], arr2: FieldEntry[]) => {
-    if (arr1?.length !== arr2?.length) return false;
-    if (!arr1.every((_, i) => arr1[i].value === arr2[i].value)) return false;
-    if (!arr1.every((_, i) => arr1[i].status === arr2[i].status)) return false;
-
-    return true;
-  };
-
-  const pronounsEqual = (arr1: Pronoun[], arr2: Pronoun[]) => {
-    if (arr1?.length !== arr2?.length) return false;
-    if (!arr1.every((_, i) => arr1[i].pronouns === arr2[i].pronouns)) return false;
-    if (!arr1.every((_, i) => arr1[i].display_text === arr2[i].display_text)) return false;
-    if (!arr1.every((_, i) => arr1[i].status === arr2[i].status)) return false;
-
-    return true;
-  };
-
-  const linksEqual = (arr1: string[], arr2: string[]) => {
-    if (arr1.length !== arr2.length) return false;
-    return arr1.every((_, i) => arr1[i] === arr2[i]);
-  };
-
-  const flagsEqual = (arr1: PrideFlag[], arr2: PrideFlag[]) => {
-    if (arr1.length !== arr2.length) return false;
-    return arr1.every((_, i) => arr1[i].id === arr2[i].id);
-  };
-
-  const customPreferencesEqual = (obj1: CustomPreferences, obj2: CustomPreferences) => {
-    if (Object.keys(obj2).some((key) => !(key in obj1))) return false;
-
-    return Object.keys(obj1)
-      .map((key) => {
-        if (!(key in obj2)) return false;
-        return (
-          obj1[key].icon === obj2[key].icon &&
-          obj1[key].tooltip === obj2[key].tooltip &&
-          obj1[key].favourite === obj2[key].favourite &&
-          obj1[key].muted === obj2[key].muted &&
-          obj1[key].size === obj2[key].size
-        );
-      })
-      .every((entry) => entry);
-  };
-
-  let currentTime = "";
-  let displayTimezone = "";
-  $: setTime(timezone);
-
-  const setTime = (timezone: string | null) => {
-    if (!timezone) {
-      currentTime = "";
-      displayTimezone = "";
-      return;
-    }
-
-    const offset = DateTime.now().setZone(timezone).offset;
-    const zone = FixedOffsetZone.instance(offset);
-
-    currentTime = now.setZone(zone).toLocaleString(DateTime.TIME_SIMPLE);
-    displayTimezone = zone.formatOffset(now.toUnixInteger(), "narrow");
-  };
-
-  const moveLink = (index: number, up: boolean) => {
-    if (up && index == 0) return;
-    if (!up && index == links.length - 1) return;
-
-    const newIndex = up ? index - 1 : index + 1;
-
-    const temp = links[index];
-    links[index] = links[newIndex];
-    links[newIndex] = temp;
-  };
-
-  const addLink = (event: Event) => {
-    event.preventDefault();
-
-    links = [...links, newLink];
-    newLink = "";
-  };
-
-  const addPreference = () => {
-    const id = crypto.randomUUID();
-
-    custom_preferences[id] = {
-      icon: "question",
-      tooltip: "New preference",
-      size: PreferenceSize.Normal,
-      muted: false,
-      favourite: false,
-    };
-    custom_preferences = custom_preferences;
-  };
-
-  const removeLink = (index: number) => {
-    links.splice(index, 1);
-    links = [...links];
-  };
-
-  const removePreference = (id: string) => {
-    delete custom_preferences[id];
-    custom_preferences = custom_preferences;
-  };
-
-  const updateUser = async () => {
-    const toastId = addToast({
-      header: "Saving changes",
-      body: "Saving changes, please wait...",
-      duration: -1,
-    });
-
-    try {
-      const resp = await apiFetchClient<MeUser>("/users/@me", "PATCH", {
-        display_name,
-        avatar,
-        bio,
-        links,
-        names,
-        pronouns,
-        fields,
-        member_title,
-        list_private,
-        timezone: timezone || "",
-        custom_preferences,
-        flags: flags.map((flag) => flag.id),
-      });
-
-      data.user = resp;
-      custom_preferences = resp.custom_preferences;
-      userStore.set(resp);
-      localStorage.setItem("pronouns-user", JSON.stringify(resp));
-
-      addToast({ header: "Success", body: "Successfully saved changes!" });
-
-      avatar = null;
-      error = null;
-    } catch (e) {
-      error = e as APIError;
-    } finally {
-      delToast(toastId);
-    }
-  };
-
-  const now = DateTime.now().toLocal();
-  let canRerollSid: boolean;
-  $: canRerollSid =
-    now.diff(DateTime.fromISO(data.user.last_sid_reroll).toLocal(), "hours").hours >= 1;
-
-  const rerollSid = async () => {
-    try {
-      const resp = await apiFetchClient<MeUser>("/users/@me/reroll");
-      addToast({ header: "Success", body: "Rerolled short ID!" });
-      error = null;
-      data.user.sid = resp.sid;
-    } catch (e) {
-      error = e as APIError;
-    }
-  };
-
-  const copyShortURL = async () => {
-    const url = `${PUBLIC_SHORT_BASE}/${data.user.sid}`;
-    await navigator.clipboard.writeText(url);
-    addToast({ body: "Copied the short link to your clipboard!", duration: 2000 });
-  };
-
-  const detectTimezone = () => {
-    timezone = DateTime.local().zoneName;
-  };
-
-  interface SnapshotData {
-    bio: string;
-    display_name: string;
-    member_title: string;
-    links: string[];
-    names: FieldEntry[];
-    pronouns: Pronoun[];
-    fields: Field[];
-    flags: PrideFlag[];
-    list_private: boolean;
-    timezone: string | null;
-    custom_preferences: CustomPreferences;
-
-    avatar: string | null;
-    newName: string;
-    newPronouns: string;
-    newLink: string;
-  }
-
-  export const snapshot: Snapshot<SnapshotData> = {
-    capture: () => ({
-      bio,
-      display_name,
-      member_title,
-      links,
-      names,
-      pronouns,
-      fields,
-      flags,
-      list_private,
-      timezone,
-      custom_preferences,
-      avatar,
-      newName,
-      newPronouns,
-      newLink,
-    }),
-    restore: (value) => {
-      bio = value.bio;
-      display_name = value.display_name;
-      member_title = value.member_title;
-      links = value.links;
-      names = value.names;
-      pronouns = value.pronouns;
-      fields = value.fields;
-      flags = value.flags;
-      list_private = value.list_private;
-      timezone = value.timezone;
-      custom_preferences = value.custom_preferences;
-      avatar = value.avatar;
-      newName = value.newName;
-      newPronouns = value.newPronouns;
-      newLink = value.newLink;
-    },
-  };
-</script>
-
-<svelte:head>
-  <title>Edit profile - pronouns.cc</title>
-</svelte:head>
-
-<h1>
-  Edit profile
-  <ButtonGroup>
-    <Button color="secondary" href="/@{data.user.name}">
-      <Icon name="chevron-left" />
-      Back to your profile
-    </Button>
-    {#if modified}
-      <Button color="success" on:click={() => updateUser()}>Save changes</Button>
-    {/if}
-  </ButtonGroup>
-</h1>
-
-{#if error}
-  <ErrorAlert {error} />
-{/if}
-
-<TabContent>
-  <TabPane tabId="links" tab="Links">
-    <div class="mt-3">
-      {#each links as _, index}
-        <div class="input-group m-1">
-          <IconButton
-            icon="chevron-up"
-            color="secondary"
-            tooltip="Move link up"
-            click={() => moveLink(index, true)}
-          />
-          <IconButton
-            icon="chevron-down"
-            color="secondary"
-            tooltip="Move link down"
-            click={() => moveLink(index, false)}
-          />
-          <input type="text" class="form-control" bind:value={links[index]} />
-          <IconButton
-            color="danger"
-            icon="trash3"
-            tooltip="Remove link"
-            click={() => removeLink(index)}
-          />
-        </div>
-      {/each}
-      <form class="input-group m-1" on:submit={addLink}>
-        <input type="text" class="form-control" bind:value={newLink} />
-        <IconButton type="submit" color="success" icon="plus" tooltip="Add link" />
-      </form>
-    </div>
-  </TabPane>
-  <TabPane tabId="other" tab="Preferences & other">
-    <div class="row mt-3">
-      <div class="col-md">
-        <FormGroup floating label={'"Members" header text'}>
-          <Input bind:value={member_title} placeholder="Members" />
-          <p class="text-muted mt-1">
-            <Icon name="info-circle-fill" aria-hidden />
-            This is the text used for the "Members" heading. If you leave it blank, the default text
-            will be used.
-          </p>
-        </FormGroup>
-        {#if PUBLIC_SHORT_BASE}
-          <hr />
-          <p>
-            Current short ID: <code>{data.user.sid}</code>
-            <ButtonGroup class="mb-1">
-              <Button color="secondary" disabled={!canRerollSid} on:click={() => rerollSid()}
-                >Reroll short ID</Button
-              >
-              <IconButton
-                icon="link-45deg"
-                tooltip="Copy short link"
-                color="secondary"
-                click={copyShortURL}
-              />
-            </ButtonGroup>
-            <br />
-            <span class="text-muted">
-              <Icon name="info-circle-fill" aria-hidden />
-              This ID is used in <code>prns.cc</code> links. You can reroll one short ID every hour (shared
-              between your main profile and all members) by pressing the button above.
-            </span>
-          </p>
-        {/if}
-      </div>
-      <div class="col-md">
-        <div class="form-check">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            bind:checked={list_private}
-            id="listPrivate"
-          />
-          <label class="form-check-label" for="listPrivate">Hide member list</label>
-        </div>
-        <p class="text-muted mt-1">
-          <Icon name="info-circle-fill" aria-hidden />
-          This only hides your member <em>list</em>.
-          <strong>
-            Your members will still be visible to anyone at
-            <code class="text-nowrap">pronouns.cc/@{data.user.name}/[member-name]</code>.
-          </strong>
-        </p>
-        <hr />
-        <div class="m-1">
-          <p class="mt-1 my-2">
-            You can optionally set your timezone, which will show your current local time on your
-            profile.
-          </p>
-          <InputGroup>
-            <Button on:click={detectTimezone}>Detect timezone</Button>
-            <Input disabled value={timezone !== null ? timezone : "Unset"} />
-            <Button on:click={() => (timezone = null)}>Reset</Button>
-          </InputGroup>
-          <p class="mt-2">
-            {#if timezone}
-              This will show up on your profile like this:
-              <Icon name="clock" aria-hidden />
-              {currentTime} <span class="text-body-secondary">(UTC{displayTimezone})</span>
-              <br />
-            {/if}
-            <span class="text-muted">
-              Your timezone is never shared directly, only the difference between UTC and your
-              current timezone is.
-            </span>
-          </p>
-        </div>
-      </div>
-    </div>
-    <div>
-      <h3>
-        Preferences <Button on:click={addPreference} color="success"
-          ><Icon name="plus" aria-hidden /> Add new</Button
-        >
-      </h3>
-      {#each preferenceIds as id}
-        <CustomPreference
-          bind:preference={custom_preferences[id]}
-          remove={() => removePreference(id)}
-        />
-      {/each}
-    </div>
-  </TabPane>
-</TabContent>
diff --git a/frontend/src/routes/edit/profile-old/+page.ts b/frontend/src/routes/edit/profile-old/+page.ts
deleted file mode 100644
index 894eb83..0000000
--- a/frontend/src/routes/edit/profile-old/+page.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { PrideFlag, APIError, MeUser, PronounsJson } from "$lib/api/entities";
-import { apiFetchClient } from "$lib/api/fetch";
-import { error } from "@sveltejs/kit";
-
-import pronounsRaw from "$lib/pronouns.json";
-const pronouns = pronounsRaw as PronounsJson;
-
-export const ssr = false;
-
-export const load = async () => {
-  try {
-    const user = await apiFetchClient<MeUser>(`/users/@me`);
-    const flags = await apiFetchClient<PrideFlag[]>("/users/@me/flags");
-
-    return {
-      user,
-      pronouns: pronouns.autocomplete,
-      flags,
-    };
-  } catch (e) {
-    throw error((e as APIError).code, (e as APIError).message);
-  }
-};
diff --git a/frontend/src/routes/edit/profile/+page.svelte b/frontend/src/routes/edit/profile/+page.svelte
index 441d0ad..e727633 100644
--- a/frontend/src/routes/edit/profile/+page.svelte
+++ b/frontend/src/routes/edit/profile/+page.svelte
@@ -6,7 +6,7 @@
   import { FormGroup, Icon, Input } from "sveltestrap";
   import { userAvatars, type MeUser } from "$lib/api/entities";
   import FallbackImage from "$lib/components/FallbackImage.svelte";
-  import EditableName from "../EditableName.svelte";
+  import EditableName from "$lib/components/edit/EditableName.svelte";
   import { addToast } from "$lib/toast";
   import IconButton from "$lib/components/IconButton.svelte";
 
diff --git a/frontend/src/routes/edit/profile/bio/+page.svelte b/frontend/src/routes/edit/profile/bio/+page.svelte
index 19c9c6f..2cbbf38 100644
--- a/frontend/src/routes/edit/profile/bio/+page.svelte
+++ b/frontend/src/routes/edit/profile/bio/+page.svelte
@@ -3,7 +3,7 @@
   import type { Writable } from "svelte/store";
   import { MAX_DESCRIPTION_LENGTH, type MeUser } from "$lib/api/entities";
   import { charCount, renderMarkdown } from "$lib/utils";
-  import MarkdownHelp from "../../MarkdownHelp.svelte";
+  import MarkdownHelp from "$lib/components/edit/MarkdownHelp.svelte";
   import { Card, CardBody, CardHeader } from "sveltestrap";
 
   const user = getContext<Writable<MeUser>>("user");
diff --git a/frontend/src/routes/edit/profile/fields/+page.svelte b/frontend/src/routes/edit/profile/fields/+page.svelte
index 8f5e2de..c08f339 100644
--- a/frontend/src/routes/edit/profile/fields/+page.svelte
+++ b/frontend/src/routes/edit/profile/fields/+page.svelte
@@ -4,7 +4,7 @@
   import { Alert, Button, Icon } from "sveltestrap";
 
   import type { MeUser } from "$lib/api/entities";
-  import EditableField from "../../EditableField.svelte";
+  import EditableField from "$lib/components/edit/EditableField.svelte";
 
   const user = getContext<Writable<MeUser>>("user");
 
diff --git a/frontend/src/routes/edit/profile/flags/+page.svelte b/frontend/src/routes/edit/profile/flags/+page.svelte
index d62122a..f71a6dc 100644
--- a/frontend/src/routes/edit/profile/flags/+page.svelte
+++ b/frontend/src/routes/edit/profile/flags/+page.svelte
@@ -6,7 +6,7 @@
 
   import type { MeUser, PrideFlag } from "$lib/api/entities";
   import IconButton from "$lib/components/IconButton.svelte";
-  import FlagButton from "../../FlagButton.svelte";
+  import FlagButton from "$lib/components/edit/FlagButton.svelte";
 
   export let data: PageData;
 
diff --git a/frontend/src/routes/edit/profile/links/+page.svelte b/frontend/src/routes/edit/profile/links/+page.svelte
new file mode 100644
index 0000000..9f2a658
--- /dev/null
+++ b/frontend/src/routes/edit/profile/links/+page.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+
+  import type { MeUser } from "$lib/api/entities";
+  import IconButton from "$lib/components/IconButton.svelte";
+
+  const user = getContext<Writable<MeUser>>("user");
+
+  let newLink = "";
+
+  const addLink = (event: Event) => {
+    event.preventDefault();
+
+    $user.links = [...$user.links, newLink];
+    newLink = "";
+  };
+
+  const removeLink = (index: number) => {
+    $user.links.splice(index, 1);
+    $user.links = [...$user.links];
+  };
+
+  const moveLink = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == $user.links.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = $user.links[index];
+    $user.links[index] = $user.links[newIndex];
+    $user.links[newIndex] = temp;
+    $user.links = [...$user.links];
+  };
+</script>
+
+{#each $user.links as _, index}
+  <div class="input-group m-1">
+    <IconButton
+      icon="chevron-up"
+      color="secondary"
+      tooltip="Move link up"
+      click={() => moveLink(index, true)}
+    />
+    <IconButton
+      icon="chevron-down"
+      color="secondary"
+      tooltip="Move link down"
+      click={() => moveLink(index, false)}
+    />
+    <input type="text" class="form-control" bind:value={$user.links[index]} />
+    <IconButton
+      color="danger"
+      icon="trash3"
+      tooltip="Remove link"
+      click={() => removeLink(index)}
+    />
+  </div>
+{/each}
+<form class="input-group m-1" on:submit={addLink}>
+  <input type="text" class="form-control" bind:value={newLink} />
+  <IconButton type="submit" color="success" icon="plus" tooltip="Add link" />
+</form>
diff --git a/frontend/src/routes/edit/profile/other/+page.svelte b/frontend/src/routes/edit/profile/other/+page.svelte
new file mode 100644
index 0000000..b653010
--- /dev/null
+++ b/frontend/src/routes/edit/profile/other/+page.svelte
@@ -0,0 +1,180 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+
+  import { PreferenceSize, type APIError, type MeUser } from "$lib/api/entities";
+  import IconButton from "$lib/components/IconButton.svelte";
+  import { Button, ButtonGroup, FormGroup, Icon, Input, InputGroup } from "sveltestrap";
+  import { PUBLIC_SHORT_BASE } from "$env/static/public";
+  import CustomPreference from "./CustomPreference.svelte";
+  import { DateTime, FixedOffsetZone } from "luxon";
+  import { addToast } from "$lib/toast";
+  import ErrorAlert from "$lib/components/ErrorAlert.svelte";
+  import { apiFetchClient } from "$lib/api/fetch";
+
+  const user = getContext<Writable<MeUser>>("user");
+  let error: APIError | null = null;
+
+  // Custom preferences code
+  let preferenceIds: string[];
+  $: preferenceIds = Object.keys($user.custom_preferences);
+
+  const addPreference = () => {
+    const id = crypto.randomUUID();
+
+    $user.custom_preferences[id] = {
+      icon: "question",
+      tooltip: "New preference",
+      size: PreferenceSize.Normal,
+      muted: false,
+      favourite: false,
+    };
+    $user.custom_preferences = $user.custom_preferences;
+  };
+
+  const removePreference = (id: string) => {
+    delete $user.custom_preferences[id];
+    $user.custom_preferences = $user.custom_preferences;
+  };
+
+  // Timezone code
+  let currentTime = "";
+  let displayTimezone = "";
+  $: setTime($user.timezone);
+
+  const detectTimezone = () => {
+    $user.timezone = DateTime.local().zoneName;
+  };
+
+  const setTime = (timezone: string | null) => {
+    if (!timezone) {
+      currentTime = "";
+      displayTimezone = "";
+      return;
+    }
+
+    const offset = DateTime.now().setZone(timezone).offset;
+    const zone = FixedOffsetZone.instance(offset);
+
+    currentTime = now.setZone(zone).toLocaleString(DateTime.TIME_SIMPLE);
+    displayTimezone = zone.formatOffset(now.toUnixInteger(), "narrow");
+  };
+
+  // SID code
+  const now = DateTime.now().toLocal();
+  let canRerollSid: boolean;
+  $: canRerollSid = now.diff(DateTime.fromISO($user.last_sid_reroll).toLocal(), "hours").hours >= 1;
+
+  const copyShortURL = async () => {
+    const url = `${PUBLIC_SHORT_BASE}/${$user.sid}`;
+    await navigator.clipboard.writeText(url);
+    addToast({ body: "Copied the short link to your clipboard!", duration: 2000 });
+  };
+
+  const rerollSid = async () => {
+    try {
+      const resp = await apiFetchClient<MeUser>("/users/@me/reroll");
+      addToast({ header: "Success", body: "Rerolled short ID!" });
+      error = null;
+      $user.sid = resp.sid;
+    } catch (e) {
+      error = e as APIError;
+    }
+  };
+</script>
+
+{#if error}
+  <ErrorAlert {error} />
+{/if}
+
+<div class="row">
+  <div class="col-md">
+    <FormGroup floating label={'"Members" header text'}>
+      <Input bind:value={$user.member_title} placeholder="Members" />
+      <p class="text-muted mt-1">
+        <Icon name="info-circle-fill" aria-hidden />
+        This is the text used for the "Members" heading. If you leave it blank, the default text will
+        be used.
+      </p>
+    </FormGroup>
+    {#if PUBLIC_SHORT_BASE}
+      <hr />
+      <p>
+        Current short ID: <code>{$user.sid}</code>
+        <ButtonGroup class="mb-1">
+          <Button color="secondary" disabled={!canRerollSid} on:click={() => rerollSid()}
+            >Reroll short ID</Button
+          >
+          <IconButton
+            icon="link-45deg"
+            tooltip="Copy short link"
+            color="secondary"
+            click={copyShortURL}
+          />
+        </ButtonGroup>
+        <br />
+        <span class="text-muted">
+          <Icon name="info-circle-fill" aria-hidden />
+          This ID is used in <code>prns.cc</code> links. You can reroll one short ID every hour (shared
+          between your main profile and all members) by pressing the button above.
+        </span>
+      </p>
+    {/if}
+  </div>
+  <div class="col-md">
+    <div class="form-check">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        bind:checked={$user.list_private}
+        id="listPrivate"
+      />
+      <label class="form-check-label" for="listPrivate">Hide member list</label>
+    </div>
+    <p class="text-muted mt-1">
+      <Icon name="info-circle-fill" aria-hidden />
+      This only hides your member <em>list</em>.
+      <strong>
+        Your members will still be visible to anyone at
+        <code class="text-nowrap">pronouns.cc/@{$user.name}/[member-name]</code>.
+      </strong>
+    </p>
+    <hr />
+    <div class="m-1">
+      <p class="mt-1 my-2">
+        You can optionally set your timezone, which will show your current local time on your
+        profile.
+      </p>
+      <InputGroup>
+        <Button on:click={detectTimezone}>Detect timezone</Button>
+        <Input disabled value={$user.timezone !== null ? $user.timezone : "Unset"} />
+        <Button on:click={() => ($user.timezone = null)}>Reset</Button>
+      </InputGroup>
+      <p class="mt-2">
+        {#if $user.timezone}
+          This will show up on your profile like this:
+          <Icon name="clock" aria-hidden />
+          {currentTime} <span class="text-body-secondary">(UTC{displayTimezone})</span>
+          <br />
+        {/if}
+        <span class="text-muted">
+          Your timezone is never shared directly, only the difference between UTC and your current
+          timezone is.
+        </span>
+      </p>
+    </div>
+  </div>
+</div>
+<div>
+  <h3>
+    Preferences <Button on:click={addPreference} color="success"
+      ><Icon name="plus" aria-hidden /> Add new</Button
+    >
+  </h3>
+  {#each preferenceIds as id}
+    <CustomPreference
+      bind:preference={$user.custom_preferences[id]}
+      remove={() => removePreference(id)}
+    />
+  {/each}
+</div>
diff --git a/frontend/src/routes/edit/profile-old/CustomPreference.svelte b/frontend/src/routes/edit/profile/other/CustomPreference.svelte
similarity index 100%
rename from frontend/src/routes/edit/profile-old/CustomPreference.svelte
rename to frontend/src/routes/edit/profile/other/CustomPreference.svelte
diff --git a/frontend/src/routes/edit/profile-old/IconPicker.svelte b/frontend/src/routes/edit/profile/other/IconPicker.svelte
similarity index 97%
rename from frontend/src/routes/edit/profile-old/IconPicker.svelte
rename to frontend/src/routes/edit/profile/other/IconPicker.svelte
index eef2ddc..949f277 100644
--- a/frontend/src/routes/edit/profile-old/IconPicker.svelte
+++ b/frontend/src/routes/edit/profile/other/IconPicker.svelte
@@ -8,7 +8,7 @@
     Input,
     Tooltip,
   } from "sveltestrap";
-  import icons from "../../../icons";
+  import icons from "../../../../icons";
   import IconButton from "$lib/components/IconButton.svelte";
 
   export let icon = "";
diff --git a/frontend/src/routes/edit/profile/pronouns/+page.svelte b/frontend/src/routes/edit/profile/pronouns/+page.svelte
index c3a33a3..3cf81ec 100644
--- a/frontend/src/routes/edit/profile/pronouns/+page.svelte
+++ b/frontend/src/routes/edit/profile/pronouns/+page.svelte
@@ -3,7 +3,7 @@
   import type { Writable } from "svelte/store";
   import type { MeUser } from "$lib/api/entities";
   import { Button, Icon, Popover } from "sveltestrap";
-  import EditablePronouns from "../../EditablePronouns.svelte";
+  import EditablePronouns from "$lib/components/edit/EditablePronouns.svelte";
   import IconButton from "$lib/components/IconButton.svelte";
   import type { PageData } from "./$types";
 

From b3e191f01a977a0ad3281c415a274b48cfd3f8cf Mon Sep 17 00:00:00 2001
From: sam <sam@sleepycat.moe>
Date: Thu, 10 Aug 2023 21:03:13 +0200
Subject: [PATCH 06/10] move /edit/profile to /@username/edit

---
 frontend/src/routes/@[username]/+page.svelte  |   2 +-
 .../edit}/+layout.svelte                      |  14 +-
 .../profile => @[username]/edit}/+layout.ts   |   0
 .../src/routes/@[username]/edit/+page.svelte  | 143 +++++++++++++++++
 .../edit}/bio/+page.svelte                    |   0
 .../edit}/fields/+page.svelte                 |   0
 .../edit}/flags/+page.svelte                  |   0
 .../edit}/links/+page.svelte                  |   0
 .../edit}/other/+page.svelte                  |   0
 .../edit}/other/CustomPreference.svelte       |   0
 .../edit}/other/IconPicker.svelte             |   0
 .../edit}/pronouns/+page.svelte               |   0
 frontend/src/routes/edit/profile/+page.svelte | 144 +-----------------
 frontend/src/routes/edit/profile/+page.ts     |  11 ++
 14 files changed, 163 insertions(+), 151 deletions(-)
 rename frontend/src/routes/{edit/profile => @[username]/edit}/+layout.svelte (81%)
 rename frontend/src/routes/{edit/profile => @[username]/edit}/+layout.ts (100%)
 create mode 100644 frontend/src/routes/@[username]/edit/+page.svelte
 rename frontend/src/routes/{edit/profile => @[username]/edit}/bio/+page.svelte (100%)
 rename frontend/src/routes/{edit/profile => @[username]/edit}/fields/+page.svelte (100%)
 rename frontend/src/routes/{edit/profile => @[username]/edit}/flags/+page.svelte (100%)
 rename frontend/src/routes/{edit/profile => @[username]/edit}/links/+page.svelte (100%)
 rename frontend/src/routes/{edit/profile => @[username]/edit}/other/+page.svelte (100%)
 rename frontend/src/routes/{edit/profile => @[username]/edit}/other/CustomPreference.svelte (100%)
 rename frontend/src/routes/{edit/profile => @[username]/edit}/other/IconPicker.svelte (100%)
 rename frontend/src/routes/{edit/profile => @[username]/edit}/pronouns/+page.svelte (100%)
 create mode 100644 frontend/src/routes/edit/profile/+page.ts

diff --git a/frontend/src/routes/@[username]/+page.svelte b/frontend/src/routes/@[username]/+page.svelte
index 0492ad2..ca29cbc 100644
--- a/frontend/src/routes/@[username]/+page.svelte
+++ b/frontend/src/routes/@[username]/+page.svelte
@@ -164,7 +164,7 @@
   {#if $userStore && $userStore.id === data.id}
     <Alert color="secondary" fade={false}>
       You are currently viewing your <strong>public</strong> profile.
-      <br /><a href="/edit/profile">Edit your profile</a>
+      <br /><a href="/@{data.name}/edit">Edit your profile</a>
     </Alert>
   {/if}
   <div class="grid row-gap-3">
diff --git a/frontend/src/routes/edit/profile/+layout.svelte b/frontend/src/routes/@[username]/edit/+layout.svelte
similarity index 81%
rename from frontend/src/routes/edit/profile/+layout.svelte
rename to frontend/src/routes/@[username]/edit/+layout.svelte
index 59a8f95..6bcb23b 100644
--- a/frontend/src/routes/edit/profile/+layout.svelte
+++ b/frontend/src/routes/@[username]/edit/+layout.svelte
@@ -80,13 +80,13 @@
 {/if}
 
 <Nav tabs>
-  <NavItem><ActiveLink href="/edit/profile">Names and avatar</ActiveLink></NavItem>
-  <NavItem><ActiveLink href="/edit/profile/bio">Bio</ActiveLink></NavItem>
-  <NavItem><ActiveLink href="/edit/profile/pronouns">Pronouns</ActiveLink></NavItem>
-  <NavItem><ActiveLink href="/edit/profile/fields">Fields</ActiveLink></NavItem>
-  <NavItem><ActiveLink href="/edit/profile/flags">Flags</ActiveLink></NavItem>
-  <NavItem><ActiveLink href="/edit/profile/links">Links</ActiveLink></NavItem>
-  <NavItem><ActiveLink href="/edit/profile/other">Preferences & other</ActiveLink></NavItem>
+  <NavItem><ActiveLink href="/@{$user.name}/edit">Names and avatar</ActiveLink></NavItem>
+  <NavItem><ActiveLink href="/@{$user.name}/edit/bio">Bio</ActiveLink></NavItem>
+  <NavItem><ActiveLink href="/@{$user.name}/edit/pronouns">Pronouns</ActiveLink></NavItem>
+  <NavItem><ActiveLink href="/@{$user.name}/edit/fields">Fields</ActiveLink></NavItem>
+  <NavItem><ActiveLink href="/@{$user.name}/edit/flags">Flags</ActiveLink></NavItem>
+  <NavItem><ActiveLink href="/@{$user.name}/edit/links">Links</ActiveLink></NavItem>
+  <NavItem><ActiveLink href="/@{$user.name}/edit/other">Preferences & other</ActiveLink></NavItem>
 </Nav>
 
 <div class="mt-3">
diff --git a/frontend/src/routes/edit/profile/+layout.ts b/frontend/src/routes/@[username]/edit/+layout.ts
similarity index 100%
rename from frontend/src/routes/edit/profile/+layout.ts
rename to frontend/src/routes/@[username]/edit/+layout.ts
diff --git a/frontend/src/routes/@[username]/edit/+page.svelte b/frontend/src/routes/@[username]/edit/+page.svelte
new file mode 100644
index 0000000..e727633
--- /dev/null
+++ b/frontend/src/routes/@[username]/edit/+page.svelte
@@ -0,0 +1,143 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+  import prettyBytes from "pretty-bytes";
+  import { encode } from "base64-arraybuffer";
+  import { FormGroup, Icon, Input } from "sveltestrap";
+  import { userAvatars, type MeUser } from "$lib/api/entities";
+  import FallbackImage from "$lib/components/FallbackImage.svelte";
+  import EditableName from "$lib/components/edit/EditableName.svelte";
+  import { addToast } from "$lib/toast";
+  import IconButton from "$lib/components/IconButton.svelte";
+
+  const MAX_AVATAR_BYTES = 1_000_000;
+
+  const user = getContext<Writable<MeUser>>("user");
+  const currentUser = getContext<Writable<MeUser>>("currentUser");
+
+  // The list of avatar files uploaded by the user.
+  // Only the first of these is ever used.
+  let avatar_files: FileList | null;
+  $: getAvatar(avatar_files).then((b64) => ($user.avatar = b64));
+
+  // The variable for a new name being inputted by the user.
+  let newName = "";
+
+  const moveName = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == $user.names.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = $user.names[index];
+    $user.names[index] = $user.names[newIndex];
+    $user.names[newIndex] = temp;
+    $user.names = [...$user.names];
+  };
+
+  const removeName = (index: number) => {
+    $user.names.splice(index, 1);
+    $user.names = [...$user.names];
+  };
+
+  const addName = (event: Event) => {
+    event.preventDefault();
+
+    $user.names = [...$user.names, { value: newName, status: "okay" }];
+    newName = "";
+  };
+
+  const getAvatar = async (list: FileList | null) => {
+    if (!list || list.length === 0) return null;
+    if (list[0].size > MAX_AVATAR_BYTES) {
+      addToast({
+        header: "Avatar too large",
+        body: `This avatar is too large, please resize it (maximum is ${prettyBytes(
+          MAX_AVATAR_BYTES,
+        )}, the file you tried to upload is ${prettyBytes(list[0].size)})`,
+      });
+      return null;
+    }
+
+    const buffer = await list[0].arrayBuffer();
+    const base64 = encode(buffer);
+
+    const uri = `data:${list[0].type};base64,${base64}`;
+    console.log(uri.slice(0, 128));
+
+    return uri;
+  };
+</script>
+
+<div class="row">
+  <div class="col-md">
+    <div class="row">
+      <div class="col-md text-center">
+        {#if $user.avatar === ""}
+          <FallbackImage alt="Current avatar" urls={[]} width={200} />
+        {:else if $user.avatar}
+          <img
+            width={200}
+            height={200}
+            src={$user.avatar}
+            alt="New avatar"
+            class="rounded-circle img-fluid"
+          />
+        {:else}
+          <FallbackImage alt="Current avatar" urls={userAvatars($currentUser)} 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"
+        />
+        <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>
+          <!-- svelte-ignore a11y-invalid-attribute -->
+          <a href="" on:click={() => ($user.avatar = "")}>Remove avatar</a>
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md">
+    <FormGroup floating label="Username">
+      <Input bind:value={$user.name} readonly />
+      <p class="text-muted mt-1">
+        <Icon name="info-circle-fill" aria-hidden />
+        You can change your username in
+        <a href="/settings" class="text-reset">your settings</a>.
+      </p>
+    </FormGroup>
+    <FormGroup floating label="Display name">
+      <Input bind:value={$user.display_name} />
+      <p class="text-muted mt-1">
+        <Icon name="info-circle-fill" aria-hidden />
+        Your display name is used in page titles and as a header.
+      </p>
+    </FormGroup>
+  </div>
+</div>
+<div>
+  <h4>Names</h4>
+  {#each $user.names as _, index}
+    <EditableName
+      bind:value={$user.names[index].value}
+      bind:status={$user.names[index].status}
+      preferences={$user.custom_preferences}
+      moveUp={() => moveName(index, true)}
+      moveDown={() => moveName(index, false)}
+      remove={() => removeName(index)}
+    />
+  {/each}
+  <form class="input-group m-1" on:submit={addName}>
+    <input type="text" class="form-control" bind:value={newName} />
+    <IconButton type="submit" color="success" icon="plus" tooltip="Add name" />
+  </form>
+</div>
diff --git a/frontend/src/routes/edit/profile/bio/+page.svelte b/frontend/src/routes/@[username]/edit/bio/+page.svelte
similarity index 100%
rename from frontend/src/routes/edit/profile/bio/+page.svelte
rename to frontend/src/routes/@[username]/edit/bio/+page.svelte
diff --git a/frontend/src/routes/edit/profile/fields/+page.svelte b/frontend/src/routes/@[username]/edit/fields/+page.svelte
similarity index 100%
rename from frontend/src/routes/edit/profile/fields/+page.svelte
rename to frontend/src/routes/@[username]/edit/fields/+page.svelte
diff --git a/frontend/src/routes/edit/profile/flags/+page.svelte b/frontend/src/routes/@[username]/edit/flags/+page.svelte
similarity index 100%
rename from frontend/src/routes/edit/profile/flags/+page.svelte
rename to frontend/src/routes/@[username]/edit/flags/+page.svelte
diff --git a/frontend/src/routes/edit/profile/links/+page.svelte b/frontend/src/routes/@[username]/edit/links/+page.svelte
similarity index 100%
rename from frontend/src/routes/edit/profile/links/+page.svelte
rename to frontend/src/routes/@[username]/edit/links/+page.svelte
diff --git a/frontend/src/routes/edit/profile/other/+page.svelte b/frontend/src/routes/@[username]/edit/other/+page.svelte
similarity index 100%
rename from frontend/src/routes/edit/profile/other/+page.svelte
rename to frontend/src/routes/@[username]/edit/other/+page.svelte
diff --git a/frontend/src/routes/edit/profile/other/CustomPreference.svelte b/frontend/src/routes/@[username]/edit/other/CustomPreference.svelte
similarity index 100%
rename from frontend/src/routes/edit/profile/other/CustomPreference.svelte
rename to frontend/src/routes/@[username]/edit/other/CustomPreference.svelte
diff --git a/frontend/src/routes/edit/profile/other/IconPicker.svelte b/frontend/src/routes/@[username]/edit/other/IconPicker.svelte
similarity index 100%
rename from frontend/src/routes/edit/profile/other/IconPicker.svelte
rename to frontend/src/routes/@[username]/edit/other/IconPicker.svelte
diff --git a/frontend/src/routes/edit/profile/pronouns/+page.svelte b/frontend/src/routes/@[username]/edit/pronouns/+page.svelte
similarity index 100%
rename from frontend/src/routes/edit/profile/pronouns/+page.svelte
rename to frontend/src/routes/@[username]/edit/pronouns/+page.svelte
diff --git a/frontend/src/routes/edit/profile/+page.svelte b/frontend/src/routes/edit/profile/+page.svelte
index e727633..a8beed5 100644
--- a/frontend/src/routes/edit/profile/+page.svelte
+++ b/frontend/src/routes/edit/profile/+page.svelte
@@ -1,143 +1 @@
-<script lang="ts">
-  import { getContext } from "svelte";
-  import type { Writable } from "svelte/store";
-  import prettyBytes from "pretty-bytes";
-  import { encode } from "base64-arraybuffer";
-  import { FormGroup, Icon, Input } from "sveltestrap";
-  import { userAvatars, type MeUser } from "$lib/api/entities";
-  import FallbackImage from "$lib/components/FallbackImage.svelte";
-  import EditableName from "$lib/components/edit/EditableName.svelte";
-  import { addToast } from "$lib/toast";
-  import IconButton from "$lib/components/IconButton.svelte";
-
-  const MAX_AVATAR_BYTES = 1_000_000;
-
-  const user = getContext<Writable<MeUser>>("user");
-  const currentUser = getContext<Writable<MeUser>>("currentUser");
-
-  // The list of avatar files uploaded by the user.
-  // Only the first of these is ever used.
-  let avatar_files: FileList | null;
-  $: getAvatar(avatar_files).then((b64) => ($user.avatar = b64));
-
-  // The variable for a new name being inputted by the user.
-  let newName = "";
-
-  const moveName = (index: number, up: boolean) => {
-    if (up && index == 0) return;
-    if (!up && index == $user.names.length - 1) return;
-
-    const newIndex = up ? index - 1 : index + 1;
-
-    const temp = $user.names[index];
-    $user.names[index] = $user.names[newIndex];
-    $user.names[newIndex] = temp;
-    $user.names = [...$user.names];
-  };
-
-  const removeName = (index: number) => {
-    $user.names.splice(index, 1);
-    $user.names = [...$user.names];
-  };
-
-  const addName = (event: Event) => {
-    event.preventDefault();
-
-    $user.names = [...$user.names, { value: newName, status: "okay" }];
-    newName = "";
-  };
-
-  const getAvatar = async (list: FileList | null) => {
-    if (!list || list.length === 0) return null;
-    if (list[0].size > MAX_AVATAR_BYTES) {
-      addToast({
-        header: "Avatar too large",
-        body: `This avatar is too large, please resize it (maximum is ${prettyBytes(
-          MAX_AVATAR_BYTES,
-        )}, the file you tried to upload is ${prettyBytes(list[0].size)})`,
-      });
-      return null;
-    }
-
-    const buffer = await list[0].arrayBuffer();
-    const base64 = encode(buffer);
-
-    const uri = `data:${list[0].type};base64,${base64}`;
-    console.log(uri.slice(0, 128));
-
-    return uri;
-  };
-</script>
-
-<div class="row">
-  <div class="col-md">
-    <div class="row">
-      <div class="col-md text-center">
-        {#if $user.avatar === ""}
-          <FallbackImage alt="Current avatar" urls={[]} width={200} />
-        {:else if $user.avatar}
-          <img
-            width={200}
-            height={200}
-            src={$user.avatar}
-            alt="New avatar"
-            class="rounded-circle img-fluid"
-          />
-        {:else}
-          <FallbackImage alt="Current avatar" urls={userAvatars($currentUser)} 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"
-        />
-        <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>
-          <!-- svelte-ignore a11y-invalid-attribute -->
-          <a href="" on:click={() => ($user.avatar = "")}>Remove avatar</a>
-        </p>
-      </div>
-    </div>
-  </div>
-  <div class="col-md">
-    <FormGroup floating label="Username">
-      <Input bind:value={$user.name} readonly />
-      <p class="text-muted mt-1">
-        <Icon name="info-circle-fill" aria-hidden />
-        You can change your username in
-        <a href="/settings" class="text-reset">your settings</a>.
-      </p>
-    </FormGroup>
-    <FormGroup floating label="Display name">
-      <Input bind:value={$user.display_name} />
-      <p class="text-muted mt-1">
-        <Icon name="info-circle-fill" aria-hidden />
-        Your display name is used in page titles and as a header.
-      </p>
-    </FormGroup>
-  </div>
-</div>
-<div>
-  <h4>Names</h4>
-  {#each $user.names as _, index}
-    <EditableName
-      bind:value={$user.names[index].value}
-      bind:status={$user.names[index].status}
-      preferences={$user.custom_preferences}
-      moveUp={() => moveName(index, true)}
-      moveDown={() => moveName(index, false)}
-      remove={() => removeName(index)}
-    />
-  {/each}
-  <form class="input-group m-1" on:submit={addName}>
-    <input type="text" class="form-control" bind:value={newName} />
-    <IconButton type="submit" color="success" icon="plus" tooltip="Add name" />
-  </form>
-</div>
+<div />
diff --git a/frontend/src/routes/edit/profile/+page.ts b/frontend/src/routes/edit/profile/+page.ts
new file mode 100644
index 0000000..1e8be0c
--- /dev/null
+++ b/frontend/src/routes/edit/profile/+page.ts
@@ -0,0 +1,11 @@
+import type { MeUser } from "$lib/api/entities";
+import { apiFetchClient } from "$lib/api/fetch";
+import { redirect } from "@sveltejs/kit";
+
+export const ssr = false;
+
+export const load = async () => {
+  const resp = await apiFetchClient<MeUser>(`/users/@me`);
+
+  throw redirect(303, `/@${resp.name}/edit`);
+};

From b2b3fb37eca9e8678e41ab4ed2f109451689971f Mon Sep 17 00:00:00 2001
From: sam <sam@sleepycat.moe>
Date: Fri, 11 Aug 2023 16:33:17 +0200
Subject: [PATCH 07/10] fix: change frontend error object to APIError

---
 frontend/src/app.d.ts                         |  9 +++-
 frontend/src/routes/+error.svelte             | 11 +++--
 frontend/src/routes/@[username]/+error.svelte | 40 ++++++++++------
 .../src/routes/@[username]/+page.server.ts    |  2 +-
 frontend/src/routes/@[username]/+page.svelte  |  2 +-
 .../@[username]/[memberName]/+page.server.ts  |  4 +-
 .../src/routes/@[username]/edit/+layout.ts    | 11 +++--
 .../src/routes/[username]/+page.server.ts     |  2 +-
 .../src/routes/edit/member/[id]/+page.svelte  |  2 +-
 frontend/src/routes/edit/member/[id]/+page.ts |  2 +-
 frontend/src/routes/edit/profile/+page.ts     | 14 ++++--
 .../routes/pronouns/[...pronouns]/+page.ts    |  6 +--
 frontend/src/routes/reports/+page.ts          | 47 ++++++++-----------
 frontend/src/routes/settings/+page.svelte     |  2 +-
 frontend/src/routes/settings/export/+page.ts  |  2 +-
 15 files changed, 90 insertions(+), 66 deletions(-)

diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
index 9176095..d4759fd 100644
--- a/frontend/src/app.d.ts
+++ b/frontend/src/app.d.ts
@@ -1,8 +1,15 @@
 // See https://kit.svelte.dev/docs/types#app
+
+import type { ErrorCode } from "$lib/api/entities";
+
 // for information about these interfaces
 declare global {
   namespace App {
-    // interface Error {}
+    interface Error {
+      code: ErrorCode;
+      message?: string | undefined;
+      details?: string | undefined;
+    }
     // interface Locals {}
     // interface PageData {}
     // interface Platform {}
diff --git a/frontend/src/routes/+error.svelte b/frontend/src/routes/+error.svelte
index 21dc4d0..9d7d887 100644
--- a/frontend/src/routes/+error.svelte
+++ b/frontend/src/routes/+error.svelte
@@ -1,17 +1,20 @@
 <script lang="ts">
   import { page } from "$app/stores";
+    import { ErrorCode } from "$lib/api/entities";
 </script>
 
 <h1>An error occurred ({$page.status})</h1>
 
-{#if $page.status === 404}
+{#if $page.error?.code === ErrorCode.NotFound}
   <p>
     The page you were looking for was not found. If you're sure the page exists, check for any typos
     in the address.
   </p>
-{:else if $page.status === 429}
+{:else if $page.error?.code === ErrorCode.Forbidden || $page.error?.code === ErrorCode.InvalidToken}
+  <p>You're not logged in, or you aren't allowed to access this page.</p>
+{:else if $page.error?.code === 429}
   <p>You've exceeded a rate limit, please try again later.</p>
-{:else if $page.status === 500}
+{:else if $page.error?.code === 500}
   <p>An internal error occurred. Please try again later.</p>
   <p>
     If this error keeps happening, please <a
@@ -22,4 +25,4 @@
   </p>
 {/if}
 
-<p>Error message: <code>{$page.error?.message}</code></p>
+<p>Error code: <code>{$page.error?.code}</code></p>
diff --git a/frontend/src/routes/@[username]/+error.svelte b/frontend/src/routes/@[username]/+error.svelte
index 8e0cbbc..4f0292f 100644
--- a/frontend/src/routes/@[username]/+error.svelte
+++ b/frontend/src/routes/@[username]/+error.svelte
@@ -1,22 +1,32 @@
 <script lang="ts">
   import { page } from "$app/stores";
+  import { ErrorCode } from "$lib/api/entities";
 </script>
 
-<h1>An error occurred ({$page.status})</h1>
-
-{#if $page.status === 404}
-  <p>The user you were looking for couldn't be found. Please check for any typos.</p>
-{:else if $page.status === 429}
-  <p>You've exceeded a rate limit, please try again later.</p>
-{:else if $page.status === 500}
-  <p>An internal error occurred. Please try again later.</p>
+{#if $page.error?.code === ErrorCode.Forbidden || $page.error?.code === ErrorCode.InvalidToken}
+  <h1>Not logged in</h1>
   <p>
-    If this error keeps happening, please <a
-      href="https://codeberg.org/pronounscc/pronouns.cc/issues"
-      target="_blank"
-      rel="noreferrer">file a bug report</a
-    > with an explanation of what you did to cause the error.
+    Either you aren't logged in, or your login has expired. Please <a href="/auth/login"
+      >log in again</a
+    >.
   </p>
-{/if}
+{:else}
+  <h1>An error occurred ({$page.status})</h1>
 
-<p>Error message: <code>{$page.error?.message}</code></p>
+  {#if $page.status === 404}
+    <p>The user you were looking for couldn't be found. Please check for any typos.</p>
+  {:else if $page.status === 429}
+    <p>You've exceeded a rate limit, please try again later.</p>
+  {:else if $page.status === 500}
+    <p>An internal error occurred. Please try again later.</p>
+    <p>
+      If this error keeps happening, please <a
+        href="https://codeberg.org/pronounscc/pronouns.cc/issues"
+        target="_blank"
+        rel="noreferrer">file a bug report</a
+      > with an explanation of what you did to cause the error.
+    </p>
+  {/if}
+
+  <p>Error message: <code>{$page.error?.message}</code></p>
+{/if}
diff --git a/frontend/src/routes/@[username]/+page.server.ts b/frontend/src/routes/@[username]/+page.server.ts
index 9a4c26f..447c5e3 100644
--- a/frontend/src/routes/@[username]/+page.server.ts
+++ b/frontend/src/routes/@[username]/+page.server.ts
@@ -11,7 +11,7 @@ export const load = async ({ params }) => {
     return resp;
   } catch (e) {
     if ((e as APIError).code === ErrorCode.UserNotFound) {
-      throw error(404, (e as APIError).message);
+      throw error(404, e as APIError);
     }
 
     throw e;
diff --git a/frontend/src/routes/@[username]/+page.svelte b/frontend/src/routes/@[username]/+page.svelte
index ca29cbc..76da6de 100644
--- a/frontend/src/routes/@[username]/+page.svelte
+++ b/frontend/src/routes/@[username]/+page.svelte
@@ -196,7 +196,7 @@
           <hr />
           <p>
             <em>
-              Your profile is empty! You can customize it by going to the <a href="/edit/profile"
+              Your profile is empty! You can customize it by going to the <a href="/@{data.name}/edit"
                 >edit profile</a
               > page.</em
             > <span class="text-muted">(only you can see this)</span>
diff --git a/frontend/src/routes/@[username]/[memberName]/+page.server.ts b/frontend/src/routes/@[username]/[memberName]/+page.server.ts
index ab41c47..9b14e70 100644
--- a/frontend/src/routes/@[username]/[memberName]/+page.server.ts
+++ b/frontend/src/routes/@[username]/[memberName]/+page.server.ts
@@ -14,9 +14,9 @@ export const load = async ({ params }) => {
       (e as APIError).code === ErrorCode.UserNotFound ||
       (e as APIError).code === ErrorCode.MemberNotFound
     ) {
-      throw error(404, (e as APIError).message);
+      throw error(404, e as APIError);
     }
 
-    throw error(500, (e as APIError).message);
+    throw error(500, e as APIError);
   }
 };
diff --git a/frontend/src/routes/@[username]/edit/+layout.ts b/frontend/src/routes/@[username]/edit/+layout.ts
index 894eb83..2fd9c4c 100644
--- a/frontend/src/routes/@[username]/edit/+layout.ts
+++ b/frontend/src/routes/@[username]/edit/+layout.ts
@@ -1,23 +1,28 @@
 import type { PrideFlag, APIError, MeUser, PronounsJson } from "$lib/api/entities";
 import { apiFetchClient } from "$lib/api/fetch";
-import { error } from "@sveltejs/kit";
+import { error, redirect, type Redirect } from "@sveltejs/kit";
 
 import pronounsRaw from "$lib/pronouns.json";
 const pronouns = pronounsRaw as PronounsJson;
 
 export const ssr = false;
 
-export const load = async () => {
+export const load = async ({ params }) => {
   try {
     const user = await apiFetchClient<MeUser>(`/users/@me`);
     const flags = await apiFetchClient<PrideFlag[]>("/users/@me/flags");
 
+    if (params.username !== user.name) {
+      throw redirect(303, `/@${user.name}/edit`);
+    }
+
     return {
       user,
       pronouns: pronouns.autocomplete,
       flags,
     };
   } catch (e) {
-    throw error((e as APIError).code, (e as APIError).message);
+    if ("code" in e) throw error(500, e as APIError);
+    throw e;
   }
 };
diff --git a/frontend/src/routes/[username]/+page.server.ts b/frontend/src/routes/[username]/+page.server.ts
index 3794610..39331d6 100644
--- a/frontend/src/routes/[username]/+page.server.ts
+++ b/frontend/src/routes/[username]/+page.server.ts
@@ -11,7 +11,7 @@ export const load = async ({ params }) => {
     throw redirect(303, `/@${resp.name}`);
   } catch (e) {
     if ((e as APIError).code === ErrorCode.UserNotFound) {
-      throw error(404, (e as APIError).message);
+      throw error(404, e as APIError);
     }
 
     throw e;
diff --git a/frontend/src/routes/edit/member/[id]/+page.svelte b/frontend/src/routes/edit/member/[id]/+page.svelte
index 3547165..3799a7d 100644
--- a/frontend/src/routes/edit/member/[id]/+page.svelte
+++ b/frontend/src/routes/edit/member/[id]/+page.svelte
@@ -768,7 +768,7 @@
             <Icon name="exclamation-triangle-fill" aria-hidden />
             Your member list is currently hidden, so <strong>this setting has no effect</strong>. If
             you want to make your member list visible again,
-            <a href="/edit/profile">edit your user profile</a>.
+            <a href="/@{data.user.name}/other">edit your user profile</a>.
             <br />
           {/if}
           <Icon name="info-circle-fill" aria-hidden />
diff --git a/frontend/src/routes/edit/member/[id]/+page.ts b/frontend/src/routes/edit/member/[id]/+page.ts
index a84b94d..eeb532d 100644
--- a/frontend/src/routes/edit/member/[id]/+page.ts
+++ b/frontend/src/routes/edit/member/[id]/+page.ts
@@ -20,6 +20,6 @@ export const load = async ({ params }) => {
       flags,
     };
   } catch (e) {
-    throw error((e as APIError).code, (e as APIError).message);
+    throw error((e as APIError).code, e as APIError);
   }
 };
diff --git a/frontend/src/routes/edit/profile/+page.ts b/frontend/src/routes/edit/profile/+page.ts
index 1e8be0c..d1b7381 100644
--- a/frontend/src/routes/edit/profile/+page.ts
+++ b/frontend/src/routes/edit/profile/+page.ts
@@ -1,11 +1,17 @@
-import type { MeUser } from "$lib/api/entities";
+import { ErrorCode, type APIError, type MeUser } from "$lib/api/entities";
 import { apiFetchClient } from "$lib/api/fetch";
-import { redirect } from "@sveltejs/kit";
+import { error, redirect } from "@sveltejs/kit";
 
 export const ssr = false;
 
 export const load = async () => {
-  const resp = await apiFetchClient<MeUser>(`/users/@me`);
+  try {
+    const resp = await apiFetchClient<MeUser>(`/users/@me`);
 
-  throw redirect(303, `/@${resp.name}/edit`);
+    throw redirect(303, `/@${resp.name}/edit`);
+  } catch (e) {
+    if ((e as APIError).code === ErrorCode.Forbidden || (e as APIError).code === ErrorCode.InvalidToken) {
+      throw error(403, e as APIError)
+    }
+  }
 };
diff --git a/frontend/src/routes/pronouns/[...pronouns]/+page.ts b/frontend/src/routes/pronouns/[...pronouns]/+page.ts
index 6ab0564..3442f37 100644
--- a/frontend/src/routes/pronouns/[...pronouns]/+page.ts
+++ b/frontend/src/routes/pronouns/[...pronouns]/+page.ts
@@ -1,6 +1,6 @@
 import { error } from "@sveltejs/kit";
 import type { PageLoad } from "./$types";
-import type { PronounsJson } from "$lib/api/entities";
+import { ErrorCode, type PronounsJson } from "$lib/api/entities";
 
 import pronounsRaw from "$lib/pronouns.json";
 const pronouns = pronounsRaw as PronounsJson;
@@ -10,7 +10,7 @@ export const load = (async ({ params }) => {
 
   const arr = param.split("/");
   if (arr.length === 0 || params.pronouns === "") {
-    throw error(404, "Pronouns not found");
+    throw error(404, { code: ErrorCode.NotFound, message: "Pronouns not found" });
   }
 
   if (arr.length === 5) {
@@ -46,5 +46,5 @@ export const load = (async ({ params }) => {
     };
   }
 
-  throw error(404, "Pronouns not found");
+  throw error(404, { code: ErrorCode.NotFound, message: "Pronouns not found" });
 }) satisfies PageLoad;
diff --git a/frontend/src/routes/reports/+page.ts b/frontend/src/routes/reports/+page.ts
index 9b519ca..ee1743e 100644
--- a/frontend/src/routes/reports/+page.ts
+++ b/frontend/src/routes/reports/+page.ts
@@ -10,37 +10,30 @@ export const load = async ({ url }) => {
   const reporterId = searchParams.get("reporter_id");
   const isClosed = searchParams.get("closed") === "true";
 
-  try {
-    let reports: Report[];
-    if (userId) {
-      const params = new URLSearchParams();
-      if (before) params.append("before", before.toString());
+  let reports: Report[];
+  if (userId) {
+    const params = new URLSearchParams();
+    if (before) params.append("before", before.toString());
 
-      reports = await apiFetchClient<Report[]>(
-        `/admin/reports/by-user/${userId}?${params.toString()}`,
-      );
-    } else if (reporterId) {
-      const params = new URLSearchParams();
-      if (before) params.append("before", before.toString());
+    reports = await apiFetchClient<Report[]>(
+      `/admin/reports/by-user/${userId}?${params.toString()}`,
+    );
+  } else if (reporterId) {
+    const params = new URLSearchParams();
+    if (before) params.append("before", before.toString());
 
-      reports = await apiFetchClient<Report[]>(
-        `/admin/reports/by-reporter/${reporterId}?${params.toString()}`,
-      );
-    } else {
-      const params = new URLSearchParams();
-      if (before) params.append("before", before.toString());
-      if (isClosed) params.append("closed", "true");
+    reports = await apiFetchClient<Report[]>(
+      `/admin/reports/by-reporter/${reporterId}?${params.toString()}`,
+    );
+  } else {
+    const params = new URLSearchParams();
+    if (before) params.append("before", before.toString());
+    if (isClosed) params.append("closed", "true");
 
-      reports = await apiFetchClient<Report[]>(`/admin/reports?${params.toString()}`);
-    }
-
-    return { before, isClosed, userId, reporterId, reports } as PageLoadData;
-  } catch (e) {
-    if ((e as APIError).code === ErrorCode.Forbidden) {
-      throw error(400, "You're not an admin");
-    }
-    throw e;
+    reports = await apiFetchClient<Report[]>(`/admin/reports?${params.toString()}`);
   }
+
+  return { before, isClosed, userId, reporterId, reports } as PageLoadData;
 };
 
 interface PageLoadData {
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index c28872e..ee1f0a3 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -158,7 +158,7 @@
       <p class="text-center">
         <FallbackImage width={200} urls={userAvatars(data.user)} alt="Your avatar" />
         <br />
-        To change your avatar, go to <a href="/edit/profile">edit profile</a>.
+        To change your avatar, go to <a href="/@{data.user.name}/edit">edit profile</a>.
       </p>
     </div>
   </div>
diff --git a/frontend/src/routes/settings/export/+page.ts b/frontend/src/routes/settings/export/+page.ts
index 4596125..972bc2f 100644
--- a/frontend/src/routes/settings/export/+page.ts
+++ b/frontend/src/routes/settings/export/+page.ts
@@ -10,6 +10,6 @@ export const load = async () => {
   } catch (e) {
     if ((e as APIError).code === ErrorCode.NotFound) return { exportData: null };
 
-    throw error((e as APIError).code, (e as APIError).message);
+    throw error(500, e as APIError);
   }
 };

From 56c9270fdb1e2942cb44438667890fd52eb29b61 Mon Sep 17 00:00:00 2001
From: sam <sam@sleepycat.moe>
Date: Sat, 12 Aug 2023 17:01:01 +0200
Subject: [PATCH 08/10] edit member page progress

---
 .../@[username]/[memberName]/+page.svelte     |   4 +-
 .../[memberName]/edit/+layout.svelte          | 171 ++++++++++++++++++
 .../@[username]/[memberName]/edit/+layout.ts  |  31 ++++
 .../[memberName]/edit/+page.svelte            | 151 ++++++++++++++++
 4 files changed, 355 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/routes/@[username]/[memberName]/edit/+layout.svelte
 create mode 100644 frontend/src/routes/@[username]/[memberName]/edit/+layout.ts
 create mode 100644 frontend/src/routes/@[username]/[memberName]/edit/+page.svelte

diff --git a/frontend/src/routes/@[username]/[memberName]/+page.svelte b/frontend/src/routes/@[username]/[memberName]/+page.svelte
index 504448a..9089959 100644
--- a/frontend/src/routes/@[username]/[memberName]/+page.svelte
+++ b/frontend/src/routes/@[username]/[memberName]/+page.svelte
@@ -65,7 +65,7 @@
     <Alert color="secondary" fade={false}>
       You are currently viewing the <strong>public</strong> profile of {data.display_name ??
         data.name}.
-      <br /><a href="/edit/member/{data.id}">Edit profile</a>
+      <br /><a href="/@{data.user.name}/{data.name}/edit">Edit profile</a>
     </Alert>
   {/if}
   <div class="m-3">
@@ -93,7 +93,7 @@
           <p>
             <em>
               This member's profile is empty! You can customize it by going to the <a
-                href="/edit/member/{data.id}">edit member</a
+                href="/@{data.user.name}/{data.name}/edit">edit member</a
               > page.</em
             > <span class="text-muted">(only you can see this)</span>
           </p>
diff --git a/frontend/src/routes/@[username]/[memberName]/edit/+layout.svelte b/frontend/src/routes/@[username]/[memberName]/edit/+layout.svelte
new file mode 100644
index 0000000..2f8c259
--- /dev/null
+++ b/frontend/src/routes/@[username]/[memberName]/edit/+layout.svelte
@@ -0,0 +1,171 @@
+<script lang="ts">
+  import type { APIError, Member, Pronoun } from "$lib/api/entities";
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+  import type { LayoutData } from "./$types";
+  import { addToast, delToast } from "$lib/toast";
+  import { apiFetchClient, fastFetchClient } from "$lib/api/fetch";
+  import { Button, ButtonGroup, Modal, ModalBody, ModalFooter, Nav, NavItem } from "sveltestrap";
+  import { goto } from "$app/navigation";
+  import ErrorAlert from "$lib/components/ErrorAlert.svelte";
+  import IconButton from "$lib/components/IconButton.svelte";
+  import ActiveLink from "$lib/components/ActiveLink.svelte";
+  import { memberNameRegex } from "$lib/api/regex";
+
+  export let data: LayoutData;
+
+  const member = writable<Member>(structuredClone({ ...data.member, avatar: null }));
+  const currentMember = writable(data.member);
+  setContext("member", member);
+  setContext("currentMember", currentMember);
+
+  // Whether the member's new name is valid.
+  // This is also checked in +page.svelte, because it's easier to do it twice.
+  let memberNameValid = true;
+  $: memberNameValid = memberNameRegex.test($member.name);
+
+  let error: APIError | null = null;
+
+  // Delete member code
+  let deleteOpen = false;
+  const toggleDeleteOpen = () => (deleteOpen = !deleteOpen);
+  let deleteName = "";
+  let deleteError: APIError | null = null;
+
+  const deleteMember = async () => {
+    try {
+      await fastFetchClient(`/members/${data.member.id}`, "DELETE");
+
+      toggleDeleteOpen();
+      addToast({
+        header: "Deleted member",
+        body: `Successfully deleted member ${data.member.name}!`,
+      });
+      goto(`/@${data.member.user.name}`);
+    } catch (e) {
+      deleteName = "";
+      deleteError = e as APIError;
+    }
+  };
+
+  let deleteModalPronoun = "the member's";
+  $: deleteModalPronoun = updateModalPronoun($member.pronouns);
+
+  const updateModalPronoun = (pronouns: Pronoun[]) => {
+    const filtered = pronouns.filter((entry) => entry.status === "favourite");
+    if (filtered.length < 1) return "the member's";
+
+    const split = filtered[0].pronouns.split("/");
+    if (split.length !== 5) return "the member's";
+    return split[2];
+  };
+
+  const updateMember = async () => {
+    const toastId = addToast({
+      header: "Saving changes",
+      body: "Saving changes, please wait...",
+      duration: -1,
+    });
+
+    try {
+      const resp = await apiFetchClient<Member>(`/members/${data.member.id}`, "PATCH", {
+        name: $member.name,
+        display_name: $member.display_name,
+        avatar: $member.avatar,
+        bio: $member.bio,
+        links: $member.links,
+        names: $member.names,
+        pronouns: $member.pronouns,
+        fields: $member.fields,
+        flags: $member.flags.map((flag) => flag.id),
+        unlisted: $member.unlisted,
+      });
+
+      addToast({ header: "Success", body: "Successfully saved changes!" });
+
+      data.member = resp;
+      $member.avatar = null;
+      error = null;
+    } catch (e) {
+      error = e as APIError;
+    } finally {
+      delToast(toastId);
+    }
+  };
+</script>
+
+<svelte:head>
+  <title>Edit member profile - pronouns.cc</title>
+</svelte:head>
+
+<h1>
+  Edit profile
+  <ButtonGroup>
+    <IconButton
+      color="secondary"
+      icon="chevron-left"
+      href="/@{$member.user.name}/{data.member.name}"
+      tooltip="Back to member"
+    />
+    <Button color="success" on:click={() => updateMember()} disabled={!memberNameValid}>Save changes</Button>
+    <Button color="danger" on:click={toggleDeleteOpen}
+      >Delete {data.member.display_name ?? data.member.name}</Button
+    >
+  </ButtonGroup>
+</h1>
+
+{#if error}
+  <ErrorAlert {error} />
+{/if}
+
+<Nav tabs>
+  <NavItem
+    ><ActiveLink href="/@{$member.user.name}/{$member.name}/edit">Names and avatar</ActiveLink
+    ></NavItem
+  >
+  <NavItem
+    ><ActiveLink href="/@{$member.user.name}/{$member.name}/edit/bio">Bio</ActiveLink></NavItem
+  >
+  <NavItem
+    ><ActiveLink href="/@{$member.user.name}/{$member.name}/edit/pronouns">Pronouns</ActiveLink
+    ></NavItem
+  >
+  <NavItem
+    ><ActiveLink href="/@{$member.user.name}/{$member.name}/edit/fields">Fields</ActiveLink
+    ></NavItem
+  >
+  <NavItem
+    ><ActiveLink href="/@{$member.user.name}/{$member.name}/edit/flags">Flags</ActiveLink></NavItem
+  >
+  <NavItem
+    ><ActiveLink href="/@{$member.user.name}/{$member.name}/edit/links">Links</ActiveLink></NavItem
+  >
+  <NavItem
+    ><ActiveLink href="/@{$member.user.name}/{$member.name}/edit/other">Other</ActiveLink></NavItem
+  >
+</Nav>
+
+<div class="mt-3">
+  <slot />
+</div>
+
+<Modal header="Delete member" isOpen={deleteOpen} toggle={toggleDeleteOpen}>
+  <ModalBody>
+    <p>
+      If you want to delete this member, type {deleteModalPronoun} name (<code>{$member.name}</code
+      >) below:
+    </p>
+    <p>
+      <input type="text" class="form-control" bind:value={deleteName} />
+    </p>
+    {#if deleteError}
+      <ErrorAlert error={deleteError} />
+    {/if}
+  </ModalBody>
+  <ModalFooter>
+    <Button color="danger" disabled={deleteName !== $member.name} on:click={deleteMember}>
+      Delete member
+    </Button>
+    <Button color="secondary" on:click={toggleDeleteOpen}>Cancel</Button>
+  </ModalFooter>
+</Modal>
diff --git a/frontend/src/routes/@[username]/[memberName]/edit/+layout.ts b/frontend/src/routes/@[username]/[memberName]/edit/+layout.ts
new file mode 100644
index 0000000..1520af7
--- /dev/null
+++ b/frontend/src/routes/@[username]/[memberName]/edit/+layout.ts
@@ -0,0 +1,31 @@
+import type { PrideFlag, MeUser, APIError, Member, PronounsJson } from "$lib/api/entities";
+import { apiFetchClient } from "$lib/api/fetch";
+import { error, redirect } from "@sveltejs/kit";
+
+import pronounsRaw from "$lib/pronouns.json";
+import type { LayoutLoad } from "./$types";
+const pronouns = pronounsRaw as PronounsJson;
+
+export const ssr = false;
+
+export const load = (async ({ params }) => {
+  try {
+    const user = await apiFetchClient<MeUser>(`/users/@me`);
+    const member = await apiFetchClient<Member>(`/users/@me/members/${params.memberName}`);
+    const flags = await apiFetchClient<PrideFlag[]>("/users/@me/flags");
+
+    if (user.name !== params.username || member.user.name !== params.username || member.name !== params.memberName) {
+        throw redirect(303, `/@${user.name}/${member.name}`);
+    }
+
+    return {
+      user,
+      member,
+      pronouns: pronouns.autocomplete,
+      flags,
+    };
+  } catch (e) {
+    if ("code" in e) throw error(500, e as APIError);
+    throw e;
+  }
+}) satisfies LayoutLoad;
diff --git a/frontend/src/routes/@[username]/[memberName]/edit/+page.svelte b/frontend/src/routes/@[username]/[memberName]/edit/+page.svelte
new file mode 100644
index 0000000..dbd4eaa
--- /dev/null
+++ b/frontend/src/routes/@[username]/[memberName]/edit/+page.svelte
@@ -0,0 +1,151 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+  import prettyBytes from "pretty-bytes";
+  import { encode } from "base64-arraybuffer";
+  import { FormGroup, Icon, Input } from "sveltestrap";
+  import { memberAvatars, type Member } from "$lib/api/entities";
+  import FallbackImage from "$lib/components/FallbackImage.svelte";
+  import EditableName from "$lib/components/edit/EditableName.svelte";
+  import { addToast } from "$lib/toast";
+  import IconButton from "$lib/components/IconButton.svelte";
+  import { memberNameRegex } from "$lib/api/regex";
+
+  const MAX_AVATAR_BYTES = 1_000_000;
+
+  const member = getContext<Writable<Member>>("member");
+  const currentMember = getContext<Writable<Member>>("currentMember");
+
+  // Whether the member's new name is valid.
+  // This is also checked in +layout.svelte, because it's easier to do it twice.
+  let memberNameValid = true;
+  $: memberNameValid = memberNameRegex.test($member.name);
+
+  // The list of avatar files uploaded.
+  // Only the first of these is ever used.
+  let avatar_files: FileList | null;
+  $: getAvatar(avatar_files).then((b64) => ($member.avatar = b64));
+
+  // The variable for a new name being inputted.
+  let newName = "";
+
+  const moveName = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == $member.names.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = $member.names[index];
+    $member.names[index] = $member.names[newIndex];
+    $member.names[newIndex] = temp;
+    $member.names = [...$member.names];
+  };
+
+  const removeName = (index: number) => {
+    $member.names.splice(index, 1);
+    $member.names = [...$member.names];
+  };
+
+  const addName = (event: Event) => {
+    event.preventDefault();
+
+    $member.names = [...$member.names, { value: newName, status: "okay" }];
+    newName = "";
+  };
+
+  const getAvatar = async (list: FileList | null) => {
+    if (!list || list.length === 0) return null;
+    if (list[0].size > MAX_AVATAR_BYTES) {
+      addToast({
+        header: "Avatar too large",
+        body: `This avatar is too large, please resize it (maximum is ${prettyBytes(
+          MAX_AVATAR_BYTES,
+        )}, the file you tried to upload is ${prettyBytes(list[0].size)})`,
+      });
+      return null;
+    }
+
+    const buffer = await list[0].arrayBuffer();
+    const base64 = encode(buffer);
+
+    const uri = `data:${list[0].type};base64,${base64}`;
+    console.log(uri.slice(0, 128));
+
+    return uri;
+  };
+</script>
+
+<div class="row">
+  <div class="col-md">
+    <div class="row">
+      <div class="col-md text-center">
+        {#if $member.avatar === ""}
+          <FallbackImage alt="Current avatar" urls={[]} width={200} />
+        {:else if $member.avatar}
+          <img
+            width={200}
+            height={200}
+            src={$member.avatar}
+            alt="New avatar"
+            class="rounded-circle img-fluid"
+          />
+        {:else}
+          <FallbackImage alt="Current avatar" urls={memberAvatars($currentMember)} 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"
+        />
+        <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>
+          <!-- svelte-ignore a11y-invalid-attribute -->
+          <a href="" on:click={() => ($member.avatar = "")}>Remove avatar</a>
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="col-md">
+    <FormGroup floating label="Name">
+      <Input bind:value={$member.name} />
+      <p class="text-muted mt-1">
+        <Icon name="info-circle-fill" aria-hidden />
+        The member name is only used as part of the link to their profile page.
+      </p>
+    </FormGroup>
+    {#if !memberNameValid}
+      <p class="text-danger-emphasis mb-2">That member name is not valid.</p>
+    {/if}
+    <FormGroup floating label="Display name">
+      <Input bind:value={$member.display_name} />
+    </FormGroup>
+    <p class="text-muted mt-1">
+      <Icon name="info-circle-fill" aria-hidden />
+      Your display name is used in page titles and as a header.
+    </p>
+  </div>
+</div>
+<div>
+  <h4>Names</h4>
+  {#each $member.names as _, index}
+    <EditableName
+      bind:value={$member.names[index].value}
+      bind:status={$member.names[index].status}
+      preferences={$member.user.custom_preferences}
+      moveUp={() => moveName(index, true)}
+      moveDown={() => moveName(index, false)}
+      remove={() => removeName(index)}
+    />
+  {/each}
+  <form class="input-group m-1" on:submit={addName}>
+    <input type="text" class="form-control" bind:value={newName} />
+    <IconButton type="submit" color="success" icon="plus" tooltip="Add name" />
+  </form>
+</div>

From 03311d7004da925af7161d64badc69b3f491c7f8 Mon Sep 17 00:00:00 2001
From: sam <sam@sleepycat.moe>
Date: Mon, 14 Aug 2023 02:03:09 +0200
Subject: [PATCH 09/10] move member edit page to /@user/member/edit

---
 frontend/src/routes/@[username]/+error.svelte |   3 +
 .../[memberName]/edit/+layout.svelte          |  49 ++++-----
 .../@[username]/[memberName]/edit/+layout.ts  |  25 ++++-
 .../[memberName]/edit/bio/+page.svelte        |  29 +++++
 .../[memberName]/edit/fields/+page.svelte     |  53 +++++++++
 .../[memberName]/edit/flags/+page.svelte      | 104 ++++++++++++++++++
 .../[memberName]/edit/links/+page.svelte      |  63 +++++++++++
 .../[memberName]/edit/other/+page.svelte      |  99 +++++++++++++++++
 .../[memberName]/edit/pronouns/+page.svelte   |  84 ++++++++++++++
 9 files changed, 480 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/routes/@[username]/[memberName]/edit/bio/+page.svelte
 create mode 100644 frontend/src/routes/@[username]/[memberName]/edit/fields/+page.svelte
 create mode 100644 frontend/src/routes/@[username]/[memberName]/edit/flags/+page.svelte
 create mode 100644 frontend/src/routes/@[username]/[memberName]/edit/links/+page.svelte
 create mode 100644 frontend/src/routes/@[username]/[memberName]/edit/other/+page.svelte
 create mode 100644 frontend/src/routes/@[username]/[memberName]/edit/pronouns/+page.svelte

diff --git a/frontend/src/routes/@[username]/+error.svelte b/frontend/src/routes/@[username]/+error.svelte
index 4f0292f..611f443 100644
--- a/frontend/src/routes/@[username]/+error.svelte
+++ b/frontend/src/routes/@[username]/+error.svelte
@@ -10,6 +10,9 @@
       >log in again</a
     >.
   </p>
+{:else if $page.error?.code === ErrorCode.NotOwnMember}
+  <h1>Not your member</h1>
+  <p>You can only edit your own members.</p>
 {:else}
   <h1>An error occurred ({$page.status})</h1>
 
diff --git a/frontend/src/routes/@[username]/[memberName]/edit/+layout.svelte b/frontend/src/routes/@[username]/[memberName]/edit/+layout.svelte
index 2f8c259..b5e98a3 100644
--- a/frontend/src/routes/@[username]/[memberName]/edit/+layout.svelte
+++ b/frontend/src/routes/@[username]/[memberName]/edit/+layout.svelte
@@ -107,7 +107,9 @@
       href="/@{$member.user.name}/{data.member.name}"
       tooltip="Back to member"
     />
-    <Button color="success" on:click={() => updateMember()} disabled={!memberNameValid}>Save changes</Button>
+    <Button color="success" on:click={() => updateMember()} disabled={!memberNameValid}>
+      Save changes
+    </Button>
     <Button color="danger" on:click={toggleDeleteOpen}
       >Delete {data.member.display_name ?? data.member.name}</Button
     >
@@ -119,30 +121,27 @@
 {/if}
 
 <Nav tabs>
-  <NavItem
-    ><ActiveLink href="/@{$member.user.name}/{$member.name}/edit">Names and avatar</ActiveLink
-    ></NavItem
-  >
-  <NavItem
-    ><ActiveLink href="/@{$member.user.name}/{$member.name}/edit/bio">Bio</ActiveLink></NavItem
-  >
-  <NavItem
-    ><ActiveLink href="/@{$member.user.name}/{$member.name}/edit/pronouns">Pronouns</ActiveLink
-    ></NavItem
-  >
-  <NavItem
-    ><ActiveLink href="/@{$member.user.name}/{$member.name}/edit/fields">Fields</ActiveLink
-    ></NavItem
-  >
-  <NavItem
-    ><ActiveLink href="/@{$member.user.name}/{$member.name}/edit/flags">Flags</ActiveLink></NavItem
-  >
-  <NavItem
-    ><ActiveLink href="/@{$member.user.name}/{$member.name}/edit/links">Links</ActiveLink></NavItem
-  >
-  <NavItem
-    ><ActiveLink href="/@{$member.user.name}/{$member.name}/edit/other">Other</ActiveLink></NavItem
-  >
+  <NavItem>
+    <ActiveLink href="/@{$member.user.name}/{$member.name}/edit">Names and avatar</ActiveLink>
+  </NavItem>
+  <NavItem>
+    <ActiveLink href="/@{$member.user.name}/{$member.name}/edit/bio">Bio</ActiveLink>
+  </NavItem>
+  <NavItem>
+    <ActiveLink href="/@{$member.user.name}/{$member.name}/edit/pronouns">Pronouns</ActiveLink>
+  </NavItem>
+  <NavItem>
+    <ActiveLink href="/@{$member.user.name}/{$member.name}/edit/fields">Fields</ActiveLink>
+  </NavItem>
+  <NavItem>
+    <ActiveLink href="/@{$member.user.name}/{$member.name}/edit/flags">Flags</ActiveLink>
+  </NavItem>
+  <NavItem>
+    <ActiveLink href="/@{$member.user.name}/{$member.name}/edit/links">Links</ActiveLink>
+  </NavItem>
+  <NavItem>
+    <ActiveLink href="/@{$member.user.name}/{$member.name}/edit/other">Other</ActiveLink>
+  </NavItem>
 </Nav>
 
 <div class="mt-3">
diff --git a/frontend/src/routes/@[username]/[memberName]/edit/+layout.ts b/frontend/src/routes/@[username]/[memberName]/edit/+layout.ts
index 1520af7..faa5c7a 100644
--- a/frontend/src/routes/@[username]/[memberName]/edit/+layout.ts
+++ b/frontend/src/routes/@[username]/[memberName]/edit/+layout.ts
@@ -1,4 +1,11 @@
-import type { PrideFlag, MeUser, APIError, Member, PronounsJson } from "$lib/api/entities";
+import {
+  type PrideFlag,
+  type MeUser,
+  type APIError,
+  type Member,
+  type PronounsJson,
+  ErrorCode,
+} from "$lib/api/entities";
 import { apiFetchClient } from "$lib/api/fetch";
 import { error, redirect } from "@sveltejs/kit";
 
@@ -11,11 +18,21 @@ export const ssr = false;
 export const load = (async ({ params }) => {
   try {
     const user = await apiFetchClient<MeUser>(`/users/@me`);
-    const member = await apiFetchClient<Member>(`/users/@me/members/${params.memberName}`);
+    const member = await apiFetchClient<Member>(
+      `/users/${params.username}/members/${params.memberName}`,
+    );
     const flags = await apiFetchClient<PrideFlag[]>("/users/@me/flags");
 
-    if (user.name !== params.username || member.user.name !== params.username || member.name !== params.memberName) {
-        throw redirect(303, `/@${user.name}/${member.name}`);
+    if (user.id !== member.user.id) {
+      throw { code: ErrorCode.NotOwnMember, message: "Can only edit your own members" } as APIError;
+    }
+
+    if (
+      user.name !== params.username ||
+      member.user.name !== params.username ||
+      member.name !== params.memberName
+    ) {
+      throw redirect(303, `/@${user.name}/${member.name}`);
     }
 
     return {
diff --git a/frontend/src/routes/@[username]/[memberName]/edit/bio/+page.svelte b/frontend/src/routes/@[username]/[memberName]/edit/bio/+page.svelte
new file mode 100644
index 0000000..76eb78b
--- /dev/null
+++ b/frontend/src/routes/@[username]/[memberName]/edit/bio/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+  import { MAX_DESCRIPTION_LENGTH, type Member } from "$lib/api/entities";
+  import { charCount, renderMarkdown } from "$lib/utils";
+  import MarkdownHelp from "$lib/components/edit/MarkdownHelp.svelte";
+  import { Card, CardBody, CardHeader } from "sveltestrap";
+
+  const member = getContext<Writable<Member>>("member");
+</script>
+
+<div class="form">
+  <textarea class="form-control" style="height: 200px;" bind:value={$member.bio} />
+</div>
+<p class="text-muted mt-1">
+  Using {charCount($member.bio || "")}/{MAX_DESCRIPTION_LENGTH} characters
+</p>
+<p class="text-muted my-2">
+  <MarkdownHelp />
+</p>
+{#if $member.bio}
+  <hr />
+  <Card>
+    <CardHeader>Preview</CardHeader>
+    <CardBody>
+      {@html renderMarkdown($member.bio)}
+    </CardBody>
+  </Card>
+{/if}
diff --git a/frontend/src/routes/@[username]/[memberName]/edit/fields/+page.svelte b/frontend/src/routes/@[username]/[memberName]/edit/fields/+page.svelte
new file mode 100644
index 0000000..1134a3c
--- /dev/null
+++ b/frontend/src/routes/@[username]/[memberName]/edit/fields/+page.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+  import { Alert, Button, Icon } from "sveltestrap";
+
+  import type { Member } from "$lib/api/entities";
+  import EditableField from "$lib/components/edit/EditableField.svelte";
+
+  const member = getContext<Writable<Member>>("member");
+
+  const moveField = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == $member.fields.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = $member.fields[index];
+    $member.fields[index] = $member.fields[newIndex];
+    $member.fields[newIndex] = temp;
+    $member.fields = [...$member.fields];
+  };
+
+  const removeField = (index: number) => {
+    $member.fields.splice(index, 1);
+    $member.fields = [...$member.fields];
+  };
+</script>
+
+{#if $member.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 $member.fields as _, index}
+      <EditableField
+        bind:field={$member.fields[index]}
+        preferences={$member.user.custom_preferences}
+        deleteField={() => removeField(index)}
+        moveField={(up) => moveField(index, up)}
+      />
+    {/each}
+  </div>
+</div>
+<div>
+  <Button
+    on:click={() => ($member.fields = [...$member.fields, { name: "New field", entries: [] }])}
+  >
+    <Icon name="plus" aria-hidden /> Add new field
+  </Button>
+</div>
diff --git a/frontend/src/routes/@[username]/[memberName]/edit/flags/+page.svelte b/frontend/src/routes/@[username]/[memberName]/edit/flags/+page.svelte
new file mode 100644
index 0000000..36b754e
--- /dev/null
+++ b/frontend/src/routes/@[username]/[memberName]/edit/flags/+page.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+  import { Alert, ButtonGroup, Input } from "sveltestrap";
+  import type { PageData } from "./$types";
+
+  import type { Member, PrideFlag } from "$lib/api/entities";
+  import IconButton from "$lib/components/IconButton.svelte";
+  import FlagButton from "$lib/components/edit/FlagButton.svelte";
+
+  export let data: PageData;
+
+  const member = getContext<Writable<Member>>("member");
+
+  let flagSearch = "";
+  let filteredFlags: PrideFlag[];
+  $: filteredFlags = filterFlags(flagSearch, data.flags);
+
+  const filterFlags = (search: string, flags: PrideFlag[]) => {
+    return (
+      search
+        ? flags.filter((flag) => flag.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
+        : flags
+    ).slice(0, 25);
+  };
+
+  const addFlag = (flag: PrideFlag) => {
+    $member.flags = [...$member.flags, flag];
+  };
+
+  const moveFlag = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == $member.flags.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = $member.flags[index];
+    $member.flags[index] = $member.flags[newIndex];
+    $member.flags[newIndex] = temp;
+    $member.flags = [...$member.flags];
+  };
+
+  const removeFlag = (index: number) => {
+    $member.flags.splice(index, 1);
+    $member.flags = [...$member.flags];
+  };
+</script>
+
+<div>
+  {#each $member.flags as _, index}
+    <ButtonGroup class="m-1">
+      <IconButton
+        icon="chevron-left"
+        color="secondary"
+        tooltip="Move flag to the left"
+        click={() => moveFlag(index, true)}
+      />
+      <IconButton
+        icon="chevron-right"
+        color="secondary"
+        tooltip="Move flag to the right"
+        click={() => moveFlag(index, false)}
+      />
+      <FlagButton
+        flag={$member.flags[index]}
+        tooltip="Remove this flag from your profile"
+        on:click={() => removeFlag(index)}
+      />
+    </ButtonGroup>
+  {/each}
+</div>
+<hr />
+<div class="row">
+  <div class="col-md">
+    <Input placeholder="Filter flags" bind:value={flagSearch} disabled={data.flags.length === 0} />
+    <div class="p-2">
+      {#each filteredFlags as flag (flag.id)}
+        <FlagButton {flag} tooltip="Add this flag to your profile" on:click={() => addFlag(flag)} />
+      {:else}
+        {#if data.flags.length === 0}
+          You haven't uploaded any flags yet.
+        {:else}
+          There are no flags matching your search <strong>{flagSearch}</strong>.
+        {/if}
+      {/each}
+    </div>
+  </div>
+  <div class="col-md">
+    <Alert color="secondary" fade={false}>
+      {#if data.flags.length === 0}
+        <p><strong>Why can't I see any flags?</strong></p>
+        <p>
+          There are thousands of pride flags, and it would be impossible to bundle all of them by
+          default. Many labels also have multiple different flags that are favoured by different
+          people. Because of this, there are no flags available by default--instead, you can upload
+          flags in your <a href="/settings/flags">settings</a>. Your main profile and your member
+          profiles can all have different flags.
+        </p>
+      {:else}
+        To upload and delete flags, go to your <a href="/settings/flags">settings</a>.
+      {/if}
+    </Alert>
+  </div>
+</div>
diff --git a/frontend/src/routes/@[username]/[memberName]/edit/links/+page.svelte b/frontend/src/routes/@[username]/[memberName]/edit/links/+page.svelte
new file mode 100644
index 0000000..17c9662
--- /dev/null
+++ b/frontend/src/routes/@[username]/[memberName]/edit/links/+page.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+
+  import type { Member } from "$lib/api/entities";
+  import IconButton from "$lib/components/IconButton.svelte";
+
+  const member = getContext<Writable<Member>>("member");
+
+  let newLink = "";
+
+  const addLink = (event: Event) => {
+    event.preventDefault();
+
+    $member.links = [...$member.links, newLink];
+    newLink = "";
+  };
+
+  const removeLink = (index: number) => {
+    $member.links.splice(index, 1);
+    $member.links = [...$member.links];
+  };
+
+  const moveLink = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == $member.links.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = $member.links[index];
+    $member.links[index] = $member.links[newIndex];
+    $member.links[newIndex] = temp;
+    $member.links = [...$member.links];
+  };
+</script>
+
+{#each $member.links as _, index}
+  <div class="input-group m-1">
+    <IconButton
+      icon="chevron-up"
+      color="secondary"
+      tooltip="Move link up"
+      click={() => moveLink(index, true)}
+    />
+    <IconButton
+      icon="chevron-down"
+      color="secondary"
+      tooltip="Move link down"
+      click={() => moveLink(index, false)}
+    />
+    <input type="text" class="form-control" bind:value={$member.links[index]} />
+    <IconButton
+      color="danger"
+      icon="trash3"
+      tooltip="Remove link"
+      click={() => removeLink(index)}
+    />
+  </div>
+{/each}
+<form class="input-group m-1" on:submit={addLink}>
+  <input type="text" class="form-control" bind:value={newLink} />
+  <IconButton type="submit" color="success" icon="plus" tooltip="Add link" />
+</form>
diff --git a/frontend/src/routes/@[username]/[memberName]/edit/other/+page.svelte b/frontend/src/routes/@[username]/[memberName]/edit/other/+page.svelte
new file mode 100644
index 0000000..ca29a26
--- /dev/null
+++ b/frontend/src/routes/@[username]/[memberName]/edit/other/+page.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+  import { DateTime } from "luxon";
+  import { Button, ButtonGroup, Icon } from "sveltestrap";
+
+  import type { APIError, Member } from "$lib/api/entities";
+  import { PUBLIC_SHORT_BASE } from "$env/static/public";
+  import IconButton from "$lib/components/IconButton.svelte";
+  import { apiFetchClient } from "$lib/api/fetch";
+  import { addToast } from "$lib/toast";
+  import type { PageData } from "./$types";
+  import ErrorAlert from "$lib/components/ErrorAlert.svelte";
+
+  export let data: PageData;
+
+  const member = getContext<Writable<Member>>("member");
+
+  let error: APIError | null = null;
+
+  const now = DateTime.now().toLocal();
+  let canRerollSid: boolean;
+  $: canRerollSid =
+    now.diff(DateTime.fromISO(data.user.last_sid_reroll).toLocal(), "hours").hours >= 1;
+
+  const rerollSid = async () => {
+    try {
+      const resp = await apiFetchClient<Member>(`/members/${data.member.id}/reroll`);
+      addToast({ header: "Success", body: "Rerolled short ID!" });
+      error = null;
+      $member.sid = resp.sid;
+    } catch (e) {
+      error = e as APIError;
+    }
+  };
+
+  const copyShortURL = async () => {
+    const url = `${PUBLIC_SHORT_BASE}/${data.member.sid}`;
+    await navigator.clipboard.writeText(url);
+    addToast({ body: "Copied the short link to your clipboard!", duration: 2000 });
+  };
+</script>
+
+{#if error}
+  <ErrorAlert {error} />
+{/if}
+
+<div class="row">
+  <div class="col-md">
+    <div class="form-check">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        bind:checked={$member.unlisted}
+        id="unlisted"
+      />
+      <label class="form-check-label" for="unlisted">Hide from member list</label>
+    </div>
+    <p class="text-muted mt-1">
+      {#if data.user.list_private}
+        <Icon name="exclamation-triangle-fill" aria-hidden />
+        Your member list is currently hidden, so <strong>this setting has no effect</strong>. If you
+        want to make your member list visible again,
+        <a href="/@{$member.user.name}/other">edit your user profile</a>.
+        <br />
+      {/if}
+      <Icon name="info-circle-fill" aria-hidden />
+      This <em>only</em> hides this member from your member list.
+      <strong>
+        This member will still be visible to anyone at
+        <code class="text-nowrap">pronouns.cc/@{$member.user.name}/{$member.name}</code>.
+      </strong>
+    </p>
+  </div>
+  {#if PUBLIC_SHORT_BASE}
+    <div class="col-md">
+      <p>
+        Current short ID: <code>{$member.sid}</code>
+        <ButtonGroup class="mb-1">
+          <Button color="secondary" disabled={!canRerollSid} on:click={() => rerollSid()}
+            >Reroll short ID</Button
+          >
+          <IconButton
+            icon="link-45deg"
+            tooltip="Copy short link"
+            color="secondary"
+            click={copyShortURL}
+          />
+        </ButtonGroup>
+        <br />
+        <span class="text-muted">
+          <Icon name="info-circle-fill" aria-hidden />
+          This ID is used in <code>prns.cc</code> links. You can reroll one short ID every hour (shared
+          between your main profile and all members) by pressing the button above.
+        </span>
+      </p>
+    </div>
+  {/if}
+</div>
diff --git a/frontend/src/routes/@[username]/[memberName]/edit/pronouns/+page.svelte b/frontend/src/routes/@[username]/[memberName]/edit/pronouns/+page.svelte
new file mode 100644
index 0000000..a031c6f
--- /dev/null
+++ b/frontend/src/routes/@[username]/[memberName]/edit/pronouns/+page.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+  import type { Member } from "$lib/api/entities";
+  import { Button, Icon, Popover } from "sveltestrap";
+  import EditablePronouns from "$lib/components/edit/EditablePronouns.svelte";
+  import IconButton from "$lib/components/IconButton.svelte";
+  import type { PageData } from "./$types";
+
+  export let data: PageData;
+
+  const member = getContext<Writable<Member>>("member");
+  let newPronouns = "";
+
+  const movePronoun = (index: number, up: boolean) => {
+    if (up && index == 0) return;
+    if (!up && index == $member.pronouns.length - 1) return;
+
+    const newIndex = up ? index - 1 : index + 1;
+
+    const temp = $member.pronouns[index];
+    $member.pronouns[index] = $member.pronouns[newIndex];
+    $member.pronouns[newIndex] = temp;
+    $member.pronouns = [...$member.pronouns];
+  };
+
+  const addPronouns = (event: Event) => {
+    event.preventDefault();
+
+    if (newPronouns in data.pronouns) {
+      const fullSet = data.pronouns[newPronouns];
+      $member.pronouns = [
+        ...$member.pronouns,
+        {
+          pronouns: fullSet.pronouns.join("/"),
+          display_text: fullSet.display || null,
+          status: "okay",
+        },
+      ];
+    } else {
+      $member.pronouns = [
+        ...$member.pronouns,
+        { pronouns: newPronouns, display_text: null, status: "okay" },
+      ];
+    }
+    newPronouns = "";
+  };
+
+  const removePronoun = (index: number) => {
+    $member.pronouns.splice(index, 1);
+    $member.pronouns = [...$member.pronouns];
+  };
+</script>
+
+{#each $member.pronouns as _, index}
+  <EditablePronouns
+    bind:pronoun={$member.pronouns[index]}
+    preferences={$member.user.custom_preferences}
+    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>

From 5fe5f09032d0c592c57761bd967ca85a273a57e9 Mon Sep 17 00:00:00 2001
From: sam <sam@sleepycat.moe>
Date: Mon, 14 Aug 2023 02:14:12 +0200
Subject: [PATCH 10/10] redirect from /edit/member/{id} to new page, add error
 page for redirects

---
 frontend/src/routes/+error.svelte             |   6 +-
 frontend/src/routes/@[username]/+error.svelte |   4 +
 frontend/src/routes/edit/+error.svelte        |  39 +
 .../src/routes/edit/member/[id]/+page.svelte  | 808 ------------------
 frontend/src/routes/edit/member/[id]/+page.ts |  32 +-
 frontend/src/routes/edit/profile/+page.svelte |   1 -
 frontend/src/routes/edit/profile/+page.ts     |   9 +-
 7 files changed, 74 insertions(+), 825 deletions(-)
 create mode 100644 frontend/src/routes/edit/+error.svelte
 delete mode 100644 frontend/src/routes/edit/member/[id]/+page.svelte
 delete mode 100644 frontend/src/routes/edit/profile/+page.svelte

diff --git a/frontend/src/routes/+error.svelte b/frontend/src/routes/+error.svelte
index 9d7d887..4b46c30 100644
--- a/frontend/src/routes/+error.svelte
+++ b/frontend/src/routes/+error.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
   import { page } from "$app/stores";
-    import { ErrorCode } from "$lib/api/entities";
+  import { ErrorCode } from "$lib/api/entities";
 </script>
 
+<svelte:head>
+  <title>Error - pronouns.cc</title>
+</svelte:head>
+
 <h1>An error occurred ({$page.status})</h1>
 
 {#if $page.error?.code === ErrorCode.NotFound}
diff --git a/frontend/src/routes/@[username]/+error.svelte b/frontend/src/routes/@[username]/+error.svelte
index 611f443..8ff04db 100644
--- a/frontend/src/routes/@[username]/+error.svelte
+++ b/frontend/src/routes/@[username]/+error.svelte
@@ -3,6 +3,10 @@
   import { ErrorCode } from "$lib/api/entities";
 </script>
 
+<svelte:head>
+  <title>Error - pronouns.cc</title>
+</svelte:head>
+
 {#if $page.error?.code === ErrorCode.Forbidden || $page.error?.code === ErrorCode.InvalidToken}
   <h1>Not logged in</h1>
   <p>
diff --git a/frontend/src/routes/edit/+error.svelte b/frontend/src/routes/edit/+error.svelte
new file mode 100644
index 0000000..8ff04db
--- /dev/null
+++ b/frontend/src/routes/edit/+error.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  import { ErrorCode } from "$lib/api/entities";
+</script>
+
+<svelte:head>
+  <title>Error - pronouns.cc</title>
+</svelte:head>
+
+{#if $page.error?.code === ErrorCode.Forbidden || $page.error?.code === ErrorCode.InvalidToken}
+  <h1>Not logged in</h1>
+  <p>
+    Either you aren't logged in, or your login has expired. Please <a href="/auth/login"
+      >log in again</a
+    >.
+  </p>
+{:else if $page.error?.code === ErrorCode.NotOwnMember}
+  <h1>Not your member</h1>
+  <p>You can only edit your own members.</p>
+{:else}
+  <h1>An error occurred ({$page.status})</h1>
+
+  {#if $page.status === 404}
+    <p>The user you were looking for couldn't be found. Please check for any typos.</p>
+  {:else if $page.status === 429}
+    <p>You've exceeded a rate limit, please try again later.</p>
+  {:else if $page.status === 500}
+    <p>An internal error occurred. Please try again later.</p>
+    <p>
+      If this error keeps happening, please <a
+        href="https://codeberg.org/pronounscc/pronouns.cc/issues"
+        target="_blank"
+        rel="noreferrer">file a bug report</a
+      > with an explanation of what you did to cause the error.
+    </p>
+  {/if}
+
+  <p>Error message: <code>{$page.error?.message}</code></p>
+{/if}
diff --git a/frontend/src/routes/edit/member/[id]/+page.svelte b/frontend/src/routes/edit/member/[id]/+page.svelte
deleted file mode 100644
index 3799a7d..0000000
--- a/frontend/src/routes/edit/member/[id]/+page.svelte
+++ /dev/null
@@ -1,808 +0,0 @@
-<script lang="ts">
-  import { goto } from "$app/navigation";
-  import {
-    MAX_DESCRIPTION_LENGTH,
-    memberAvatars,
-    type APIError,
-    type Field,
-    type FieldEntry,
-    type Member,
-    type Pronoun,
-    type PrideFlag,
-  } from "$lib/api/entities";
-  import FallbackImage from "$lib/components/FallbackImage.svelte";
-  import {
-    Button,
-    ButtonGroup,
-    FormGroup,
-    Icon,
-    Input,
-    Modal,
-    ModalBody,
-    ModalFooter,
-    Popover,
-    TabContent,
-    TabPane,
-    Card,
-    CardBody,
-    CardHeader,
-    Alert,
-  } from "sveltestrap";
-  import { DateTime } from "luxon";
-  import { encode } from "base64-arraybuffer";
-  import prettyBytes from "pretty-bytes";
-  import { PUBLIC_SHORT_BASE } from "$env/static/public";
-  import { apiFetchClient, fastFetchClient } from "$lib/api/fetch";
-  import IconButton from "$lib/components/IconButton.svelte";
-  import EditableField from "$lib/components/edit/EditableField.svelte";
-  import EditableName from "$lib/components/edit/EditableName.svelte";
-  import EditablePronouns from "$lib/components/edit/EditablePronouns.svelte";
-  import ErrorAlert from "$lib/components/ErrorAlert.svelte";
-  import type { PageData, Snapshot } from "./$types";
-  import { addToast, delToast } from "$lib/toast";
-  import { memberNameRegex } from "$lib/api/regex";
-  import { charCount, renderMarkdown } from "$lib/utils";
-  import MarkdownHelp from "$lib/components/edit/MarkdownHelp.svelte";
-  import FlagButton from "$lib/components/edit/FlagButton.svelte";
-
-  const MAX_AVATAR_BYTES = 1_000_000;
-
-  export let data: PageData;
-
-  if (data.user.id !== data.member.user.id) {
-    addToast({ header: "Not your member", body: "You cannot edit another user's member." });
-    goto(`/@${data.member.user.name}/${data.member.name}`);
-  }
-
-  let error: APIError | null = null;
-
-  let bio: string = data.member.bio || "";
-  let name: string = data.member.name;
-  let display_name: string = data.member.display_name || "";
-  let links: string[] = window.structuredClone(data.member.links);
-  let names: FieldEntry[] = window.structuredClone(data.member.names);
-  let pronouns: Pronoun[] = window.structuredClone(data.member.pronouns);
-  let fields: Field[] = window.structuredClone(data.member.fields);
-  let flags: PrideFlag[] = window.structuredClone(data.member.flags);
-  let unlisted: boolean = data.member.unlisted || false;
-
-  let memberNameValid = true;
-  $: memberNameValid = memberNameRegex.test(name);
-
-  let avatar: string | null;
-  let avatar_files: FileList | null;
-
-  let newName = "";
-  let newPronouns = "";
-  let newLink = "";
-
-  let flagSearch = "";
-  let filteredFlags: PrideFlag[];
-  $: filteredFlags = filterFlags(flagSearch, data.flags);
-
-  const filterFlags = (search: string, flags: PrideFlag[]) => {
-    return (
-      search
-        ? flags.filter((flag) => flag.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
-        : flags
-    ).slice(0, 25);
-  };
-
-  let modified = false;
-
-  $: modified = isModified(
-    data.member,
-    bio,
-    name,
-    display_name,
-    links,
-    names,
-    pronouns,
-    fields,
-    flags,
-    avatar,
-    unlisted,
-  );
-  $: getAvatar(avatar_files).then((b64) => (avatar = b64));
-
-  const isModified = (
-    member: Member,
-    bio: string,
-    name: string,
-    display_name: string,
-    links: string[],
-    names: FieldEntry[],
-    pronouns: Pronoun[],
-    fields: Field[],
-    flags: PrideFlag[],
-    avatar: string | null,
-    unlisted: boolean,
-  ) => {
-    if (name !== member.name) return true;
-    if (bio !== member.bio) return true;
-    if (display_name !== member.display_name) return true;
-    if (!linksEqual(links, member.links)) return true;
-    if (!fieldsEqual(fields, member.fields)) return true;
-    if (!flagsEqual(flags, member.flags)) return true;
-    if (!namesEqual(names, member.names)) return true;
-    if (!pronounsEqual(pronouns, member.pronouns)) return true;
-    if (avatar !== null) return true;
-    if (unlisted !== member.unlisted) return true;
-
-    return false;
-  };
-
-  const fieldsEqual = (arr1: Field[], arr2: Field[]) => {
-    if (arr1?.length !== arr2?.length) return false;
-    if (!arr1.every((_, i) => arr1[i].entries.length === arr2[i].entries.length)) return false;
-    if (!arr1.every((_, i) => arr1[i].name === arr2[i].name)) return false;
-
-    return arr1.every((_, i) =>
-      arr1[i].entries.every(
-        (entry, j) =>
-          entry.value === arr2[i].entries[j].value && entry.status === arr2[i].entries[j].status,
-      ),
-    );
-  };
-
-  const namesEqual = (arr1: FieldEntry[], arr2: FieldEntry[]) => {
-    if (arr1?.length !== arr2?.length) return false;
-    if (!arr1.every((_, i) => arr1[i].value === arr2[i].value)) return false;
-    if (!arr1.every((_, i) => arr1[i].status === arr2[i].status)) return false;
-
-    return true;
-  };
-
-  const pronounsEqual = (arr1: Pronoun[], arr2: Pronoun[]) => {
-    if (arr1?.length !== arr2?.length) return false;
-    if (!arr1.every((_, i) => arr1[i].pronouns === arr2[i].pronouns)) return false;
-    if (!arr1.every((_, i) => arr1[i].display_text === arr2[i].display_text)) return false;
-    if (!arr1.every((_, i) => arr1[i].status === arr2[i].status)) return false;
-
-    return true;
-  };
-
-  const linksEqual = (arr1: string[], arr2: string[]) => {
-    if (arr1.length !== arr2.length) return false;
-    return arr1.every((_, i) => arr1[i] === arr2[i]);
-  };
-
-  const flagsEqual = (arr1: PrideFlag[], arr2: PrideFlag[]) => {
-    if (arr1.length !== arr2.length) return false;
-    return arr1.every((_, i) => arr1[i].id === arr2[i].id);
-  };
-
-  const getAvatar = async (list: FileList | null) => {
-    if (!list || list.length === 0) return null;
-    if (list[0].size > MAX_AVATAR_BYTES) {
-      addToast({
-        header: "Avatar too large",
-        body: `This avatar is too large, please resize it (maximum is ${prettyBytes(
-          MAX_AVATAR_BYTES,
-        )}, the file you tried to upload is ${prettyBytes(list[0].size)})`,
-      });
-      return null;
-    }
-
-    const buffer = await list[0].arrayBuffer();
-    const base64 = encode(buffer);
-
-    const uri = `data:${list[0].type};base64,${base64}`;
-
-    return uri;
-  };
-
-  const moveName = (index: number, up: boolean) => {
-    if (up && index == 0) return;
-    if (!up && index == names.length - 1) return;
-
-    const newIndex = up ? index - 1 : index + 1;
-
-    const temp = names[index];
-    names[index] = names[newIndex];
-    names[newIndex] = temp;
-  };
-
-  const movePronoun = (index: number, up: boolean) => {
-    if (up && index == 0) return;
-    if (!up && index == pronouns.length - 1) return;
-
-    const newIndex = up ? index - 1 : index + 1;
-
-    const temp = pronouns[index];
-    pronouns[index] = pronouns[newIndex];
-    pronouns[newIndex] = temp;
-  };
-
-  const moveField = (index: number, up: boolean) => {
-    if (up && index == 0) return;
-    if (!up && index == fields.length - 1) return;
-
-    const newIndex = up ? index - 1 : index + 1;
-
-    const temp = fields[index];
-    fields[index] = fields[newIndex];
-    fields[newIndex] = temp;
-  };
-
-  const moveLink = (index: number, up: boolean) => {
-    if (up && index == 0) return;
-    if (!up && index == links.length - 1) return;
-
-    const newIndex = up ? index - 1 : index + 1;
-
-    const temp = links[index];
-    links[index] = links[newIndex];
-    links[newIndex] = temp;
-  };
-
-  const moveFlag = (index: number, up: boolean) => {
-    if (up && index == 0) return;
-    if (!up && index == flags.length - 1) return;
-
-    const newIndex = up ? index - 1 : index + 1;
-
-    const temp = flags[index];
-    flags[index] = flags[newIndex];
-    flags[newIndex] = temp;
-  };
-
-  const addFlag = (flag: PrideFlag) => {
-    flags = [...flags, flag];
-  };
-
-  const removeFlag = (index: number) => {
-    flags.splice(index, 1);
-    flags = [...flags];
-  };
-
-  const addName = (event: Event) => {
-    event.preventDefault();
-
-    names = [...names, { value: newName, status: "okay" }];
-    newName = "";
-  };
-
-  const addPronouns = (event: Event) => {
-    event.preventDefault();
-
-    if (newPronouns in data.pronouns) {
-      const fullSet = data.pronouns[newPronouns];
-      pronouns = [
-        ...pronouns,
-        {
-          pronouns: fullSet.pronouns.join("/"),
-          display_text: fullSet.display || null,
-          status: "okay",
-        },
-      ];
-    } else {
-      pronouns = [...pronouns, { pronouns: newPronouns, display_text: null, status: "okay" }];
-    }
-    newPronouns = "";
-  };
-
-  const addLink = (event: Event) => {
-    event.preventDefault();
-
-    links = [...links, newLink];
-    newLink = "";
-  };
-
-  const removeName = (index: number) => {
-    names.splice(index, 1);
-    names = [...names];
-  };
-
-  const removePronoun = (index: number) => {
-    pronouns.splice(index, 1);
-    pronouns = [...pronouns];
-  };
-
-  const removeLink = (index: number) => {
-    links.splice(index, 1);
-    links = [...links];
-  };
-
-  const removeField = (index: number) => {
-    fields.splice(index, 1);
-    fields = [...fields];
-  };
-
-  const updateMember = async () => {
-    const toastId = addToast({
-      header: "Saving changes",
-      body: "Saving changes, please wait...",
-      duration: -1,
-    });
-
-    try {
-      const resp = await apiFetchClient<Member>(`/members/${data.member.id}`, "PATCH", {
-        name,
-        display_name,
-        avatar,
-        bio,
-        links,
-        names,
-        pronouns,
-        fields,
-        flags: flags.map((flag) => flag.id),
-        unlisted,
-      });
-
-      addToast({ header: "Success", body: "Successfully saved changes!" });
-
-      data.member = resp;
-      avatar = null;
-      error = null;
-    } catch (e) {
-      error = e as APIError;
-    } finally {
-      delToast(toastId);
-    }
-  };
-
-  const deleteMember = async () => {
-    try {
-      await fastFetchClient(`/members/${data.member.id}`, "DELETE");
-
-      toggleDeleteOpen();
-      addToast({
-        header: "Deleted member",
-        body: `Successfully deleted member ${data.member.name}!`,
-      });
-      goto(`/@${data.member.user.name}`);
-    } catch (e) {
-      deleteName = "";
-      deleteError = e as APIError;
-    }
-  };
-
-  let deleteModalPronoun = "the member's";
-  $: deleteModalPronoun = updateModalPronoun(pronouns);
-
-  const updateModalPronoun = (pronouns: Pronoun[]) => {
-    const filtered = pronouns.filter((entry) => entry.status === "favourite");
-    if (filtered.length < 1) return "the member's";
-
-    const split = filtered[0].pronouns.split("/");
-    if (split.length !== 5) return "the member's";
-    return split[2];
-  };
-
-  let deleteOpen = false;
-  const toggleDeleteOpen = () => (deleteOpen = !deleteOpen);
-  let deleteName = "";
-  let deleteError: APIError | null = null;
-
-  const now = DateTime.now().toLocal();
-  let canRerollSid: boolean;
-  $: canRerollSid =
-    now.diff(DateTime.fromISO(data.user.last_sid_reroll).toLocal(), "hours").hours >= 1;
-
-  const rerollSid = async () => {
-    try {
-      const resp = await apiFetchClient<Member>(`/members/${data.member.id}/reroll`);
-      addToast({ header: "Success", body: "Rerolled short ID!" });
-      error = null;
-      data.member.sid = resp.sid;
-    } catch (e) {
-      error = e as APIError;
-    }
-  };
-
-  const copyShortURL = async () => {
-    const url = `${PUBLIC_SHORT_BASE}/${data.member.sid}`;
-    await navigator.clipboard.writeText(url);
-    addToast({ body: "Copied the short link to your clipboard!", duration: 2000 });
-  };
-
-  interface SnapshotData {
-    bio: string;
-    name: string;
-    display_name: string;
-    links: string[];
-    names: FieldEntry[];
-    pronouns: Pronoun[];
-    fields: Field[];
-    flags: PrideFlag[];
-    unlisted: boolean;
-
-    avatar: string | null;
-    newName: string;
-    newPronouns: string;
-    newLink: string;
-  }
-
-  export const snapshot: Snapshot<SnapshotData> = {
-    capture: () => ({
-      bio,
-      name,
-      display_name,
-      links,
-      names,
-      pronouns,
-      fields,
-      flags,
-      unlisted,
-      avatar,
-      newName,
-      newPronouns,
-      newLink,
-    }),
-    restore: (value) => {
-      bio = value.bio;
-      name = value.name;
-      display_name = value.display_name;
-      links = value.links;
-      names = value.names;
-      pronouns = value.pronouns;
-      fields = value.fields;
-      flags = value.flags;
-      unlisted = value.unlisted;
-      avatar = value.avatar;
-      newName = value.newName;
-      newPronouns = value.newPronouns;
-      newLink = value.newLink;
-    },
-  };
-</script>
-
-<svelte:head>
-  <title>Edit member profile - pronouns.cc</title>
-</svelte:head>
-
-<h1>
-  Edit member profile
-  <ButtonGroup>
-    <IconButton
-      color="secondary"
-      icon="chevron-left"
-      href="/@{data.member.user.name}/{data.member.name}"
-      tooltip="Back to member"
-    />
-    {#if modified}
-      <Button color="success" on:click={() => updateMember()} disabled={!memberNameValid}
-        >Save changes</Button
-      >
-    {/if}
-    <Button color="danger" on:click={toggleDeleteOpen}
-      >Delete {data.member.display_name ?? data.member.name}</Button
-    >
-  </ButtonGroup>
-</h1>
-
-<Modal header="Delete member" isOpen={deleteOpen} toggle={toggleDeleteOpen}>
-  <ModalBody>
-    <p>
-      If you want to delete this member, type {deleteModalPronoun} name (<code
-        >{data.member.name}</code
-      >) below:
-    </p>
-    <p>
-      <input type="text" class="form-control" bind:value={deleteName} />
-    </p>
-    {#if deleteError}
-      <ErrorAlert error={deleteError} />
-    {/if}
-  </ModalBody>
-  <ModalFooter>
-    <Button color="danger" disabled={deleteName !== data.member.name} on:click={deleteMember}>
-      Delete member
-    </Button>
-    <Button color="secondary" on:click={toggleDeleteOpen}>Cancel</Button>
-  </ModalFooter>
-</Modal>
-
-{#if error}
-  <ErrorAlert {error} />
-{/if}
-
-<TabContent>
-  <TabPane tabId="avatar" tab="Names and avatar" active>
-    <div class="row mt-3">
-      <div class="col-md">
-        <div class="row">
-          <div class="col-md text-center">
-            {#if avatar === ""}
-              <FallbackImage alt="Current avatar" urls={[]} width={200} />
-            {:else if avatar}
-              <img
-                width={200}
-                height={200}
-                src={avatar}
-                alt="New avatar"
-                class="rounded-circle img-fluid"
-              />
-            {:else}
-              <FallbackImage alt="Current avatar" urls={memberAvatars(data.member)} 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"
-            />
-            <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>
-              <!-- svelte-ignore a11y-invalid-attribute -->
-              <a href="" on:click={() => (avatar = "")}>Remove avatar</a>
-            </p>
-          </div>
-        </div>
-      </div>
-      <div class="col-md">
-        <FormGroup floating label="Name">
-          <Input bind:value={name} />
-          <p class="text-muted mt-1">
-            <Icon name="info-circle-fill" aria-hidden />
-            The member name is only used as part of the link to their profile page.
-          </p>
-        </FormGroup>
-        {#if !memberNameValid}
-          <p class="text-danger-emphasis mb-2">That member name is not valid.</p>
-        {/if}
-        <FormGroup floating label="Display name">
-          <Input bind:value={display_name} />
-        </FormGroup>
-        <p class="text-muted mt-1">
-          <Icon name="info-circle-fill" aria-hidden />
-          Your display name is used in page titles and as a header.
-        </p>
-      </div>
-    </div>
-    <div>
-      <h4>Names</h4>
-      {#each names as _, index}
-        <EditableName
-          bind:value={names[index].value}
-          bind:status={names[index].status}
-          preferences={data.user.custom_preferences}
-          moveUp={() => moveName(index, true)}
-          moveDown={() => moveName(index, false)}
-          remove={() => removeName(index)}
-        />
-      {/each}
-      <form class="input-group m-1" on:submit={addName}>
-        <input type="text" class="form-control" bind:value={newName} />
-        <IconButton type="submit" color="success" icon="plus" tooltip="Add name" />
-      </form>
-    </div>
-  </TabPane>
-  <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 {charCount(bio)}/{MAX_DESCRIPTION_LENGTH} characters
-      </p>
-      <p class="text-muted my-2">
-        <MarkdownHelp />
-      </p>
-      {#if bio}
-        <hr />
-        <Card>
-          <CardHeader>Preview</CardHeader>
-          <CardBody>
-            {@html renderMarkdown(bio)}
-          </CardBody>
-        </Card>
-      {/if}
-    </div>
-  </TabPane>
-  <TabPane tabId="pronouns" tab="Pronouns">
-    <div class="mt-3">
-      <div class="col-md">
-        {#each pronouns as _, index}
-          <EditablePronouns
-            bind:pronoun={pronouns[index]}
-            preferences={data.user.custom_preferences}
-            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.member.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]}
-            preferences={data.user.custom_preferences}
-            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="flags" tab="Flags">
-    <div class="mt-3">
-      {#each flags as _, index}
-        <ButtonGroup class="m-1">
-          <IconButton
-            icon="chevron-left"
-            color="secondary"
-            tooltip="Move flag to the left"
-            click={() => moveFlag(index, true)}
-          />
-          <IconButton
-            icon="chevron-right"
-            color="secondary"
-            tooltip="Move flag to the right"
-            click={() => moveFlag(index, false)}
-          />
-          <FlagButton
-            flag={flags[index]}
-            tooltip="Remove this flag from your profile"
-            on:click={() => removeFlag(index)}
-          />
-        </ButtonGroup>
-      {/each}
-    </div>
-    <hr />
-    <div class="row">
-      <div class="col-md">
-        <Input
-          placeholder="Filter flags"
-          bind:value={flagSearch}
-          disabled={data.flags.length === 0}
-        />
-        <div class="p-2">
-          {#each filteredFlags as flag (flag.id)}
-            <FlagButton
-              {flag}
-              tooltip="Add this flag to your profile"
-              on:click={() => addFlag(flag)}
-            />
-          {:else}
-            {#if data.flags.length === 0}
-              You haven't uploaded any flags yet.
-            {:else}
-              There are no flags matching your search <strong>{flagSearch}</strong>.
-            {/if}
-          {/each}
-        </div>
-      </div>
-      <div class="col-md">
-        <Alert color="secondary" fade={false}>
-          {#if data.flags.length === 0}
-            <p><strong>Why can't I see any flags?</strong></p>
-            <p>
-              There are thousands of pride flags, and it would be impossible to bundle all of them
-              by default. Many labels also have multiple different flags that are favoured by
-              different people. Because of this, there are no flags available by default--instead,
-              you can upload flags in your <a href="/settings/flags">settings</a>. Your main profile
-              and your member profiles can all have different flags.
-            </p>
-          {:else}
-            To upload and delete flags, go to your <a href="/settings/flags">settings</a>.
-          {/if}
-        </Alert>
-      </div>
-    </div>
-  </TabPane>
-  <TabPane tabId="links" tab="Links">
-    <div class="mt-3">
-      {#each links as _, index}
-        <div class="input-group m-1">
-          <IconButton
-            icon="chevron-up"
-            color="secondary"
-            tooltip="Move link up"
-            click={() => moveLink(index, true)}
-          />
-          <IconButton
-            icon="chevron-down"
-            color="secondary"
-            tooltip="Move link down"
-            click={() => moveLink(index, false)}
-          />
-          <input type="text" class="form-control" bind:value={links[index]} />
-          <IconButton
-            color="danger"
-            icon="trash3"
-            tooltip="Remove link"
-            click={() => removeLink(index)}
-          />
-        </div>
-      {/each}
-      <form class="input-group m-1" on:submit={addLink}>
-        <input type="text" class="form-control" bind:value={newLink} />
-        <IconButton type="submit" color="success" icon="plus" tooltip="Add link" />
-      </form>
-    </div>
-  </TabPane>
-  <TabPane tabId="other" tab="Other">
-    <div class="row mt-3">
-      <div class="col-md">
-        <div class="form-check">
-          <input class="form-check-input" type="checkbox" bind:checked={unlisted} id="unlisted" />
-          <label class="form-check-label" for="unlisted">Hide from member list</label>
-        </div>
-        <p class="text-muted mt-1">
-          {#if data.user.list_private}
-            <Icon name="exclamation-triangle-fill" aria-hidden />
-            Your member list is currently hidden, so <strong>this setting has no effect</strong>. If
-            you want to make your member list visible again,
-            <a href="/@{data.user.name}/other">edit your user profile</a>.
-            <br />
-          {/if}
-          <Icon name="info-circle-fill" aria-hidden />
-          This <em>only</em> hides this member from your member list.
-          <strong>
-            This member will still be visible to anyone at
-            <code class="text-nowrap">pronouns.cc/@{data.user.name}/{data.member.name}</code>.
-          </strong>
-        </p>
-      </div>
-      {#if PUBLIC_SHORT_BASE}
-        <div class="col-md">
-          <p>
-            Current short ID: <code>{data.member.sid}</code>
-            <ButtonGroup class="mb-1">
-              <Button color="secondary" disabled={!canRerollSid} on:click={() => rerollSid()}
-                >Reroll short ID</Button
-              >
-              <IconButton
-                icon="link-45deg"
-                tooltip="Copy short link"
-                color="secondary"
-                click={copyShortURL}
-              />
-            </ButtonGroup>
-            <br />
-            <span class="text-muted">
-              <Icon name="info-circle-fill" aria-hidden />
-              This ID is used in <code>prns.cc</code> links. You can reroll one short ID every hour (shared
-              between your main profile and all members) by pressing the button above.
-            </span>
-          </p>
-        </div>
-      {/if}
-    </div>
-  </TabPane>
-</TabContent>
diff --git a/frontend/src/routes/edit/member/[id]/+page.ts b/frontend/src/routes/edit/member/[id]/+page.ts
index eeb532d..dd6c34a 100644
--- a/frontend/src/routes/edit/member/[id]/+page.ts
+++ b/frontend/src/routes/edit/member/[id]/+page.ts
@@ -1,9 +1,6 @@
-import type { PrideFlag, MeUser, APIError, Member, PronounsJson } from "$lib/api/entities";
+import { ErrorCode, type APIError, type Member, type MeUser } from "$lib/api/entities";
 import { apiFetchClient } from "$lib/api/fetch";
-import { error } from "@sveltejs/kit";
-
-import pronounsRaw from "$lib/pronouns.json";
-const pronouns = pronounsRaw as PronounsJson;
+import { error, redirect } from "@sveltejs/kit";
 
 export const ssr = false;
 
@@ -11,15 +8,24 @@ export const load = async ({ params }) => {
   try {
     const user = await apiFetchClient<MeUser>(`/users/@me`);
     const member = await apiFetchClient<Member>(`/members/${params.id}`);
-    const flags = await apiFetchClient<PrideFlag[]>("/users/@me/flags");
 
-    return {
-      user,
-      member,
-      pronouns: pronouns.autocomplete,
-      flags,
-    };
+    if (user.id !== member.user.id) {
+      throw {
+        code: ErrorCode.NotOwnMember,
+        message: "You can only edit your own members.",
+      } as APIError;
+    }
+
+    throw redirect(303, `/@${user.name}/${member.name}/edit`);
   } catch (e) {
-    throw error((e as APIError).code, e as APIError);
+    if (
+      (e as APIError).code === ErrorCode.Forbidden ||
+      (e as APIError).code === ErrorCode.InvalidToken ||
+      (e as APIError).code === ErrorCode.NotOwnMember
+    ) {
+      throw error(403, e as APIError);
+    }
+
+    throw e;
   }
 };
diff --git a/frontend/src/routes/edit/profile/+page.svelte b/frontend/src/routes/edit/profile/+page.svelte
deleted file mode 100644
index a8beed5..0000000
--- a/frontend/src/routes/edit/profile/+page.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<div />
diff --git a/frontend/src/routes/edit/profile/+page.ts b/frontend/src/routes/edit/profile/+page.ts
index d1b7381..1182cbf 100644
--- a/frontend/src/routes/edit/profile/+page.ts
+++ b/frontend/src/routes/edit/profile/+page.ts
@@ -10,8 +10,13 @@ export const load = async () => {
 
     throw redirect(303, `/@${resp.name}/edit`);
   } catch (e) {
-    if ((e as APIError).code === ErrorCode.Forbidden || (e as APIError).code === ErrorCode.InvalidToken) {
-      throw error(403, e as APIError)
+    if (
+      (e as APIError).code === ErrorCode.Forbidden ||
+      (e as APIError).code === ErrorCode.InvalidToken
+    ) {
+      throw error(403, e as APIError);
     }
+
+    throw e;
   }
 };