andyburke/autonomous.contact
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: rework the frontend to move topics to the top

Browse source
This commit is contained in:
Andy Burke 2025-09-10 19:38:38 -07:00
parent fac8f409f4
commit 11ecd86bb9
14 changed files with 362 additions and 292 deletions
Download patch file Download diff file Expand all files Collapse all files

32
public/base.css
View file

@ -1,23 +1,31 @@
/* Dark mode default */
:root {
--bg: #323232;
--text: #efe;
--accent: #fa0 ;
--border-subtle: #555;
--border-normal: #888;
--border-highlight: #bbb;
--base-color: #fa0;
--bg: hsl(from var(--base-color) h 20% 7.5%);
--text: hsl(from var(--base-color) h 5% 100% );
--accent: hsl(from var(--base-color) h clamp( 0, calc(s + 10), 100 ) clamp( 0, calc(l + 20), 100 ) );
--border-subtle: hsl(from var(--base-color) h 50% 25%);
--border-normal: hsl(from var(--base-color) h 50% 50%);
--border-highlight: hsl(from var(--base-color) h 50% 75%);
--icon-scale: 1;
--border-radius: 4px;
}
@media (prefers-color-scheme: light) {
:root {
--bg: #f0f0f0;
--text: #121212;
--accent: #c80;
--border-subtle: #bbb;
--border-normal: #888;
--border-highlight: #555;
--bg: hsl(from var(--base-color) h 20% 95%);
--text: hsl(from var(--base-color) h 5% 5% );
--accent: hsl(from var(--base-color) h calc(s + 10) calc(l + 20) );
--border-subtle: hsl(from var(--base-color) h 50% 90%);
--border-normal: hsl(from var(--base-color) h 50% 50%);
--border-highlight: hsl(from var var(--base-color) h 50% 25%);
}
}

121
public/index.html
View file

@ -22,10 +22,121 @@
<body>
<!-- #include file="./signup_login_wall.html" -->
<main>
<!-- #include file="./sidebar/sidebar.html" -->
<!-- #include file="./tabs/tabs.html" -->
</main>
</body>
<script>
document.addEventListener("DOMContentLoaded", () => {
const HASH_EXTRACTOR = /^\#\/topic\/(?<topic_id>[A-Za-z\-]+)\/?(?<view>\w+)/gm;
function extract_url_hash_info() {
HASH_EXTRACTOR.lastIndex = 0; // ugh, need this to have this work on multiple exec calls
const {
groups: { topic_id, view },
} = HASH_EXTRACTOR.exec(window.location.hash ?? "") ?? {
groups: {},
};
console.dir({
url: window.location.href,
hash: window.location.hash,
topic_id,
view,
});
if ( !document.body.dataset.topic || document.body.dataset.topic !== topic_id ) {
const previous = document.body.dataset.topic;
document.body.dataset.topic = topic_id;
console.dir( {
topic_changed: {
detail: {
previous,
topic: topic_id
}
}
});
document.dispatchEvent(new CustomEvent( "topic_changed", {
detail: {
previous,
topic: topic_id
}
}));
}
if ( !document.body.dataset.view || document.body.dataset.view !== view ) {
const previous = document.body.dataset.view;
document.body.dataset.view = view;
console.dir( {
view_changed: {
detail: {
previous,
view
}
}
});
document.dispatchEvent(new CustomEvent( "view_changed", {
detail: {
previous,
view
}
}));
}
}
window.addEventListener("locationchange", extract_url_hash_info);
document.addEventListener( 'topic_changed', ( {detail: { topic }}) => {
if ( !topic ) {
const first_topic_id = TOPICS?.[0]?.id;
if ( first_topic_id ) {
window.location.hash = `/topic/${ first_topic_id }/chat`;
}
}
})
let TOPICS = [];
let last_topic_update = undefined;
let update_topics_timeout = undefined;
const UPDATE_TOPICS_FREQUENCY = 60_000;
async function update_topics() {
const now = new Date();
const time_since_last_update = now - (last_topic_update ?? 0);
if (time_since_last_update < UPDATE_TOPICS_FREQUENCY / 2) {
return;
}
if ( update_topics_timeout ) {
clearTimeout( update_topics_timeout );
update_topics_timeout = undefined;
}
const topics_response = await api.fetch("/api/topics");
if (topics_response.ok) {
const topic_list = document.getElementById("topic-list");
topic_list.innerHTML = "";
const new_topics = await topics_response.json();
const has_differences = TOPICS.length !== new_topics.length || new_topics.some( (topic, index) => {
return ( TOPICS[ index ]?.id !== topic.id || TOPICS[ index ]?.name !== topic.name );
});
if ( has_differences ) {
TOPICS = new_topics;
document.dispatchEvent(new CustomEvent("topics_updated", { detail: { topics: TOPICS } }));
}
last_topic_update = now;
}
update_topics_timeout = setTimeout( update_topics, UPDATE_TOPICS_FREQUENCY);
}
document.addEventListener("DOMContentLoaded", async () => {
/* check if we are logged in */
(async () => {
try {
@ -46,12 +157,20 @@
document.body.dataset.user = JSON.stringify( user );
document.body.dataset.perms = user.permissions.join(":");
document.dispatchEvent(new CustomEvent("user_logged_in", { detail: { user } }));
} catch (error) {
console.dir({
error,
});
}
})();
window.addEventListener("locationchange", update_topics);
await update_topics();
extract_url_hash_info();
});
</script>
</html>

6
public/js/audioplayer.js
View file

@ -146,9 +146,9 @@ new MutationObserver((mutations) => {
VIZ_RGB = window
.getComputedStyle(CANVAS)
.color.slice(4, -1)
.split(",")
.map((v) => parseInt(v));
.color.slice(11, -1)
.split(/[ ,]/)
.map((v) => parseInt(Math.min(v * 255, 255)));
ACTX = ACTX ?? new AudioContext();

191
public/sidebar/sidebar.html Normal file
View file

@ -0,0 +1,191 @@
<script>
document.addEventListener("topics_updated", ({ detail: { topics } }) => {
const topic_list = document.getElementById("topic-list");
topic_list.innerHTML = "";
for (const topic of topics) {
topic_list.insertAdjacentHTML(
"beforeend",
`<li id="topic-selector-${topic.id}" class="topic"><a href="#/topic/${topic.id}/chat">${topic.name}</a></li>`,
);
}
});
</script>
<style type="text/css">
main {
position: relative;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: auto 1fr;
}
@media screen and (max-width: 1200px) {
main {
grid-template-columns: auto;
}
}
#sidebar {
z-index: 100;
background: var(--bg);
position: relative;
width: auto;
left: 0;
max-width: 32rem;
padding: 0.5rem;
transition: all ease-in-out 0.33s;
border-right: 1px solid var(--border-subtle);
}
#sidebar #sidebar-toggle,
#sidebar #sidebar-toggle-icon {
opacity: 0;
display: none;
}
@media screen and (max-width: 1200px) {
#sidebar {
position: absolute;
top: 0;
bottom: 0;
transform: translateX(-100%);
}
#sidebar #sidebar-toggle-icon {
opacity: 1;
display: block;
position: absolute;
top: 0.9rem;
right: -2.5rem;
cursor: pointer;
transition: all ease-in-out 0.33s;
background: rgba(128, 128, 128, 0.5);
border-radius: 0 1rem 1rem 0;
padding: 0.5rem;
}
#sidebar .icon {
transition: all ease-in-out 0.15s;
}
#sidebar:has(#sidebar-toggle:checked) {
transform: translateX(0);
}
#sidebar:has(#sidebar-toggle:checked) #sidebar-toggle-icon {
right: 0;
rotate: 180deg;
}
}
#sidebar .title {
text-transform: uppercase;
font-size: small;
font-weight: bold;
line-height: 2rem;
}
#sidebar #topic-creation-container {
margin-top: 0.5rem;
}
#sidebar #topic-creation-container #toggle-topic-creation-form-button {
transform: scale(0.8);
}
#sidebar .topic-list {
list-style-type: none;
}
#sidebar .topic-list > li.topic a:before {
position: absolute;
left: -1.75rem;
top: 0;
font-weight: bold;
font-size: x-large;
content: "#";
color: var(--text);
}
#sidebar .topic-list > li.topic a {
position: relative;
display: block;
width: 100%;
min-height: 1.5rem;
line-height: 1.5rem;
font-weight: bold;
font-size: large;
margin-left: 1.75rem;
text-decoration: none;
}
#sidebar .topic-list > li.topic.active a {
color: var(--accent);
}
</style>
<div id="sidebar">
<input type="checkbox" id="sidebar-toggle" />
<label id="sidebar-toggle-icon" for="sidebar-toggle">
<div class="icon right"></div>
</label>
<div>
<span class="title">topics</span>
</div>
<ul id="topic-list" class="topic-list"></ul>
<div id="topic-creation-container" data-requires-permission="topics.create">
<button
id="toggle-topic-creation-form-button"
onclick="((event) => {
event.preventDefault();
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="topic-create"
data-smart="true"
action="/api/topics"
method="POST"
style="
margin-top: 1rem;
width: 100%;
overflow: hidden;
height: 0;
overflow: hidden;
transition: all 0.5s;
"
>
<input
id="new-topic-name-input"
type="text"
name="name"
value=""
placeholder="new topic"
/>
<input type="submit" hidden />
<script>
{
const form = document.currentScript.closest("form");
const topic_create_form = document.getElementById("topic-create");
const new_topic_name_input = document.getElementById("new-topic-name-input");
form.on_reply = (new_topic) => {
const topic_list = document.getElementById("topic-list");
topic_list.insertAdjacentHTML(
"beforeend",
`<li id="topic-selector-${new_topic.id}" class="topic"><a href="#/topic/${new_topic.id}">${new_topic.name}</a></li>`,
);
new_topic_name_input.value = "";
window.location.hash = `/topic/${new_topic.id}`;
topic_create_form.style["height"] = "0";
};
}
</script>
</form>
</div>
</div>

2
public/tabs/calendar/calendar.html
View file

@ -4,7 +4,7 @@
name="top-level-tabs"
id="calendar-tab-input"
class="tab-switch"
data-hash="/calendar"
data-view="calendar"
/>
<label for="calendar-tab-input" class="tab-label"
><div class="icon calendar"></div>

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

@ -1,63 +1,7 @@
#chat .tab-content {
display: grid;
grid-template-columns: auto 1fr;
}
.topic-list {
margin: 1rem 0;
list-style-type: none;
}
.topic-list > li.topic a:before {
position: absolute;
left: -1.75rem;
top: 0;
font-weight: bold;
font-size: x-large;
content: "#";
color: var(--text);
}
.topic-list > li.topic a {
position: relative;
display: block;
width: 100%;
min-height: 1.5rem;
line-height: 1.5rem;
font-weight: bold;
font-size: large;
margin-left: 1.75rem;
text-decoration: none;
}
.topic-list > li.topic.active a {
color: var(--accent);
}
#chat .sidebar {
position: relative;
width: min-content;
min-width: 10rem;
max-width: 32rem;
overflow-x: scroll;
padding: 0.5rem;
}
#chat .sidebar #sidebar-toggle,
#chat .sidebar #sidebar-toggle-icon {
opacity: 0;
display: none;
}
#chat .sidebar .title {
text-transform: uppercase;
font-size: small;
font-weight: bold;
line-height: 2rem;
}
#chat #topic-chat-container {
position: relative;
width: 100%;
height: 100%;
}
#chat #topic-chat-content {
@ -333,46 +277,7 @@
border-style: none;
}
@media screen and (max-width: 768px) {
#chat .sidebar {
z-index: 100;
background: var(--bg);
position: absolute;
top: 0;
bottom: 0;
width: 100%;
left: -100%;
overflow-y: scroll;
overflow: visible;
transition: all ease-in-out 0.33s;
}
#chat .sidebar #sidebar-toggle-icon {
opacity: 1;
display: block;
position: absolute;
top: 1rem;
right: -2.5rem;
cursor: pointer;
transition: all ease-in-out 0.33s;
background: rgba(128, 128, 128, 0.5);
border-radius: 0 1rem 1rem 0;
padding: 0.5rem;
}
#chat .sidebar .icon {
transition: all ease-in-out 0.33s;
}
#chat .sidebar:has(#sidebar-toggle:checked) {
left: 0;
}
#chat .sidebar:has(#sidebar-toggle:checked) #sidebar-toggle-icon {
right: 0;
rotate: 180deg;
}
@media screen and (max-width: 1200px) {
#chat #topic-chat-container {
position: absolute;
top: 0;

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

@ -4,7 +4,7 @@
name="top-level-tabs"
id="chat-tab-input"
class="tab-switch"
data-hash="/chat"
data-view="chat"
/>
<label for="chat-tab-input" class="tab-label"
><div class="icon chat"></div>
@ -17,74 +17,6 @@
<script src="/js/external/mimetypes.js" type="text/javascript"></script>
<script src="/js/external/punycode.js" type="text/javascript"></script>
<script src="/tabs/chat/chat.js" type="text/javascript"></script>
<div class="sidebar resizable">
<input type="checkbox" id="sidebar-toggle" />
<label id="sidebar-toggle-icon" for="sidebar-toggle">
<div class="icon right"></div>
</label>
<div id="topic-creation-container" data-requires-permission="topics.create">
<button
id="toggle-topic-creation-form-button"
onclick="((event) => {
event.preventDefault();
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="topic-create"
data-smart="true"
action="/api/topics"
method="POST"
style="
margin-top: 1rem;
width: 100%;
overflow: hidden;
height: 0;
overflow: hidden;
transition: all 0.5s;
"
>
<input
id="new-topic-name-input"
type="text"
name="name"
value=""
placeholder="new topic"
/>
<!-- <button class="primary" type="submit">
<div class="icon plus"></div>
</button> -->
<input type="submit" hidden />
<script>
{
const form = document.currentScript.closest("form");
const topic_create_form = document.getElementById("topic-create");
const new_topic_name_input =
document.getElementById("new-topic-name-input");
form.on_reply = (new_topic) => {
const topic_list = document.getElementById("topic-list");
topic_list.insertAdjacentHTML(
"beforeend",
`<li id="topic-selector-${new_topic.id}" class="topic"><a href="#/topic/${new_topic.id}">${new_topic.name}</a></li>`,
);
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 topics</span>
</div>
<ul id="topic-list" class="topic-list"></ul>
</div>
<div id="topic-chat-container">
<div id="topic-chat-content"></div>
<div id="topic-chat-entry-container">

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

@ -311,23 +311,6 @@ function render_text_event(topic_chat_content, event, creator, existing_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 topic_list = document.getElementById("topic-list");
topic_list.insertAdjacentHTML(
"beforeend",
`<li id="new-topic" class="topic"><a href="" contenteditable="true">new topic</a></li>`,
);
await new Promise((resolve) => setTimeout(resolve, 1));
const new_topic_element = document.getElementById("new-topic");
return new_topic_element;
}
const users = {};
async function append_topic_events(events) {
const topic_chat_content = document.getElementById("topic-chat-content");
@ -393,6 +376,8 @@ async function poll_for_new_events() {
}
async function load_topic(topic_id) {
if (!topic_id) return;
const topic_chat_content = document.getElementById("topic-chat-content");
if (topic_polling_request_abort_controller) {
@ -435,66 +420,6 @@ async function load_topic(topic_id) {
await append_topic_events(events);
poll_for_new_events(topic_id);
}
let last_topic_update = undefined;
async function update_chat_topics() {
const now = new Date();
const time_since_last_update = now - (last_topic_update ?? 0);
if (time_since_last_update < 5_000) {
return;
}
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="topic-selector-${topic.id}" class="topic"><a href="#/chat/topic/${topic.id}">${topic.name}</a></li>`,
);
}
last_topic_update = now;
}
}
window.addEventListener("locationchange", update_chat_topics);
function check_for_topic_in_url() {
const user_json = document.body.dataset.user;
if (!user_json) {
return;
}
const hash = window.location.hash;
const chat_in_url = hash.indexOf("#/chat") === 0;
if (!chat_in_url) {
return;
}
const first_topic_id = document.querySelector("li.topic")?.id.substring(14);
// #/chat/topic/{topic_id}
// ^ 12
const topic_id = hash.substring(12) || first_topic_id;
if (!topic_id) {
setTimeout(check_for_topic_in_url, 100);
return;
}
const topic_chat_container = document.getElementById("topic-chat-container");
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_topic_in_url);
document.addEventListener("DOMContentLoaded", async () => {
await update_chat_topics();
check_for_topic_in_url();
document.addEventListener("topic_changed", ({ detail: { topic } }) => {
load_topic(topic);
});

2
public/tabs/exchange/exchange.html
View file

@ -4,7 +4,7 @@
name="top-level-tabs"
id="exchange-tab-input"
class="tab-switch"
data-hash="/exchange"
data-view="exchange"
/>
<label for="exchange-tab-input" class="tab-label"
><div class="icon exchange"></div>

2
public/tabs/home/home.html
View file

@ -5,7 +5,7 @@
id="home-tab-input"
checked="checked"
class="tab-switch"
data-hash="/"
data-view="home"
/>
<label for="home-tab-input" class="tab-label">
<div class="icon home"></div>

6
public/tabs/profile/profile.html
View file

@ -86,7 +86,7 @@
name="top-level-tabs"
id="user-tab-input"
class="tab-switch"
data-hash="/profile"
data-view="profile"
/>
<label for="user-tab-input" class="tab-label"
><div class="icon user"></div>
@ -163,6 +163,10 @@
<span class="username" data-bind__user_username></span>
</div>
<div class="notifications-settings-container">
<button onclick="NOTIFICATIONS.request_permission()">Enable Notifications</button>
</div>
<form data-smart="true" data-method="DELETE" action="/api/auth">
<script>
{

2
public/tabs/resources/resources.html
View file

@ -4,7 +4,7 @@
name="top-level-tabs"
id="resources-tab-input"
class="tab-switch"
data-hash="/resources"
data-view="resources"
/>
<label for="resources-tab-input" class="tab-label"
><div class="icon resources"></div>

26
public/tabs/tabs.html
View file

@ -1,37 +1,23 @@
<script>
function on_location_change() {
const hash = window.location.hash?.slice(1);
console.dir({ hash });
if (hash) {
const target_tab_url = hash.slice(0, hash.slice(1).indexOf("/") + 1);
const target_tab = document.querySelector(`[data-hash="${target_tab_url}"]`);
console.dir({
target_tab_url,
target_tab,
});
document.addEventListener("view_changed", ({ detail: { view } }) => {
const target_tab = document.querySelector(`.tab-switch[data-view="${view}"]`);
if (target_tab) {
target_tab.click();
}
}
}
window.addEventListener("locationchange", on_location_change);
});
document.addEventListener("DOMContentLoaded", () => {
const tab_switchers = document.querySelectorAll(".tab-switch");
for (const tab_switch of tab_switchers) {
tab_switch.addEventListener("input", (event) => {
const tab_selector = event.target;
const hash = tab_selector.dataset.hash;
if (hash) {
window.location.hash = hash;
const view = tab_selector.dataset.view;
if (view) {
window.location.hash = `/topic/${document.body.dataset.topic}/${view}`;
}
});
}
on_location_change();
});
</script>
<style>

2
public/tabs/work/work.html
View file

@ -4,7 +4,7 @@
name="top-level-tabs"
id="work-tab-input"
class="tab-switch"
data-hash="/work"
data-view="work"
/>
<label for="work-tab-input" class="tab-label"
><div class="icon work"></div>