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

add: channels, messages

Browse source
This commit is contained in:
trisua 2025-04-27 23:11:37 -04:00
parent 67492cf73f
commit 7774124bd0
40 changed files with 2238 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

8
crates/app/src/public/css/style.css
View file

@ -107,7 +107,7 @@ article {
padding: 0;
}
body .card:not(.card *),
body .card:not(.card *):not(#stream *),
body .pillmenu:not(.card *) > a,
body .card-nest:not(.card *) > .card,
body .banner {
@ -477,6 +477,12 @@ button.small,
font-size: 16px;
}
button.big_icon svg,
.button.big_icon svg {
height: 16px;
min-width: 16px;
}
button:hover,
.button:hover {
background: var(--color-primary-lowered);

2
crates/app/src/public/html/auth/connection.html
View file

@ -30,6 +30,7 @@ config.connections.spotify_client_id %}
refresh_token,
expires_in: expires_in.toString(),
name: profile.display_name,
url: profile.external_urls.spotify,
},
]);
@ -59,6 +60,7 @@ config.connections.last_fm_key %}
{
session_token: res.session.key,
name: res.session.name,
url: `https://last.fm/user/${res.session.name}`,
},
]);

573
crates/app/src/public/html/chats/app.html Normal file
View file

@ -0,0 +1,573 @@
{% extends "root.html" %} {% block head %}
<title>Chats - {{ config.name }}</title>
{% endblock %} {% block body %} {{ macros::nav(selected="chats") }}
<nav class="chats_nav">
<button
class="flex gap-2 items-center active"
onclick="toggle_sidebars(event)"
>
{{ icon "panel-left" }} {% if community %}
<b class="name shorter">
{% if community.context.display_name %} {{
community.context.display_name }} {% else %} {{ community.title }}
{% endif %}
</b>
{% else %}
<b>{{ text "chats:label.my_chats" }}</b>
{% endif %}
</button>
</nav>
<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 %}"
>
{{ icon "message-circle" }}
</a>
{% for community in communities %}
<a
href="/chats/{{ community.id }}/0"
class="button quaternary channel_icon {% if selected_community == community.id %}selected{% endif %}"
>
{{ components::community_avatar(id=community.id,
community=community, size="48px") }}
</a>
{% endfor %}
</div>
<div class="sidebar flex flex-col gap-2" id="channels_list">
<div class="title flex justify-between">
{% if community %}
<b class="name shorter">
{% if community.context.display_name %} {{
community.context.display_name }} {% else %} {{ community.title
}} {% endif %}
</b>
{% else %}
<b>{{ text "chats:label.my_chats" }}</b>
{% endif %}
<div class="dropdown">
<button
class="camo small"
onclick="trigger('atto::hooks::dropdown', [event])"
exclude="dropdown"
>
{{ icon "ellipsis" }}
</button>
<div class="inner">
<a href="/community/{{ selected_community }}">
{{ icon "book-heart" }}
<span
>{{ text "communities:label.show_community" }}</span
>
</a>
{% if can_manage_channels %}
<a href="/community/{{ selected_community }}/manage">
{{ icon "settings" }}
<span>{{ text "general:action.manage" }}</span>
</a>
{% endif %}
</div>
</div>
</div>
{% if can_manage_channels %}
<a
class="button w-full justify-start quaternary"
href="/community/{{ selected_community }}/manage#/channels"
>
{{ 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="false"
>
{{ icon "rss" }}
<b>{{ 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 }}"
data-turbo="false"
>
{{ icon "rss" }}
<b>{{ channel.title }}</b>
</a>
{% endif %} {% endfor %}
</div>
{% 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 }}"
></turbo-frame>
<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"
></textarea>
<button class="camo send_button" title="Send">
{{ icon "send-horizontal" }}
</button>
</form>
</div>
{% endif %}
<style>
:root {
--list-bar-width: 64px;
--channels-bar-width: 256px;
}
html,
body {
overflow: hidden;
}
.send_button {
width: 48px;
height: 48px;
}
.send_button .icon {
width: 2em;
height: 2em;
}
a.channel_icon {
width: 48px;
height: 48px;
}
a.channel_icon .icon {
min-width: 24px;
height: 24px;
}
a.channel_icon.small {
width: 24px;
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: calc(100dvh - 42px);
overflow: auto;
transition: left 0.15s;
}
.sidebar .title {
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: calc(100dvh - 42px);
}
.message {
transition: background 0.15s;
box-shadow: none;
}
.message:hover {
background: var(--color-raised);
}
.message:hover .hidden,
.message:focus .hidden,
.message:active .hidden {
display: flex !important;
}
turbo-frame {
display: contents;
}
@media screen and (max-width: 900px) {
body:not(.sidebars_shown) .sidebar {
position: absolute;
left: -200%;
}
body.sidebars_shown .sidebar {
position: absolute;
}
#stream {
width: 100dvw !important;
height: calc(100dvh - 42px * 2);
}
nav::after {
width: 100dvw;
left: 0;
}
.chats_nav {
display: flex;
}
}
</style>
<script>
window.CURRENT_PAGE = Number.parseInt("{{ page }}");
window.CHAT_PROPS = {
selected_community: "{{ selected_community }}",
selected_channel: "{{ selected_channel }}",
membership_role: Number.parseInt("{{ membership_role }}"),
};
if (
window.SIDEBARS_OPEN &&
!document.body.classList.contains("sidebars_shown")
) {
toggle_sidebars();
window.SIDEBARS_OPEN = true;
}
function toggle_sidebars() {
window.SIDEBARS_OPEN = !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.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>
{% if selected_channel %}
<script>
if (window.socket) {
window.socket.close();
window.socket = undefined;
console.log("closed old");
}
setTimeout(() => {
if (window.socket) {
if (window.socket_id === "{{ selected_channel }}") {
console.log("cannot open; already in session");
return;
} else {
window.socket.close();
window.socket = undefined;
console.log("closed lingering");
}
}
const endpoint = `${window.location.origin.replace("http", "ws")}/api/v1/channels/{{ selected_channel }}/ws`;
const socket = new WebSocket(endpoint);
window.socket = socket;
window.socket_id = "{{ selected_channel }}";
socket.addEventListener("close", () => {
return socket.send("Close");
});
socket.addEventListener("open", () => {
// auth
socket.send(
JSON.stringify({
method: "Headers",
data: JSON.stringify({
// SocketHeaders
channel: "{{ selected_channel }}",
user: "{{ user.id }}",
}),
}),
);
});
socket.addEventListener("message", async (event) => {
if (event.data === "Ping") {
return socket.send("Pong");
}
const msg = JSON.parse(event.data);
const data = JSON.parse(msg.data);
if (msg.method === "Message" && window.CURRENT_PAGE === 0) {
const element = document.createElement("div");
element.style.display = "contents";
element.innerHTML = await (
await fetch(
"/chats/{{ selected_community }}/{{ selected_channel }}/_render",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ data: msg.data }),
},
)
).text();
document.getElementById("stream_body").prepend(element);
clean_text();
} else if (msg.method === "Delete") {
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,
channel: "{{ 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);
</script>
{% endif %}
</div>
{% endblock %}

2
crates/app/src/public/html/chats/message.html Normal file
View file

@ -0,0 +1,2 @@
{%- import "components.html" as components -%} {{ components::message(user=user,
message=message) }}

44
crates/app/src/public/html/chats/stream.html Normal file
View file

@ -0,0 +1,44 @@
{%- import "components.html" as components -%}
<turbo-frame id="stream_body_frame">
<!-- prettier-ignore -->
<div class="gap-2" id="stream_body">
{% if page != 0 %}
<div class="card flex gap-2 small tertiary flex-wrap">
<b>{{ text "chats:label.viewing_old_messages" }}</b>
<a href="/chats/{{ community }}/{{ channel }}/_stream?page={{ page - 1}}" class="button small" onclick="window.CURRENT_PAGE -= 1">
{{ text "chats:label.go_back" }}
</a>
</div>
{% endif %}
{% for message in messages %}
{{ components::message(user=message[1], message=message[0]) }}
{% endfor %}
{% if messages|length > 0 %}
<div class="flex gap-2 w-full justify-center">
<a class="button" href="/chats/{{ community }}/{{ channel }}/_stream?page={{ page + 1 }}" onclick="window.CURRENT_PAGE += 1">
{{ icon "clock" }}
<span>{{ text "chats:label.view_older" }}</span>
</a>
{% if page != 0 %}
<a class="button quaternary" href="/chats/{{ community }}/{{ channel }}/_stream?page={{ page - 1 }}" onclick="window.CURRENT_PAGE -= 1">
{{ icon "rewind" }}
<span>{{ text "chats:label.view_more_recent" }}</span>
</a>
{% endif %}
</div>
{% endif %}
</div>
<style>
#stream_body {
height: 100%;
display: flex;
justify-content: flex-start;
flex-direction: column-reverse;
overflow: auto;
}
</style>
</turbo-frame>

8
crates/app/src/public/html/communities/base.html
View file

@ -179,6 +179,14 @@
<span>{{ text "communities:action.leave" }}</span>
</button>
<a
href="/chats/{{ community.id }}/0"
class="button quaternary"
>
{{ icon "message-circle" }}
<span>{{ text "communities:label.chats" }}</span>
</a>
<script>
globalThis.leave_community = async () => {
if (

183
crates/app/src/public/html/communities/settings.html
View file

@ -17,6 +17,13 @@
{{ icon "users-round" }}
<span>{{ text "communities:tab.members" }}</span>
</a>
{% if can_manage_channels %}
<a href="#/channels" data-tab-button="channels">
{{ icon "rss" }}
<span>{{ text "communities:tab.channels" }}</span>
</a>
{% endif %}
</div>
<div class="w-full flex flex-col gap-2" data-tab="general">
@ -254,6 +261,182 @@
<div class="card flex flex-col gap-2 w-full" id="membership_info"></div>
</div>
{% if can_manage_channels %}
<div
class="card tertiary w-full hidden flex flex-col gap-2"
data-tab="channels"
>
<div class="card-nest">
<div class="card small">
<b>{{ text "communities:action.create_channel" }}</b>
</div>
<form
class="card flex flex-col gap-2"
onsubmit="create_channel_from_form(event)"
>
<div class="flex flex-col gap-1">
<label for="title"
>{{ text "communities:label.name" }}</label
>
<input
type="text"
name="title"
id="title"
placeholder="name"
required
minlength="2"
maxlength="32"
/>
</div>
<button class="primary">
{{ text "communities:action.create" }}
</button>
</form>
</div>
{% for channel in channels %}
<div class="card-nest">
<div class="card small">
<b>{{ channel.position }}</b>
{{ channel.title }}
</div>
<div class="card flex gap-2">
<button
class="red quaternary small"
onclick="delete_channel('{{ channel.id }}')"
>
{{ text "general:action.delete" }}
</button>
<button
class="quaternary small"
onclick="update_channel_position('{{ channel.id }}')"
>
{{ text "chats:action.move" }}
</button>
<button
class="quaternary small"
onclick="update_channel_title('{{ channel.id }}')"
>
{{ text "chats:action.rename" }}
</button>
</div>
</div>
{% endfor %}
</div>
<script>
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,
]);
});
};
globalThis.update_channel_position = async (id) => {
await trigger("atto::debounce", ["channels::move"]);
const position = Number.parseInt(
await trigger("atto::prompt", [
"New channel position (number):",
]),
);
if (!position && position !== 0) {
return alert("Must be a number!");
}
fetch(`/api/v1/channels/${id}/move`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
position,
}),
})
.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,
]);
});
};
async function create_channel_from_form(e) {
e.preventDefault();
await trigger("atto::debounce", ["channels::create"]);
fetch("/api/v1/channels", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
title: e.target.title.value,
community: "{{ community.id }}",
}),
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
if (res.ok) {
window.location.reload();
}
});
}
</script>
{% endif %}
</main>
<script>

145
crates/app/src/public/html/components.html
View file

@ -54,8 +54,8 @@ community %}
class="card secondary w-full flex items-center gap-4"
href="/community/{{ community.title }}"
>
{{ components::community_avatar(id=community.id, community=community,
size="48px") }}
{{ self::community_avatar(id=community.id, community=community, size="48px")
}}
<div class="flex flex-col">
<h3 class="name lg:long">{{ community.context.display_name }}</h3>
<span class="fade"><b>{{ community.member_count }}</b> members</span>
@ -92,11 +92,16 @@ secondary=false) -%}
</button>
{% endif %} {%- endmacro %} {% macro full_username(user) -%}
<div class="flex items-center">
<a href="/@{{ user.username }}" class="flush" style="font-weight: 600">
{{ components::username(user=user) }}
<a
href="/@{{ user.username }}"
class="flush"
style="font-weight: 600"
target="_top"
>
{{ self::username(user=user) }}
</a>
{{ components::online_indicator(user=user) }} {% if user.is_verified %}
{{ self::online_indicator(user=user) }} {% if user.is_verified %}
<span
title="Verified"
style="color: var(--color-primary)"
@ -112,7 +117,7 @@ community=false, show_community=true, can_manage_post=false) -%}
<!-- prettier-ignore -->
<div style="display: none" id="repost-content:{{ post.id }}">
{% if repost %}
{{ components::post(post=repost[1], owner=repost[0], secondary=not secondary, community=false, show_community=false, can_manage_post=false) }}
{{ self::post(post=repost[1], owner=repost[0], secondary=not secondary, community=false, show_community=false, can_manage_post=false) }}
{% else %}
<div class="card tertiary red flex items-center gap-2">
{{ icon "frown" }}
@ -121,7 +126,7 @@ community=false, show_community=true, can_manage_post=false) -%}
{% endif %}
</div>
{{ components::post(post=post, owner=owner, secondary=secondary,
{{ self::post(post=post, owner=owner, secondary=secondary,
community=community, show_community=show_community,
can_manage_post=can_manage_post) }}
@ -149,15 +154,14 @@ community=false, show_community=true, can_manage_post=false) -%}
community=false, show_community=true, can_manage_post=false) -%} {% if community
and show_community and community.id != config.town_square or question %}
<div class="card-nest">
{% if question %} {{ components::question(question=question[0],
owner=question[1]) }} {% else %}
{% if question %} {{ self::question(question=question[0], owner=question[1])
}} {% else %}
<div class="card small">
<a
href="/api/v1/communities/find/{{ post.community }}"
class="flush flex gap-1 items-center"
>
{{ components::community_avatar(id=post.community,
community=community) }}
{{ self::community_avatar(id=post.community, community=community) }}
<b>
<!-- prettier-ignore -->
{% if community.context.display_name %}
@ -178,14 +182,14 @@ and show_community and community.id != config.town_square or question %}
>
<div class="w-full flex gap-2">
<a href="/@{{ owner.username }}">
{{ components::avatar(username=owner.username, size="52px",
{{ self::avatar(username=owner.username, size="52px",
selector_type="username") }}
</a>
<div class="flex flex-col w-full gap-1">
<div class="flex flex-wrap gap-2 items-center">
<span class="name"
>{{ components::full_username(user=owner) }}</span
>{{ self::full_username(user=owner) }}</span
>
{% if post.context.edited != 0 %}
@ -239,7 +243,7 @@ and show_community and community.id != config.town_square or question %}
<!-- prettier-ignore -->
{% if post.context.reactions_enabled %}
{% if post.content|length > 0 %}
{{ components::likes(id=post.id, asset_type="Post", likes=post.likes, dislikes=post.dislikes) }}
{{ self::likes(id=post.id, asset_type="Post", likes=post.likes, dislikes=post.dislikes) }}
{% endif %}
{% endif %}
@ -399,14 +403,14 @@ and show_community and community.id != config.town_square or question %}
{%- endmacro %} {% macro user_card(user) -%}
<a class="card-nest w-full" href="/@{{ user.username }}">
<div class="card small" style="padding: 0">
{{ components::banner(username=user.username, border_radius="0px") }}
{{ self::banner(username=user.username, border_radius="0px") }}
</div>
<div class="card secondary flex items-center gap-4">
{{ components::avatar(username=user.username, size="48px") }}
{{ self::avatar(username=user.username, size="48px") }}
<div class="flex items-center">
<b>{{ components::username(user=user) }}</b>
{{ components::online_indicator(user=user) }}
<b>{{ self::username(user=user) }}</b>
{{ self::online_indicator(user=user) }}
</div>
</div>
</a>
@ -522,25 +526,25 @@ user %} {% if user.settings.theme_hue %}
{% endif %}
<!-- prettier-ignore -->
<div style="display: none;">
{{ components::theme_color(color=user.settings.theme_color_surface, css="color-surface") }}
{{ components::theme_color(color=user.settings.theme_color_text, css="color-text") }}
{{ components::theme_color(color=user.settings.theme_color_text_link, css="color-link") }}
{{ self::theme_color(color=user.settings.theme_color_surface, css="color-surface") }}
{{ self::theme_color(color=user.settings.theme_color_text, css="color-text") }}
{{ self::theme_color(color=user.settings.theme_color_text_link, css="color-link") }}
{{ components::theme_color(color=user.settings.theme_color_lowered, css="color-lowered") }}
{{ components::theme_color(color=user.settings.theme_color_text_lowered, css="color-text-lowered") }}
{{ components::theme_color(color=user.settings.theme_color_super_lowered, css="color-super-lowered") }}
{{ self::theme_color(color=user.settings.theme_color_lowered, css="color-lowered") }}
{{ self::theme_color(color=user.settings.theme_color_text_lowered, css="color-text-lowered") }}
{{ self::theme_color(color=user.settings.theme_color_super_lowered, css="color-super-lowered") }}
{{ components::theme_color(color=user.settings.theme_color_raised, css="color-raised") }}
{{ components::theme_color(color=user.settings.theme_color_text_raised, css="color-text-raised") }}
{{ components::theme_color(color=user.settings.theme_color_super_raised, css="color-super-raised") }}
{{ self::theme_color(color=user.settings.theme_color_raised, css="color-raised") }}
{{ self::theme_color(color=user.settings.theme_color_text_raised, css="color-text-raised") }}
{{ self::theme_color(color=user.settings.theme_color_super_raised, css="color-super-raised") }}
{{ components::theme_color(color=user.settings.theme_color_primary, css="color-primary") }}
{{ components::theme_color(color=user.settings.theme_color_text_primary, css="color-text-primary") }}
{{ components::theme_color(color=user.settings.theme_color_primary_lowered, css="color-primary-lowered") }}
{{ self::theme_color(color=user.settings.theme_color_primary, css="color-primary") }}
{{ self::theme_color(color=user.settings.theme_color_text_primary, css="color-text-primary") }}
{{ self::theme_color(color=user.settings.theme_color_primary_lowered, css="color-primary-lowered") }}
{{ components::theme_color(color=user.settings.theme_color_secondary, css="color-secondary") }}
{{ components::theme_color(color=user.settings.theme_color_text_secondary, css="color-text-secondary") }}
{{ components::theme_color(color=user.settings.theme_color_secondary_lowered, css="color-secondary-lowered") }}
{{ self::theme_color(color=user.settings.theme_color_secondary, css="color-secondary") }}
{{ self::theme_color(color=user.settings.theme_color_text_secondary, css="color-text-secondary") }}
{{ self::theme_color(color=user.settings.theme_color_secondary_lowered, css="color-secondary-lowered") }}
{% if user.permissions|has_supporter %}
<style>{{ user.settings.theme_custom_css }}</style>
@ -609,12 +613,12 @@ show_community=true, secondary=false) -%}
loading="lazy"
style="--size: 52px"
/>
{% else %} {{ components::avatar(username=owner.username,
{% else %} {{ self::avatar(username=owner.username,
selector_type="username", size="52px") }} {% endif %}
</span>
{% else %}
<a href="/@{{ owner.username }}">
{{ components::avatar(username=owner.username, selector_type="username",
{{ self::avatar(username=owner.username, selector_type="username",
size="52px") }}
</a>
{% endif %}
@ -639,7 +643,7 @@ show_community=true, secondary=false) -%}
<b>anonymous</b>
{% endif %}
{% else %}
{{ components::full_username(user=owner) }}
{{ self::full_username(user=owner) }}
{% endif %}
</span>
@ -666,8 +670,7 @@ show_community=true, secondary=false) -%}
href="/api/v1/communities/find/{{ question.community }}"
class="flex items-center"
>
{{ components::community_avatar(id=question.community,
size="24px") }}
{{ self::community_avatar(id=question.community, size="24px") }}
</a>
{% endif %} {% if question.is_global %}
<a class="notification chip" href="/question/{{ question.id }}"
@ -751,7 +754,7 @@ header="", is_global=false) -%}
{%- endmacro %} {% macro global_question(question, can_manage_questions=false,
secondary=false, show_community=true) -%}
<div class="card-nest">
{{ components::question(question=question[0], owner=question[1],
{{ self::question(question=question[0], owner=question[1],
show_community=show_community) }}
<div
@ -762,7 +765,7 @@ secondary=false, show_community=true) -%}
hook="check_reactions"
hook-arg:id="{{ question[0].id }}"
>
{{ components::likes(id=question[0].id, asset_type="Question",
{{ self::likes(id=question[0].id, asset_type="Question",
likes=question[0].likes, dislikes=question[0].dislikes,
secondary=false) }}
</div>
@ -895,4 +898,64 @@ if state and state.data %}
</div>
</div>
</div>
{% endif %} {%- endmacro %}
{% endif %} {%- endmacro %} {% macro connection_icon(key) -%}
<!-- prettier-ignore -->
<div style="display: contents;">
{% if key == "Spotify" %}
{{ icon "spotify" }}
{% elif key == "LastFm" %}
{{ icon "last_fm" }}
{% endif %}
</div>
{%- endmacro %} {% macro connection_url(key, value) -%} {% if value[0].data.url
%} {{ value[0].data.url }} {% elif key == "LastFm" %} https://last.fm/user/{{
value[0].data.name }} {% endif %} {%- endmacro %} {% macro message(user,
message, can_manage_message=false) -%}
<div class="card secondary message flex gap-2" id="message-{{ message.id }}">
<a href="/@{{ user.username }}" target="_top">
{{ self::avatar(username=user.username, size="52px") }}
</a>
<div class="flex flex-col gap-1 w-full">
<div class="flex gap-2 w-full justify-between">
<div class="flex gap-2">
{{ self::full_username(user=user) }} {% if message.edited !=
message.created %}
<span class="date"
>{{ message.edited }}<sup title="Edited">*</sup></span
>
{% else %}
<span class="date">{{ message.created }}</span>
{% endif %}
</div>
<div class="flex gap-2 hidden">
{% if can_manage_message or (user and user.id == message.owner)
%}
<div class="dropdown">
<button
class="camo small"
onclick="trigger('atto::hooks::dropdown', [event])"
exclude="dropdown"
>
{{ icon "ellipsis" }}
</button>
<div class="inner">
<button
class="red"
onclick="delete_message('{{ message.id }}')"
>
{{ icon "trash" }}
<span>{{ text "general:action.delete" }}</span>
</button>
</div>
</div>
{% endif %}
</div>
</div>
<span class="no_p_margin">{{ message.content|markdown|safe }}</span>
</div>
</div>
{%- endmacro %}

8
crates/app/src/public/html/macros.html
View file

@ -38,6 +38,14 @@
{{ icon "square-pen" }}
</a>
<a
href="/chats/0/0"
class="button {% if selected == 'chats' %}active{% endif %}"
title="Chats"
>
{{ icon "message-circle" }}
</a>
<a
href="/requests"
class="button {% if selected == 'requests' %}active{% endif %}"

52
crates/app/src/public/html/profile/base.html
View file

@ -192,6 +192,15 @@
{{ icon "shield-off" }}
<span>{{ text "auth:action.unblock" }}</span>
</button>
{% endif %} {% if not user.settings.private_chats or
is_following_you %}
<button
onclick="create_group_chat()"
class="quaternary"
>
{{ icon "message-circle" }}
<span>{{ text "auth:action.message" }}</span>
</button>
{% endif %} {% if is_helper %}
<a
href="/mod_panel/profile/{{ profile.id }}"
@ -203,6 +212,30 @@
{% endif %}
<script>
globalThis.create_group_chat = async () => {
fetch("/api/v1/channels/group", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
title: "{{ user.username }} & {{ profile.username }}",
members: ["{{ profile.id }}"],
}),
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
if (res.ok) {
window.location.href = `/chats/0/${res.payload}`;
}
});
};
globalThis.toggle_follow_user = async (e) => {
await trigger("atto::debounce", [
"users::follow",
@ -295,6 +328,25 @@
</div>
</div>
{% endif %}
<div class="flex flex-col gap-2" id="connections">
{% for key, value in profile.connections %} {% if
value[0].data.name and value[0].show_on_profile %}
<a
class="card small flush flex items-center justify-between gap-2"
href="{{ components::connection_url(key=key, value=value) }}"
>
<div class="flex items-center gap-2">
{{ components::connection_icon(key=key) }}
<b>{{ value[0].data.name }}</b>
</div>
<button class="camo small">
{{ icon "external-link" }}
</button>
</a>
{% endif %} {% endfor %}
</div>
</div>
<div class="rhs w-full flex flex-col gap-4">

38
crates/app/src/public/html/profile/settings.html
View file

@ -530,22 +530,40 @@
{% for key, value in profile.connections %}
<div class="card-nest">
<div class="card small flex items-center gap-2">
{% if key == "Spotify" %} {{ icon "spotify" }} {% elif key ==
"LastFm" %} {{ icon "last_fm" }} {% endif %}
{{ components::connection_icon(key=key) }}
<b>
{% if value[0].data.name %} {{ value[0].data.name }} {% else
%} {{ key }} {% endif %}
<!-- prettier-ignore -->
<b class="flex items-center gap-2">
{% if value[0].data.name %}
<span>{{ value[0].data.name }}</span>
<span style="display: contents;" title="Verified connection">{{ icon "badge-check" }}</span>
{% else %}
<span>{{ key }}</span>
<span style="display: contents;">{{ icon "badge-alert" }}</span>
{% endif %}
</b>
</div>
<div class="card flex items-center gap-2">
<div class="card flex flex-col gap-2">
<button
class="quaternary red small"
onclick="trigger('connections::delete', ['{{ key }}'])"
>
{{ text "general:action.delete" }}
</button>
<label for="{{ key }}-shown" class="flex items-center gap-2">
<input
type="checkbox"
<!-- prettier-ignore -->
{% if value[0].show_on_profile %}checked{% endif %}
id="{{ key }}-shown"
onchange="trigger('connections::push_con_shown', ['{{ key }}', event.target.checked])"
class="w-content"
/>
<span>Shown on profile</span>
</label>
</div>
</div>
{% endfor %}
@ -911,6 +929,14 @@
"{{ profile.settings.private_profile }}",
"checkbox",
],
[
[
"private_chats",
"Only allow users I'm following to add me to chats",
],
"{{ profile.settings.private_chats }}",
"checkbox",
],
[
[
"private_communities",

8
crates/app/src/public/html/root.html
View file

@ -125,6 +125,14 @@ macros -%}
<script data-turbo-permanent="true" id="update-seen-script">
document.documentElement.addEventListener("turbo:load", () => {
trigger("me::seen");
if (!window.location.pathname.startsWith("/chats/")) {
if (window.socket) {
window.socket.send("Close");
window.socket = undefined;
console.log("socket disconnect");
}
}
});
</script>
{% endif %}

43
crates/app/src/public/js/me.js
View file

@ -364,18 +364,23 @@
});
self.define("push_con_shown", async (_, connection, shown) => {
return await (
await fetch("/api/v1/auth/user/connections/_shown", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
connection,
shown,
}),
})
).json();
fetch("/api/v1/auth/user/connections/_shown", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
connection,
shown,
}),
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
});
});
})();
@ -665,14 +670,9 @@
]);
}
const mb_info = await $.pull_track_info(
playing.artist.name,
playing.name,
);
if (
window.localStorage.getItem("atto:connections.last_fm/name") ===
playing.name + mb_info.id
playing.name
) {
// item already pushed to connection, no need right now
return;
@ -680,7 +680,12 @@
window.localStorage.setItem(
"atto:connections.last_fm/name",
playing.name + mb_info.id,
playing.name,
);
const mb_info = await $.pull_track_info(
playing.artist.name,
playing.name,
);
return await trigger("connections::push_con_state", [