feat(web): followers/following pages on actors

web/index.html

@@ -256,9 +256,18 @@
 			color: var(--background);
 			cursor: pointer;
 		}
-		.ml-1-r {
+		.ml-1-l {
 			margin-left: 1em;
 		}
+		.ml-1-r {
+			margin-right: 1em;
+		}
+		.ml-3-r {
+			margin-left: 3em;
+		}
+		.mr-3-r {
+			margin-right: 3em;
+		}
 		.depth-r {
 			margin-left: .5em;
 		}
@@ -269,9 +278,18 @@
 			.depth-r {
 				margin-left: .125em;
 			}
-			.ml-1-r {
+			.ml-1-l {
 				margin-left: 0;
 			}
+			.ml-1-r {
+				margin-right: 0;
+			}
+			.ml-3-r {
+				margin-left: 0;
+			}
+			.mr-3-r {
+				margin-right: 0;
+			}
 			.only-on-mobile {
 				display: inherit;
 			}

web/src/components/activity.rs

@@ -20,7 +20,7 @@ pub fn ActivityLine(activity: crate::Object) -> impl IntoView {
 	};
 	view! {
 		<div>
-			<span class="ml-1-r">
+			<span class="ml-1-l">
 				<ActorStrip object=actor />
 			</span>
 			<span style="float:right">

web/src/page/actor/follow.rs

@@ -9,6 +9,7 @@ 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 ||{
@@ -19,7 +20,7 @@ pub fn FollowPage(outgoing: bool) -> impl IntoView {
 		move || params.get().get("id").cloned().unwrap_or_default(),
 		move |id| {
 			async move {
-				match Http::fetch::<crate::Object>(&format!("{URL_BASE}/actors/{id}/{follow___}/page"), auth).await {
+				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
@@ -37,27 +38,31 @@ pub fn FollowPage(outgoing: bool) -> impl IntoView {
 			<Breadcrumb back=true >
 				actors::view::{follow___}
 			</Breadcrumb>
-			<div>
+			<div class="ml-3 mr-3">
 				{move || user.get().map(|x| view! { <ActorHeader object=x /> })}
-				{move || match resource.get() {
+				<code class="cw center color mt-1"><span class="emoji">{symbol}</span>" "<b>{follow___}</b></code>
-					None => view! { <p>"loading "<span class="dots"></span></p> }.into_view(),
+				<blockquote class="tl ml-3-r mr-3-r pl-1 pt-1 pb-1">
-					Some(None) => view! { <code>could not load following</code> }.into_view(),
+					{move || match resource.get() {
-					Some(Some(arr)) => view! {
+						None => view! { <p class="center">"loading "<span class="dots"></span></p> }.into_view(),
-						<For
+						Some(None) => view! { <p class="center">could not load {follow___}</p> }.into_view(),
-							each=move || arr.clone()
+						Some(Some(arr)) => view! {
-							key=|id| id.clone()
+							<For
-							children=move |id| {
+								each=move || arr.clone()
-								let actor = match CACHE.get(&id) {
+								key=|id| id.clone()
-									Some(x) => x,
+								children=move |id| {
-									None => Arc::new(serde_json::Value::String(id)),
+									let actor = match CACHE.get(&id) {
-								};
+										Some(x) => x,
-								view! {
+										None => Arc::new(serde_json::Value::String(id)),
-									<ActorBanner object=actor />
+									};
-								}.into_view()
+									view! {
-							}
+										<ActorBanner object=actor />
-						/ >
+										<hr />
-					},
+									}.into_view()
-				}}
+								}
+							/ >
+						}.into_view(),
+					}}
+				</blockquote>
 			</div>
 		</div>
 	}