feat(web): rework actors page

web/src/actors/follow.rs

@@ -0,0 +1,55 @@
+use leptos::*;
+use leptos_router::*;
+use crate::prelude::*;
+
+use std::sync::Arc;
+
+use apb::Collection;
+
+#[component]
+pub fn FollowList(outgoing: bool) -> impl IntoView {
+	let follow___ = if outgoing { "following" } else { "followers" };
+	let symbol = if outgoing { "👥" } else { "📢" };
+	let params = use_params::<super::IdParam>();
+	let auth = use_context::<Auth>().expect("missing auth context");
+	let resource = create_local_resource(
+		move || params.get().ok().and_then(|x| x.id).unwrap_or_default(),
+		move |id| {
+			async move {
+				Ok::<_, String>(
+					Http::fetch::<serde_json::Value>(&format!("{URL_BASE}/actors/{id}/{follow___}/page"), auth)
+						.await
+						.map_err(|e| e.to_string())?
+						.ordered_items()
+						.all_ids()
+				)
+			}
+		}
+	);
+	view! {
+		<code class="cw center color mt-1 mr-3 ml-3"><span class="emoji">{symbol}</span>" "<b>{follow___}</b></code>
+		<div class="tl ml-3-r mr-3-r pl-1 pt-1 pb-1">
+			{move || match resource.get() {
+				None => view! { <Loader /> }.into_view(),
+				Some(Err(e)) => view! { <p class="center">could not load {follow___}: {e}</p> }.into_view(),
+				Some(Ok(arr)) => view! {
+					<For
+						each=move || arr.clone()
+						key=|id| id.clone()
+						children=move |id| {
+							let actor = match CACHE.get(&id) {
+								Some(x) => x,
+								None => Arc::new(serde_json::Value::String(id)),
+							};
+							view! {
+								<ActorBanner object=actor />
+								<hr />
+							}.into_view()
+						}
+					/ >
+				}.into_view(),
+			}}
+		</div>
+	}
+}
+

web/src/actors/mod.rs

@@ -0,0 +1,9 @@
+pub mod follow;
+pub mod view;
+pub mod posts;
+
+use leptos_router::Params; // TODO can i remove this?
+#[derive(Clone, leptos::Params, PartialEq)]
+struct IdParam {
+	id: Option<String>,
+}

web/src/actors/posts.rs

@@ -0,0 +1,20 @@
+use leptos::*;
+use leptos_router::*;
+use crate::prelude::*;
+
+#[component]
+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 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));
+		}
+	}).track();
+	view! {
+		<code class="cw color center mt-1 mb-1 ml-3 mr-3"><span class="emoji">"🖂"</span>" posts"</code>
+		<TimelineFeed tl=feeds.user />
+	}
+}

web/src/actors/view.rs

@@ -0,0 +1,128 @@
+use leptos::*;
+use leptos_router::*;
+use crate::{getters::Getter, prelude::*, DEFAULT_AVATAR_URL};
+
+use apb::{field::OptionalString, ActivityMut, Actor, Base, Object, ObjectMut};
+
+#[component]
+pub fn ActorHeader() -> impl IntoView {
+	let params = use_params::<super::IdParam>();
+	let auth = use_context::<Auth>().expect("missing auth context");
+	let actor = create_local_resource(
+		move || params.get().ok().and_then(|x| x.id).unwrap_or_default(),
+		move |id| {
+			async move {
+				match CACHE.get(&Uri::full(U::Actor, &id)) {
+					Some(x) => Ok::<_, String>(x.clone()),
+					None => {
+						let user : serde_json::Value = Http::fetch(&Uri::api(U::Actor, &id, true), auth)
+							.await
+							.map_err(|e| e.to_string())?;
+						let user = std::sync::Arc::new(user);
+						CACHE.put(Uri::full(U::Actor, &id), user.clone());
+						Ok(user)
+					},
+				}
+			}
+		}
+	);
+	move || match actor.get() {
+		None => view! { <Loader margin=true /> }.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());
+			let background_url = actor.image().get().map(|x| x.url().id().str().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
+			let username = actor.preferred_username().unwrap_or_default().to_string();
+			let name = actor.name().str().unwrap_or(username.clone());
+			let created = actor.published().ok();
+			let following_me = actor.following_me().unwrap_or(false);
+			let followed_by_me = actor.followed_by_me().unwrap_or(false);
+			let domain = actor.id().unwrap_or_default().replace("https://", "").split('/').next().unwrap_or_default().to_string();
+			let actor_type = actor.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 = actor.id().unwrap_or_default().to_string();
+			let web_path = Uri::web(U::Actor, &uid);
+			let _uid = uid.clone();
+			view! {
+				<div class="ml-3 mr-3">
+					<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">{name}</b>{actor_type_tag}
+								</td>
+								<td rowspan=2 class="bottom rev" title="statuses">
+									<a class="clean" href={web_path.clone()}>{actor.statuses_count().want()}" "<span class="emoji">"\u{1f582}"</span></a>
+								</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")}>{actor.following_count().want()}" "<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")}>{actor.followers_count().want()}" "<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>
+				</div>
+				<Outlet />
+			}.into_view()
+		},
+	}
+}
+
+async fn send_follow_response(kind: apb::ActivityType, target: String, to: String, auth: Auth) {
+	let payload = apb::new()
+		.set_activity_type(Some(kind))
+		.set_object(apb::Node::link(target))
+		.set_to(apb::Node::links(vec![to]));
+	if let Err(e) = Http::post(&auth.outbox(), &payload, auth).await {
+		tracing::error!("failed posting follow response: {e}");
+	}
+}
+
+fn send_follow_request(target: String) {
+	let auth = use_context::<Auth>().expect("missing auth context");
+	spawn_local(async move {
+		let payload = apb::new() 
+			.set_activity_type(Some(apb::ActivityType::Follow))
+			.set_object(apb::Node::link(target.clone()))
+			.set_to(apb::Node::links(vec![target]));
+		if let Err(e) = Http::post(&auth.outbox(), &payload, auth).await {
+			tracing::error!("failed sending follow request: {e}");
+		}
+	})
+}

web/src/app.rs

@@ -118,49 +118,43 @@ pub fn App() -> impl IntoView {
 				<div class="col-main" class:w-100=move || menu.get() >
 					<Router // TODO maybe set base="/web" ?
 						trailing_slash=TrailingSlash::Redirect
-						fallback=move || view! { 
-							<Breadcrumb back=true >404</Breadcrumb>
-							<div class="center">
-								<h3>nothing to see here!</h3>
-								<p><a href="/web"><button type="button">back to root</button></a></p>
-							</div>
-						}.into_view()
+						fallback=|| view! { <NotFound /> }
 					>
-						// TODO this is kind of ugly: the whole router gets rebuilt every time we log in/out
-						// in a sense it's what we want: refreshing the home tl is main purpose, but also
-						// server tl may contain stuff we can no longer see, or otherwise we may now be
-						// entitled to see new posts. so while being ugly it's techically correct ig?
 						<main>
 								<Routes>
-									<Route path="/web" view=move ||
+									<Route path="/" view=move || view! { <Redirect path="/web" /> } />
+									<Route path="/web" view=Navigable >
+										<Route path="" view=move ||
 											if auth.present() {
-											view! { <Redirect path="/web/home" /> }
+												view! { <Redirect path="home" /> }
 											} else {
-											view! { <Redirect path="/web/server" /> }
+												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="/web/home" view=move || view! { <TimelinePage name="home" tl=feeds.home /> } />
-									<Route path="/web/server" view=move || view! { <TimelinePage name="server" tl=feeds.global /> } />
-									<Route path="/web/local" view=move || view! { <TimelinePage name="local" tl=feeds.server /> } />
-									<Route path="/web/inbox" view=move || view! { <TimelinePage name="inbox" 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="/web/about" view=AboutPage />
-									<Route path="/web/config" view=move || view! { <ConfigPage setter=set_config /> } />
-									<Route path="/web/dev" view=DebugPage />
-									<Route path="/web/config/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>
 
-									<Route path="/web/actors/:id" view=UserPage />
-									<Route path="/web/actors/:id/following" view=move || view! { <FollowPage outgoing=true /> } />
-									<Route path="/web/actors/:id/followers" view=move || view! { <FollowPage outgoing=false /> } />
-
-									<Route path="/web/objects/:id" view=ObjectPage />
+										<Route path="objects/:id" view=ObjectPage />
 										// <Route path="/web/activities/:id" view=move || view! { <ActivityPage tl=context_tl /> } />
 
-									<Route path="/web/search" view=SearchPage />
-									<Route path="/web/register" view=RegisterPage />
-
-									<Route path="/" view=move || view! { <Redirect path="/web" /> } />
+										<Route path="search" view=SearchPage />
+										<Route path="register" view=RegisterPage />
+									</Route>
 								</Routes>
 						</main>
 					</Router>
@@ -174,3 +168,59 @@ pub fn App() -> impl IntoView {
 		</footer>
 	}
 }
+
+#[component]
+fn Navigable() -> impl IntoView {
+	let location = use_location();
+	let breadcrumb = Signal::derive(move || {
+		let path = location.pathname.get();
+		let mut path_iter = path.split('/').skip(1);
+		// TODO wow this breadcrumb logic really isnt nice can we make it better??
+		match path_iter.next() {
+			Some("actors") => match path_iter.next() {
+				None => "actors :: all".to_string(),
+				Some(id) => {
+					let mut out = "actors :: ".to_string();
+					if id.starts_with('+') {
+						out.push_str("proxy");
+					} else {
+						out.push_str(id);
+					}
+					if let Some(x) = path_iter.next() {
+						out.push_str(" :: ");
+						out.push_str(x);
+					}
+					out
+				},
+			},
+			Some(p) => p.to_string(),
+			None => "?".to_string(),
+		}
+	});
+	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>
+		<Outlet />
+	}
+}
+
+#[component]
+pub fn NotFound() -> impl IntoView {
+	view! {
+		<div class="center">
+			<h3>nothing to see here!</h3>
+			<p><a href="/web"><button type="button">back to root</button></a></p>
+		</div>
+	}
+}
+
+#[component]
+pub fn Loader(#[prop(optional)] margin: bool) -> impl IntoView {
+	view! {
+		<div class="center" class:mt-1={margin}>
+			<button type="button" disabled>"loading "<span class="dots"></span></button>
+		</div>
+	}
+}

web/src/lib.rs

@@ -4,6 +4,7 @@ mod components;
 mod page;
 mod config;
 
+pub mod actors;
 pub use app::App;
 pub use config::Config;
 pub use auth::Auth;

web/src/page/actor/follow.rs

@@ -1,69 +0,0 @@
-use std::sync::Arc;
-
-use leptos::*;
-use leptos_router::*;
-use crate::prelude::*;
-
-use apb::Collection;
-
-#[component]
-pub fn FollowPage(outgoing: bool) -> impl IntoView {
-	let follow___ = if outgoing { "following" } else { "followers" };
-	let symbol = if outgoing { "👥" } else { "📢" };
-	let params = use_params_map();
-	let auth = use_context::<Auth>().expect("missing auth context");
-	let user = Signal::derive(move ||{
-		let id =params.get().get("id").cloned().unwrap_or_default(); 
-		CACHE.get(&Uri::full(U::Actor, &id))
-	});
-	let resource = create_local_resource(
-		move || params.get().get("id").cloned().unwrap_or_default(),
-		move |id| {
-			async move {
-				match Http::fetch::<serde_json::Value>(&format!("{URL_BASE}/actors/{id}/{follow___}/page"), auth).await {
-					Err(e) => {
-						tracing::error!("failed getting {follow___} for {id}: {e}");
-						None
-					},
-					Ok(x) => {
-						Some(x.ordered_items().all_ids())
-					},
-
-				}
-			}
-		}
-	);
-	view! {
-		<div>
-			<Breadcrumb back=true >
-				actors::view::{follow___}
-			</Breadcrumb>
-			<div class="ml-3 mr-3">
-				{move || user.get().map(|x| view! { <ActorHeader object=x /> })}
-				<code class="cw center color mt-1"><span class="emoji">{symbol}</span>" "<b>{follow___}</b></code>
-				<blockquote class="tl ml-3-r mr-3-r pl-1 pt-1 pb-1">
-					{move || match resource.get() {
-						None => view! { <p class="center">"loading "<span class="dots"></span></p> }.into_view(),
-						Some(None) => view! { <p class="center">could not load {follow___}</p> }.into_view(),
-						Some(Some(arr)) => view! {
-							<For
-								each=move || arr.clone()
-								key=|id| id.clone()
-								children=move |id| {
-									let actor = match CACHE.get(&id) {
-										Some(x) => x,
-										None => Arc::new(serde_json::Value::String(id)),
-									};
-									view! {
-										<ActorBanner object=actor />
-										<hr />
-									}.into_view()
-								}
-							/ >
-						}.into_view(),
-					}}
-				</blockquote>
-			</div>
-		</div>
-	}
-}

web/src/page/actor/mod.rs

@@ -1,3 +0,0 @@
-pub mod activity;
-pub mod follow;
-pub mod view;

web/src/page/actor/view.rs

@@ -1,75 +0,0 @@
-use std::sync::Arc;
-
-use leptos::*;
-use leptos_router::*;
-use crate::prelude::*;
-
-use apb::Object;
-
-#[component]
-pub fn UserPage() -> impl IntoView {
-	let params = use_params_map();
-	let feeds = use_context::<Feeds>().expect("missing feeds context");
-	let auth = use_context::<Auth>().expect("missing auth context");
-	let id = params.get()
-		.get("id")
-		.cloned()
-		.unwrap_or_default();
-	let uid = uriproxy::uri(URL_BASE, uriproxy::UriClass::Actor, &id);
-	let actor = create_local_resource(
-		move || params.get().get("id").cloned().unwrap_or_default(),
-		move |id| {
-			async move {
-				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));
-				}
-				match CACHE.get(&Uri::full(U::Actor, &id)) {
-					Some(x) => Some(x.clone()),
-					None => {
-						let user : serde_json::Value = Http::fetch(&Uri::api(U::Actor, &id, true), auth).await.ok()?;
-						let user = Arc::new(user);
-						CACHE.put(Uri::full(U::Actor, &id), user.clone());
-						Some(user)
-					},
-				}
-			}
-		}
-	);
-	view! {
-		<div>
-			<Breadcrumb back=true >
-				actors::view
-				<a
-					class="clean ml-1" href="#"
-					class:hidden=move || feeds.user.is_empty()
-					on:click=move |_| {
-						feeds.user.reset(Some(feeds.user.next.get().split('?').next().unwrap_or_default().to_string()));
-						feeds.user.more(auth);
-				}><span class="emoji">
-					"\u{1f5d8}"
-				</span></a>
-			</Breadcrumb>
-			<div>
-				{move || {
-					let uid = uid.clone();
-					match actor.get() {
-						None => view! { <p class="center">loading...</p> }.into_view(),
-						Some(None) => {
-							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(object)) => {
-							view! {
-								<div class="ml-3 mr-3">
-									<ActorHeader object=object.clone() />
-									<p class="ml-2 mt-1 center" inner_html={mdhtml::safe_html(object.summary().unwrap_or_default())}></p>
-								</div>
-								<TimelineFeed tl=feeds.user />
-							}.into_view()
-						},
-					}
-				}}
-			</div>
-		</div>
-	}
-}

web/src/page/mod.rs

@@ -18,7 +18,3 @@ pub use search::SearchPage;
 
 mod timeline;
 pub use timeline::TimelinePage;
-
-mod actor;
-pub use actor::view::UserPage;
-pub use actor::follow::FollowPage;

web/src/prelude.rs

@@ -5,6 +5,11 @@ pub use crate::{
 	auth::Auth,
 	page::*,
 	components::*,
+	actors::{
+		view::ActorHeader,
+		follow::FollowList,
+		posts::ActorPosts,
+	}
 };
 
 pub use uriproxy::UriClass as U;