msg

2026-08-20 12:23:30 +02:00
parent e61750f314
commit a980812137
9 changed files with 351 additions and 106 deletions
@@ -12,6 +12,7 @@ import { CreateEventDialog } from "@/components/create-event-dialog"
 import { EventDetailDialog } from "@/components/event-detail-dialog"
 import { CreateRoomDialog, JoinRoomDialog } from "@/components/room-dialogs"
 import { RoomSettingsDialog } from "@/components/room-settings-dialog"
+import { AccountSettingsDialog } from "@/components/account-settings-dialog"
 import { RoomBackground } from "@/components/room-background"
 import { getRoomBackground } from "@/lib/room-theme"
 import { addDays, startOfWeek, toDateParam, formatMonthYear } from "@/lib/date-utils"
@@ -20,10 +21,12 @@ import type { CalendarEvent, User } from "@/lib/types"
 type DialogState =
  | { type: "none" }
  | { type: "create-event" }
+  | { type: "edit-event"; event: CalendarEvent }
  | { type: "event-detail"; event: CalendarEvent }
  | { type: "create-room" }
  | { type: "join-room" }
  | { type: "room-settings" }
+  | { type: "account-settings" }

 export default function Home() {
  const { user, loading, logout } = useAuth()
@@ -105,6 +108,7 @@ function CalendarApp({ user, onLogout }: { user: User; onLogout: () => void }) {
            onJoinRoom={() => setDialog({ type: "join-room" })}
            user={user}
            onLogout={onLogout}
+            onOpenAccountSettings={() => setDialog({ type: "account-settings" })}
          />
        </div>

@@ -162,11 +166,12 @@ function CalendarApp({ user, onLogout }: { user: User; onLogout: () => void }) {
        </main>
      </div>

-      {dialog.type === "create-event" && (
+      {(dialog.type === "create-event" || dialog.type === "edit-event") && (
        <CreateEventDialog
          rooms={rooms}
          defaultRoomId={activeRoomId}
          defaultDate={selectedDate}
+          editingEvent={dialog.type === "edit-event" ? dialog.event : undefined}
          onClose={() => setDialog({ type: "none" })}
          onCreated={() => {
            setDialog({ type: "none" })
@@ -182,6 +187,7 @@ function CalendarApp({ user, onLogout }: { user: User; onLogout: () => void }) {
          currentUserId={user.id}
          onClose={() => setDialog({ type: "none" })}
          onChanged={refreshAll}
+          onEdit={() => setDialog({ type: "edit-event", event: dialog.event })}
        />
      )}

@@ -220,6 +226,14 @@ function CalendarApp({ user, onLogout }: { user: User; onLogout: () => void }) {
          }}
        />
      )}
+
+      {dialog.type === "account-settings" && (
+        <AccountSettingsDialog
+          user={user}
+          onClose={() => setDialog({ type: "none" })}
+          onLogout={onLogout}
+        />
+      )}
    </div>
  )
 }
@@ -0,0 +1,74 @@
+"use client"
+
+import { LogOut, Mail, MailCheck, MailWarning, UserRound } from "lucide-react"
+import { GlassModal, fieldClass, labelClass } from "./glass-modal"
+import type { User } from "@/lib/types"
+
+interface AccountSettingsDialogProps {
+  user: User
+  onClose: () => void
+  onLogout: () => void
+}
+
+export function AccountSettingsDialog({ user, onClose, onLogout }: AccountSettingsDialogProps) {
+  return (
+    <GlassModal title="Account settings" onClose={onClose}>
+      <div className="flex flex-col gap-5">
+        <div className="flex items-center gap-3">
+          <div className="flex h-14 w-14 items-center justify-center rounded-full bg-blue-500 text-xl font-bold text-white">
+            {user.username.charAt(0).toUpperCase()}
+          </div>
+          <div className="min-w-0">
+            <p className="truncate text-lg font-semibold text-white">{user.username}</p>
+            <p className="truncate text-sm text-white/60">{user.email ?? "No email on file"}</p>
+          </div>
+        </div>
+
+        <div>
+          <label className={labelClass}>Username</label>
+          <div className={`${fieldClass} flex items-center gap-2 opacity-80`}>
+            <UserRound className="h-4 w-4 text-white/60" />
+            {user.username}
+          </div>
+        </div>
+
+        <div>
+          <label className={labelClass}>Email</label>
+          <div className={`${fieldClass} flex items-center gap-2 opacity-80`}>
+            <Mail className="h-4 w-4 text-white/60" />
+            {user.email ?? "—"}
+          </div>
+          {user.email && (
+            <p className="mt-1.5 flex items-center gap-1.5 text-xs text-white/60">
+              {user.email_verified ? (
+                <>
+                  <MailCheck className="h-3.5 w-3.5 text-emerald-300" /> Verified
+                </>
+              ) : (
+                <>
+                  <MailWarning className="h-3.5 w-3.5 text-amber-300" /> Not verified
+                </>
+              )}
+            </p>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between border-t border-white/15 pt-4">
+          <button
+            onClick={onLogout}
+            className="flex items-center gap-1.5 rounded-xl border border-white/20 bg-white/10 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-white/20"
+          >
+            <LogOut className="h-4 w-4" /> Sign out
+          </button>
+
+          <button
+            onClick={onClose}
+            className="rounded-xl border-2 border-emerald-400/80 bg-white/5 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-500/20"
+          >
+            OK
+          </button>
+        </div>
+      </div>
+    </GlassModal>
+  )
+}
@@ -6,21 +6,23 @@ import { Loader2 } from "lucide-react"
 import { GlassModal, fieldClass, labelClass } from "./glass-modal"
 import * as api from "@/lib/api"
 import { ApiError } from "@/lib/api"
-import type { EventType, EventVisibility, Room } from "@/lib/types"
-import { toBackendDateTime, toInputDateTime } from "@/lib/date-utils"
+import type { CalendarEvent, EventType, EventVisibility, Room } from "@/lib/types"
+import { parseDateTime, toBackendDateTime, toDateParam, toInputTime } from "@/lib/date-utils"

 interface CreateEventDialogProps {
  rooms: Room[]
  defaultRoomId: number | null
  defaultDate: Date
+  /** When set, the dialog edits this event instead of creating a new one. */
+  editingEvent?: CalendarEvent
  onClose: () => void
  onCreated: () => void
 }

 const TYPE_OPTIONS: { value: EventType; label: string }[] = [
  { value: "proposal", label: "Proposal (members vote to confirm)" },
-  { value: "busy", label: "Busy (blocked time)" },
-  { value: "private", label: "Private" },
+  { value: "busy", label: "Busy — room sees it as busy, no details" },
+  { value: "private", label: "Private — hidden from the room" },
 ]

 const VISIBILITY_OPTIONS: { value: EventVisibility; label: string }[] = [
@@ -35,27 +37,49 @@ export function CreateEventDialog({
  rooms,
  defaultRoomId,
  defaultDate,
+  editingEvent,
  onClose,
  onCreated,
 }: CreateEventDialogProps) {
-  const initialRoom = defaultRoomId ?? rooms[0]?.id ?? 0
+  const isEditing = !!editingEvent
+  const initialRoom = editingEvent?.room_id ?? defaultRoomId ?? rooms[0]?.id ?? 0

-  const defaultStart = new Date(defaultDate)
-  defaultStart.setHours(9, 0, 0, 0)
-  const defaultEnd = new Date(defaultDate)
-  defaultEnd.setHours(10, 0, 0, 0)
+  // Start time defaults to "now", rounded up to the next quarter hour.
+  const now = new Date()
+  const defaultStartTime = new Date(now)
+  defaultStartTime.setMinutes(Math.ceil(now.getMinutes() / 15) * 15, 0, 0)
+  const defaultEndTime = new Date(defaultStartTime)
+  defaultEndTime.setHours(defaultEndTime.getHours() + 1)
+
+  const editStart = editingEvent ? parseDateTime(editingEvent.start_time) : null
+  const editEnd = editingEvent ? parseDateTime(editingEvent.end_time) : null

  const [roomId, setRoomId] = useState<number>(initialRoom)
-  const [title, setTitle] = useState("")
-  const [description, setDescription] = useState("")
-  const [type, setType] = useState<EventType>("proposal")
-  const [visibility, setVisibility] = useState<EventVisibility>("room")
-  const [start, setStart] = useState(toInputDateTime(defaultStart))
-  const [end, setEnd] = useState(toInputDateTime(defaultEnd))
-  const [minPeople, setMinPeople] = useState(1)
+  const [title, setTitle] = useState(editingEvent?.title ?? "")
+  const [description, setDescription] = useState(editingEvent?.description ?? "")
+  const [type, setType] = useState<EventType>(editingEvent?.type ?? "proposal")
+  const [visibility, setVisibility] = useState<EventVisibility>(editingEvent?.visibility ?? "room")
+  const [date, setDate] = useState(toDateParam(editStart ?? defaultDate))
+  const [multiDay, setMultiDay] = useState(
+    editStart && editEnd ? toDateParam(editStart) !== toDateParam(editEnd) : false,
+  )
+  const [endDate, setEndDate] = useState(toDateParam(editEnd ?? editStart ?? defaultDate))
+  const [startTime, setStartTime] = useState(toInputTime(editStart ?? defaultStartTime))
+  const [endTime, setEndTime] = useState(toInputTime(editEnd ?? defaultEndTime))
+  const [minPeople, setMinPeople] = useState(editingEvent?.min_people ?? 1)
  const [error, setError] = useState<string | null>(null)
  const [submitting, setSubmitting] = useState(false)

+  // Busy/private events are always visible to the room as just "busy" (no
+  // details) or not visible at all — that's implied by the type, so the
+  // visibility choice only makes sense for proposals.
+  const handleTypeChange = (value: EventType) => {
+    setType(value)
+    if (value === "busy") setVisibility("busy_only")
+    else if (value === "private") setVisibility("private")
+    else setVisibility("room")
+  }
+
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError(null)
@@ -64,38 +88,51 @@ export function CreateEventDialog({
      setError("Please select a room.")
      return
    }
-    const startDate = new Date(start)
-    const endDate = new Date(end)
-    if (endDate <= startDate) {
+    const startDate = new Date(`${date}T${startTime}`)
+    const endDate2 = new Date(`${multiDay ? endDate : date}T${endTime}`)
+    if (endDate2 <= startDate) {
      setError("End time must be after the start time.")
      return
    }

+    const payload = {
+      room_id: roomId,
+      type,
+      title: title.trim(),
+      description: description.trim(),
+      start_time: toBackendDateTime(startDate),
+      end_time: toBackendDateTime(endDate2),
+      visibility: type === "proposal" ? visibility : type === "busy" ? "busy_only" : "private",
+      min_people: type === "proposal" ? minPeople : 0,
+    } as const
+
    setSubmitting(true)
    try {
-      await api.createEvent({
-        room_id: roomId,
-        type,
-        title: title.trim(),
-        description: description.trim(),
-        start_time: toBackendDateTime(startDate),
-        end_time: toBackendDateTime(endDate),
-        visibility,
-        status: type === "proposal" ? "proposed" : "confirmed",
-        min_people: type === "proposal" ? minPeople : 0,
-      })
+      if (isEditing && editingEvent) {
+        await api.updateEvent(editingEvent.id, payload)
+      } else {
+        await api.createEvent({ ...payload, status: type === "proposal" ? "proposed" : "confirmed" })
+      }
      onCreated()
      onClose()
    } catch (err) {
-      setError(err instanceof ApiError ? err.message : "Could not create the event.")
+      setError(
+        err instanceof ApiError
+          ? err.message
+          : isEditing
+            ? "Could not save the changes."
+            : "Could not create the event.",
+      )
    } finally {
      setSubmitting(false)
    }
  }

+  const dialogTitle = isEditing ? "Edit event" : "Create event"
+
  if (rooms.length === 0) {
    return (
-      <GlassModal title="Create event" onClose={onClose}>
+      <GlassModal title={dialogTitle} onClose={onClose}>
        <p className="text-sm text-white/80">
          You need to be in a room before creating an event. Create or join a room first.
        </p>
@@ -104,7 +141,7 @@ export function CreateEventDialog({
  }

  return (
-    <GlassModal title="Create event" onClose={onClose}>
+    <GlassModal title={dialogTitle} onClose={onClose} maxWidth="max-w-lg">
      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
        <div>
          <label className={labelClass} htmlFor="event-room">
@@ -152,33 +189,83 @@ export function CreateEventDialog({
          />
        </div>

-        <div className="grid grid-cols-2 gap-3">
+        <div className="rounded-xl border border-white/15 bg-white/5 p-3">
          <div>
-            <label className={labelClass} htmlFor="event-start">
-              Start
+            <label className={labelClass} htmlFor="event-date">
+              Date
            </label>
            <input
-              id="event-start"
-              type="datetime-local"
+              id="event-date"
+              type="date"
              required
-              value={start}
-              onChange={(e) => setStart(e.target.value)}
+              value={date}
+              onChange={(e) => {
+                setDate(e.target.value)
+                if (!multiDay) setEndDate(e.target.value)
+              }}
              className={`${fieldClass} [color-scheme:dark]`}
            />
          </div>
-          <div>
-            <label className={labelClass} htmlFor="event-end">
-              End
-            </label>
-            <input
-              id="event-end"
-              type="datetime-local"
-              required
-              value={end}
-              onChange={(e) => setEnd(e.target.value)}
-              className={`${fieldClass} [color-scheme:dark]`}
-            />
+
+          <div className="mt-3 grid grid-cols-2 gap-3">
+            <div>
+              <label className={labelClass} htmlFor="event-start-time">
+                Start time
+              </label>
+              <input
+                id="event-start-time"
+                type="time"
+                required
+                lang="nl-NL"
+                value={startTime}
+                onChange={(e) => setStartTime(e.target.value)}
+                className={`${fieldClass} [color-scheme:dark]`}
+              />
+            </div>
+            <div>
+              <label className={labelClass} htmlFor="event-end-time">
+                End time
+              </label>
+              <input
+                id="event-end-time"
+                type="time"
+                required
+                lang="nl-NL"
+                value={endTime}
+                onChange={(e) => setEndTime(e.target.value)}
+                className={`${fieldClass} [color-scheme:dark]`}
+              />
+            </div>
          </div>
+
+          <label className="mt-3 flex items-center gap-2 text-xs text-white/70">
+            <input
+              type="checkbox"
+              checked={multiDay}
+              onChange={(e) => {
+                setMultiDay(e.target.checked)
+                if (!e.target.checked) setEndDate(date)
+              }}
+              className="h-3.5 w-3.5 rounded border-white/30 bg-white/10"
+            />
+            Ends on a different day
+          </label>
+
+          {multiDay && (
+            <div className="mt-2">
+              <label className={labelClass} htmlFor="event-end-date">
+                End date
+              </label>
+              <input
+                id="event-end-date"
+                type="date"
+                required
+                value={endDate}
+                onChange={(e) => setEndDate(e.target.value)}
+                className={`${fieldClass} [color-scheme:dark]`}
+              />
+            </div>
+          )}
        </div>

        <div>
@@ -188,7 +275,7 @@ export function CreateEventDialog({
          <select
            id="event-type"
            value={type}
-            onChange={(e) => setType(e.target.value as EventType)}
+            onChange={(e) => handleTypeChange(e.target.value as EventType)}
            className={fieldClass}
          >
            {TYPE_OPTIONS.map((o) => (
@@ -218,23 +305,25 @@ export function CreateEventDialog({
          </div>
        )}

-        <div>
-          <label className={labelClass} htmlFor="event-visibility">
-            Visibility
-          </label>
-          <select
-            id="event-visibility"
-            value={visibility}
-            onChange={(e) => setVisibility(e.target.value as EventVisibility)}
-            className={fieldClass}
-          >
-            {VISIBILITY_OPTIONS.map((o) => (
-              <option key={o.value} value={o.value} className={optionClass}>
-                {o.label}
-              </option>
-            ))}
-          </select>
-        </div>
+        {type === "proposal" && (
+          <div>
+            <label className={labelClass} htmlFor="event-visibility">
+              Visibility
+            </label>
+            <select
+              id="event-visibility"
+              value={visibility}
+              onChange={(e) => setVisibility(e.target.value as EventVisibility)}
+              className={fieldClass}
+            >
+              {VISIBILITY_OPTIONS.map((o) => (
+                <option key={o.value} value={o.value} className={optionClass}>
+                  {o.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}

        {error && (
          <div className="rounded-xl border border-red-400/40 bg-red-500/20 px-4 py-2.5 text-sm">
@@ -256,7 +345,7 @@ export function CreateEventDialog({
            className="flex items-center gap-2 rounded-xl bg-blue-500 px-5 py-2.5 text-sm font-medium transition-colors hover:bg-blue-600 disabled:opacity-70"
          >
            {submitting && <Loader2 className="h-4 w-4 animate-spin" />}
-            Create
+            {isEditing ? "Save changes" : "Create"}
          </button>
        </div>
      </form>
@@ -14,10 +14,13 @@ import {
  CheckCircle2,
  Ban,
  Loader2,
+  Pencil,
+  UserRound,
 } from "lucide-react"
 import { GlassModal } from "./glass-modal"
 import * as api from "@/lib/api"
 import { ApiError } from "@/lib/api"
+import { useRoomMembers } from "@/lib/hooks"
 import type { CalendarEvent, Room, SignupStatus } from "@/lib/types"
 import { getRoomColor } from "@/lib/room-theme"
 import { parseDateTime, formatDayLabel, formatTime } from "@/lib/date-utils"
@@ -28,6 +31,7 @@ interface EventDetailDialogProps {
  currentUserId: number
  onClose: () => void
  onChanged: () => void
+  onEdit: () => void
 }

 const STATUS_STYLES: Record<string, string> = {
@@ -43,6 +47,7 @@ export function EventDetailDialog({
  currentUserId,
  onClose,
  onChanged,
+  onEdit,
 }: EventDetailDialogProps) {
  const [busy, setBusy] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)
@@ -52,11 +57,16 @@ export function EventDetailDialog({
    ["responses", event.id],
    () => api.getEventResponses(event.id),
  )
+  const { members } = useRoomMembers(event.room_id)

  const start = parseDateTime(event.start_time)
  const end = parseDateTime(event.end_time)
  const color = getRoomColor(event.room_id)

+  const creator = members.find((m) => m.id === event.creator_id)
+  const creatorLabel =
+    event.creator_id === currentUserId ? "you" : (creator?.username ?? `member #${event.creator_id}`)
+
  const canManage =
    event.creator_id === currentUserId || room?.role === "admin" || room?.role === "owner"

@@ -79,6 +89,20 @@ export function EventDetailDialog({
    }
  }

+  const handleDelete = async () => {
+    setBusy("delete")
+    setError(null)
+    try {
+      await api.deleteEvent(event.id)
+      onChanged()
+      onClose()
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : "Action failed.")
+    } finally {
+      setBusy(null)
+    }
+  }
+
  const respond = (status: SignupStatus) =>
    run(`respond-${status}`, () => api.respondToEvent(event.id, status), true)

@@ -94,13 +118,15 @@ export function EventDetailDialog({
        <div className="flex flex-wrap items-center gap-2">
          <span className={`h-3 w-3 rounded-sm ${color.dot}`} />
          <span className="text-sm text-white/80">{room?.name ?? `Room #${event.room_id}`}</span>
-          <span
-            className={`ml-auto rounded-full border px-2.5 py-0.5 text-xs font-medium capitalize ${
-              STATUS_STYLES[event.status] ?? STATUS_STYLES.draft
-            }`}
-          >
-            {event.status}
-          </span>
+          {event.type === "proposal" && (
+            <span
+              className={`ml-auto rounded-full border px-2.5 py-0.5 text-xs font-medium capitalize ${
+                STATUS_STYLES[event.status] ?? STATUS_STYLES.draft
+              }`}
+            >
+              {event.status}
+            </span>
+          )}
        </div>

        <div className="space-y-2 text-sm text-white/90">
@@ -116,6 +142,10 @@ export function EventDetailDialog({
            <DoorClosed className="h-4 w-4 text-white/70" />
            {event.type} · {event.visibility.replace("_", " ")}
          </p>
+          <p className="flex items-center gap-2">
+            <UserRound className="h-4 w-4 text-white/70" />
+            Created by {creatorLabel}
+          </p>
          {event.type === "proposal" && (
            <p className="flex items-center gap-2">
              <Users className="h-4 w-4 text-white/70" />
@@ -130,8 +160,8 @@ export function EventDetailDialog({
          </p>
        )}

-        {/* RSVP */}
-        {event.status !== "cancelled" && (
+        {/* RSVP — only relevant for proposals, busy/private have no attendees to respond */}
+        {event.type === "proposal" && event.status !== "cancelled" && (
          <div>
            <p className="mb-2 text-sm font-medium text-white/90">Your response</p>
            <div className="flex gap-2">
@@ -174,22 +204,31 @@ export function EventDetailDialog({
        {canManage && (
          <div className="flex flex-col gap-3 border-t border-white/15 pt-4">
            <div className="flex flex-wrap gap-2">
-              {event.status !== "confirmed" && event.status !== "cancelled" && (
+              <button
+                onClick={onEdit}
+                disabled={busy !== null}
+                className="flex items-center gap-1.5 rounded-xl bg-white/10 px-3 py-2 text-sm font-medium transition-colors hover:bg-white/20 disabled:opacity-70"
+              >
+                <Pencil className="h-4 w-4" /> Edit event
+              </button>
+              {/* Confirm/cancel only make sense for proposals — busy/private
+                  blocks are already "confirmed" the moment they're created. */}
+              {event.type === "proposal" && event.status !== "confirmed" && event.status !== "cancelled" && (
                <button
                  onClick={() => run("confirm", () => api.confirmEvent(event.id))}
                  disabled={busy !== null}
                  className="flex items-center gap-1.5 rounded-xl bg-emerald-500/80 px-3 py-2 text-sm font-medium transition-colors hover:bg-emerald-500 disabled:opacity-70"
                >
-                  <CheckCircle2 className="h-4 w-4" /> Confirm
+                  <CheckCircle2 className="h-4 w-4" /> Confirm event
                </button>
              )}
-              {event.status !== "cancelled" && (
+              {event.type === "proposal" && event.status !== "cancelled" && (
                <button
                  onClick={() => run("cancel", () => api.cancelEvent(event.id))}
                  disabled={busy !== null}
                  className="flex items-center gap-1.5 rounded-xl bg-white/10 px-3 py-2 text-sm font-medium transition-colors hover:bg-white/20 disabled:opacity-70"
                >
-                  <Ban className="h-4 w-4" /> Cancel
+                  <Ban className="h-4 w-4" /> Cancel event
                </button>
              )}
            </div>
@@ -214,7 +253,7 @@ export function EventDetailDialog({
                  <div className="flex flex-col gap-2">
                    {/* Destructive action sits on top, off the "usual" spot. */}
                    <button
-                      onClick={() => run("delete", () => api.deleteEvent(event.id))}
+                      onClick={handleDelete}
                      disabled={busy !== null}
                      className="flex items-center justify-center gap-1.5 rounded-xl bg-red-500 px-3 py-2.5 text-sm font-medium transition-colors hover:bg-red-600 disabled:opacity-70"
                    >
@@ -239,6 +278,16 @@ export function EventDetailDialog({
            </div>
          </div>
        )}
+
+        {/* Always-available close action, bottom right. */}
+        <div className="flex justify-end pt-1">
+          <button
+            onClick={onClose}
+            className="rounded-xl border-2 border-emerald-400/80 bg-white/5 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-500/20"
+          >
+            OK
+          </button>
+        </div>
      </div>
    </GlassModal>
  )
@@ -28,6 +28,7 @@ interface SidebarProps {
  onJoinRoom: () => void
  user: User | null
  onLogout: () => void
+  onOpenAccountSettings: () => void
 }

 const WEEKDAY_MINI = ["S", "M", "T", "W", "T", "F", "S"]
@@ -51,6 +52,7 @@ export function Sidebar({
  onJoinRoom,
  user,
  onLogout,
+  onOpenAccountSettings,
 }: SidebarProps) {
  const [miniMonth, setMiniMonth] = useState(() => {
    const d = new Date(selectedDate)
@@ -200,13 +202,18 @@ export function Sidebar({

      {/* User footer */}
      <div className="mt-4 flex items-center gap-3 border-t border-white/20 pt-4">
-        <div className="flex h-9 w-9 items-center justify-center rounded-full bg-blue-500 font-bold text-white">
-          {user?.username?.charAt(0).toUpperCase() ?? "U"}
-        </div>
-        <div className="min-w-0 flex-1">
-          <p className="truncate text-sm font-medium text-white">{user?.username}</p>
-          <p className="truncate text-xs text-white/60">{user?.email}</p>
-        </div>
+        <button
+          onClick={onOpenAccountSettings}
+          className="flex min-w-0 flex-1 items-center gap-3 rounded-lg p-1 text-left transition-colors hover:bg-white/10"
+        >
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-500 font-bold text-white">
+            {user?.username?.charAt(0).toUpperCase() ?? "U"}
+          </div>
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-white">{user?.username}</p>
+            <p className="truncate text-xs text-white/60">{user?.email}</p>
+          </div>
+        </button>
        <button
          onClick={onLogout}
          className="rounded-lg p-2 text-white/80 transition-colors hover:bg-white/20 hover:text-white"
@@ -212,7 +212,7 @@ export function WeekView({ weekStart, events, myResponses, onEventClick }: WeekV
                  <button
                    key={pe.event.id + "-" + i}
                    onClick={() => onEventClick(pe.event)}
-                    className={`animate-fade-in absolute overflow-hidden rounded-md p-1.5 text-left text-xs text-white shadow-md transition-all duration-150 ease-in-out hover:z-20 hover:-translate-y-0.5 hover:shadow-lg ${style.bg} ${
+                    className={`animate-fade-in absolute flex flex-col items-stretch justify-start overflow-hidden rounded-md p-1.5 text-left text-xs text-white shadow-md transition-all duration-150 ease-in-out hover:z-20 hover:-translate-y-0.5 hover:shadow-lg ${style.bg} ${
                      style.dashed ? "border border-dashed border-white/70" : ""
                    } ${style.outline ? "border-2 border-white/80" : ""} ${
                      style.muted ? "opacity-60" : ""
@@ -53,6 +53,13 @@ export function toInputDateTime(date: Date): string {
  return toBackendDateTime(date).replace(" ", "T")
 }

+// For <input type="time"> values ("HH:MM").
+export function toInputTime(date: Date): string {
+  const h = String(date.getHours()).padStart(2, "0")
+  const mi = String(date.getMinutes()).padStart(2, "0")
+  return `${h}:${mi}`
+}
+
 export function formatTime(date: Date): string {
  if (isNaN(date.getTime())) return "--:--"
  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false })
@@ -12,10 +12,15 @@ export function useRooms() {
 // activeRoomId === null => all rooms combined via /events
 export function useEvents(activeRoomId: number | null, from?: string, to?: string) {
  const key = activeRoomId === null ? ["events", from, to] : ["room-events", activeRoomId, from, to]
-  const { data, error, isLoading, mutate } = useSWR(key, () =>
-    activeRoomId === null
-      ? api.getUserEvents(from, to)
-      : api.getRoomEvents(activeRoomId, from, to),
+  const { data, error, isLoading, mutate } = useSWR(
+    key,
+    () =>
+      activeRoomId === null
+        ? api.getUserEvents(from, to)
+        : api.getRoomEvents(activeRoomId, from, to),
+    // Keep showing the previous week/room's events while the new key loads,
+    // instead of flashing an empty/loading state on every switch.
+    { keepPreviousData: true },
  )
  return { events: data ?? [], error, isLoading, mutate }
 }
@@ -2,15 +2,15 @@

 ### Create event
 - [x] Different colors for different events
- [ ] Make the create-event popup slightly wider
- [ ] Improve the placement of the time fields
- [ ] Start time should default to the current time
+- [x] Make the create-event popup slightly wider
+- [x] Improve the placement of the time fields
+- [x] Start time should default to the current time

 ### Week view
- [ ] Events longer than 1 hour should have their title at the top, not vertically centered
- [ ] Fix the week-view flicker: the view sometimes disappears for ~10 ms
+- [x] Events longer than 1 hour should have their title at the top, not vertically centered
+- [x] Fix the week-view flicker: the view sometimes disappears for ~10 ms

 ### Room customization
- [ ] Allow admins/owners to upload their own background image for the room
- [ ] Support images up to 1080p
- [ ] Store and load the background image per room
+- [~] Allow admins/owners to upload their own background image for the room
+- [~] Support images up to 1080p
+- [~] Store and load the background image per room