From a422d59f4b65f5a67a9aabb67589aa6e14cdc606 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Wed, 2 Oct 2024 11:57:36 -0700
Subject: [PATCH] Bump welshman, fix nested quote background

---
 README.md                              |   3 +
 package-lock.json                      | 191 +++++++++++++++++++------
 package.json                           |  12 +-
 src/app/components/Content.svelte      |  91 ++++++------
 src/app/components/ContentQuote.svelte |  16 ++-
 5 files changed, 214 insertions(+), 99 deletions(-)

diff --git a/README.md b/README.md
index 7a34884..40ae5e1 100644
--- a/README.md
+++ b/README.md
@@ -7,3 +7,6 @@ A discord-like nostr client. WIP.
 - [ ] Delete events when leaving a space
 - [ ] Add topic and event tags to compose
 - [ ] If the user isn't following anyone, show warning/fallback on people/notes pages
+- [ ] Add person drawer with info and recent notes, where you can follow/mute them. Maybe same stuff as person search
+- [ ] Add react/reply to notes
+- [ ] Indicate cut-off images, allow user to expand
diff --git a/package-lock.json b/package-lock.json
index deecd97..3a026d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,12 +24,12 @@
         "@tiptap/suggestion": "^2.6.4",
         "@types/throttle-debounce": "^5.0.2",
         "@welshman/app": "^0.0.7",
-        "@welshman/content": "^0.0.9",
-        "@welshman/lib": "^0.0.17",
-        "@welshman/net": "^0.0.22",
-        "@welshman/signer": "^0.0.5",
-        "@welshman/store": "^0.0.7",
-        "@welshman/util": "^0.0.33",
+        "@welshman/content": "^0.0.11",
+        "@welshman/lib": "^0.0.19",
+        "@welshman/net": "^0.0.23",
+        "@welshman/signer": "^0.0.6",
+        "@welshman/store": "^0.0.8",
+        "@welshman/util": "^0.0.34",
         "daisyui": "^4.12.10",
         "date-picker-svelte": "^2.13.0",
         "emoji-picker-element": "^1.22.8",
@@ -92,6 +92,15 @@
       "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-7.1.0.tgz",
       "integrity": "sha512-o+UlMLt49RvtCASlOMW0AkHnabN9wR9rwCCherxO0yG4Npy34GkvrAqdXQvrhNs+jh+gkK8gB8Lf05qL/O7KWg=="
     },
+    "node_modules/@capacitor/core": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.1.2.tgz",
+      "integrity": "sha512-xFy1/4qLFLp5WCIzIhtwUuVNNoz36+V7/BzHmLqgVJcvotc4MMjswW/TshnPQaLLujEOaLkA4h8ZJ0uoK3ImGg==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -1677,25 +1686,7 @@
         "throttle-debounce": "^5.0.2"
       }
     },
-    "node_modules/@welshman/app/node_modules/@welshman/util": {
-      "version": "0.0.31",
-      "resolved": "https://registry.npmjs.org/@welshman/util/-/util-0.0.31.tgz",
-      "integrity": "sha512-nUv/Mto6maQx6vbCaZ0HKQRvLYRWqQzPTLsKoxSDX0HkeFP653T6raFx8TvWt+op/qBuuT8sANJactc2/qGoYg==",
-      "dependencies": {
-        "@welshman/lib": "0.0.17",
-        "nostr-tools": "^2.7.2"
-      }
-    },
-    "node_modules/@welshman/content": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/@welshman/content/-/content-0.0.9.tgz",
-      "integrity": "sha512-tmzSRvVmOdet+X9W1vmjqHf4tkyhxotZ0qG7+iVPd7SjRSvuDmq09odT19rQtWn5Pl8mmEREyQgqzTRubDbsxg==",
-      "dependencies": {
-        "@braintree/sanitize-url": "^7.0.2",
-        "nostr-tools": "^2.7.2"
-      }
-    },
-    "node_modules/@welshman/lib": {
+    "node_modules/@welshman/app/node_modules/@welshman/lib": {
       "version": "0.0.17",
       "resolved": "https://registry.npmjs.org/@welshman/lib/-/lib-0.0.17.tgz",
       "integrity": "sha512-C0yelgMD6F5hgIcDjflJ+1Qg9/yvodtxSE00p1DZgkTn0s/7znvxraYpQInQdhqp8vJ8r+3coR3YagrRdm9+LA==",
@@ -1707,7 +1698,7 @@
         "throttle-debounce": "^5.0.0"
       }
     },
-    "node_modules/@welshman/net": {
+    "node_modules/@welshman/app/node_modules/@welshman/net": {
       "version": "0.0.22",
       "resolved": "https://registry.npmjs.org/@welshman/net/-/net-0.0.22.tgz",
       "integrity": "sha512-sXdHevglDqLujQrhXFUwSPsC0Zu/SY2WWy049Citpi1nej4JnAjCbpI8XUeI1it80a84dWa+vGA5Da4OhCYkmA==",
@@ -1718,16 +1709,7 @@
         "ws": "^8.16.0"
       }
     },
-    "node_modules/@welshman/net/node_modules/@welshman/util": {
-      "version": "0.0.31",
-      "resolved": "https://registry.npmjs.org/@welshman/util/-/util-0.0.31.tgz",
-      "integrity": "sha512-nUv/Mto6maQx6vbCaZ0HKQRvLYRWqQzPTLsKoxSDX0HkeFP653T6raFx8TvWt+op/qBuuT8sANJactc2/qGoYg==",
-      "dependencies": {
-        "@welshman/lib": "0.0.17",
-        "nostr-tools": "^2.7.2"
-      }
-    },
-    "node_modules/@welshman/signer": {
+    "node_modules/@welshman/app/node_modules/@welshman/signer": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/@welshman/signer/-/signer-0.0.5.tgz",
       "integrity": "sha512-i3SUEF4yAb8up2qk6hdLyRytnkRt5W+5KyrbN1RmFcQpDC/foa3nYO+Q0mydwXIX3h6HAV7MzO8vi9tHWJ30Ww==",
@@ -1738,7 +1720,7 @@
         "nostr-tools": "^2.7.2"
       }
     },
-    "node_modules/@welshman/signer/node_modules/@welshman/net": {
+    "node_modules/@welshman/app/node_modules/@welshman/signer/node_modules/@welshman/net": {
       "version": "0.0.21",
       "resolved": "https://registry.npmjs.org/@welshman/net/-/net-0.0.21.tgz",
       "integrity": "sha512-BOWRevNJjyNHshxr0eFn/yBjjVIuvofyy/Q+eYuLLTRwolFkqmaiN8xuG3wFndPi5z2uuC87Ay4PmRTzp+kCSg==",
@@ -1749,7 +1731,7 @@
         "ws": "^8.16.0"
       }
     },
-    "node_modules/@welshman/signer/node_modules/@welshman/util": {
+    "node_modules/@welshman/app/node_modules/@welshman/signer/node_modules/@welshman/util": {
       "version": "0.0.30",
       "resolved": "https://registry.npmjs.org/@welshman/util/-/util-0.0.30.tgz",
       "integrity": "sha512-CYLtaXfCod5Xo/OCXPUGYKwT+fRwm5DU7ASqcGwPuB/vadDodT/OJPSmrMH9Pq63VY9xK4gX/I2ma/rKRokdpg==",
@@ -1758,7 +1740,7 @@
         "nostr-tools": "^2.7.2"
       }
     },
-    "node_modules/@welshman/store": {
+    "node_modules/@welshman/app/node_modules/@welshman/store": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/@welshman/store/-/store-0.0.7.tgz",
       "integrity": "sha512-Ltx2RYwMicCeGWBdl3+Wr+pilIdofmNSDKTqgOqtPanOgSarGn7uqZnPzDz9N+P0htg2TDSogg7YkBWf5drhDw==",
@@ -1768,7 +1750,7 @@
         "svelte": "^4.2.18"
       }
     },
-    "node_modules/@welshman/store/node_modules/@welshman/util": {
+    "node_modules/@welshman/app/node_modules/@welshman/util": {
       "version": "0.0.31",
       "resolved": "https://registry.npmjs.org/@welshman/util/-/util-0.0.31.tgz",
       "integrity": "sha512-nUv/Mto6maQx6vbCaZ0HKQRvLYRWqQzPTLsKoxSDX0HkeFP653T6raFx8TvWt+op/qBuuT8sANJactc2/qGoYg==",
@@ -1777,15 +1759,119 @@
         "nostr-tools": "^2.7.2"
       }
     },
-    "node_modules/@welshman/util": {
-      "version": "0.0.33",
-      "resolved": "https://registry.npmjs.org/@welshman/util/-/util-0.0.33.tgz",
-      "integrity": "sha512-dUt6H6Bi3cwhLup7G6MsfZymwX4C/EGvm6X/9KvaoTGZhy9z66lpoa1MebLGOTaQDyMs8nrIckXMp9eAi/c15Q==",
+    "node_modules/@welshman/content": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/@welshman/content/-/content-0.0.11.tgz",
+      "integrity": "sha512-SzFhDCT4xvbO3JiL3QiekutXCsEQ0254PNN/Gb80AI0O3Q3K4HgR5IdTkfnudSMAXq/sctxyw+o1GPSP3Uz/LA==",
       "dependencies": {
-        "@welshman/lib": "0.0.17",
+        "@braintree/sanitize-url": "^7.0.2",
         "nostr-tools": "^2.7.2"
       }
     },
+    "node_modules/@welshman/lib": {
+      "version": "0.0.19",
+      "resolved": "https://registry.npmjs.org/@welshman/lib/-/lib-0.0.19.tgz",
+      "integrity": "sha512-NgJZGR1wEFBfnMCuW24BMCCIngU8NzrqjY94KSC/ug3iQnthp+9y5Lxg2eHfZmL1KrDLtV0VFC03C1K+8J+1wA==",
+      "dependencies": {
+        "@scure/base": "^1.1.6",
+        "@types/events": "^3.0.3",
+        "@types/throttle-debounce": "^5.0.2",
+        "events": "^3.3.0",
+        "throttle-debounce": "^5.0.0"
+      }
+    },
+    "node_modules/@welshman/net": {
+      "version": "0.0.23",
+      "resolved": "https://registry.npmjs.org/@welshman/net/-/net-0.0.23.tgz",
+      "integrity": "sha512-aeogvtQbmzS+qEdxPVFzcdhSGbdJzDjq9j2epIJ8esB+HFpeLJ51EfY0pAs8W4ATs09526o98W25maOXVKpYtw==",
+      "dependencies": {
+        "@welshman/lib": "^0.0.18",
+        "@welshman/util": "^0.0.34",
+        "isomorphic-ws": "^5.0.0",
+        "ws": "^8.16.0"
+      }
+    },
+    "node_modules/@welshman/net/node_modules/@welshman/lib": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@welshman/lib/-/lib-0.0.18.tgz",
+      "integrity": "sha512-ZFmK7GdUeZp+uwWY0H0/r/4hui/GZ5xlF0FPDKljhXGR/l771F5+lGGbgeeWWFVpRcEbWD54Q4ioQxmQSWb30Q==",
+      "dependencies": {
+        "@scure/base": "^1.1.6",
+        "@types/events": "^3.0.3",
+        "@types/throttle-debounce": "^5.0.2",
+        "events": "^3.3.0",
+        "throttle-debounce": "^5.0.0"
+      }
+    },
+    "node_modules/@welshman/signer": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@welshman/signer/-/signer-0.0.6.tgz",
+      "integrity": "sha512-y+Lj/f+MhAZmB4/BOnDRgTl1kQfbOJ8jPM5mC1U+LQ7/th1/RJRgPr7OjBPApMh13ZYnd/6dLD5V2+qZ0LHRIA==",
+      "dependencies": {
+        "@welshman/lib": "^0.0.18",
+        "@welshman/net": "^0.0.23",
+        "@welshman/util": "^0.0.34",
+        "nostr-tools": "^2.7.2"
+      },
+      "peerDependencies": {
+        "nostr-signer-capacitor-plugin": "github:chebizarro/nostr-signer-capacitor-plugin"
+      }
+    },
+    "node_modules/@welshman/signer/node_modules/@welshman/lib": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@welshman/lib/-/lib-0.0.18.tgz",
+      "integrity": "sha512-ZFmK7GdUeZp+uwWY0H0/r/4hui/GZ5xlF0FPDKljhXGR/l771F5+lGGbgeeWWFVpRcEbWD54Q4ioQxmQSWb30Q==",
+      "dependencies": {
+        "@scure/base": "^1.1.6",
+        "@types/events": "^3.0.3",
+        "@types/throttle-debounce": "^5.0.2",
+        "events": "^3.3.0",
+        "throttle-debounce": "^5.0.0"
+      }
+    },
+    "node_modules/@welshman/store": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/@welshman/store/-/store-0.0.8.tgz",
+      "integrity": "sha512-A9oIy7qh++kmJAEbSf0gXrncW5M1FMpJiIAzoOX8MEwPb/r06nz7PDs1HyFAV9AXEXRfcceWImDflf8uPYo9NA==",
+      "dependencies": {
+        "@welshman/lib": "^0.0.18",
+        "@welshman/util": "^0.0.34",
+        "svelte": "^4.2.18"
+      }
+    },
+    "node_modules/@welshman/store/node_modules/@welshman/lib": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@welshman/lib/-/lib-0.0.18.tgz",
+      "integrity": "sha512-ZFmK7GdUeZp+uwWY0H0/r/4hui/GZ5xlF0FPDKljhXGR/l771F5+lGGbgeeWWFVpRcEbWD54Q4ioQxmQSWb30Q==",
+      "dependencies": {
+        "@scure/base": "^1.1.6",
+        "@types/events": "^3.0.3",
+        "@types/throttle-debounce": "^5.0.2",
+        "events": "^3.3.0",
+        "throttle-debounce": "^5.0.0"
+      }
+    },
+    "node_modules/@welshman/util": {
+      "version": "0.0.34",
+      "resolved": "https://registry.npmjs.org/@welshman/util/-/util-0.0.34.tgz",
+      "integrity": "sha512-x1MXvwze1bPCWRrvY6qDyzhG63qSk3t4B5uNc/yNMEeOase/6k4MsqdOuddUqgegjYeDqNDSaQPlFWfP+j/dWA==",
+      "dependencies": {
+        "@welshman/lib": "^0.0.18",
+        "nostr-tools": "^2.7.2"
+      }
+    },
+    "node_modules/@welshman/util/node_modules/@welshman/lib": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@welshman/lib/-/lib-0.0.18.tgz",
+      "integrity": "sha512-ZFmK7GdUeZp+uwWY0H0/r/4hui/GZ5xlF0FPDKljhXGR/l771F5+lGGbgeeWWFVpRcEbWD54Q4ioQxmQSWb30Q==",
+      "dependencies": {
+        "@scure/base": "^1.1.6",
+        "@types/events": "^3.0.3",
+        "@types/throttle-debounce": "^5.0.2",
+        "events": "^3.3.0",
+        "throttle-debounce": "^5.0.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -3833,6 +3919,15 @@
         "node": ">=18.16.1"
       }
     },
+    "node_modules/nostr-signer-capacitor-plugin": {
+      "version": "0.0.2",
+      "resolved": "git+ssh://git@github.com/chebizarro/nostr-signer-capacitor-plugin.git#2adb594b17886af706e07696c00aae808316e300",
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "@capacitor/core": "^6.0.0"
+      }
+    },
     "node_modules/nostr-tools": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/nostr-tools/-/nostr-tools-2.7.2.tgz",
@@ -5607,6 +5702,12 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "dev": true
     },
+    "node_modules/tslib": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
+      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
+      "peer": true
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/package.json b/package.json
index 5c04383..455b52e 100644
--- a/package.json
+++ b/package.json
@@ -49,12 +49,12 @@
     "@tiptap/suggestion": "^2.6.4",
     "@types/throttle-debounce": "^5.0.2",
     "@welshman/app": "^0.0.7",
-    "@welshman/content": "^0.0.9",
-    "@welshman/lib": "^0.0.17",
-    "@welshman/net": "^0.0.22",
-    "@welshman/signer": "^0.0.5",
-    "@welshman/store": "^0.0.7",
-    "@welshman/util": "^0.0.33",
+    "@welshman/content": "^0.0.11",
+    "@welshman/lib": "^0.0.19",
+    "@welshman/net": "^0.0.23",
+    "@welshman/signer": "^0.0.6",
+    "@welshman/store": "^0.0.8",
+    "@welshman/util": "^0.0.34",
     "daisyui": "^4.12.10",
     "date-picker-svelte": "^2.13.0",
     "emoji-picker-element": "^1.22.8",
diff --git a/src/app/components/Content.svelte b/src/app/components/Content.svelte
index 90e4bba..f822734 100644
--- a/src/app/components/Content.svelte
+++ b/src/app/components/Content.svelte
@@ -73,51 +73,52 @@
   $: ellipsize = expandable && shortContent.find(isEllipsis)
 </script>
 
-<div
-  class="overflow-hidden text-ellipsis"
-  style={ellipsize ? "mask-image: linear-gradient(0deg, transparent 0px, black 100px)" : ""}>
-  {#each shortContent as parsed, i}
-    {#if isNewline(parsed)}
-      <ContentNewline value={parsed.value.slice(isNextToBlock(i) ? 1 : 0)} />
-    {:else if isTopic(parsed)}
-      <ContentTopic value={parsed.value} />
-    {:else if isCode(parsed)}
-      <ContentCode value={parsed.value} />
-    {:else if isCashu(parsed) || isInvoice(parsed)}
-      <ContentToken value={parsed.value} />
-    {:else if isLink(parsed)}
-      {#if isStartOrEnd(i) && !hideMedia}
-        <ContentLinkBlock value={parsed.value} />
+<div class="relative">
+  <div
+    class="overflow-hidden text-ellipsis"
+    style={ellipsize ? "mask-image: linear-gradient(0deg, transparent 0px, black 100px)" : ""}>
+    {#each shortContent as parsed, i}
+      {#if isNewline(parsed)}
+        <ContentNewline value={parsed.value.slice(isNextToBlock(i) ? 1 : 0)} />
+      {:else if isTopic(parsed)}
+        <ContentTopic value={parsed.value} />
+      {:else if isCode(parsed)}
+        <ContentCode value={parsed.value} />
+      {:else if isCashu(parsed) || isInvoice(parsed)}
+        <ContentToken value={parsed.value} />
+      {:else if isLink(parsed)}
+        {#if isStartOrEnd(i) && !hideMedia}
+          <ContentLinkBlock value={parsed.value} />
+        {:else}
+          <ContentLinkInline value={parsed.value} />
+        {/if}
+      {:else if isProfile(parsed)}
+        <ContentMention value={parsed.value} />
+      {:else if isEvent(parsed) || isAddress(parsed)}
+        {#if isStartOrEnd(i) && depth < 2 && !hideMedia}
+          <ContentQuote value={parsed.value} {depth}>
+            <div slot="note-content" let:event>
+              <svelte:self {hideMedia} {event} depth={depth + 1} />
+            </div>
+          </ContentQuote>
+        {:else}
+          <Link
+            external
+            class="overflow-hidden text-ellipsis whitespace-nowrap underline"
+            href={entityLink(parsed.raw)}>
+            {fromNostrURI(parsed.raw).slice(0, 16) + "…"}
+          </Link>
+        {/if}
       {:else}
-        <ContentLinkInline value={parsed.value} />
+        {@html renderParsed(parsed)}
       {/if}
-    {:else if isProfile(parsed)}
-      <ContentMention value={parsed.value} />
-    {:else if isEvent(parsed) || isAddress(parsed)}
-      {#if isStartOrEnd(i) && depth < 2 && !hideMedia}
-        <ContentQuote value={parsed.value} {depth}>
-          <div slot="note-content" let:event>
-            <svelte:self {hideMedia} {event} depth={depth + 1} />
-          </div>
-        </ContentQuote>
-      {:else}
-        <Link
-          external
-          class="overflow-hidden text-ellipsis whitespace-nowrap underline"
-          href={entityLink(parsed.raw)}>
-          {fromNostrURI(parsed.raw).slice(0, 16) + "…"}
-        </Link>
-      {/if}
-    {:else}
-      {@html renderParsed(parsed)}
-    {/if}
-  {/each}
-</div>
-
-{#if ellipsize}
-  <div class="z-feature relative -mt-24 mb-0 flex justify-center bg-gradient-to-t from-base-100 pt-12" class:-ml-12={depth > 0}>
-    <button type="button" class="btn" on:click|stopPropagation|preventDefault={expand}>
-      See more
-    </button>
+    {/each}
   </div>
-{/if}
+  {#if ellipsize}
+    <div class="z-feature relative flex justify-center bg-gradient-to-t from-base-100 pt-12 -m-6">
+      <button type="button" class="btn" on:click|stopPropagation|preventDefault={expand}>
+        See more
+      </button>
+    </div>
+  {/if}
+</div>
diff --git a/src/app/components/ContentQuote.svelte b/src/app/components/ContentQuote.svelte
index 58d6539..e6fb0cc 100644
--- a/src/app/components/ContentQuote.svelte
+++ b/src/app/components/ContentQuote.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {onMount} from 'svelte'
   import {getAddress, Address} from "@welshman/util"
   import Spinner from "@lib/components/Spinner.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
@@ -11,17 +12,26 @@
   const idOrAddress = id || new Address(kind, pubkey, identifier).toString()
   const event = deriveEvent(idOrAddress, relays)
 
+  let element: Element
+  let bgClass = "bg-base-300"
+
   $: address = $event ? getAddress($event) : ""
   $: isGroup = address.match(/^(34550|35834):/)
+
+  onMount(() => {
+    if (element.closest('.bg-base-300')) {
+      bgClass = 'bg-base-100'
+    }
+  })
 </script>
 
-<button class="text-left my-2 max-w-full" on:click|stopPropagation>
+<button class="block text-left my-2 max-w-full" bind:this={element} on:click|stopPropagation>
   {#if $event}
-    <NoteCard event={$event} class="p-4 rounded-box bg-base-300">
+    <NoteCard event={$event} class="p-4 rounded-box {bgClass}">
       <slot name="note-content" event={$event} {depth} />
     </NoteCard>
   {:else}
-    <div class="p-4 rounded-box bg-base-300">
+    <div class="p-4 rounded-box {bgClass}">
       <Spinner loading>Loading event...</Spinner>
     </div>
   {/if}