Improved manage subscriptions

materialious/src/lib/components/ItemsList.svelte

@@ -10,6 +10,7 @@
 	import ChannelThumbnail from './ChannelThumbnail.svelte';
 	import PlaylistThumbnail from './PlaylistThumbnail.svelte';
 	import HashtagThumbnail from './HashtagThumbnail.svelte';
+	import NoResults from './NoResults.svelte';
 
 	interface Props {
 		items?: feedItems;
@@ -215,16 +216,7 @@
 
 <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>
+		<NoResults />
 	{/if}
 	<div class="grid" bind:this={gridElement}>
 		{#each items as item, index (index)}

materialious/src/lib/components/NoResults.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { _ } from '$lib/i18n';
+</script>
+
+<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>

materialious/src/lib/components/settings/Player.svelte

@@ -23,7 +23,7 @@
 		playerYouTubeJsFallback
 	} from '../../store';
 	import { playbackRates } from '$lib/player';
-	import { isUnrestrictedPlatform, isYTBackend } from '$lib/misc';
+	import { isUnrestrictedPlatform } from '$lib/misc';
 
 	let defaultLanguage = $state(get(playerDefaultLanguage));
 

materialious/src/routes/(app)/subscriptions/manage/+page.svelte

@@ -3,6 +3,7 @@
 	import { deleteUnsubscribe } from '$lib/api';
 	import Fuse from 'fuse.js';
 	import { _ } from '$lib/i18n';
+	import NoResults from '$lib/components/NoResults.svelte';
 
 	let { data } = $props();
 
@@ -34,30 +35,35 @@
 	}
 </script>
 
-<div class="padding">
-	<div class="max field suffix prefix small no-margin surface-variant">
-		<i class="front">search</i><input
-			bind:value={search}
-			oninput={searchSubs}
-			type="text"
-			placeholder={$_('searchPlaceholder')}
-		/>
-	</div>
+{#if subscriptions.length > 0}
+	<div class="padding">
+		<div class="max field suffix prefix small no-margin surface-variant">
+			<i class="front">search</i><input
+				bind:value={search}
+				oninput={searchSubs}
+				type="text"
+				placeholder={$_('searchPlaceholder')}
+			/>
+		</div>
 
-	{#each subscriptions as sub (sub.authorId)}
-		<article>
-			<nav>
-				<a href={resolve(`/channel/[authorId]`, { authorId: sub.authorId })}
-					><h6>
-						{sub.author}
-					</h6></a
-				>
-				<div class="max"></div>
-				<button onclick={async () => unsubscribe(sub.authorId)} class="border">Unsubscribe</button>
-			</nav>
-		</article>
-	{/each}
-</div>
+		{#each subscriptions as sub (sub.authorId)}
+			<article>
+				<nav>
+					<a href={resolve(`/channel/[authorId]`, { authorId: sub.authorId })}
+						><h6>
+							{sub.author}
+						</h6></a
+					>
+					<div class="max"></div>
+					<button onclick={async () => unsubscribe(sub.authorId)} class="border">Unsubscribe</button
+					>
+				</nav>
+			</article>
+		{/each}
+	</div>
+{:else}
+	<NoResults />
+{/if}
 
 <style>
 	@media screen and (max-width: 590px) {