i think i finally fixed the state management awfulness

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

@@ -1,39 +1,5 @@
-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';
-import { goto } from '$app/navigation';
-
-export const ssr = false;
-
 export async function load({ params }) {
-    let client = get(Client.get());
-
-    if (!client.instance || !client.user) {
-        goto("/");
-    }
-
-    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
+        post_id: params.id
     };
 }

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

@@ -1,37 +1,80 @@
 <script>
-    import '$lib/app.css';
+    import { client } from '$lib/client/client.js';
+    import * as api from '$lib/client/api.js';
+    import { get } from 'svelte/store';
+
     import Post from '$lib/ui/post/Post.svelte';
     import Button from '$lib/ui/Button.svelte';
 
     export let data;
-    $: main_post = data.posts[0];
-    $: replies = data.posts.slice(1);
+    let error = false;
+
+    if (!get(client).instance || !get(client).user) {
+        goto("/");
+    }
+
+    $: post = (async resolve => {
+        const post_data = await get(client).getPost(data.post_id, 0, false);
+        if (!post_data) {
+            error = `Failed to retrieve post <code>${data.post_id}</code>.`;
+            console.error(`Failed to retrieve post ${data.post_id}.`);
+            return;
+        }
+        let post = await api.parsePost(post_data, 0, false);
+
+        const post_context = await get(client).getPostContext(data.post_id);
+
+        if (!post_context || !post_context.ancestors || !post_context.descendants)
+            return post;
+
+        // handle ancestors (above post)
+        let thread_top = post;
+        while (post_context.ancestors.length > 0) {
+            thread_top.reply = await api.parsePost(post_context.ancestors.pop(), 0, false);
+            thread_top = thread_top.reply;
+        }
+
+        // handle descendants (below post)
+        post.replies = [];
+        for (let i in post_context.descendants) {
+            post.replies.push(
+                api.parsePost(post_context.descendants[i], 0, false)
+            );
+        }
+
+        console.log(post);
+        return post;
+    })();
 </script>
 
+{#if !error}
 <header>
-    <h1>Home</h1>
+    {#await post then post}
+        <h1>Post by {@html post.user.rich_name}</h1>
+    {/await}
     <nav>
-        <Button centered active>Home</Button>
-        <Button centered disabled>Local</Button>
-        <Button centered disabled>Federated</Button>
+        <Button centered>Back</Button>
     </nav>
 </header>
 
 <div id="feed" role="feed">
-    {#if data.posts.length <= 0}
+    {#await post}
         <div class="throb">
-            <span>just a moment...</span>
+            <span>loading post...</span>
         </div>
-    {:else}
-        {#key data}
-        <Post post_data={main_post} focused />
+    {:then post}
+        <Post post_data={post} focused />
         <br>
-        {#each replies as post}
-            <Post post_data={post} />
+        {#each post.replies as reply}
+            {#await reply then reply}
+                <Post post_data={reply} />
+            {/await}
         {/each}
-        {/key}
-    {/if}
+    {/await}
 </div>
+{:else}
+    <p>{@html error}</p>
+{/if}
 
 <style>
     header {
@@ -42,7 +85,11 @@
     }
 
     header h1 {
+        margin: auto auto auto 8px;
         font-size: 1.5em;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
     }
 
     header nav {