From ea655be12198267c85e18afb01ab03edbe18c35a Mon Sep 17 00:00:00 2001
From: alemi <me@alemi.dev>
Date: Wed, 12 Jun 2024 06:02:36 +0200
Subject: [PATCH] fix(web): huge refactor but basically nothing changed

... yet! this fixes the weird bug that resets timeline scroll when
coming back from users (annoying!). also slightly better spacing for
things and more consistent loading buttons. its a big refactor and its
underway but there's so much in progress that ill commit this big chunk
as is and i totally wont regret it later when i need to remember what i
was moving where aha
---
 web/Cargo.toml                                |   3 +-
 web/index.html                                |  25 ++-
 web/src/actors/{view.rs => header.rs}         |   2 +-
 web/src/actors/mod.rs                         |   2 +-
 web/src/actors/posts.rs                       |   5 +-
 web/src/app.rs                                |  97 +++++++-----
 web/src/components/login.rs                   |  12 +-
 web/src/components/mod.rs                     |   3 -
 web/src/components/object.rs                  |   2 +-
 web/src/components/user.rs                    |  89 ++---------
 web/src/getters.rs                            |  11 ++
 web/src/lib.rs                                |   6 +-
 web/src/objects/mod.rs                        |   1 +
 web/src/{page/object.rs => objects/view.rs}   |  56 +++----
 web/src/page/about.rs                         |   1 -
 web/src/page/config.rs                        |   1 -
 web/src/page/debug.rs                         |   1 -
 web/src/page/mod.rs                           |   6 -
 web/src/page/register.rs                      |   1 -
 web/src/page/search.rs                        |   1 -
 web/src/page/timeline.rs                      |  23 ---
 web/src/prelude.rs                            |  12 +-
 web/src/timeline/feed.rs                      |  42 +++++
 .../timeline.rs => timeline/mod.rs}           | 148 +++---------------
 web/src/timeline/thread.rs                    |  75 +++++++++
 25 files changed, 286 insertions(+), 339 deletions(-)
 rename web/src/actors/{view.rs => header.rs} (98%)
 create mode 100644 web/src/getters.rs
 create mode 100644 web/src/objects/mod.rs
 rename web/src/{page/object.rs => objects/view.rs} (53%)
 delete mode 100644 web/src/page/timeline.rs
 create mode 100644 web/src/timeline/feed.rs
 rename web/src/{components/timeline.rs => timeline/mod.rs} (55%)
 create mode 100644 web/src/timeline/thread.rs

diff --git a/web/Cargo.toml b/web/Cargo.toml
index ab9deaad..eacdf4ea 100644
--- a/web/Cargo.toml
+++ b/web/Cargo.toml
@@ -24,7 +24,6 @@ dashmap = "5.5"
 leptos = { version = "0.6", features = ["csr", "tracing"] }
 leptos_router = { version = "0.6", features = ["csr"] }
 leptos-use = { version = "0.10", features = ["serde"] }
-web-sys = { version = "0.3", features = ["Screen"] }
 reqwest = { version = "0.12", features = ["json"] }
 apb = { path = "../apb", features = ["unstructured", "activitypub-fe", "activitypub-counters", "litepub"] }
 uriproxy = { path = "../utils/uriproxy/" }
@@ -34,3 +33,5 @@ lazy_static = "1.4"
 chrono = { version = "0.4", features = ["serde"] }
 jrd = "0.1"
 tld = "2.35"
+web-sys = { version = "0.3", features = ["Screen"] }
+regex = "1.10.5"
diff --git a/web/index.html b/web/index.html
index d37d447a..f6a25e56 100644
--- a/web/index.html
+++ b/web/index.html
@@ -39,6 +39,10 @@
 		* {
 			font-family: 'Fira Code', Menlo, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace;
 		}
+		html {
+			overflow-y: scroll;
+			height: 100vh;
+		}
 
 		body {
 			margin: 0;
@@ -76,14 +80,23 @@
 			hyphens: auto;
 			border-left: solid 3px var(--background-secondary);
 		}
-		blockquote.tl {
+		article.tl {
 			color: var(--text);
 			border-left: solid 3px var(--accent);
+			margin-left: 1.25em;
+			margin-right: 1em;
 			margin-top: 0;
 			margin-bottom: 0;
+			word-wrap: break-word;
 		}
-		blockquote.tl p {
-			margin: 0 .5em;
+		article p {
+			margin: 0 0 0 .5em;
+		}
+		b.displayname {
+			overflow-wrap: break-word;
+		}
+		table.align {
+			max-width: 100%;
 		}
 		span.footer {
 			padding: .1em;
@@ -257,10 +270,10 @@
 			color: var(--background);
 			cursor: pointer;
 		}
-		.ml-1-l {
+		.ml-1-r {
 			margin-left: 1em;
 		}
-		.ml-1-r {
+		.mr-1-r {
 			margin-right: 1em;
 		}
 		.ml-3-r {
@@ -282,7 +295,7 @@
 			.ml-1-l {
 				margin-left: 0;
 			}
-			.ml-1-r {
+			.mr-1-r {
 				margin-right: 0;
 			}
 			.ml-3-r {
diff --git a/web/src/actors/view.rs b/web/src/actors/header.rs
similarity index 98%
rename from web/src/actors/view.rs
rename to web/src/actors/header.rs
index 29726da1..a0998709 100644
--- a/web/src/actors/view.rs
+++ b/web/src/actors/header.rs
@@ -27,7 +27,7 @@ pub fn ActorHeader() -> impl IntoView {
 		}
 	);
 	move || match actor.get() {
-		None => view! { <Loader margin=true /> }.into_view(),
+		None => view! { <Loader /> }.into_view(),
 		Some(Err(e)) => view! { <code class="center cw color">"could not resolve user: "{e}</code> }.into_view(),
 		Some(Ok(actor)) => {
 			let avatar_url = actor.icon().get().map(|x| x.url().id().str().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
diff --git a/web/src/actors/mod.rs b/web/src/actors/mod.rs
index d6621713..9b947c05 100644
--- a/web/src/actors/mod.rs
+++ b/web/src/actors/mod.rs
@@ -1,6 +1,6 @@
 pub mod follow;
-pub mod view;
 pub mod posts;
+pub mod header;
 
 use leptos_router::Params; // TODO can i remove this?
 #[derive(Clone, leptos::Params, PartialEq)]
diff --git a/web/src/actors/posts.rs b/web/src/actors/posts.rs
index 004d3337..d9c453f7 100644
--- a/web/src/actors/posts.rs
+++ b/web/src/actors/posts.rs
@@ -7,14 +7,15 @@ pub fn ActorPosts() -> impl IntoView {
 	let feeds = use_context::<Feeds>().expect("missing feeds context");
 	let params = use_params::<super::IdParam>();
 	Signal::derive(move || {
-		let id = params.get().ok().and_then(|x| x.id).unwrap_or_default();
+		let id = params.get_untracked().ok().and_then(|x| x.id).unwrap_or_default();
 		let tl_url = format!("{}/outbox/page", Uri::api(U::Actor, &id, false));
 		if !feeds.user.next.get_untracked().starts_with(&tl_url) {
 			feeds.user.reset(Some(tl_url));
 		}
+		id
 	}).track();
 	view! {
 		<code class="cw color center mt-1 mb-1 ml-3 mr-3"><span class="emoji">"🖂"</span>" "<b>posts</b></code>
-		<TimelineFeed tl=feeds.user />
+		<Feed tl=feeds.user />
 	}
 }
diff --git a/web/src/app.rs b/web/src/app.rs
index a20dca03..3f4159fb 100644
--- a/web/src/app.rs
+++ b/web/src/app.rs
@@ -2,7 +2,7 @@ use leptos::*;
 use leptos_router::*;
 use crate::prelude::*;
 
-use leptos_use::{storage::use_local_storage, use_cookie, utils::{FromToStringCodec, JsonCodec}};
+use leptos_use::{signal_throttled, storage::use_local_storage, use_cookie, use_element_size, use_window_scroll, utils::{FromToStringCodec, JsonCodec}, UseElementSizeReturn};
 
 #[derive(Clone, Copy)]
 pub struct Feeds {
@@ -64,29 +64,18 @@ pub fn App() -> impl IntoView {
 	let reply_controls = ReplyControls::default();
 	provide_context(reply_controls);
 
-	let screen_width = window().screen().map(|x| x.avail_width().unwrap_or_default()).unwrap_or_default();
+	let screen_width = document().body().map(|x| x.client_width()).unwrap_or_default();
+	tracing::info!("detected width of {screen_width}");
 
-	let (menu, set_menu) = create_signal(screen_width <= 786);
+	let (menu, set_menu) = create_signal(screen_width < 768);
 	let (advanced, set_advanced) = create_signal(false);
 
 	let title_target = move || if auth.present() { "/web/home" } else { "/web/server" };
 
-	spawn_local(async move {
-		// refresh token first, or verify that we're still authed
-		if Auth::refresh(auth.token, set_token, set_userid).await {
-			feeds.home.more(auth); // home inbox requires auth to be read
-			feeds.private.more(auth);
-		}
-		feeds.global.more(auth);
-		feeds.public.more(auth); // server inbox may contain private posts
-	});
-
-
-	// refresh token every hour
-	set_interval(
-		move || spawn_local(async move { Auth::refresh(auth.token, set_token, set_userid).await; }),
-		std::time::Duration::from_secs(3600)
-	);
+	// refresh token immediately and  every hour
+	let refresh = move || spawn_local(async move { Auth::refresh(auth.token, set_token, set_userid).await; });
+	refresh();
+	set_interval(refresh, std::time::Duration::from_secs(3600));
 
 	view! {
 		<nav class="w-100 mt-1 mb-1 pb-s">
@@ -98,7 +87,7 @@ pub fn App() -> impl IntoView {
 		<hr class="sep sticky" />
 		<div class="container mt-2 pt-2" >
 			<div class="two-col" >
-				<div class="col-side sticky pb-s" class:hidden=move || menu.get() >
+				<div class="col-side sticky pb-s" class:hidden=menu >
 					<Navigator />
 					<hr class="mt-1 mb-1" />
 					<LoginBox
@@ -115,7 +104,7 @@ pub fn App() -> impl IntoView {
 						<hr class="only-on-mobile sep mb-0 pb-0" />
 					</div>
 				</div>
-				<div class="col-main" class:w-100=move || menu.get() >
+				<div class="col-main" class:w-100=menu >
 					<Router // TODO maybe set base="/web" ?
 						trailing_slash=TrailingSlash::Redirect
 						fallback=|| view! { <NotFound /> }
@@ -123,7 +112,7 @@ pub fn App() -> impl IntoView {
 						<main>
 								<Routes>
 									<Route path="/" view=move || view! { <Redirect path="/web" /> } />
-									<Route path="/web" view=Navigable >
+									<Route path="/web" view=Scrollable >
 										<Route path="" view=move ||
 											if auth.present() {
 												view! { <Redirect path="home" /> }
@@ -131,25 +120,22 @@ pub fn App() -> impl IntoView {
 												view! { <Redirect path="server" /> }
 											}
 										/>
-										<Route path="home" view=move || view! { <TimelinePage name="home" tl=feeds.home /> } />
-										<Route path="server" view=move || view! { <TimelinePage name="server" tl=feeds.global /> } />
-										<Route path="local" view=move || view! { <TimelinePage name="local" tl=feeds.server /> } />
-										<Route path="inbox" view=move || view! { <TimelinePage name="inbox" tl=feeds.private /> } />
+										<Route path="home" view=move || view! { <Feed tl=feeds.home /> } />
+										<Route path="server" view=move || view! { <Feed tl=feeds.global /> } />
+										<Route path="local" view=move || view! { <Feed tl=feeds.server /> } />
+										<Route path="inbox" view=move || view! { <Feed tl=feeds.private /> } />
 
 										<Route path="about" view=AboutPage />
 										<Route path="config" view=move || view! { <ConfigPage setter=set_config /> } />
 										<Route path="dev" view=DebugPage />
 
-										<Route path="actors" view=Outlet > // TODO can we avoid this?
-											<Route path=":id" view=ActorHeader >
-												<Route path="" view=ActorPosts />
-												<Route path="following" view=move || view! { <FollowList outgoing=true /> } />
-												<Route path="followers" view=move || view! { <FollowList outgoing=false /> } />
-											</Route>
-											<Route path="" view=NotFound />
+										<Route path="actors/:id" view=ActorHeader > // TODO can we avoid this?
+											<Route path="" view=ActorPosts />
+											<Route path="following" view=move || view! { <FollowList outgoing=true /> } />
+											<Route path="followers" view=move || view! { <FollowList outgoing=false /> } />
 										</Route>
 
-										<Route path="objects/:id" view=ObjectPage />
+										<Route path="objects/:id" view=ObjectView />
 										// <Route path="/web/activities/:id" view=move || view! { <ActivityPage tl=context_tl /> } />
 
 										<Route path="search" view=SearchPage />
@@ -170,11 +156,11 @@ pub fn App() -> impl IntoView {
 }
 
 #[component]
-fn Navigable() -> impl IntoView {
+fn Scrollable() -> impl IntoView {
 	let location = use_location();
 	let breadcrumb = Signal::derive(move || {
 		let path = location.pathname.get();
-		let mut path_iter = path.split('/').skip(1);
+		let mut path_iter = path.split('/').skip(2);
 		// TODO wow this breadcrumb logic really isnt nice can we make it better??
 		match path_iter.next() {
 			Some("actors") => match path_iter.next() {
@@ -197,12 +183,17 @@ fn Navigable() -> impl IntoView {
 			None => "?".to_string(),
 		}
 	});
+	let element = create_node_ref();
+	let should_load = use_scroll_limit(element, 1750.0);
+	provide_context(should_load);
 	view! {
-		<div class="tl-header w-100 center" >
-			<a class="breadcrumb mr-1" href="javascript:history.back()" ><b>"<<"</b></a>
-			<b>{crate::NAME}</b>" :: "{breadcrumb}
+		<div class="mb-1" node_ref=element>
+			<div class="tl-header w-100 center mb-1">
+				<a class="breadcrumb mr-1" href="javascript:history.back()" ><b>"<<"</b></a>
+				<b>{crate::NAME}</b>" :: "{breadcrumb}
+			</div>
+			<Outlet />
 		</div>
-		<Outlet />
 	}
 }
 
@@ -217,10 +208,32 @@ pub fn NotFound() -> impl IntoView {
 }
 
 #[component]
-pub fn Loader(#[prop(optional)] margin: bool) -> impl IntoView {
+pub fn Loader() -> impl IntoView {
 	view! {
-		<div class="center" class:mt-1={margin}>
+		<div class="center mt-1 mb-1" >
 			<button type="button" disabled>"loading "<span class="dots"></span></button>
 		</div>
 	}
 }
+
+pub fn use_scroll_limit<El, T>(el: El, offset: f64) -> Signal<bool>
+where 
+	El: Into<leptos_use::core::ElementMaybeSignal<T, web_sys::Element>> + Clone + 'static,
+	T: Into<web_sys::Element> + Clone + 'static,
+{
+	let (load, set_load) = create_signal(false);
+	let (_x, y) = use_window_scroll();
+	let UseElementSizeReturn { height, .. } = use_element_size(el);
+	let scroll_state = Signal::derive(move || (y.get(), height.get()));
+	let scroll_state_throttled = signal_throttled(scroll_state, 200.);
+	let _ = watch(
+		move || scroll_state_throttled.get(),
+		move |(y, height), _, _| {
+			let before = load.get();
+			let after = y + offset >= *height;
+			if after != before { set_load.set(after) };
+		},
+		false,
+	);
+	load.into()
+}
diff --git a/web/src/components/login.rs b/web/src/components/login.rs
index ce2a6d10..48353c6c 100644
--- a/web/src/components/login.rs
+++ b/web/src/components/login.rs
@@ -17,8 +17,8 @@ pub fn LoginBox(
 				<input style="float:right" type="submit" value="logout" on:click=move |_| {
 					token_tx.set(None);
 					feeds.reset();
-					feeds.global.more(auth);
-					feeds.public.more(auth);
+					feeds.global.spawn_more(auth);
+					feeds.public.spawn_more(auth);
 				} />
 			</div>
 			<div class:hidden=move || auth.present() >
@@ -45,14 +45,14 @@ pub fn LoginBox(
 						token_tx.set(Some(auth_response.token));
 						// reset home feed and point it to our user's inbox
 						feeds.home.reset(Some(format!("{URL_BASE}/actors/{username}/feed/page")));
-						feeds.home.more(auth);
+						feeds.home.spawn_more(auth);
 						feeds.private.reset(Some(format!("{URL_BASE}/actors/{username}/inbox/page")));
-						feeds.private.more(auth);
+						feeds.private.spawn_more(auth);
 						// reset server feed: there may be more content now that we're authed
 						feeds.global.reset(Some(format!("{URL_BASE}/feed/page")));
-						feeds.global.more(auth);
+						feeds.global.spawn_more(auth);
 						feeds.server.reset(Some(format!("{URL_BASE}/inbox/page")));
-						feeds.server.more(auth);
+						feeds.server.spawn_more(auth);
 					});
 				} >
 					<table class="w-100 align">
diff --git a/web/src/components/mod.rs b/web/src/components/mod.rs
index 76155aa3..c4301994 100644
--- a/web/src/components/mod.rs
+++ b/web/src/components/mod.rs
@@ -16,9 +16,6 @@ pub use user::*;
 mod post;
 pub use post::*;
 
-mod timeline;
-pub use timeline::*;
-
 use leptos::*;
 
 #[component]
diff --git a/web/src/components/object.rs b/web/src/components/object.rs
index ed95f184..e0c55a8f 100644
--- a/web/src/components/object.rs
+++ b/web/src/components/object.rs
@@ -157,7 +157,7 @@ pub fn Object(object: crate::Object) -> impl IntoView {
 	let post = match object.object_type() {
 		// mastodon, pleroma, misskey
 		Ok(apb::ObjectType::Note) => view! {
-			<blockquote class="tl">{post_inner}</blockquote>
+			<article class="tl">{post_inner}</article>
 		}.into_view(),
 		// lemmy with Page, peertube with Video
 		Ok(apb::ObjectType::Document(t)) => view! {
diff --git a/web/src/components/user.rs b/web/src/components/user.rs
index 5252f66d..399702d2 100644
--- a/web/src/components/user.rs
+++ b/web/src/components/user.rs
@@ -26,15 +26,15 @@ pub fn ActorBanner(object: crate::Object) -> impl IntoView {
 			let uid = object.id().unwrap_or_default().to_string();
 			let uri = Uri::web(U::Actor, &uid);
 			let avatar_url = object.icon().get().map(|x| x.url().id().str().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
-			let display_name = object.name().unwrap_or_default().to_string();
 			let username = object.preferred_username().unwrap_or_default().to_string();
 			let domain = object.id().unwrap_or_default().replace("https://", "").split('/').next().unwrap_or_default().to_string();
+			let display_name = object.name().unwrap_or_default().to_string();
 			view! {
 				<div>
 					<table class="align" >
 					<tr>
 						<td rowspan="2" ><a href={uri.clone()} ><img class="avatar avatar-actor" src={avatar_url} /></a></td>
-						<td><b>{display_name}</b></td>
+						<td><b class="displayname"><DisplayName name=display_name /></b></td>
 					</tr>
 					<tr>
 						<td class="top" ><a class="hover" href={uri} ><small>{username}@{domain}</small></a></td>
@@ -49,6 +49,18 @@ pub fn ActorBanner(object: crate::Object) -> impl IntoView {
 	}
 }
 
+#[component]
+fn DisplayName(mut name: String) -> impl IntoView {
+	let custom_emoji_regex = regex::Regex::new(r":\w+:").expect("failed compiling regex pattern");
+	for m in custom_emoji_regex.find_iter(&name.clone()) {
+		// TODO this is a clear unmitigated unsanitized html injection ahahahahaha but accounts 
+		//      with many custom emojis in their names mess with my frontend and i dont want to 
+		//      deal with it rn
+		name = name.replace(m.as_str(), &format!("<u class=\"moreinfo\" title=\"{}\">[::]</u>", m.as_str()));
+	}
+	view! { <span inner_html=name></span> }
+}
+
 #[component]
 pub fn FollowRequestButtons(activity_id: String, actor_id: String) -> impl IntoView {
 	let auth = use_context::<Auth>().expect("missing auth context");
@@ -104,79 +116,6 @@ async fn send_follow_response(kind: apb::ActivityType, target: String, to: Strin
 	}
 }
 
-#[component]
-pub fn ActorHeader(object: crate::Object) -> impl IntoView {
-	let auth = use_context::<Auth>().expect("missing auth context");
-	let avatar_url = object.icon().get().map(|x| x.url().id().str().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
-	let background_url = object.image().get().map(|x| x.url().id().str().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
-	let display_name = object.name().unwrap_or_default().to_string();
-	let username = object.preferred_username().unwrap_or_default().to_string();
-	let created = object.published().ok();
-	let following = object.following_count().unwrap_or(0);
-	let followers = object.followers_count().unwrap_or(0);
-	let statuses = object.statuses_count().unwrap_or(0);
-	let following_me = object.following_me().unwrap_or(false);
-	let followed_by_me = object.followed_by_me().unwrap_or(false);
-	let domain = object.id().unwrap_or_default().replace("https://", "").split('/').next().unwrap_or_default().to_string();
-	let actor_type = object.actor_type().unwrap_or(apb::ActorType::Person);
-	let actor_type_tag = if actor_type == apb::ActorType::Person { None } else {
-		Some(view! { <sup class="ml-s"><small>"["{actor_type.as_ref().to_lowercase()}"]"</small></sup> } )
-	};
-	let uid = object.id().unwrap_or_default().to_string();
-	let web_path = Uri::web(U::Actor, &uid);
-	let _uid = uid.clone();
-	view! {
-			<div 
-				class="banner"
-				style={format!("background: center / cover url({background_url});")}
-			>
-				<div style="height: 10em"></div> // TODO bad way to have it fixed height ewwww
-			</div>
-			<div class="overlap">
-				<table class="pl-2 pr-2 align w-100" style="table-layout: fixed">
-					<tr>
-						<td rowspan=4 style="width: 8em">
-							<img class="avatar avatar-border mr-s" src={avatar_url} style="height: 7em; width: 7em"/>
-						</td>
-						<td rowspan=2 class="bottom">
-							<b class="big">{display_name}</b>{actor_type_tag}
-						</td>
-						<td rowspan=2 class="bottom rev" title="statuses">{statuses}" "<span class="emoji">"\u{1f582}"</span></td>
-					</tr>
-					<tr></tr>
-					<tr>
-						<td class="top">
-							<small><a class="clean hover" href={uid.clone()} target="_blank">{username.clone()}@{domain}</a></small>
-						</td>
-						<td class="rev" title="following">
-							<a class="clean" href={format!("{web_path}/following")}>{following}" "<span class="emoji">"👥"</span></a>
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<DateTime t=created />
-						</td>
-						<td class="rev" title="followers">
-							<a class="clean" href={format!("{web_path}/followers")}>{followers}" "<span class="emoji">"📢"</span></a>
-						</td>
-					</tr>
-				</table>
-				<div class="rev mr-1" class:hidden=move || !auth.present() || auth.user_id() == uid>
-					{if followed_by_me {
-						view! { <code class="color">following</code> }.into_view()
-					} else {
-						view! { <input type="submit" value="follow" on:click=move |_| send_follow_request(_uid.clone()) /> }.into_view()
-					}}
-					{if following_me {
-						Some(view! { <code class="ml-1 color">follows you</code> })
-					} else {
-						None
-					}}
-				</div>
-			</div>
-	}.into_view()
-}
-
 fn send_follow_request(target: String) {
 	let auth = use_context::<Auth>().expect("missing auth context");
 	spawn_local(async move {
diff --git a/web/src/getters.rs b/web/src/getters.rs
new file mode 100644
index 00000000..5b341f89
--- /dev/null
+++ b/web/src/getters.rs
@@ -0,0 +1,11 @@
+
+pub trait Getter<T: Default> {
+	/// .ok().unwrap_or_default()
+	fn want(self) -> T;
+}
+
+impl<T: Default> Getter<T> for apb::Field<T> {
+	fn want(self) -> T {
+		self.ok().unwrap_or_default()
+	}
+}
diff --git a/web/src/lib.rs b/web/src/lib.rs
index 478d0223..18e7dfa8 100644
--- a/web/src/lib.rs
+++ b/web/src/lib.rs
@@ -3,8 +3,12 @@ mod app;
 mod components;
 mod page;
 mod config;
+mod objects;
+
+mod actors;
+mod getters;
+mod timeline;
 
-pub mod actors;
 pub use app::App;
 pub use config::Config;
 pub use auth::Auth;
diff --git a/web/src/objects/mod.rs b/web/src/objects/mod.rs
new file mode 100644
index 00000000..1bedf719
--- /dev/null
+++ b/web/src/objects/mod.rs
@@ -0,0 +1 @@
+pub mod view;
diff --git a/web/src/page/object.rs b/web/src/objects/view.rs
similarity index 53%
rename from web/src/page/object.rs
rename to web/src/objects/view.rs
index ea000efd..c126ea16 100644
--- a/web/src/page/object.rs
+++ b/web/src/objects/view.rs
@@ -7,7 +7,7 @@ use crate::prelude::*;
 use apb::{Base, Object};
 
 #[component]
-pub fn ObjectPage() -> impl IntoView {
+pub fn ObjectView() -> impl IntoView {
 	let params = use_params_map();
 	let auth = use_context::<Auth>().expect("missing auth context");
 	let feeds = use_context::<Feeds>().expect("missing feeds context");
@@ -45,39 +45,23 @@ pub fn ObjectPage() -> impl IntoView {
 			Some(obj)
 		}
 	);
-	view! {
-		<div>
-			<Breadcrumb back=true >
-				objects::view
-				<a
-					class="clean ml-1" href="#"
-					class:hidden=move || feeds.context.is_empty()
-					on:click=move |_| {
-						feeds.context.reset(Some(feeds.context.next.get().split('?').next().unwrap_or_default().to_string()));
-						feeds.context.more(auth);
-				}><span class="emoji">
-					"\u{1f5d8}"
-				</span></a>
-			</Breadcrumb>
-			<div class="ma-2" >
-				{move || match object.get() {
-					None => view! { <p class="center"> loading ... </p> }.into_view(),
-					Some(None) => {
-						let raw_id = params.get().get("id").cloned().unwrap_or_default();
-						let uid =  uriproxy::uri(URL_BASE, uriproxy::UriClass::Object, &raw_id);
-						view! { <p class="center"><code>loading failed</code><sup><small><a class="clean" href={uid} target="_blank">"↗"</a></small></sup></p> }.into_view()
-					},
-					Some(Some(o)) => {
-						let object = o.clone();
-						view!{
-							<Object object=object />
-							<div class="ml-1 mr-1 mt-2">
-								<TimelineReplies tl=feeds.context root=o.id().unwrap_or_default().to_string() />
-							</div>
-						}.into_view()
-					},
-				}}
-			</div>
-		</div>
-	}
+
+	{move || match object.get() {
+		None => view! { <Loader /> }.into_view(),
+		Some(None) => {
+			let raw_id = params.get().get("id").cloned().unwrap_or_default();
+			let uid =  uriproxy::uri(URL_BASE, uriproxy::UriClass::Object, &raw_id);
+			view! { <p class="center"><code>loading failed</code><sup><small><a class="clean" href={uid} target="_blank">"↗"</a></small></sup></p> }.into_view()
+		},
+		Some(Some(o)) => {
+			let object = o.clone();
+			view!{
+				<Object object=object />
+				<hr class="color ma-2" />
+				<div class="mr-1-r ml-1-r">
+					<Thread tl=feeds.context root=o.id().unwrap_or_default().to_string() />
+				</div>
+			}.into_view()
+		},
+	}}
 }
diff --git a/web/src/page/about.rs b/web/src/page/about.rs
index 9ca5fc22..19f9ab1d 100644
--- a/web/src/page/about.rs
+++ b/web/src/page/about.rs
@@ -5,7 +5,6 @@ use crate::prelude::*;
 pub fn AboutPage() -> impl IntoView {
 	view! {
 		<div>
-			<Breadcrumb>about</Breadcrumb>
 			<div class="mt-s mb-s" >
 				<p><code>μpub</code>" is a micro social network powered by "<a href="">ActivityPub</a></p>
 				<p><i>"the "<a href="https://en.wikipedia.org/wiki/Fediverse">fediverse</a>" is an ensemble of social networks, which, while independently hosted, can communicate with each other"</i></p>
diff --git a/web/src/page/config.rs b/web/src/page/config.rs
index 22e2feec..8095e088 100644
--- a/web/src/page/config.rs
+++ b/web/src/page/config.rs
@@ -53,7 +53,6 @@ pub fn ConfigPage(setter: WriteSignal<crate::Config>) -> impl IntoView {
 
 	view! {
 		<div>
-			<Breadcrumb>config</Breadcrumb>
 			<p class="center mt-0"><small>config is saved in your browser local storage</small></p>
 			<p>
 				<span title="embedded video attachments will loop like gifs if this option is enabled">
diff --git a/web/src/page/debug.rs b/web/src/page/debug.rs
index 37bce1bf..455418f9 100644
--- a/web/src/page/debug.rs
+++ b/web/src/page/debug.rs
@@ -40,7 +40,6 @@ pub fn DebugPage() -> impl IntoView {
 
 	view! {
 		<div>
-			<Breadcrumb back=true>devtools</Breadcrumb>
 			<div class="mt-1" >
 				<form on:submit=move|ev| {
 					ev.prevent_default();
diff --git a/web/src/page/mod.rs b/web/src/page/mod.rs
index ee4253ec..8323a807 100644
--- a/web/src/page/mod.rs
+++ b/web/src/page/mod.rs
@@ -7,14 +7,8 @@ pub use config::ConfigPage;
 mod debug;
 pub use debug::DebugPage;
 
-mod object;
-pub use object::ObjectPage;
-
 mod register;
 pub use register::RegisterPage;
 
 mod search;
 pub use search::SearchPage;
-
-mod timeline;
-pub use timeline::TimelinePage;
diff --git a/web/src/page/register.rs b/web/src/page/register.rs
index 9ff13198..076b2e3e 100644
--- a/web/src/page/register.rs
+++ b/web/src/page/register.rs
@@ -14,7 +14,6 @@ pub fn RegisterPage() -> impl IntoView {
 	let (error, set_error) = create_signal(None);
 	view! {
 		<div class="two-col">
-			<Breadcrumb>register</Breadcrumb>
 			<div class="border ma-2 pa-1">
 				<form on:submit=move|ev| {
 					ev.prevent_default();
diff --git a/web/src/page/search.rs b/web/src/page/search.rs
index 8596b79e..e32444ef 100644
--- a/web/src/page/search.rs
+++ b/web/src/page/search.rs
@@ -25,7 +25,6 @@ pub fn SearchPage() -> impl IntoView {
 	);
 
 	view! {
-		<Breadcrumb>search</Breadcrumb>
 		<blockquote class="mt-3 mb-3">
 			<details open>
 				<summary class="mb-2">
diff --git a/web/src/page/timeline.rs b/web/src/page/timeline.rs
deleted file mode 100644
index 7934251e..00000000
--- a/web/src/page/timeline.rs
+++ /dev/null
@@ -1,23 +0,0 @@
-use leptos::*;
-use crate::prelude::*;
-
-#[component]
-pub fn TimelinePage(name: &'static str, tl: Timeline) -> impl IntoView {
-	let auth = use_context::<Auth>().expect("missing auth context");
-	view! {
-		<div>
-			<Breadcrumb back=false>
-				{name}
-				<a class="clean ml-1" href="#" on:click=move |_| {
-					tl.reset(Some(tl.next.get().split('?').next().unwrap_or_default().to_string()));
-					tl.more(auth);
-				}><span class="emoji">
-					"\u{1f5d8}"
-				</span></a>
-			</Breadcrumb>
-			<div class="mt-s mb-s" >
-				<TimelineFeed tl=tl />
-			</div>
-		</div>
-	}
-}
diff --git a/web/src/prelude.rs b/web/src/prelude.rs
index b81aabd2..71288ba3 100644
--- a/web/src/prelude.rs
+++ b/web/src/prelude.rs
@@ -1,14 +1,22 @@
 pub use crate::{
 	Http, Uri,
 	CACHE, URL_BASE,
-	app::Feeds,
+	app::{Feeds, Loader},
 	auth::Auth,
 	page::*,
 	components::*,
 	actors::{
-		view::ActorHeader,
+		header::ActorHeader,
 		follow::FollowList,
 		posts::ActorPosts,
+	},
+	timeline::{
+		Timeline,
+		feed::Feed,
+		thread::Thread,
+	},
+	objects::{
+		view::ObjectView,
 	}
 };
 
diff --git a/web/src/timeline/feed.rs b/web/src/timeline/feed.rs
new file mode 100644
index 00000000..9f636fcc
--- /dev/null
+++ b/web/src/timeline/feed.rs
@@ -0,0 +1,42 @@
+use leptos::*;
+use crate::prelude::*;
+use super::Timeline;
+
+#[component]
+pub fn Feed(tl: Timeline) -> impl IntoView {
+	let auth = use_context::<Auth>().expect("missing auth context");
+	if let Some(auto_scroll) = use_context::<Signal<bool>>() {
+		let _ = leptos::watch(
+			move || auto_scroll.get(),
+			move |new, old, _| {
+				match old {
+					None => tl.spawn_more(auth), // always do it first time
+					Some(old) => if *new && new != old {
+						tl.spawn_more(auth);
+					},
+				}
+			},
+			true,
+		);
+	}
+	view! {
+		<div>
+			<For
+				each=move || tl.feed.get()
+				key=|k| k.to_string()
+				let:id
+			>
+				{match CACHE.get(&id) {
+					Some(i) => view! {
+						<Item item=i sep=true />
+					}.into_view(),
+					None => view! {
+						<p><code>{id}</code>" "[<a href={uri}>go</a>]</p>
+						<hr />
+					}.into_view(),
+				}}
+			</For>
+		</div>
+		{move || if tl.loading.get() { Some(view! { <Loader /> }) } else { None }}
+	}
+}
diff --git a/web/src/components/timeline.rs b/web/src/timeline/mod.rs
similarity index 55%
rename from web/src/components/timeline.rs
rename to web/src/timeline/mod.rs
index 122e2e57..294fc072 100644
--- a/web/src/components/timeline.rs
+++ b/web/src/timeline/mod.rs
@@ -1,8 +1,10 @@
+pub mod feed;
+pub mod thread;
+
 use std::{collections::BTreeSet, pin::Pin, sync::Arc};
 
 use apb::{field::OptionalString, Activity, ActivityMut, Base, Object};
 use leptos::*;
-use leptos_use::{signal_throttled, use_element_size, use_window_scroll, UseElementSizeReturn};
 use crate::prelude::*;
 
 #[derive(Debug, Clone, Copy)]
@@ -38,20 +40,28 @@ impl Timeline {
 		}
 	}
 
-	pub fn more(&self, auth: Auth) {
-		if self.loading.get_untracked() { return }
-		if self.over.get_untracked() { return }
+	pub fn spawn_more(&self, auth: Auth) {
 		let _self = *self;
 		spawn_local(async move {
-			_self.loading.set(true);
-			let res = _self.load_more(auth).await;
-			_self.loading.set(false);
-			if let Err(e) = res {
-				tracing::error!("failed loading posts for timeline: {e}");
-			}
+			_self.more(auth).await
 		});
 	}
 
+	pub fn loading(&self) -> bool {
+		self.loading.get_untracked()
+	}
+
+	pub async fn more(&self, auth: Auth) {
+		if self.loading.get_untracked() { return }
+		if self.over.get_untracked() { return }
+		self.loading.set(true);
+		let res = self.load_more(auth).await;
+		self.loading.set(false);
+		if let Err(e) = res {
+			tracing::error!("failed loading posts for timeline: {e}");
+		}
+	}
+
 	pub async fn load_more(&self, auth: Auth) -> reqwest::Result<()> {
 		use apb::{Collection, CollectionPage};
 
@@ -80,124 +90,6 @@ impl Timeline {
 	}
 }
 
-#[component]
-pub fn TimelineRepliesRecursive(tl: Timeline, root: String) -> impl IntoView {
-	let root_values = move || tl.feed
-		.get()
-		.into_iter()
-		.filter_map(|x| {
-			let document = CACHE.get(&x)?;
-			let (oid, reply) = match document.object_type().ok()? {
-				// if it's a create, get and check created object: does it reply to root?
-				apb::ObjectType::Activity(apb::ActivityType::Create) => {
-					let object = CACHE.get(document.object().id().ok()?)?;
-					(object.id().str()?, object.in_reply_to().id().str()?)
-				},
-
-				// if it's a raw note, directly check if it replies to root
-				apb::ObjectType::Note => (document.id().str()?, document.in_reply_to().id().str()?),
-
-				// if it's anything else, check if it relates to root, maybe like or announce?
-				_ => (document.id().str()?, document.object().id().str()?),
-			};
-			if reply == root {
-				Some((oid, document))
-			} else {
-				None
-			}
-		})
-		.collect::<Vec<(String, crate::Object)>>();
-
-	view! {
-		<For
-			each=root_values
-			key=|(id, _obj)| id.clone()
-			children=move |(id, obj)|
-				view! {
-					<div class="context depth-r">
-						<Item item=obj replies=true />
-						<div class="depth-r">
-							<TimelineRepliesRecursive tl=tl root=id />
-						</div>
-					</div>
-				}
-		/ >
-	}
-}
-
-#[component]
-pub fn TimelineReplies(tl: Timeline, root: String) -> impl IntoView {
-	let auth = use_context::<Auth>().expect("missing auth context");
-
-	view! {
-		<div>
-			<TimelineRepliesRecursive tl=tl root=root />
-		</div>
-		<div class="center mt-1 mb-1" class:hidden=tl.over >
-			<button type="button"
-				prop:disabled=tl.loading 
-				on:click=move |_| tl.more(auth)
-			>
-				{move || if tl.loading.get() {
-					view! { "loading"<span class="dots"></span> }.into_view()
-				} else { "more".into_view() }}
-			</button>
-		</div>
-	}
-}
-
-#[component]
-pub fn TimelineFeed(tl: Timeline) -> impl IntoView {
-	let auth = use_context::<Auth>().expect("missing auth context");
-	let config = use_context::<Signal<crate::Config>>().expect("missing config context");
-	// double view height: preload when 1 screen away
-	let view_height = 2.0 * window()
-		.inner_height()
-		.map_or(500.0, |v| v.as_f64().unwrap_or_default());
-	let scroll_ref = create_node_ref();
-	let UseElementSizeReturn { width: _w, height } = use_element_size(scroll_ref);
-	let (_x, scroll) = use_window_scroll();
-	let scroll_debounced = signal_throttled(scroll, 500.0);
-	let _auto_loader = create_local_resource(
-		move || (scroll_debounced.get(), height.get()),
-		move |(s, h)| async move {
-			if !config.get_untracked().infinite_scroll { return }
-			if h - s < view_height {
-				tl.more(auth);
-			}
-		},
-	);
-	view! {
-		<div ref=scroll_ref>
-			<For
-				each=move || tl.feed.get()
-				key=|k| k.to_string()
-				children=move |id: String| {
-					match CACHE.get(&id) {
-						Some(i) => view! {
-							<Item item=i sep=true />
-						}.into_view(),
-						None => view! {
-							<p><code>{id}</code>" "[<a href={uri}>go</a>]</p>
-							<hr />
-						}.into_view(),
-					}
-				}
-			/ >
-		</div>
-		<div class="center mt-1 mb-1" class:hidden=tl.over >
-			<button type="button"
-				prop:disabled=tl.loading 
-				on:click=move |_| tl.more(auth)
-			>
-				{move || if tl.loading.get() {
-					view! { "loading "<span class="dots"></span> }.into_view()
-				} else { "more".into_view() }}
-			</button>
-		</div>
-	}
-}
-
 async fn process_activities(activities: Vec<serde_json::Value>, auth: Auth) -> Vec<String> {
 	let mut sub_tasks : Vec<Pin<Box<dyn futures::Future<Output = ()>>>> = Vec::new();
 	let mut gonna_fetch = BTreeSet::new();
diff --git a/web/src/timeline/thread.rs b/web/src/timeline/thread.rs
new file mode 100644
index 00000000..cea0177d
--- /dev/null
+++ b/web/src/timeline/thread.rs
@@ -0,0 +1,75 @@
+use apb::{field::OptionalString, Activity, Base, Object};
+use leptos::*;
+use crate::prelude::*;
+use super::Timeline;
+
+#[component]
+pub fn Thread(tl: Timeline, root: String) -> impl IntoView {
+	let auth = use_context::<Auth>().expect("missing auth context");
+	if let Some(auto_scroll) = use_context::<Signal<bool>>() {
+		let _ = leptos::watch(
+			move || auto_scroll.get(),
+			move |new, old, _| {
+				match old {
+					None => tl.spawn_more(auth), // always do it first time
+					Some(old) => if *new && new != old {
+						tl.spawn_more(auth);
+					},
+				}
+			},
+			true,
+		);
+	}
+
+	view! {
+		<div>
+			<FeedRecursive tl=tl root=root />
+		</div>
+		{move || if tl.loading.get() { Some(view! { <Loader /> }) } else { None }}
+	}
+}
+
+#[component]
+fn FeedRecursive(tl: Timeline, root: String) -> impl IntoView {
+	let root_values = move || tl.feed
+		.get()
+		.into_iter()
+		.filter_map(|x| {
+			let document = CACHE.get(&x)?;
+			let (oid, reply) = match document.object_type().ok()? {
+				// if it's a create, get and check created object: does it reply to root?
+				apb::ObjectType::Activity(apb::ActivityType::Create) => {
+					let object = CACHE.get(document.object().id().ok()?)?;
+					(object.id().str()?, object.in_reply_to().id().str()?)
+				},
+
+				// if it's a raw note, directly check if it replies to root
+				apb::ObjectType::Note => (document.id().str()?, document.in_reply_to().id().str()?),
+
+				// if it's anything else, check if it relates to root, maybe like or announce?
+				_ => (document.id().str()?, document.object().id().str()?),
+			};
+			if reply == root {
+				Some((oid, document))
+			} else {
+				None
+			}
+		})
+		.collect::<Vec<(String, crate::Object)>>();
+
+	view! {
+		<For
+			each=root_values
+			key=|(id, _obj)| id.clone()
+			children=move |(id, obj)|
+				view! {
+					<div class="context depth-r">
+						<Item item=obj replies=true />
+						<div class="depth-r">
+							<FeedRecursive tl=tl root=id />
+						</div>
+					</div>
+				}
+		/ >
+	}
+}