sync: update from private repo (dfadcd5f)

ui/src/components/spaces/SpaceCalendar.tsx

@@ -0,0 +1,688 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  fetchSpaceCalendarMonth,
+  fetchSpaceCalendarDay,
+  createCalendarEvent,
+  updateCalendarEvent,
+  deleteCalendarEvent,
+  fetchSpaceFileContent,
+  getSpaceFileRawUrl,
+  getSpaceTrustedHtmlUrl,
+  type CalendarEvent,
+} from '../../api';
+import { localToday, localTzOffset, shiftDay } from '../../lib/localDate';
+import { isImagePreviewable, isPdfPreviewable, isHtmlPreviewable } from '../../lib/utils';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import { FilePreview } from '../files/FilePreview';
+import { FileTypeIcon } from '../files/FileTypeIcon';
+import { SwipeableTabs } from '../mobile/SwipeableTabs';
+
+const WEEKDAYS = ['日', '月', '火', '水', '木', '金', '土'];
+
+/** 'YYYY-MM' of the viewer's local today. */
+function localMonth(): string {
+  return localToday().slice(0, 7);
+}
+/** month ± delta, as 'YYYY-MM' (calendar arithmetic on the 1st via UTC). */
+function shiftMonth(month: string, delta: number): string {
+  const [y, m] = month.split('-').map(Number);
+  const d = new Date(Date.UTC(y, m - 1 + delta, 1));
+  return `${d.getUTCFullYear()}-${String(d.getUTCMonth() + 1).padStart(2, '0')}`;
+}
+/** All 'YYYY-MM-DD' cells for the month grid, padded to full weeks (Sun-start). */
+function monthGridDays(month: string): string[] {
+  const [y, m] = month.split('-').map(Number);
+  const first = new Date(Date.UTC(y, m - 1, 1));
+  const start = shiftDay(first.toISOString().slice(0, 10), -first.getUTCDay());
+  const days: string[] = [];
+  // 6 weeks always covers any month layout (max 31 days + 6 lead).
+  for (let i = 0; i < 42; i++) days.push(shiftDay(start, i));
+  return days;
+}
+function fmtSize(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}MB`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}KB`;
+  return `${n}B`;
+}
+
+/** 'YYYY-MM-DD' → 'M/D'（月グリッドのバー・期間表示用）。 */
+function fmtMonthDay(d: string): string {
+  return `${Number(d.slice(5, 7))}/${Number(d.slice(8, 10))}`;
+}
+/** 予定の期間を短く: 単日は 'M/D'、複数日は 'M/D–M/D'。 */
+function fmtRange(ev: CalendarEvent): string {
+  const end = ev.endDate && ev.endDate > ev.date ? ev.endDate : null;
+  return end ? `${fmtMonthDay(ev.date)}–${fmtMonthDay(end)}` : fmtMonthDay(ev.date);
+}
+
+// ── カレンダーの表示フィルター（タスク / 変更ファイル / 予定）─────────────
+type CalFilters = { tasks: boolean; files: boolean; events: boolean };
+const FILTER_DEFS: ReadonlyArray<{ key: keyof CalFilters; label: string; icon: string }> = [
+  { key: 'tasks', label: 'タスク', icon: '💬' },
+  { key: 'files', label: '変更ファイル', icon: '📄' },
+  { key: 'events', label: '予定', icon: '📌' },
+];
+const FILTERS_STORAGE_KEY = 'spaceCalendarFilters';
+function loadFilters(): CalFilters {
+  try {
+    const raw = localStorage.getItem(FILTERS_STORAGE_KEY);
+    if (raw) {
+      const p = JSON.parse(raw) as Partial<CalFilters>;
+      return { tasks: p.tasks !== false, files: p.files !== false, events: p.events !== false };
+    }
+  } catch { /* ignore */ }
+  return { tasks: true, files: true, events: true };
+}
+
+/** 1 週（7 日）にかかるイベントを、横棒の lane（重ならない行）に割り付ける。 */
+interface WeekBar {
+  ev: CalendarEvent;
+  colStart: number;   // 1–7
+  colSpan: number;
+  lane: number;       // 0-based の積み上げ行
+  continuesLeft: boolean;
+  continuesRight: boolean;
+}
+function layoutWeekBars(weekDays: string[], events: CalendarEvent[]): WeekBar[] {
+  const weekStart = weekDays[0]!;
+  const weekEnd = weekDays[6]!;
+  const segs = events
+    .map((ev) => {
+      const evEnd = ev.endDate && ev.endDate > ev.date ? ev.endDate : ev.date;
+      if (evEnd < weekStart || ev.date > weekEnd) return null;
+      const segStart = ev.date < weekStart ? weekStart : ev.date;
+      const segEnd = evEnd > weekEnd ? weekEnd : evEnd;
+      const colStart = weekDays.indexOf(segStart) + 1;
+      const colEnd = weekDays.indexOf(segEnd) + 1;
+      return {
+        ev,
+        colStart,
+        colSpan: colEnd - colStart + 1,
+        continuesLeft: ev.date < weekStart,
+        continuesRight: evEnd > weekEnd,
+      };
+    })
+    .filter((s): s is Omit<WeekBar, 'lane'> => s !== null)
+    // 長い棒・早い開始を優先して上の lane に積む
+    .sort((a, b) => b.colSpan - a.colSpan || a.colStart - b.colStart || a.ev.id - b.ev.id);
+
+  const laneEnds: number[] = []; // lane ごとの「最後に埋まった列」
+  const bars: WeekBar[] = [];
+  for (const s of segs) {
+    let lane = laneEnds.findIndex((end) => end < s.colStart);
+    if (lane === -1) { lane = laneEnds.length; laneEnds.push(0); }
+    laneEnds[lane] = s.colStart + s.colSpan - 1;
+    bars.push({ ...s, lane });
+  }
+  return bars;
+}
+
+interface SpaceCalendarProps {
+  spaceId: string;
+  /** open the chat for a task created in this space (switches to the chat tab). */
+  onOpenChat: (taskId: number) => void;
+  /** owner/admin can add/edit/delete events; viewers see read-only. */
+  canEdit: boolean;
+}
+
+export function SpaceCalendar({ spaceId, onOpenChat, canEdit }: SpaceCalendarProps) {
+  const tzOffset = localTzOffset();
+  const isMobile = useIsMobile();
+  const [month, setMonth] = useState(localMonth());
+  const [selectedDate, setSelectedDate] = useState<string | null>(null);
+  const [filters, setFilters] = useState<CalFilters>(loadFilters);
+
+  const toggleFilter = useCallback((key: keyof CalFilters) => {
+    setFilters((prev) => {
+      const next = { ...prev, [key]: !prev[key] };
+      try { localStorage.setItem(FILTERS_STORAGE_KEY, JSON.stringify(next)); } catch { /* ignore */ }
+      return next;
+    });
+  }, []);
+
+  const monthQuery = useQuery({
+    queryKey: ['spaceCalendarMonth', spaceId, month, tzOffset],
+    queryFn: () => fetchSpaceCalendarMonth(spaceId, month, tzOffset),
+  });
+
+  const today = localToday();
+  const days = useMemo(() => monthGridDays(month), [month]);
+  const weeks = useMemo(() => {
+    const out: string[][] = [];
+    for (let i = 0; i < days.length; i += 7) out.push(days.slice(i, i + 7));
+    return out;
+  }, [days]);
+  const counts = monthQuery.data?.days ?? {};
+  const events = useMemo(() => monthQuery.data?.events ?? [], [monthQuery.data]);
+  const monthLabel = (() => {
+    const [y, m] = month.split('-');
+    return `${y}年${Number(m)}月`;
+  })();
+
+  const grid = (
+    <div className="flex flex-col gap-2">
+      {/* month nav */}
+      <div className="flex items-center justify-between">
+        <button
+          type="button"
+          data-testid="space-cal-prev"
+          onClick={() => setMonth(m => shiftMonth(m, -1))}
+          className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-hairline bg-canvas text-slate-500 transition-colors hover:bg-surface hover:text-slate-900"
+          aria-label="前の月"
+        >
+          <svg className="h-4 w-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M10 4l-4 4 4 4" /></svg>
+        </button>
+        <h2 data-testid="space-cal-title" className="text-sm font-bold text-slate-800">{monthLabel}</h2>
+        <button
+          type="button"
+          data-testid="space-cal-next"
+          onClick={() => setMonth(m => shiftMonth(m, 1))}
+          className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-hairline bg-canvas text-slate-500 transition-colors hover:bg-surface hover:text-slate-900"
+          aria-label="次の月"
+        >
+          <svg className="h-4 w-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M6 4l4 4-4 4" /></svg>
+        </button>
+      </div>
+
+      {/* 表示フィルター（タスク / 変更ファイル / 予定） */}
+      <div data-testid="space-cal-filters" className="flex flex-wrap items-center gap-1.5">
+        {FILTER_DEFS.map(f => {
+          const on = filters[f.key];
+          return (
+            <button
+              key={f.key}
+              type="button"
+              data-testid={`space-cal-filter-${f.key}`}
+              aria-pressed={on}
+              onClick={() => toggleFilter(f.key)}
+              className={`inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-2xs font-medium transition-colors ${
+                on
+                  ? 'border-[var(--brand-primary)] bg-[var(--brand-primary)]/10 text-slate-800 dark:text-slate-100'
+                  : 'border-hairline bg-canvas text-slate-400 line-through'
+              }`}
+            >
+              <span aria-hidden>{f.icon}</span>{f.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* weekday header */}
+      <div className="grid grid-cols-7 gap-1 text-center text-2xs font-semibold text-slate-400">
+        {WEEKDAYS.map((w, i) => (
+          <div key={w} className={i === 0 ? 'text-red-400' : i === 6 ? 'text-sky-400' : ''}>{w}</div>
+        ))}
+      </div>
+
+      {/* day cells + 複数日の横棒（週ごと） */}
+      <div data-testid="space-cal-grid" className="flex flex-col gap-1">
+        {weeks.map((week, wi) => {
+          const bars = filters.events ? layoutWeekBars(week, events) : [];
+          const laneCount = bars.reduce((m, b) => Math.max(m, b.lane + 1), 0);
+          return (
+            <div key={wi} className="grid grid-cols-7 gap-1">
+              {week.map(d => {
+                const inMonth = d.slice(0, 7) === month;
+                const c = counts[d];
+                const isToday = d === today;
+                const isSelected = d === selectedDate;
+                return (
+                  <button
+                    key={d}
+                    type="button"
+                    data-testid={`space-cal-day-${d}`}
+                    onClick={() => setSelectedDate(d)}
+                    className={`flex min-h-[2.5rem] flex-col items-stretch gap-0.5 rounded-md border p-1 text-left transition-colors ${
+                      isSelected
+                        ? 'border-[var(--brand-primary)] bg-surface'
+                        : 'border-hairline hover:bg-surface'
+                    } ${inMonth ? '' : 'opacity-40'}`}
+                  >
+                    <span
+                      className={`text-[11px] font-semibold ${
+                        isToday
+                          ? 'inline-flex h-5 w-5 items-center justify-center self-start rounded-full bg-[var(--brand-primary)] text-white'
+                          : 'text-slate-600'
+                      }`}
+                    >
+                      {Number(d.slice(8, 10))}
+                    </span>
+                    {filters.tasks && c?.taskCount ? (
+                      <span className="self-start rounded bg-sky-100 px-1 text-[9px] font-bold text-sky-700 dark:bg-sky-500/20 dark:text-sky-300" title={`タスク ${c.taskCount} 件`}>
+                        💬{c.taskCount}
+                      </span>
+                    ) : null}
+                  </button>
+                );
+              })}
+              {bars.length > 0 && (
+                <div
+                  className="col-span-7 grid grid-cols-7 gap-x-1 gap-y-0.5 pb-0.5"
+                  style={{ gridTemplateRows: `repeat(${laneCount}, 1.05rem)` }}
+                >
+                  {bars.map(b => (
+                    <button
+                      key={b.ev.id}
+                      type="button"
+                      data-testid={`space-cal-bar-${b.ev.id}`}
+                      title={`${b.ev.title}（${fmtRange(b.ev)}）`}
+                      onClick={() => setSelectedDate(week[b.colStart - 1]!)}
+                      style={{ gridColumn: `${b.colStart} / span ${b.colSpan}`, gridRow: b.lane + 1 }}
+                      className={`flex items-center overflow-hidden whitespace-nowrap bg-amber-100 px-1 text-[9px] font-semibold leading-none text-amber-800 transition-colors hover:bg-amber-200 dark:bg-amber-500/25 dark:text-amber-200 ${
+                        b.continuesLeft ? 'rounded-l-none' : 'rounded-l'
+                      } ${b.continuesRight ? 'rounded-r-none' : 'rounded-r'}`}
+                    >
+                      <span className="truncate">
+                        {b.continuesLeft ? '◀ ' : b.ev.time ? `${b.ev.time} ` : ''}{b.ev.title}{b.continuesRight ? ' ▶' : ''}
+                      </span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      {monthQuery.isError && <p className="text-xs text-red-600">カレンダーの取得に失敗しました。</p>}
+    </div>
+  );
+
+  const panel = selectedDate ? (
+    <DayPanel
+      spaceId={spaceId}
+      date={selectedDate}
+      tzOffset={tzOffset}
+      month={month}
+      canEdit={canEdit}
+      filters={filters}
+      onOpenChat={onOpenChat}
+      onClose={() => setSelectedDate(null)}
+    />
+  ) : (
+    <div className="flex h-full items-center justify-center p-6 text-center text-sm text-slate-500">
+      日付を選ぶと、その日のタスク・変更ファイル・予定が表示されます。
+    </div>
+  );
+
+  // モバイル: 上に月グリッド（左右スワイプで月送り）、下に日詳細の上下 2 分割。
+  if (isMobile) {
+    return (
+      <div data-testid="space-calendar" className="flex h-full flex-col overflow-hidden">
+        <div className="min-h-0 flex-1 overflow-hidden">
+          <SwipeableTabs
+            tabs={[shiftMonth(month, -1), month, shiftMonth(month, 1)]}
+            activeTab={month}
+            onTabChange={(m) => setMonth(m)}
+            renderTab={(m) => (m === month ? <div className="p-3 overflow-y-auto h-full">{grid}</div> : <div className="h-full" />)}
+          />
+        </div>
+        <div data-testid="space-cal-mobile-detail" className="h-[45%] min-h-0 shrink-0 overflow-hidden border-t border-hairline">
+          {panel}
+        </div>
+      </div>
+    );
+  }
+
+  // デスクトップ: 左に月グリッド、右に日詳細（split）。
+  return (
+    <div data-testid="space-calendar" className="flex h-full min-h-0 gap-3 overflow-hidden">
+      <div className="w-full md:w-[440px] md:shrink-0 overflow-y-auto p-3">{grid}</div>
+      <div className="hidden md:block flex-1 min-w-0 overflow-y-auto border-l border-hairline">{panel}</div>
+    </div>
+  );
+}
+
+interface DayPanelPreview {
+  name: string;
+  content: string;
+  imageSrc: string;
+  markdownImageBaseUrl?: string;
+  trustedHtmlUrl?: string;
+}
+
+function DayPanel({
+  spaceId,
+  date,
+  tzOffset,
+  month,
+  canEdit,
+  filters,
+  onOpenChat,
+  onClose,
+}: {
+  spaceId: string;
+  date: string;
+  tzOffset: number;
+  month: string;
+  canEdit: boolean;
+  filters: CalFilters;
+  onOpenChat: (taskId: number) => void;
+  onClose: () => void;
+}) {
+  const qc = useQueryClient();
+  const dayQuery = useQuery({
+    queryKey: ['spaceCalendarDay', spaceId, date, tzOffset],
+    queryFn: () => fetchSpaceCalendarDay(spaceId, date, tzOffset),
+  });
+  const [preview, setPreview] = useState<DayPanelPreview | null>(null);
+  const [editing, setEditing] = useState<CalendarEvent | null>(null);
+  const [showAdd, setShowAdd] = useState(false);
+
+  const invalidate = useCallback(() => {
+    qc.invalidateQueries({ queryKey: ['spaceCalendarDay', spaceId, date, tzOffset] });
+    qc.invalidateQueries({ queryKey: ['spaceCalendarMonth', spaceId, month, tzOffset] });
+  }, [qc, spaceId, date, tzOffset, month]);
+
+  const handlePreview = useCallback(async (filePath: string, name: string) => {
+    try {
+      if (isImagePreviewable(name) || isPdfPreviewable(name) || isHtmlPreviewable(name)) {
+        const imageSrc = getSpaceFileRawUrl(spaceId, filePath);
+        const trustedHtmlUrl = isHtmlPreviewable(name) ? getSpaceTrustedHtmlUrl(spaceId, filePath) : undefined;
+        setPreview({ name, content: '', imageSrc, trustedHtmlUrl });
+        return;
+      }
+      const content = await fetchSpaceFileContent(spaceId, filePath);
+      let markdownImageBaseUrl: string | undefined;
+      if (/\.(md|markdown)$/i.test(name)) {
+        const dir = filePath.includes('/') ? filePath.substring(0, filePath.lastIndexOf('/') + 1) : '';
+        markdownImageBaseUrl = `/api/local/spaces/${spaceId}/files/raw?path=${dir}`;
+      }
+      setPreview({ name, content, imageSrc: '', markdownImageBaseUrl });
+    } catch {
+      /* preview failure is non-fatal; leave the list intact. */
+    }
+  }, [spaceId]);
+
+  const day = dayQuery.data;
+
+  return (
+    <div data-testid="space-cal-day-panel" className="flex h-full flex-col">
+      <div className="flex items-center justify-between gap-2 border-b border-hairline px-3 py-2">
+        <h3 className="text-sm font-bold text-slate-800">{date}</h3>
+        <button
+          type="button"
+          data-testid="space-cal-day-close"
+          onClick={onClose}
+          className="inline-flex h-7 w-7 items-center justify-center rounded-md text-slate-400 hover:bg-surface hover:text-slate-700"
+          aria-label="閉じる"
+        >
+          <svg className="h-4 w-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"><path d="M4 4l8 8M12 4l-8 8" /></svg>
+        </button>
+      </div>
+
+      <div className="flex-1 min-h-0 overflow-y-auto p-3 space-y-4">
+        {/* タスク */}
+        {filters.tasks && (
+        <section>
+          <h4 className="mb-1.5 text-2xs font-bold uppercase tracking-wider text-slate-500">タスク</h4>
+          {day && day.tasks.length > 0 ? (
+            <ul className="space-y-1">
+              {day.tasks.map(t => (
+                <li key={t.id}>
+                  <button
+                    type="button"
+                    data-testid={`space-cal-task-${t.id}`}
+                    onClick={() => onOpenChat(t.id)}
+                    className="flex w-full items-center gap-2 rounded-md border border-hairline bg-canvas px-2 py-1.5 text-left transition-colors hover:bg-surface"
+                  >
+                    <span className="min-w-0 flex-1 truncate text-xs text-slate-700">{t.title || `タスク #${t.id}`}</span>
+                    <span className="shrink-0 rounded bg-surface px-1.5 py-0.5 text-[10px] font-medium text-slate-500">{t.status ?? t.state}</span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="text-xs text-slate-400">この日のタスクはありません。</p>
+          )}
+        </section>
+        )}
+
+        {/* 変更ファイル */}
+        {filters.files && (
+        <section>
+          <h4 className="mb-1.5 text-2xs font-bold uppercase tracking-wider text-slate-500">変更ファイル</h4>
+          {day && day.files.length > 0 ? (
+            <ul className="space-y-1">
+              {day.files.map(f => (
+                <li key={f.path}>
+                  <button
+                    type="button"
+                    data-testid="space-cal-file"
+                    data-name={f.name}
+                    onClick={() => void handlePreview(f.path, f.name)}
+                    className="flex w-full items-center gap-2 rounded-md border border-hairline bg-canvas px-2 py-1.5 text-left transition-colors hover:bg-surface"
+                    title={f.path}
+                  >
+                    <FileTypeIcon name={f.name} className="h-4 w-4 shrink-0 text-slate-400" />
+                    <span className="min-w-0 flex-1 truncate text-xs text-slate-700">{f.name}</span>
+                    <span className="shrink-0 text-[10px] text-slate-400">{fmtSize(f.size)}</span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="text-xs text-slate-400">この日に変更されたファイルはありません。</p>
+          )}
+        </section>
+        )}
+
+        {/* 予定 */}
+        {filters.events && (
+        <section>
+          <div className="mb-1.5 flex items-center justify-between">
+            <h4 className="text-2xs font-bold uppercase tracking-wider text-slate-500">予定</h4>
+            {canEdit && !showAdd && !editing && (
+              <button
+                type="button"
+                data-testid="space-cal-add-event-btn"
+                onClick={() => setShowAdd(true)}
+                className="rounded-md border border-hairline bg-canvas px-2 py-0.5 text-2xs font-medium text-slate-600 transition-colors hover:bg-surface hover:text-slate-900"
+              >
+                ＋ 予定を追加
+              </button>
+            )}
+          </div>
+
+          {(showAdd || editing) && (
+            <EventForm
+              spaceId={spaceId}
+              defaultDate={date}
+              event={editing}
+              onCancel={() => { setShowAdd(false); setEditing(null); }}
+              onSaved={() => { setShowAdd(false); setEditing(null); invalidate(); }}
+            />
+          )}
+
+          {day && day.events.length > 0 ? (
+            <ul className="mt-1 space-y-1">
+              {day.events.map(ev => (
+                <li
+                  key={ev.id}
+                  data-testid={`space-cal-event-${ev.id}`}
+                  className="flex items-start gap-2 rounded-md border border-hairline bg-canvas px-2 py-1.5"
+                >
+                  <span className="shrink-0 rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-bold text-amber-700 dark:bg-amber-500/20 dark:text-amber-300">
+                    {ev.time ?? '終日'}
+                  </span>
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate text-xs font-semibold text-slate-700">{ev.title}</div>
+                    {ev.endDate && ev.endDate > ev.date && (
+                      <div className="text-[10px] font-medium text-amber-700 dark:text-amber-300">🗓 {fmtRange(ev)}</div>
+                    )}
+                    {ev.description && <div className="truncate text-[11px] text-slate-500">{ev.description}</div>}
+                    {ev.createdBy === 'agent' && <div className="text-[10px] text-slate-400">🤖 エージェント</div>}
+                  </div>
+                  {canEdit && (
+                    <div className="flex shrink-0 items-center gap-1">
+                      <button
+                        type="button"
+                        data-testid={`space-cal-event-edit-${ev.id}`}
+                        onClick={() => { setShowAdd(false); setEditing(ev); }}
+                        className="inline-flex h-6 w-6 items-center justify-center rounded text-slate-400 hover:bg-surface hover:text-slate-700"
+                        aria-label="編集"
+                      >
+                        <svg className="h-3.5 w-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M11 2l3 3-8 8H3v-3z" /></svg>
+                      </button>
+                      <button
+                        type="button"
+                        data-testid={`space-cal-event-delete-${ev.id}`}
+                        onClick={async () => {
+                          if (!window.confirm('この予定を削除しますか？')) return;
+                          await deleteCalendarEvent(spaceId, ev.id);
+                          invalidate();
+                        }}
+                        className="inline-flex h-6 w-6 items-center justify-center rounded text-slate-400 hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-500/15 dark:hover:text-red-300"
+                        aria-label="削除"
+                      >
+                        <svg className="h-3.5 w-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 4h10M6.5 4V2.5h3V4M5 4l.5 9h5l.5-9" /></svg>
+                      </button>
+                    </div>
+                  )}
+                </li>
+              ))}
+            </ul>
+          ) : (
+            !showAdd && <p className="text-xs text-slate-400">予定はありません。</p>
+          )}
+        </section>
+        )}
+      </div>
+
+      {preview && (
+        <FilePreview
+          name={preview.name}
+          content={preview.content}
+          imageSrc={preview.imageSrc}
+          markdownImageBaseUrl={preview.markdownImageBaseUrl}
+          trustedHtmlUrl={preview.trustedHtmlUrl}
+          onClose={() => setPreview(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+function EventForm({
+  spaceId,
+  defaultDate,
+  event,
+  onCancel,
+  onSaved,
+}: {
+  spaceId: string;
+  defaultDate: string;
+  event: CalendarEvent | null;
+  onCancel: () => void;
+  onSaved: () => void;
+}) {
+  const [title, setTitle] = useState(event?.title ?? '');
+  const [date, setDate] = useState(event?.date ?? defaultDate);
+  const [endDate, setEndDate] = useState(event?.endDate ?? '');
+  const [time, setTime] = useState(event?.time ?? '');
+  const [description, setDescription] = useState(event?.description ?? '');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+
+  const submit = useCallback(async () => {
+    if (!title.trim()) { setError('タイトルを入力してください。'); return; }
+    if (endDate && endDate < date) { setError('終了日は開始日以降にしてください。'); return; }
+    setSaving(true);
+    setError('');
+    try {
+      const payload = {
+        date,
+        // 終了日が開始日より後のときだけ複数日。それ以外は単日(null)に正規化。
+        endDate: endDate && endDate > date ? endDate : null,
+        time: time ? time : null,
+        title: title.trim(),
+        description: description ? description : null,
+      };
+      if (event) await updateCalendarEvent(spaceId, event.id, payload);
+      else await createCalendarEvent(spaceId, payload);
+      onSaved();
+    } catch (e) {
+      setError((e as Error)?.message ?? '保存に失敗しました。');
+    } finally {
+      setSaving(false);
+    }
+  }, [title, date, endDate, time, description, event, spaceId, onSaved]);
+
+  return (
+    <div data-testid="space-cal-add-event" className="mb-2 space-y-2 rounded-md border border-hairline bg-surface p-2.5">
+      <input
+        type="text"
+        data-testid="space-cal-event-title"
+        value={title}
+        onChange={e => setTitle(e.target.value)}
+        placeholder="予定のタイトル"
+        className="w-full rounded-md border border-hairline bg-canvas px-2 py-1.5 text-xs text-slate-700 focus:outline-none focus:ring-2 focus:ring-accent-ring"
+      />
+      <div className="flex items-center gap-2">
+        <label className="w-10 shrink-0 text-2xs font-medium text-slate-500">開始</label>
+        <input
+          type="date"
+          data-testid="space-cal-event-date"
+          value={date}
+          onChange={e => setDate(e.target.value)}
+          className="flex-1 rounded-md border border-hairline bg-canvas px-2 py-1.5 text-xs text-slate-700 focus:outline-none focus:ring-2 focus:ring-accent-ring"
+        />
+        <input
+          type="time"
+          data-testid="space-cal-event-time"
+          value={time}
+          onChange={e => setTime(e.target.value)}
+          className="w-28 rounded-md border border-hairline bg-canvas px-2 py-1.5 text-xs text-slate-700 focus:outline-none focus:ring-2 focus:ring-accent-ring"
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        <label className="w-10 shrink-0 text-2xs font-medium text-slate-500">終了</label>
+        <input
+          type="date"
+          data-testid="space-cal-event-end-date"
+          value={endDate}
+          min={date}
+          onChange={e => setEndDate(e.target.value)}
+          className="flex-1 rounded-md border border-hairline bg-canvas px-2 py-1.5 text-xs text-slate-700 focus:outline-none focus:ring-2 focus:ring-accent-ring"
+        />
+        {endDate && (
+          <button
+            type="button"
+            onClick={() => setEndDate('')}
+            className="shrink-0 rounded-md border border-hairline bg-canvas px-2 py-1.5 text-2xs text-slate-500 hover:bg-surface"
+          >
+            単日に戻す
+          </button>
+        )}
+      </div>
+      <textarea
+        data-testid="space-cal-event-description"
+        value={description}
+        onChange={e => setDescription(e.target.value)}
+        placeholder="メモ（任意）"
+        rows={2}
+        className="w-full resize-none rounded-md border border-hairline bg-canvas px-2 py-1.5 text-xs text-slate-700 focus:outline-none focus:ring-2 focus:ring-accent-ring"
+      />
+      {error && <p className="text-2xs text-red-600">{error}</p>}
+      <div className="flex justify-end gap-1.5">
+        <button
+          type="button"
+          onClick={onCancel}
+          disabled={saving}
+          className="rounded-md border border-hairline bg-canvas px-2.5 py-1 text-2xs font-medium text-slate-600 transition-colors hover:bg-surface disabled:opacity-50"
+        >
+          キャンセル
+        </button>
+        <button
+          type="button"
+          data-testid="space-cal-event-save"
+          onClick={() => void submit()}
+          disabled={saving}
+          className="rounded-md bg-accent px-2.5 py-1 text-2xs font-bold text-accent-fg transition-colors hover:opacity-90 disabled:opacity-50"
+        >
+          {event ? '更新' : '追加'}
+        </button>
+      </div>
+    </div>
+  );
+}