Improved favorited channel button

materialious/electron/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "Materialious",
-	"version": "1.12.3",
+	"version": "1.12.4",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "Materialious",
-			"version": "1.12.3",
+			"version": "1.12.4",
 			"license": "MIT",
 			"dependencies": {
 				"@capacitor-community/electron": "^5.0.0",

materialious/src/lib/components/watch/Author.svelte

@@ -67,29 +67,32 @@
 	</a>
 	{#if !hideSubscribe}
 		{#if $authStore}
-			<button
-				onclick={toggleSubscribed}
-				class:inverse-surface={!subscribed}
-				class:border={subscribed}
-			>
-				{#if !subscribed}
-					{$_('subscribe')}
-				{:else}
-					{$_('unsubscribe')}
-				{/if}
-			</button>
-			{#if window.indexedDB}
+			<nav class="group split">
 				<button
-					class:inverse-surface={!favoritedChannel}
-					class:border={favoritedChannel}
-					onclick={toggleFavourited}
+					onclick={toggleSubscribed}
+					class:inverse-surface={!subscribed}
+					class:border={subscribed}
 				>
-					<i>star</i>
-					<div class="tooltip">
-						{favoritedChannel ? $_('unfavouriteChannel') : $_('favouriteChannel')}
-					</div>
+					{#if !subscribed}
+						{$_('subscribe')}
+					{:else}
+						{$_('unsubscribe')}
+					{/if}
 				</button>
-			{/if}
+				{#if window.indexedDB && subscribed}
+					<button
+						class:inverse-surface={!favoritedChannel}
+						class:border={favoritedChannel}
+						onclick={toggleFavourited}
+						class="square"
+					>
+						<i>star</i>
+						<div class="tooltip">
+							{favoritedChannel ? $_('unfavouriteChannel') : $_('favouriteChannel')}
+						</div>
+					</button>
+				{/if}
+			</nav>
 		{:else}
 			<button class="inverse-surface" disabled>
 				{$_('subscribe')}