random placeholder in composer + some cleanup

src/lib/ui/Composer.svelte

@@ -19,6 +19,15 @@
     let content = "";
     // let media_ids = [];
     let show_cw = false;
+    const placeholders = [
+        "What's cooking, $1?",
+        "Speak your mind!",
+        "Federate something...",
+        "I sure love posting!",
+        "Another day, another $1 post!",
+    ];
+    let placeholder = placeholders[Math.floor(placeholders.length * Math.random())]
+        .replaceAll("$1", $account.username);
 
     const dispatch = createEventDispatcher();
 
@@ -34,7 +43,7 @@
         let new_post = await api.createPost($server.host, $app.token, postdata);
         let new_post_parsed = await parsePost(new_post);
 
-        timeline.update(current => [new_post_parsed ,...current])
+        timeline.update(current => [new_post_parsed, ...current]);
         dispatch("compose_finished")
     }
 </script>
@@ -63,7 +72,7 @@
     {#if show_cw}
         <input type="text" id="" placeholder="content warning" bind:value={content_warning}/>
     {/if}
-    <textarea placeholder="what's cooking, mae?" class="textbox" bind:value={content}></textarea>
+    <textarea placeholder="{placeholder}" class="textbox" bind:value={content}></textarea>
     <div class="composer-footer">
         <div class="actions">
             <Button centered={true} disabled>

src/lib/ui/Feed.svelte

@@ -1,62 +0,0 @@
-<script>
-    import Button from './Button.svelte';
-    import Post from './post/Post.svelte';
-    import { getTimeline } from '$lib/timeline.js';
-
-    export let posts = [];
-</script>
-
-<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 posts.length <= 0}
-        <div class="loading throb">
-            <span>getting the feed...</span>
-        </div>
-    {/if}
-    {#each posts as post}
-        <Post post_data={post} />
-    {/each}
-</div>
-
-<style>
-    header {
-        width: 100%;
-        height: 64px;
-        margin: 16px 0 8px 0;
-        display: flex;
-        flex-direction: row;
-    }
-
-    header h1 {
-        font-size: 1.5em;
-    }
-
-    nav {
-        margin-left: auto;
-        display: flex;
-        flex-direction: row;
-        gap: 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>

src/lib/ui/Navigation.svelte

@@ -10,11 +10,10 @@
     import { page } from '$app/stores';
     import { get } from 'svelte/store';
     import { createEventDispatcher } from 'svelte';
-    import { unread_notif_count, last_read_notif_id } from '$lib/notifications.js';
+    import { unread_notif_count } from '$lib/notifications.js';
 
     import Logo from '$lib/../img/campfire-logo.svg';
     import Button from './Button.svelte';
-    import Feed from './Feed.svelte';
 
     import TimelineIcon from '../../img/icons/timeline.svg';
     import NotificationsIcon from '../../img/icons/notifications.svg';

src/lib/ui/post/Post.svelte

@@ -1,5 +1,4 @@
 <script>
-    import { play_sound } from '../../sound.js';
     import { onMount } from 'svelte';
     import { goto } from '$app/navigation';
 
@@ -10,14 +9,6 @@
     import ActionBar from './ActionBar.svelte';
     import ReactionBar from './ReactionBar.svelte';
 
-    import ReplyIcon from '../../../img/icons/reply.svg';
-    import RepostIcon from '../../../img/icons/repost.svg';
-    import FavouriteIcon from '../../../img/icons/like.svg';
-    import FavouriteIconFill from '../../../img/icons/like_fill.svg';
-    import ReactIcon from '../../../img/icons/react.svg';
-    import QuoteIcon from '../../../img/icons/quote.svg';
-    import MoreIcon from '../../../img/icons/more.svg';
-
     export let post_data;
     export let focused = false;
 

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 Button from '$lib/ui/Button.svelte';
-  import Modal from '../lib/ui/Modal.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) {
+    #feed {
-        height: auto;
+        margin-bottom: 20vh;
-        width: 320px;
+    }
-        margin: 8px;
+
+    .loading {
+        width: 100%;
+        height: 80vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 2em;
+        font-weight: bold;
     }
 </style>