refactor: remove avatar comp. and used image comp.

Author: stabldev

frontend/src/lib/components/header.svelte

@@ -3,7 +3,7 @@
   import QuibbleLogo from '$lib/components/icons/logos/quibble.svelte';
   import QuibbleTextLogo from '$lib/components/icons/logos/quibble_text.svelte';
   import NotificationIcon from '$lib/components/icons/notification.svelte';
-  import Avatar from '$lib/components/ui/avatar.svelte';
+  import Image from '$lib/components/ui/image.svelte';
   import { createModalsStore } from '$lib/stores/modals.svelte';
   import { createAuthStore } from '$lib/stores/auth.svelte';
   import { page } from '$app/stores';
@@ -46,7 +46,7 @@
         <div
           class="ml-2 flex items-center gap-2 rounded-lg border border-neutral bg-base-100 p-1 px-1.5"
         >
-          <Avatar src={$page.data.quiblet.avatar} class="!size-5" />
+          <Image src={$page.data.quiblet.avatar} class="size-5 rounded-full" />
           <h5 class="whitespace-nowrap text-xs font-medium">q/{$page.data.quiblet.name}</h5>
         </div>
       {/if}
@@ -73,8 +73,8 @@
         </button>
       </div>
       <div class="tooltip tooltip-bottom flex before:left-0" data-tip="Profile menu">
-        <Avatar
-          class="btn btn-neutral !size-10 !rounded-btn p-0"
+        <Image
+          class="btn btn-neutral size-10 rounded-btn p-0"
           src={authStore.state.profile?.avatar}
         />
       </div>

frontend/src/lib/components/modals/auth/forms/profile_select.svelte

@@ -2,7 +2,7 @@
   import QuibbleLogo from '$lib/components/icons/logos/quibble.svelte';
   import QuibbleTextLogo from '$lib/components/icons/logos/quibble_text.svelte';
   import type { FormProps } from '../types';
-  import Avatar from '$lib/components/ui/avatar.svelte';
+  import Image from '$lib/components/ui/image.svelte';
   import { onMount } from 'svelte';
   import { enhance } from '$app/forms';
   import type { SubmitFunction } from '@sveltejs/kit';
@@ -94,8 +94,8 @@
           type="submit"
           class="group flex flex-col items-center justify-center gap-2.5"
         >
-          <Avatar
-            class="!size-20 !rounded-2xl outline outline-offset-4 outline-neutral"
+          <Image
+            class="size-20 rounded-2xl outline outline-offset-4 outline-neutral"
             src={profile.avatar}
           />
           <span class="line-clamp-1 max-w-20 break-all text-xs font-medium"

frontend/src/lib/components/quib.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { components } from '$lib/clients/v1';
-  import Avatar from '$lib/components/ui/avatar.svelte';
+  import Image from '$lib/components/ui/image.svelte';
   import readable from 'readable-numbers';
   import { FormatDate } from '$lib/functions/date';
   import { createAuthStore } from '$lib/stores/auth.svelte';
@@ -46,7 +46,7 @@
         href="/{get_name()}"
         class="relative flex items-center gap-2 hover:text-accent hover:underline"
       >
-        <Avatar src={get_avatar()} />
+        <Image src={get_avatar()} class="size-6 rounded-full" />
         <h3 class="text-xs font-semibold">{get_name()}</h3>
       </a>
       <coreicons-shape-circle variant="filled" class="size-0.5 text-base-content/75"

frontend/src/lib/components/sidebar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import QuibbleIcon from '$lib/components/icons/logos/quibble.svelte';
-  import Avatar from '$lib/components/ui/avatar.svelte';
+  import Image from '$lib/components/ui/image.svelte';
   import { createSidebarStore } from '$lib/stores/sidebar.svelte';
 
   const sidebarStore = createSidebarStore();
@@ -45,7 +45,7 @@
         {#each sidebarStore.state.recent as quiblet}
           <div class="flex items-center gap-2">
             <a href="/q/{quiblet.name}" class="flex">
-              <Avatar src={quiblet.avatar} />
+              <Image src={quiblet.avatar} class="size-6 rounded-full" />
             </a>
             <a href="/q/{quiblet.name}" class="text-sm font-medium">q/{quiblet.name}</a>
             <button
@@ -77,7 +77,7 @@
         {#each sidebarStore.state.your as quiblet}
           <div class="flex items-center gap-2">
             <a href="q/{quiblet.name}" class="flex">
-              <Avatar src={quiblet.avatar} />
+              <Image src={quiblet.avatar} class="size-6 rounded-full" />
             </a>
             <a href="q/{quiblet.name}" class="text-sm font-medium">q/{quiblet.name}</a>
             <button

frontend/src/lib/components/ui/avatar.svelte

@@ -11,7 +11,7 @@
   let valid_src = $state(false);
 
   const object_classes: string[] = [];
-  let _klass = klass
+  const _klass = klass
     ?.split(/\s+/)
     .filter((cls) => {
       if (cls.startsWith('object-')) {
@@ -40,7 +40,7 @@
     <img {src} alt="" class={cn('h-full w-full', ...object_classes)} />
   {:else}
     <svg
-      class="w-10 text-neutral-content"
+      class="w-1/2 max-w-10 text-neutral-content"
       viewBox="0 0 157 86"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

frontend/src/lib/components/ui/image.svelte

@@ -3,7 +3,7 @@
   import QuibsHeader from '$lib/components/quibs_header.svelte';
   import recent_posts from '$lib/data/mock/recent_posts.json';
   import readable from 'readable-numbers';
-  import Avatar from '$lib/components/ui/avatar.svelte';
+  import Image from '$lib/components/ui/image.svelte';
   import type { PageData } from './$types';
 
   const { data }: { data: PageData } = $props();
@@ -37,7 +37,7 @@
                 href="/q/{post.community.name}"
                 class="flex items-center gap-2 hover:text-accent hover:underline"
               >
-                <Avatar src={post.community.avatar} />
+                <Image src={post.community.avatar} class="size-6 rounded-full" />
                 <h3 class="text-xs font-semibold">q/{post.community.name}</h3>
               </a>
               <a

frontend/src/routes/(app)/+page.svelte

@@ -3,7 +3,7 @@
   import type { PageData } from './$types';
   import { FormatDate } from '$lib/functions/date';
   import { pluralize } from '$lib/functions/pluralize';
-  import Avatar from '$lib/components/ui/avatar.svelte';
+  import Image from '$lib/components/ui/image.svelte';
 
   const { data, children }: { data: PageData; children: Snippet } = $props();
   const { quiblet } = data;
@@ -53,7 +53,7 @@
       <div class="flex flex-col gap-2">
         {#each quiblet?.rangers as ranger}
           <div class="flex items-center gap-2">
-            <Avatar src={ranger.avatar} />
+            <Image src={ranger.avatar} class="size-6 rounded-full" />
             <div class="flex flex-col">
               <a href="/u/{ranger.username}" class="text-sm font-medium"
                 >u/{ranger.username}</a

frontend/src/routes/(app)/q/[name]/+layout.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import Quib from '$lib/components/quib.svelte';
   import QuibsHeader from '$lib/components/quibs_header.svelte';
-  import Avatar from '$lib/components/ui/avatar.svelte';
   import { cn } from '$lib/functions/classnames';
   import type { PageData } from './$types';
   import { FormatDate } from '$lib/functions/date';
@@ -47,7 +46,10 @@
   />
   <div class="absolute inset-x-0 -bottom-12 flex items-end justify-between px-4">
     <div class="flex items-end gap-2">
-      <Avatar class="!size-20 outline outline-8 outline-base-300" src={quiblet?.avatar} />
+      <Image
+        class="size-20 rounded-full outline outline-8 outline-base-300"
+        src={quiblet?.avatar}
+      />
       <h3 class="text-2xl font-bold text-info">q/{quiblet?.name}</h3>
     </div>
     <div class="flex items-center gap-2">