Release 202506091000

web/src/pages/notifications.astro

@@ -245,6 +245,22 @@ const notifications = dbNotifications.map((notification) => ({
       </form>
     </div>
 
+    <div
+      class="mb-4 flex items-center gap-2 rounded-lg border border-blue-500/20 bg-blue-500/10 p-3 text-blue-200"
+      data-new-notification-banner
+      style={{ display: 'none' }}
+    >
+      <span>You received a new notification</span>
+      <Button
+        type="button"
+        label="Reload"
+        icon="ri:refresh-line"
+        color="white"
+        class="ml-auto"
+        onclick="window.location.reload()"
+      />
+    </div>
+
     {
       notifications.length === 0 ? (
         <div class="flex flex-col items-center justify-center rounded-lg border border-zinc-800 bg-zinc-900 p-10 text-center shadow-sm">
@@ -390,3 +406,11 @@ const notifications = dbNotifications.map((notification) => ({
     </form>
   </section>
 </BaseLayout>
+
+<script>
+  document.addEventListener('sse-new-notification', () => {
+    document.querySelectorAll<HTMLElement>('[data-new-notification-banner]').forEach((banner) => {
+      banner.style.display = ''
+    })
+  })
+</script>