Refactor avatar components, add space edit form

src/lib/components/Avatar.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-  import {onMount} from "svelte"
-  import Icon from "@lib/components/Icon.svelte"
-  import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
-
-  const {src = "", size = 7, icon = UserRounded, style = "", ...restProps} = $props()
-
-  let element: HTMLElement
-
-  const rem = $derived(size * 4)
-
-  onMount(() => {
-    if (src) {
-      const image = new Image()
-
-      image.addEventListener("error", () => {
-        element?.querySelector(".hidden")?.classList.remove("hidden")
-      })
-
-      image.src = src
-    }
-  })
-</script>
-
-<div
-  bind:this={element}
-  class="{restProps.class} relative !flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-cover bg-center"
-  style="width: {rem}px; height: {rem}px; min-width: {rem}px; background-image: url({src}); {style}">
-  <Icon {icon} class={src ? "hidden" : ""} size={Math.round(size * 0.8)} />
-</div>

src/lib/components/CardButton.svelte

@@ -12,8 +12,8 @@
 </script>
 
 <div class="btn flex h-[unset] w-full flex-nowrap py-4 text-left {props.class}">
-  <div class="flex flex-grow flex-row items-start gap-1 sm:pl-2">
-    <div class="flex h-14 w-12 flex-shrink-0 items-center">
+  <div class="flex flex-grow flex-row items-start gap-4">
+    <div class="flex h-14 w-12 flex-shrink-0 items-center justify-center">
       {@render props.icon?.()}
     </div>
     <div class="flex flex-col gap-1">

src/lib/components/ImageIcon.svelte

@@ -5,13 +5,14 @@
     src: string
     alt: string
     size?: number
+    class?: string
   }
 
-  const {src, alt, size = 5}: Props = $props()
+  const {src, alt, size = 5, ...props}: Props = $props()
 </script>
 
 {#if src.includes("image/svg") || src.endsWith(".svg")}
-  <Icon icon={src} {size} />
+  <Icon icon={src} {size} class={props.class} />
 {:else}
-  <img {src} {alt} class="h-{size} w-{size} rounded-lg object-cover" />
+  <img {src} {alt} class="h-{size} w-{size} aspect-square object-cover {props.class}" />
 {/if}

src/lib/components/PrimaryNavItem.svelte

@@ -18,7 +18,7 @@
 {#if href}
   <a {href} class="relative z-nav-item flex h-14 w-14 items-center justify-center">
     <div
-      class="avatar cursor-pointer rounded-full p-1 {restProps.class} transition-colors hover:bg-base-300"
+      class="avatar cursor-pointer rounded-full p-2 {restProps.class} transition-colors hover:bg-base-300"
       class:bg-base-300={active}
       class:tooltip={title}
       data-tip={title}>
@@ -31,7 +31,7 @@
 {:else}
   <Button {onclick} class="relative z-nav-item flex h-14 w-14 items-center justify-center">
     <div
-      class="avatar cursor-pointer rounded-full p-1 {restProps.class} transition-colors hover:bg-base-300"
+      class="avatar cursor-pointer rounded-full p-2 {restProps.class} transition-colors hover:bg-base-300"
       class:bg-base-300={active}
       class:tooltip={title}
       data-tip={title}>