Header bar

src/lib/components/app-header.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import SettingsButton from '$lib/components/settings/settings-button.svelte';
+	import ThemeToggle from '$lib/components/theme-toggle.svelte';
+</script>
+
+<header class="app-header">
+	<ThemeToggle />
+	<h1 class="app-header__title">Notes</h1>
+	<SettingsButton />
+</header>
+
+<style lang="scss">
+	.app-header {
+		z-index: 1;
+		position: sticky;
+		top: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 2rem;
+		padding: 0.5rem 1rem;
+		margin: 0;
+		background-color: var(--card-sectionning-background-color);
+		border-bottom-left-radius: 1rem;
+		border-bottom-right-radius: 1rem;
+		box-shadow: var(--card-box-shadow);
+
+		&__title {
+			flex: 1 0 auto;
+			font-size: 1.5rem;
+			text-align: center;
+			margin: 0;
+		}
+	}
+</style>

src/lib/components/settings/settings-button.svelte

@@ -4,6 +4,13 @@
 	import { settings } from '$lib/stores';
 </script>
 
-<Button plain icon size="lg" label="Settings" on:click={() => settings.open.set(true)}>
+<Button
+	plain
+	icon
+	size="lg"
+	label="Settings"
+	tooltipPlacement="left"
+	on:click={() => settings.open.set(true)}
+>
 	<FaGear />
 </Button>

src/lib/components/theme-toggle.svelte

@@ -10,6 +10,7 @@
 	icon
 	size="lg"
 	label={`Switch to ${$theme === 'dark' ? 'light' : 'dark'} theme`}
+	tooltipPlacement="right"
 	on:click={theme.toggle}
 >
 	{#if $theme === 'dark'}

src/routes/+page.svelte

@@ -1,21 +1,16 @@
 <script lang="ts">
+	import AppHeader from '$lib/components/app-header.svelte';
 	import FilterTags from '$lib/components/filter-tags.svelte';
 	import NoteAddButton from '$lib/components/notes/note-add-button.svelte';
 	import NoteListPlaceholder from '$lib/components/notes/note-list-placeholder.svelte';
 	import NoteList from '$lib/components/notes/note-list.svelte';
-	import SettingsButton from '$lib/components/settings/settings-button.svelte';
 	import SettingsModal from '$lib/components/settings/settings-modal.svelte';
-	import ThemeToggle from '$lib/components/theme-toggle.svelte';
 	import { notes, tags } from '$lib/stores';
 
 	const notesCount = notes.count;
 </script>
 
-<header>
-	<ThemeToggle />
-	<h1>Notes</h1>
-	<SettingsButton />
-</header>
+<AppHeader />
 <main>
 	<section hidden={$tags.length === 0}>
 		<FilterTags />
@@ -32,18 +27,6 @@
 <SettingsModal />
 
 <style lang="scss">
-	header {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 2rem;
-		margin: 1.5rem;
-
-		h1 {
-			margin: 0;
-		}
-	}
-
 	main {
 		margin: 1.5rem 1.5rem 7.5rem;
 	}