GUI base navigation & home

theseus_gui/src/routes/__layout.svelte

@@ -1,11 +1,45 @@
 <script lang="ts">
-
+    import '@fontsource/inter'
+    import Sidebar from '$lib/../components/layout/Sidebar.svelte'
+    import StatusBar from "../components/layout/StatusBar.svelte";
+    import Page from "../components/layout/Page.svelte";
 </script>
 
-<main>
-	<slot />
-</main>
+<svelte:head>
+    <style lang="postcss">
+        @import "../styles/global.postcss";
+    </style>
+</svelte:head>
 
-<style>
+<div class="app">
+    <Sidebar />
+    <StatusBar />
+    <Page>
+        <slot/>
+    </Page>
+</div>
 
+<style lang="postcss">
+    .app {
+        height: 100%;
+        width: 100%;
+        display: grid;
+        grid-template-areas:
+            "sidebar status-bar"
+            "sidebar page";
+        grid-template-rows: 2.5rem 1fr;
+        grid-template-columns: 14rem 1fr;
+    }
+
+    :global(.page) {
+        grid-area: page;
+    }
+
+    :global(.sidebar) {
+        grid-area: sidebar;
+    }
+
+    :global(.status-bar) {
+        grid-area: status-bar;
+    }
 </style>

theseus_gui/src/routes/index.svelte

@@ -1,9 +1,27 @@
 <script lang="ts">
 
+import Instance from "../components/components/Instance.svelte";
+import CardRow from "../components/components/CardRow.svelte";
 </script>
 
-<h1>Modrinth</h1>
+<CardRow title="Jump back in">
+    {#each Array(5) as _, i}
+        <Instance title="New Caves" id="234" version="1.18" image="https://i.ibb.co/8KDxBwq/patchnotes-cavesandcliffs.jpg" />
+    {/each}
+</CardRow>
 
-<style>
+<CardRow title="Popular packs">
+    {#each Array(5) as _, i}
+        <Instance title="All of Fabric 5" id="567" version="1.18.1" image="https://media.forgecdn.net/avatars/458/829/637733746768258525.png" modpack />
+    {/each}
+</CardRow>
+
+<CardRow title="Most played">
+    {#each Array(5) as _, i}
+        <Instance title="New Caves" id="234" version="1.18.2" image="https://i.ibb.co/8KDxBwq/patchnotes-cavesandcliffs.jpg" />
+    {/each}
+</CardRow>
+
+<style lang="postcss">
 
 </style>

theseus_gui/src/routes/library.svelte

@@ -0,0 +1,13 @@
+<script context="module" lang="ts">
+
+</script>
+
+<script lang="ts">
+
+</script>
+
+
+
+<style lang="postcss">
+
+</style>