Cleanup and testing

src/_variables.scss

@@ -1,4 +1,4 @@
-$background-color: #1b1b20;
+$background-color: #0d0d0f;
 
 $primary-color: #2e3042;
 $primary-accent-color: #263447;

src/lib/assets/svgs/settings-svgrepo-com.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

src/lib/components/Catalog.svelte

@@ -3,19 +3,33 @@
 	import CatalogItem from './CatalogItem.svelte';
 </script>
 
-<div>
+{#if $catalog && $catalog.length > 0}
-	{#if $catalog}
+	<div class="container">
 		{#each $catalog as { manga }}
 			<CatalogItem {manga} />
 		{/each}
-	{/if}
 	</div>
+{:else}
+	<div class="empty-state">
+		<p>Your catalog is currently empty.</p>
+		<a href="upload">Add manga</a>
+	</div>
+{/if}
 
-<style>
+<style lang="scss">
-	div {
+	.container {
 		display: flex;
 		flex-direction: row;
 		gap: 20px;
 		flex-wrap: wrap;
 	}
+
+	.empty-state {
+		text-align: center;
+		padding: 20px;
+	}
+
+	a {
+		color: $secondary-accent-color;
+	}
 </style>

src/lib/components/NavBar.svelte

@@ -7,6 +7,7 @@
 	import { page } from '$app/stores';
 
 	import { currentManga, currentVolume } from '$lib/catalog';
+	import SettingsIcon from '$lib/assets/svgs/settings-svgrepo-com.svg';
 
 	import { writable } from 'svelte/store';
 	let title: string | undefined = 'Mokuro';
@@ -45,10 +46,15 @@
 		{:else}
 			<a href="/"><h2>{title}</h2></a>
 		{/if}
+		<img src={SettingsIcon} alt="settings" />
 	</div>
 </nav>
 
 <style lang="scss">
+	img {
+		width: 32px;
+		fill: #000;
+	}
 	nav {
 		position: relative;
 		width: 100%;

src/routes/+page.svelte

@@ -1,33 +1,5 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import { db } from '$lib/catalog/db';
-	import Button from '$lib/components/Button.svelte';
 	import Catalog from '$lib/components/Catalog.svelte';
-	import Modal from '$lib/components/Modal.svelte';
-
-	function onClick() {
-		goto('/upload');
-	}
-
-	function clear() {
-		db.catalog.clear();
-	}
-
-	let modal: HTMLDialogElement;
 </script>
 
-<Button variant="secondary" on:click={onClick}>Upload</Button>
-<Button variant="danger" on:click={clear}>Clear</Button>
-
-<Modal bind:modal>
-	<div slot="title">Title</div>
-	<div slot="content">
-		Content
-		<input type="text" />
-	</div>
-	<div slot="action">
-		<Button on:click={() => modal.close()}>Action</Button>
-		<Button variant="secondary" on:click={() => modal.close()}>Close</Button>
-	</div>
-</Modal>
 <Catalog />

src/routes/upload/+page.svelte

@@ -16,6 +16,4 @@
 
 {#await promise}
 	<h2>Loading...</h2>
-{:then}
-	<Catalog />
 {/await}