Add new claymorphic component library

src/app/components/EventActivity.svelte

@@ -8,7 +8,8 @@
   import {repository} from "@welshman/app"
   import {deriveChecked} from "@app/notifications"
   import Reply from "@assets/icons/reply-2.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
+  import Icon from "@lib/components2/Icon.svelte"
+  import Badge from "@lib/components2/Badge.svelte"
 
   const {url, path, event}: {url: string; path: string; event: TrustedEvent} = $props()
 
@@ -22,13 +23,13 @@
   })
 </script>
 
-<div class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">
-  <Icon icon={Reply} />
+<Badge sm>
+  <Icon icon={Reply} size={4} />
   <span>{$replies.length} {$replies.length === 1 ? "reply" : "replies"}</span>
-</div>
-<div class="btn btn-neutral btn-xs relative rounded-full">
+</Badge>
+<Badge sm>
   {#if gt(lastActive, $checked)}
-    <div class="h-2 w-2 rounded-full bg-primary"></div>
+    <div class="h-2 w-2 rounded-full" style="background-color: var(--cl-primary);"></div>
   {/if}
   Active {formatTimestampRelative(lastActive)}
-</div>
+</Badge>