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

refactor: trying to start the move to utility based styling

Browse source
This commit is contained in:
Andy Burke 2026-03-10 20:26:38 -07:00
parent 86fa2b6d4b
commit 4a15f9260b
6 changed files with 411 additions and 159 deletions
Download patch file Download diff file Expand all files Collapse all files

95
public/tabs/chat/channel_sidebar.html
View file

@ -1,19 +1,19 @@
<script>
function on_channels_updated({ channels }) {
const channel_list = document.getElementById("channel-list");
if ( !channel_list ) {
setTimeout( () => {
on_channels_updated( { channels } );
}, 100 );
if (!channel_list) {
setTimeout(() => {
on_channels_updated({ channels });
}, 100);
return;
}
channel_list.innerHTML = "";
for (const channel of channels.sort((lhs, rhs) => lhs.name.localeCompare(rhs.name))) {
if ( !document.body.dataset.channel ) {
if (!document.body.dataset.channel) {
document.body.dataset.channel = APP.user?.meta?.chat?.last_channel ?? channel.id;
if ( APP.view === 'chat' ) {
window.location.hash = '/chat/channel/' + document.body.dataset.channel;
if (APP.view === "chat") {
window.location.hash = "/chat/channel/" + document.body.dataset.channel;
}
}
@ -24,28 +24,30 @@
}
}
APP.on("channels_updated", on_channels_updated );
APP.on("channels_updated", on_channels_updated);
APP.on( 'view_changed', async ( { previous, view, channel_id } ) => {
if ( view !== 'chat' ) {
APP.on("view_changed", async ({ previous, view, channel_id }) => {
if (view !== "chat") {
return;
}
const previous_channel = typeof document.body.dataset.channel === 'string' ? document.body.dataset.channel : undefined;
const previous_channel =
typeof document.body.dataset.channel === "string"
? document.body.dataset.channel
: undefined;
if ( channel_id ) {
if (channel_id) {
document.body.dataset.channel = channel_id;
}
else {
} else {
delete document.body.dataset.channel;
}
await APP.CHANNELS.update(); // don't force, but ensure we have channels
const target_channel_id = channel_id ?? APP.CHANNELS.CHANNEL_LIST[0]?.id;
const hash_target = `/chat` + ( target_channel_id ? `/channel/${ target_channel_id }` : '' );
const hash_target = `/chat` + (target_channel_id ? `/channel/${target_channel_id}` : "");
if ( window.location.hash?.slice( 1 ) !== hash_target ) {
if (window.location.hash?.slice(1) !== hash_target) {
window.location.hash = hash_target;
}
});
@ -62,7 +64,7 @@
.forEach((element) => element.classList.add("active"));
}
for ( const watch of APP.user_watches ) {
for (const watch of APP.user_watches) {
// find the channel indicator for this watch
// if there is new stuff - TODO implement a HEAD for getting latest event id?
// add a class of 'new-content'
@ -117,23 +119,22 @@
}
});
APP.on( 'view_changed', ( {previous, view} ) => {
const sidebar_dynamic_container = document.getElementById( 'sidebar-dynamic-container');
if ( !sidebar_dynamic_container ) {
console.error( 'could not get #sidebar-dynamic-container' );
APP.on("view_changed", ({ previous, view }) => {
const sidebar_dynamic_container = document.getElementById("sidebar-dynamic-container");
if (!sidebar_dynamic_container) {
console.error("could not get #sidebar-dynamic-container");
return;
}
if ( view !== 'chat' && previous === 'chat' ) {
sidebar_dynamic_container.innerHTML = '';
if (view !== "chat" && previous === "chat") {
sidebar_dynamic_container.innerHTML = "";
delete document.body.dataset.channel;
return;
}
else if ( view !== 'chat' ) {
} else if (view !== "chat") {
return;
}
const template = document.getElementById( 'channel-list-template');
const template = document.getElementById("channel-list-template");
sidebar_dynamic_container.innerHTML = template.innerHTML.trim();
APP.CHANNELS.update(true);
});
@ -186,14 +187,43 @@
</div>
<ul id="channel-list" class="channel-list"></ul>
<div data-requires-permission="channels.create">
<form
id="channel-create"
data-smart="true"
action="/api/channels"
method="POST"
on_reply="(new_channel) => {
APP.CHANNELS.update(true);
document.getElementById('new-channel-name-input').value = '';
document.getElementById('channel-create').style['height'] = '0';
window.location.hash = `/chat/channel/${new_channel.id}`;
}"
>
<input
id="new-channel-name-input"
type="text"
name="name"
value=""
placeholder="new channel"
/>
<button type="submit">Create Channel</button>
</form>
</div>
<!--
<div id="channel-creation-container" data-requires-permission="channels.create">
<button
id="toggle-channel-creation-form-button"
onclick="((event) => {
event.preventDefault();
const channel_create_form = document.getElementById( 'channel-create' );
channel_create_form.style[ 'height' ] = channel_create_form.style[ 'height' ] === '5rem' ? '0' : '5rem';
})(event)"
onclick="
((event) => {
event.preventDefault();
const channel_create_form = document.getElementById('channel-create');
channel_create_form.style['height'] =
channel_create_form.style['height'] === '5rem' ? '0' : '5rem';
})(event)
"
>
<div class="icon plus"></div>
</button>
@ -225,8 +255,9 @@
placeholder="new channel"
/>
<input type="submit" hidden />
<button type="submit">Create</button>
</form>
</div>
-->
</div>
</template>