Basic CalDav UI (Calendar)

This implements a basic CalDav UI, titled "Calendar". It allows creating new calendars and events with a start and end date, URL, location, and description.

You can also import and export ICS (VCALENDAR + VEVENT) files.

It allows editing the ICS directly, for power users.

Additionally, you can hide/display events from certain calendars, change their names and their colors. If there's no calendar created yet in your CalDav server (first-time setup), it'll automatically create one, titled "Calendar".

You can also change the display timezone for the calendar from the settings.

Finally, there's some minor documentation fixes and some other minor tweaks.

Closes #56
Closes #89

components/calendar/ImportEventsModal.tsx

@@ -0,0 +1,86 @@
+import { useSignal } from '@preact/signals';
+import { useEffect } from 'preact/hooks';
+
+import { Calendar } from '/lib/models/calendar.ts';
+
+interface ImportEventsModalProps {
+  isOpen: boolean;
+  calendars: Calendar[];
+  onClickImport: (calendarId: string) => void;
+  onClose: () => void;
+}
+
+export default function ImportEventsModal(
+  { isOpen, calendars, onClickImport, onClose }: ImportEventsModalProps,
+) {
+  const newCalendarId = useSignal<string | null>(null);
+
+  useEffect(() => {
+    if (!isOpen) {
+      newCalendarId.value = null;
+    } else {
+      newCalendarId.value = calendars[0]!.uid!;
+    }
+  }, [isOpen]);
+
+  return (
+    <>
+      <section
+        class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
+      >
+      </section>
+
+      <section
+        class={`fixed ${
+          newCalendarId.value ? 'block' : 'hidden'
+        } z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 bg-slate-600 text-white rounded-md px-8 py-6 drop-shadow-lg overflow-y-scroll max-h-[80%]`}
+      >
+        <h1 class='text-2xl font-semibold my-5'>Import Events</h1>
+        <section class='py-5 my-2 border-y border-slate-500'>
+          <fieldset class='block mb-2'>
+            <label class='text-slate-300 block pb-1' for='event_calendar'>Calendar</label>
+            <section class='flex items-center justify-between'>
+              <select
+                class='input-field mr-2 !w-5/6'
+                name='event_calendar'
+                id='event_calendar'
+                value={newCalendarId.value || ''}
+                onChange={(event) => {
+                  newCalendarId.value = event.currentTarget.value;
+                }}
+              >
+                {calendars.map((calendar) => (
+                  <option key={calendar.uid} value={calendar.uid}>{calendar.displayName}</option>
+                ))}
+              </select>
+              <span
+                class={`w-5 h-5 block rounded-full`}
+                style={{
+                  backgroundColor: calendars.find((calendar) => calendar.uid === newCalendarId.value)?.calendarColor,
+                }}
+                title={calendars.find((calendar) => calendar.uid === newCalendarId.value)?.calendarColor}
+              >
+              </span>
+            </section>
+          </fieldset>
+        </section>
+        <footer class='flex justify-between'>
+          <button
+            type='button'
+            class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
+            onClick={() => onClickImport(newCalendarId.value!)}
+          >
+            Choose File
+          </button>
+          <button
+            type='button'
+            class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
+            onClick={() => onClose()}
+          >
+            Close
+          </button>
+        </footer>
+      </section>
+    </>
+  );
+}