Fix calendar color when creating a calendar

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   website:
-    image: ghcr.io/bewcloud/bewcloud:v2.5.1
+    image: ghcr.io/bewcloud/bewcloud:v2.5.2
     restart: always
     ports:
       - 127.0.0.1:8000:8000

islands/calendar/Calendars.tsx

@@ -278,8 +278,15 @@ export default function Calendars({ initialCalendars }: CalendarsProps) {
                 onChange={(event) =>
                   openCalendar.value = { ...openCalendar.value!, calendarColor: event.currentTarget.value }}
               >
-                {CALENDAR_COLOR_OPTIONS.map((color) => <option key={color} value={getColorAsHex(color)}>{color}
+                {CALENDAR_COLOR_OPTIONS.map((color) => (
-                </option>)}
+                  <option
+                    key={color}
+                    value={getColorAsHex(color)}
+                    selected={openCalendar.value?.calendarColor === getColorAsHex(color)}
+                  >
+                    {color}
+                  </option>
+                ))}
               </select>
               <span
                 class={`w-5 h-5 block rounded-full`}

lib/models/calendar.ts

@@ -99,7 +99,9 @@ export class CalendarModel {
       return {
         ...davCalendar,
         displayName: decodeURIComponent(davCalendar.displayName || '(empty)'),
-        calendarColor: decodeURIComponent(davCalendar.calendarColor || getColorAsHex('bg-gray-700')),
+        calendarColor: decodeURIComponent(
+          typeof davCalendar.calendarColor === 'string' ? davCalendar.calendarColor : getColorAsHex('bg-gray-700'),
+        ),
         isVisible: !user.extra.hidden_calendar_ids?.includes(uid),
         uid,
       };
@@ -131,9 +133,11 @@ export class CalendarModel {
       url: calendarUrl,
       props: {
         displayname: name,
-        calendarColor: color,
       },
     });
+
+    // Cannot properly set color with makeCalendar, so we quickly update it instead
+    await this.update(userId, calendarUrl, name, color);
   }
 
   static async update(

routes/api/calendar/add.tsx

@@ -2,7 +2,7 @@ import { Handlers } from 'fresh/server.ts';
 
 import { FreshContextState } from '/lib/types.ts';
 import { Calendar, CalendarModel } from '/lib/models/calendar.ts';
-import { getColorAsHex } from '/lib/utils/calendar.ts';
+import { CALENDAR_COLOR_OPTIONS, getColorAsHex } from '/lib/utils/calendar.ts';
 
 interface Data {}
 
@@ -24,7 +24,8 @@ export const handler: Handlers<Data, FreshContextState> = {
     const requestBody = await request.clone().json() as RequestBody;
 
     if (requestBody.name) {
-      await CalendarModel.create(context.state.user.id, requestBody.name, getColorAsHex('bg-gray-700'));
+      const randomColor = CALENDAR_COLOR_OPTIONS[Math.floor(Math.random() * CALENDAR_COLOR_OPTIONS.length)];
+      await CalendarModel.create(context.state.user.id, requestBody.name, getColorAsHex(randomColor));
     }
 
     const newCalendars = await CalendarModel.list(context.state.user.id);

routes/calendar.tsx

@@ -4,7 +4,7 @@ import { FreshContextState } from '/lib/types.ts';
 import { Calendar, CalendarEvent, CalendarEventModel, CalendarModel } from '/lib/models/calendar.ts';
 import CalendarWrapper from '/islands/calendar/CalendarWrapper.tsx';
 import { AppConfig } from '/lib/config.ts';
-import { getColorAsHex, getDateRangeForCalendarView } from '/lib/utils/calendar.ts';
+import { CALENDAR_COLOR_OPTIONS, getColorAsHex, getDateRangeForCalendarView } from '/lib/utils/calendar.ts';
 
 interface Data {
   userCalendars: Calendar[];
@@ -42,7 +42,8 @@ export const handler: Handlers<Data, FreshContextState> = {
 
     // Create default calendar if none exists
     if (userCalendars.length === 0) {
-      await CalendarModel.create(userId, 'Calendar', getColorAsHex('bg-red-700'));
+      const randomColor = CALENDAR_COLOR_OPTIONS[Math.floor(Math.random() * CALENDAR_COLOR_OPTIONS.length)];
+      await CalendarModel.create(userId, 'Calendar', getColorAsHex(randomColor));
 
       userCalendars = await CalendarModel.list(userId);
     }