t/tetratto
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: better mobile chats state

Browse source 
add: move channels list to turbo-frame
fix: don't spam _render (socket)
This commit is contained in:
trisua 2025-04-30 16:45:31 -04:00
parent 0dbf660399
commit c549fdd274
5 changed files with 265 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

2
crates/app/src/assets.rs
View file

@ -93,6 +93,7 @@ pub const MOD_WARNINGS: &str = include_str!("./public/html/mod/warnings.html");
pub const CHATS_APP: &str = include_str!("./public/html/chats/app.html");
pub const CHATS_STREAM: &str = include_str!("./public/html/chats/stream.html");
pub const CHATS_MESSAGE: &str = include_str!("./public/html/chats/message.html");
pub const CHATS_CHANNELS: &str = include_str!("./public/html/chats/channels.html");
// langs
pub const LANG_EN_US: &str = include_str!("./langs/en-US.toml");
@ -260,6 +261,7 @@ pub(crate) async fn write_assets(config: &Config) -> PathBufD {
write_template!(html_path->"chats/app.html"(crate::assets::CHATS_APP) -d "chats" --config=config);
write_template!(html_path->"chats/stream.html"(crate::assets::CHATS_STREAM) --config=config);
write_template!(html_path->"chats/message.html"(crate::assets::CHATS_MESSAGE) --config=config);
write_template!(html_path->"chats/channels.html"(crate::assets::CHATS_CHANNELS) --config=config);
html_path
}

152
crates/app/src/public/html/chats/app.html
View file

@ -90,58 +90,13 @@
{{ icon "plus" }}
<span>{{ text "communities:action.create_channel" }}</span>
</a>
{% endif %} {% for channel in channels %} {% if selected_community == 0
%}
<div class="flex flex-row gap-1">
<a
class="w-full justify-start button {% if selected_channel == channel.id %}quaternary{% else %}camo{% endif %}"
href="/chats/{{ selected_community }}/{{ channel.id }}"
data-turbo="{{ selected_community == '0' }}"
>
{{ icon "rss" }}
<b class="name shortest">{{ channel.title }}</b>
</a>
<div class="dropdown">
<button
class="big_icon {% if selected_channel == channel.id %}quaternary{% else %}camo{% endif %}"
onclick="trigger('atto::hooks::dropdown', [event])"
exclude="dropdown"
style="width: 32px"
>
{{ icon "ellipsis" }}
</button>
<div class="inner">
{% if user.id == channel.owner %}
<button
onclick="delete_channel('{{ channel.id }}')"
class="red"
>
{{ icon "trash" }}
<span>{{ text "general:action.delete" }}</span>
</button>
{% else %}
<button
onclick="kick_member('{{ channel.id }}', '{{ user.id }}')"
class="red"
>
{{ icon "door-open" }}
<span>{{ text "chats:action.leave" }}</span>
</button>
{% endif %}
</div>
</div>
</div>
{% else %}
<a
class="w-full justify-start button {% if selected_channel == channel.id %}quaternary{% else %}camo{% endif %}"
href="/chats/{{ selected_community }}/{{ channel.id }}"
>
{{ icon "rss" }}
<b class="name shortest">{{ channel.title }}</b>
</a>
{% endif %} {% endfor %}
<turbo-frame
id="channels_list_frame"
src="/chats/{{ selected_community }}/{{ selected_channel }}/_channels"
target="_top"
></turbo-frame>
</div>
{% if channel %}
@ -149,6 +104,7 @@
<turbo-frame
id="stream_body_frame"
src="/chats/{{ selected_community }}/{{ selected_channel }}/_stream?page={{ page }}"
target="_top"
></turbo-frame>
<form
@ -368,6 +324,11 @@
membership_role: Number.parseInt("{{ membership_role }}"),
};
window.SIDEBARS_OPEN = false;
if (new URLSearchParams(window.location.search).get("nav") === "true") {
window.SIDEBARS_OPEN = true;
}
if (
window.SIDEBARS_OPEN &&
!document.body.classList.contains("sidebars_shown")
@ -376,8 +337,22 @@
window.SIDEBARS_OPEN = true;
}
for (const anchor of document.querySelectorAll("[data-turbo=false]")) {
anchor.href += `?nav=${window.SIDEBARS_OPEN}`;
}
function toggle_sidebars() {
window.SIDEBARS_OPEN = !window.SIDEBARS_OPEN;
for (const anchor of document.querySelectorAll(
"[data-turbo=false]",
)) {
anchor.href = anchor.href.replace(
`?nav=${!window.SIDEBARS_OPEN}`,
`?nav=${window.SIDEBARS_OPEN}`,
);
}
const community_list = document.getElementById("community_list");
const channels_list = document.getElementById("channels_list");
@ -452,16 +427,16 @@
console.log("closed lingering");
}
if ("{{ selected_community }}" !== "0") {
const endpoint = `${window.location.origin.replace("http", "ws")}/api/v1/_connect/{{ selected_community }}`;
if (window.CHAT_PROPS.selected_community !== "0") {
const endpoint = `${window.location.origin.replace("http", "ws")}/api/v1/_connect/${window.CHAT_PROPS.selected_community}`;
const socket = new WebSocket(endpoint);
window.socket = socket;
window.socket_id = "{{ selected_community }}";
window.socket_id = window.CHAT_PROPS.selected_community;
} else {
const endpoint = `${window.location.origin.replace("http", "ws")}/api/v1/_connect/{{ selected_channel }}`;
const endpoint = `${window.location.origin.replace("http", "ws")}/api/v1/_connect/${window.CHAT_PROPS.selected_channel}`;
const socket = new WebSocket(endpoint);
window.socket = socket;
window.socket_id = "{{ selected_channel }}";
window.socket_id = window.CHAT_PROPS.selected_channel;
}
window.socket.addEventListener("open", () => {
@ -477,26 +452,6 @@
}),
);
});
};
</script>
{% if selected_channel %}
<script>
window.SUBSCRIBE_CHANNEL = "{{ selected_community }}" === "0";
setTimeout(() => {
if (!window.SUBSCRIBE_CHANNEL) {
// sub community
if (window.socket_id !== "{{ selected_community }}") {
socket_init();
}
} else {
// sub channel
if (window.socket_id !== "{{ selected_channel }}") {
socket_init();
}
}
}, 100);
setTimeout(() => {
window.socket.addEventListener("message", async (event) => {
@ -508,7 +463,7 @@
const [channel_id, data] = JSON.parse(msg.data);
if (msg.method === "Message" && window.CURRENT_PAGE === 0) {
if (channel_id !== "{{ selected_channel }}") {
if (channel_id !== window.CHAT_PROPS.selected_channel) {
// message not for us... maybe send notification later
// something like /api/v1/messages/{id}/mark_unread
return;
@ -519,18 +474,22 @@
element.style.display = "contents";
element.innerHTML = await (
await fetch(
"/chats/{{ selected_community }}/{{ selected_channel }}/_render",
`/chats/${window.CHAT_PROPS.selected_community}/${window.CHAT_PROPS.selected_channel}/_render`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ data: msg.data }),
body: JSON.stringify({
data: msg.data,
}),
},
)
).text();
document.getElementById("stream_body").prepend(element);
document
.getElementById("stream_body")
.prepend(element);
clean_text();
} else {
console.log("abandoned remote");
@ -538,7 +497,9 @@
}
} else if (msg.method === "Delete") {
if (document.getElementById(`message-${data.id}`)) {
document.getElementById(`message-${data.id}`).remove();
document
.getElementById(`message-${data.id}`)
.remove();
}
}
});
@ -554,7 +515,7 @@
},
body: JSON.stringify({
content: e.target.content.value,
channel: "{{ selected_channel }}",
channel: window.CHAT_PROPS.selected_channel,
}),
})
.then((res) => res.json())
@ -593,12 +554,35 @@
trigger("atto::hooks::online_indicator");
};
document.addEventListener("turbo:before-frame-render", (event) => {
document.addEventListener(
"turbo:before-frame-render",
(event) => {
setTimeout(clean_text, 50);
});
},
);
setTimeout(clean_text, 150);
}, 250);
};
</script>
{% if selected_channel %}
<script>
window.SUBSCRIBE_CHANNEL = "{{ selected_community }}" === "0";
setTimeout(() => {
if (!window.SUBSCRIBE_CHANNEL) {
// sub community
if (window.socket_id !== "{{ selected_community }}") {
socket_init();
}
} else {
// sub channel
if (window.socket_id !== "{{ selected_channel }}") {
socket_init();
}
}
}, 100);
</script>
{% endif %}
</div>

53
crates/app/src/public/html/chats/channels.html Normal file
View file

@ -0,0 +1,53 @@
<turbo-frame id="channels_list_frame">
{% for channel in channels %} {% if selected_community == 0 %}
<div class="flex flex-row gap-1">
<a
class="w-full justify-start button {% if selected_channel == channel.id %}quaternary{% else %}camo{% endif %}"
href="/chats/{{ selected_community }}/{{ channel.id }}"
data-turbo="{{ selected_community == '0' }}"
>
{{ icon "rss" }}
<b class="name shortest">{{ channel.title }}</b>
</a>
<div class="dropdown">
<button
class="big_icon {% if selected_channel == channel.id %}quaternary{% else %}camo{% endif %}"
onclick="trigger('atto::hooks::dropdown', [event])"
exclude="dropdown"
style="width: 32px"
>
{{ icon "ellipsis" }}
</button>
<div class="inner">
{% if user.id == channel.owner %}
<button
onclick="delete_channel('{{ channel.id }}')"
class="red"
>
{{ icon "trash" }}
<span>{{ text "general:action.delete" }}</span>
</button>
{% else %}
<button
onclick="kick_member('{{ channel.id }}', '{{ user.id }}')"
class="red"
>
{{ icon "door-open" }}
<span>{{ text "chats:action.leave" }}</span>
</button>
{% endif %}
</div>
</div>
</div>
{% else %}
<a
class="w-full justify-start button {% if selected_channel == channel.id %}quaternary{% else %}camo{% endif %}"
href="/chats/{{ selected_community }}/{{ channel.id }}"
>
{{ icon "rss" }}
<b class="name shortest">{{ channel.title }}</b>
</a>
{% endif %} {% endfor %}
</turbo-frame>

68
crates/app/src/routes/pages/chats.rs
View file

@ -1,4 +1,4 @@
use super::{render_error, PaginatedQuery};
use super::{render_error, ChatsAppQuery, PaginatedQuery};
use crate::{State, assets::initial_context, get_lang, get_user_from_token};
use axum::{
extract::{Path, Query},
@ -28,7 +28,7 @@ pub async fn app_request(
jar: CookieJar,
Extension(data): Extension<State>,
Path((selected_community, selected_channel)): Path<(usize, usize)>,
Query(props): Query<PaginatedQuery>,
Query(props): Query<ChatsAppQuery>,
) -> impl IntoResponse {
let data = data.read().await;
let user = match get_user_from_token!(jar, data.0) {
@ -60,18 +60,20 @@ pub async fn app_request(
Err(e) => return Err(Html(render_error(e, &jar, &data, &Some(user)).await)),
};
let channels = if selected_community == 0 {
match data.0.get_channels_by_user(user.id).await {
if selected_community != 0 && selected_channel == 0 {
let channels = match data.0.get_channels_by_community(selected_community).await {
Ok(p) => p,
Err(e) => return Err(Html(render_error(e, &jar, &data, &Some(user)).await)),
}
} else {
match data.0.get_channels_by_community(selected_community).await {
Ok(p) => p,
Err(e) => return Err(Html(render_error(e, &jar, &data, &Some(user)).await)),
}
};
if let Some(ref channel) = channels.get(0) {
return Ok(Html(format!(
"<!doctype html><html><head><meta http-equiv=\"refresh\" content=\"0; url=/chats/{}/{}?nav={}\" /></head></html>",
selected_community, channel.id, props.nav
)));
}
}
let community = if selected_community != 0 {
match data.0.get_community_by_id(selected_community).await {
Ok(p) => Some(p),
@ -130,9 +132,7 @@ pub async fn app_request(
context.insert("community", &community);
context.insert("channel", &channel);
context.insert("communities", &communities);
context.insert("channels", &channels);
// return
Ok(Html(data.1.render("chats/app.html", &context).unwrap()))
@ -249,3 +249,47 @@ pub async fn message_request(
// return
Ok(Html(data.1.render("chats/message.html", &context).unwrap()))
}
/// `/chats/{community}/{channel/_channels`
pub async fn channels_request(
jar: CookieJar,
Extension(data): Extension<State>,
Path((community, channel)): Path<(usize, usize)>,
Query(props): Query<PaginatedQuery>,
) -> impl IntoResponse {
let data = data.read().await;
let user = match get_user_from_token!(jar, data.0) {
Some(ua) => ua,
None => {
return Err(Html(
render_error(Error::NotAllowed, &jar, &data, &None).await,
));
}
};
let channels = if community == 0 {
match data.0.get_channels_by_user(user.id).await {
Ok(p) => p,
Err(e) => return Err(Html(render_error(e, &jar, &data, &Some(user)).await)),
}
} else {
match data.0.get_channels_by_community(community).await {
Ok(p) => p,
Err(e) => return Err(Html(render_error(e, &jar, &data, &Some(user)).await)),
}
};
let lang = get_lang!(jar, data.0);
let mut context = initial_context(&data.0.0, lang, &Some(user)).await;
context.insert("channels", &channels);
context.insert("page", &props.page);
context.insert("selected_community", &community);
context.insert("selected_channel", &channel);
// return
Ok(Html(
data.1.render("chats/channels.html", &context).unwrap(),
))
}

12
crates/app/src/routes/pages/mod.rs
View file

@ -99,6 +99,10 @@ pub fn routes() -> Router {
"/chats/{community}/{channel}/_render",
post(chats::message_request),
)
.route(
"/chats/{community}/{channel}/_channels",
get(chats::channels_request),
)
}
pub async fn render_error(
@ -119,6 +123,14 @@ pub struct PaginatedQuery {
pub page: usize,
}
#[derive(Deserialize)]
pub struct ChatsAppQuery {
#[serde(default)]
pub page: usize,
#[serde(default)]
pub nav: bool,
}
#[derive(Deserialize)]
pub struct ProfileQuery {
#[serde(default)]