From 36a7838a471301de34e44240d0e3a4d518bc903d Mon Sep 17 00:00:00 2001
From: Xylight <james@xylight.dev>
Date: Sat, 17 Aug 2024 14:06:09 -0700
Subject: [PATCH] misc: update how badges work

---
 src/lib/components/lemmy/user/UserLink.svelte | 70 ++++++++++++++++---
 src/lib/components/ui/navbar/Profile.svelte   | 17 ++---
 2 files changed, 69 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/lemmy/user/UserLink.svelte b/src/lib/components/lemmy/user/UserLink.svelte
index a9b46848..590bb6c0 100644
--- a/src/lib/components/lemmy/user/UserLink.svelte
+++ b/src/lib/components/lemmy/user/UserLink.svelte
@@ -1,9 +1,48 @@
 <script lang="ts" context="module">
   import { env } from '$env/dynamic/public'
 
-  const hasPhotonBadge = (actor_id: string) =>
-    env.PUBLIC_PHOTON_BADGE &&
-    env.PUBLIC_PHOTON_BADGE.split(',').includes(actor_id)
+  import type { IconSource } from 'svelte-hero-icons'
+
+  function parseBadge() {
+    try {
+      if (env.PUBLIC_BADGES) {
+        return JSON.parse(env.PUBLIC_BADGES)
+      }
+    } catch (e) {
+      return {}
+    }
+  }
+
+  const badges = parseBadge()
+
+  const getEnvBadge = (
+    actor_id: string
+  ):
+    | {
+        classes: string
+        icon: 'photon' | IconSource
+        iconClass?: string
+      }
+    | false => {
+    if (badges.photon && badges.photon.includes?.(actor_id)) {
+      return {
+        classes:
+          'bg-gradient-to-r bg-clip-text text-transparent from-blue-500 to-purple-700 dark:from-blue-400 dark:to-purple-500',
+        icon: 'photon',
+      }
+    }
+
+    if (badges.translator && badges.translator.includes?.(actor_id)) {
+      return {
+        classes:
+          'bg-gradient-to-r bg-clip-text text-transparent from-sky-500 to-blue-700 dark:from-blue-300 dark:to-indigo-500',
+        icon: Language,
+        iconClass: 'text-blue-500 dark:text-blue-400',
+      }
+    }
+
+    return false
+  }
 </script>
 
 <script lang="ts">
@@ -11,7 +50,7 @@
   import Logo from '$lib/components/ui/Logo.svelte'
   import { userSettings } from '$lib/settings.js'
   import type { Person } from 'lemmy-js-client'
-  import { Icon, NoSymbol } from 'svelte-hero-icons'
+  import { Icon, Language, NoSymbol } from 'svelte-hero-icons'
 
   export let user: Person
   export let avatar: boolean = false
@@ -22,7 +61,8 @@
     $userSettings.showInstances.user ||
     ($userSettings.showInstances.comments && inComment)
   export let displayName = $userSettings.displayNames
-  $: photonBadge = hasPhotonBadge(user.actor_id)
+
+  $: envBadge = getEnvBadge(user.actor_id)
 </script>
 
 <a
@@ -42,10 +82,11 @@
   <span
     class="flex gap-0 items-center flex-shrink max-w-full min-w-0"
     class:ml-0.5={avatar}
-    class:text-indigo-600={photonBadge}
-    class:dark:text-indigo-400={photonBadge}
   >
-    <span class:font-medium={showInstance} class="username-text">
+    <span
+      class:font-medium={showInstance}
+      class="username-text {envBadge && envBadge.classes}"
+    >
       {displayName ? user.display_name || user.name : user.name}
     </span>
     {#if showInstance}
@@ -66,8 +107,17 @@
     {#if user.bot_account}
       <div class="text-blue-500 font-bold" title="Bot">BOT</div>
     {/if}
-    {#if photonBadge}
-      <Logo width={16} />
+    {#if envBadge}
+      {#if envBadge.icon == 'photon'}
+        <Logo width={16} />
+      {:else}
+        <Icon
+          src={envBadge.icon}
+          micro
+          size="16"
+          class={envBadge.iconClass ?? envBadge.classes}
+        />
+      {/if}
     {/if}
     <slot name="badges" />
   {/if}
diff --git a/src/lib/components/ui/navbar/Profile.svelte b/src/lib/components/ui/navbar/Profile.svelte
index 90057170..1270520d 100644
--- a/src/lib/components/ui/navbar/Profile.svelte
+++ b/src/lib/components/ui/navbar/Profile.svelte
@@ -36,6 +36,7 @@
   import { site } from '$lib/lemmy'
   import SiteCard from '$lib/components/lemmy/SiteCard.svelte'
   import { t } from '$lib/translations'
+  import UserLink from '$lib/components/lemmy/user/UserLink.svelte'
 
   let showInstance = false
 </script>
@@ -85,14 +86,14 @@
     {/if}
   </button>
   {#if $profile?.user}
-    <div class="flex flex-row gap-2 items-center py-2 mx-2 font-medium">
-      <Avatar
-        width={22}
-        url={$profile?.user?.local_user_view.person.avatar}
-        alt={$profile?.username}
-      />
-      {$profile?.user?.local_user_view?.person.name}
-    </div>
+    <UserLink
+      user={$profile?.user.local_user_view.person}
+      showInstance={false}
+      avatar
+      avatarSize={24}
+      displayName={false}
+      class="font-medium px-2 py-1 pointer-events-none"
+    />
   {:else}
     <MenuDivider>{$t('nav.menu.label')}</MenuDivider>
   {/if}