feat(web): rework actors page

This commit is contained in:
əlemi 2024-06-10 21:44:28 +02:00
parent 7badc1eab5
commit 0fec18582d
Signed by: alemi
GPG key ID: A4895B84D311642C
12 changed files with 307 additions and 190 deletions

55
web/src/actors/follow.rs Normal file
View file

@ -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>
}
}

9
web/src/actors/mod.rs Normal file
View file

@ -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>,
}

20
web/src/actors/posts.rs Normal file
View file

@ -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 />
}
}

128
web/src/actors/view.rs Normal file
View file

@ -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}");
}
})
}

View file

@ -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>
}
}

View file

@ -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;

View file

@ -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>
}
}

View file

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

View file

@ -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>
}
}

View file

@ -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;

View file

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