t/tawny
1
0
Fork 0
generated from t/malachite
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: user profiles and junk

Browse source
This commit is contained in:
trisua 2025-09-01 20:17:32 -04:00
parent 6b8c33d27f
commit 2bd23f8214
28 changed files with 1139 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

40
app/public/app.js
View file

@ -36,6 +36,10 @@ function media_theme_pref() {
}
globalThis.temporary_set_theme = (theme) => {
if (theme === "Auto") {
return;
}
document.documentElement.className = theme.toLowerCase();
if (theme === "Light") {
@ -206,3 +210,39 @@ globalThis.submitter_load = (submitter) => {
},
};
};
// users search
let search_users_timeout;
function search_users(e) {
if (search_users_timeout) {
clearTimeout(search_users_timeout);
}
if (e.target.value.trim().length === 0) {
return;
}
search_users_timeout = setTimeout(() => {
fetch("/api/v1/auth/users/search", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
prefix: e.target.value.trim(),
}),
})
.then((res) => res.json())
.then((res) => {
if (res.ok) {
document.getElementById("users_search").innerHTML = "";
for (const username of res.payload) {
document.getElementById("users_search").innerHTML +=
`<option value="${username}">${username}</option>`;
}
} else {
show_message(res.message, res.ok);
}
});
}, 1000);
}

134
app/public/messages.js
View file

@ -102,6 +102,10 @@ function sock_con() {
if (document.getElementById(`message_${msg.body}`)) {
document.getElementById(`message_${msg.body}`).remove();
}
} else if (msg.method === "MessageUpdate") {
const [id, content] = JSON.parse(msg.body);
document.getElementById(`${id}_body`).innerHTML =
await render_markdown(content);
} else if (msg.method === "ReadReceipt") {
setTimeout(() => {
read_receipt();
@ -179,3 +183,133 @@ function delete_message(id) {
}
});
}
async function render_markdown(content) {
return await (
await fetch("/api/v1/markdown", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ content }),
})
).text();
}
function edit_message_ui(id) {
document.getElementById(`${id}_body`).classList.add("hidden");
document.getElementById(`${id}_edit_area`).classList.remove("hidden");
}
function edit_message(id, e) {
e.preventDefault();
fetch(`/api/v1/messages/${id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
content: e.target.content.value,
}),
})
.then((res) => res.json())
.then(async (res) => {
if (!res.ok) {
show_message(res.message, res.ok);
} else {
document
.getElementById(`${id}_body`)
.classList.remove("hidden");
document
.getElementById(`${id}_edit_area`)
.classList.add("hidden");
}
});
}
function leave_chat(id) {
if (!confirm("Are you sure you would like to do this?")) {
return;
}
fetch(`/api/v1/chats/${id}/leave`, {
method: "POST",
})
.then((res) => res.json())
.then((res) => {
show_message(res.message, res.ok);
});
}
function add_member_to_chat(e, chat_id) {
e.preventDefault();
document.getElementById("add_user_dialog").close();
fetch(`/api/v1/chats/${chat_id}/members/add/${e.target.username.value}`, {
method: "POST",
})
.then((res) => res.json())
.then((res) => {
show_message(res.message, res.ok);
});
}
function update_chat_info(id, info) {
fetch(`/api/v1/chats/${id}/info`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
info,
}),
})
.then((res) => res.json())
.then((res) => {
show_message(res.message, res.ok);
});
}
function rename_chat(id, info) {
const new_name = prompt("New name:");
if (!new_name) {
return;
}
info.name = new_name;
update_chat_info(id, info);
}
function remove_member_from_chat(chat_id, uid) {
if (!confirm("Are you sure you would like to do this?")) {
return;
}
fetch(`/api/v1/chats/${chat_id}/members/remove/${uid}`, {
method: "POST",
})
.then((res) => res.json())
.then((res) => {
show_message(res.message, res.ok);
});
}
function create_direct_chat_with_user(id) {
fetch(`/api/v1/chats`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
style: "Direct",
members: [id],
}),
})
.then((res) => res.json())
.then((res) => {
if (!res.ok) {
show_message(res.message, res.ok);
} else {
window.location.href = `/chats/${res.payload}`;
}
});
}

68
app/public/style.css
View file

@ -1,12 +1,18 @@
@import url("https://repodelivery.tetratto.com/tetratto-aux/lexend.css");
:root {
color-scheme: light dark;
--color-super-lowered: oklch(87.1% 0.006 286.286);
--color-lowered: oklch(96.7% 0.001 286.375);
--color-surface: oklch(92.9% 0.013 255.508);
--color-raised: oklch(98.4% 0.003 247.858);
--color-super-raised: oklch(96.8% 0.007 247.896);
--color-text: hsl(0, 0%, 5%);
--hue: 16;
--sat: 6%;
--lit: 0%;
--color-surface: hsl(var(--hue), var(--sat), calc(90% - var(--lit)));
--color-lowered: hsl(var(--hue), var(--sat), calc(86% - var(--lit)));
--color-raised: hsl(var(--hue), var(--sat), calc(96% - var(--lit)));
--color-super-lowered: hsl(var(--hue), var(--sat), calc(82% - var(--lit)));
--color-super-raised: hsl(var(--hue), var(--sat), calc(99% - var(--lit)));
--color-text: hsl(0, 0%, 9%);
--color-text-raised: var(--color-text);
--color-text-lowered: var(--color-text);
--color-link: #2949b2;
--color-shadow: rgba(0, 0, 0, 0.08);
@ -30,7 +36,7 @@
--pad-3: 0.5rem;
--pad-4: 1rem;
--radius: 0.2rem;
--radius: 6px;
--nav-height: 36px;
}
@ -43,12 +49,15 @@
.dark,
.dark * {
--color-super-lowered: var(--color-super-raised);
--color-lowered: var(--color-raised);
--color-surface: oklch(21% 0.006 285.885);
--color-raised: oklch(27.4% 0.006 286.033);
--color-super-raised: oklch(37% 0.013 285.805);
--color-text: hsl(0, 0%, 95%);
--hue: 266;
--sat: 14%;
--lit: 12%;
--color-surface: hsl(var(--hue), var(--sat), calc(0% + var(--lit)));
--color-lowered: hsl(var(--hue), var(--sat), calc(6% + var(--lit)));
--color-raised: hsl(var(--hue), var(--sat), calc(2% + var(--lit)));
--color-super-lowered: hsl(var(--hue), var(--sat), calc(12% + var(--lit)));
--color-super-raised: hsl(var(--hue), var(--sat), calc(4% + var(--lit)));
--color-text: hsl(0, 0%, 91%);
--color-link: #93c5fd;
--color-red: hsl(0, 94%, 82%);
@ -66,6 +75,7 @@ body {
line-height: 1.5;
letter-spacing: 0.15px;
font-family:
"Lexend",
"Inter",
"Poppins",
"Roboto",
@ -212,6 +222,10 @@ video {
background: var(--color-surface);
}
.card .card {
border-radius: var(--radius);
}
/* button */
.button {
--h: 36px;
@ -235,6 +249,10 @@ video {
overflow: hidden;
}
.button:not(nav *, .tab, .dropdown .inner *, .square) {
border-radius: var(--radius);
}
.button:disabled {
opacity: 50%;
cursor: not-allowed;
@ -303,6 +321,15 @@ video {
background: var(--color-primary-lowered) !important;
}
.button.big {
--h: 48px;
width: 100%;
}
.button.icon_only {
width: var(--h);
}
/* dropdown */
.dropdown {
position: relative;
@ -380,6 +407,8 @@ select {
line-height: var(--h);
border-left: solid 0px transparent;
width: 100%;
resize: vertical;
border-radius: var(--radius);
}
input:not([type="checkbox"]):focus {
@ -570,6 +599,10 @@ h6 {
width: -moz-max-content;
position: relative;
max-width: 100%;
& * {
font-size: inherit;
}
}
h1 {
@ -714,6 +747,7 @@ dialog {
margin: auto;
padding: var(--pad-4);
border: 0;
border-radius: var(--radius);
}
dialog .inner {
@ -765,9 +799,15 @@ menu.col {
padding: var(--pad-2) var(--pad-3);
background: var(--color-surface);
color: var(--color-text);
border-radius: var(--radius);
}
.message.mine .body {
background: var(--color-primary);
color: var(--color-text-primary);
border-bottom-right-radius: 0;
}
.message:not(.mine) .body {
border-bottom-left-radius: 0;
}

11
app/templates_src/chat.lisp
View file

@ -1,6 +1,6 @@
(text "{% extends \"root.lisp\" %} {% block head %}")
(title
(text "{{ components::chat_name(chat=chat, members=members) }} - {{ name }}"))
(text "{{ components::chat_name(chat=chat, members=members) }} — {{ config.name }}"))
(text "{% endblock %} {% block body %}")
(div
("class" "flex w_full gap_2 justify_between items_center")
@ -9,11 +9,16 @@
(a
("class" "button tab camo")
("href" "/chats")
(text "chats"))
(text "chats")
(text "{% if user.missed_messages_count > 0 -%}") (b (text "({{ user.missed_messages_count }})")) (text "{%- endif %}"))
(a
("class" "button tab")
("href" "/chats/{{ chat.id }}")
(text "{{ components::chat_name(chat=chat, members=members, advanced=true, avatar_size=\"18px\") }}"))))
(text "{{ components::chat_name(chat=chat, members=members, advanced=true, avatar_size=\"18px\") }}"))
(a
("class" "button tab camo")
("href" "/chats/{{ chat.id }}/manage")
(text "{{ icon \"settings-2\" }} Manage"))))
(div
("class" "flex flex_col card_nest reverse")
("style" "flex: 1 0 auto")

70
app/templates_src/chats.lisp
View file

@ -1,6 +1,6 @@
(text "{% extends \"root.lisp\" %} {% block head %}")
(title
(text "My chats - {{ name }}"))
(text "My chats — {{ config.name }}"))
(text "{% endblock %} {% block body %}")
(div
("class" "flex w_full gap_2 justify_between items_center")
@ -9,9 +9,10 @@
(a
("class" "button tab")
("href" "/chats")
(text "chats")))
(text "chats")
(text "{% if user.missed_messages_count > 0 -%}") (b (text "({{ user.missed_messages_count }})")) (text "{%- endif %}")))
(button
("class" "button")
("class" "button square")
("title" "Create chat")
("onclick" "document.getElementById('create_dialog').showModal()")
(text "{{ icon \"plus\" }}")))
@ -21,7 +22,7 @@
(div
("class" "card surface w_full flex justify_between items_center gap_2")
(a
("class" "flex gap_ch items_center")
("class" "flush flex gap_ch items_center {% if not user.id in chat[0].last_message_read_by -%} yellow {%- endif %}")
("href" "/chats/{{ chat[0].id }}")
(text "{{ components::chat_name(chat=chat[0], members=chat[1], advanced=true) }}"))
(div
@ -29,7 +30,7 @@
(button
("onclick" "open_dropdown(event)")
("exclude" "dropdown")
("class" "button")
("class" "button icon_only big_icon")
(text "{{ icon \"ellipsis\" }}"))
(div
("class" "inner")
@ -39,13 +40,10 @@
("target" "_blank")
(text "pop open"))
(text "{% if chat[0].style != \"Direct\" -%}")
; group chat only
(button
(a
("class" "button")
("onclick" "rename_gc('{{ chat[0].id }}')")
(text "rename"))
(text "{%- endif %}")
("href" "/chats/{{ chat[0].id }}/manage")
(text "manage"))
(button
("class" "button red")
@ -165,53 +163,7 @@
e.target.reset();
}
});
}
let search_users_timeout;
function search_users(e) {
if (search_users_timeout) {
clearTimeout(search_users_timeout);
}
if (e.target.value.trim().length === 0) {
return;
}
search_users_timeout = setTimeout(() => {
fetch(\"/api/v1/auth/users/search\", {
method: \"POST\",
headers: {
\"Content-Type\": \"application/json\",
},
body: JSON.stringify({
prefix: e.target.value.trim(),
}),
})
.then((res) => res.json())
.then((res) => {
if (res.ok) {
document.getElementById(\"users_search\").innerHTML = \"\";
for (const username of res.payload) {
document.getElementById(\"users_search\").innerHTML += `<option value=\"${username}\">${username}</option>`;
}
} else {
show_message(res.message, res.ok);
}
});
}, 1000);
}
function leave_chat(id) {
if (!confirm(\"Are you sure you would like to do this?\")) {
return;
}
fetch(`/api/v1/chats/${id}/leave`, {
method: \"POST\",
})
.then((res) => res.json())
.then((res) => {
show_message(res.message, res.ok);
});
}"))
(script ("src" "/public/messages.js"))
(text "{% endblock %}")

55
app/templates_src/components.lisp
View file

@ -55,6 +55,10 @@
(text "{{ icon \"ellipsis\" }}"))
(div
("class" "inner surface")
(button
("class" "button surface")
("onclick" "edit_message_ui('{{ message.id }}')")
(text "edit"))
(button
("class" "button surface red")
("onclick" "delete_message('{{ message.id }}')")
@ -63,6 +67,55 @@
(div
("class" "body no_p_margin")
("id" "{{ message.id }}_body")
(text "{{ message.content|markdown|safe }}"))
(text "{{ self::avatar(id=message.owner) }}"))
(form
("class" "body hidden flex flex_row gap_ch")
("id" "{{ message.id }}_edit_area")
("onsubmit" "edit_message('{{ message.id }}', event)")
(textarea
("name" "content")
("required")
(text "{{ message.content|safe }}"))
(button
("title" "Save")
("class" "button")
(text "{{ icon \"check\" }}")))
(a
("href" "/@{{ message.owner }}?redirect=true")
("target" "_blank")
(text "{{ self::avatar(id=message.owner) }}")))
(text "{%- endmacro %}")
(text "{% macro theme(user, theme_preference) -%} {% if user %} {% if user.settings.theme_hue -%}")
(style
(text ":root, * {
--hue: {{ user.settings.theme_hue }} !important;
}"))
(text "{%- endif %} {% if user.settings.theme_sat -%}")
(style
(text ":root, * {
--sat: {{ user.settings.theme_sat }} !important;
}"))
(text "{%- endif %} {% if user.settings.theme_lit -%}")
(style
(text ":root, * {
--lit: {{ user.settings.theme_lit }} !important;
}"))
(text "{%- endif %}")
(div
("style" "display: none;")
(text "{{ 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\") }} {{ 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\") }} {{ 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\") }} {{ 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\") }} {{ 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
(text "{{ user.settings.theme_custom_css|remove_script_tags|safe }}"))
(text "{%- endif %}"))
(text "{%- endif %} {%- endmacro %} {% macro theme_color(color, css) -%} {% if color -%}")
(style
(text ":root,
* {
--{{ css }}: {{ color|color }} !important;
}"))
(text "{%- endif %} {%- endmacro %}")

28
app/templates_src/confirm_dm.lisp Normal file
View file

@ -0,0 +1,28 @@
(text "{% extends \"root.lisp\" %} {% block head %}")
(title
(text "Message {{ profile.username }}? — {{ config.name }}"))
(text "{% endblock %} {% block body %}")
(div
("class" "card flex flex_col gap_ch")
(p (text "Are you sure you would like to direct message ") (a ("href" "/@{{ profile.username }}") (text "{{ profile.username }}")) (text "?"))
(div
("class" "flex gap_2")
(text "{% if user -%}")
(button
("class" "button surface green")
("onclick" "create_direct_chat_with_user('{{ profile.username }}')")
(text "{{ icon \"arrow-right\" }} Continue"))
(text "{% else %}")
(a
("class" "button surface green")
("href" "/login?redirect=/@{{ profile.username }}/confirm_dm")
(text "{{ icon \"arrow-right\" }} Sign in to message"))
(text "{%- endif %}")
(a
("class" "button surface red")
("href" "/")
(text "{{ icon \"x\" }} Cancel"))))
(script ("src" "/public/messages.js"))
(text "{% endblock %}")

2
app/templates_src/error.lisp
View file

@ -1,6 +1,6 @@
(text "{% extends \"root.lisp\" %} {% block head %}")
(title
(text "Error - {{ name }}"))
(text "Error — {{ config.name }}"))
(link ("rel" "icon") ("href" "/public/favicon.svg"))
(text "{% endblock %} {% block body %}")
(div

9
app/templates_src/index.lisp
View file

@ -1,8 +1,11 @@
(text "{% extends \"root.lisp\" %} {% block head %}")
(title
(text "{{ name }}"))
(text "{% if user -%}")
(meta ("http-equiv" "refresh") ("content" "0; /chats"))
(text "{% else %}")
(meta ("http-equiv" "refresh") ("content" "0; {{ config.service_hosts.tetratto|safe }}"))
(text "{%- endif %}")
(text "{% endblock %} {% block body %}")
(div
("class" "card")
(h1 (text "{{ name }}")))
(a ("href" "{{ config.service_hosts.tetratto }}") (text "Sending you elsewhere...")))
(text "{% endblock %}")

11
app/templates_src/login.lisp
View file

@ -1,10 +1,10 @@
(text "{% extends \"root.lisp\" %} {% block head %}")
(title
(text "Login — {{ name }}"))
(text "Login — {{ config.name }}"))
(text "{% endblock %} {% block body %}")
(div
("class" "card container small")
(h4 (text "Login with Tetratto"))
(h4 ("class" "text_center w_full") (text "Log in with Tetratto"))
(form
("class" "flex flex_col gap_4")
@ -63,6 +63,7 @@
document.getElementById(`flow_${flow_page}`).style.display = \"contents\";
}
const search = new URLSearchParams(window.location.search);
async function login(e) {
e.preventDefault();
@ -101,7 +102,11 @@
// redirect
setTimeout(() => {
window.location.href = \"/chats\";
if (search.get(\"redirect\") && (search.get(\"redirect\").startsWith(window.location.origin) || search.get(\"redirect\").startsWith(\"/\"))) {
window.location.href = search.get(\"redirect\");
} else {
window.location.href = \"/chats\";
}
}, 150);
}
});

117
app/templates_src/manage.lisp Normal file
View file

@ -0,0 +1,117 @@
(text "{% extends \"root.lisp\" %} {% block head %}")
(title
(text "Manage {{ components::chat_name(chat=chat, members=members) }} — {{ config.name }}"))
(text "{% endblock %} {% block body %}")
(div
("class" "flex w_full gap_2 justify_between items_center")
(div
("class" "tabs short bar flex")
(a
("class" "button tab camo")
("href" "/chats")
(text "chats"))
(a
("class" "button tab camo")
("href" "/chats/{{ chat.id }}")
(text "{{ components::chat_name(chat=chat, members=members, advanced=true, avatar_size=\"18px\") }}"))
(a
("class" "button tab")
("href" "/chats/{{ chat.id }}/manage")
(text "{{ icon \"settings-2\" }} Manage"))))
(div
("class" "flex flex_col gap_4 card")
("style" "flex: 1 0 auto")
(text "{% if chat.style != \"Direct\" -%}")
; gc only
(button
("class" "button surface")
("onclick" "rename_chat('{{ chat.id }}', GC_INFO)")
(text "{{ icon \"pencil\" }} rename chat"))
(script
("type" "application/json")
("id" "gc_info")
(text "{{ chat.style.Group|json_encode() }}"))
(script
(text "globalThis.GC_INFO = JSON.parse(document.getElementById(\"gc_info\").innerHTML)"))
(text "{%- endif %}")
(ul
(li (b (text "Chat name: ")) (span (text "{{ components::chat_name(chat=chat, members=members) }}")))
(li (b (text "Chat created: ")) (span (text "{{ chat.created / 1000|int|date(format=\"%Y-%m-%d %H:%M\", timezone=\"Etc/UTC\") }} UTC")))
(li (b (text "Last message: ")) (span (text "{{ chat.last_message_created / 1000|int|date(format=\"%Y-%m-%d %H:%M\", timezone=\"Etc/UTC\") }} UTC")))
(li
(div
("class" "flex items_center gap_ch")
(b (text "Owner:"))
(a
("class" "flex items_center gap_1 yellow")
("href" "{{ config.service_hosts.tetratto }}/@{{ members[0].username }}")
(text "{{ icon \"crown\" }} {{ components::username(user=members[0]) }}")))))
(hr)
(div
("class" "flex w_full justify_between items_center gap_2")
(h4 (text "Members") ("style" "margin: 0"))
(div
("class" "flex gap_2")
(text "{% if chat.style != \"Direct\" -%}")
; gc only
(button ("class" "green button surface") ("onclick" "document.getElementById('add_user_dialog').showModal()") (text "add"))
(text "{%- endif %}")
(button ("class" "red button surface") ("onclick" "leave_chat('{{ chat.id }}')") (text "leave"))))
(div
("class" "flex flex_col gap_2")
(text "{% for member in members -%}")
(div
("class" "card surface w_full flex flex_col gap_ch")
(a
("class" "flush flex items_center gap_ch")
("href" "/@{{ member.username }}")
(text "{{ components::avatar(id=member.id) }}")
(text "{{ components::username(user=member) }}"))
(span (text "{% if member.settings.status|length > 0 -%} {{ member.settings.status|markdown|safe }} {%- else -%} No status {%- endif %}"))
(text "{% if is_owner -%}")
(button
("class" "red button")
("onclick" "remove_member_from_chat('{{ chat.id }}', '{{ member.id }}')")
(text "remove"))
(text "{%- endif %}"))
(text "{%- endfor %}")))
(dialog
("id" "add_user_dialog")
(form
("class" "inner")
("onsubmit" "add_member_to_chat(event, '{{ chat.id }}')")
(h2
("class" "text_center w_full")
(text "Add user"))
(input
("type" "text")
("list" "users_search")
("name" "username")
("id" "username")
("placeholder" "username")
("oninput" "search_users(event)"))
(hr ("class" "margin"))
(div
("class" "flex gap_2 justify_between")
(button
("onclick" "document.getElementById('add_user_dialog').close()")
("class" "button red")
("type" "button")
(text "Cancel"))
(button
("class" "button green")
(text "Add")))))
(datalist ("id" "users_search"))
(script ("src" "/public/messages.js"))
(text "{% endblock %}")

157
app/templates_src/profile.lisp Normal file
View file

@ -0,0 +1,157 @@
(text "{% extends \"root.lisp\" %} {% block head %}")
(title
(text "{{ profile.username }} — {{ config.name }}"))
(meta
("name" "og:title")
("content" "{{ profile.username }}"))
(meta
("name" "description")
("content" "Message @{{ profile.username }} on {{ config.name }}!"))
(meta
("name" "og:description")
("content" "Message @{{ profile.username }} on {{ config.name }}!"))
(meta
("property" "og:type")
("content" "profile"))
(meta
("property" "profile:username")
("content" "{{ profile.username }}"))
(meta
("name" "og:image")
("content" "{{ config.service_hosts.buckets|safe }}/avatars/{{ profile.id }}"))
(meta
("name" "twitter:image")
("content" "{{ config.service_hosts.buckets|safe }}/avatars/{{ profile.id }}"))
(meta
("name" "twitter:card")
("content" "summary"))
(meta
("name" "twitter:title")
("content" "{{ profile.username }}"))
(meta
("name" "twitter:description")
("content" "Message @{{ profile.username }} on {{ config.name }}!"))
(text "{% endblock %} {% block body %}")
(text "{% if not use_user_theme -%} {{ components::theme(user=profile, theme_preference=profile.settings.profile_theme) }} {%- endif %}")
(text "{% if profile.settings.profile_theme -%}")
(script
(text "setTimeout(() => {
temporary_set_theme(\"{{ profile.settings.profile_theme }}\");
}, 150);"))
(text "{%- endif %}")
(div
("class" "flex flex_col gap_ch justify_center items_center profile")
("style" "height: calc(100dvh - var(--nav-height))")
(div
("class" "card_nest w_full")
("style" "max-width: 25rem")
(div
("class" "card banner"))
(div
("class" "card flex flex_col gap_ch")
(text "{{ components::avatar(id=profile.id, size=\"160px\") }}")
(div
("class" "w_full flex items_center justify_between gap_2")
(h2 (text "{{ components::username(user=profile) }}"))
(button
("onclick" "document.getElementById('user_info').showModal()")
("class" "button icon_only big_icon")
("title" "User info")
(text "{{ icon \"info\" }}")))
(div (text "{{ profile.settings.biography|markdown|safe }}"))
; user links
(div
("class" "flex flex_col gap_2")
("style" "margin-top: 20px")
(text "{% for link in profile.settings.links -%}")
(a
("class" "button big surface justify_start")
("href" "{{ link[1] }}")
(text "{{ icon \"link\" }} {{ link[0] }}"))
(text "{%- endfor %}"))
; big action links
(div
("class" "flex flex_row gap_2")
(a
("class" "button big surface")
("href" "{{ config.service_hosts.tetratto }}/@{{ profile.username }}")
(text "{{ icon \"external-link\" }} Full profile"))
(text "{% if user -%} {% if profile.id != user.id -%}")
(button
("class" "button big surface")
("onclick" "create_direct_chat_with_user('{{ profile.username }}')")
(text "{{ icon \"message-circle\" }} Message"))
(text "{%- endif %} {% else %}")
(a
("class" "button big surface")
("href" "/login?redirect=/@{{ profile.username }}/confirm_dm")
(text "{{ icon \"message-circle\" }} Message"))
(text "{%- endif %}")))))
(dialog
("id" "user_info")
(div
("class" "inner")
(h2
("class" "text_center w_full")
(text "User info"))
(ul
(li (b (text "Username: ")) (text "{{ profile.username }}"))
(li (b (text "Joined: ")) (text "{{ profile.created / 1000|int|date(format=\"%Y-%m-%d %H:%M\", timezone=\"Etc/UTC\") }} UTC"))
(li (b (text "Followers: ")) (a ("href" "{{ config.service_hosts.tetratto }}/@{{ profile.username }}/followers") (text "{{ profile.follower_count }}")))
(li (b (text "Following: ")) (a ("href" "{{ config.service_hosts.tetratto }}/@{{ profile.username }}/following") (text "{{ profile.following_count }}")))
(li (b (text "Posts: ")) (a ("href" "{{ config.service_hosts.tetratto }}/@{{ profile.username }}") (text "{{ profile.post_count }}"))))
(hr ("class" "margin"))
(div
("class" "flex gap_2 justify_right")
(button
("onclick" "document.getElementById('user_info').close()")
("class" "button red")
("type" "button")
(text "Close")))))
(style
(text ".profile .avatar {
margin: -120px auto 0;
}
.profile .banner {
background: url(\"{{ config.service_hosts.buckets }}/banners/{{ profile.id }}\") no-repeat center !important;
background-size: cover !important;
border-radius: var(--radius) var(--radius) 0 0;
height: 225px;
}
.card_nest .card:nth-child(2) {
border-radius: 0 0 var(--radius) var(--radius);
}
.profile h2 {
margin: 0;
}
@media screen and (max-width: 900px) {
.card_nest .card {
border-radius: 0;
}
}"))
(script ("src" "/public/messages.js"))
(text "{% endblock %}")

27
app/templates_src/root.lisp
View file

@ -12,10 +12,10 @@
(meta ("name" "theme-color") ("content" "{{ theme_color }}"))
(meta ("property" "og:type") ("content" "website"))
(meta ("property" "og:site_name") ("content" "{{ name }}"))
(meta ("property" "og:site_name") ("content" "{{ config.name }}"))
(meta ("property" "og:title") ("content" "{{ name }}"))
(meta ("property" "twitter:title") ("content" "{{ name }}"))
(meta ("property" "og:title") ("content" "{{ config.name }}"))
(meta ("property" "twitter:title") ("content" "{{ config.name }}"))
(link ("rel" "icon") ("href" "/public/favicon.svg"))
(script ("src" "/public/app.js?v={{ build_code }}") ("defer"))
@ -24,6 +24,9 @@
(text "{% block head %}{% endblock %}"))
(body
("class" "{% if user and user.settings.use_system_font -%} use_system_font {%- endif %}")
(text "{% if user and use_user_theme -%} {{ components::theme(user=user, theme_preference=user.settings.theme_preference) }} {%- endif %}")
; nav
(nav
("class" "flex w_full justify_between gap_2")
@ -44,7 +47,7 @@
("class" "inner left")
(a
("class" "button")
("href" "/")
("href" "{% if user -%} /chats {%- else -%} / {%- endif %}")
(text "home"))
(a
("class" "button")
@ -61,10 +64,6 @@
("href" "{{ config.service_hosts.tetratto }}/auth/register")
(text "sign up"))
(text "{%- else -%}")
(a
("class" "button")
("href" "/chats")
(text "my chats"))
(a
("class" "button")
("href" "{{ config.service_hosts.tetratto }}/settings")
@ -74,7 +73,17 @@
("onclick" "user_logout()")
(text "logout"))
(text "{%- endif %}")
(text "{% block dropdown %}{% endblock %}"))))
(text "{% block dropdown %}{% endblock %}")))
(text "{% if user -%}")
(a
("href" "{{ config.service_hosts.tetratto }}/notifs")
("class" "button camo fade")
(text "{% if user.notification_count > 0 -%}")
(span ("class" "red") (text "{{ icon \"bell-dot\" }}"))
(text "{% else %}")
(text "{{ icon \"bell\" }}")
(text "{%- endif %}"))
(text "{%- endif %}"))
(div
("class" "side flex")