Further Cleanup removing old Compositor

src/lib/components/AppBar.svelte

@@ -1,9 +0,0 @@
-<script>
-	import { AppBar } from '@skeletonlabs/skeleton';
-	export let store;
-</script>
-
-<AppBar>
-	<!-- <h1 class="h4">{$store.dapp.name}</h1> -->
-	<!-- <svelte:fragment slot="trail">(actions)</svelte:fragment> -->
-</AppBar>

src/lib/components/Apps.svelte

@@ -4,9 +4,9 @@
 
 	const routes = [
 		{ path: '/', name: 'Home', icon: 'iconoir:home-simple-door' },
-		{ path: '/messages', name: 'Messages', icon: 'iconoir:message-text' },
+		{ path: '/terminal', name: 'Terminal', icon: 'iconoir:message-text' },
 		{ path: '/wallet', name: 'Wallet', icon: 'iconoir:wallet' },
-		{ path: '/helloearth', name: 'Hello Earth', icon: 'iconoir:planet-sat' }
+		{ path: '/composer', name: 'Composer', icon: 'iconoir:planet-sat' }
 	];
 	function closeDrawer() {
 		drawerStore.close();

src/lib/components/Messages.svelte

@@ -1,10 +1,8 @@
 <script>
 	import { onMount, afterUpdate } from 'svelte';
-	import Composite from '$lib/core/Composite.svelte';
+	import Composer from '$lib/core/refactor/Composer.svelte';
 
-	export let store;
-
-	let isStoreLoaded = false;
+	export let me;
 
 	let messagesContainer;
 
@@ -21,30 +19,27 @@
 	afterUpdate(() => {
 		scrollToBottom();
 	});
-	$: if ($store) isStoreLoaded = true;
 </script>
 
-{#if isStoreLoaded}
-	{#if $store.messages}
-		<main bind:this={messagesContainer} class="w-full h-full p-4 overflow-y-auto">
-			<div class="grid gap-2">
-				{#each $store.messages as message}
-					<div class="p-4 space-y-2 rounded-tl-none card variant-soft">
-						<header class="flex items-center justify-between">
-							<p class="font-bold">{message.type} | {message.sender}</p>
-							<small class="opacity-50">{message.timestamp}</small>
-						</header>
-						<p>{message.text}</p>
+{#if $me.store.messages}
+	<main bind:this={messagesContainer} class="w-full h-full p-4 overflow-y-auto">
+		<div class="grid gap-2">
+			{#each $me.store.messages as message}
+				<div class="p-4 space-y-2 rounded-tl-none card variant-soft">
+					<header class="flex items-center justify-between">
+						<p class="font-bold">{message.type} | {message.sender}</p>
+						<small class="opacity-50">{message.timestamp}</small>
+					</header>
+					<p>{message.text}</p>
+				</div>
+				{#if message.composite}
+					<div class="overflow-y-auto max-h-80vh">
+						<Composer composer={message.composite} />
 					</div>
-					{#if message.composite}
-						<div class="overflow-y-auto max-h-80vh">
-							<Composite composite={message.composite} />
-						</div>
-					{/if}
-				{/each}
-			</div>
-		</main>
-	{/if}
+				{/if}
+			{/each}
+		</div>
+	</main>
 {:else}
 	<div>Loading...</div>
 {/if}

src/lib/components/Terminal.svelte

@@ -27,7 +27,6 @@
 		}
 	}
 
-	// Sending message logic
 	function sendMessage(text) {
 		if (text && text.trim() !== '') {
 			const message = {

src/lib/components/cleanup/Recipies.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { createMachine, assign } from 'xstate';
 	import { useMachine } from '@xstate/svelte';
 	import { superForm } from 'sveltekit-superforms/client';
@@ -6,7 +6,7 @@
 	import { writable, get } from 'svelte/store';
 	import { createUser } from './userService';
 	import { derived } from 'svelte/store';
-	import Composite from '$lib/core/Composite.svelte';
+	import Composer from '$lib/core/refactor/Composer.svelte';
 
 	const initialFormData = { name: '', age: '' };
 
@@ -90,7 +90,7 @@
 					meta: {
 						title: 'LitStatus',
 						buttonLabel: 'next',
-						composite: {
+						composer: {
 							id: 'litStatus',
 							component: 'LitStatus'
 						}
@@ -189,7 +189,7 @@
 		</p>
 
 		{#if stateMachine.states[$state.value].meta.composite}
-			<Composite composite={stateMachine.states[$state.value].meta.composite} />
+			<Composer composer={stateMachine.states[$state.value].meta.composer} />
 		{/if}
 
 		{#if $state.value === 'start'}Welcome{:else if $state.value === 'name'}

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>