refactor: extract sidebar to component

I realised that I must not show the sidebar everywhere. So to not move
code around I extracted it into its own component. This one is not
matching the design (because of the links etc.) but is a step in the
direction.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>

src/lib/components/atoms/SettingsSidebar.svelte

@@ -12,7 +12,13 @@ You should have received a copy of the GNU Affero General Public License along w
 -->
 
 <script>
-	import { AppRail, AppRailAnchor, AppRailTile, getDrawerStore } from '@skeletonlabs/skeleton';
+	import {
+		AppRail,
+		AppRailAnchor,
+		AppRailTile,
+		Drawer,
+		getDrawerStore
+	} from '@skeletonlabs/skeleton';
 	import { _, locale, locales } from 'svelte-i18n';
 	import { Bell24, Gear24, Key24, Paintbrush24, Person24 } from 'svelte-octicons';
 
@@ -25,6 +31,14 @@ You should have received a copy of the GNU Affero General Public License along w
 	}
 </script>
 
+<Drawer>
+	{#if $drawerStore.id === 'profile'}
+		<b>Profile settings go here</b>
+	{:else}
+		{$drawerStore.id}
+	{/if}
+</Drawer>
+
 <AppRail aspectRatio="auto" gap="gap-8" height="h-auto" width="w-[230px]" spacing="my-2">
 	<svelte:fragment slot="lead">
 		<AppRailTile

src/routes/+layout.svelte

@@ -5,7 +5,12 @@ SPDX-FileCopyrightText: 2024 André Jaenisch
 SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<script lang="ts">
+<script>
+	import { locale } from 'svelte-i18n';
+	import { initializeStores } from '@skeletonlabs/skeleton';
+
+	import { mapLocaleToDir } from '$lib/i18n';
+
 	// The ordering of these imports is critical to your app working properly
 	//import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
 	import '../theme.postcss';
@@ -13,59 +18,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 	//import '@skeletonlabs/skeleton/styles/skeleton.css';
 	// Most of your app wide CSS should be put in this file
 	import '../app.postcss';
-	import { AppShell, AppBar } from '@skeletonlabs/skeleton';
-	import { locale, locales } from 'svelte-i18n';
-
-	import { mapLocaleToDir } from '$lib/i18n';
 
 	locale.subscribe((l) => {
 		if (typeof document !== 'undefined') {
 			document.dir = mapLocaleToDir(l);
 		}
 	});
+
+	initializeStores();
 </script>
 
-<!-- App Shell -->
-<AppShell>
-	<svelte:fragment slot="header">
-		<!-- App Bar -->
-		<AppBar>
-			<svelte:fragment slot="lead">
-				<strong class="text-xl">Anvil</strong>
-			</svelte:fragment>
-			<svelte:fragment slot="trail">
-				<select bind:value={$locale} class="select">
-					{#each $locales as locale}
-						<option value={locale}>{locale}</option>
-					{/each}
-				</select>
-				<a
-					class="btn btn-sm variant-ghost-surface"
-					href="https://matrix.to/#/#general-forgefed:matrix.batsense.net"
-					target="_blank"
-					rel="noreferrer"
-				>
-					Matrix
-				</a>
-				<a
-					class="btn btn-sm variant-ghost-surface"
-					href="https://forgefed.org"
-					target="_blank"
-					rel="noreferrer"
-				>
-					ForgeFed
-				</a>
-				<a
-					class="btn btn-sm variant-ghost-surface"
-					href="https://codeberg.org/anvil/anvil"
-					target="_blank"
-					rel="noreferrer"
-				>
-					Code
-				</a>
-			</svelte:fragment>
-		</AppBar>
-	</svelte:fragment>
 <!-- Page Route Content -->
 <slot />
-</AppShell>

stories/atoms/SettingsSidebar.stories.ts

@@ -0,0 +1,25 @@
+/* Stories for SettingsSidebar atom.
+ * Copyright (C) 2024 André Jaenisch
+ * SPDX-FileCopyrightText: 2024 André Jaenisch
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import SettingsSidebar from '$lib/components/atoms/SettingsSidebar.svelte';
+
+const meta = {
+	title: 'Atoms/SettingsSidebar',
+	component: SettingsSidebar,
+	tags: ['autodocs']
+} satisfies Meta<SettingsSidebar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};