fix: ensure we are loading events properly during fsdb scan

fix: various styling issues on smaller screens
fix: map z-index

public/api/events/index.ts

@@ -1,5 +1,5 @@
 import lurid from '@andyburke/lurid';
-import { get_session, get_user, PRECHECK_TABLE, require_user, user_has_write_permission_for_event } from '../../../utils/prechecks.ts';
+import { get_session, get_user, PRECHECK_TABLE, require_user, user_has_create_permission_for_event } from '../../../utils/prechecks.ts';
 import * as CANNED_RESPONSES from '../../../utils/canned_responses.ts';
 import { EVENT, EVENTS, VALIDATE_EVENT } from '../../../models/event.ts';
 import parse_body from '../../../utils/bodyparser.ts';
@@ -39,7 +39,14 @@ export async function GET(request: Request, meta: Record<string, any>): Promise<
 			const {
 				event_type,
 				event_id
-			} = /^.*\/events\/(?<event_type>.*?)\/.*\/(?<event_id>[A-Za-z-]+)\.json$/.exec(entry.path)?.groups ?? {};
+			} = /^.*\/events\/.*\/(?<event_type>.*?)\:(?<event_id>[A-Za-z-]+)\.json$/.exec(entry.path)?.groups ?? {};
+
+			console.dir({
+				entry,
+				event_type,
+				event_id,
+				query: meta.query
+			});
 
 			if (meta.query.after_id && event_id <= meta.query.after_id) {
 				return false;
@@ -210,7 +217,7 @@ export async function POST(req: Request, meta: Record<string, any>): Promise<Res
 			});
 		}
 
-		if (!user_has_write_permission_for_event(meta.user, event)) {
+		if (!user_has_create_permission_for_event(meta.user, event)) {
 			return CANNED_RESPONSES.permission_denied();
 		}
 

public/base.css

@@ -21,7 +21,9 @@
 
 @media (prefers-color-scheme: light) {
 	:root {
-		--bg: hsl(from var(--base-color) h 20% 95%);
+		--bg: hsl(from var(--base-color) h 20% 93%);
+		--bg-darker: hsl(from var(--base-color) h 20% 88%);
+		--bg-lighter: hsl(from var(--base-color) h 20% 98%);
 
 		--text: hsl(from var(--base-color) h 5% 5%);
 		--accent: hsl(from var(--base-color) h calc(s + 10) calc(l + 20));

public/js/app.js

@@ -11,6 +11,11 @@ const APP = {
 	on: function( event_name, callback ) {
 		this._event_callbacks[ event_name ] = this._event_callbacks[ event_name ] ?? new Set();
 		this._event_callbacks[event_name ].add( callback );
+
+		if ( event_name === 'load' && this._loaded ) {
+			setTimeout( callback, 0 );
+		}
+
 		return true;
 	},
 
@@ -90,6 +95,7 @@ const APP = {
 	},
 
 	load: async function() {
+		this._loaded = false;
 		this.server = {
 			name: document.title,
 			url: window.location.origin ?? window.location.href,
@@ -126,6 +132,7 @@ const APP = {
 		this.check_if_logged_in();
 		this.extract_url_hash_info();
 		this._emit( 'load', this );
+		this._loaded = true;
 	},
 
 	update_user: async function( user ) {

public/signup_login_wall.html

@@ -18,16 +18,40 @@
 
 		#auth-container {
 			width: 95%;
+			max-height: calc(min(90vh,900px));
+			border-radius: 10px;
 			position: relative;
-			background: hsl(from var(--bg) h s calc(l/1.1) / 0.5);
+			background: var(--bg-lighter);
 			max-width: 40em;
 			margin: 0 auto;
-			border-radius: calc( var(--border-radius) * 2);
+			border-radius: calc( var(--border-radius) * 2.5);
+			padding: 2em 1em;
+			overflow-y: scroll;
 
 			transition: all 0.33s ease;
 			animation: zoomsettle 0.4s ease;
 		}
 
+		#signup-tab,
+		#login-tab {
+			padding: 0.5em;
+			height: auto;
+		}
+
+		@media screen and (max-width: 480px) {
+			#auth-container {
+				padding: 0.5em;
+			}
+
+			#auth-container h1 {
+				font-size: x-large;
+			}
+
+			#auth-container h3 {
+				font-size: medium;
+			}
+		}
+
 		@keyframes zoomsettle {
 			from {
 				opacity: 0;

public/tabs/chat/chat.css

@@ -73,18 +73,18 @@
 	padding: 0;
 }
 
-.user-tock.time-tock:has(+ .user-tock.time-tick),
+#chat-container .user-tock.time-tock:has(+ .user-tock.time-tick),
-.user-tock.time-tick:has(+ .user-tock.time-tock),
+#chat-container .user-tock.time-tick:has(+ .user-tock.time-tock),
-.user-tick.time-tock:has(+ .user-tick.time-tick),
+#chat-container .user-tick.time-tock:has(+ .user-tick.time-tick),
-.user-tick.time-tick:has(+ .user-tick.time-tock),
+#chat-container .user-tick.time-tick:has(+ .user-tick.time-tock),
-.user-tock.time-tock:has(+ .user-tick.time-tick),
+#chat-container .user-tock.time-tock:has(+ .user-tick.time-tick),
-.user-tock.time-tick:has(+ .user-tick.time-tock),
+#chat-container .user-tock.time-tick:has(+ .user-tick.time-tock),
-.user-tick.time-tock:has(+ .user-tock.time-tick),
+#chat-container .user-tick.time-tock:has(+ .user-tock.time-tick),
-.user-tick.time-tick:has(+ .user-tock.time-tock),
+#chat-container .user-tick.time-tick:has(+ .user-tock.time-tock),
-.user-tock.time-tock:last-of-type,
+#chat-container .user-tock.time-tock:last-of-type,
-.user-tock.time-tick:last-of-type,
+#chat-container .user-tock.time-tick:last-of-type,
-.user-tick.time-tock:last-of-type,
+#chat-container .user-tick.time-tock:last-of-type,
-.user-tick.time-tick:last-of-type {
+#chat-container .user-tick.time-tick:last-of-type {
 	/* border: 1px dotted red; */
 	margin-bottom: 1rem !important;
 	padding-bottom: 0.25rem !important;
@@ -92,31 +92,31 @@
 	margin-top: 0.5rem !important;
 }
 
-.user-tock.time-tock:has(+ .user-tock.time-tock),
+#chat-container .user-tock.time-tock:has(+ .user-tock.time-tock),
-.user-tock.time-tick:has(+ .user-tock.time-tick),
+#chat-container .user-tock.time-tick:has(+ .user-tock.time-tick),
-.user-tick.time-tock:has(+ .user-tick.time-tock),
+#chat-container .user-tick.time-tock:has(+ .user-tick.time-tock),
-.user-tick.time-tick:has(+ .user-tick.time-tick) {
+#chat-container .user-tick.time-tick:has(+ .user-tick.time-tick) {
 	/* border: 1px dotted blue; */
 	margin-bottom: -0.75rem !important;
 	padding-top: 0 !important;
 }
 
-.user-tock.time-tock+.user-tock.time-tick:has(+ .user-tock.time-tick),
+#chat-container .user-tock.time-tock+.user-tock.time-tick:has(+ .user-tock.time-tick),
-.user-tock.time-tick+.user-tock.time-tock:has(+ .user-tock.time-tock),
+#chat-container .user-tock.time-tick+.user-tock.time-tock:has(+ .user-tock.time-tock),
-.user-tick.time-tock+.user-tick.time-tick:has(+ .user-tick.time-tick),
+#chat-container .user-tick.time-tock+.user-tick.time-tick:has(+ .user-tick.time-tick),
-.user-tick.time-tick+.user-tick.time-tock:has(+ .user-tick.time-tock),
+#chat-container .user-tick.time-tick+.user-tick.time-tock:has(+ .user-tick.time-tock),
-.user-tock.time-tock+.user-tick.time-tick:has(+ .user-tick.time-tick),
+#chat-container .user-tock.time-tock+.user-tick.time-tick:has(+ .user-tick.time-tick),
-.user-tock.time-tick+.user-tick.time-tock:has(+ .user-tick.time-tock),
+#chat-container .user-tock.time-tick+.user-tick.time-tock:has(+ .user-tick.time-tock),
-.user-tick.time-tock+.user-tock.time-tick:has(+ .user-tock.time-tick),
+#chat-container .user-tick.time-tock+.user-tock.time-tick:has(+ .user-tock.time-tick),
-.user-tick.time-tick+.user-tock.time-tock:has(+ .user-tock.time-tock) {
+#chat-container .user-tick.time-tick+.user-tock.time-tock:has(+ .user-tock.time-tock) {
 	/* border: 1px dotted green; */
 	margin-bottom: -0.75rem !important;
 }
 
-#chat .message-container.user-tick.time-tick+.message-container.user-tick.time-tick .info-container,
+#chat-container .message-container.user-tick.time-tick+.message-container.user-tick.time-tick .info-container,
-#chat .message-container.user-tick.time-tock+.message-container.user-tick.time-tock .info-container,
+#chat-container .message-container.user-tick.time-tock+.message-container.user-tick.time-tock .info-container,
-#chat .message-container.user-tock.time-tick+.message-container.user-tock.time-tick .info-container,
+#chat-container .message-container.user-tock.time-tick+.message-container.user-tock.time-tick .info-container,
-#chat .message-container.user-tock.time-tock+.message-container.user-tock.time-tock .info-container {
+#chat-container .message-container.user-tock.time-tock+.message-container.user-tock.time-tock .info-container {
 	opacity: 0;
 	visibility: hidden;
 	height: 0;
@@ -170,7 +170,7 @@
 	display: none;
 }
 
-#chat .message-container .message-actions-container input[type="checkbox"]:checked~.message-action {
+#chat-container .message-container .message-actions-container input[type="checkbox"]:checked~.message-action {
 	opacity: 1;
 	width: 3.25rem;
 	margin-right: 1.25rem;

public/tabs/essays/essays.html

@@ -14,6 +14,7 @@
 			"preview"
 			"title"
 			"info"
+			"reactions"
 			"content"
 			"newessay"
 			"replies";
@@ -71,6 +72,10 @@
 		font-size: xx-large;
 	}
 
+	.essay-container .reactions-container {
+		grid-area: reactions;
+	}
+
 	.essay-container .content-container {
 		grid-area: content;
 		padding-left: 0.25rem;
@@ -78,6 +83,10 @@
 		font-size: large;
 	}
 
+	.essay-container .content-container .html-from-markdown {
+		padding: 1em;
+	}
+
 	.essay-container button[commandfor="eventactionspopover"] {
 		position: absolute;
 		bottom: 0.25rem;
@@ -189,11 +198,11 @@
 							<span class="short">${context.essay_datetime.short}</span>
 						</div>
 					</div>
+					<div class="reactions-container"></div>
 					<div class="title-container">${context.essay.data.title}</div>
 					<div class="content-container">
 						${htmlify(md_to_html(context.essay.data.essay))}
 					</div>
-					<div class="reactions-container"></div>
 					<button class="icon more" commandfor="eventactionspopover"></button>
 				</div>
 			</template>

public/tabs/forum/forum.html

@@ -11,6 +11,7 @@
 		grid-template-areas:
 			"expander	preview	info"
 			"expander	preview	subject"
+			".			.		reactions"
 			".			.		content"
 			".			.		newpost"
 			".			.		replies";
@@ -111,6 +112,10 @@
 		margin-top: 2rem;
 	}
 
+	.post-container .reactions-container {
+		grid-area: reactions;
+	}
+
 	.post-container button[commandfor="eventactionspopover"] {
 		position: absolute;
 		bottom: 0.25rem;
@@ -125,6 +130,35 @@
 	.post-container .replies-container {
 		grid-area: replies;
 	}
+
+	@media screen and (max-width: 480px) {
+		.post-container {
+			grid-template-rows: 120px auto auto auto 1fr;
+			grid-template-columns: auto 1fr;
+			grid-template-areas:
+				".			preview"
+				"expander	info"
+				"expander	subject"
+				".			reactions"
+				".			content"
+				".			newpost"
+				".			replies";
+
+			max-height: 16rem;
+		}
+
+		.post-container .media-preview-container {
+			overflow: hidden;
+			display: grid;
+			align-content: center;
+			width: 100%;
+			height: 7rem;
+		}
+
+		.post-container .media-preview-container img {
+			object-fit: cover;
+		}
+	}
 </style>
 
 <input

public/tabs/map/map.html

@@ -26,6 +26,7 @@
 		left: 4em;
 		right: 4em;
 		bottom: 4em;
+		z-index: 0;
 	}
 
 	@media screen and (max-width: 640px) {

public/tabs/tabs.html

@@ -8,6 +8,7 @@
 	});
 
 	APP.on( 'load', () => {
+		console.log( 'loaded' );
 		const tab_switchers = document.querySelectorAll(".tabswitch");
 		for (const tab_switch of tab_switchers) {
 			tab_switch.addEventListener("input", (event) => {
@@ -15,7 +16,7 @@
 				const view = tab_selector.dataset.view;
 
 				if (view) {
-					window.location.hash = `/${view}${ document.body.dataset.channel ? `/channel/${ document.body.dataset.channel }` : '' }`;
+					window.location.hash = `/${view}`;
 				}
 			});
 		}

utils/prechecks.ts

@@ -44,6 +44,9 @@ export function require_user(
 	}
 }
 
-export function user_has_write_permission_for_event(user: USER, event: EVENT) {
+export function user_has_create_permission_for_event(user: USER, event: EVENT) {
 	return user.permissions.includes('events.create.' + event.type) || (Deno.env.get('DENO_ENV') === 'test' && event.type === 'test');
 }
+export function user_has_write_permission_for_event(user: USER, event: EVENT) {
+	return user.permissions.includes('events.write.' + event.type) || (Deno.env.get('DENO_ENV') === 'test' && event.type === 'test');
+}