feat(calendar): replace list view with month/week/day grid + date detail dialog

カレンダー画面を一覧表示から実際のカレンダーグリッドへ変更。

- lib/calendar/grid.ts: 月グリッド/週/時間グリッド/取得範囲(rangeForView)の純粋な日付ヘルパー (+22 unit tests)
- components/calendar/: CalendarView(月/週/日 切替・prev/next/今日)・MonthView(truncateチップ)・WeekView・DayView(時間グリッド+終日)・EventDetailDialog(詳細・フォーカス管理)・sourceColors
- page.tsx: view/date searchParamsから範囲を計算しServer Componentで取得、CalendarViewへ渡す
- e2e: 表示切替・詳細ダイアログ・ナビステップ(週=7日/日=1日)を追加

components/calendar/DayView.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import type { CalendarEventView } from '@/services/ScheduleService';
+import {
+  eventsOnDay,
+  eventHour,
+  formatTime,
+  getDayHours,
+  toISODate,
+} from '@/lib/calendar/grid';
+import {
+  SOURCE_COLORS,
+  SOURCE_CHIP_BORDER,
+  WEEKDAY_LABELS,
+} from '@/components/calendar/sourceColors';
+
+/**
+ * 日表示(時間グリッド)。0:00〜23:00 を1時間刻みで表示し、
+ * 時刻付きイベントを該当時刻行に、終日(日付のみ)イベントを上部に配置する。
+ */
+export function DayView({
+  day,
+  events,
+  todayKey,
+  onSelectDate,
+}: {
+  day: Date;
+  events: CalendarEventView[];
+  todayKey: string;
+  onSelectDate: (dateKey: string) => void;
+}) {
+  const key = toISODate(day);
+  const dayEvents = eventsOnDay(events, key);
+  const allDay = dayEvents.filter((e) => eventHour(e.startAt) === null);
+  const timed = dayEvents.filter((e) => eventHour(e.startAt) !== null);
+  const hours = getDayHours();
+  const isToday = key === todayKey;
+
+  return (
+    <div className="rounded-lg border bg-white">
+      <div className="flex items-center justify-between border-b p-3">
+        <button
+          type="button"
+          onClick={() => onSelectDate(key)}
+          className="text-left"
+        >
+          <p className="text-lg font-bold text-gray-800">
+            {day.getMonth() + 1}月{day.getDate()}日(
+            {WEEKDAY_LABELS[day.getDay()]})
+          </p>
+        </button>
+        {isToday && (
+          <span className="rounded bg-blue-100 px-2 py-0.5 text-xs text-blue-700">
+            今日
+          </span>
+        )}
+      </div>
+
+      {allDay.length > 0 && (
+        <div
+          className="border-b bg-gray-50 p-2"
+          data-testid="calendar-all-day-section"
+        >
+          <p className="mb-1 text-xs font-medium text-gray-500">終日</p>
+          <div className="flex flex-wrap gap-1">
+            {allDay.map((e) => (
+              <button
+                key={e.key}
+                type="button"
+                onClick={() => onSelectDate(key)}
+                title={e.title}
+                className={`max-w-full truncate rounded border px-2 py-0.5 text-xs ${
+                  SOURCE_COLORS[e.source] ?? 'bg-gray-100 text-gray-600'
+                } ${SOURCE_CHIP_BORDER[e.source] ?? 'border-gray-200'}`}
+                data-testid={`calendar-event-${e.key}`}
+              >
+                {e.title}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="max-h-[600px] overflow-y-auto">
+        {hours.map((h) => {
+          const hourEvents = timed.filter((e) => eventHour(e.startAt) === h);
+          return (
+            <div
+              key={h}
+              className="flex border-b last:border-b-0"
+              data-testid={`calendar-hour-${String(h).padStart(2, '0')}`}
+            >
+              <div className="w-16 shrink-0 border-r bg-gray-50 p-1 text-right text-xs text-gray-400">
+                {String(h).padStart(2, '0')}:00
+              </div>
+              <div className="flex-1 p-1">
+                {hourEvents.map((e) => (
+                  <button
+                    key={e.key}
+                    type="button"
+                    onClick={() => onSelectDate(key)}
+                    title={e.title}
+                    className={`mb-1 block w-full truncate rounded border px-2 py-1 text-left text-xs ${
+                      SOURCE_COLORS[e.source] ?? 'bg-gray-100 text-gray-600'
+                    } ${SOURCE_CHIP_BORDER[e.source] ?? 'border-gray-200'}`}
+                    data-testid={`calendar-event-${e.key}`}
+                  >
+                    <span className="font-mono text-[10px] opacity-70">
+                      {formatTime(e.startAt)}
+                    </span>{' '}
+                    {e.title}
+                  </button>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}