generated from t/malachite
add: user profiles and junk
This commit is contained in:
parent
6b8c33d27f
commit
2bd23f8214
28 changed files with 1139 additions and 108 deletions
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue