From d006be251c18ac8790cb907c07ab06376d849f14 Mon Sep 17 00:00:00 2001
From: Hornwitser <code@hornwitser.no>
Date: Sat, 6 Sep 2025 15:16:02 +0200
Subject: [PATCH 01/10] Create a per-user admin page to inspect users

Add page to allow admins to inspect all of the details stored on the
server of a user account.  For now this is just the UserDetails, but
in the future this is planned to be expanded to also show sessions
and logs.
---
 components/TableUsers.vue            | 21 +++----
 pages/{admin.vue => admin/index.vue} |  0
 pages/admin/users/[id].vue           | 94 ++++++++++++++++++++++++++++
 server/api/users/[id]/details.get.ts | 34 ++++++++++
 server/utils/user.ts                 | 20 +++++-
 shared/types/api.ts                  | 22 +++----
 stores/users.ts                      | 11 ++++
 7 files changed, 176 insertions(+), 26 deletions(-)
 rename pages/{admin.vue => admin/index.vue} (100%)
 create mode 100644 pages/admin/users/[id].vue
 create mode 100644 server/api/users/[id]/details.get.ts

diff --git a/components/TableUsers.vue b/components/TableUsers.vue
index 7e8d006..789f902 100644
--- a/components/TableUsers.vue
+++ b/components/TableUsers.vue
@@ -17,7 +17,12 @@
 			<tr v-for="user in usersStore.users.values()">
 				<td>{{ user.id }}</td>
 				<td>
-					{{ user.name }}
+					<NuxtLink :to="`/admin/users/${user.id}`">
+						<template v-if="user.name">
+							{{ user.name }}
+						</template>
+						<i v-else>(empty)</i>
+					</NuxtLink>
 				</td>
 				<td>
 					<select
@@ -39,7 +44,7 @@
 					<button
 						v-if="user.isModified()"
 						type="button"
-						@click="saveUser(user);"
+						@click="usersStore.saveUser(user);"
 					>Save</button>
 					<button
 						v-if="user.isModified()"
@@ -55,18 +60,6 @@
 <script lang="ts" setup>
 useEventSource();
 const usersStore = useUsersStore();
-
-async function saveUser(user: ClientUser) {
-	try {
-		await $fetch("/api/admin/user", {
-			method: "PATCH",
-			body: user.toApi(),
-		});
-	} catch (err: any) {
-		console.error(err);
-		alert(err?.data?.message ?? err.message);
-	}
-}
 </script>
 
 <style>
diff --git a/pages/admin.vue b/pages/admin/index.vue
similarity index 100%
rename from pages/admin.vue
rename to pages/admin/index.vue
diff --git a/pages/admin/users/[id].vue b/pages/admin/users/[id].vue
new file mode 100644
index 0000000..0579b44
--- /dev/null
+++ b/pages/admin/users/[id].vue
@@ -0,0 +1,94 @@
+<template>
+	<main v-if="userDetails.deleted">
+		<h1>Deleted user {{ id }}</h1>
+	</main>
+	<main v-else>
+		<h1>User {{ user.name }}</h1>
+		<dl>
+			<dt>
+				<label for="user-type">
+					Type
+				</label>
+			</dt>
+			<dd>
+				<select
+					v-if='user.type !== "anonymous"'
+					v-model="user.type"
+				>
+					<option value="regular">Regular</option>
+					<option value="crew">Crew</option>
+					<option value="admin">Admin</option>
+				</select>
+				<template v-else>
+					{{ user.type }}
+				</template>
+			</dd>
+			<dt>Interested Events:</dt>
+			<dd>{{ userDetails.interestedEventIds }}</dd>
+			<dt>Interested Slots:</dt>
+			<dd>{{ userDetails.interestedEventSlotIds }}</dd>
+			<dt>Timezone:</dt>
+			<dd>{{ userDetails.timezone }}</dd>
+			<dt>Locale:</dt>
+			<dd>{{ userDetails.locale }}</dd>
+		</dl>
+		<button
+			:disabled="!user.isModified()"
+			type="button"
+			@click="usersStore.saveUser(user);"
+		>Save</button>
+		<button
+			:disabled="!user.isModified()"
+			type="button"
+			@click="user.discard()"
+		>Discard</button>
+	</main>
+</template>
+
+<script lang="ts" setup>
+import type { ApiTombstone, ApiUserDetails } from '~/shared/types/api';
+
+useHead({
+	title: "Admin",
+});
+
+useEventSource();
+const route = useRoute();
+const usersStore = useUsersStore();
+await usersStore.fetch();
+
+const id = computed(() => {
+	const id = queryToNumber(route.params.id);
+	if (id === undefined) {
+		throw createError({
+			statusCode: 400,
+			statusMessage: "Bad Request",
+			message: "User id required",
+		});
+	}
+	return id;
+});
+const user = computed(() => {
+	const user =  usersStore.users.get(id.value);
+	if (user === undefined) {
+		throw createError({
+			statusCode: 404,
+			statusMessage: "Not Found",
+			message: "User not found",
+		});
+	}
+	return user;
+});
+
+const { pending, data, error } = await useFetch(() => `/api/users/${id.value}/details`);
+const userDetails = data as Ref<ApiUserDetails | ApiTombstone>;
+</script>
+
+<style>
+dl {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	column-gap: 0.5rem;
+}
+
+</style>
diff --git a/server/api/users/[id]/details.get.ts b/server/api/users/[id]/details.get.ts
new file mode 100644
index 0000000..4c6e07d
--- /dev/null
+++ b/server/api/users/[id]/details.get.ts
@@ -0,0 +1,34 @@
+import { z } from "zod/v4-mini";
+import { readUsers } from "~/server/database";
+import { serverUserToApiDetails } from "~/server/utils/user";
+
+const integerStringSchema = z.pipe(
+	z.string().check(z.regex(/^\d+/)),
+	z.transform(Number)
+);
+
+const detailsSchema = z.object({
+	id: integerStringSchema,
+});
+
+export default defineEventHandler(async (event) => {
+	await requireServerSessionWithAdmin(event);
+	const users = await readUsers();
+	const { success, error, data: params } = detailsSchema.safeParse(getRouterParams(event));
+	if (!success) {
+		throw createError({
+			status: 400,
+			statusText: "Bad Request",
+			message: z.prettifyError(error),
+		});
+	}
+	const user = users.find(user => user.id === params.id);
+	if (!user) {
+		throw createError({
+			statusCode: 404,
+			statusMessage: "Not found",
+		});
+	}
+
+	return serverUserToApiDetails(user);
+})
diff --git a/server/utils/user.ts b/server/utils/user.ts
index ecb8b70..4cae9b2 100644
--- a/server/utils/user.ts
+++ b/server/utils/user.ts
@@ -3,7 +3,7 @@
 	SPDX-License-Identifier: AGPL-3.0-or-later
 */
 import type { ServerUser } from "~/server/database"
-import type { ApiTombstone, ApiUser } from "~/shared/types/api";
+import type { ApiTombstone, ApiUser, ApiUserDetails } from "~/shared/types/api";
 
 export function serverUserToApi(user: ServerUser): ApiUser | ApiTombstone {
 	if (user.deleted) {
@@ -20,3 +20,21 @@ export function serverUserToApi(user: ServerUser): ApiUser | ApiTombstone {
 		name: user.name,
 	}
 }
+
+export function serverUserToApiDetails(user: ServerUser): ApiUserDetails | ApiTombstone {
+	if (user.deleted) {
+		return {
+			id: user.id,
+			updatedAt: user.updatedAt,
+			deleted: true,
+		}
+	}
+	return {
+		id: user.id,
+		updatedAt: user.updatedAt,
+		interestedEventIds: user.interestedEventIds,
+		interestedEventSlotIds: user.interestedEventSlotIds,
+		timezone: user.timezone,
+		locale: user.locale,
+	}
+}
diff --git a/shared/types/api.ts b/shared/types/api.ts
index 7b82c80..dbec20a 100644
--- a/shared/types/api.ts
+++ b/shared/types/api.ts
@@ -35,17 +35,7 @@ export const apiUserTypeSchema = z.union([
 ])
 export type ApiUserType = z.infer<typeof apiUserTypeSchema>;
 
-export interface ApiAccount {
-	id: Id,
-	updatedAt: string,
-	type: ApiUserType,
-	/** Name of the account. Not present on anonymous accounts */
-	name?: string,
-	interestedEventIds?: number[],
-	interestedEventSlotIds?: number[],
-	timezone?: string,
-	locale?: string,
-}
+export type ApiAccount = ApiUser & ApiUserDetails
 
 export const apiAccountPatchSchema = z.object({
 	name: z.optional(z.string()),
@@ -151,6 +141,16 @@ export const apiUserPatchSchema = z.object({
 });
 export type ApiUserPatch = z.infer<typeof apiUserPatchSchema>;
 
+export interface ApiUserDetails {
+	id: Id,
+	updatedAt: string,
+	deleted?: false,
+	interestedEventIds?: number[],
+	interestedEventSlotIds?: number[],
+	timezone?: string,
+	locale?: string,
+}
+
 export interface ApiAccountUpdate {
 	type: "account-update",
 	data: ApiAccount,
diff --git a/stores/users.ts b/stores/users.ts
index b0ee5fb..57ae4f3 100644
--- a/stores/users.ts
+++ b/stores/users.ts
@@ -62,6 +62,17 @@ export const useUsersStore = defineStore("users", () => {
 			state.fetched.value = false;
 			await actions.fetch();
 		},
+		async saveUser(user: ClientUser) {
+			try {
+				await $fetch("/api/admin/user", {
+					method: "PATCH",
+					body: user.toApi(),
+				});
+			} catch (err: any) {
+				console.error(err);
+				alert(err?.data?.message ?? err.message);
+			}
+		},
 	}
 
 	appEventSource?.addEventListener("update", (event) => {

From 9a46ea5af005c8bb9090bdfba84e56678ad81677 Mon Sep 17 00:00:00 2001
From: Hornwitser <code@hornwitser.no>
Date: Sat, 6 Sep 2025 15:54:58 +0200
Subject: [PATCH 02/10] Add cancelled field to event slots

Make it possible to represent one slot out of a multi-slot event being
cancelled by adding a field for it in the slot, in addition to the
existing field on the event itself.
---
 components/TableScheduleEventSlots.vue |  1 +
 shared/types/api.ts                    |  1 +
 utils/client-schedule.nuxt.test.ts     |  5 +++--
 utils/client-schedule.ts               | 10 ++++++++++
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/components/TableScheduleEventSlots.vue b/components/TableScheduleEventSlots.vue
index 5661865..9699f79 100644
--- a/components/TableScheduleEventSlots.vue
+++ b/components/TableScheduleEventSlots.vue
@@ -318,6 +318,7 @@ function newEventSlot(options: { start?: DateTime, end?: DateTime } = {}) {
 		start,
 		end,
 		new Set(newEventLocationIds.value),
+		false,
 		new Set(),
 		0,
 	);
diff --git a/shared/types/api.ts b/shared/types/api.ts
index dbec20a..d1994e0 100644
--- a/shared/types/api.ts
+++ b/shared/types/api.ts
@@ -81,6 +81,7 @@ export const apiScheduleEventSlotSchema = z.object({
 	start: z.string(),
 	end: z.string(),
 	locationIds: z.array(idSchema),
+	cancelled: z.optional(z.boolean()),
 	assigned: z.optional(z.array(z.number())),
 	interested: z.optional(z.number()),
 });
diff --git a/utils/client-schedule.nuxt.test.ts b/utils/client-schedule.nuxt.test.ts
index 2fddf34..e422633 100644
--- a/utils/client-schedule.nuxt.test.ts
+++ b/utils/client-schedule.nuxt.test.ts
@@ -28,8 +28,8 @@ function fixtureClientSchedule(multiSlot = false) {
 		),
 	];
 	const eventSlots = idMap([
-		new ClientScheduleEventSlot(1, false, false, 1, now, now.plus({ hours: 1 }), new Set([left.id]), new Set(), 0),
-		new ClientScheduleEventSlot(2, false, false, multiSlot ? 1 : 2, now, now.plus({ hours: 2 }), new Set([right.id]), new Set(), 0),
+		new ClientScheduleEventSlot(1, false, false, 1, now, now.plus({ hours: 1 }), new Set([left.id]), false, new Set(), 0),
+		new ClientScheduleEventSlot(2, false, false, multiSlot ? 1 : 2, now, now.plus({ hours: 2 }), new Set([right.id]), false, new Set(), 0),
 	]);
 
 	const red = new ClientScheduleRole(1, now, false, "Red", "Is a color.");
@@ -277,6 +277,7 @@ describe("class ClientSchedule", () => {
 				now,
 				now.plus({ hours: 3 }),
 				new Set(),
+				false,
 				new Set(),
 				0,
 			);
diff --git a/utils/client-schedule.ts b/utils/client-schedule.ts
index 2772503..7334163 100644
--- a/utils/client-schedule.ts
+++ b/utils/client-schedule.ts
@@ -295,6 +295,7 @@ export class ClientScheduleEventSlot {
 	serverStart: DateTime;
 	serverEnd: DateTime;
 	serverLocationIds: Set<Id>;
+	serverCancelled: boolean;
 	serverAssigned: Set<Id>;
 	serverInterested: number;
 
@@ -306,6 +307,7 @@ export class ClientScheduleEventSlot {
 		public start: DateTime,
 		public end: DateTime,
 		public locationIds: Set<Id>,
+		public cancelled: boolean,
 		public assigned: Set<Id>,
 		public interested: number,
 	) {
@@ -314,6 +316,7 @@ export class ClientScheduleEventSlot {
 		this.serverStart = start;
 		this.serverEnd = end;
 		this.serverLocationIds = new Set(locationIds);
+		this.serverCancelled = cancelled;
 		this.serverAssigned = new Set(assigned);
 		this.serverInterested = interested;
 	}
@@ -327,6 +330,7 @@ export class ClientScheduleEventSlot {
 			|| this.start.toMillis() !== this.serverStart.toMillis()
 			|| this.end.toMillis() !== this.serverEnd.toMillis()
 			|| !setEquals(this.locationIds, this.serverLocationIds)
+			|| this.cancelled !== this.serverCancelled
 			|| !setEquals(this.assigned, this.serverAssigned)
 			|| this.interested !== this.serverInterested
 		);
@@ -349,6 +353,7 @@ export class ClientScheduleEventSlot {
 		this.start = this.serverStart;
 		this.end = this.serverEnd;
 		this.locationIds = new Set(this.serverLocationIds);
+		this.cancelled = this.serverCancelled;
 		this.assigned = new Set(this.serverAssigned);
 		this.interested = this.serverInterested;
 	}
@@ -360,6 +365,7 @@ export class ClientScheduleEventSlot {
 		start: DateTime,
 		end: DateTime,
 		locationIds: Set<Id>,
+		cancelled: boolean,
 		assigned: Set<Id>,
 		interested: number,
 	) {
@@ -371,6 +377,7 @@ export class ClientScheduleEventSlot {
 			start,
 			end,
 			locationIds,
+			cancelled,
 			assigned,
 			interested,
 		);
@@ -391,6 +398,7 @@ export class ClientScheduleEventSlot {
 			DateTime.fromISO(api.start, opts),
 			DateTime.fromISO(api.end, opts),
 			new Set(api.locationIds),
+			api.cancelled ?? false,
 			new Set(api.assigned),
 			api.interested ?? 0,
 		);
@@ -408,6 +416,7 @@ export class ClientScheduleEventSlot {
 		this.serverStart = DateTime.fromISO(api.start, opts);
 		this.serverEnd = DateTime.fromISO(api.end, opts);
 		this.serverLocationIds = new Set(api.locationIds);
+		this.serverCancelled = api.cancelled ?? false;
 		this.serverAssigned = new Set(api.assigned);
 		this.serverInterested = api.interested ?? 0;
 		if (!wasModified || !this.isModified()) {
@@ -424,6 +433,7 @@ export class ClientScheduleEventSlot {
 			start: toIso(this.start),
 			end: toIso(this.end),
 			locationIds: [...this.locationIds],
+			cancelled: this.cancelled || undefined,
 			assigned: this.assigned.size ? [...this.assigned] : undefined,
 			interested: this.interested || undefined,
 		}

From f29b1f7afd998acd8f3ef3015840cfde9d9e62a5 Mon Sep 17 00:00:00 2001
From: Hornwitser <code@hornwitser.no>
Date: Sat, 6 Sep 2025 16:20:27 +0200
Subject: [PATCH 03/10] Add notice text field to events

Add a general text field for communicating extra information that
readers of the schedule should pay special attention to, for example to
highight a change made to the event.
---
 components/TableScheduleEvents.vue |  1 +
 shared/types/api.ts                |  1 +
 utils/client-schedule.nuxt.test.ts |  6 +++---
 utils/client-schedule.ts           | 10 ++++++++++
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/components/TableScheduleEvents.vue b/components/TableScheduleEvents.vue
index 84871a9..2da2849 100644
--- a/components/TableScheduleEvents.vue
+++ b/components/TableScheduleEvents.vue
@@ -158,6 +158,7 @@ function newEvent() {
 		!newEventPublic.value,
 		"",
 		false,
+		"",
 		newEventDescription.value,
 		0,
 		new Set(),
diff --git a/shared/types/api.ts b/shared/types/api.ts
index d1994e0..eb192a4 100644
--- a/shared/types/api.ts
+++ b/shared/types/api.ts
@@ -92,6 +92,7 @@ export const apiScheduleEventSchema = defineApiEntity({
 	crew: z.optional(z.boolean()),
 	host: z.optional(z.string()),
 	cancelled: z.optional(z.boolean()),
+	notice: z.optional(z.string()),
 	description: z.optional(z.string()),
 	interested: z.optional(z.number()),
 	slots: z.array(apiScheduleEventSlotSchema),
diff --git a/utils/client-schedule.nuxt.test.ts b/utils/client-schedule.nuxt.test.ts
index e422633..9222301 100644
--- a/utils/client-schedule.nuxt.test.ts
+++ b/utils/client-schedule.nuxt.test.ts
@@ -21,10 +21,10 @@ function fixtureClientSchedule(multiSlot = false) {
 
 	const events = [
 		new ClientScheduleEvent(
-			1, now, false, "Up", false, "", false, "What's Up?", 0, new Set(multiSlot ? [1, 2] : [1]),
+			1, now, false, "Up", false, "", false, "", "What's Up?", 0, new Set(multiSlot ? [1, 2] : [1]),
 		),
 		new ClientScheduleEvent(
-			2, now, false, "Down", false, "", false, "", 0, new Set(multiSlot ? [] : [2]),
+			2, now, false, "Down", false, "", false, "", "", 0, new Set(multiSlot ? [] : [2]),
 		),
 	];
 	const eventSlots = idMap([
@@ -174,7 +174,7 @@ describe("class ClientSchedule", () => {
 		],
 		[
 			"event",
-			(schedule) => ClientScheduleEvent.create(schedule, 3, "New location", false, "", false, "", 0, new Set(), { zone, locale })
+			(schedule) => ClientScheduleEvent.create(schedule, 3, "New location", false, "", false, "", "", 0, new Set(), { zone, locale })
 		],
 		[
 			"role",
diff --git a/utils/client-schedule.ts b/utils/client-schedule.ts
index 7334163..17db51b 100644
--- a/utils/client-schedule.ts
+++ b/utils/client-schedule.ts
@@ -136,6 +136,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 	serverCrew: boolean;
 	serverHost: string;
 	serverCancelled: boolean;
+	serverNotice: string;
 	serverDescription: string;
 	serverInterested: number;
 	serverSlotIds: Set<Id>;
@@ -148,6 +149,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 		public crew: boolean,
 		public host: string,
 		public cancelled: boolean,
+		public notice: string,
 		public description: string,
 		public interested: number,
 		public slotIds: Set<Id>,
@@ -157,6 +159,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 		this.serverCrew = crew;
 		this.serverHost = host;
 		this.serverCancelled = cancelled;
+		this.serverNotice = notice;
 		this.serverDescription = description;
 		this.serverInterested = interested;
 		this.serverSlotIds = new Set(slotIds);
@@ -173,6 +176,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 			|| this.crew !== this.serverCrew
 			|| this.host !== this.serverHost
 			|| this.cancelled !== this.serverCancelled
+			|| this.notice !== this.serverNotice
 			|| this.description !== this.serverDescription
 			|| this.interested !== this.serverInterested
 			|| !setEquals(this.slotIds, this.serverSlotIds)
@@ -190,6 +194,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 		this.crew = this.serverCrew;
 		this.host = this.serverHost;
 		this.cancelled = this.serverCancelled;
+		this.notice = this.serverNotice;
 		this.description = this.serverDescription;
 		this.interested = this.serverInterested;
 		for (const id of this.serverSlotIds) {
@@ -208,6 +213,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 		crew: boolean,
 		host: string,
 		cancelled: boolean,
+		notice: string,
 		description: string,
 		interested: number,
 		slotIds: Set<Id>,
@@ -221,6 +227,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 			crew,
 			host,
 			cancelled,
+			notice,
 			description,
 			interested,
 			slotIds,
@@ -241,6 +248,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 			api.crew ?? false,
 			api.host ?? "",
 			api.cancelled ?? false,
+			api.notice ?? "",
 			api.description ?? "",
 			api.interested ?? 0,
 			new Set(api.slots.map(slot => slot.id)),
@@ -258,6 +266,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 		this.serverCrew = api.crew ?? false;
 		this.serverHost = api.host ?? "";
 		this.serverCancelled = api.cancelled ?? false;
+		this.serverNotice = api.notice ?? "";
 		this.serverDescription = api.description ?? "";
 		this.serverInterested = api.interested ?? 0;
 		this.serverSlotIds = new Set(api.slots.map(slot => slot.id));
@@ -281,6 +290,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 			crew: this.crew || undefined,
 			host: this.host || undefined,
 			cancelled: this.cancelled || undefined,
+			notice: this.notice || undefined,
 			description: this.description || undefined,
 			interested: this.interested || undefined,
 			slots: [...this.slots.values()].filter(slot => !slot.deleted).map(slot => slot.toApi()),

From a8c62e6688eb85db382cdbdeea4196d7c1e91441 Mon Sep 17 00:00:00 2001
From: Hornwitser <code@hornwitser.no>
Date: Sat, 6 Sep 2025 16:24:56 +0200
Subject: [PATCH 04/10] Add missing event host field to new events

Add field to input the host of the event when adding a new event to the
table of events.  This also fixes field order in the table being broken.
---
 components/TableScheduleEvents.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/TableScheduleEvents.vue b/components/TableScheduleEvents.vue
index 2da2849..3377ae1 100644
--- a/components/TableScheduleEvents.vue
+++ b/components/TableScheduleEvents.vue
@@ -75,6 +75,12 @@
 								v-model="newEventName"
 							>
 						</td>
+						<td>
+							<input
+								type="text"
+								v-model="newEventHost"
+							>
+						</td>
 						<td>
 							<input
 								type="text"
@@ -136,6 +142,7 @@ function canEdit(event: ClientScheduleEvent) {
 }
 
 const newEventName = ref("");
+const newEventHost = ref("");
 const newEventDescription = ref("");
 const newEventPublic = ref(false);
 function eventExists(name: string) {
@@ -156,7 +163,7 @@ function newEvent() {
 		schedule.value.nextClientId--,
 		newEventName.value,
 		!newEventPublic.value,
-		"",
+		newEventHost.value,
 		false,
 		"",
 		newEventDescription.value,
@@ -166,6 +173,7 @@ function newEvent() {
 	);
 	schedule.value.events.add(event);
 	newEventName.value = "";
+	newEventHost.value = "";
 	newEventDescription.value = "";
 	newEventPublic.value = false;
 }

From 6d9d937c70204db8012a5451cec4ad48457f5927 Mon Sep 17 00:00:00 2001
From: Hornwitser <code@hornwitser.no>
Date: Sat, 6 Sep 2025 16:50:41 +0200
Subject: [PATCH 05/10] Render multi-line diff entries

Rework the rendering of the DiffEntry component to properly show
multiline entries as spanning multiple lines.
---
 components/CardEventSlot.vue |  2 +-
 components/DiffEntry.vue     | 27 ++++++++++++++++-----------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/components/CardEventSlot.vue b/components/CardEventSlot.vue
index 7a15a5e..baa2e3a 100644
--- a/components/CardEventSlot.vue
+++ b/components/CardEventSlot.vue
@@ -13,7 +13,7 @@
 		<p v-if=event?.host>
 			Host: {{ event.host }}
 		</p>
-		<p>{{ event?.description ?? "No description provided" }}</p>
+		<p class="preWrap">{{ event?.description ?? "No description provided" }}</p>
 		<p v-if="locations.length">
 			At {{ locations.map(location => location?.name ?? "unknown").join(" + ") }}
 		</p>
diff --git a/components/DiffEntry.vue b/components/DiffEntry.vue
index 70c2fb0..142f12f 100644
--- a/components/DiffEntry.vue
+++ b/components/DiffEntry.vue
@@ -15,7 +15,12 @@
 			:key="index"
 			:class="type"
 		>
-			{{ text }}
+			<div class="symbol">
+				{{ { "removed": "- ", "added": "+ "}[type] }}
+			</div>
+			<div class="content">
+				{{ text }}
+			</div>
 		</div>
 	</div>
 </template>
@@ -33,20 +38,20 @@ defineProps<{
 	grid-template-columns: 5rem 1fr;
 	column-gap: 1rem;
 }
-.removed {
+:is(.removed, .added) {
+	display: flex;
 	grid-column: 2 / 2;
+	white-space: pre-wrap;
+}
+:is(.removed, .added) .symbol {
+	display: block;
+	font-family: monospace;
+	flex: 0 0 auto;
+}
+.removed {
 	color: color-mix(in srgb, CanvasText, red 40%);
 }
-.removed::before {
-	content: "- ";
-	font-family: monospace;
-}
 .added {
-	grid-column: 2 / 2;
 	color: color-mix(in srgb, CanvasText, green 40%);
 }
-.added::before {
-	content: "+ ";
-	font-family: monospace;
-}
 </style>

From 96681bfd37ce11a9011ab4f66b11e7e7e886992a Mon Sep 17 00:00:00 2001
From: Hornwitser <code@hornwitser.no>
Date: Sat, 6 Sep 2025 16:51:31 +0200
Subject: [PATCH 06/10] Strike through the removed part of diff entries

Communicate better that the part marked with - is the removed part by
striking out the text.
---
 components/DiffEntry.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/DiffEntry.vue b/components/DiffEntry.vue
index 142f12f..b644248 100644
--- a/components/DiffEntry.vue
+++ b/components/DiffEntry.vue
@@ -51,6 +51,9 @@ defineProps<{
 .removed {
 	color: color-mix(in srgb, CanvasText, red 40%);
 }
+.removed .content{
+	text-decoration-line: line-through;
+}
 .added {
 	color: color-mix(in srgb, CanvasText, green 40%);
 }

From 37edf122a138e75c676d735c84af6b8ab4b9414a Mon Sep 17 00:00:00 2001
From: Hornwitser <code@hornwitser.no>
Date: Sat, 6 Sep 2025 18:52:47 +0200
Subject: [PATCH 07/10] Support multiline descriptions for entities

Use a textarea for editing the description and preserve linebreaks
when it's displayed in the UI using a new preWrap class for this
purpose.
---
 assets/global.css                     |  4 ++++
 components/CardEvent.vue              |  2 +-
 components/CardShift.vue              |  2 +-
 components/TableScheduleEvents.vue    | 14 +++++++-------
 components/TableScheduleLocations.vue | 14 +++++++-------
 components/TableScheduleRoles.vue     | 14 +++++++-------
 components/TableScheduleShifts.vue    | 14 +++++++-------
 server/generate-demo-schedule.ts      | 15 +++++++++------
 8 files changed, 43 insertions(+), 36 deletions(-)

diff --git a/assets/global.css b/assets/global.css
index 5ac8620..3d4e0c0 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -83,3 +83,7 @@ label>* {
 label + label {
 	margin-block-start: 0.5rem;
 }
+
+.preWrap {
+	white-space: pre-wrap;
+}
diff --git a/components/CardEvent.vue b/components/CardEvent.vue
index 6a4d5a0..4082abc 100644
--- a/components/CardEvent.vue
+++ b/components/CardEvent.vue
@@ -8,7 +8,7 @@
 		<p v-if=event.host>
 			Host: {{ event.host }}
 		</p>
-		<p>{{ event.description ?? "No description provided" }}</p>
+		<p class="preWrap">{{ event.description ?? "No description provided" }}</p>
 		<p v-if="event.interested">
 			{{ event.interested }} interested
 		</p>
diff --git a/components/CardShift.vue b/components/CardShift.vue
index ac5c4e9..333be36 100644
--- a/components/CardShift.vue
+++ b/components/CardShift.vue
@@ -5,7 +5,7 @@
 <template>
 	<section class="shift">
 		<h3>{{ shift.name }}</h3>
-		<p>{{ shift.description ?? "No description provided" }}</p>
+		<p class="preWrap">{{ shift.description ?? "No description provided" }}</p>
 
 		<h4>Timeslots</h4>
 		<ul>
diff --git a/components/TableScheduleEvents.vue b/components/TableScheduleEvents.vue
index 3377ae1..7555bf3 100644
--- a/components/TableScheduleEvents.vue
+++ b/components/TableScheduleEvents.vue
@@ -39,11 +39,11 @@
 							>
 						</td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								:disabled="!canEdit(event)"
 								v-model="event.description"
-							>
+							/>
 						</td>
 						<td>
 							<input
@@ -82,10 +82,10 @@
 							>
 						</td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								v-model="newEventDescription"
-							>
+							/>
 						</td>
 						<td>
 							<input
@@ -116,7 +116,7 @@
 						<td>{{ event.id }}</td>
 						<td>{{ event.name }}</td>
 						<td>{{ event.host }}</td>
-						<td>{{ event.description }}</td>
+						<td class="preWrap">{{ event.description }}</td>
 						<td>{{ event.crew ? "" : "Yes"}}</td>
 						<td>{{ event.slots.size ? event.slots.size : "" }}</td>
 					</tr>
diff --git a/components/TableScheduleLocations.vue b/components/TableScheduleLocations.vue
index dc08ac9..d4053f6 100644
--- a/components/TableScheduleLocations.vue
+++ b/components/TableScheduleLocations.vue
@@ -28,10 +28,10 @@
 							>
 						</td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								v-model="location.description"
-							>
+							/>
 						</td>
 						<td>
 							<button
@@ -49,7 +49,7 @@
 					<template v-else>
 						<td>{{ location.id }}</td>
 						<td>{{ location.name }}</td>
-						<td>{{ location.description }}</td>
+						<td class="preWrap">{{ location.description }}</td>
 					</template>
 				</tr>
 				<tr v-if='edit'>
@@ -63,10 +63,10 @@
 							>
 					</td>
 					<td>
-						<input
-							type="text"
+						<textarea
+							rows="1"
 							v-model="newLocationDescription"
-						>
+						/>
 					</td>
 					<td colspan="1">
 						<button
diff --git a/components/TableScheduleRoles.vue b/components/TableScheduleRoles.vue
index 3825242..08e031a 100644
--- a/components/TableScheduleRoles.vue
+++ b/components/TableScheduleRoles.vue
@@ -28,10 +28,10 @@
 							>
 						</td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								v-model="role.description"
-							>
+							/>
 						</td>
 						<td>
 							<button
@@ -55,10 +55,10 @@
 							>
 						</td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								v-model="newRoleDescription"
-							>
+							/>
 						</td>
 						<td>
 							<button
@@ -80,7 +80,7 @@
 					>
 						<td>{{ role.id }}</td>
 						<td>{{ role.name }}</td>
-						<td>{{ role.description }}</td>
+						<td class="preWrap">{{ role.description }}</td>
 					</tr>
 				</template>
 			</tbody>
diff --git a/components/TableScheduleShifts.vue b/components/TableScheduleShifts.vue
index afe4c36..531f07e 100644
--- a/components/TableScheduleShifts.vue
+++ b/components/TableScheduleShifts.vue
@@ -37,10 +37,10 @@
 						</td>
 						<td>{{ shift.slots.size ? shift.slots.size : "" }}</td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								v-model="shift.description"
-							>
+							/>
 						</td>
 						<td>
 							<button
@@ -71,10 +71,10 @@
 						</td>
 						<td></td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								v-model="newShiftDescription"
-							>
+							/>
 						</td>
 						<td>
 							<button
@@ -98,7 +98,7 @@
 						<td>{{ shift.name }}</td>
 						<td>{{ shift.roleId }}</td>
 						<td>{{ shift.slots.size ? shift.slots.size : "" }}</td>
-						<td>{{ shift.description }}</td>
+						<td class="preWrap">{{ shift.description }}</td>
 					</tr>
 				</template>
 			</tbody>
diff --git a/server/generate-demo-schedule.ts b/server/generate-demo-schedule.ts
index 101b710..dd32003 100644
--- a/server/generate-demo-schedule.ts
+++ b/server/generate-demo-schedule.ts
@@ -9,7 +9,7 @@ const locations = [
 	{
 		id: 1,
 		name: "Stage",
-		description: "Inside the main building.",
+		description: "Inside the main building.\n\nMind the gap.",
 		updatedAt: "d-1 18:21",
 	},
 	{
@@ -43,7 +43,7 @@ let eventId = 1;
 const events = [
 	{
 		name: "Arcade",
-		description: "Play retro games!",
+		description: "Play retro games!\n\nWe have anything from C64 to PS5.",
 		slots: [
 			"d1 12:00 4h clubhouse",
 			"d2 12:00 4h clubhouse",
@@ -158,13 +158,14 @@ const events = [
 const idMedic = 1;
 const idSecurity = 2;
 const roles = [
-	{ id: idMedic, name: "Medic", updatedAt: "d-2 12:34" },
-	{ id: idSecurity, name: "Security", updatedAt: "d-2 12:39" },
+	{ id: idMedic, name: "Medic", description: "Helping those in need.\n\nAsk lead if in doubt.", updatedAt: "d-2 12:34" },
+	{ id: idSecurity, name: "Security", description: "Keeping the con safe", updatedAt: "d-2 12:39" },
 ]
 
 const shifts = [
 	{
 		name: "Medic Early",
+		description: "Not much happens early.\n\nPrefer strolling outside to be visible.",
 		roleId: idMedic,
 		slots: [
 			"d1 12:00 4h",
@@ -357,16 +358,18 @@ export function generateDemoSchedule(): ApiSchedule {
 			})
 		),
 		roles: roles.map(
-			({ id, name, updatedAt }) => ({
+			({ id, name, description, updatedAt }) => ({
 				id,
 				name,
+				description,
 				updatedAt: toIso(toDate(origin, ...(updatedAt.split(" ")) as [string, string])),
 			})
 		),
 		shifts: shifts.map(
-			({ id, name, roleId, slots }) => ({
+			({ id, name, description, roleId, slots }) => ({
 				id,
 				name,
+				description,
 				roleId,
 				slots: slots.map(shorthand => toShift(origin, shorthand, shiftSlotIdToAssigned)),
 				updatedAt: toIso(toDate(origin, "d-1", "13:23")),

From adeef4f62939b7a1f2cd4fd571c353e9da50506a Mon Sep 17 00:00:00 2001
From: Hornwitser <code@hornwitser.no>
Date: Sat, 6 Sep 2025 18:56:52 +0200
Subject: [PATCH 08/10] Transform the account field in sessions

When serving sessions instead of passing the ServerUser directly,
convert it to the ApiAccount format.
---
 server/utils/session.ts |  3 ++-
 server/utils/user.ts    | 18 +++++++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/server/utils/session.ts b/server/utils/session.ts
index f6d9d77..dfba536 100644
--- a/server/utils/session.ts
+++ b/server/utils/session.ts
@@ -15,6 +15,7 @@ import {
 } from "~/server/database";
 import { broadcastEvent } from "../streams";
 import type { ApiAuthenticationProvider, ApiSession } from "~/shared/types/api";
+import { serverUserToApiAccount } from "./user";
 
 async function removeSessionSubscription(sessionId: number) {
 	const subscriptions = await readSubscriptions();
@@ -182,7 +183,7 @@ export async function serverSessionToApi(event: H3Event, session: ServerSession)
 
 	return {
 		id: session.id,
-		account,
+		account: serverUserToApiAccount(account),
 		authenticationProvider: session.authenticationProvider,
 		authenticationName: session.authenticationName,
 		push,
diff --git a/server/utils/user.ts b/server/utils/user.ts
index 4cae9b2..2ae7be9 100644
--- a/server/utils/user.ts
+++ b/server/utils/user.ts
@@ -3,7 +3,7 @@
 	SPDX-License-Identifier: AGPL-3.0-or-later
 */
 import type { ServerUser } from "~/server/database"
-import type { ApiTombstone, ApiUser, ApiUserDetails } from "~/shared/types/api";
+import type { ApiAccount, ApiTombstone, ApiUser, ApiUserDetails } from "~/shared/types/api";
 
 export function serverUserToApi(user: ServerUser): ApiUser | ApiTombstone {
 	if (user.deleted) {
@@ -38,3 +38,19 @@ export function serverUserToApiDetails(user: ServerUser): ApiUserDetails | ApiTo
 		locale: user.locale,
 	}
 }
+
+export function serverUserToApiAccount(user?: ServerUser): ApiAccount | undefined {
+	if (!user || user.deleted) {
+		return undefined;
+	}
+	return {
+		id: user.id,
+		updatedAt: user.updatedAt,
+		type: user.type,
+		name: user.name,
+		interestedEventIds: user.interestedEventIds,
+		interestedEventSlotIds: user.interestedEventSlotIds,
+		timezone: user.timezone,
+		locale: user.locale,
+	}
+}

From 5898a46a1b15e5bd85b13eaf790386a5ad6249f7 Mon Sep 17 00:00:00 2001
From: Hornwitser <code@hornwitser.no>
Date: Sat, 6 Sep 2025 19:25:20 +0200
Subject: [PATCH 09/10] Add UI to edit and display event notices

Add a warning like display of event notices to the event card and the
event slot card and indicate in the timesheet that an event has a
notice.  Also includes the input controls needed to edit the notice.
---
 components/CardEvent.vue           | 24 ++++++++++++++++++++++++
 components/CardEventSlot.vue       | 24 ++++++++++++++++++++++++
 components/TableScheduleEvents.vue | 19 ++++++++++++++++++-
 components/Timetable.vue           |  1 +
 server/generate-demo-schedule.ts   |  4 +++-
 5 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/components/CardEvent.vue b/components/CardEvent.vue
index 4082abc..baca351 100644
--- a/components/CardEvent.vue
+++ b/components/CardEvent.vue
@@ -8,6 +8,14 @@
 		<p v-if=event.host>
 			Host: {{ event.host }}
 		</p>
+		<div v-if="event.notice" class="notice preWrap">
+			<div class="noticeIcon">
+				⚠️
+			</div>
+			<p>
+				{{ event.notice }}
+			</p>
+		</div>
 		<p class="preWrap">{{ event.description ?? "No description provided" }}</p>
 		<p v-if="event.interested">
 			{{ event.interested }} interested
@@ -79,6 +87,22 @@ async function toggle(type: "event" | "slot", id: number, slotIds?: number[]) {
 	margin-block-start: 0.5rem;
 }
 
+.notice {
+	display: flex;
+	width: fit-content;
+	gap: 0.5rem;
+	padding: 0.5rem;
+	margin-block: 0.5rem;
+	border-radius: 0.25rem;
+	border: 1px solid color-mix(in oklab, CanvasText, orange 50%);
+	background-color: color-mix(in oklab, Canvas, orange 40%);
+}
+.noticeIcon {
+	flex: 0 0 auto;
+	align-self: center;
+	font-size: 1rem;
+}
+
 button {
 	padding-inline: 0.2em;
 }
diff --git a/components/CardEventSlot.vue b/components/CardEventSlot.vue
index baa2e3a..3544be2 100644
--- a/components/CardEventSlot.vue
+++ b/components/CardEventSlot.vue
@@ -13,6 +13,14 @@
 		<p v-if=event?.host>
 			Host: {{ event.host }}
 		</p>
+		<div v-if="event?.notice" class="notice preWrap">
+			<div class="noticeIcon">
+				⚠️
+			</div>
+			<p>
+				{{ event.notice }}
+			</p>
+		</div>
 		<p class="preWrap">{{ event?.description ?? "No description provided" }}</p>
 		<p v-if="locations.length">
 			At {{ locations.map(location => location?.name ?? "unknown").join(" + ") }}
@@ -62,6 +70,22 @@ function formatTime(time: DateTime) {
 	margin-block-start: 0.5rem;
 }
 
+.notice {
+	display: flex;
+	width: fit-content;
+	gap: 0.5rem;
+	padding: 0.5rem;
+	margin-block: 0.5rem;
+	border-radius: 0.25rem;
+	border: 1px solid color-mix(in oklab, CanvasText, orange 50%);
+	background-color: color-mix(in oklab, Canvas, orange 40%);
+}
+.noticeIcon {
+	flex: 0 0 auto;
+	align-self: center;
+	font-size: 1rem;
+}
+
 button {
 	padding-inline: 0.2em;
 }
diff --git a/components/TableScheduleEvents.vue b/components/TableScheduleEvents.vue
index 7555bf3..ab66e81 100644
--- a/components/TableScheduleEvents.vue
+++ b/components/TableScheduleEvents.vue
@@ -10,6 +10,7 @@
 					<th>id</th>
 					<th>name</th>
 					<th>host</th>
+					<th>notice</th>
 					<th>description</th>
 					<th>p</th>
 					<th>s</th>
@@ -38,6 +39,13 @@
 								v-model="event.host"
 							>
 						</td>
+						<td>
+							<textarea
+								rows="1"
+								:disabled="!canEdit(event)"
+								v-model="event.notice"
+							/>
+						</td>
 						<td>
 							<textarea
 								rows="1"
@@ -81,6 +89,12 @@
 								v-model="newEventHost"
 							>
 						</td>
+						<td>
+							<textarea
+								rows="1"
+								v-model="newEventNotice"
+							/>
+						</td>
 						<td>
 							<textarea
 								rows="1"
@@ -116,6 +130,7 @@
 						<td>{{ event.id }}</td>
 						<td>{{ event.name }}</td>
 						<td>{{ event.host }}</td>
+						<td class="preWrap">{{ event.notice }}</td>
 						<td class="preWrap">{{ event.description }}</td>
 						<td>{{ event.crew ? "" : "Yes"}}</td>
 						<td>{{ event.slots.size ? event.slots.size : "" }}</td>
@@ -143,6 +158,7 @@ function canEdit(event: ClientScheduleEvent) {
 
 const newEventName = ref("");
 const newEventHost = ref("");
+const newEventNotice = ref("");
 const newEventDescription = ref("");
 const newEventPublic = ref(false);
 function eventExists(name: string) {
@@ -165,7 +181,7 @@ function newEvent() {
 		!newEventPublic.value,
 		newEventHost.value,
 		false,
-		"",
+		newEventNotice.value,
 		newEventDescription.value,
 		0,
 		new Set(),
@@ -174,6 +190,7 @@ function newEvent() {
 	schedule.value.events.add(event);
 	newEventName.value = "";
 	newEventHost.value = "";
+	newEventNotice.value = "";
 	newEventDescription.value = "";
 	newEventPublic.value = false;
 }
diff --git a/components/Timetable.vue b/components/Timetable.vue
index 07ce65d..403c77b 100644
--- a/components/Timetable.vue
+++ b/components/Timetable.vue
@@ -105,6 +105,7 @@
 							:class='{"event": cell.slot, "crew": cell.event?.crew }'
 							:title="cell.event?.name"
 						>
+							{{ cell.event?.notice ? "⚠️" : undefined }}
 							{{ cell.event?.name }}
 						</td>
 					</tr>
diff --git a/server/generate-demo-schedule.ts b/server/generate-demo-schedule.ts
index dd32003..7029c06 100644
--- a/server/generate-demo-schedule.ts
+++ b/server/generate-demo-schedule.ts
@@ -43,6 +43,7 @@ let eventId = 1;
 const events = [
 	{
 		name: "Arcade",
+		notice: "No food or drinks allowed!\n\nClosed drinking containers are okay.",
 		description: "Play retro games!\n\nWe have anything from C64 to PS5.",
 		slots: [
 			"d1 12:00 4h clubhouse",
@@ -339,10 +340,11 @@ export function generateDemoSchedule(): ApiSchedule {
 		id: 111,
 		updatedAt: toIso(toDate(origin, "d-2", "10:01")),
 		events: events.map(
-			({ id, name, crew, description, slots }) => ({
+			({ id, name, crew, notice, description, slots }) => ({
 				id,
 				name,
 				crew,
+				notice,
 				description,
 				interested: eventCounts.get(id),
 				slots: slots.map(shorthand => toSlot(origin, shorthand, slotCounts, eventSlotIdToAssigned)),

From 732566a29c08d30101a343f79071bdaef4bfd901 Mon Sep 17 00:00:00 2001
From: Hornwitser <code@hornwitser.no>
Date: Sun, 7 Sep 2025 15:01:51 +0200
Subject: [PATCH 10/10] Use the slim base for the Docker image

This saves about 85% of the resulting image size.
---
 Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index 525f25b..5630331 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -2,7 +2,7 @@
 # SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
 # SPDX-License-Identifier: AGPL-3.0-or-later
 # Based on Next.js's docker image example
-FROM node:22 AS base
+FROM node:22-slim AS base
 
 # Install dependencies only when needed
 FROM base AS deps