feat(web): better activity/object display, refactor

web/index.html

@@ -144,6 +144,11 @@
 			background-color: var(--background);
 			border: .3em solid #BF616A;
 		}
+		img.avatar-inline {
+			display: inline;
+			height: .75em;
+			border-radius: 50%;
+		}
 		img.inline-avatar {
 			max-height: 2em;
 		}

web/src/components/activity.rs

@@ -0,0 +1,42 @@
+
+use leptos::*;
+use crate::prelude::*;
+
+use apb::{target::Addressed, Activity, Actor, Base, Object};
+
+
+#[component]
+pub fn ActivityLine(activity: serde_json::Value) -> impl IntoView {
+	let object_id = activity.object().id().unwrap_or_default();
+	let object = CACHE.get(&object_id).unwrap_or(serde_json::Value::String(object_id.clone()));
+	let addressed = activity.addressed();
+	let actor_id = activity.actor().id().unwrap_or_default();
+	let actor = match CACHE.get(&actor_id) {
+		Some(a) => a,
+		None => serde_json::Value::String(actor_id.clone()),
+	};
+	let avatar = actor.icon().get().map(|x| x.url().id().unwrap_or_default()).unwrap_or_default();
+	let username = actor.preferred_username().unwrap_or_default().to_string();
+	let domain = actor.id().unwrap_or_default().replace("https://", "").split('/').next().unwrap_or_default().to_string();
+	let kind = activity.activity_type().unwrap_or(apb::ActivityType::Activity);
+	view! {
+		<div>
+			<table class="align w-100" style="table-layout: fixed">
+				<tr>
+					<td>
+						<a href={Uri::web("users", &actor_id)} class="clean hover">
+							<img src={avatar} class="avatar-inline mr-s ml-1" /><b>{username}</b><small>@{domain}</small>
+						</a>
+					</td>
+					<td class="rev" >
+						<code class="color moreinfo" title={object_id.clone()} >{kind.as_ref().to_string()}</code>
+						<a class="hover ml-1" href={Uri::web("objects", &object_id)} >
+							<DateTime t=activity.published() />
+						</a>
+						<PrivacyMarker addressed=activity.addressed() />
+					</td>
+				</tr>
+			</table>
+		</div>
+	}
+}

web/src/components/mod.rs

@@ -0,0 +1,42 @@
+mod activity;
+pub use activity::ActivityLine;
+
+mod object;
+pub use object::{Object, ObjectInline};
+
+mod user;
+pub use user::ActorBanner;
+
+mod timeline;
+pub use timeline::{TimelineFeed, Timeline};
+
+use leptos::*;
+
+#[component]
+pub fn DateTime(t: Option<chrono::DateTime<chrono::Utc>>) -> impl IntoView {
+	match t {
+		Some(t) => {
+			let pretty = t.format("%Y/%m/%d %H:%M:%S").to_string();
+			let rfc = t.to_rfc3339();
+			Some(view! {
+				<small title={rfc}>{pretty}</small>
+			})
+		},
+		None => None,
+	}
+}
+
+#[component]
+pub fn PrivacyMarker(addressed: Vec<String>) -> impl IntoView {
+	let privacy = if addressed.iter().any(|x| x == apb::target::PUBLIC) {
+		"🌐"
+	} else if addressed.iter().any(|x| x.ends_with("/followers")) {
+		"🔒"
+	} else {
+		"🔗"
+	};
+	let audience = format!("[ {} ]", addressed.join(", "));
+	view! {
+		<span class="emoji ml-1 moreinfo" title={audience} >{privacy}</span>
+	}
+}

web/src/components/object.rs

@@ -0,0 +1,76 @@
+use leptos::*;
+use crate::prelude::*;
+
+use apb::{target::Addressed, Activity, Actor, Base, Object};
+
+
+#[component]
+pub fn Object(object: serde_json::Value) -> impl IntoView {
+	let oid = object.id().unwrap_or_default().to_string();
+	let in_reply_to = object.in_reply_to().id().unwrap_or_default();
+	let summary = object.summary().unwrap_or_default().to_string();
+	let content = dissolve::strip_html_tags(object.content().unwrap_or_default());
+	let date = object.published();
+	let author_id = object.attributed_to().id().unwrap_or_default();
+	let author = CACHE.get(&author_id).unwrap_or(serde_json::Value::String(author_id.clone()));
+	view! {
+		<div>
+			<table class="w-100 post-table pa-1 mb-s" >
+				{move || if !in_reply_to.is_empty() {
+					Some(view! {
+						<tr class="post-table" >
+							<td class="post-table pa-1" colspan="2" >
+								"in reply to "<small><a class="clean hover" href={Uri::web("objects", &in_reply_to)}>{Uri::pretty(&in_reply_to)}</a></small>
+							</td>
+						</tr>
+					})
+				} else { None }}
+				{move || if !summary.is_empty() {
+					Some(view! {
+						<tr class="post-table" >
+							<td class="post-table pa-1" colspan="2" >{summary.clone()}</td>
+						</tr>
+					})
+				} else { None }}
+				<tr class="post-table" >
+					<td class="post-table pa-1" colspan="2" >{
+						content.into_iter().map(|x| view! { <p>{x}</p> }).collect_view()
+					}</td>
+				</tr>
+				<tr class="post-table" >
+					<td class="post-table pa-1" ><ActorBanner object=author tiny=true /></td>
+					<td class="post-table pa-1 center" >
+						<a class="clean hover" href={oid} target="_blank">
+							<DateTime t=object.published() />
+							<PrivacyMarker addressed=object.addressed() />
+						</a>
+					</td>
+				</tr>
+			</table>
+		</div>
+	}
+}
+
+#[component]
+pub fn ObjectInline(object: serde_json::Value, author: serde_json::Value) -> impl IntoView {
+	let summary = object.summary().unwrap_or_default().to_string();
+	let content = dissolve::strip_html_tags(object.content().unwrap_or_default());
+	view! {
+		<table class="align w-100">
+			<tr>
+				<td><ActorBanner object=author /></td>
+				<td class="rev" >
+					<a class="clean hover" href={Uri::web("objects", object.id().unwrap_or_default())}>
+						<DateTime t=object.published() />
+					</a>
+					<PrivacyMarker addressed=object.addressed() />
+				</td>
+			</tr>
+		</table>
+		<blockquote class="tl">
+			{if summary.is_empty() { None } else { Some(view! { <code class="color ml-1">{summary}</code> })}}
+			{content.into_iter().map(|x| view! { <p>{x}</p> }).collect_view()}
+		</blockquote>
+	}
+}
+

web/src/components/timeline.rs

@@ -1,6 +1,6 @@
 use std::collections::BTreeSet;
 
-use apb::Base;
+use apb::{Activity, Base};
 use leptos::*;
 use crate::prelude::*;
 
@@ -53,13 +53,20 @@ pub fn TimelineFeed(tl: Timeline) -> impl IntoView {
 			key=|k| k.to_string()
 			children=move |id: String| {
 				match CACHE.get(&id) {
-					Some(object) => match object.base_type() {
+					Some(item) => match item.base_type() {
-						Some(apb::BaseType::Object(apb::ObjectType::Activity(_))) => view! {
+						Some(apb::BaseType::Object(apb::ObjectType::Activity(_))) => {
-								<InlineActivity activity=object />
+							let author_id = item.actor().id().unwrap_or_default();
+							let author = CACHE.get(&author_id).unwrap_or(serde_json::Value::String(author_id.clone()));
+							let object_id = item.object().id().unwrap_or_default();
+							let object = CACHE.get(&object_id).map(|obj| view! { <ObjectInline object=obj author=author /> });
+							view! {
+								<ActivityLine activity=item />
+								{object}
 								<hr/ >
-							}.into_view(),
+							}.into_view()
+						},
 						Some(apb::BaseType::Object(apb::ObjectType::Note)) => view! {
-								<Object object=object />
+								<Object object=item />
 								<hr/ >
 							}.into_view(),
 						_ => view! { <p><code>type not implemented</code></p><hr /> }.into_view(),
@@ -88,7 +95,7 @@ async fn process_activities(
 	activities: Vec<serde_json::Value>,
 	auth: Signal<Option<String>>,
 ) -> Vec<String> {
-	use apb::{Activity, ActivityMut};
+	use apb::ActivityMut;
 	let mut sub_tasks = Vec::new();
 	let mut gonna_fetch = BTreeSet::new();
 	let mut out = Vec::new();

web/src/components/user.rs

@@ -0,0 +1,42 @@
+use leptos::*;
+use crate::prelude::*;
+
+use apb::{target::Addressed, Activity, Actor, Base, Object};
+
+
+#[component]
+pub fn ActorBanner(
+	object: serde_json::Value,
+	#[prop(optional)]
+	tiny: bool
+) -> impl IntoView {
+	match object {
+		serde_json::Value::String(id) => view! {
+			<div><b>?</b>" "<a class="clean hover" href={Uri::web("users", &id)}>{Uri::pretty(&id)}</a></div>
+		},
+		serde_json::Value::Object(_) => {
+			let uid = object.id().unwrap_or_default().to_string();
+			let uri = Uri::web("users", &uid);
+			let avatar_url = object.icon().get().map(|x| x.url().id().unwrap_or_default()).unwrap_or_default();
+			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();
+			view! {
+				<div>
+					<table class="align" >
+					<tr>
+						<td rowspan="2" ><a href={uri.clone()} ><img class="avatar-circle inline-avatar" src={avatar_url} /></a></td>
+						<td><b>{display_name}</b></td>
+					</tr>
+					<tr>
+						<td class="top" ><a class="hover" href={uri} ><small>{username}@{domain}</small></a></td>
+					</tr>
+					</table>
+				</div>
+			}
+		},
+		_ => view! {
+			<div><b>invalid actor</b></div>
+		}
+	}
+}

web/src/lib.rs

@@ -1,13 +1,10 @@
 mod app;
 mod auth;
-mod timeline;
+mod components;
-mod view;
 mod page;
 mod control;
 
 pub use app::App;
-pub use timeline::Timeline;
-pub use auth::{Auth, AuthToken};
 
 pub mod prelude;
 

web/src/prelude.rs

@@ -1,11 +1,9 @@
 pub use crate::{
-	AuthToken,
+	Http, Uri,
-	Auth, Timeline, Http, Uri,
 	CACHE, URL_BASE,
+	auth::{Auth, AuthToken},
 	page::*,
 	control::*,
-	view::*,
+	components::*,
-	app::App,
 	auth::LoginBox,
-	timeline::TimelineFeed,
 };

web/src/view.rs

@@ -1,163 +0,0 @@
-use leptos::*;
-use crate::prelude::*;
-
-use apb::{target::Addressed, Activity, Actor, Base, Object};
-
-
-#[component]
-pub fn InlineActivity(activity: serde_json::Value) -> impl IntoView {
-	let object_id = activity.object().id().unwrap_or_default();
-	let object = CACHE.get(&object_id).unwrap_or(serde_json::Value::String(object_id.clone()));
-	let addressed = activity.addressed();
-	let audience = format!("[ {} ]", addressed.join(", "));
-	let actor_id = activity.actor().id().unwrap_or_default();
-	let actor = match CACHE.get(&actor_id) {
-		Some(a) => a,
-		None => serde_json::Value::String(actor_id.clone()),
-	};
-	let privacy = if addressed.iter().any(|x| x == apb::target::PUBLIC) {
-		"🌐"
-	} else if addressed.iter().any(|x| x.ends_with("/followers")) {
-		"🔒"
-	} else {
-		"🔗"
-	};
-	let date = object.published().or(activity.published());
-	let kind = activity.activity_type().unwrap_or(apb::ActivityType::Activity);
-	view! {
-		<div>
-			<table class="align w-100" >
-			<tr>
-			<td rowspan="2" >
-				<ActorBanner object=actor tiny=true />
-			</td>
-			<td class="rev" >
-				<code class="color moreinfo" title={object_id.clone()} >{kind.as_ref().to_string()}</code>
-				<span class="emoji ml-s moreinfo" title={audience} >{privacy}</span>
-			</td>
-		</tr>
-		<tr>
-			<td class="rev">
-				<a class="hover" href={Uri::web("objects", &object_id)} >
-					<DateTime t=date />
-				</a>
-			</td>
-		</tr>
-		</table>
-		</div>
-		{match kind {
-			// post
-			apb::ActivityType::Create => view! { <ObjectInline object=object /> }.into_view(),
-			_ => view! {}.into_view(),
-		}}
-	}
-}
-
-#[component]
-pub fn ActorBanner(
-	object: serde_json::Value,
-	#[prop(optional)]
-	tiny: bool
-) -> impl IntoView {
-	match object {
-		serde_json::Value::String(id) => view! {
-			<div><b>?</b>" "<a class="clean hover" href={Uri::web("users", &id)}>{Uri::pretty(&id)}</a></div>
-		},
-		serde_json::Value::Object(_) => {
-			let uid = object.id().unwrap_or_default().to_string();
-			let uri = Uri::web("users", &uid);
-			let avatar_url = object.icon().get().map(|x| x.url().id().unwrap_or_default()).unwrap_or_default();
-			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();
-			view! {
-				<div>
-					<table class="align" >
-					<tr>
-						<td rowspan="2" ><a href={uri.clone()} ><img class="avatar-circle" class:inline-avatar=move|| tiny src={avatar_url} /></a></td>
-						<td><b>{display_name}</b></td>
-					</tr>
-					<tr>
-						<td class="top" ><a class="hover" href={uri} ><small>{username}@{domain}</small></a></td>
-					</tr>
-					</table>
-				</div>
-			}
-		},
-		_ => view! {
-			<div><b>invalid actor</b></div>
-		}
-	}
-}
-
-#[component]
-pub fn Object(object: serde_json::Value) -> impl IntoView {
-	let oid = object.id().unwrap_or_default().to_string();
-	let in_reply_to = object.in_reply_to().id().unwrap_or_default();
-	let summary = object.summary().unwrap_or_default().to_string();
-	let content = dissolve::strip_html_tags(object.content().unwrap_or_default());
-	let date = object.published();
-	let author_id = object.attributed_to().id().unwrap_or_default();
-	let author = CACHE.get(&author_id).unwrap_or(serde_json::Value::String(author_id.clone()));
-	view! {
-		<div>
-			<table class="w-100 post-table pa-1 mb-s" >
-				{move || if !in_reply_to.is_empty() {
-					Some(view! {
-						<tr class="post-table" >
-							<td class="post-table pa-1" colspan="2" >
-								"in reply to "<small><a class="clean hover" href={Uri::web("objects", &in_reply_to)}>{Uri::pretty(&in_reply_to)}</a></small>
-							</td>
-						</tr>
-					})
-				} else { None }}
-				{move || if !summary.is_empty() {
-					Some(view! {
-						<tr class="post-table" >
-							<td class="post-table pa-1" colspan="2" >{summary.clone()}</td>
-						</tr>
-					})
-				} else { None }}
-				<tr class="post-table" >
-					<td class="post-table pa-1" colspan="2" >{
-						content.into_iter().map(|x| view! { <p>{x}</p> }).collect_view()
-					}</td>
-				</tr>
-				<tr class="post-table" >
-					<td class="post-table pa-1" ><ActorBanner object=author tiny=true /></td>
-					<td class="post-table pa-1 center" >
-						<a class="clean hover" href={oid} target="_blank">
-							<DateTime t=date />
-						</a>
-					</td>
-				</tr>
-			</table>
-		</div>
-	}
-}
-
-#[component]
-pub fn ObjectInline(object: serde_json::Value) -> impl IntoView {
-	let summary = object.summary().unwrap_or_default().to_string();
-	let content = dissolve::strip_html_tags(object.content().unwrap_or_default());
-	view! {
-		{if summary.is_empty() { None } else { Some(view! { <code class="color">{summary}</code> })}}
-		<blockquote class="tl">
-			{content.into_iter().map(|x| view! { <p>{x}</p> }).collect_view()}
-		</blockquote>
-	}
-}
-
-#[component]
-pub fn DateTime(t: Option<chrono::DateTime<chrono::Utc>>) -> impl IntoView {
-	match t {
-		Some(t) => {
-			let pretty = t.format("%Y/%m/%d %H:%M:%S").to_string();
-			let rfc = t.to_rfc3339();
-			Some(view! {
-				<small title={rfc}>{pretty}</small>
-			})
-		},
-		None => None,
-	}
-}