feat(web): better activity/object display, refactor
This commit is contained in:
parent
4e5e8f8532
commit
63bde2b5e0
GPG key ID:
A4895B84D311642C
9 changed files with 225 additions and 179 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
42
web/src/components/activity.rs
Normal file
42
web/src/components/activity.rs
Normal file
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
42
web/src/components/mod.rs
Normal file
42
web/src/components/mod.rs
Normal file
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
76
web/src/components/object.rs
Normal file
76
web/src/components/object.rs
Normal file
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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(apb::BaseType::Object(apb::ObjectType::Activity(_))) => view! {
|
||||
<InlineActivity activity=object />
|
||||
Some(item) => match item.base_type() {
|
||||
Some(apb::BaseType::Object(apb::ObjectType::Activity(_))) => {
|
||||
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();
|
||||
42
web/src/components/user.rs
Normal file
42
web/src/components/user.rs
Normal file
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,10 @@
|
|||
mod app;
|
||||
mod auth;
|
||||
mod timeline;
|
||||
mod view;
|
||||
mod components;
|
||||
mod page;
|
||||
mod control;
|
||||
|
||||
pub use app::App;
|
||||
pub use timeline::Timeline;
|
||||
pub use auth::{Auth, AuthToken};
|
||||
|
||||
pub mod prelude;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
pub use crate::{
|
||||
AuthToken,
|
||||
Auth, Timeline, Http, Uri,
|
||||
Http, Uri,
|
||||
CACHE, URL_BASE,
|
||||
auth::{Auth, AuthToken},
|
||||
page::*,
|
||||
control::*,
|
||||
view::*,
|
||||
app::App,
|
||||
components::*,
|
||||
auth::LoginBox,
|
||||
timeline::TimelineFeed,
|
||||
};
|
||||
|
|
|
|||
163
web/src/view.rs
163
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,
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue