feat: local and federated timelines

This commit is contained in:
mae taylor 2025-07-15 15:08:37 +01:00
parent 7db5ec7fae
commit c51a0b1e5d
Signed by: mae
GPG key ID: 3C80D76BA7A3B9BD
3 changed files with 64 additions and 11 deletions

View file

@ -2,6 +2,7 @@
import { page } from '$app/stores';
import { account } from '$lib/stores/account.js';
import { timeline, getTimeline } from '$lib/timeline.js';
import { app_name } from '$lib/config.js';
import Lang from '$lib/lang';
import LoginForm from '$lib/ui/LoginForm.svelte';
@ -11,23 +12,71 @@
const lang = Lang();
// TODO: refactor to enum when moving to TS
let timelineType = localStorage.getItem(app_name + '_selected_timeline') || "home";
$: {
// awful hack to update timeline fresh
// when timelineType is updated
//
// TODO: migrate to $effect when migrating to svelte 5
timelineType = timelineType
// 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) getTimeline();
if (account) getCurrentTimeline();
});
document.addEventListener('scroll', () => {
if ($account && $page.url.pathname !== "/") return;
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
getTimeline();
getCurrentTimeline();
}
});
</script>
{#if $account}
<PageHeader title={lang.string('timeline.home')}>
<Button centered active>{lang.string('timeline.home')}</Button>
<Button centered disabled>{lang.string('timeline.local')}</Button>
<Button centered disabled>{lang.string('timeline.federated')}</Button>
<PageHeader title={lang.string(`timeline.${timelineType}`)}>
<Button centered
active={(timelineType == "home")}
on:click={() => timelineType = "home"}>
{lang.string('timeline.home')}
</Button>
<Button centered
active={(timelineType == "local")}
on:click={() => timelineType = "local"}>
{lang.string('timeline.local')}
</Button>
<Button centered
active={(timelineType == "federated")}
on:click={() => timelineType = "federated"}>
{lang.string('timeline.federated')}
</Button>
</PageHeader>
<div id="feed" role="feed">