finish sk restructure, a11y and optimisations

src/routes/post/[id]/+layout.svelte

@@ -0,0 +1,50 @@
+<script>
+    import Navigation from '$lib/ui/Navigation.svelte';
+    import Widgets from '$lib/ui/Widgets.svelte';
+    import Button from '$lib/ui/Button.svelte';
+</script>
+
+<div id="spacesocial-app">
+
+    <header>
+        <Navigation />
+    </header>
+
+    <main>
+        <header>
+            <h1>Home</h1>
+            <nav>
+                <Button centered active>Home</Button>
+                <Button centered disabled>Local</Button>
+                <Button centered disabled>Federated</Button>
+            </nav>
+        </header>
+
+        <slot></slot>
+    </main>
+
+    <div id="widgets">
+        <Widgets />
+    </div>
+
+</div>
+
+<style>
+    main header {
+        width: 100%;
+        margin: 16px 0 8px 0;
+        display: flex;
+        flex-direction: row;
+    }
+
+    main header h1 {
+        font-size: 1.5em;
+    }
+
+    main header nav {
+        margin-left: auto;
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+    }
+</style>

src/routes/post/[id]/+page.js

@@ -0,0 +1,46 @@
+import Post from '$lib/ui/post/Post.svelte';
+import { Client } from '$lib/client/client.js';
+import { parsePost } from '$lib/client/api.js';
+import { get } from 'svelte/store';
+
+export const prerender = true;
+export const ssr = false;
+
+export async function load({ params }) {
+    let client = get(Client.get());
+    if (client.app && client.app.token) {
+        // this triggers the client actually getting the authenticated user's data.
+        const res = await client.verifyCredentials()
+        if (res) {
+            console.log(`Logged in as @${client.user.username}@${client.user.host}`);
+        } else {
+            return null;
+        }
+    } else {
+        return null;
+    }
+
+    const post_id = params.id;
+
+    const post_data = await client.getPost(post_id);
+    if (!post_data) {
+        console.error(`Failed to retrieve post ${post_id}.`);
+        return null;
+    }
+
+    const post = await parsePost(post_data, 10, true);
+    let posts = [post];
+    for (let i in post.replies) {
+        const reply = post.replies[i];
+        // if (i > 1 && reply.reply_id === post.replies[i - 1].id) {
+        //     let reply_head = posts.pop();
+        //     reply.reply = reply_head;
+        // }
+        posts.push(reply);
+        // console.log(reply);
+    }
+
+    return {
+        posts: posts
+    };
+}

src/routes/post/[id]/+page.svelte

@@ -0,0 +1,38 @@
+<script>
+    import '$lib/app.css';
+    import Post from '$lib/ui/post/Post.svelte';
+
+    export let data;
+    const main_post = data.posts[0];
+    const replies = data.posts.slice(1);
+</script>
+
+<div id="feed" role="feed">
+    {#if data.posts.length <= 0}
+        <div class="throb">
+            <span>just a moment...</span>
+        </div>
+    {:else}
+        <Post post_data={main_post} focused />
+        <br>
+        {#each replies as post}
+            <Post post_data={post} />
+        {/each}
+    {/if}
+</div>
+
+<style>
+    #feed {
+        margin-bottom: 20vh;
+    }
+
+    .throb {
+        width: 100%;
+        height: 80vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 2em;
+        font-weight: bold;
+    }
+</style>