From 5b954778cf3625d741cb19fba86fe88b788891f8 Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Mon, 29 May 2023 03:26:20 +0200
Subject: [PATCH] feat: add flags to profile pages

---
 frontend/src/routes/@[username]/+page.svelte  | 21 +++++++++++++++---
 .../src/routes/@[username]/ProfileFlag.svelte | 22 +++++++++++++++++++
 .../@[username]/[memberName]/+page.svelte     | 15 +++++++++++++
 3 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/routes/@[username]/ProfileFlag.svelte

diff --git a/frontend/src/routes/@[username]/+page.svelte b/frontend/src/routes/@[username]/+page.svelte
index 3bb8704..edb9aae 100644
--- a/frontend/src/routes/@[username]/+page.svelte
+++ b/frontend/src/routes/@[username]/+page.svelte
@@ -40,6 +40,7 @@
   import StatusLine from "$lib/components/StatusLine.svelte";
   import defaultPreferences from "$lib/api/default_preferences";
   import { addToast } from "$lib/toast";
+  import ProfileFlag from "./ProfileFlag.svelte";
 
   export let data: PageData;
 
@@ -117,16 +118,16 @@
 
   onMount(async () => {
     if ($userStore && $userStore.id === data.id) {
-      console.log("User is current user, fetching members")
+      console.log("User is current user, fetching members");
       try {
         const members = await apiFetchClient<PartialMember[]>("/users/@me/members");
         data.members = members;
       } catch (e) {
         // If it fails, we fail silently but log to console anyway
-        console.error("Fetching members:", e)
+        console.error("Fetching members:", e);
       }
     }
-  })
+  });
 </script>
 
 <div class="container">
@@ -140,6 +141,13 @@
     <div class="row">
       <div class="col-md-4 text-center">
         <FallbackImage width={200} urls={userAvatars(data)} alt="Avatar for @{data.name}" />
+        {#if data.flags && data.bio}
+          <div class="d-flex flex-wrap m-4">
+            {#each data.flags as flag}
+              <ProfileFlag {flag} />
+            {/each}
+          </div>
+        {/if}
       </div>
       <div class="col-md">
         {#if data.display_name}
@@ -174,6 +182,13 @@
         </div>
       {/if}
     </div>
+    {#if data.flags && !data.bio}
+      <div class="d-flex flex-wrap m-4">
+        {#each data.flags as flag}
+          <ProfileFlag {flag} />
+        {/each}
+      </div>
+    {/if}
     <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
       {#if data.names.length > 0}
         <div class="col-md">
diff --git a/frontend/src/routes/@[username]/ProfileFlag.svelte b/frontend/src/routes/@[username]/ProfileFlag.svelte
new file mode 100644
index 0000000..3ef4c63
--- /dev/null
+++ b/frontend/src/routes/@[username]/ProfileFlag.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { flagURL, type PrideFlag } from "$lib/api/entities";
+  import { Tooltip } from "sveltestrap";
+
+  export let flag: PrideFlag;
+
+  let elem: HTMLElement;
+</script>
+
+<span class="mx-2 my-1">
+  <Tooltip target={elem} aria-hidden placement="top">{flag.description ?? flag.name}</Tooltip>
+  <img bind:this={elem} class="flag" src={flagURL(flag)} alt={flag.description ?? flag.name} />
+  {flag.name}
+</span>
+
+<style>
+  .flag {
+    height: 1.5rem;
+    max-width: 200px;
+    border-radius: 3px;
+  }
+</style>
diff --git a/frontend/src/routes/@[username]/[memberName]/+page.svelte b/frontend/src/routes/@[username]/[memberName]/+page.svelte
index 99146cb..b281905 100644
--- a/frontend/src/routes/@[username]/[memberName]/+page.svelte
+++ b/frontend/src/routes/@[username]/[memberName]/+page.svelte
@@ -20,6 +20,7 @@
   import StatusLine from "$lib/components/StatusLine.svelte";
   import defaultPreferences from "$lib/api/default_preferences";
   import { addToast } from "$lib/toast";
+  import ProfileFlag from "../ProfileFlag.svelte";
 
   export let data: PageData;
 
@@ -69,6 +70,13 @@
     <div class="row">
       <div class="col-md-4 text-center">
         <FallbackImage width={200} urls={memberAvatars(data)} alt="Avatar for @{data.name}" />
+        {#if data.flags && data.bio}
+          <div class="d-flex flex-wrap m-4">
+            {#each data.flags as flag}
+              <ProfileFlag {flag} />
+            {/each}
+          </div>
+        {/if}
       </div>
       <div class="col-md">
         <h2>{data.display_name ?? data.name}</h2>
@@ -97,6 +105,13 @@
         </div>
       {/if}
     </div>
+    {#if data.flags && !data.bio}
+      <div class="d-flex flex-wrap m-4">
+        {#each data.flags as flag}
+          <ProfileFlag {flag} />
+        {/each}
+      </div>
+    {/if}
     <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
       {#if data.names.length > 0}
         <div class="col-md">