misc: update how badges work

Xyphyn · Aug 17, 2024 · 36a7838 · 36a7838
1 parent 67cfd75
commit 36a7838
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 18 deletions.
diff --git a/src/lib/components/lemmy/user/UserLink.svelte b/src/lib/components/lemmy/user/UserLink.svelte
@@ -1,17 +1,56 @@
 <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">
   import Avatar from '$lib/components/ui/Avatar.svelte'
   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
@@ -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}