feat(manga): cover mode

7 files changed, 184 insertions, 124 deletions

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 402e22d9..eda46d28 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -16,6 +16,7 @@
 	import { browser } from '$app/environment';
 	import identity from '$stores/identity';
 	import Tooltip from './Tooltip.svelte';
+	import '../covers.css';
 
 	export let media: Media[];
 	export let title: any;
@@ -80,7 +81,7 @@
 	</button>
 {/if}
 
-{#if $settings.displayCoverMode}
+{#if $settings.displayCoverModeAnime}
 	<div
 		class="covers"
 		style={`grid-template-columns: repeat(auto-fill, minmax(${$settings.displayCoverWidth}px, 1fr))`}
@@ -225,54 +226,3 @@
 		{/each}
 	</ul>
 {/if}
-
-<style>
-	.covers {
-		display: grid;
-		justify-content: center;
-		gap: 1em 0.5em;
-		margin-top: 0.5rem;
-	}
-
-	.cover {
-		background-size: cover;
-		background-position: center;
-		border-radius: 8px;
-	}
-
-	.cover-title {
-		text-align: center;
-		margin: 0.25rem;
-	}
-
-	.cover-card {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		transition: transform 0.3s ease;
-		box-sizing: border-box;
-		display: inline-block;
-		padding: 0.1em;
-		margin: -0.1em;
-		box-sizing: content-box;
-	}
-
-	.cover-card:hover {
-		transform: scale(1.1);
-		position: relative;
-		z-index: 2;
-		transition: transform 0.3s ease;
-	}
-
-	.entry::after {
-		content: '';
-		display: table;
-		clear: both;
-	}
-
-	.countdown {
-		white-space: nowrap;
-		float: right;
-	}
-</style>
diff --git a/src/lib/List/Anime/PlaceholderList.svelte b/src/lib/List/Anime/PlaceholderList.svelte
index c67a6182..5d7eb908 100644
--- a/src/lib/List/Anime/PlaceholderList.svelte
+++ b/src/lib/List/Anime/PlaceholderList.svelte
@@ -13,9 +13,9 @@
 <Skeleton
 	card={false}
 	{count}
-	pad={$settings.displayCoverMode}
-	height={$settings.displayCoverMode ? '8rem' : '0.9rem'}
-	width={$settings.displayCoverMode ? `${$settings.displayCoverWidth / 1.05}px` : '100%'}
-	list={!$settings.displayCoverMode}
-	grid={$settings.displayCoverMode}
+	pad={$settings.displayCoverModeAnime}
+	height={$settings.displayCoverModeAnime ? '8rem' : '0.9rem'}
+	width={$settings.displayCoverModeAnime ? `${$settings.displayCoverWidth / 1.05}px` : '100%'}
+	list={!$settings.displayCoverModeAnime}
+	grid={$settings.displayCoverModeAnime}
 />
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 45eca0c3..9ac3f8c6 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -13,6 +13,8 @@
 	import { browser } from '$app/environment';
 	import proxy from '$lib/Utility/proxy';
 	import Tooltip from '../Anime/Tooltip.svelte';
+	import '../covers.css';
+	import { mediaTitle } from '../mediaTitle';
 
 	export let media: Media[];
 	export let cleanCache: () => void;
@@ -98,59 +100,118 @@
 	</span>
 {/if}
 
-<ul>
-	{#each media as manga}
-		{@const progress = (manga.mediaListEntry || { progress: 0 }).progress}
+{#if $settings.displayCoverModeManga}
+	<div
+		class="covers"
+		style={`grid-template-columns: repeat(auto-fill, minmax(${$settings.displayCoverWidth}px, 1fr))`}
+	>
+		{#each media as manga}
+			{@const progress = (manga.mediaListEntry || { progress: 0 }).progress}
 
-		{#if progress !== manga.episodes}
-			<li class="entry">
+			{#if progress !== manga.episodes}
 				<Tooltip
 					id={`manga-${manga.id}`}
-					content={`<img src="${manga.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
 					pin={`manga-${manga.id}`}
-					pinPosition="left"
-					disable={!$settings.displayHoverCover}
+					content={manga ? mediaTitle(manga) : ''}
 				>
-					<a href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)} target="_blank">
-						<span
-							style={lastUpdatedMedia === manga.id && manga.chapters !== progress
-								? 'color: lightcoral'
-								: ''}
+					<div class="cover-card">
+						<a
+							href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)}
+							target="_blank"
 						>
-							<MediaTitle title={manga.title} />
-						</span>
-					</a>
-					{#if $settings.displaySocialButton}
-						[<a href={`https://anilist.co/manga/${manga.id}/social`} target="_blank">S</a>]
-					{/if}
-					<span class="opaque">|</span>
-					{pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
-						<span class="opaque">/{manga.chapters || '?'}</span>
-					{/if}
-					<button
-						class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`}
-						style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''}
-						on:click={() =>
-							pendingUpdate === manga.id
-								? null
-								: updateMedia(manga.id, manga.mediaListEntry?.progress, media)}
-					>
-						+
-					</button>
-					{#if due || Math.floor(manga.episodes) < manga.chapters}
-						[{manga.episodes || '?'}]
-						{#await volumeCount(manga) then volumes}
-							{@const volumeProgress = manga.mediaListEntry?.progressVolumes}
+							<img class="cover" src={manga.coverImage.extraLarge} alt="Cover" />
+						</a>
+
+						<div class="cover-title">
+							{pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
+								<span class="opaque">/{manga.chapters || '?'}</span>
+							{/if}
+							<button
+								class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`}
+								style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''}
+								on:click={() =>
+									pendingUpdate === manga.id
+										? null
+										: updateMedia(manga.id, manga.mediaListEntry?.progress, media)}
+							>
+								+
+							</button>
+							{#if due || Math.floor(manga.episodes) < manga.chapters}
+								[{manga.episodes || '?'}]
+								{#await volumeCount(manga) then volumes}
+									{@const volumeProgress = manga.mediaListEntry?.progressVolumes}
 
-							{#if volumes !== null && (volumeProgress || 0) < volumes}
-								<span style="color: lightcoral;">
-									Vol. {volumeProgress} &#8594; {volumes}
-								</span>
+									{#if volumes !== null && (volumeProgress || 0) < volumes}
+										<span style="color: lightcoral;">
+											Vol. {volumeProgress} &#8594; {volumes}
+										</span>
+									{/if}
+								{/await}
 							{/if}
-						{/await}
-					{/if}
+						</div>
+					</div>
 				</Tooltip>
-			</li>
-		{/if}
-	{/each}
-</ul>
+			{/if}
+		{/each}
+	</div>
+{:else}
+	<ul>
+		{#each media as manga}
+			{@const progress = (manga.mediaListEntry || { progress: 0 }).progress}
+
+			{#if progress !== manga.episodes}
+				<li class="entry">
+					<Tooltip
+						id={`manga-${manga.id}`}
+						content={`<img src="${manga.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
+						pin={`manga-${manga.id}`}
+						pinPosition="left"
+						disable={!$settings.displayHoverCover}
+					>
+						<a
+							href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)}
+							target="_blank"
+						>
+							<span
+								style={lastUpdatedMedia === manga.id && manga.chapters !== progress
+									? 'color: lightcoral'
+									: ''}
+							>
+								<MediaTitle title={manga.title} />
+							</span>
+						</a>
+						{#if $settings.displaySocialButton}
+							[<a href={`https://anilist.co/manga/${manga.id}/social`} target="_blank">S</a>]
+						{/if}
+						<span class="opaque">|</span>
+						{pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
+							<span class="opaque">/{manga.chapters || '?'}</span>
+						{/if}
+						<button
+							class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`}
+							style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''}
+							on:click={() =>
+								pendingUpdate === manga.id
+									? null
+									: updateMedia(manga.id, manga.mediaListEntry?.progress, media)}
+						>
+							+
+						</button>
+						{#if due || Math.floor(manga.episodes) < manga.chapters}
+							[{manga.episodes || '?'}]
+							{#await volumeCount(manga) then volumes}
+								{@const volumeProgress = manga.mediaListEntry?.progressVolumes}
+
+								{#if volumes !== null && (volumeProgress || 0) < volumes}
+									<span style="color: lightcoral;">
+										Vol. {volumeProgress} &#8594; {volumes}
+									</span>
+								{/if}
+							{/await}
+						{/if}
+					</Tooltip>
+				</li>
+			{/if}
+		{/each}
+	</ul>
+{/if}
diff --git a/src/lib/List/covers.css b/src/lib/List/covers.css
new file mode 100644
index 00000000..2ecdcf02
--- /dev/null
+++ b/src/lib/List/covers.css
@@ -0,0 +1,48 @@
+.covers {
+	display: grid;
+	justify-content: center;
+	gap: 1em 0.5em;
+	margin-top: 0.5rem;
+}
+
+.cover {
+	background-size: cover;
+	background-position: center;
+	border-radius: 8px;
+}
+
+.cover-title {
+	text-align: center;
+	margin: 0.25rem;
+}
+
+.cover-card {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	transition: transform 0.3s ease;
+	box-sizing: border-box;
+	display: inline-block;
+	padding: 0.1em;
+	margin: -0.1em;
+	box-sizing: content-box;
+}
+
+.cover-card:hover {
+	transform: scale(1.1);
+	position: relative;
+	z-index: 2;
+	transition: transform 0.3s ease;
+}
+
+.entry::after {
+	content: '';
+	display: table;
+	clear: both;
+}
+
+.countdown {
+	white-space: nowrap;
+	float: right;
+}
diff --git a/src/lib/Media/Anime/Airing/AiringTime.svelte b/src/lib/Media/Anime/Airing/AiringTime.svelte
index 162a5c15..72ce2219 100644
--- a/src/lib/Media/Anime/Airing/AiringTime.svelte
+++ b/src/lib/Media/Anime/Airing/AiringTime.svelte
@@ -124,12 +124,12 @@
 		{nextEpisode}{#if anime.episodes !== null}<span class="opaque">/{anime.episodes}</span>
 		{/if} in {timeFrame}
 		<span class="opaque">
-			{#if few && $settings.displayCoverMode}<br />{/if}{few ? `(${time})` : ''}
+			{#if few && $settings.displayCoverModeAnime}<br />{/if}{few ? `(${time})` : ''}
 		</span>
 	</span>
 {:else}
 	<span title={dateString} use:tooltip style={`opacity: ${opacity}%;`}>
-		{nextEpisode} in {#if few && $settings.displayCoverMode}<br />{/if}{#if few}<b>
+		{nextEpisode} in {#if few && $settings.displayCoverModeAnime}<br />{/if}{#if few}<b>
 				{timeFrame}
 			</b>{:else}{timeFrame}{/if}
 		{few ? `(${time})` : ''}
diff --git a/src/lib/Media/Anime/Airing/time.ts b/src/lib/Media/Anime/Airing/time.ts
index 5bbce0bc..dcaac944 100644
--- a/src/lib/Media/Anime/Airing/time.ts
+++ b/src/lib/Media/Anime/Airing/time.ts
@@ -110,11 +110,11 @@ export const airingTime = (
 			return `<span title="${dateString}" style="opacity: ${opacity}%;">${nextEpisode}${totalEpisodes(
 				anime
 			)} in ${timeFrame} <span class="opaque">${
-				few && get(settings).displayCoverMode ? '<br>' : ''
+				few && get(settings).displayCoverModeAnime ? '<br>' : ''
 			}${few ? `(${time})` : ''}</span></span>`;
 		else
 			return `<span title="${dateString}" style="opacity: ${opacity}%;">${nextEpisode} in ${
-				few && get(settings).displayCoverMode ? '<br>' : ''
+				few && get(settings).displayCoverModeAnime ? '<br>' : ''
 			}${few ? '<b>' : ''}${timeFrame}${few ? '</b>' : ''} ${few ? `(${time})` : ''}</span>`;
 	}
 
diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index e3c0159e..cd69dd36 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -220,22 +220,11 @@
 
 <p />
 
-<b>{$locale().settings.display.categories.media.title}</b><br />
-<SettingCheckboxToggle
-	setting="displayHoverCover"
-	text="Show media cover when hovering on supported media titles"
-/>
-<SettingCheckboxToggle
-	setting="displayScheduleListMode"
-	text="Display schedule in list mode (legacy behaviour)"
-/>
-<SettingCheckboxToggle
-	setting="displayCoverMode"
-	text="Show anime lists with media covers instead of text"
-	lineBreak={false}
-/>
-{#if $settings.displayCoverMode}
-	&nbsp;
+<b>Show lists with media covers instead of text</b><br />
+<SettingCheckboxToggle setting="displayCoverModeAnime" text="Anime" lineBreak={false} />
+<SettingCheckboxToggle setting="displayCoverModeManga" text="Manga" lineBreak={false} />
+{#if $settings.displayCoverModeAnime || $settings.displayCoverModeManga}
+	<br />
 	<input
 		type="number"
 		class="no-shadow"
@@ -258,6 +247,18 @@
 {:else}
 	<br />
 {/if}
+
+<p />
+
+<b>{$locale().settings.display.categories.media.title}</b><br />
+<SettingCheckboxToggle
+	setting="displayHoverCover"
+	text="Show media cover when hovering on supported media titles"
+/>
+<SettingCheckboxToggle
+	setting="displayScheduleListMode"
+	text="Display schedule in list mode (legacy behaviour)"
+/>
 <SettingCheckboxToggle setting="displaySocialButton" text="Show social tab shortcut for media" />
 <select bind:value={$settings.displayTitleFormat}>
 	<option value="english">