refactor: timeline into its own component

fix: bug with last_post not clearing when changing

src/lib/timeline.js

@@ -71,3 +71,8 @@ export async function getTimeline(timelineType = "home", clean, localOnly = fals
     }
     loading = false;
 }
+
+export function clearTimeline() {
+    timeline.set([]);
+    last_post = false;
+}

src/lib/ui/timeline/Timeline.svelte

@@ -0,0 +1,78 @@
+<script>
+    import { page } from '$app/stores';
+    import { account } from '$lib/stores/account.js';
+    import { timeline, getTimeline, clearTimeline } from '$lib/timeline.js';
+    import { app_name } from '$lib/config.js';
+    import Post from '$lib/ui/post/Post.svelte';
+    
+    import Lang from '$lib/lang';
+    const lang = Lang();
+
+    // TODO: refactor to enum when moving to TS
+    export let timelineType;
+
+    $: {
+        // awful hack to update timeline fresh
+        // when timelineType is updated
+        //
+        // TODO: migrate to $effect when migrating to svelte 5
+        timelineType = timelineType
+
+        clearTimeline()
+        getCurrentTimeline()
+    }
+
+    function getCurrentTimeline(clean = false) {
+        switch(timelineType) {
+            case "home":
+                getTimeline("home", clean);
+                break;
+
+            case "local":
+                getTimeline("public", clean, true)
+                break;
+
+            case "federated":
+                getTimeline("public", clean, false, true)
+                break;
+        }
+    }
+
+    account.subscribe(account => {
+        if (account) getCurrentTimeline();
+    });
+
+    document.addEventListener('scroll', () => {
+        if ($account && $page.url.pathname !== "/") return;
+        if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
+            getCurrentTimeline();
+        }
+    });
+</script>
+<div id="feed" role="feed">
+    {#if $timeline.length <= 0}
+        <div class="loading throb">
+            <span>{lang.string('timeline.fetching')}</span>
+        </div>
+    {/if}
+    {#each $timeline as post}
+        <Post post_data={post} />
+    {/each}
+</div>
+
+
+<style>
+    #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/routes/+page.svelte

@@ -9,6 +9,7 @@
     import Button from '$lib/ui/Button.svelte';
     import Post from '$lib/ui/post/Post.svelte';
     import PageHeader from '../lib/ui/core/PageHeader.svelte';
+    import Timeline from '../lib/ui/timeline/Timeline.svelte';
 
     const lang = Lang();
 
@@ -24,40 +25,7 @@
 
         // set in localStorage
         localStorage.setItem(app_name + '_selected_timeline', timelineType);
-     
-        // erase the timeline here so the ui reacts instantly
-        // mae: i could write an awesome undertale reference here
-        timeline.set([]);
-
-        getCurrentTimeline()
     }
-
-    function getCurrentTimeline(clean = false) {
-        switch(timelineType) {
-            case "home":
-                getTimeline("home", clean);
-                break;
-
-            case "local":
-                getTimeline("public", clean, true)
-                break;
-
-            case "federated":
-                getTimeline("public", clean, false, true)
-                break;
-        }
-    }
-
-    account.subscribe(account => {
-        if (account) getCurrentTimeline();
-    });
-
-    document.addEventListener('scroll', () => {
-        if ($account && $page.url.pathname !== "/") return;
-        if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
-            getCurrentTimeline();
-        }
-    });
 </script>
 
 {#if $account}
@@ -79,24 +47,12 @@
         </Button>
     </PageHeader>
 
-    <div id="feed" role="feed">
+    <Timeline timelineType={timelineType}/>
-        {#if $timeline.length <= 0}
-            <div class="loading throb">
-                <span>{lang.string('timeline.fetching')}</span>
-            </div>
-        {/if}
-        {#each $timeline as post}
-            <Post post_data={post} />
-        {/each}
-    </div>
 {:else}
     <LoginForm />
 {/if}
 
 <style>
-    #feed {
-        margin-bottom: 20vh;
-    }
 
     .loading {
         width: 100%;