@axium/calendar 0.1.3 → 0.2.0

package/db.json

@@ -67,6 +67,21 @@
 				"attendees:eventId",
 				"attendees:userId"
 			]
+		},
+		{
+			"delta": true,
+			"alter_tables": {
+				"calendars": {
+					"add_columns": {
+						"color": { "type": "integer" }
+					}
+				},
+				"events": {
+					"add_columns": {
+						"color": { "type": "integer" }
+					}
+				}
+			}
 		}
 	],
 	"wipe": ["calendars", "events", "acl.calendars"],

package/dist/common.d.ts

@@ -54,6 +54,7 @@ export declare const EventData: z.ZodObject<{
     end: z.ZodCoercedDate<unknown>;
     isAllDay: z.ZodCoercedBoolean<unknown>;
     description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+    color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
     recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
     recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
     recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -68,6 +69,7 @@ export declare const EventInit: z.ZodObject<{
     end: z.ZodCoercedDate<unknown>;
     isAllDay: z.ZodCoercedBoolean<unknown>;
     description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+    color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
     recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
     recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
     recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -89,6 +91,7 @@ export declare const Event: z.ZodObject<{
     end: z.ZodCoercedDate<unknown>;
     isAllDay: z.ZodCoercedBoolean<unknown>;
     description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+    color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
     recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
     recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
     recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -117,6 +120,7 @@ export declare const Calendar: z.ZodObject<{
     id: z.ZodUUID;
     userId: z.ZodUUID;
     created: z.ZodCoercedDate<unknown>;
+    color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
     acl: z.ZodOptional<z.ZodArray<z.ZodObject<{
         itemId: z.ZodUUID;
         userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -157,6 +161,7 @@ declare const CalendarAPI: {
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             acl: z.ZodOptional<z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
                 userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -185,6 +190,7 @@ declare const CalendarAPI: {
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             acl: z.ZodNonOptional<z.ZodOptional<z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
                 userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -215,6 +221,7 @@ declare const CalendarAPI: {
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             acl: z.ZodNonOptional<z.ZodOptional<z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
                 userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -245,6 +252,7 @@ declare const CalendarAPI: {
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             acl: z.ZodOptional<z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
                 userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -273,6 +281,7 @@ declare const CalendarAPI: {
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             acl: z.ZodOptional<z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
                 userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -309,6 +318,7 @@ declare const CalendarAPI: {
             end: z.ZodCoercedDate<unknown>;
             isAllDay: z.ZodCoercedBoolean<unknown>;
             description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
             recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -331,6 +341,7 @@ declare const CalendarAPI: {
             end: z.ZodCoercedDate<unknown>;
             isAllDay: z.ZodCoercedBoolean<unknown>;
             description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
             recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -349,6 +360,7 @@ declare const CalendarAPI: {
             end: z.ZodCoercedDate<unknown>;
             isAllDay: z.ZodCoercedBoolean<unknown>;
             description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
             recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -373,6 +385,7 @@ declare const CalendarAPI: {
             end: z.ZodCoercedDate<unknown>;
             isAllDay: z.ZodCoercedBoolean<unknown>;
             description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
             recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -395,6 +408,7 @@ declare const CalendarAPI: {
             end: z.ZodCoercedDate<unknown>;
             isAllDay: z.ZodCoercedBoolean<unknown>;
             description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
             recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -413,6 +427,7 @@ declare const CalendarAPI: {
             end: z.ZodCoercedDate<unknown>;
             isAllDay: z.ZodCoercedBoolean<unknown>;
             description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
             recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -435,6 +450,7 @@ declare const CalendarAPI: {
             end: z.ZodCoercedDate<unknown>;
             isAllDay: z.ZodCoercedBoolean<unknown>;
             description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
             recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;

package/dist/common.js

@@ -1,6 +1,7 @@
 import { $API, AccessControl, pickPermissions } from '@axium/core';
 import * as z from 'zod';
 import $pkg from '../package.json' with { type: 'json' };
+import { Color } from '@axium/core/color';
 export function dayOfYear(date) {
     const yearStart = new Date(date.getFullYear(), 0, 1);
     return Math.round((date.getTime() - yearStart.getTime()) / 86400000 + 1);
@@ -81,6 +82,7 @@ export const EventData = z.object({
     end: z.coerce.date(),
     isAllDay: z.coerce.boolean(),
     description: z.string().max(2000).nullish(),
+    color: Color.nullish(),
     // note: recurrences are not support yet
     recurrence: z.string().max(1000).nullish(),
     recurrenceExcludes: z.string().max(100).array().max(100).nullish(),
@@ -111,6 +113,7 @@ export const Calendar = CalendarInit.extend({
     id: z.uuid(),
     userId: z.uuid(),
     created: z.coerce.date(),
+    color: Color.nullish(),
     acl: AccessControl.array().optional(),
 });
 export function getCalPermissionsInfo(cal, user) {

package/dist/server.js

@@ -7,28 +7,37 @@ import { sql } from 'kysely';
 import { jsonArrayFrom, jsonObjectFrom } from 'kysely/helpers/postgres';
 import * as z from 'zod';
 import { Attendee, CalendarInit, EventFilter, EventInit } from './common.js';
+function withEncoded(value) {
+    return (value.color === undefined || value.color === null
+        ? value
+        : Object.assign(value, { color: value.color.toString(16).padStart(8, '0') }));
+}
+function withDecoded(value) {
+    return (value.color === undefined || value.color === null ? value : Object.assign(value, { color: parseInt(value.color, 16) }));
+}
 addRoute({
     path: '/api/users/:id/calendars',
     params: { id: z.uuid() },
     async GET(request, { id: userId }) {
         const { user } = await checkAuthForUser(request, userId);
-        return await database
+        const result = await database
             .selectFrom('calendars')
             .selectAll()
             .select(aclFrom('calendars'))
             .where(userHasAccess('calendars', user))
             .execute()
             .catch(withError('Could not get calendars'));
+        return result.map(c => withEncoded(c));
     },
     async PUT(request, { id: userId }) {
         const init = await parseBody(request, CalendarInit);
         await checkAuthForUser(request, userId);
-        return await database
+        return withEncoded(await database
             .insertInto('calendars')
             .values({ ...init, userId })
             .returningAll()
             .executeTakeFirstOrThrow()
-            .catch(withError('Could not create calendar'));
+            .catch(withError('Could not create calendar')));
     },
 });
 addRoute({
@@ -36,27 +45,27 @@ addRoute({
     params: { id: z.uuid() },
     async GET(request, { id }) {
         const { item } = await authRequestForItem(request, 'calendars', id, { read: true });
-        return item;
+        return withEncoded(item);
     },
     async PATCH(request, { id }) {
         const body = await parseBody(request, CalendarInit);
         await authRequestForItem(request, 'calendars', id, { edit: true });
-        return await database
+        return withEncoded(await database
             .updateTable('calendars')
             .set(body)
             .where('id', '=', id)
             .returningAll()
             .executeTakeFirstOrThrow()
-            .catch(withError('Could not update calendar'));
+            .catch(withError('Could not update calendar')));
     },
     async DELETE(request, { id }) {
         await authRequestForItem(request, 'calendars', id, { manage: true });
-        return await database
+        return withEncoded(await database
             .deleteFrom('calendars')
             .where('id', '=', id)
             .returningAll()
             .executeTakeFirstOrThrow()
-            .catch(withError('Could not delete calendar'));
+            .catch(withError('Could not delete calendar')));
     },
 });
 function withAttendees(eb) {
@@ -81,9 +90,10 @@ addRoute({
             .where(sql `(${sql.ref('start')}, ${sql.ref('end')}) OVERLAPS (${sql.val(filter.start)}, ${sql.val(filter.end)})`)
             .limit(1000)
             .execute()
+            .then(result => result.map(withEncoded))
             .catch(withError('Could not get events'));
         for (const event of events)
-            event.calendar = calendar;
+            event.calendar = withEncoded(calendar);
         return events;
     },
     async PUT(request, { id }) {
@@ -93,7 +103,7 @@ addRoute({
         try {
             const event = await tx
                 .insertInto('events')
-                .values({ ...init, calId: id })
+                .values({ ...withDecoded(init), calId: id })
                 .returningAll()
                 .executeTakeFirstOrThrow()
                 .catch(withError('Could not create event'));
@@ -105,7 +115,11 @@ addRoute({
                     .execute()
                 : []);
             await tx.commit().execute();
-            return Object.assign(event, { attendees, calendar });
+            return Object.assign(event, {
+                attendees,
+                calendar: withEncoded(calendar),
+                color: event.color?.toString(16)?.padStart(8, '0'),
+            });
         }
         catch (e) {
             await tx.rollback().execute();
@@ -128,7 +142,7 @@ addRoute({
             .catch(withError('Event does not exist', 404));
         if (event.calendar.userId != userId && event.attendees.every(a => a.userId != userId))
             error(403, 'You do not have access to this event');
-        return event;
+        return withEncoded(event);
     },
     async PATCH(request, { id }) {
         const { attendees: attendeesInit = [], sendEmails, recurrenceUpdateAll, ...init } = await parseBody(request, EventInit);
@@ -145,7 +159,7 @@ addRoute({
         try {
             const event = await tx
                 .updateTable('events')
-                .set(init)
+                .set(withDecoded(init))
                 .where('id', '=', id)
                 .returningAll()
                 .returning(withAttendees)
@@ -173,7 +187,7 @@ addRoute({
                  */
             }
             await tx.commit().execute();
-            return event;
+            return withEncoded(event);
         }
         catch (e) {
             await tx.rollback().execute();
@@ -198,7 +212,7 @@ addRoute({
                 .where('id', '=', id)
                 .executeTakeFirstOrThrow();
             await tx.commit().execute();
-            return event;
+            return withEncoded(event);
         }
         catch (e) {
             await tx.rollback().execute();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/calendar",
-	"version": "0.1.3",
+	"version": "0.2.0",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "Calendar for Axium",
 	"funding": {
@@ -36,10 +36,10 @@
 	},
 	"peerDependencies": {
 		"@axium/client": ">=0.14.3",
-		"@axium/core": ">=0.19.0",
+		"@axium/core": ">=0.20.0",
 		"@axium/server": ">=0.36.0",
 		"@sveltejs/kit": "^2.27.3",
-		"utilium": "^2.6.3"
+		"utilium": "^2.7.0"
 	},
 	"dependencies": {
 		"zod": "^4.0.5"

package/routes/calendar/+page.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { getEvents, type EventInitFormData } from '@axium/calendar/client';
-	import type { Event, EventData } from '@axium/calendar/common';
+	import type { Calendar, Event, EventData } from '@axium/calendar/common';
 	import { AttendeeInit, dateToInputValue, formatEventTimes, getCalPermissionsInfo, weekDaysFor } from '@axium/calendar/common';
-	import * as Calendar from '@axium/calendar/components';
+	import * as Cal from '@axium/calendar/components';
 	import { contextMenu, dynamicRows } from '@axium/client/attachments';
-	import { AccessControlDialog, FormDialog, Icon, Popover, UserDiscovery } from '@axium/client/components';
+	import { AccessControlDialog, ColorPicker, FormDialog, Icon, Popover, UserDiscovery } from '@axium/client/components';
 	import { fetchAPI } from '@axium/client/requests';
+	import { colorHashHex, encodeColor, decodeColor } from '@axium/core/color';
 	import { SvelteDate } from 'svelte/reactivity';
 	import { _throw } from 'utilium';
 	import z from 'zod';
@@ -13,8 +14,9 @@
 
 	const { user } = data.session;
 
-	const today = new Date();
-	today.setHours(0, 0, 0, 0);
+	const now = new SvelteDate();
+	setInterval(() => now.setTime(Date.now()), 60_000);
+	const today = $derived(new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0));
 
 	let start = new SvelteDate(data.filter.start);
 	let end = new SvelteDate(data.filter.end);
@@ -22,6 +24,7 @@
 	let events = $state<Event[]>([]);
 
 	$effect(() => {
+		for (const cal of calendars) cal.color ||= encodeColor(colorHashHex(cal.name));
 		getEvents(calendars, { start: new Date(start.getTime()), end: new Date(end.getTime()) }).then(e => (events = e));
 	});
 
@@ -41,16 +44,20 @@
 
 	let dialogs = $state<Record<string, HTMLDialogElement>>({});
 
-	let eventInit = $state<EventData & { attendees: AttendeeInit[] }>({
-			attendees: [],
-			recurrenceExcludes: [],
-			recurrenceId: null,
-			calId: calendars[0]?.id,
-		} as any),
+	const defaultEventInit = {
+		attendees: [],
+		recurrenceExcludes: [],
+		recurrenceId: null,
+		calId: calendars[0]?.id,
+	} as any;
+
+	let eventInit = $state<EventData & { attendees: AttendeeInit[]; calendar?: Calendar }>(defaultEventInit),
 		eventInitStart = $derived(dateToInputValue(eventInit.start)),
 		eventInitEnd = $derived(dateToInputValue(eventInit.end)),
 		eventEditId = $state<string>(),
 		eventEditCalId = $state<string>();
+
+	const defaultEventColor = $derived((eventInit.calendar || calendars[0])?.color || encodeColor(colorHashHex(user.name)));
 </script>
 
 <svelte:head>
@@ -78,7 +85,7 @@
 		<span class="label">{weekDays[0].toLocaleString('default', { month: 'long', year: 'numeric' })}</span>
 	</div>
 	<div id="cal-list">
-		<Calendar.Select bind:start bind:end />
+		<Cal.Select bind:start bind:end />
 		<div class="cal-list-header">
 			<h4>My Calendars</h4>
 			<button style:display="contents" command="show-modal" commandfor="add-calendar">
@@ -169,7 +176,16 @@
 									{#snippet toggle()}
 										{@const start = event.start.getHours() * 60 + event.start.getMinutes()}
 										{@const end = event.end.getHours() * 60 + event.end.getMinutes()}
-										<div class="event" style:top="{start / 14.4}%" style:height="{(end - start) / 14.4}%">
+										<div
+											class="event"
+											style:top="{start / 14.4}%"
+											style:height="{(end - start) / 14.4}%"
+											style="--event-color:{decodeColor(
+												event.color ||
+													event.calendar!.color ||
+													encodeColor(colorHashHex(event.calendar!.name), true)
+											)}"
+										>
 											<span>{event.summary}</span>
 											<span class="subtle">{formatEventTimes(event)}</span>
 										</div>
@@ -249,6 +265,10 @@
 									{/if}
 								</Popover>
 							{/each}
+
+							{#if today.getTime() == day.getTime()}
+								<div class="now" style:top="{(now.getHours() * 60 + now.getMinutes()) / 14.4}%"></div>
+							{/if}
 						</div>
 					</div>
 				{/each}
@@ -260,7 +280,7 @@
 <FormDialog
 	id="event-init"
 	clearOnCancel
-	cancel={() => (eventInit = {} as any)}
+	cancel={() => (eventInit = defaultEventInit)}
 	submitText={eventEditId ? 'Update' : 'Create'}
 	submit={async (data: EventInitFormData) => {
 		Object.assign(eventInit, data);
@@ -322,6 +342,7 @@
 				<option value={cal.id}>{cal.name}</option>
 			{/each}
 		</select>
+		<ColorPicker bind:value={eventInit.color} defaultValue={defaultEventColor} />
 	</div>
 
 	<div class="attendees-container">
@@ -567,14 +588,33 @@
 			.day-content {
 				flex-grow: 1;
 				position: relative;
+
+				.now {
+					position: absolute;
+					width: 100%;
+					border-bottom: 1px solid hsl(0 33 var(--fg-light));
+					z-index: 9;
+					pointer-events: none;
+
+					&::before {
+						content: '';
+						position: absolute;
+						left: -0.25em;
+						top: -0.25em;
+						width: 0.5em;
+						height: 0.5em;
+						border-radius: 50%;
+						background-color: hsl(0 33 var(--fg-light));
+					}
+				}
 			}
 
 			.event {
-				width: 100%;
+				width: calc(100% - 0.5em);
 				position: absolute;
 				border-radius: 0.5em;
 				padding: 0.25em;
-				background-color: var(--bg-alt);
+				background-color: var(--event-color, var(--bg-alt));
 				display: flex;
 				flex-direction: column;
 				align-items: flex-start;