From a2216ed3fc31cd4b5dc02f9fcace9ec65e9f0df4 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Tue, 4 Nov 2025 22:50:31 +1300
Subject: [PATCH] Improved no result placeholder

---
 materialious/src/lib/components/ItemsList.svelte | 12 ++++++++++++
 materialious/src/lib/i18n/locales/en.json        |  1 +
 materialious/src/routes/(app)/+page.svelte       | 15 ++++++++++++---
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/materialious/src/lib/components/ItemsList.svelte b/materialious/src/lib/components/ItemsList.svelte
index 15fb6f89..5b2000f9 100644
--- a/materialious/src/lib/components/ItemsList.svelte
+++ b/materialious/src/lib/components/ItemsList.svelte
@@ -221,6 +221,18 @@
 </script>
 
 <div class={classes} class:android-container={$isAndroidTvStore}>
+	{#if items.length === 0}
+		<div class="space"></div>
+		<div class="center-align">
+			<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+				><path
+					style="fill: var(--secondary);"
+					d="M11 0h2v4h-2zM5.001.586L3.587 2L6.5 4.914L7.915 3.5zM1 13.734L5.42 6h13.16L23 13.734V22H1zM6.58 8l-2.857 5h5.178l.193.75a3.002 3.002 0 0 0 5.812 0l.193-.75h5.178L17.42 8zM18.999.586L16.085 3.5l1.414 1.414L20.413 2z"
+				/></svg
+			>
+			<h1>{$_('noResult')}</h1>
+		</div>
+	{/if}
 	<div class="grid" bind:this={gridElement}>
 		{#each items as item, index}
 			<ContentColumn>
diff --git a/materialious/src/lib/i18n/locales/en.json b/materialious/src/lib/i18n/locales/en.json
index aedfc196..47179320 100644
--- a/materialious/src/lib/i18n/locales/en.json
+++ b/materialious/src/lib/i18n/locales/en.json
@@ -1,6 +1,7 @@
 {
 	"enabled": "Enabled",
 	"disabled": "Disabled",
+	"popularPageDisabled": "Popular page has been disabled by Admins",
 	"premium": "Premium YouTube content can't be watched on Materialious.",
 	"copyUrl": "Copy URL",
 	"loadMore": "Load more",
diff --git a/materialious/src/routes/(app)/+page.svelte b/materialious/src/routes/(app)/+page.svelte
index d8af57ba..364bf757 100644
--- a/materialious/src/routes/(app)/+page.svelte
+++ b/materialious/src/routes/(app)/+page.svelte
@@ -1,14 +1,23 @@
 <script lang="ts">
 	import ItemsList from '$lib/components/ItemsList.svelte';
+	import { _ } from '$lib/i18n/index';
 	import { feedCacheStore } from '$lib/store';
 
 	let { data } = $props();
 </script>
 
 {#if data.popularDisabled}
-	<nav class="center-align">
-		<p>Popular page has been disabled</p>
-	</nav>
+	<div class="center-align">
+		<div class="space"></div>
+		<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"
+			><path
+				style="fill: var(--secondary);"
+				d="M11.25 21.975Q9.3 21.825 7.612 21t-2.937-2.162q-1.25-1.338-1.963-3.1T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12v.475q-.425-.275-.988-.537t-1.037-.438q-.2-3.15-2.488-5.325T12 4q-1.4 0-2.638.45T7.1 5.7l6.125 6.125q-.475.2-.912.463t-.863.562L5.7 7.1q-.8 1.025-1.25 2.263T4 12q0 2.475 1.338 4.438T8.8 19.325q.45.7 1.125 1.425t1.325 1.225ZM17 20q1.475 0 2.738-.675T21.75 17.5q-.75-1.15-2.013-1.825T17 15q-1.475 0-2.738.675T12.25 17.5q.75 1.15 2.013 1.825T17 20Zm0 2q-2.4 0-4.288-1.263T10 17.5q.825-1.975 2.713-3.238T17 13q2.4 0 4.288 1.263T24 17.5q-.825 1.975-2.713 3.238T17 22Zm0-3q-.625 0-1.063-.438T15.5 17.5q0-.625.438-1.063T17 16q.625 0 1.063.438T18.5 17.5q0 .625-.438 1.063T17 19Z"
+			/></svg
+		>
+		<h1>{$_('disabled')}</h1>
+		<p>{$_('popularPageDisabled')}</p>
+	</div>
 {:else}
 	<ItemsList items={$feedCacheStore.popular ?? []} />
 {/if}