random placeholder in composer + some cleanup

src/routes/+page.svelte

@@ -5,13 +5,14 @@
     import { timeline, getTimeline } from '$lib/timeline.js';
 
     import LoginForm from '$lib/ui/LoginForm.svelte';
-    import Feed from '$lib/ui/Feed.svelte';
-  import Modal from '../lib/ui/Modal.svelte';
+    import Button from '$lib/ui/Button.svelte';
+    import Post from '$lib/ui/post/Post.svelte';
 
     logged_in.subscribe(logged_in => {
         if (logged_in) getTimeline();
     });
-    document.addEventListener("scroll", event => {
+
+    document.addEventListener("scroll", () => {
         if (get(logged_in) && get(page).url.pathname !== "/") return;
         if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
             getTimeline();
@@ -20,23 +21,33 @@
 </script>
 
 {#if $logged_in}
-    <Feed posts={$timeline} />
+    <header>
+        <h1>Home</h1>
+        <nav>
+            <Button centered active>Home</Button>
+                <Button centered disabled>Local</Button>
+                <Button centered disabled>Federated</Button>
+        </nav>
+    </header>
+
+    <div id="feed" role="feed">
+        {#if $timeline.length <= 0}
+            <div class="loading throb">
+                <span>getting the feed...</span>
+            </div>
+        {/if}
+        {#each $timeline as post}
+            <Post post_data={post} />
+        {/each}
+    </div>
 {:else}
     <LoginForm />
 {/if}
 
 <style>
-    a {
-        color: var(--accent);
-        text-decoration: none;
-    }
-
-    a:hover {
-        text-decoration: underline;
-    }
-
     header {
         width: 100%;
+        height: 64px;
         margin: 16px 0 8px 0;
         display: flex;
         flex-direction: row;
@@ -46,16 +57,24 @@
         font-size: 1.5em;
     }
 
-    header nav {
+    nav {
         margin-left: auto;
         display: flex;
         flex-direction: row;
         gap: 8px;
     }
 
-    :global(.app-logo) {
-        height: auto;
-        width: 320px;
-        margin: 8px;
+    #feed {
+        margin-bottom: 20vh;
+    }
+
+    .loading {
+        width: 100%;
+        height: 80vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 2em;
+        font-weight: bold;
     }
 </style>