tim/autonomous.contact
1
0
Fork 0
forked from andyburke/autonomous.contact
Code Pull requests Activity

refactor: rooms => zones

Browse source
This commit is contained in:
Andy Burke 2025-09-09 15:32:07 -07:00
parent 525568d368
commit 20a5d1bc88
27 changed files with 2466 additions and 2044 deletions
Download patch file Download diff file Expand all files Collapse all files

69
public/tabs/chat/chat.css
View file

@ -3,12 +3,12 @@
grid-template-columns: auto 1fr;
}
.room-list {
.zone-list {
margin: 1rem 0;
list-style-type: none;
}
.room-list > li.room a:before {
.zone-list > li.zone a:before {
position: absolute;
left: -1.75rem;
top: 0;
@ -18,7 +18,7 @@
color: var(--text);
}
.room-list > li.room a {
.zone-list > li.zone a {
position: relative;
display: block;
width: 100%;
@ -30,7 +30,7 @@
text-decoration: none;
}
.room-list > li.room.active a {
.zone-list > li.zone.active a {
color: var(--accent);
}
@ -56,11 +56,11 @@
line-height: 2rem;
}
#chat #room-chat-container {
#chat #zone-chat-container {
position: relative;
}
#chat #room-chat-content {
#chat #zone-chat-content {
overflow-y: scroll;
position: absolute;
top: 0;
@ -70,7 +70,7 @@
padding: 0.5rem;
}
#chat #room-chat-entry-container {
#chat #zone-chat-entry-container {
position: absolute;
bottom: 0;
left: 0;
@ -79,7 +79,7 @@
padding: 1rem;
}
#chat #room-chat-entry-container form {
#chat #zone-chat-entry-container form {
position: absolute;
top: 0;
left: 0;
@ -90,13 +90,13 @@
padding: 0.75rem;
}
#chat #room-chat-entry-container form input[type="file"] {
#chat #zone-chat-entry-container form input[type="file"] {
opacity: 0;
display: none;
}
#chat #room-chat-entry-container form button,
#chat #room-chat-entry-container form label {
#chat #zone-chat-entry-container form button,
#chat #zone-chat-entry-container form label {
position: relative;
top: inherit;
font-size: inherit;
@ -110,7 +110,7 @@
border: 1px solid var(--text);
}
#chat #room-chat-entry-container form textarea {
#chat #zone-chat-entry-container form textarea {
width: 100%;
flex-grow: 1;
background: inherit;
@ -163,27 +163,43 @@
#chat .message-container .message-actions-container {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: none; /* flex; */
flex-direction: row;
top: 0.1rem;
right: 0.1rem;
display: flex;
flex-direction: row-reverse;
border: 1px solid;
border-color: rgba(0, 0, 0, 0);
border-radius: var(--border-radius);
color: rgb(from var(--text) r g b / 0.7);
z-index: 10;
}
#chat .message-container .message-actions-container:has(input[type="checkbox"]:checked) {
background: rgb(from var(--bg) r g b / 0.9);
border-color: var(--border-subtle);
z-index: 11;
}
#chat .message-container .message-actions-container .message-action {
border: none;
opacity: 0;
transition: 0.2s ease-in-out;
width: 0;
height: 4rem;
align-content: center;
height: 3.5rem;
overflow: hidden;
order: -1;
cursor: pointer;
margin-right: 1.25rem;
padding-top: 0.25rem;
margin-right: 0;
padding: 0.25rem 0 0 0;
text-align: center;
text-wrap: nowrap;
}
#chat .message-container .message-actions-container label {
cursor: pointer;
width: 2rem;
text-align: right;
padding-top: 0.5rem;
}
#chat .message-container .message-actions-container input[type="checkbox"] {
@ -197,7 +213,8 @@
input[type="checkbox"]:checked
~ .message-action {
opacity: 1;
width: 4rem;
width: 3.25rem;
margin-right: 1.25rem;
}
#chat .message-container .message-actions-container .message-action .action-name {
@ -356,7 +373,7 @@
rotate: 180deg;
}
#chat #room-chat-container {
#chat #zone-chat-container {
position: absolute;
top: 0;
left: 0;
@ -364,13 +381,13 @@
bottom: 0;
}
#chat #room-chat-container #room-chat-entry-container,
#chat #room-chat-container #room-chat-entry-container form {
#chat #zone-chat-container #zone-chat-entry-container,
#chat #zone-chat-container #zone-chat-entry-container form {
padding: 0.25rem;
}
#chat #room-chat-container #room-chat-entry-container form button,
#chat #room-chat-container #room-chat-entry-container form label {
#chat #zone-chat-container #zone-chat-entry-container form button,
#chat #zone-chat-container #zone-chat-entry-container form label {
margin: 0 0.5rem;
}

77
public/tabs/chat/chat.html
View file

@ -22,21 +22,21 @@
<label id="sidebar-toggle-icon" for="sidebar-toggle">
<div class="icon right"></div>
</label>
<div id="room-creation-container" data-requires-permission="rooms.create">
<div id="zone-creation-container" data-requires-permission="zones.create">
<button
id="toggle-room-creation-form-button"
id="toggle-zone-creation-form-button"
onclick="((event) => {
event.preventDefault();
const room_create_form = document.getElementById( 'room-create' );
room_create_form.style[ 'height' ] = room_create_form.style[ 'height' ] === '5rem' ? '0' : '5rem';
const zone_create_form = document.getElementById( 'zone-create' );
zone_create_form.style[ 'height' ] = zone_create_form.style[ 'height' ] === '5rem' ? '0' : '5rem';
})(event)"
>
<div class="icon plus"></div>
</button>
<form
id="room-create"
id="zone-create"
data-smart="true"
action="/api/rooms"
action="/api/zones"
method="POST"
style="
margin-top: 1rem;
@ -48,11 +48,11 @@
"
>
<input
id="new-room-name-input"
id="new-zone-name-input"
type="text"
name="name"
value=""
placeholder="new room"
placeholder="new zone"
/>
<!-- <button class="primary" type="submit">
<div class="icon plus"></div>
@ -61,34 +61,35 @@
<script>
{
const form = document.currentScript.closest("form");
const room_create_form = document.getElementById("room-create");
const new_room_name_input =
document.getElementById("new-room-name-input");
const zone_create_form = document.getElementById("zone-create");
const new_zone_name_input =
document.getElementById("new-zone-name-input");
form.on_reply = (new_room) => {
const room_list = document.getElementById("room-list");
room_list.insertAdjacentHTML(
form.on_reply = (new_zone) => {
const zone_list = document.getElementById("zone-list");
zone_list.insertAdjacentHTML(
"beforeend",
`<li id="room-selector-${new_room.id}" class="room"><a href="#/room/${new_room.id}">${new_room.name}</a></li>`,
`<li id="zone-selector-${new_zone.id}" class="zone"><a href="#/zone/${new_zone.id}">${new_zone.name}</a></li>`,
);
new_room_name_input.value = "";
window.location.hash = `/chat/room/${new_room.id}`;
room_create_form.style["height"] = "0";
new_zone_name_input.value = "";
window.location.hash = `/chat/zone/${new_zone.id}`;
zone_create_form.style["height"] = "0";
};
}
</script>
</form>
</div>
<div>
<span class="title">chat rooms</span>
<span class="title">chat zones</span>
</div>
<ul id="room-list" class="room-list"></ul>
<ul id="zone-list" class="zone-list"></ul>
</div>
<div id="room-chat-container">
<div id="room-chat-content"></div>
<div id="room-chat-entry-container">
<form id="room-chat-entry" action="" data-smart="true" data-method="POST">
<div id="zone-chat-container">
<div id="zone-chat-content"></div>
<div id="zone-chat-entry-container">
<form id="zone-chat-entry" action="" data-smart="true" data-method="POST">
<input id="parent-id" type="hidden" name="parent_id" value="" />
<input
id="file-upload-and-share-input"
aria-label="Upload and share file"
@ -100,12 +101,12 @@
<div class="icon attachment"></div>
</label>
<textarea
id="room-chat-input"
class="room-chat-input"
id="zone-chat-input"
class="zone-chat-input"
rows="1"
name="data.message"
></textarea>
<button id="room-chat-send" class="primary" aria-label="Send a message">
<button id="zone-chat-send" class="primary" aria-label="Send a message">
<i class="icon send"></i>
</button>
<script>
@ -114,10 +115,11 @@
const file_input = document.querySelector(
'input[name="file-upload-and-share"]',
);
const chat_input = document.getElementById("room-chat-input");
const room_chat_container =
document.getElementById("room-chat-container");
const room_chat_content = document.getElementById("room-chat-content");
const chat_input = document.getElementById("zone-chat-input");
const parent_id_input = document.getElementById("parent-id");
const zone_chat_container =
document.getElementById("zone-chat-container");
const zone_chat_content = document.getElementById("zone-chat-content");
let messages_in_flight = {};
@ -129,9 +131,9 @@
form.on_submit = async (event) => {
const user = JSON.parse(document.body.dataset.user);
const room_id = room_chat_container.dataset.room_id;
if (!room_id) {
alert("Failed to get room_id!");
const zone_id = zone_chat_container.dataset.zone_id;
if (!zone_id) {
alert("Failed to get zone_id!");
return false;
}
@ -169,7 +171,7 @@
return false;
}
form.action = `/api/rooms/${room_id}/events`;
form.action = `/api/zones/${zone_id}/events`;
};
form.on_parsed = (json) => {
@ -196,7 +198,7 @@
}
const user = JSON.parse(document.body.dataset.user);
render_text_event(room_chat_content, json, user);
render_text_event(zone_chat_content, json, user);
document
.getElementById(`chat-${temp_id}`)
?.classList.add("sending");
@ -213,7 +215,8 @@
.getElementById(`chat-${sent_message.meta?.temp_id ?? ""}`)
?.classList.remove("sending");
append_room_events([sent_message]);
append_zone_events([sent_message]);
parent_id_input.value = "";
chat_input.value = "";
chat_input.focus();
};

166
public/tabs/chat/chat.js
View file

@ -257,7 +257,7 @@ let time_tick_tock_class = "time-tock";
let last_creator_id = null;
let user_tick_tock_class = "user-tock";
function render_text_event(room_chat_content, event, creator, existing_element) {
function render_text_event(zone_chat_content, event, creator, existing_element) {
const event_datetime = datetime_to_local(event.timestamps.created);
if (event_datetime.value - last_event_datetime_value > time_tick_tock_timeout) {
@ -278,12 +278,14 @@ function render_text_event(room_chat_content, event, creator, existing_element)
id="show_message_actions-${message_id}"
class="message-actions-display-toggle"
/>
<label for="show_message_actions-${message_id}" class="message-actions-display-toggle-label"
><div class="icon more"></div>
<label class="message-actions-display-toggle-label" for="show_message_actions-${message_id}">
<div class="icon more-borderless"></div>
</label>
<div class="message-action" data-action="reply"><i class="icon reply"></i><span class="action-name">Reply</span></div>
<div class="message-action" data-action="forward_copy"><i class="icon forward-copy"></i><span class="action-name">Forward (Copy Link)</span></div>
<div class="message-action" data-action="delete"><i class="icon trash"></i><span class="action-name">Delete</span></div>
<button class="message-action" data-action="react"><i class="icon more-circle"></i><span class="action-name">React</span></button>
<button class="message-action" data-action="reply" onclick="document.getElementById( 'parent-id' ).value = '${message_id}';"><i class="icon reply"></i><span class="action-name">Reply</span></button>
<button class="message-action" data-action="forward_copy"><i class="icon forward-copy"></i><span class="action-name">Copy Link</span></button>
<button class="message-action" data-action="delete"><i class="icon trash"></i><span class="action-name">Delete</span></button>
</div>
<div class="info-container">
<div class="avatar-container">
@ -305,31 +307,31 @@ function render_text_event(room_chat_content, event, creator, existing_element)
template.innerHTML = html_content;
existing_element.replaceWith(template.content.firstChild);
} else {
room_chat_content.insertAdjacentHTML("beforeend", html_content);
zone_chat_content.insertAdjacentHTML("beforeend", html_content);
}
}
async function get_new_room_element() {
const existing_new_room_element = document.getElementById("new-room");
if (existing_new_room_element) {
return existing_new_room_element;
async function get_new_zone_element() {
const existing_new_zone_element = document.getElementById("new-zone");
if (existing_new_zone_element) {
return existing_new_zone_element;
}
const room_list = document.getElementById("room-list");
room_list.insertAdjacentHTML(
const zone_list = document.getElementById("zone-list");
zone_list.insertAdjacentHTML(
"beforeend",
`<li id="new-room" class="room"><a href="" contenteditable="true">new room</a></li>`,
`<li id="new-zone" class="zone"><a href="" contenteditable="true">new zone</a></li>`,
);
await new Promise((resolve) => setTimeout(resolve, 1));
const new_room_element = document.getElementById("new-room");
return new_room_element;
const new_zone_element = document.getElementById("new-zone");
return new_zone_element;
}
const users = {};
async function append_room_events(events) {
const room_chat_content = document.getElementById("room-chat-content");
let last_message_id = room_chat_content.dataset.last_message_id ?? "";
async function append_zone_events(events) {
const zone_chat_content = document.getElementById("zone-chat-content");
let last_message_id = zone_chat_content.dataset.last_message_id ?? "";
for (const event of events) {
// if the last message is undefined, it becomes this event, otherwise, if this event's id is newer,
// it becomes the latest message
@ -339,8 +341,8 @@ async function append_room_events(events) {
: last_message_id;
// if the last message has been updated, update the content's dataset to reflect that
if (last_message_id !== room_chat_content.dataset.last_message_id) {
room_chat_content.dataset.last_message_id = last_message_id;
if (last_message_id !== zone_chat_content.dataset.last_message_id) {
zone_chat_content.dataset.last_message_id = last_message_id;
}
users[event.creator_id] =
@ -352,37 +354,37 @@ async function append_room_events(events) {
(event.meta?.temp_id
? document.getElementById(`chat-${event.meta.temp_id}`)
: undefined);
render_text_event(room_chat_content, event, users[event.creator_id], existing_element);
render_text_event(zone_chat_content, event, users[event.creator_id], existing_element);
}
room_chat_content.scrollTop = room_chat_content.scrollHeight;
zone_chat_content.scrollTop = zone_chat_content.scrollHeight;
}
// TODO: we need some abortcontroller handling here or something
// similar for when we change rooms, this is the most basic
// similar for when we change zones, this is the most basic
// first pass outline
let room_polling_request_abort_controller = null;
let zone_polling_request_abort_controller = null;
async function poll_for_new_events() {
const room_chat_content = document.getElementById("room-chat-content");
const room_id = room_chat_content.dataset.room_id;
const last_message_id = room_chat_content.dataset.last_message_id;
const zone_chat_content = document.getElementById("zone-chat-content");
const zone_id = zone_chat_content.dataset.zone_id;
const last_message_id = zone_chat_content.dataset.last_message_id;
if (!room_id) {
if (!zone_id) {
return;
}
const message_polling_url = `/api/rooms/${room_id}/events?type=chat&limit=100&sort=newest&wait=true${last_message_id ? `&after_id=${last_message_id}` : ""}`;
const message_polling_url = `/api/zones/${zone_id}/events?type=chat&limit=100&sort=newest&wait=true${last_message_id ? `&after_id=${last_message_id}` : ""}`;
room_polling_request_abort_controller =
room_polling_request_abort_controller || new AbortController();
zone_polling_request_abort_controller =
zone_polling_request_abort_controller || new AbortController();
api.fetch(message_polling_url, {
signal: room_polling_request_abort_controller.signal,
signal: zone_polling_request_abort_controller.signal,
})
.then(async (new_events_response) => {
const new_events = ((await new_events_response.json()) ?? []).reverse();
await append_room_events(new_events.toReversed());
poll_for_new_events(room_id);
await append_zone_events(new_events.toReversed());
poll_for_new_events(zone_id);
})
.catch((error) => {
// TODO: poll again? back off?
@ -390,37 +392,37 @@ async function poll_for_new_events() {
});
}
async function load_room(room_id) {
const room_chat_content = document.getElementById("room-chat-content");
async function load_zone(zone_id) {
const zone_chat_content = document.getElementById("zone-chat-content");
if (room_polling_request_abort_controller) {
room_polling_request_abort_controller.abort();
room_polling_request_abort_controller = null;
delete room_chat_content.dataset.last_message_id;
if (zone_polling_request_abort_controller) {
zone_polling_request_abort_controller.abort();
zone_polling_request_abort_controller = null;
delete zone_chat_content.dataset.last_message_id;
}
const room_response = await api.fetch(`/api/rooms/${room_id}`);
if (!room_response.ok) {
const error = await room_response.json();
const zone_response = await api.fetch(`/api/zones/${zone_id}`);
if (!zone_response.ok) {
const error = await zone_response.json();
alert(error.message ?? JSON.stringify(error));
return;
}
const room = await room_response.json();
const zone = await zone_response.json();
room_chat_content.dataset.room_id = room.id;
room_chat_content.innerHTML = "";
zone_chat_content.dataset.zone_id = zone.id;
zone_chat_content.innerHTML = "";
const room_selectors = document.querySelectorAll("li.room");
for (const room_selector of room_selectors) {
room_selector.classList.remove("active");
if (room_selector.id === `room-selector-${room_id}`) {
room_selector.classList.add("active");
const zone_selectors = document.querySelectorAll("li.zone");
for (const zone_selector of zone_selectors) {
zone_selector.classList.remove("active");
if (zone_selector.id === `zone-selector-${zone_id}`) {
zone_selector.classList.add("active");
}
}
const events_response = await api.fetch(
`/api/rooms/${room_id}/events?type=chat&limit=100&sort=newest`,
`/api/zones/${zone_id}/events?type=chat&limit=100&sort=newest`,
);
if (!events_response.ok) {
const error = await events_response.json();
@ -430,36 +432,36 @@ async function load_room(room_id) {
const events = (await events_response.json()).reverse();
await append_room_events(events);
poll_for_new_events(room_id);
await append_zone_events(events);
poll_for_new_events(zone_id);
}
let last_room_update = undefined;
async function update_chat_rooms() {
let last_zone_update = undefined;
async function update_chat_zones() {
const now = new Date();
const time_since_last_update = now - (last_room_update ?? 0);
const time_since_last_update = now - (last_zone_update ?? 0);
if (time_since_last_update < 5_000) {
return;
}
const rooms_response = await api.fetch("/api/rooms");
if (rooms_response.ok) {
const room_list = document.getElementById("room-list");
room_list.innerHTML = "";
const rooms = await rooms_response.json();
for (const room of rooms) {
room_list.insertAdjacentHTML(
const zones_response = await api.fetch("/api/zones");
if (zones_response.ok) {
const zone_list = document.getElementById("zone-list");
zone_list.innerHTML = "";
const zones = await zones_response.json();
for (const zone of zones) {
zone_list.insertAdjacentHTML(
"beforeend",
`<li id="room-selector-${room.id}" class="room"><a href="#/chat/room/${room.id}">${room.name}</a></li>`,
`<li id="zone-selector-${zone.id}" class="zone"><a href="#/chat/zone/${zone.id}">${zone.name}</a></li>`,
);
}
last_room_update = now;
last_zone_update = now;
}
}
window.addEventListener("locationchange", update_chat_rooms);
window.addEventListener("locationchange", update_chat_zones);
function check_for_room_in_url() {
function check_for_zone_in_url() {
const user_json = document.body.dataset.user;
if (!user_json) {
return;
@ -471,28 +473,28 @@ function check_for_room_in_url() {
return;
}
const first_room_id = document.querySelector("li.room")?.id.substring(14);
const first_zone_id = document.querySelector("li.zone")?.id.substring(14);
// #/chat/room/{room_id}
// #/chat/zone/{zone_id}
// ^ 12
const room_id = hash.substring(12) || first_room_id;
const zone_id = hash.substring(12) || first_zone_id;
if (!room_id) {
setTimeout(check_for_room_in_url, 100);
if (!zone_id) {
setTimeout(check_for_zone_in_url, 100);
return;
}
const room_chat_container = document.getElementById("room-chat-container");
const zone_chat_container = document.getElementById("zone-chat-container");
if (room_chat_container.dataset.room_id !== room_id) {
window.location.hash = `/chat/room/${room_id}`;
room_chat_container.dataset.room_id = room_id;
load_room(room_id);
if (zone_chat_container.dataset.zone_id !== zone_id) {
window.location.hash = `/chat/zone/${zone_id}`;
zone_chat_container.dataset.zone_id = zone_id;
load_zone(zone_id);
}
}
window.addEventListener("locationchange", check_for_room_in_url);
window.addEventListener("locationchange", check_for_zone_in_url);
document.addEventListener("DOMContentLoaded", async () => {
await update_chat_rooms();
check_for_room_in_url();
await update_chat_zones();
check_for_zone_in_url();
});

3417
public/tabs/chat/emojis/en.js
View file

File diff suppressed because it is too large Load diff