Further Cleanup removing old Compositor

src/lib/components/refactor/ComposerOverview.svelte

@@ -0,0 +1,24 @@
+<script>
+	import Icon from '@iconify/svelte';
+	import { drawerStore } from '@skeletonlabs/skeleton';
+
+	const routes = [
+		{ path: '/composer/stateToState', name: 'StateToState', icon: 'iconoir:align-top-box' },
+		{ path: '/composer/recipies', name: 'Recipies', icon: 'iconoir:stackoverflow' },
+		{ path: '/composer/graphql', name: 'GraphQL', icon: 'iconoir:network-right' },
+		{ path: '/composer/queries', name: 'Queries', icon: 'iconoir:brain-research' },
+		{ path: '/composer/form', name: 'Form', icon: 'iconoir:input-field' }
+	];
+	function closeDrawer() {
+		drawerStore.close();
+	}
+</script>
+
+<div class="grid grid-cols-3 gap-4 p-12">
+	{#each routes as route}
+		<a class="flex flex-col items-center w-64 logo-item" href={route.path} on:click={closeDrawer}>
+			<Icon icon={route.icon} width="96" height="96" />
+			<span class="mt-2 text-center">{route.name}</span>
+		</a>
+	{/each}
+</div>

src/lib/components/refactor/ComposerQueries.svelte

@@ -1,16 +1,5 @@
 <script>
-	import { createMessage } from '$lib/services/messages/messages';
 	export let me;
-
-	function sendMessage() {
-		const randomNumber = Math.floor(Math.random() * 100) + 1;
-		const messageData = {
-			text: `test ${randomNumber}`,
-			sender: 'ComposerCharly',
-			type: 'text'
-		};
-		createMessage(messageData);
-	}
 </script>
 
 <div class="flex flex-col h-screen border-2 border-green-500">
@@ -18,19 +7,16 @@
 		<p>My ID is: {$me.id}</p>
 
 		My state is: {$me.state}
+		Todo Query:<br />
 		{#if $me.store.todos}
 			{#each $me.store.todos as todo}
 				<p>{todo.text}</p>
 			{/each}
 		{/if}
 	</section>
-	<button
-		class="self-center px-4 py-2 font-bold text-white rounded hover:bg-blue-700"
-		on:click={sendMessage}
-	>
-		Send
-	</button>
+
 	<section class="flex-grow p-8 overflow-y-auto">
+		Messages Query:<br />
 		{#if $me.store.messages}
 			{#each $me.store.messages as message}
 				<p>{message.text}</p>