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

(text "{% extends \"root.html\" %} {% block head %}")
(title
    (text "Chats - {{ config.name }}"))
(link ("rel" "stylesheet") ("data-turbo-temporary" "true") ("href" "/css/chats.css?v=tetratto-{{ random_cache_breaker }}"))
(text "{% endblock %} {% block body %} {{ macros::nav(selected=\"chats\", hide_user_menu=true) }}")
(nav
    ("class" "chats_nav")
    (button
        ("class" "flex gap-2 items-center active")
        ("onclick" "toggle_sidebars(event)")
        (text "{{ icon \"panel-left\" }} {% if community -%}")
        (b
            ("class" "name shorter")
            (text "{% if community.context.display_name -%} {{ community.context.display_name }} {% else %} {{ community.title }} {%- endif %}"))
        (text "{% else %}")
        (b
            (text "{{ text \"chats:label.my_chats\" }}"))
        (text "{%- endif %}")))
(div
    ("class" "flex")
    (div
        ("class" "sidebar flex flex-col items-center gap-2")
        ("id" "community_list")
        ("style" "width: var(--list-bar-width)")
        (a
            ("href" "/chats/0/0")
            ("class" "button lowered channel_icon {% if selected_community == 0 -%}selected{%- endif %}")
            ("data-turbo" "false")
            (text "{{ icon \"message-circle\" }}"))
        (text "{% for community in communities %} {% if community.id != 0 -%}")
        (a
            ("href" "/chats/{{ community.id }}/0")
            ("class" "button lowered channel_icon {% if selected_community == community.id -%}selected{%- endif %}")
            ("data-turbo" "false")
            (text "{{ components::community_avatar(id=community.id, community=community, size=\"48px\") }}"))
        (text "{%- endif %} {% endfor %}"))
    (div
        ("class" "sidebar flex flex-col gap-2 justify-between")
        ("id" "channels_list")
        (div
            ("class" "flex flex-col gap-2 w-full")
            (div
                ("class" "title flex items-center justify-between channel_header")
                (text "{% if community -%}")
                (b
                    ("class" "name shorter")
                    (text "{% if community.context.display_name -%} {{ community.context.display_name }} {% else %} {{ community.title }} {%- endif %}"))
                (text "{% else %}")
                (b
                    (text "{{ text \"chats:label.my_chats\" }}"))
                (text "{%- endif %} {% if selected_community != 0 -%}")
                (div
                    ("class" "dropdown")
                    (button
                        ("class" "camo small")
                        ("onclick" "trigger('atto::hooks::dropdown', [event])")
                        ("exclude" "dropdown")
                        (text "{{ icon \"ellipsis\" }}"))
                    (div
                        ("class" "inner")
                        (a
                            ("href" "/community/{{ selected_community }}")
                            (text "{{ icon \"book-heart\" }}")
                            (span
                                (text "{{ text \"communities:label.show_community\" }}")))
                        (text "{% if can_manage_channels -%}")
                        (a
                            ("href" "/community/{{ selected_community }}/manage")
                            (text "{{ icon \"settings\" }}")
                            (span
                                (text "{{ text \"general:action.manage\" }}")))
                        (text "{%- endif %}")))
                (text "{%- endif %}"))
            (text "{% if can_manage_channels -%}")
            (a
                ("class" "button w-full justify-start lowered")
                ("href" "/community/{{ selected_community }}/manage#/channels")
                (text "{{ icon \"plus\" }}")
                (span
                    (text "{{ text \"communities:action.create_channel\" }}")))
            (text "{%- endif %}")
            (turbo-frame
                ("id" "channels_list_frame")
                ("src" "/chats/{{ selected_community }}/{{ selected_channel }}/_channels")
                ("target" "_top")))
        (text "{{ components::user_plate(user=user, show_menu=true) }}"))
    (text "{% if channel -%}")
    (div
        ("class" "w-full flex flex-col gap-2 padded_section")
        ("id" "stream")
        ("style" "padding: var(--pad-4)")
        (turbo-frame
            ("id" "stream_body_frame")
            ("src" "/chats/{{ selected_community }}/{{ selected_channel }}/_stream?page={{ page }}&message={{ message }}"))
        (form
            ("class" "card flex flex-row gap-2")
            ("onsubmit" "create_message_from_form(event)")
            (textarea
                ("type" "text")
                ("name" "content")
                ("id" "content")
                ("placeholder" "message {{ channel.title }}")
                ("required" "")
                ("minlength" "2")
                ("maxlength" "2048")
                ("style" "min-height: 48px !important; height: 48px"))
            (button
                ("class" "camo send_button")
                ("title" "Send")
                (text "{{ icon \"send-horizontal\" }}"))))
    (text "{%- endif %}")

    ; emoji picker
    (text "{{ components::emoji_picker(element_id=\"\", render_dialog=true, render_button=false) }}")
    (input ("id" "react_emoji_picker_field") ("class" "hidden") ("type" "hidden"))

    (script
        (text "window.EMOJI_PICKER_MODE = \"replace\";
        document.getElementById(\"react_emoji_picker_field\").addEventListener(\"change\", (e) => {
            if (!EMOJI_PICKER_REACTION_MESSAGE_ID) {
                return;
            }

            const emoji = e.target.value === \"::\" ? \":heart:\" : e.target.value;
            trigger(\"me::message_react\", [document.getElementById(`message-${EMOJI_PICKER_REACTION_MESSAGE_ID}`), EMOJI_PICKER_REACTION_MESSAGE_ID, emoji]);
        });"))

    ; ...
    (script
        (text "window.CURRENT_PAGE = Number.parseInt(\"{{ page }}\");
        window.VIEWING_SINGLE = \"{{ message }}\".length > 0;
        window.CHAT_PROPS = {
            selected_community: \"{{ selected_community }}\",
            selected_channel: \"{{ selected_channel }}\",
            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\")
        ) {
            toggle_sidebars();
            window.SIDEBARS_OPEN = true;
        }

        for (const anchor of document.querySelectorAll(\"[data-turbo=false]\")) {
            anchor.href += `?nav=${window.SIDEBARS_OPEN}`;
        }

        function mention_user(username) {
            document.getElementById(\"content\").value += ` @${username} `;
        }

        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\");

            if (document.body.classList.contains(\"sidebars_shown\")) {
                // hide
                document.body.classList.remove(\"sidebars_shown\");
                community_list.style.left = \"-200%\";
                channels_list.style.left = \"-200%\";
            } else {
                // show
                document.body.classList.add(\"sidebars_shown\");
                community_list.style.left = \"0\";
                channels_list.style.left = \"var(--list-bar-width)\";
            }
        }

        globalThis.add_member = async (id) => {
            await trigger(\"atto::debounce\", [\"channels::add_member\"]);
            const member = await trigger(\"atto::prompt\", [\"Member username:\"]);

            if (!member) {
                return;
            }

            fetch(`/api/v1/channels/${id}/add`, {
                method: \"POST\",
                headers: {
                    \"Content-Type\": \"application/json\",
                },
                body: JSON.stringify({
                    member,
                }),
            })
                .then((res) => res.json())
                .then((res) => {
                    trigger(\"atto::toast\", [
                        res.ok ? \"success\" : \"error\",
                        res.message,
                    ]);
                });
        };

        globalThis.update_channel_title = async (id) => {
            await trigger(\"atto::debounce\", [\"channels::update_title\"]);
            const title = await trigger(\"atto::prompt\", [\"New channel title:\"]);

            if (!title) {
                return;
            }

            fetch(`/api/v1/channels/${id}/title`, {
                method: \"POST\",
                headers: {
                    \"Content-Type\": \"application/json\",
                },
                body: JSON.stringify({
                    title,
                }),
            })
                .then((res) => res.json())
                .then((res) => {
                    trigger(\"atto::toast\", [
                        res.ok ? \"success\" : \"error\",
                        res.message,
                    ]);
                });
        };

        globalThis.kick_member = async (cid, uid) => {
            if (
                !(await trigger(\"atto::confirm\", [
                    \"Are you sure you would like to do this?\",
                ]))
            ) {
                return;
            }

            fetch(`/api/v1/channels/${cid}/kick`, {
                method: \"POST\",
                headers: {
                    \"Content-Type\": \"application/json\",
                },
                body: JSON.stringify({
                    member: uid,
                }),
            })
                .then((res) => res.json())
                .then((res) => {
                    trigger(\"atto::toast\", [
                        res.ok ? \"success\" : \"error\",
                        res.message,
                    ]);
                });
        };

        globalThis.delete_channel = async (id) => {
            if (
                !(await trigger(\"atto::confirm\", [
                    \"Are you sure you would like to do this?\",
                ]))
            ) {
                return;
            }

            fetch(`/api/v1/channels/${id}`, {
                method: \"DELETE\",
            })
                .then((res) => res.json())
                .then((res) => {
                    trigger(\"atto::toast\", [
                        res.ok ? \"success\" : \"error\",
                        res.message,
                    ]);
                });
        };"))
    (script
        ("id" "socket_init")
        ("data-turbo-permanent" "true")
        (text "globalThis.socket_init = () => {
            if (window.socket) {
                window.socket.send(\"Close\");
                window.socket.close();
                window.socket = undefined;
                console.log(\"closed lingering\");
            }

            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 = window.CHAT_PROPS.selected_community;
            } else {
                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 = window.CHAT_PROPS.selected_channel;
            }

            if (window.CHANNEL_NOTIFS_INTERVAL) {
                window.clearInterval(window.CHANNEL_NOTIFS_INTERVAL);
            }

            window.CHANNEL_NOTIFS_INTERVAL = setInterval(() => {
                if (!window.CHAT_PROPS.selected_channel) {
                    return;
                }

                if (!window.location.href.includes(\"{{ selected_channel }}\")) {
                    window.clearInterval(window.CHANNEL_NOTIFS_INTERVAL);
                    return;
                }

                fetch(
                    `/api/v1/notifications/tag/chats/${window.CHAT_PROPS.selected_channel}`,
                    { method: \"DELETE\" },
                );
            }, 10000);

            window.socket.addEventListener(\"open\", () => {
                // auth
                window.socket.send(
                    JSON.stringify({
                        method: \"Headers\",
                        data: JSON.stringify({
                            // SocketHeaders
                            is_channel: window.SUBSCRIBE_CHANNEL,
                        }),
                    }),
                );
            });

            setTimeout(() => {
                window.LAST_MESSAGE_AUTHOR_ID = null;
                window.socket.addEventListener(\"message\", async (event) => {
                    if (event.data === \"Ping\") {
                        return socket.send(\"Pong\");
                    }

                    const msg = JSON.parse(event.data);

                    if (
                        msg.method === \"Message\" &&
                        window.CURRENT_PAGE === 0 &&
                        window.VIEWING_SINGLE
                    ) {
                        const [channel_id, data] = JSON.parse(msg.data);
                        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;
                        }

                        if (document.getElementById(\"stream_body\")) {
                            const element = document.createElement(\"div\");
                            element.style.display = \"contents\";

                            const message_owner = JSON.parse(msg.data)[1].owner;
                            element.innerHTML = await (
                                await fetch(
                                    `/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,
                                            grouped:
                                                message_owner ===
                                                window.LAST_MESSAGE_AUTHOR_ID,
                                        }),
                                    },
                                )
                            ).text();

                            document
                                .getElementById(\"stream_body\")
                                .prepend(element);
                            clean_text();

                            window.LAST_MESSAGE_AUTHOR_ID = message_owner;
                        } else {
                            console.log(\"abandoned remote\");
                            socket.close();
                        }
                    } else if (msg.method === \"Delete\") {
                        const data = JSON.parse(msg.data);
                        if (document.getElementById(`message-${data.id}`)) {
                            document
                                .getElementById(`message-${data.id}`)
                                .remove();
                        }
                    }
                });

                globalThis.create_message_from_form = async (e) => {
                    e.preventDefault();
                    await trigger(\"atto::debounce\", [\"messages::create\"]);

                    fetch(\"/api/v1/messages\", {
                        method: \"POST\",
                        headers: {
                            \"Content-Type\": \"application/json\",
                        },
                        body: JSON.stringify({
                            content: e.target.content.value.trim(),
                            channel: window.CHAT_PROPS.selected_channel,
                        }),
                    })
                        .then((res) => res.json())
                        .then((res) => {
                            if (!res.ok) {
                                trigger(\"atto::toast\", [\"error\", res.message]);
                            }

                            e.target.reset();
                        });
                };

                globalThis.delete_message = async (id) => {
                    if (
                        !(await trigger(\"atto::confirm\", [
                            \"Are you sure you would like to do this?\",
                        ]))
                    ) {
                        return;
                    }

                    fetch(`/api/v1/messages/${id}`, {
                        method: \"DELETE\",
                    })
                        .then((res) => res.json())
                        .then((res) => {
                            trigger(\"atto::toast\", [
                                res.ok ? \"success\" : \"error\",
                                res.message,
                            ]);
                        });
                };

                const clean_text = () => {
                    trigger(\"atto::clean_date_codes\");
                    trigger(\"atto::hooks::online_indicator\");
                    trigger(\"atto::hooks::check_message_reactions\");
                };

                document.addEventListener(
                    \"turbo:before-frame-render\",
                    (event) => {
                        setTimeout(clean_text, 50);
                    },
                );

                setTimeout(clean_text, 150);
            }, 250);
        };"))
    (text "{% if selected_channel -%}")
    (script
        (text "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);"))
    (text "{%- endif %}"))
(text "{% endblock %}")