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] 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>