Fix some click propagation

src/app/components/ReactionSummary.svelte

@@ -25,7 +25,7 @@
     class:border={isOwn}
     class:border-solid={isOwn}
     class:border-primary={isOwn}
-    on:click|stopPropagation|preventDefault={onClick}>
+    on:click={onClick}>
     <span>{displayReaction(content)}</span>
     {#if events.length > 1}
       <span>{events.length}</span>

src/app/components/ThreadActions.svelte

@@ -43,9 +43,9 @@
 </script>
 
 <div class="flex flex-wrap items-center justify-between gap-2">
-  <div class="flex gap-2">
+  <Button class="flex gap-2">
     <ReactionSummary {event} {onReactionClick} />
-  </div>
+  </Button>
   <div class="flex flex-grow justify-end gap-2">
     {#if showActivity}
       <div class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">
@@ -56,7 +56,7 @@
         Active {formatTimestampRelative(lastActive)}
       </div>
     {/if}
-    <button type="button" class="join rounded-full" on:click|stopPropagation>
+    <Button class="join rounded-full">
       <EmojiButton {onEmoji} class="join-item btn-neutral" />
       <Tippy
         bind:popover
@@ -67,6 +67,6 @@
           <Icon icon="menu-dots" size={4} />
         </Button>
       </Tippy>
-    </button>
+    </Button>
   </div>
 </div>

src/lib/components/Button.svelte

@@ -1,3 +1,15 @@
-<button on:click|stopPropagation type="button" {...$$props} class="text-left {$$props.class}">
+<script lang="ts">
-  <slot />
+  export let type: "button" | "submit" = "button"
-</button>
+
+  $: className = `text-left ${$$props.class}`
+</script>
+
+{#if type === 'submit'}
+  <button {...$$props} {type} class={className}>
+    <slot />
+  </button>
+{:else}
+  <button on:click|stopPropagation|preventDefault {...$$props} {type} class={className}>
+    <slot />
+  </button>
+{/if}

src/routes/home/+page.svelte

@@ -28,7 +28,7 @@
       <div class="column content gap-4">
         <h1 class="text-center text-5xl">Welcome to</h1>
         <h1 class="mb-4 text-center text-5xl font-bold uppercase">{PLATFORM_NAME}</h1>
-        <div class="grid gap-3 lg:grid-cols-2">
+        <div class="col-3">
           <Button on:click={addSpace}>
             <CardButton>
               <div slot="icon"><Icon icon="add-circle" size={7} /></div>
@@ -38,14 +38,14 @@
           </Button>
           <Link href="/people">
             <CardButton>
-              <div slot="icon"><Icon icon="plain" size={7} /></div>
+              <div slot="icon"><Icon icon="compass" size={7} /></div>
               <div slot="title">Browse the network</div>
               <div slot="info">Find your people on the nostr network</div>
             </CardButton>
           </Link>
           <Button on:click={startChat}>
             <CardButton>
-              <div slot="icon"><Icon icon="hand-pills" size={7} /></div>
+              <div slot="icon"><Icon icon="chat-round" size={7} /></div>
               <div slot="title">Start a conversation</div>
               <div slot="info">Use nostr's encrypted group chats to stay in touch</div>
             </CardButton>