feat: view transition, chat item sizing & group / unread

src/lib/components/Button.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { tw } from '$lib/tw';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+
+	type HTMLButtonOrAnchorAttributes = Partial<HTMLAnchorAttributes> & Partial<HTMLButtonAttributes>;
+
+	interface $$Props extends HTMLButtonOrAnchorAttributes {}
+
+	let className: string | null = '';
+	export { className as class };
+
+	export let href: string | null = null;
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'button'}
+	{href}
+	class={tw(
+		'inline-flex cursor-default items-center justify-center rounded-md px-2 py-1 text-sf-secondary shadow-sm ring-1 ring-ss-secondary transition-shadow duration-200 hover:ring-ss-primary active:shadow-inner',
+		className
+	)}
+	{...$$restProps}
+	on:click
+	role="button"
+	tabindex="0"
+>
+	<slot />
+</svelte:element>

src/lib/components/InputFrame.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { tw } from '$lib/tw';
+
+	let className = '';
+	export { className as class };
+</script>
+
+<div
+	class={tw(
+		'flex items-center gap-1 rounded-md px-2 py-1.5 shadow-[inset_0_1px_2px_0_rgb(0_0_0/0.05)] ring-1 ring-ss-secondary',
+		className
+	)}
+>
+	<slot />
+</div>