@rapidmx/web-client 0.2.0

package/apps/shared/components/booking/AvailabilityEditor.tsx

@@ -0,0 +1,118 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useState } from "react";
+import { BookingAvailabilityWindow } from "@rapidmx/react-shared/booking/bookingApi.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+
+const DAY_LABELS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+const INPUT_CLASS =
+    "text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+
+function minutesToTimeValue(minutes: number): string {
+    const h = Math.floor(minutes / 60)
+        .toString()
+        .padStart(2, "0");
+    const m = (minutes % 60).toString().padStart(2, "0");
+    return `${h}:${m}`;
+}
+
+function timeValueToMinutes(value: string): number {
+    const [h, m] = value.split(":").map(Number);
+    return h * 60 + m;
+}
+
+export interface AvailabilityEditorProps {
+    value: BookingAvailabilityWindow[];
+    onChange: (value: BookingAvailabilityWindow[]) => void;
+}
+
+/**
+ * Adds/removes `BookingType.availability` weekly windows — deliberately does not cover `dateOverrides`
+ * (per-date blackouts/exceptions), a separate, less commonly needed escape hatch left for a future pass;
+ * `BookingUtils.generateCandidateSlots()` already handles an empty `dateOverrides` array gracefully.
+ */
+export default function AvailabilityEditor({ value, onChange }: AvailabilityEditorProps) {
+    const [dayOfWeek, setDayOfWeek] = useState(1);
+    const [startTime, setStartTime] = useState("09:00");
+    const [endTime, setEndTime] = useState("17:00");
+    const [error, setError] = useState<string | null>(null);
+
+    function handleAdd() {
+        const startMinute = timeValueToMinutes(startTime);
+        const endMinute = timeValueToMinutes(endTime);
+        if (startMinute >= endMinute) {
+            setError("Start time must be before end time.");
+            return;
+        }
+        setError(null);
+        onChange([...value, { dayOfWeek, startMinute, endMinute }]);
+    }
+
+    function handleRemove(index: number) {
+        onChange(value.filter((_, i) => i !== index));
+    }
+
+    return (
+        <div className="flex flex-col gap-3">
+            {error && <p className="text-sm text-danger">{error}</p>}
+            {value.length === 0 ? (
+                <p className="text-sm text-text-muted">No availability windows yet — add one below.</p>
+            ) : (
+                <ul className="flex flex-col gap-2">
+                    {value.map((window, index) => (
+                        <li
+                            key={index}
+                            className="flex items-center justify-between gap-3 py-2 px-3 border border-border rounded-sm text-sm"
+                        >
+                            <span>
+                                {DAY_LABELS[window.dayOfWeek]} {minutesToTimeValue(window.startMinute)}&ndash;
+                                {minutesToTimeValue(window.endMinute)}
+                            </span>
+                            <button
+                                type="button"
+                                onClick={() => handleRemove(index)}
+                                className="text-sm text-danger hover:underline"
+                            >
+                                Remove
+                            </button>
+                        </li>
+                    ))}
+                </ul>
+            )}
+            <div className="flex flex-wrap items-center gap-2">
+                <select
+                    aria-label="Day of week"
+                    value={dayOfWeek}
+                    onChange={(e) => setDayOfWeek(Number(e.target.value))}
+                    className={INPUT_CLASS}
+                >
+                    {DAY_LABELS.map((label, i) => (
+                        <option key={label} value={i}>
+                            {label}
+                        </option>
+                    ))}
+                </select>
+                <input
+                    type="time"
+                    aria-label="Start time"
+                    value={startTime}
+                    onChange={(e) => setStartTime(e.target.value)}
+                    className={INPUT_CLASS}
+                />
+                <span className="text-sm text-text-muted">to</span>
+                <input
+                    type="time"
+                    aria-label="End time"
+                    value={endTime}
+                    onChange={(e) => setEndTime(e.target.value)}
+                    className={INPUT_CLASS}
+                />
+                <Button type="button" variant="secondary" className="!w-auto" onClick={handleAdd}>
+                    Add window
+                </Button>
+            </div>
+        </div>
+    );
+}

package/apps/shared/components/calendar/CalendarListSidebar.tsx

@@ -0,0 +1,119 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useState } from "react";
+import { CALENDAR_COLOR_PALETTE, colorForFolder } from "@rapidmx/react-shared/calendar/calendarColors.js";
+import { Folder } from "@rapidmx/react-shared/mail/mailApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+
+export interface CalendarListSidebarProps {
+    /** Every `type === "calendar"` folder for the currently-resolved mailbox. */
+    calendars: Folder[];
+    checkedFolderUids: Set<string>;
+    onToggle: (folderUid: string) => void;
+    onAddCalendar: (name: string, color: string) => Promise<void>;
+}
+
+/**
+ * Calendar's left-sidebar checklist of "My calendars" — one row per `calendar`-type folder, a color
+ * swatch matching `colorForFolder`, and a checkbox controlling whether that calendar's events are
+ * currently shown (the checked set is owned by `apps/www/calendar/index.tsx`, since it drives which
+ * folders get fanned out to on every reload). "+ Add calendar" is a real `createFolder({type:
+ * "calendar", ...})` call — see the Phase 4 plan's own note that folder creation has no type
+ * restriction server-side, so this needed no new backend route.
+ */
+export default function CalendarListSidebar({ calendars, checkedFolderUids, onToggle, onAddCalendar }: CalendarListSidebarProps) {
+    const [adding, setAdding] = useState(false);
+    const [name, setName] = useState("");
+    const [color, setColor] = useState(CALENDAR_COLOR_PALETTE[0]);
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+
+    async function handleAdd(e: FormEvent) {
+        e.preventDefault();
+        if (!name.trim()) {
+            return;
+        }
+        setError(null);
+        setSaving(true);
+        try {
+            await onAddCalendar(name.trim(), color);
+            setName("");
+            setColor(CALENDAR_COLOR_PALETTE[0]);
+            setAdding(false);
+        } catch {
+            setError("Could not create this calendar.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <nav aria-label="My calendars" className="p-3 border-t border-border">
+            <div className="flex items-center justify-between mb-1">
+                <h2 className="text-xs font-bold uppercase tracking-wide text-text-muted">My calendars</h2>
+                <button
+                    type="button"
+                    onClick={() => setAdding(true)}
+                    aria-label="Add calendar"
+                    className="text-xs font-bold text-primary-dark hover:underline"
+                >
+                    +
+                </button>
+            </div>
+            {error && (
+                <div className="mb-1">
+                    <Alert>{error}</Alert>
+                </div>
+            )}
+            <div className="flex flex-col gap-0.5">
+                {calendars.map((folder) => (
+                    <label key={folder.uid} className="flex items-center gap-2 text-sm px-1 py-1 rounded-sm hover:bg-surface-alt cursor-pointer">
+                        <input
+                            type="checkbox"
+                            checked={checkedFolderUids.has(folder.uid)}
+                            onChange={() => onToggle(folder.uid)}
+                            style={{ accentColor: colorForFolder(folder) }}
+                        />
+                        <span aria-hidden="true" className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: colorForFolder(folder) }} />
+                        <span className="truncate">{folder.name}</span>
+                    </label>
+                ))}
+            </div>
+            {adding && (
+                <form onSubmit={handleAdd} className="flex flex-col gap-1.5 mt-2">
+                    <input
+                        type="text"
+                        autoFocus
+                        aria-label="New calendar name"
+                        value={name}
+                        onChange={(e) => setName(e.target.value)}
+                        className="text-xs py-1 px-1.5 border border-border rounded-sm bg-surface"
+                    />
+                    <div className="flex items-center gap-1" role="radiogroup" aria-label="Calendar color">
+                        {CALENDAR_COLOR_PALETTE.map((swatch) => (
+                            <button
+                                key={swatch}
+                                type="button"
+                                aria-label={`Color ${swatch}`}
+                                aria-pressed={color === swatch}
+                                onClick={() => setColor(swatch)}
+                                className={["w-4 h-4 rounded-full shrink-0", color === swatch ? "ring-2 ring-offset-1 ring-text" : ""].join(" ")}
+                                style={{ backgroundColor: swatch }}
+                            />
+                        ))}
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <button type="submit" disabled={saving} className="text-xs font-semibold text-primary-dark">
+                            Add
+                        </button>
+                        <button type="button" onClick={() => setAdding(false)} className="text-xs text-text-muted">
+                            Cancel
+                        </button>
+                    </div>
+                </form>
+            )}
+        </nav>
+    );
+}