Cleanup and testing

src/lib/components/Catalog.svelte

@@ -3,19 +3,33 @@
 	import CatalogItem from './CatalogItem.svelte';
 </script>
 
-<div>
-	{#if $catalog}
+{#if $catalog && $catalog.length > 0}
+	<div class="container">
 		{#each $catalog as { manga }}
 			<CatalogItem {manga} />
 		{/each}
-	{/if}
-</div>
+	</div>
+{:else}
+	<div class="empty-state">
+		<p>Your catalog is currently empty.</p>
+		<a href="upload">Add manga</a>
+	</div>
+{/if}
 
-<style>
-	div {
+<style lang="scss">
+	.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%;