2 files changed, 60 insertions, 55 deletions
diff --git a/src/components/Event.svelte b/src/components/Event.svelte
index 6690ecde..aa8d1ac8 100644
--- a/src/components/Event.svelte
+++ b/src/components/Event.svelte
@@ -29,48 +29,55 @@
   };
 </script>
 
-<div class="space-y-2 dark:border-primary py-8" class:border-b-8={!last}>
-  <div class="flex">
-    <a href={`/${pubkey}/notes`} class="contents">
-      <div class="flex gap-2 items-center">
-        <Avatar user={author} size={16} disabled={true} />
-        <div>
-          <div>
-            <span class="font-bold">{author.display}</span>
-            <span class="text-secondary">@{author.username}</span>
-            <span class="text-secondary">&#x2022; {ago(created_at)}</span>
-          </div>
-          {#if author.lud16}
-            <div class="flex items-center">
-              <iconify-icon
-                noobserver
-                icon="ph:lightning-fill"
-                class="text-yellow-300"
-              ></iconify-icon>
-              {author.lud16}
-            </div>
-          {/if}
-        </div>
+{#snippet heading()}
+  <div class="flex gap-2 items-center">
+    <Avatar user={author} size={16} disabled={true} />
+    <div>
+      <div>
+        <span class="font-bold">{author.displayName}</span>
+        <span class="text-secondary">@{author.name}</span>
+        <span class="text-secondary">&#x2022; {ago(created_at)}</span>
       </div>
-    </a>
+      {#if author.lud16}
+        <div class="flex items-center">
+          <iconify-icon
+            noobserver
+            icon="ph:lightning-fill"
+            class="text-yellow-300"
+          ></iconify-icon>
+          {author.lud16}
+        </div>
+      {/if}
+    </div>
   </div>
+{/snippet}
 
-  <a href={`/e/${id}`} class="contents">
-    <div class="text-2xl space-y-2 break-words">
-      {#each parts as { type, value }, i}
-        {#if type === "text"}
-          {value}
-        {:else if type === "link"}
-          <Media {value} {minimal} />
-        {:else if type.match(/^nostr:np(rofile|ub)$/)}
-          <a href={`/${value.pubkey}`} class="font-bold"
-            >@{names[value.pubkey]}</a
-          >
-        {/if}
-      {/each}
-    </div>
-  </a>
-</div>
+<button
+  onclick={() => goto(`/e/${id}`)}
+  class="space-y-2 dark:border-primary py-8 w-full text-left"
+  class:border-b={!last}
+>
+  {#if minimal}
+    {@render heading()}
+  {:else}
+    <a href={`/${pubkey}/notes`} class="contents">
+      {@render heading()}
+    </a>
+  {/if}
+
+  <div class="text-2xl space-y-2 break-words">
+    {#each parts as { type, value }, i}
+      {#if type === "text"}
+        {value}
+      {:else if type === "link"}
+        <Media {value} {minimal} />
+      {:else if type.match(/^nostr:np(rofile|ub)$/)}
+        <a href={`/${value.pubkey}`} class="font-bold">@{names[value.pubkey]}</a
+        >
+      {/if}
+    {/each}
+  </div>
+</button>
 
 {#if zaps?.length}
   <div class="flex flex-wrap gap-2">
diff --git a/src/components/Media.svelte b/src/components/Media.svelte
index c2a79a2b..bd681f6f 100644
--- a/src/components/Media.svelte
+++ b/src/components/Media.svelte
@@ -9,19 +9,17 @@
   let { value, minimal } = $props();
 </script>
 
-<div class="pt-2">
-  {#if !!isImage(value.url)}
-    <img src={value.url} alt={""} class:w-48={minimal} />
-  {:else if isVideo(value.url)}
-    <!-- svelte-ignore a11y-media-has-caption -->
-    <video src={value.url} controls />
-  {:else if isAudio(value.url)}
-    <audio src={value.url} controls>
-      <a href={value.url}>{value.url.replace(/https?:\/\/(www\.)?/, "")}</a>
-    </audio>
-  {:else}
-    <a href={value.url} class="underline">
-      link
-    </a>
-  {/if}
-</div>
+{#if !!isImage(value.url)}
+  <img src={value.url} alt={""} class="py-4" />
+{:else if isVideo(value.url)}
+  <!-- svelte-ignore a11y-media-has-caption -->
+  <video src={value.url} controls class="py-4" />
+{:else if isAudio(value.url)}
+  <audio src={value.url} controls>
+    <a href={value.url}>{value.url.replace(/https?:\/\/(www\.)?/, "")}</a>
+  </audio>
+{:else}
+  <a href={value.url} class="underline">
+    {value.url.substr(0, 24)}{value.url.length > 24 ? "..." : ""}
+  </a>
+{/if}