From 7e9e7a94a06768cf6f6d3ebeb6470001cd66ee6c Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Tue, 10 Feb 2026 23:38:19 +1300
Subject: [PATCH] Improve notifcations

---
 materialious/src/routes/(app)/+layout.svelte | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/materialious/src/routes/(app)/+layout.svelte b/materialious/src/routes/(app)/+layout.svelte
index 438d0f05..d81a7d2f 100644
--- a/materialious/src/routes/(app)/+layout.svelte
+++ b/materialious/src/routes/(app)/+layout.svelte
@@ -66,7 +66,7 @@
 
 	playerState.subscribe(() => {
 		requestAnimationFrame(() => resetScroll());
-	})
+	});
 
 	interfaceAmoledTheme.subscribe(async () => {
 		setAmoledTheme();
@@ -245,6 +245,7 @@
 		if (isLoggedIn) {
 			loadNotifications().catch(() => authStore.set(null));
 		}
+
 		resetScroll();
 	});
 
@@ -351,6 +352,13 @@
 				{#if isLoggedIn}
 					<button class="circle large transparent" onclick={() => ui('#dialog-notifications')}
 						><i>notifications</i>
+						<div class="badge">
+							{#if notifications.length > 99}
+								99+
+							{:else}
+								{notifications.length}
+							{/if}
+						</div>
 						<div class="tooltip bottom">{$_('layout.notifications')}</div>
 					</button>
 				{/if}
@@ -401,7 +409,7 @@
 		{:else}
 			{#each notifications as notification (notification)}
 				<article class="no-padding border">
-					<Thumbnail video={notification}></Thumbnail>
+					<Thumbnail video={notification} sideways={true}></Thumbnail>
 				</article>
 			{/each}
 		{/if}
@@ -522,6 +530,10 @@
 		justify-content: center;
 	}
 
+	#dialog-notifications {
+		width: 500px;
+	}
+
 	@media only screen and (max-width: 993px) {
 		.pip {
 			width: 100%;
@@ -529,6 +541,10 @@
 			right: 0px;
 		}
 
+		#dialog-notifications {
+			width: 100%;
+		}
+
 		.pip > .pip-info > .player {
 			height: 80px;
 			width: 150px;