feat: add profile images

Xyphyn · Sep 13, 2023 · 6f80d40 · 6f80d40
1 parent 74f9a9e
commit 6f80d40
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "photon-lemmy",
-  "version": "1.4.7",
+  "version": "1.5.0",
   "private": true,
   "scripts": {
     "dev": "vite dev",

diff --git a/src/lib/auth.ts b/src/lib/auth.ts
@@ -32,6 +32,7 @@ export interface Profile {
   jwt?: string
   user?: PersonData
   username?: string
+  avatar?: string
   favorites?: number[]
   color?: string
 }
@@ -89,7 +90,13 @@ profile.subscribe(async (p) => {
     ...p,
     user: user!.user,
     username: user?.user.local_user_view.person.name,
+    avatar: user?.user.local_user_view.person.avatar,
   }))
+
+  profile.update((pro) => {
+    console.log(pro)
+    return pro
+  })
 })
 
 export async function setUser(jwt: string, inst: string, username: string) {
@@ -120,6 +127,7 @@ export async function setUser(jwt: string, inst: string, username: string) {
       instance: inst,
       jwt: jwt,
       username: user.user.local_user_view.person.name,
+      avatar: user.user.local_user_view.person.avatar,
     }
 
     profile.set({
@@ -212,6 +220,7 @@ export async function setUserID(id: number) {
     const user = await userFromJwt(prof.jwt, prof.instance)
     instance.set(prof.instance)
     prof.user = user?.user
+    prof.avatar = user?.user.local_user_view.person.avatar
     site.set(user?.site)
   }
 

diff --git a/src/lib/components/ui/sidebar/ProfileButton.svelte b/src/lib/components/ui/sidebar/ProfileButton.svelte
@@ -32,18 +32,18 @@
 
     switching = false
   }}
-  class="w-full hover:bg-slate-200 {expanded ? '' : '!p-1.5'} {$profile?.id ==
-  prof.id
-    ? 'font-bold'
-    : ''}"
+  class="w-full hover:bg-slate-200 {expanded ? '' : '!p-1.5'}"
 >
   <ProfileAvatar
     profile={prof}
     {index}
     selected={$profile?.id == prof.id}
     slot="prefix"
   />
-  <span class:hidden={!expanded} class="flex flex-col gap-0">
+  <span
+    class:hidden={!expanded}
+    class="flex flex-col gap-0 {$profile?.id == prof.id ? 'font-bold' : ''}"
+  >
     {prof.username ?? prof.user?.local_user_view.person.name}
     <span class="text-slate-500 dark:text-zinc-400 font-normal text-xs">
       {prof.instance}

diff --git a/src/lib/lemmy/ProfileAvatar.svelte b/src/lib/lemmy/ProfileAvatar.svelte
@@ -9,14 +9,27 @@
 </script>
 
 {#if profile}
-  <Icon
-    src={UserCircle}
-    mini={selected}
-    size={`${size}`}
-    title={profile.username}
-    class="text-blue-500 flex-shrink-0"
-    style={profile.color
-      ? `color: ${profile.color}`
-      : `filter: hue-rotate(${index * 50}deg)`}
-  />
+  <div style="width: {size}px; height: {size}px;">
+    {#if profile.avatar && !profile.color}
+      <img
+        src="{profile.avatar}?thumbnail=32&format=webp"
+        alt={profile.username}
+        width={size}
+        height={size}
+        class="flex-shrink-0 rounded-full ring-slate-800/50 dark:ring-zinc-200/50"
+        class:ring-2={selected}
+      />
+    {:else}
+      <Icon
+        src={UserCircle}
+        mini={selected}
+        size={`${size}`}
+        title={profile.username}
+        class="text-blue-500 flex-shrink-0"
+        style={profile.color
+          ? `color: ${profile.color}`
+          : `filter: hue-rotate(${index * 50}deg)`}
+      />
+    {/if}
+  </div>
 {/if}