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

refactor: zones => topics

Browse source
This commit is contained in:
Andy Burke 2025-09-10 12:51:27 -07:00
parent 20a5d1bc88
commit fac8f409f4
26 changed files with 470 additions and 469 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,12 +3,12 @@
grid-template-columns: auto 1fr;
}
.zone-list {
.topic-list {
margin: 1rem 0;
list-style-type: none;
}
.zone-list > li.zone a:before {
.topic-list > li.topic a:before {
position: absolute;
left: -1.75rem;
top: 0;
@ -18,7 +18,7 @@
color: var(--text);
}
.zone-list > li.zone a {
.topic-list > li.topic a {
position: relative;
display: block;
width: 100%;
@ -30,7 +30,7 @@
text-decoration: none;
}
.zone-list > li.zone.active a {
.topic-list > li.topic.active a {
color: var(--accent);
}
@ -56,11 +56,11 @@
line-height: 2rem;
}
#chat #zone-chat-container {
#chat #topic-chat-container {
position: relative;
}
#chat #zone-chat-content {
#chat #topic-chat-content {
overflow-y: scroll;
position: absolute;
top: 0;
@ -70,7 +70,7 @@
padding: 0.5rem;
}
#chat #zone-chat-entry-container {
#chat #topic-chat-entry-container {
position: absolute;
bottom: 0;
left: 0;
@ -79,7 +79,7 @@
padding: 1rem;
}
#chat #zone-chat-entry-container form {
#chat #topic-chat-entry-container form {
position: absolute;
top: 0;
left: 0;
@ -90,13 +90,13 @@
padding: 0.75rem;
}
#chat #zone-chat-entry-container form input[type="file"] {
#chat #topic-chat-entry-container form input[type="file"] {
opacity: 0;
display: none;
}
#chat #zone-chat-entry-container form button,
#chat #zone-chat-entry-container form label {
#chat #topic-chat-entry-container form button,
#chat #topic-chat-entry-container form label {
position: relative;
top: inherit;
font-size: inherit;
@ -110,7 +110,7 @@
border: 1px solid var(--text);
}
#chat #zone-chat-entry-container form textarea {
#chat #topic-chat-entry-container form textarea {
width: 100%;
flex-grow: 1;
background: inherit;
@ -373,7 +373,7 @@
rotate: 180deg;
}
#chat #zone-chat-container {
#chat #topic-chat-container {
position: absolute;
top: 0;
left: 0;
@ -381,13 +381,13 @@
bottom: 0;
}
#chat #zone-chat-container #zone-chat-entry-container,
#chat #zone-chat-container #zone-chat-entry-container form {
#chat #topic-chat-container #topic-chat-entry-container,
#chat #topic-chat-container #topic-chat-entry-container form {
padding: 0.25rem;
}
#chat #zone-chat-container #zone-chat-entry-container form button,
#chat #zone-chat-container #zone-chat-entry-container form label {
#chat #topic-chat-container #topic-chat-entry-container form button,
#chat #topic-chat-container #topic-chat-entry-container form label {
margin: 0 0.5rem;
}

75
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="zone-creation-container" data-requires-permission="zones.create">
<div id="topic-creation-container" data-requires-permission="topics.create">
<button
id="toggle-zone-creation-form-button"
id="toggle-topic-creation-form-button"
onclick="((event) => {
event.preventDefault();
const zone_create_form = document.getElementById( 'zone-create' );
zone_create_form.style[ 'height' ] = zone_create_form.style[ 'height' ] === '5rem' ? '0' : '5rem';
const topic_create_form = document.getElementById( 'topic-create' );
topic_create_form.style[ 'height' ] = topic_create_form.style[ 'height' ] === '5rem' ? '0' : '5rem';
})(event)"
>
<div class="icon plus"></div>
</button>
<form
id="zone-create"
id="topic-create"
data-smart="true"
action="/api/zones"
action="/api/topics"
method="POST"
style="
margin-top: 1rem;
@ -48,11 +48,11 @@
"
>
<input
id="new-zone-name-input"
id="new-topic-name-input"
type="text"
name="name"
value=""
placeholder="new zone"
placeholder="new topic"
/>
<!-- <button class="primary" type="submit">
<div class="icon plus"></div>
@ -61,34 +61,34 @@
<script>
{
const form = document.currentScript.closest("form");
const zone_create_form = document.getElementById("zone-create");
const new_zone_name_input =
document.getElementById("new-zone-name-input");
const topic_create_form = document.getElementById("topic-create");
const new_topic_name_input =
document.getElementById("new-topic-name-input");
form.on_reply = (new_zone) => {
const zone_list = document.getElementById("zone-list");
zone_list.insertAdjacentHTML(
form.on_reply = (new_topic) => {
const topic_list = document.getElementById("topic-list");
topic_list.insertAdjacentHTML(
"beforeend",
`<li id="zone-selector-${new_zone.id}" class="zone"><a href="#/zone/${new_zone.id}">${new_zone.name}</a></li>`,
`<li id="topic-selector-${new_topic.id}" class="topic"><a href="#/topic/${new_topic.id}">${new_topic.name}</a></li>`,
);
new_zone_name_input.value = "";
window.location.hash = `/chat/zone/${new_zone.id}`;
zone_create_form.style["height"] = "0";
new_topic_name_input.value = "";
window.location.hash = `/chat/topic/${new_topic.id}`;
topic_create_form.style["height"] = "0";
};
}
</script>
</form>
</div>
<div>
<span class="title">chat zones</span>
<span class="title">chat topics</span>
</div>
<ul id="zone-list" class="zone-list"></ul>
<ul id="topic-list" class="topic-list"></ul>
</div>
<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">
<div id="topic-chat-container">
<div id="topic-chat-content"></div>
<div id="topic-chat-entry-container">
<form id="topic-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"
@ -101,12 +101,12 @@
<div class="icon attachment"></div>
</label>
<textarea
id="zone-chat-input"
class="zone-chat-input"
id="topic-chat-input"
class="topic-chat-input"
rows="1"
name="data.message"
></textarea>
<button id="zone-chat-send" class="primary" aria-label="Send a message">
<button id="topic-chat-send" class="primary" aria-label="Send a message">
<i class="icon send"></i>
</button>
<script>
@ -115,11 +115,12 @@
const file_input = document.querySelector(
'input[name="file-upload-and-share"]',
);
const chat_input = document.getElementById("zone-chat-input");
const chat_input = document.getElementById("topic-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");
const topic_chat_container =
document.getElementById("topic-chat-container");
const topic_chat_content =
document.getElementById("topic-chat-content");
let messages_in_flight = {};
@ -131,9 +132,9 @@
form.on_submit = async (event) => {
const user = JSON.parse(document.body.dataset.user);
const zone_id = zone_chat_container.dataset.zone_id;
if (!zone_id) {
alert("Failed to get zone_id!");
const topic_id = topic_chat_container.dataset.topic_id;
if (!topic_id) {
alert("Failed to get topic_id!");
return false;
}
@ -171,7 +172,7 @@
return false;
}
form.action = `/api/zones/${zone_id}/events`;
form.action = `/api/topics/${topic_id}/events`;
};
form.on_parsed = (json) => {
@ -198,7 +199,7 @@
}
const user = JSON.parse(document.body.dataset.user);
render_text_event(zone_chat_content, json, user);
render_text_event(topic_chat_content, json, user);
document
.getElementById(`chat-${temp_id}`)
?.classList.add("sending");
@ -215,7 +216,7 @@
.getElementById(`chat-${sent_message.meta?.temp_id ?? ""}`)
?.classList.remove("sending");
append_zone_events([sent_message]);
append_topic_events([sent_message]);
parent_id_input.value = "";
chat_input.value = "";
chat_input.focus();

154
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(zone_chat_content, event, creator, existing_element) {
function render_text_event(topic_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) {
@ -307,31 +307,31 @@ function render_text_event(zone_chat_content, event, creator, existing_element)
template.innerHTML = html_content;
existing_element.replaceWith(template.content.firstChild);
} else {
zone_chat_content.insertAdjacentHTML("beforeend", html_content);
topic_chat_content.insertAdjacentHTML("beforeend", html_content);
}
}
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;
async function get_new_topic_element() {
const existing_new_topic_element = document.getElementById("new-topic");
if (existing_new_topic_element) {
return existing_new_topic_element;
}
const zone_list = document.getElementById("zone-list");
zone_list.insertAdjacentHTML(
const topic_list = document.getElementById("topic-list");
topic_list.insertAdjacentHTML(
"beforeend",
`<li id="new-zone" class="zone"><a href="" contenteditable="true">new zone</a></li>`,
`<li id="new-topic" class="topic"><a href="" contenteditable="true">new topic</a></li>`,
);
await new Promise((resolve) => setTimeout(resolve, 1));
const new_zone_element = document.getElementById("new-zone");
return new_zone_element;
const new_topic_element = document.getElementById("new-topic");
return new_topic_element;
}
const users = {};
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 ?? "";
async function append_topic_events(events) {
const topic_chat_content = document.getElementById("topic-chat-content");
let last_message_id = topic_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
@ -341,8 +341,8 @@ async function append_zone_events(events) {
: last_message_id;
// if the last message has been updated, update the content's dataset to reflect that
if (last_message_id !== zone_chat_content.dataset.last_message_id) {
zone_chat_content.dataset.last_message_id = last_message_id;
if (last_message_id !== topic_chat_content.dataset.last_message_id) {
topic_chat_content.dataset.last_message_id = last_message_id;
}
users[event.creator_id] =
@ -354,37 +354,37 @@ async function append_zone_events(events) {
(event.meta?.temp_id
? document.getElementById(`chat-${event.meta.temp_id}`)
: undefined);
render_text_event(zone_chat_content, event, users[event.creator_id], existing_element);
render_text_event(topic_chat_content, event, users[event.creator_id], existing_element);
}
zone_chat_content.scrollTop = zone_chat_content.scrollHeight;
topic_chat_content.scrollTop = topic_chat_content.scrollHeight;
}
// TODO: we need some abortcontroller handling here or something
// similar for when we change zones, this is the most basic
// similar for when we change topics, this is the most basic
// first pass outline
let zone_polling_request_abort_controller = null;
let topic_polling_request_abort_controller = null;
async function poll_for_new_events() {
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;
const topic_chat_content = document.getElementById("topic-chat-content");
const topic_id = topic_chat_content.dataset.topic_id;
const last_message_id = topic_chat_content.dataset.last_message_id;
if (!zone_id) {
if (!topic_id) {
return;
}
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}` : ""}`;
const message_polling_url = `/api/topics/${topic_id}/events?type=chat&limit=100&sort=newest&wait=true${last_message_id ? `&after_id=${last_message_id}` : ""}`;
zone_polling_request_abort_controller =
zone_polling_request_abort_controller || new AbortController();
topic_polling_request_abort_controller =
topic_polling_request_abort_controller || new AbortController();
api.fetch(message_polling_url, {
signal: zone_polling_request_abort_controller.signal,
signal: topic_polling_request_abort_controller.signal,
})
.then(async (new_events_response) => {
const new_events = ((await new_events_response.json()) ?? []).reverse();
await append_zone_events(new_events.toReversed());
poll_for_new_events(zone_id);
await append_topic_events(new_events.toReversed());
poll_for_new_events(topic_id);
})
.catch((error) => {
// TODO: poll again? back off?
@ -392,37 +392,37 @@ async function poll_for_new_events() {
});
}
async function load_zone(zone_id) {
const zone_chat_content = document.getElementById("zone-chat-content");
async function load_topic(topic_id) {
const topic_chat_content = document.getElementById("topic-chat-content");
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;
if (topic_polling_request_abort_controller) {
topic_polling_request_abort_controller.abort();
topic_polling_request_abort_controller = null;
delete topic_chat_content.dataset.last_message_id;
}
const zone_response = await api.fetch(`/api/zones/${zone_id}`);
if (!zone_response.ok) {
const error = await zone_response.json();
const topic_response = await api.fetch(`/api/topics/${topic_id}`);
if (!topic_response.ok) {
const error = await topic_response.json();
alert(error.message ?? JSON.stringify(error));
return;
}
const zone = await zone_response.json();
const topic = await topic_response.json();
zone_chat_content.dataset.zone_id = zone.id;
zone_chat_content.innerHTML = "";
topic_chat_content.dataset.topic_id = topic.id;
topic_chat_content.innerHTML = "";
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 topic_selectors = document.querySelectorAll("li.topic");
for (const topic_selector of topic_selectors) {
topic_selector.classList.remove("active");
if (topic_selector.id === `topic-selector-${topic_id}`) {
topic_selector.classList.add("active");
}
}
const events_response = await api.fetch(
`/api/zones/${zone_id}/events?type=chat&limit=100&sort=newest`,
`/api/topics/${topic_id}/events?type=chat&limit=100&sort=newest`,
);
if (!events_response.ok) {
const error = await events_response.json();
@ -432,36 +432,36 @@ async function load_zone(zone_id) {
const events = (await events_response.json()).reverse();
await append_zone_events(events);
poll_for_new_events(zone_id);
await append_topic_events(events);
poll_for_new_events(topic_id);
}
let last_zone_update = undefined;
async function update_chat_zones() {
let last_topic_update = undefined;
async function update_chat_topics() {
const now = new Date();
const time_since_last_update = now - (last_zone_update ?? 0);
const time_since_last_update = now - (last_topic_update ?? 0);
if (time_since_last_update < 5_000) {
return;
}
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(
const topics_response = await api.fetch("/api/topics");
if (topics_response.ok) {
const topic_list = document.getElementById("topic-list");
topic_list.innerHTML = "";
const topics = await topics_response.json();
for (const topic of topics) {
topic_list.insertAdjacentHTML(
"beforeend",
`<li id="zone-selector-${zone.id}" class="zone"><a href="#/chat/zone/${zone.id}">${zone.name}</a></li>`,
`<li id="topic-selector-${topic.id}" class="topic"><a href="#/chat/topic/${topic.id}">${topic.name}</a></li>`,
);
}
last_zone_update = now;
last_topic_update = now;
}
}
window.addEventListener("locationchange", update_chat_zones);
window.addEventListener("locationchange", update_chat_topics);
function check_for_zone_in_url() {
function check_for_topic_in_url() {
const user_json = document.body.dataset.user;
if (!user_json) {
return;
@ -473,28 +473,28 @@ function check_for_zone_in_url() {
return;
}
const first_zone_id = document.querySelector("li.zone")?.id.substring(14);
const first_topic_id = document.querySelector("li.topic")?.id.substring(14);
// #/chat/zone/{zone_id}
// #/chat/topic/{topic_id}
// ^ 12
const zone_id = hash.substring(12) || first_zone_id;
const topic_id = hash.substring(12) || first_topic_id;
if (!zone_id) {
setTimeout(check_for_zone_in_url, 100);
if (!topic_id) {
setTimeout(check_for_topic_in_url, 100);
return;
}
const zone_chat_container = document.getElementById("zone-chat-container");
const topic_chat_container = document.getElementById("topic-chat-container");
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);
if (topic_chat_container.dataset.topic_id !== topic_id) {
window.location.hash = `/chat/topic/${topic_id}`;
topic_chat_container.dataset.topic_id = topic_id;
load_topic(topic_id);
}
}
window.addEventListener("locationchange", check_for_zone_in_url);
window.addEventListener("locationchange", check_for_topic_in_url);
document.addEventListener("DOMContentLoaded", async () => {
await update_chat_zones();
check_for_zone_in_url();
await update_chat_topics();
check_for_topic_in_url();
});