add: better mobile chats state

add: move channels list to turbo-frame
fix: don't spam _render (socket)

crates/app/src/assets.rs

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

crates/app/src/public/html/chats/app.html

@@ -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>
+        <turbo-frame
-        </div>
+            id="channels_list_frame"
-        {% else %}
+            src="/chats/{{ selected_community }}/{{ selected_channel }}/_channels"
-        <a
+            target="_top"
-            class="w-full justify-start button {% if selected_channel == channel.id %}quaternary{% else %}camo{% endif %}"
+        ></turbo-frame>
-            href="/chats/{{ selected_community }}/{{ channel.id }}"
-        >
-            {{ icon "rss" }}
-            <b class="name shortest">{{ channel.title }}</b>
-        </a>
-        {% endif %} {% endfor %}
     </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") {
+            if (window.CHAT_PROPS.selected_community !== "0") {
-                const endpoint = `${window.location.origin.replace("http", "ws")}/api/v1/_connect/{{ selected_community }}`;
+                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>

crates/app/src/public/html/chats/channels.html

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

crates/app/src/routes/pages/chats.rs

@@ -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 {
+    if selected_community != 0 && selected_channel == 0 {
-        match data.0.get_channels_by_user(user.id).await {
+        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(),
+    ))
+}

crates/app/src/routes/pages/mod.rs

@@ -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)]