add: finish ui rewrite

This commit is contained in:
trisua 2025-06-01 12:25:33 -04:00
parent e9846016e6
commit 5dec98d698
119 changed files with 8776 additions and 9350 deletions

View file

@ -0,0 +1,689 @@
(text "{% extends \"root.html\" %} {% block head %}")
(title
(text "Chats - {{ config.name }}"))
(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 quaternary 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 quaternary 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 quaternary")
("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")
("id" "stream")
("style" "padding: 1rem")
(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 %}")
(style
(text ":root {
--list-bar-width: 64px;
--channels-bar-width: 256px;
--sidebar-height: calc(100dvh - 42px);
--channel-header-height: 48px;
}
html,
body {
overflow: hidden;
}
.name.shortest {
max-width: 165px;
overflow-wrap: normal;
}
.send_button {
width: 48px;
height: 48px;
}
.send_button .icon {
width: 2em;
height: 2em;
}
a.channel_icon {
width: 48px;
height: 48px;
min-height: 48px;
}
a.channel_icon .icon {
min-width: 24px;
height: 24px;
}
a.channel_icon.small {
width: 24px;
height: 24px;
min-height: 24px;
}
a.channel_icon.small .icon {
min-width: 12px;
height: 12px;
}
a.channel_icon:has(img) {
padding: 0;
}
a.channel_icon img {
min-width: 48px;
min-height: 48px;
}
a.channel_icon img,
a.channel_icon:has(.icon) {
transition:
outline 0.25s,
background 0.15s !important;
}
a.channel_icon:not(.selected):hover img,
a.channel_icon:not(.selected):hover:has(.icon) {
outline: solid 1px var(--color-text);
}
a.channel_icon.selected img,
a.channel_icon.selected:has(.icon) {
outline: solid 2px var(--color-text);
}
nav {
background: var(--color-raised);
color: var(--color-text-raised) !important;
height: 42px;
position: sticky !important;
}
nav::after {
display: block;
position: absolute;
background: var(--color-super-lowered);
height: 1px;
width: calc(100% - var(--list-bar-width));
bottom: 0;
left: var(--list-bar-width);
content: \"\";
}
nav .content_container {
max-width: 100% !important;
width: 100%;
}
.chats_nav {
display: none;
padding: 0;
}
.chats_nav button {
justify-content: flex-start;
width: 100% !important;
flex-direction: row !important;
font-size: 16px !important;
margin-top: -4px;
}
.chats_nav button svg {
margin-right: 1rem;
}
.sidebar {
background: var(--color-raised);
color: var(--color-text-raised);
border-right: solid 1px var(--color-super-lowered);
padding: 0.4rem;
width: max-content;
height: var(--sidebar-height);
overflow: auto;
transition: left 0.15s;
z-index: 1;
}
.sidebar .title:not(.dropdown *) {
padding: 1rem;
border-bottom: solid 1px var(--color-super-lowered);
}
.sidebar#channels_list {
width: var(--channels-bar-width);
background: var(--color-surface);
color: var(--color-text);
}
#stream {
width: calc(
100dvw - var(--list-bar-width) - var(--channels-bar-width)
) !important;
height: var(--sidebar-height);
}
.message {
transition: background 0.15s;
box-shadow: none;
position: relative;
}
.message:hover {
background: var(--color-raised);
}
.message:hover .hidden,
.message:focus .hidden,
.message:active .hidden {
display: flex !important;
}
.message.grouped {
padding: 0.25rem 1rem 0.25rem calc(1rem + 0.5rem + 42px);
}
turbo-frame {
display: contents;
}
.channel_header {
height: var(--channel-header-height);
}
.members_list_half {
padding-top: 1rem;
border-top: solid 1px var(--color-super-lowered);
}
.channels_list_half:not(.no_members),
.members_list_half {
overflow: auto;
height: calc(
(var(--sidebar-height) - var(--channel-header-height) - 8rem) /
2
);
}
@media screen and (max-width: 900px) {
:root {
--sidebar-height: calc(100dvh - 42px * 2);
}
.message.grouped {
padding: 0.25rem 1rem 0.25rem calc(1rem + 0.5rem + 31px);
}
body:not(.sidebars_shown) .sidebar {
position: absolute;
left: -200%;
}
body.sidebars_shown .sidebar {
position: absolute;
}
#stream {
width: 100dvw !important;
height: var(--sidebar-height);
}
nav::after {
width: 100dvw;
left: 0;
}
.chats_nav {
display: flex;
}
}"))
(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
user: \"{{ user.id }}\",
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\");
};
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 %}")