@hiroleague/taskmanager 0.0.3 → 0.0.4

package/src/client/components/board/shortcuts/useBoardShortcutKeydown.ts

@@ -1,49 +1,49 @@
-import { useEffect, useRef } from "react";
-import type { Board } from "../../../../shared/models";
-import { boardShortcutRegistry } from "./boardShortcutRegistry";
-import type { BoardShortcutActions } from "./boardShortcutTypes";
-import { isEditableKeyboardTarget } from "./isEditableKeyboardTarget";
-import { useShortcutScope } from "./ShortcutScopeContext";
-
-interface UseBoardShortcutKeydownOptions {
-  board: Board | null;
-  actions: BoardShortcutActions;
-}
-
-/**
- * Registers the board shortcut dispatcher with {@link ShortcutScopeProvider}.
- * The global listener only invokes it when the scope stack is empty (board is active).
- */
-export function useBoardShortcutKeydown({
-  board,
-  actions,
-}: UseBoardShortcutKeydownOptions): void {
-  const { registerBoardKeyHandler } = useShortcutScope();
-  const actionsRef = useRef(actions);
-  actionsRef.current = actions;
-
-  useEffect(() => {
-    if (!board) {
-      return registerBoardKeyHandler(() => {});
-    }
-
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (!board) return;
-      if (isEditableKeyboardTarget(e.target)) return;
-      if (e.ctrlKey || e.metaKey || e.altKey) return;
-      // Shift+Tab keeps native reverse tab order; unmodified Tab establishes board highlight.
-      if (e.key === "Tab" && e.shiftKey) return;
-
-      for (const def of boardShortcutRegistry) {
-        if (def.helpOnly) continue;
-        if (!def.matchKey(e.key)) continue;
-        if (def.enabled && !def.enabled(board)) continue;
-        if (def.preventDefault) e.preventDefault();
-        def.run(board, actionsRef.current);
-        return;
-      }
-    };
-
-    return registerBoardKeyHandler(onKeyDown);
-  }, [board, registerBoardKeyHandler]);
-}
+import { useEffect, useRef } from "react";
+import type { Board } from "../../../../shared/models";
+import { boardShortcutRegistry } from "./boardShortcutRegistry";
+import type { BoardShortcutActions } from "./boardShortcutTypes";
+import { isEditableKeyboardTarget } from "./isEditableKeyboardTarget";
+import { useShortcutScope } from "./ShortcutScopeContext";
+
+interface UseBoardShortcutKeydownOptions {
+  board: Board | null;
+  actions: BoardShortcutActions;
+}
+
+/**
+ * Registers the board shortcut dispatcher with {@link ShortcutScopeProvider}.
+ * The global listener only invokes it when the scope stack is empty (board is active).
+ */
+export function useBoardShortcutKeydown({
+  board,
+  actions,
+}: UseBoardShortcutKeydownOptions): void {
+  const { registerBoardKeyHandler } = useShortcutScope();
+  const actionsRef = useRef(actions);
+  actionsRef.current = actions;
+
+  useEffect(() => {
+    if (!board) {
+      return registerBoardKeyHandler(() => {});
+    }
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (!board) return;
+      if (isEditableKeyboardTarget(e.target)) return;
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
+      // Shift+Tab keeps native reverse tab order; unmodified Tab establishes board highlight.
+      if (e.key === "Tab" && e.shiftKey) return;
+
+      for (const def of boardShortcutRegistry) {
+        if (def.helpOnly) continue;
+        if (!def.matchKey(e.key)) continue;
+        if (def.enabled && !def.enabled(board)) continue;
+        if (def.preventDefault) e.preventDefault();
+        def.run(board, actionsRef.current);
+        return;
+      }
+    };
+
+    return registerBoardKeyHandler(onKeyDown);
+  }, [board, registerBoardKeyHandler]);
+}

package/src/client/components/board/useBoardCanvasPanScroll.ts

@@ -1,108 +1,108 @@
-import { useCallback, useRef, useState } from "react";
-
-const ACTIVATION_PX = 6;
-
-/** Selectors for elements that must not start horizontal board pan (columns, chrome, controls). */
-const NO_PAN =
-  "[data-board-no-pan],button,a[href],input,textarea,select,option,label,[role='button'],[contenteditable='true']";
-
-function targetStartsPan(target: EventTarget | null): boolean {
-  if (!(target instanceof Element)) return false;
-  return target.closest(NO_PAN) == null;
-}
-
-type PanMode = "undecided" | "horizontal" | "none";
-
-export function useBoardCanvasPanScroll() {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const panRef = useRef<{
-    pointerId: number;
-    startX: number;
-    startY: number;
-    startScrollLeft: number;
-    mode: PanMode;
-  } | null>(null);
-
-  const [panning, setPanning] = useState(false);
-
-  const onPointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-    if (e.button !== 0) return;
-    if (!targetStartsPan(e.target)) return;
-    const scroller = scrollRef.current;
-    if (!scroller) return;
-
-    panRef.current = {
-      pointerId: e.pointerId,
-      startX: e.clientX,
-      startY: e.clientY,
-      startScrollLeft: scroller.scrollLeft,
-      mode: "undecided",
-    };
-  }, []);
-
-  const onPointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-    const pan = panRef.current;
-    const scroller = scrollRef.current;
-    if (!pan || !scroller || e.pointerId !== pan.pointerId) return;
-
-    if (pan.mode === "none") return;
-
-    if (pan.mode === "undecided") {
-      const dx = e.clientX - pan.startX;
-      const dy = e.clientY - pan.startY;
-      if (
-        Math.abs(dx) < ACTIVATION_PX &&
-        Math.abs(dy) < ACTIVATION_PX
-      ) {
-        return;
-      }
-      if (Math.abs(dx) >= Math.abs(dy)) {
-        pan.mode = "horizontal";
-        try {
-          scroller.setPointerCapture(e.pointerId);
-        } catch {
-          /* already captured or unsupported */
-        }
-        e.preventDefault();
-        setPanning(true);
-      } else {
-        pan.mode = "none";
-        panRef.current = null;
-        return;
-      }
-    }
-
-    if (pan.mode === "horizontal") {
-      const dx = e.clientX - pan.startX;
-      scroller.scrollLeft = pan.startScrollLeft - dx;
-      e.preventDefault();
-    }
-  }, []);
-
-  const endPan = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-    const pan = panRef.current;
-    const scroller = scrollRef.current;
-    if (!pan || e.pointerId !== pan.pointerId) return;
-
-    if (pan.mode === "horizontal" && scroller) {
-      try {
-        scroller.releasePointerCapture(e.pointerId);
-      } catch {
-        /* not captured */
-      }
-      setPanning(false);
-    }
-    panRef.current = null;
-  }, []);
-
-  return {
-    scrollRef,
-    panning,
-    boardCanvasPanHandlers: {
-      onPointerDown,
-      onPointerMove,
-      onPointerUp: endPan,
-      onPointerCancel: endPan,
-    },
-  };
-}
+import { useCallback, useRef, useState } from "react";
+
+const ACTIVATION_PX = 6;
+
+/** Selectors for elements that must not start horizontal board pan (columns, chrome, controls). */
+const NO_PAN =
+  "[data-board-no-pan],button,a[href],input,textarea,select,option,label,[role='button'],[contenteditable='true']";
+
+function targetStartsPan(target: EventTarget | null): boolean {
+  if (!(target instanceof Element)) return false;
+  return target.closest(NO_PAN) == null;
+}
+
+type PanMode = "undecided" | "horizontal" | "none";
+
+export function useBoardCanvasPanScroll() {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const panRef = useRef<{
+    pointerId: number;
+    startX: number;
+    startY: number;
+    startScrollLeft: number;
+    mode: PanMode;
+  } | null>(null);
+
+  const [panning, setPanning] = useState(false);
+
+  const onPointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (e.button !== 0) return;
+    if (!targetStartsPan(e.target)) return;
+    const scroller = scrollRef.current;
+    if (!scroller) return;
+
+    panRef.current = {
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startY: e.clientY,
+      startScrollLeft: scroller.scrollLeft,
+      mode: "undecided",
+    };
+  }, []);
+
+  const onPointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    const pan = panRef.current;
+    const scroller = scrollRef.current;
+    if (!pan || !scroller || e.pointerId !== pan.pointerId) return;
+
+    if (pan.mode === "none") return;
+
+    if (pan.mode === "undecided") {
+      const dx = e.clientX - pan.startX;
+      const dy = e.clientY - pan.startY;
+      if (
+        Math.abs(dx) < ACTIVATION_PX &&
+        Math.abs(dy) < ACTIVATION_PX
+      ) {
+        return;
+      }
+      if (Math.abs(dx) >= Math.abs(dy)) {
+        pan.mode = "horizontal";
+        try {
+          scroller.setPointerCapture(e.pointerId);
+        } catch {
+          /* already captured or unsupported */
+        }
+        e.preventDefault();
+        setPanning(true);
+      } else {
+        pan.mode = "none";
+        panRef.current = null;
+        return;
+      }
+    }
+
+    if (pan.mode === "horizontal") {
+      const dx = e.clientX - pan.startX;
+      scroller.scrollLeft = pan.startScrollLeft - dx;
+      e.preventDefault();
+    }
+  }, []);
+
+  const endPan = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    const pan = panRef.current;
+    const scroller = scrollRef.current;
+    if (!pan || e.pointerId !== pan.pointerId) return;
+
+    if (pan.mode === "horizontal" && scroller) {
+      try {
+        scroller.releasePointerCapture(e.pointerId);
+      } catch {
+        /* not captured */
+      }
+      setPanning(false);
+    }
+    panRef.current = null;
+  }, []);
+
+  return {
+    scrollRef,
+    panning,
+    boardCanvasPanHandlers: {
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: endPan,
+      onPointerCancel: endPan,
+    },
+  };
+}

package/src/client/components/board/useBoardTaskContainerDroppableReact.ts

@@ -1,33 +1,33 @@
-import { CollisionPriority } from "@dnd-kit/abstract";
-import { useDroppable } from "@dnd-kit/react";
-import {
-  BOARD_TASK_CONTAINER_DND_TYPE,
-  BOARD_TASK_DND_TYPE,
-  type BoardDndLayout,
-  boardTaskContainerData,
-} from "./dndReactModel";
-
-/**
- * Phase 1 React-first wrapper for task drop containers.
- * This encodes the board's container metadata once so stacked lists and lane
- * bands can share the same droppable configuration in later phases.
- */
-export function useBoardTaskContainerDroppableReact({
-  containerId,
-  layout,
-  listId,
-  status,
-}: {
-  containerId: string;
-  layout: BoardDndLayout;
-  listId: number;
-  status?: string;
-}) {
-  return useDroppable({
-    id: containerId,
-    type: BOARD_TASK_CONTAINER_DND_TYPE,
-    accept: BOARD_TASK_DND_TYPE,
-    collisionPriority: CollisionPriority.Low,
-    data: boardTaskContainerData(containerId, layout, listId, status),
-  });
-}
+import { CollisionPriority } from "@dnd-kit/abstract";
+import { useDroppable } from "@dnd-kit/react";
+import {
+  BOARD_TASK_CONTAINER_DND_TYPE,
+  BOARD_TASK_DND_TYPE,
+  type BoardDndLayout,
+  boardTaskContainerData,
+} from "./dndReactModel";
+
+/**
+ * Phase 1 React-first wrapper for task drop containers.
+ * This encodes the board's container metadata once so stacked lists and lane
+ * bands can share the same droppable configuration in later phases.
+ */
+export function useBoardTaskContainerDroppableReact({
+  containerId,
+  layout,
+  listId,
+  status,
+}: {
+  containerId: string;
+  layout: BoardDndLayout;
+  listId: number;
+  status?: string;
+}) {
+  return useDroppable({
+    id: containerId,
+    type: BOARD_TASK_CONTAINER_DND_TYPE,
+    accept: BOARD_TASK_DND_TYPE,
+    collisionPriority: CollisionPriority.Low,
+    data: boardTaskContainerData(containerId, layout, listId, status),
+  });
+}

package/src/client/components/board/useBoardTaskSortableReact.ts

@@ -1,26 +1,26 @@
-import { useSortable } from "@dnd-kit/react/sortable";
-import { BOARD_TASK_DND_TYPE, boardTaskDragData } from "./dndReactModel";
-
-/**
- * Phase 1 React-first wrapper for sortable task rows.
- * Group and index are explicit so grouped multi-list movement can follow the
- * official multiple-sortable-lists approach during later phases.
- */
-export function useBoardTaskSortableReact(
-  taskId: number,
-  sortableId: string,
-  containerId: string,
-  index: number,
-) {
-  return useSortable({
-    id: sortableId,
-    index,
-    group: containerId,
-    type: BOARD_TASK_DND_TYPE,
-    accept: BOARD_TASK_DND_TYPE,
-    // Mirror the working board-list route so task drags use the same
-    // React-first feedback clone behavior as columns.
-    feedback: "clone",
-    data: boardTaskDragData(taskId, containerId),
-  });
-}
+import { useSortable } from "@dnd-kit/react/sortable";
+import { BOARD_TASK_DND_TYPE, boardTaskDragData } from "./dndReactModel";
+
+/**
+ * Phase 1 React-first wrapper for sortable task rows.
+ * Group and index are explicit so grouped multi-list movement can follow the
+ * official multiple-sortable-lists approach during later phases.
+ */
+export function useBoardTaskSortableReact(
+  taskId: number,
+  sortableId: string,
+  containerId: string,
+  index: number,
+) {
+  return useSortable({
+    id: sortableId,
+    index,
+    group: containerId,
+    type: BOARD_TASK_DND_TYPE,
+    accept: BOARD_TASK_DND_TYPE,
+    // Mirror the working board-list route so task drags use the same
+    // React-first feedback clone behavior as columns.
+    feedback: "clone",
+    data: boardTaskDragData(taskId, containerId),
+  });
+}

package/src/client/components/layout/AppShell.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { useNotificationStream } from "@/api/useNotificationStream";
+import { useBoardChangeStream } from "@/api/useBoardChangeStream";
 import { cn } from "@/lib/utils";
 import { usePreferencesStore } from "@/store/preferences";
 import { AppHeader } from "./AppHeader";
@@ -12,7 +12,10 @@ interface AppShellProps {
 
 export function AppShell({ sidebar, children }: AppShellProps) {
   const sidebarCollapsed = usePreferencesStore((s) => s.sidebarCollapsed);
-  useNotificationStream();
+  // Single SSE connection for non-board pages (board-index + notifications).
+  // On board pages, BoardView opens its own board-scoped connection that
+  // supersedes this one — the effect re-runs with a boardId when navigating.
+  useBoardChangeStream(null, null);
 
   return (
     <div className="flex h-dvh min-h-0 flex-col bg-background">

package/src/client/components/layout/NotificationToasts.tsx

@@ -77,14 +77,51 @@ function ToastCard({ item, onDismiss }: { item: NotificationItem; onDismiss: ()
   );
 }
 
+function SystemToastCard({
+  message,
+  onDismiss,
+}: {
+  message: string;
+  onDismiss: () => void;
+}) {
+  useEffect(() => {
+    const timer = window.setTimeout(() => onDismiss(), 12_000);
+    return () => window.clearTimeout(timer);
+  }, [onDismiss]);
+
+  return (
+    <div className="pointer-events-auto rounded-xl border border-amber-500/40 bg-amber-950/90 p-3 text-sm text-amber-50 shadow-xl backdrop-blur">
+      <div className="flex items-start justify-between gap-3">
+        <p className="min-w-0 leading-5">{message}</p>
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="shrink-0 rounded-md px-2 py-0.5 text-xs font-medium text-amber-200 hover:bg-amber-500/20"
+        >
+          Dismiss
+        </button>
+      </div>
+    </div>
+  );
+}
+
 export function NotificationToasts() {
   const toasts = useNotificationUiStore((s) => s.toasts);
   const dismissToast = useNotificationUiStore((s) => s.dismissToast);
+  const systemToast = useNotificationUiStore((s) => s.systemToast);
+  const dismissSystemToast = useNotificationUiStore((s) => s.dismissSystemToast);
 
-  if (toasts.length === 0) return null;
+  if (toasts.length === 0 && !systemToast) return null;
 
   return (
     <div className="pointer-events-none fixed bottom-4 right-4 z-[140] flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2">
+      {systemToast ? (
+        <SystemToastCard
+          key={systemToast.id}
+          message={systemToast.message}
+          onDismiss={dismissSystemToast}
+        />
+      ) : null}
       {toasts.map((toast) => (
         <div key={toast.id} className="pointer-events-auto">
           <ToastCard item={toast.notification} onDismiss={() => dismissToast(toast.id)} />