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

refactor: more refactoring to topics as the top-level organization

Browse source
This commit is contained in:
Andy Burke 2025-09-11 14:09:28 -07:00
parent 11ecd86bb9
commit 4347d20263
18 changed files with 730 additions and 317 deletions
Download patch file Download diff file Expand all files Collapse all files

600
public/base.css
View file

@ -1,12 +1,11 @@
/* Dark mode default */
:root {
--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 ) );
--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%);
@ -20,8 +19,8 @@
:root {
--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) );
--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%);
@ -121,7 +120,20 @@ body {
background-color: var(--bg);
display: flex;
flex-direction: column;
height: 100vh; // fixed height?
height: 100vh; /* fixed height? */
}
input[type="text"]:focus,
input[type="textarea"]:focus,
textarea:focus {
border-color: rgb(from var(--border-highlight) r g b / 60%);
outline: 0;
-webkit-box-shadow:
inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 2px rgb(from var(--border-highlight) r g b / 60%);
box-shadow:
inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 2px rgb(from var(--border-highlight) r g b / 60%);
}
.clickable {
@ -134,6 +146,26 @@ body {
border-right: 4px solid #444;
}
.mockup {
position: relative;
}
.mockup::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
-55deg,
rgba(0, 0, 0, 0.25) 0px,
rgba(0, 0, 0, 0.25) 20px,
rgba(255, 177, 1, 0.25) 20px,
rgba(255, 177, 1, 0.25) 40px
);
}
form div {
position: relative;
display: flex;
@ -164,7 +196,7 @@ form input:valid ~ label {
form input {
width: 100%;
padding: 20px;
border: 1px solid var(--text);
border: 1px solid rgb(from var(--text) r g b / 60%);
font-size: 20px;
background-color: var(--bg);
color: var(--text);
@ -288,7 +320,11 @@ body[data-perms*="topics.create"] [data-requires-permission="topics.create"] {
max-width: 800px;
}
.audio-container .audio-controls-container .progress-container .slider-container input[name="progress"] {
.audio-container
.audio-controls-container
.progress-container
.slider-container
input[name="progress"] {
width: 100%;
}
@ -320,56 +356,58 @@ body[data-perms*="topics.create"] [data-requires-permission="topics.create"] {
}
.audio-container .audio-controls-container input[type="range"] {
--c: var(--accent); /* active color */
--g: 4px; /* the gap */
--l: 2px; /* line thickness*/
--s: 15px; /* thumb size*/
--c: var(--accent); /* active color */
--g: 4px; /* the gap */
--l: 2px; /* line thickness*/
--s: 15px; /* thumb size*/
width: 100%;
height: var(--s); /* needed for Firefox*/
--_c: color-mix(in srgb, var(--c), #000 var(--p,0%));
-webkit-appearance :none;
-moz-appearance :none;
appearance :none;
background: none;
cursor: pointer;
overflow: hidden;
width: 100%;
height: var(--s); /* needed for Firefox*/
--_c: color-mix(in srgb, var(--c), #000 var(--p, 0%));
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
cursor: pointer;
overflow: hidden;
}
.audio-container .audio-controls-container input[type="range"]:focus-visible,
.audio-container .audio-controls-container input[type="range"]:hover {
--p: 25%;
--p: 25%;
}
.audio-container .audio-controls-container input[type="range"]:active,
.audio-container .audio-controls-container input[type="range"]:focus-visible{
--_b: var(--s)
.audio-container .audio-controls-container input[type="range"]:focus-visible {
--_b: var(--s);
}
/* chromium */
.audio-container .audio-controls-container input[type="range"]::-webkit-slider-thumb{
height: var(--s);
aspect-ratio: 1;
border-radius: 50%;
box-shadow: 0 0 0 var(--_b,var(--l)) inset var(--_c);
border-image: linear-gradient(90deg,var(--_c) 50%,#ababab 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
-webkit-appearance: none;
appearance: none;
transition: .2s;
.audio-container .audio-controls-container input[type="range"]::-webkit-slider-thumb {
height: var(--s);
aspect-ratio: 1;
border-radius: 50%;
box-shadow: 0 0 0 var(--_b, var(--l)) inset var(--_c);
border-image: linear-gradient(90deg, var(--_c) 50%, #ababab 0) 0 1 / calc(50% - var(--l) / 2)
100vw/0 calc(100vw + var(--g));
-webkit-appearance: none;
appearance: none;
transition: 0.2s;
}
/* Firefox */
.audio-container .audio-controls-container input[type="range"]::-moz-range-thumb {
height: var(--s);
width: var(--s);
background: none;
border-radius: 50%;
box-shadow: 0 0 0 var(--_b,var(--l)) inset var(--_c);
border-image: linear-gradient(90deg,var(--_c) 50%,#ababab 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
-moz-appearance: none;
appearance: none;
transition: .2s;
height: var(--s);
width: var(--s);
background: none;
border-radius: 50%;
box-shadow: 0 0 0 var(--_b, var(--l)) inset var(--_c);
border-image: linear-gradient(90deg, var(--_c) 50%, #ababab 0) 0 1 / calc(50% - var(--l) / 2)
100vw/0 calc(100vw + var(--g));
-moz-appearance: none;
appearance: none;
transition: 0.2s;
}
@supports not (color: color-mix(in srgb,red,red)) {
.audio-container .audio-controls-container input[type="range"] {
--_c: var(--c);
}
@supports not (color: color-mix(in srgb, red, red)) {
.audio-container .audio-controls-container input[type="range"] {
--_c: var(--c);
}
}
.audio-container .audio-controls-container .volume label[for="volume"] {
@ -399,6 +437,14 @@ body[data-perms*="topics.create"] [data-requires-permission="topics.create"] {
display: block;
}
.html-from-markdown {
padding: 2em;
}
.inline {
display: inline-block !important;
}
/* ICONS */
.icon {
width: 24px;
@ -447,7 +493,6 @@ body[data-perms*="topics.create"] [data-requires-permission="topics.create"] {
left: 8px;
}
/* ICON - ATTACHMENT */
.icon.attachment {
box-sizing: border-box;
@ -490,6 +535,38 @@ body[data-perms*="topics.create"] [data-requires-permission="topics.create"] {
bottom: 4px;
}
/* ICON - BLURB */
.icon.blurb {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
border: 2px solid;
border-radius: 3px;
width: 22px;
height: 16px;
}
.icon.blurb::after,
.icon.blurb::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
height: 2px;
border-radius: 3px;
background: currentColor;
bottom: 2px;
}
.icon.blurb::before {
width: 10px;
left: 2px;
box-shadow: 4px -4px 0;
}
.icon.blurb::after {
width: 3px;
right: 2px;
box-shadow: -11px -4px 0;
}
/* ICON - CALENDAR */
.icon.calendar,
@ -524,13 +601,8 @@ body[data-perms*="topics.create"] [data-requires-permission="topics.create"] {
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 20px;
height: 16px;
border: 2px solid;
border-bottom: 0;
box-shadow:
-6px 8px 0 -6px,
6px 8px 0 -6px;
width: 14px;
height: 10px;
}
.icon.chat::after,
.icon.chat::before {
@ -538,53 +610,60 @@ body[data-perms*="topics.create"] [data-requires-permission="topics.create"] {
display: block;
box-sizing: border-box;
position: absolute;
width: 8px;
}
.icon.chat::before {
border: 2px solid;
border-top-color: transparent;
border-bottom-left-radius: 20px;
right: 4px;
bottom: -6px;
height: 6px;
}
.icon.chat::after {
border-radius: 3px;
height: 2px;
background: currentColor;
box-shadow: 0 4px 0 0;
left: 4px;
top: 4px;
}
.icon.chat::before {
width: 10px;
opacity: 0.5;
box-shadow: 0 4px 0;
}
.icon.chat::after {
width: 14px;
bottom: 0;
}
/* ICON - CIRCLE */
.icon.circle {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 19px;
height: 19px;
border: 2px solid;
border-radius: 100px;
}
/* ICON - CONTROLLER */
.icon.controller {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 8px;
height: 8px;
border: 2px solid;
border-radius: 100px;
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 8px;
height: 8px;
border: 2px solid;
border-radius: 100px;
}
.icon.controller::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 14px;
height: 14px;
box-shadow:
-6px -6px 0 -4px,
6px 6px 0 -4px,
6px -6px 0 -4px,
-6px 6px 0 -4px;
left: -5px;
top: -5px;
transform: rotate(45deg);
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 14px;
height: 14px;
box-shadow:
-6px -6px 0 -4px,
6px 6px 0 -4px,
6px -6px 0 -4px,
-6px 6px 0 -4px;
left: -5px;
top: -5px;
transform: rotate(45deg);
}
/* ICON - DOWNLOAD */
.icon.download {
box-sizing: border-box;
@ -625,6 +704,42 @@ body[data-perms*="topics.create"] [data-requires-permission="topics.create"] {
bottom: 5px;
}
/* ICON - ESSAY */
.icon.essay {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 18px;
border: 2px solid;
border-radius: 3px;
box-shadow: 0 -1px 0;
}
.icon.essay::after,
.icon.essay::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 6px;
top: 2px;
}
.icon.essay::before {
background: currentColor;
left: 2px;
box-shadow:
0 4px 0,
0 8px 0;
border-radius: 3px;
height: 2px;
}
.icon.essay::after {
height: 10px;
border: 2px solid;
right: 2px;
border-radius: 1px;
}
/* ICON - EXCHANGE */
.icon.exchange,
@ -657,6 +772,40 @@ body[data-perms*="topics.create"] [data-requires-permission="topics.create"] {
right: -5px;
}
/* ICON - FORUM */
.icon.forum {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 16px;
height: 14px;
border-bottom: 2px solid;
}
.icon.forum::after,
.icon.forum::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
top: 2px;
}
.icon.forum::before {
border-left: 4px solid;
left: 1px;
width: 0;
height: 0;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
.icon.forum::after {
width: 8px;
height: 6px;
border-top: 2px solid;
border-bottom: 2px solid;
right: 0;
}
/* ICON - FORWARD */
.icon.forward-copy {
box-sizing: border-box;
@ -696,10 +845,8 @@ body[data-perms*="topics.create"] [data-requires-permission="topics.create"] {
/* ICON - HOME */
.icon.home {
background:
linear-gradient(to left, currentColor 5px, transparent 0) no-repeat 0 bottom/4px
2px,
linear-gradient(to left, currentColor 5px, transparent 0) no-repeat right
bottom/4px 2px;
linear-gradient(to left, currentColor 5px, transparent 0) no-repeat 0 bottom/4px 2px,
linear-gradient(to left, currentColor 5px, transparent 0) no-repeat right bottom/4px 2px;
box-sizing: border-box;
position: relative;
display: block;
@ -768,8 +915,8 @@ body[data-perms*="topics.create"] [data-requires-permission="topics.create"] {
top: 6px;
left: 8px;
box-shadow:
-5px 0 0,
5px 0 0;
-5px 0 0,
5px 0 0;
}
/* ICON - MOREBORDERLESS */
@ -823,11 +970,10 @@ body[data-perms*="topics.create"] [data-requires-permission="topics.create"] {
top: 8px;
left: 8px;
box-shadow:
-5px 0 0,
5px 0 0;
-5px 0 0,
5px 0 0;
}
/* ICON - PLUS */
.icon.plus,
.icon.plus::after,
@ -996,7 +1142,10 @@ body[data-perms*="topics.create"] [data-requires-permission="topics.create"] {
width: 10px;
height: 12px;
border: 2px solid transparent;
box-shadow: 0 0 0 2px, inset -2px 0 0, inset 2px 0 0;
box-shadow:
0 0 0 2px,
inset -2px 0 0,
inset 2px 0 0;
border-bottom-left-radius: 1px;
border-bottom-right-radius: 1px;
margin-top: 4px;
@ -1149,175 +1298,172 @@ body[data-perms*="topics.create"] [data-requires-permission="topics.create"] {
left: 11px;
}
/* AUDIO PLAYER ICONS */
.icon.skip-back {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
border: 2px solid;
border-radius: 4px;
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
border: 2px solid;
border-radius: 4px;
}
.icon.skip-back::after,
.icon.skip-back::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
height: 8px;
top: 5px;
content: "";
display: block;
box-sizing: border-box;
position: absolute;
height: 8px;
top: 5px;
}
.icon.skip-back::before {
width: 2px;
border-radius: 2px;
right: 11px;
background: currentColor;
width: 2px;
border-radius: 2px;
right: 11px;
background: currentColor;
}
.icon.skip-back::after {
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-right: 5px solid;
right: 5px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-right: 5px solid;
right: 5px;
}
.icon.rewind {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
border: 2px solid;
border-radius: 4px;
width: 22px;
height: 22px;
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
border: 2px solid;
border-radius: 4px;
width: 22px;
height: 22px;
}
.icon.rewind::after,
.icon.rewind::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 6px;
height: 6px;
border-left: 2px solid;
border-bottom: 2px solid;
transform: rotate(45deg);
top: 6px;
left: 5px;
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 6px;
height: 6px;
border-left: 2px solid;
border-bottom: 2px solid;
transform: rotate(45deg);
top: 6px;
left: 5px;
}
.icon.rewind::after {
left: 9px;
left: 9px;
}
.icon.play {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
border: 2px solid;
border-radius: 4px;
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
border: 2px solid;
border-radius: 4px;
}
.icon.play::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 0;
height: 10px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 6px solid;
top: 4px;
left: 7px;
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 0;
height: 10px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 6px solid;
top: 4px;
left: 7px;
}
.icon.pause {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
border: 2px solid;
border-radius: 4px;
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
border: 2px solid;
border-radius: 4px;
}
.icon.pause::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 6px;
height: 6px;
left: 6px;
top: 6px;
border-left: 2px solid;
border-right: 2px solid;
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 6px;
height: 6px;
left: 6px;
top: 6px;
border-left: 2px solid;
border-right: 2px solid;
}
.icon.fastforward {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
border: 2px solid;
border-radius: 4px;
width: 22px;
height: 22px;
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
border: 2px solid;
border-radius: 4px;
width: 22px;
height: 22px;
}
.icon.fastforward::after,
.icon.fastforward::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 6px;
height: 6px;
border-right: 2px solid;
border-top: 2px solid;
transform: rotate(45deg);
top: 6px;
right: 5px;
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 6px;
height: 6px;
border-right: 2px solid;
border-top: 2px solid;
transform: rotate(45deg);
top: 6px;
right: 5px;
}
.icon.fastforward::after {
right: 9px;
right: 9px;
}
.icon.skip-forward {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
border: 2px solid;
border-radius: 4px;
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
border: 2px solid;
border-radius: 4px;
}
.icon.skip-forward::after,
.icon.skip-forward::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
height: 8px;
top: 5px;
content: "";
display: block;
box-sizing: border-box;
position: absolute;
height: 8px;
top: 5px;
}
.icon.skip-forward::before {
width: 2px;
border-radius: 2px;
left: 11px;
background: currentColor;
width: 2px;
border-radius: 2px;
left: 11px;
background: currentColor;
}
.icon.skip-forward::after {
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 5px solid;
left: 5px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 5px solid;
left: 5px;
}

12
public/js/smartforms.js
View file

@ -21,6 +21,18 @@ document.addEventListener("DOMContentLoaded", () => {
const form_data = new FormData(form);
for (const [key, value] of form_data.entries()) {
if (key.length === 0) {
continue;
}
if (typeof value === "string" && value.length === 0) {
const input = form.querySelector(`[name="${key}"]`);
const should_submit_empty = input && input.dataset["smartformsSubmitEmpty"];
if (!should_submit_empty) {
continue;
}
}
const elements = key.split(".");
let current = json;
for (const element of elements.slice(0, elements.length - 1)) {

279
public/sidebar/sidebar.html
View file

@ -129,63 +129,244 @@
<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 DEFAULT_AVATAR_URL = `//${window.location.host}/images/default_avatar.gif`;
new MutationObserver((mutations, observer) => {
mutations.forEach((mutation) => {
const user_json = document.body.dataset.user;
const user = user_json
? JSON.parse(user_json)
: {
username: "",
meta: {
avatar: DEFAULT_AVATAR_URL,
},
};
const ids = document.querySelectorAll("[data-bind__user_id]");
for (const id of ids) {
const bound_to =
typeof id.dataset["bind__user_id"] === "string" &&
id.dataset["bind__user_id"].length > 0
? id.dataset["bind__user_id"]
: "innerHTML";
avatar[bound_to] = user.id ?? "<unknown>";
}
const avatars = document.querySelectorAll("[data-bind__user_meta_avatar]");
for (const avatar of avatars) {
const bound_to =
typeof avatar.dataset["bind__user_meta_avatar"] === "string" &&
avatar.dataset["bind__user_meta_avatar"].length
? avatar.dataset["bind__user_meta_avatar"]
: "innerHTML";
avatar[bound_to] = user.meta?.avatar ?? DEFAULT_AVATAR_URL;
}
const usernames = document.querySelectorAll("[data-bind__user_username]");
for (const username of usernames) {
const bound_to =
typeof username.dataset["bind__user_username"] === "string" &&
username.dataset["bind__user_username"].length > 0
? username.dataset["bind__user_username"]
: "innerHTML";
username[bound_to] = user.username;
}
});
}).observe(document.body, {
attributes: true,
attributeFilter: ["data-user"],
});
</script>
<style type="text/css">
.profile-container {
margin: 1rem auto;
max-width: 1024px;
padding: 1rem;
}
.profile-container .avatar-container {
position: relative;
width: 100%;
max-width: 200px;
}
.profile-container .avatar-container #user-avatar {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
.profile-container .avatar-container input[type="file"] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
cursor: pointer;
}
</style>
<div class="profile-container">
<div class="avatar-container">
<img
id="user-avatar"
src="/images/default_avatar.gif"
alt="User Avatar"
data-bind__user_meta_avatar="src"
/>
<input type="file" accept="image/*" name="avatar" />
<script>
const avatar_file_input = document.querySelector('input[name="avatar"]');
avatar_file_input.addEventListener("change", async (event) => {
const user_json = document.body.dataset.user;
if (!user_json) {
return alert("You must be logged in.");
}
const user = JSON.parse(user_json);
const avatar = avatar_file_input.files[0];
if (!avatar || !avatar.type || !avatar.type.includes("image")) {
return alert("You must select a valid image to upload as your avatar.");
}
// TODO: actually enforce this on the upload in serverus somehow
if (avatar.size > 512_000) {
return alert("512K is the largest allowed avatar size.");
}
const body = new FormData();
body.append("file", avatar, encodeURIComponent(avatar.name));
const avatar_path = `/files/users/${user.id}/avatars/${encodeURIComponent(avatar.name)}`;
const avatar_upload_response = await api.fetch(avatar_path, {
method: "PUT",
body,
});
if (!avatar_upload_response.ok) {
const error = await avatar_upload_response.json();
return alert(error?.error?.message ?? "Unknown error.");
}
const updated_user = { ...user };
updated_user.meta = updated_user.meta ?? {};
updated_user.meta.avatar = `//${window.location.host}${avatar_path}`;
const saved_user_response = await api.fetch(`/api/users/${user.id}`, {
method: "PUT",
json: updated_user,
});
if (!saved_user_response.ok) {
const error = await avatar_upload_response.json();
return alert(error?.error?.message ?? "Unknown error.");
}
const saved_user = await saved_user_response.json();
document.body.dataset.user = JSON.stringify(saved_user);
document.body.dataset.perms = saved_user.permissions.join(":");
});
</script>
</div>
<div class="username-container">
<span class="username" data-bind__user_username></span>
</div>
<div class="notifications-settings-container">
<button class="mockup" onclick="NOTIFICATIONS.request_permission()">
Enable Notifications
</button>
</div>
<form data-smart="true" data-method="DELETE" action="/api/auth">
<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 = (response) => {
if (!response.deleted) {
alert("error logging out? please reload.");
return;
}
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";
delete document.body.dataset.user;
delete document.body.dataset.perms;
window.location = "/";
};
}
</script>
<button class="primary">Log Out</button>
</form>
</div>
<div class="topics-container">
<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>
</div>

3
public/tabs/blurbs/README.md Normal file
View file

@ -0,0 +1,3 @@
# Blurbs
Blurbs are going to be short (128? 256? character thoughts)

16
public/tabs/blurbs/blurbs.html Normal file
View file

@ -0,0 +1,16 @@
<div id="blurb" class="tab">
<input
type="radio"
name="top-level-tabs"
id="blurb-tab-input"
class="tab-switch"
data-view="blurb"
/>
<label for="blurb-tab-input" class="tab-label mockup"
><div class="icon blurb"></div>
<div class="label">Blurbs</div></label
>
<div class="tab-content">
<!-- #include file="./README.md" -->
</div>
</div>

4
public/tabs/calendar/README.md
View file

@ -1,3 +1,3 @@
# calendar
# Calendar
The calendar should help people coordinate events.
The calendar should help people coordinate events around a topic.

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

@ -6,7 +6,7 @@
class="tab-switch"
data-view="calendar"
/>
<label for="calendar-tab-input" class="tab-label"
<label for="calendar-tab-input" class="tab-label mockup"
><div class="icon calendar"></div>
<div class="label">Calendar</div></label
>

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

@ -11,7 +11,12 @@
left: 0;
right: 0;
bottom: 5rem;
padding: 0.5rem;
padding: 1.5rem 1.5rem 0.75rem 1.5rem;
}
@media screen and (max-width: 1200px) {
#chat #topic-chat-content {
padding: 0.75rem;
}
}
#chat #topic-chat-entry-container {
@ -51,7 +56,7 @@
cursor: pointer;
align-content: center;
border-radius: var(--border-radius);
border: 1px solid var(--text);
border: 1px solid rgba(128, 128, 128, 0.2);
}
#chat #topic-chat-entry-container form textarea {
@ -60,6 +65,10 @@
background: inherit;
color: inherit;
border-radius: var(--border-radius);
border: 1px solid rgba(128, 128, 128, 0.2);
resize: none;
background: rgba(0, 0, 0, 0.1);
padding: 0.4rem;
}
#chat .message-container {
@ -67,7 +76,7 @@
transition: all 0.33s;
background: rgba(255, 255, 255, 0.03);
margin-top: 0.75rem;
padding: 2px;
padding: 0.5rem;
border-radius: var(--border-radius);
}
@ -137,6 +146,7 @@
padding: 0.25rem 0 0 0;
text-align: center;
text-wrap: nowrap;
background: none;
}
#chat .message-container .message-actions-container label {

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

@ -26,7 +26,6 @@
id="file-upload-and-share-input"
aria-label="Upload and share file"
type="file"
name="file-upload-and-share"
multiple
/>
<label for="file-upload-and-share-input">
@ -36,7 +35,7 @@
id="topic-chat-input"
class="topic-chat-input"
rows="1"
name="data.message"
name="data.content"
></textarea>
<button id="topic-chat-send" class="primary" aria-label="Send a message">
<i class="icon send"></i>
@ -44,9 +43,7 @@
<script>
{
const form = document.currentScript.closest("form");
const file_input = document.querySelector(
'input[name="file-upload-and-share"]',
);
const file_input = document.querySelector('input[type="file"]');
const chat_input = document.getElementById("topic-chat-input");
const parent_id_input = document.getElementById("parent-id");
const topic_chat_container =
@ -64,7 +61,7 @@
form.on_submit = async (event) => {
const user = JSON.parse(document.body.dataset.user);
const topic_id = topic_chat_container.dataset.topic_id;
const topic_id = document.body.dataset.topic;
if (!topic_id) {
alert("Failed to get topic_id!");
return false;
@ -123,10 +120,10 @@
if (form.uploaded_urls.length) {
json.data = json.data ?? {};
json.data.message =
(typeof json.data.message === "string" &&
json.data.message.trim().length
? json.data.message.trim() + "\n"
json.data.content =
(typeof json.data.content === "string" &&
json.data.content.trim().length
? json.data.content.trim() + "\n"
: "") + form.uploaded_urls.join("\n");
}

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

@ -282,10 +282,10 @@ function render_text_event(topic_chat_content, event, creator, existing_element)
<div class="icon more-borderless"></div>
</label>
<button class="message-action" data-action="react"><i class="icon more-circle"></i><span class="action-name">React</span></button>
<button class="message-action mockup" data-action="react"><i class="icon 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>
<button class="message-action mockup" data-action="forward_copy"><i class="icon forward-copy"></i><span class="action-name">Copy Link</span></button>
<button class="message-action mockup" data-action="delete"><i class="icon trash"></i><span class="action-name">Delete</span></button>
</div>
<div class="info-container">
<div class="avatar-container">
@ -299,7 +299,7 @@ function render_text_event(topic_chat_content, event, creator, existing_element)
<span class="short">${event_datetime.short}</span>
</div>
</div>
<div class="message-content-container">${message_text_to_html(event.data.message)}</div>
<div class="message-content-container">${message_text_to_html(event.data.content)}</div>
</div>`;
if (existing_element) {

3
public/tabs/essays/README.md Normal file
View file

@ -0,0 +1,3 @@
# Essays
Essays are long-form, authored posts intended to be effectively, a broadcast.

16
public/tabs/essays/essays.html Normal file
View file

@ -0,0 +1,16 @@
<div id="essays" class="tab">
<input
type="radio"
name="top-level-tabs"
id="essays-tab-input"
class="tab-switch"
data-view="essays"
/>
<label for="essays-tab-input" class="tab-label mockup"
><div class="icon essay"></div>
<div class="label">Essays</div></label
>
<div class="tab-content">
<!-- #include file="./README.md" -->
</div>
</div>

3
public/tabs/forum/README.md Normal file
View file

@ -0,0 +1,3 @@
# Forum
Forums are for more thoughtful and long form discussion.

23
public/tabs/forum/forum.html Normal file
View file

@ -0,0 +1,23 @@
<style>
.forum-container {
padding: 2rem;
}
</style>
<div id="forum" class="tab">
<input
type="radio"
name="top-level-tabs"
id="forum-tab-input"
class="tab-switch"
data-view="forum"
/>
<label for="forum-tab-input" class="tab-label mockup"
><div class="icon forum"></div>
<div class="label">Forum</div></label
>
<div class="tab-content forum-container">
<button>
<i class="icon plus" style="display: inline-block; margin-right: 1rem"></i>New Thread
</button>
</div>
</div>

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

@ -6,7 +6,7 @@
class="tab-switch"
data-view="resources"
/>
<label for="resources-tab-input" class="tab-label"
<label for="resources-tab-input" class="tab-label mockup"
><div class="icon resources"></div>
<div class="label">Resources</div></label
>

4
public/tabs/tabs.html
View file

@ -122,7 +122,9 @@
<div class="tabs">
<!-- #include file="./chat/chat.html" -->
<!-- #include file="./blurbs/blurbs.html" -->
<!-- #include file="./forum/forum.html" -->
<!-- #include file="./essays/essays.html" -->
<!-- #include file="./resources/resources.html" -->
<!-- #include file="./calendar/calendar.html" -->
<!-- #include file="./profile/profile.html" -->
</div>