Flesh out people tab

src/lib/components/Avatar.svelte

@@ -3,18 +3,18 @@
   import Icon from "@lib/components/Icon.svelte"
 
   export let src
-  export let alt = ""
   export let size = 7
   export let icon = "user-rounded"
 </script>
 
-<div
-  class={cx($$props.class, "!flex overflow-hidden rounded-full")}
-  class:center={!src}
-  style={`width: ${size * 4}px; height: ${size * 4}px; min-width: ${size * 4}px;`}>
-  {#if src}
-    <img {alt} {src} />
-  {:else}
+{#if src}
+  <div
+    class={cx($$props.class, "shrink-0 overflow-hidden rounded-full bg-cover bg-center")}
+    style={`width: ${size * 4}px; height: ${size * 4}px; min-width: ${size * 4}px; background-image: url(${src}); ${$$props.style || ""}`} />
+{:else}
+  <div
+    class={cx($$props.class, "rounded-full !flex center")}
+    style={`width: ${size * 4}px; height: ${size * 4}px; min-width: ${size * 4}px; ${$$props.style || ""}`}>
     <Icon {icon} size={Math.round(size * 0.7)} />
-  {/if}
-</div>
+  </div>
+{/if}

src/lib/components/WotScore.svelte

@@ -0,0 +1,44 @@
+<style>
+  .wot-background {
+    fill: transparent;
+    stroke: var(--base-content);
+    opacity: 30%;
+  }
+
+  .wot-highlight {
+    fill: transparent;
+    stroke-width: 1.5;
+    stroke-dasharray: 100 100;
+    transform-origin: center;
+  }
+</style>
+
+<script lang="ts">
+  import {clamp} from '@welshman/lib'
+
+  export let score
+  export let max = 100
+  export let active = false
+
+  const radius = 6
+  const center = radius + 1
+
+  $: normalizedScore = clamp([0, max], score) / max
+  $: dashOffset = 100 - 44 * normalizedScore
+  $: style = `transform: rotate(${135 - normalizedScore * 180}deg)`
+  $: stroke = active ? 'var(--primary)' : 'var(--base-content)'
+</script>
+
+<div class="relative h-[14px] w-[14px]">
+  <svg height="14" width="14" class="absolute">
+    <circle class="wot-background" cx={center} cy={center} r={radius} />
+    <circle
+      cx={center}
+      cy={center}
+      r={radius}
+      class="wot-highlight"
+      stroke-dashoffset={dashOffset}
+      {style}
+      {stroke} />
+  </svg>
+</div>