feat(timeline): add keyboard navigation with shortcut overlay

- Arrow left/right scrolls the timeline by 1 day (Shift: 1 week)
- Delete/Backspace deletes selected allocations
- ? toggles a keyboard shortcut overlay
- Floating ? button in bottom-right corner provides persistent access
- (Del) hint added to the FloatingActionBar delete button

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/src/components/timeline/TimelineView.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { MILLISECONDS_PER_DAY } from "@capakraken/shared";
 import { clsx } from "clsx";
 import { useSession } from "next-auth/react";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -35,6 +36,9 @@ import { TimelineProjectPanel, type OpenDemandAssignment } from "./TimelineProje
 import { ProjectColorLegend } from "./ProjectColorLegend.js";
 import { useMultiSelectIntersection } from "~/hooks/useMultiSelectIntersection.js";
 import type { TimelineVisualOverrides } from "./allocationVisualState.js";
+import { SuccessToast } from "~/components/ui/SuccessToast.js";
+import { useTimelineKeyboard } from "~/hooks/useTimelineKeyboard.js";
+import { KeyboardShortcutOverlay } from "./KeyboardShortcutOverlay.js";
 
 // ─── Entry point ────────────────────────────────────────────────────────────
 // Two-layer mount: the outer shell creates drag state + project context,
@@ -86,6 +90,8 @@ export function TimelineView() {
     onSuccess: invalidateTimeline,
   });
 
+  const [dragErrorToast, setDragErrorToast] = useState<string | null>(null);
+
   const {
     dragState,
     allocDragState,
@@ -156,6 +162,7 @@ export function TimelineView() {
         clearMultiSelect();
       }
     },
+    onMutationError: (message) => setDragErrorToast(message),
   });
 
   const [openPanelProjectId, setOpenPanelProjectId] = useState<string | null>(null);
@@ -164,6 +171,13 @@ export function TimelineView() {
   const { contextResourceIds, contextAllocations } = useProjectDragContext(contextProjectId, canManageTimeline);
 
   return (
+    <>
+    <SuccessToast
+      show={dragErrorToast !== null}
+      message={dragErrorToast ?? ""}
+      variant="warning"
+      onDone={() => setDragErrorToast(null)}
+    />
     <TimelineProvider
       isDragging={dragState.isDragging}
       contextAllocations={contextAllocations as TimelineAssignmentEntry[]}
@@ -209,6 +223,7 @@ export function TimelineView() {
         redo={redo}
       />
     </TimelineProvider>
+    </>
   );
 }
 
@@ -368,6 +383,20 @@ function TimelineViewContent({
 
   const { CELL_WIDTH, dates, totalCanvasWidth, toLeft, toWidth, gridLines, monthGroups, xToDate } =
     useTimelineLayout(viewStart, viewDays, filters.zoom, filters.showWeekends, today);
+
+  const { showShortcuts, setShowShortcuts } = useTimelineKeyboard({
+    scrollContainerRef,
+    cellWidth: CELL_WIDTH,
+    selectedAllocationIds: multiSelectState.selectedAllocationIds,
+    onDeleteSelected: () => {
+      if (multiSelectState.selectedAllocationIds.length === 0) return;
+      const msg = `Delete ${multiSelectState.selectedAllocationIds.length} allocation(s)? This cannot be undone.`;
+      if (window.confirm(msg)) {
+        batchDeleteMutation.mutate({ ids: multiSelectState.selectedAllocationIds });
+      }
+    },
+  });
+
   const hasActivePointerOverlay =
     dragState.isDragging || allocDragState.isActive || rangeState.isSelecting || multiSelectState.isMultiDragging;
 
@@ -896,7 +925,7 @@ function TimelineViewContent({
               rangeState.startDate <= end
                 ? [rangeState.startDate, end]
                 : [end, rangeState.startDate];
-            const days = Math.round((e.getTime() - s.getTime()) / 86400000) + 1;
+            const days = Math.round((e.getTime() - s.getTime()) / MILLISECONDS_PER_DAY) + 1;
             return `${days} day${days !== 1 ? "s" : ""}`;
           })()}
         </div>
@@ -1066,6 +1095,19 @@ function TimelineViewContent({
           onClose={() => setResourceHover(null)}
         />
       )}
+
+      {/* Keyboard shortcut overlay */}
+      {showShortcuts && <KeyboardShortcutOverlay onClose={() => setShowShortcuts(false)} />}
+
+      {/* Keyboard shortcut hint button */}
+      <button
+        type="button"
+        onClick={() => setShowShortcuts((prev) => !prev)}
+        title="Keyboard shortcuts (?)"
+        className="fixed bottom-6 right-6 z-40 rounded-full w-8 h-8 flex items-center justify-center bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-sm font-medium"
+      >
+        ?
+      </button>
     </div>
   );
 }