From 666535fc58176f73e5dfc6ae582c2a3ddeefc2bc Mon Sep 17 00:00:00 2001
From: Jake Fulmine <jake@fulmine.xyz>
Date: Mon, 15 May 2023 15:26:57 +0200
Subject: [PATCH] feat(dashboard): add proxy avatar viewing and editing

---
 dashboard/src/api/types.ts                  |  1 +
 dashboard/src/components/member/Body.svelte | 15 ++++++++++++++-
 dashboard/src/components/member/Edit.svelte |  4 ++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/dashboard/src/api/types.ts b/dashboard/src/api/types.ts
index 02bf220d..8ac50f13 100644
--- a/dashboard/src/api/types.ts
+++ b/dashboard/src/api/types.ts
@@ -57,6 +57,7 @@ export interface Member {
     birthday?: string;
     pronouns?: string;
     avatar_url?: string;
+    webhook_avatar_url?: string;
     banner?: string;
     description?: string;
     created?: string;
diff --git a/dashboard/src/components/member/Body.svelte b/dashboard/src/components/member/Body.svelte
index a424cd2a..954c314d 100644
--- a/dashboard/src/components/member/Body.svelte
+++ b/dashboard/src/components/member/Body.svelte
@@ -47,7 +47,10 @@
 
     let bannerOpen = false;
     const toggleBannerModal = () => (bannerOpen = !bannerOpen);
-
+    
+    let proxyAvatarOpen = false;
+    const toggleProxyAvatarModal = () => (proxyAvatarOpen = !proxyAvatarOpen);
+    
     let privacyOpen = false;
     const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
 
@@ -131,6 +134,16 @@
             <b>Color:</b> {member.color}
         </Col>
         {/if}
+        {#if member.webhook_avatar_url}
+        <Col xs={12} lg={4} class="mb-2">
+            <b>Proxy Avatar:</b> <Button size="sm" color="secondary" on:click={toggleProxyAvatarModal} aria-label="view member proxy avatar">View</Button>
+            <Modal isOpen={proxyAvatarOpen} toggle={toggleProxyAvatarModal}>
+                <div slot="external" on:click={toggleProxyAvatarModal} style="height: 100%; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; display: flex;">
+                    <img class="img-thumbnail d-block m-auto" src={member.webhook_avatar_url} tabindex={0} alt={`Member ${member.name} proxy avatar (full size)`} use:focus/>
+                </div>
+            </Modal>
+        </Col>
+        {/if}
         {#if member.banner}
         <Col xs={12} lg={4} class="mb-2">
             <b>Banner:</b> <Button size="sm" color="secondary" on:click={toggleBannerModal} aria-label="view member banner">View</Button>
diff --git a/dashboard/src/components/member/Edit.svelte b/dashboard/src/components/member/Edit.svelte
index 3c089cc6..76db6365 100644
--- a/dashboard/src/components/member/Edit.svelte
+++ b/dashboard/src/components/member/Edit.svelte
@@ -153,6 +153,10 @@
         <Label>Avatar url:</Label>
         <Input bind:value={input.avatar_url} maxlength={256} type="url" placeholder={member.avatar_url} aria-label="member avatar url"/>
     </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Proxy avatar url:</Label>
+        <Input bind:value={input.webhook_avatar_url} maxlength={256} type="url" placeholder={member.webhook_avatar_url} aria-label="member proxy avatar url"/>
+    </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Banner url:</Label>
         <Input bind:value={input.banner} maxlength={256} type="url" placeholder={member.banner} aria-label="member banner url"/>