From 7ae07119057040a7b79be8807e10e526d758c44d Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 24 Oct 2024 10:11:01 -0700
Subject: [PATCH] Fix some click propagation

---
 src/app/components/ReactionSummary.svelte |  2 +-
 src/app/components/ThreadActions.svelte   |  8 ++++----
 src/lib/components/Button.svelte          | 18 +++++++++++++++---
 src/routes/home/+page.svelte              |  6 +++---
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/app/components/ReactionSummary.svelte b/src/app/components/ReactionSummary.svelte
index c9c0af0..1a5b40f 100644
--- a/src/app/components/ReactionSummary.svelte
+++ b/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>
diff --git a/src/app/components/ThreadActions.svelte b/src/app/components/ThreadActions.svelte
index 0ab325a..93d1a64 100644
--- a/src/app/components/ThreadActions.svelte
+++ b/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>
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index f6f448a..077d5a5 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,3 +1,15 @@
-<button on:click|stopPropagation type="button" {...$$props} class="text-left {$$props.class}">
-  <slot />
-</button>
+<script lang="ts">
+  export let type: "button" | "submit" = "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}
diff --git a/src/routes/home/+page.svelte b/src/routes/home/+page.svelte
index 7d17831..d4c0305 100644
--- a/src/routes/home/+page.svelte
+++ b/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>