From d6452a21ca309f2a90427df6655cc0c9538e5cb7 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 18 Apr 2024 01:13:00 -0700
Subject: fix(index): alignment on hide mix

---
 src/lib/List/Anime/DueIndexColumn.svelte | 21 +++++++++++++++++++++
 src/routes/+page.svelte                  | 32 +++++++++++++++++++-------------
 2 files changed, 40 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/List/Anime/DueIndexColumn.svelte

diff --git a/src/lib/List/Anime/DueIndexColumn.svelte b/src/lib/List/Anime/DueIndexColumn.svelte
new file mode 100644
index 00000000..6d81a661
--- /dev/null
+++ b/src/lib/List/Anime/DueIndexColumn.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
+	import Skeleton from '$lib/Loading/Skeleton.svelte';
+	import locale from '$stores/locale';
+	import settings from '$stores/settings';
+	import ListTitle from '../ListTitle.svelte';
+	import AnimeList from '$lib/List/Anime/DueAnimeList.svelte';
+
+	export let userIdentity: { id: number };
+	export let user: AniListAuthorisation;
+</script>
+
+<details open={!$settings.displayAnimeCollapsed} class="list list-due">
+	{#if userIdentity.id !== -2}
+		<AnimeList {user} />
+	{:else}
+		<ListTitle title={$locale().lists.due.episodes} />
+
+		<Skeleton card={false} count={5} height="0.9rem" list />
+	{/if}
+</details>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index df5e60b1..3a00a98b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte';
-	import AnimeList from '$lib/List/Anime/DueAnimeList.svelte';
 	import MangaListTemplate from '$lib/List/Manga/MangaListTemplate.svelte';
 	import UpcomingAnimeList from '$lib/List/Anime/UpcomingAnimeList.svelte';
 	import userIdentity from '$stores/identity.js';
@@ -12,6 +11,7 @@
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
 	import locale from '$stores/locale.js';
 	import Landing from '$lib/Landing.svelte';
+	import IndexColumn from '$lib/List/Anime/DueIndexColumn.svelte';
 
 	export let data;
 
@@ -33,7 +33,18 @@
 
 	<Landing />
 {:else}
-	<div class="grid-container">
+	<div
+		class="grid-container"
+		style={`
+			grid-template-columns: ${
+				[!$settings.disableUpcomingAnime, !$settings.disableAnime, !$settings.disableManga]
+					.map(Number)
+					.reduce((a, b) => a + b) > 1
+					? '1fr 1fr'
+					: '1fr'
+			}
+		`}
+	>
 		<div class="left-column">
 			{#if !$settings.disableUpcomingAnime}
 				<details open={!$settings.displayUpcomingAnimeCollapsed} class="list list-upcoming">
@@ -47,20 +58,16 @@
 				</details>
 			{/if}
 
-			{#if !$settings.disableAnime}
-				<details open={!$settings.displayAnimeCollapsed} class="list list-due">
-					{#if $userIdentity.id !== -2}
-						<AnimeList user={data.user} />
-					{:else}
-						<ListTitle title={$locale().lists.due.episodes} />
-
-						<Skeleton card={false} count={5} height="0.9rem" list />
-					{/if}
-				</details>
+			{#if !$settings.disableAnime && !$settings.disableManga}
+				<IndexColumn user={data.user} userIdentity={$userIdentity} />
 			{/if}
 		</div>
 
 		<div class="right-column">
+			{#if !$settings.disableAnime && $settings.disableManga}
+				<IndexColumn user={data.user} userIdentity={$userIdentity} />
+			{/if}
+
 			{#if !$settings.disableManga}
 				<details open={!$settings.displayMangaCollapsed} class="list list-manga">
 					{#if $userIdentity.id !== -2}
@@ -89,7 +96,6 @@
 <style>
 	.grid-container {
 		display: grid;
-		grid-template-columns: 1fr 1fr;
 		gap: 1rem;
 	}
 
-- 
cgit v1.2.3