basic changes to UI & removed github action

theetherGit · Apr 11, 2024 · b34bb22 · b34bb22
1 parent f47dd99
commit b34bb22
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 13 deletions.
diff --git a/src/app.html b/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en" class="dark">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/noBgLogo.png" />
+		<link rel="icon" href="%sveltekit.assets%/noBgLogo.webp" />
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>

diff --git a/src/lib/components/chapters-dropdown.svelte b/src/lib/components/chapters-dropdown.svelte
@@ -29,7 +29,7 @@
 	</Select.Trigger>
 	{#if chapters.length}
 		<Select.Content
-			class="h-1/2 md:h-1/4 overflow-y-scroll py-4 scrollbar-thin scrollbar-thumb-primary
+			class="h-1/2 md:h-1/4 overflow-y-auto overflow-auto py-4 scrollbar-thin scrollbar-thumb-primary
 							scrollbar-track-accent"
 		>
 			<Select.Group>

diff --git a/src/lib/components/favourite-manga-card.svelte b/src/lib/components/favourite-manga-card.svelte
@@ -5,13 +5,14 @@
 	import { Input } from '$lib/components/ui/input';
 	import * as Alert from '$lib/components/ui/alert';
 	import * as Card from '$lib/components/ui/card';
-	import { fade, fly } from 'svelte/transition';
+	import { fade, fly, slide } from 'svelte/transition';
 	import { browser } from '$app/environment';
 	import { goto } from '$app/navigation';
-	import { Heart } from 'lucide-svelte';
+	import { Heart, Loader } from 'lucide-svelte';
 	import { liveQuery } from 'dexie';
 	import { onMount } from 'svelte';
 	import { db } from '$lib/db';
+	import { isFavouriteMangaUpdateCheckInProgress } from '$lib/utils';
 
 	let favouriteMangaSearchDB: any = null;
 	let favouriteUpdateChecker: Worker;
@@ -65,9 +66,21 @@
 	async function removeFavorite(id: string) {
 		await db.favouriteManga.delete(id);
 	}
+
 </script>
 
-<div id="favouriteMangaPage">
+<div id="favouriteMangaPage" class="space-y-4">
+	{#if $isFavouriteMangaUpdateCheckInProgress}
+		<div transition:slide >
+			<Alert.Root>
+				<Loader class="h-4 w-4 animate-spin"/>
+				<Alert.Title>Heads up!</Alert.Title>
+				<Alert.Description
+				>You can add components to your app using the cli.</Alert.Description
+				>
+			</Alert.Root>
+		</div>
+	{/if}
 	<Input
 		on:input={async (e) => {
 			await searchFavManga(e?.target?.value);
@@ -79,31 +92,31 @@
 			{#each mangaInView as manga}
 				<div in:fly out:fade>
 					<Card.Root>
-						<div class="grid grid-cols-3 px-4 py-2 gap-x-2.5">
-							<div class="col-span-1">
+						<div class="grid grid-cols-10 px-4 py-2 gap-x-2.5">
+							<div class="col-span-4">
 								<img
-									class="rounded-lg"
+									class="rounded-lg w-full h-full"
 									src="/images?type=covers_optimized_home_main&id=manga_{manga.id}&slug={manga.image}"
 									alt="Read {manga.name} on Manga Hour"
 								/>
 							</div>
-							<div class="col-span-2">
+							<div class="col-span-6">
 								<Button
 									variant="ghost"
-									class="w-full text-center"
+									class="w-full h-auto text-left"
 									href="/manga/{manga.id}/{manga.slug}"
 									on:click={async () => {
 										await goto(`/manga/${manga.id}/${manga.slug}`);
 									}}
 								>
-									<h2 class="text-lg font-semibold tracking-tight">{manga.name}</h2>
+									<h2 class="text-lg font-semibold text-left tracking-tight line-clamp-2">{manga.name}</h2>
 								</Button>
 								<div class="pt-4 space-y-2">
 									<Button
 										variant="outline"
 										class="w-full flex space-x-2 items-center justify-between"
 									>
-										Last Updated <spane>{formatDistanceToNowStrict(manga.lastUpdated)}</spane>
+										Updated <spane>{formatDistanceToNowStrict(manga.lastUpdated)}</spane>
 									</Button>
 									<Button
 										variant="destructive"
@@ -113,6 +126,14 @@
 										}}
 										>Remove from Favorites
 									</Button>
+									<Button
+										variant="destructive"
+										class="w-full"
+										on:click={async () => {
+											await removeFavorite(manga.id);
+										}}
+									>Remove from Favorites
+									</Button>
 								</div>
 							</div>
 						</div>

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -6,6 +6,8 @@ import { writable } from 'svelte/store';
 
 export const liveReaders = writable(0);
 
+export const isFavouriteMangaUpdateCheckInProgress = writable(false)
+
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
 }

diff --git a/src/lib/workers/favoriteUpdateChecker.ts b/src/lib/workers/favoriteUpdateChecker.ts
@@ -1,4 +1,5 @@
 import { db } from '$lib/db';
+import { isFavouriteMangaUpdateCheckInProgress } from '$lib/utils';
 
 const fetchUpdate = async (manga: any) => {
 	const response = await fetch(`/api/manga?id=${manga.id}&slug=${manga.slug}`);
@@ -11,11 +12,13 @@ const fetchUpdate = async (manga: any) => {
 };
 
 onmessage = async (e) => {
+	isFavouriteMangaUpdateCheckInProgress.set(true)
 	const favManga = await db.favouriteManga.toArray();
 	if (favManga.length) {
 		for (const manga of favManga) {
-			fetchUpdate(manga);
+			await fetchUpdate(manga);
 		}
 	}
+	isFavouriteMangaUpdateCheckInProgress.set(false)
 };
 export {};