ui-syncup 0.3.13 → 0.4.0-beta.2

package/src/features/annotations/components/annotation-context-menu.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import { useEffect } from 'react';
+import { Edit3, Trash2 } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+
+export interface AnnotationContextMenuProps {
+  /**
+   * Whether the menu is open
+   */
+  open: boolean;
+
+  /**
+   * Callback when open state changes
+   */
+  onOpenChange: (open: boolean) => void;
+
+  /**
+   * Position where the menu should appear (e.g., cursor position)
+   */
+  position: { x: number; y: number };
+
+  /**
+   * Callback when edit is selected
+   */
+  onEdit: () => void;
+
+  /**
+   * Callback when delete is selected
+   */
+  onDelete: () => void;
+
+  /**
+   * Optional: Disable edit action
+   */
+  disableEdit?: boolean;
+
+  /**
+   * Optional: Disable delete action
+   */
+  disableDelete?: boolean;
+}
+
+/**
+ * Context menu for annotation edit/delete actions.
+ *
+ * Designed for desktop right-click interactions. On mobile, use
+ * AnnotationActionSheet instead.
+ *
+ * Features:
+ * - Edit annotation description
+ * - Delete annotation
+ * - Keyboard shortcuts displayed
+ * - Click outside to close
+ * - ESC to close
+ *
+ * @example
+ * ```tsx
+ * const [menuOpen, setMenuOpen] = useState(false);
+ * const [menuPos, setMenuPos] = useState({ x: 0, y: 0 });
+ *
+ * const handleContextMenu = (e: React.MouseEvent) => {
+ *   e.preventDefault();
+ *   setMenuPos({ x: e.clientX, y: e.clientY });
+ *   setMenuOpen(true);
+ * };
+ *
+ * <AnnotationContextMenu
+ *   open={menuOpen}
+ *   onOpenChange={setMenuOpen}
+ *   position={menuPos}
+ *   onEdit={() => showEditDialog()}
+ *   onDelete={() => deleteAnnotation()}
+ * />
+ * ```
+ */
+export function AnnotationContextMenu({
+  open,
+  onOpenChange,
+  position,
+  onEdit,
+  onDelete,
+  disableEdit = false,
+  disableDelete = false,
+}: AnnotationContextMenuProps) {
+  // Close menu on ESC key
+  useEffect(() => {
+    if (!open) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onOpenChange(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [open, onOpenChange]);
+
+  const handleEdit = () => {
+    onEdit();
+    onOpenChange(false);
+  };
+
+  const handleDelete = () => {
+    onDelete();
+    onOpenChange(false);
+  };
+
+  return (
+    <DropdownMenu open={open} onOpenChange={onOpenChange}>
+      {/* Hidden trigger - menu is controlled via open prop */}
+      <div style={{ position: 'absolute', left: position.x, top: position.y, pointerEvents: 'none' }} />
+
+      <DropdownMenuContent
+        className="w-48"
+        side="bottom"
+        align="start"
+        // Position menu at cursor
+        style={{
+          position: 'fixed',
+          left: `${position.x}px`,
+          top: `${position.y}px`,
+        }}
+        onCloseAutoFocus={(e) => {
+          // Prevent focus from jumping when menu closes
+          e.preventDefault();
+        }}
+      >
+        <DropdownMenuItem
+          onClick={handleEdit}
+          disabled={disableEdit}
+          className="gap-2"
+        >
+          <Edit3 className="h-4 w-4" />
+          <span>Edit</span>
+          <span className="ml-auto text-xs text-muted-foreground">
+            Enter
+          </span>
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem
+          onClick={handleDelete}
+          disabled={disableDelete}
+          variant="destructive"
+          className="gap-2"
+        >
+          <Trash2 className="h-4 w-4" />
+          <span>Delete</span>
+          <span className="ml-auto text-xs text-muted-foreground">
+            ⌫
+          </span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/features/annotations/components/annotation-drawer.tsx

@@ -0,0 +1,231 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { AnnotationDraft, AnnotationPosition, AnnotationToolId } from '../types';
+import { cn } from '@/lib/utils';
+
+interface AnnotationDrawerProps {
+  activeTool: AnnotationToolId;
+  enabled: boolean;
+  overlayRef: React.RefObject<HTMLDivElement | null>;
+  onDraftCommit?: (draft: AnnotationDraft) => void;
+  onDraftChange?: (draft: AnnotationDraft | null) => void;
+}
+
+type DrawingState = {
+  tool: 'box';
+  start: AnnotationPosition;
+  current: AnnotationPosition;
+} | null;
+
+const clamp = (value: number) => Math.min(Math.max(value, 0), 1);
+
+const getRelativePosition = (
+  overlay: HTMLDivElement,
+  event: PointerEvent | MouseEvent,
+): AnnotationPosition => {
+  const rect = overlay.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) {
+    return { x: 0, y: 0 };
+  }
+  return {
+    x: clamp((event.clientX - rect.left) / rect.width),
+    y: clamp((event.clientY - rect.top) / rect.height),
+  };
+};
+
+export function AnnotationDrawer({
+  activeTool,
+  enabled,
+  overlayRef,
+  onDraftCommit,
+  onDraftChange,
+}: AnnotationDrawerProps) {
+  const [drawingState, setDrawingState] = useState<DrawingState>(null);
+  const [draftId, setDraftId] = useState<string | null>(null);
+  const draftIdRef = useRef<string | null>(null);
+  const pointerIdRef = useRef<number | null>(null);
+  const overlayRectRef = useRef<DOMRect | null>(null);
+
+  const resetDrawing = useCallback(() => {
+    setDrawingState(null);
+    setDraftId(null);
+    draftIdRef.current = null;
+    pointerIdRef.current = null;
+    onDraftChange?.(null);
+  }, [onDraftChange]);
+
+  const commitDraft = useCallback(
+    (shape: DrawingState) => {
+      if (!shape) return;
+      const id = draftIdRef.current ?? draftId ?? `draft_${Date.now()}`;
+      onDraftCommit?.({
+        id,
+        tool: shape.tool,
+        shape: { type: 'box', start: shape.start, end: shape.current },
+        createdAt: Date.now(),
+      });
+    },
+    [draftId, onDraftCommit],
+  );
+
+  const handlePointerDown = useCallback(
+    (event: PointerEvent) => {
+      if (!enabled || pointerIdRef.current !== null) return;
+      const overlay = overlayRef.current;
+      if (!overlay) return;
+      overlayRectRef.current = overlay.getBoundingClientRect();
+      const rect = overlayRectRef.current;
+      if (!rect) return;
+      const withinX = event.clientX >= rect.left && event.clientX <= rect.right;
+      const withinY = event.clientY >= rect.top && event.clientY <= rect.bottom;
+      if (!withinX || !withinY) return;
+      const pinTarget = (event.target as HTMLElement | null)?.closest('[data-annotation-pin]');
+      if (pinTarget) return;
+
+      if (event.pointerType !== 'touch' && 'button' in event && event.button !== 0) {
+        return;
+      }
+
+      const position = getRelativePosition(overlay, event);
+      pointerIdRef.current = event.pointerId;
+
+      if (activeTool === 'pin') {
+        const id = `draft_${Date.now()}`;
+        const draft: AnnotationDraft = {
+          id,
+          tool: 'pin',
+          shape: { type: 'pin', position },
+          createdAt: Date.now(),
+        };
+        onDraftCommit?.(draft);
+        pointerIdRef.current = null;
+        return;
+      }
+
+      // Only box tool requires drawing state (cursor and pin are handled above)
+      if (activeTool !== 'box') return;
+
+      const id = `draft_${Date.now()}`;
+      setDraftId(id);
+      draftIdRef.current = id;
+
+      const initialState: DrawingState = {
+        tool: 'box',
+        start: position,
+        current: position,
+      };
+      setDrawingState(initialState);
+      onDraftChange?.({
+        id,
+        tool: 'box',
+        shape: { type: 'box', start: position, end: position },
+        createdAt: Date.now(),
+      });
+    },
+    [activeTool, enabled, onDraftChange, onDraftCommit, overlayRef],
+  );
+
+  const handlePointerMove = useCallback(
+    (event: PointerEvent) => {
+      if (!enabled) return;
+      if (pointerIdRef.current === null || pointerIdRef.current !== event.pointerId) return;
+      const overlay = overlayRef.current;
+      if (!overlay) return;
+      const position = getRelativePosition(overlay, event);
+      const currentDraftId = draftIdRef.current ?? `draft_${Date.now()}`;
+      setDrawingState((prev) => {
+        if (!prev) return prev;
+        const updatedState = { ...prev, current: position };
+        onDraftChange?.({
+          id: currentDraftId,
+          tool: prev.tool,
+          shape: { type: 'box', start: prev.start, end: position },
+          createdAt: Date.now(),
+        });
+        return updatedState;
+      });
+    },
+    [draftId, enabled, onDraftChange, overlayRef],
+  );
+
+  const handlePointerUp = useCallback(
+    (event: PointerEvent) => {
+      if (pointerIdRef.current === null || pointerIdRef.current !== event.pointerId) return;
+      pointerIdRef.current = null;
+      if (drawingState) {
+        commitDraft(drawingState);
+      }
+      resetDrawing();
+    },
+    [commitDraft, drawingState, resetDrawing],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        resetDrawing();
+      }
+    },
+    [resetDrawing],
+  );
+
+  useEffect(() => {
+    if (!enabled) {
+      resetDrawing();
+      return;
+    }
+
+    const handlePointerCancel = () => {
+      resetDrawing();
+    };
+
+    window.addEventListener('pointerdown', handlePointerDown);
+    window.addEventListener('pointermove', handlePointerMove);
+    window.addEventListener('pointerup', handlePointerUp);
+    window.addEventListener('pointercancel', handlePointerCancel);
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('pointerdown', handlePointerDown);
+      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener('pointerup', handlePointerUp);
+      window.removeEventListener('pointercancel', handlePointerCancel);
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [enabled, handleKeyDown, handlePointerDown, handlePointerMove, handlePointerUp, resetDrawing]);
+
+  useEffect(() => {
+    if (!enabled) return;
+    resetDrawing();
+  }, [activeTool, enabled, resetDrawing]);
+
+  const draftPreview = useMemo(() => {
+    if (!drawingState || !overlayRef.current) return null;
+
+    const start = drawingState.start;
+    const current = drawingState.current;
+    const left = Math.min(start.x, current.x) * 100;
+    const top = Math.min(start.y, current.y) * 100;
+    const width = Math.abs(current.x - start.x) * 100;
+    const height = Math.abs(current.y - start.y) * 100;
+
+    return (
+      <div
+        className="absolute z-30 border-2 border-dashed border-primary/70 bg-primary/10 pointer-events-none"
+        style={{
+          left: `${left}%`,
+          top: `${top}%`,
+          width: `${width}%`,
+          height: `${height}%`,
+        }}
+      />
+    );
+  }, [drawingState, overlayRef]);
+
+  return (
+    <div className={cn('absolute inset-0 z-30', enabled ? 'pointer-events-none' : 'pointer-events-none')}>
+      {draftPreview}
+    </div>
+  );
+}

package/src/features/annotations/components/annotation-layer.tsx

@@ -0,0 +1,271 @@
+'use client';
+
+import { useRef, useCallback, useMemo, useState } from 'react';
+import type { RefObject } from 'react';
+import type { AttachmentAnnotation, AnnotationPosition, AnnotationShape, AnnotationThread, AnnotationAuthor } from '../types';
+import { AnnotationPin } from './annotation-pin';
+import { AnnotationBox, type BoxAnnotation } from './annotation-box';
+import { AnnotationPopover } from './annotation-popover';
+import { AnnotationThreadPanel } from './annotation-thread-panel';
+import { useAnnotationPopover } from '../hooks/use-annotation-popover';
+import { useIsMobile } from '@/hooks/use-mobile';
+
+export interface AnnotationLayerProps<A extends AttachmentAnnotation = AttachmentAnnotation> {
+  annotations: A[];
+  overlayRef: RefObject<HTMLDivElement | null>;
+  activeAnnotationId?: string | null;
+  interactive?: boolean;
+  handToolActive?: boolean;
+  savingAnnotationIds?: Set<string>; // IDs of annotations currently being saved
+  onSelect?: (annotationId: string) => void;
+  onMove?: (annotationId: string, position: AnnotationPosition) => void;
+  onBoxMove?: (annotationId: string, start: AnnotationPosition, end: AnnotationPosition) => void;
+  onMoveComplete?: (annotationId: string, position: AnnotationPosition) => void;
+  onBoxMoveComplete?: (annotationId: string, start: AnnotationPosition, end: AnnotationPosition) => void;
+  onDragStart?: (annotationId: string) => void;
+  onDragEnd?: (annotationId: string) => void;
+  onEdit?: (annotationId: string) => void;
+  onDelete?: (annotationId: string) => void;
+  /** Issue ID for popover comment API calls */
+  issueId?: string;
+  /** Attachment ID for popover comment API calls */
+  attachmentId?: string;
+  /** Whether to enable popover feature (disabled during edit mode) */
+  enablePopover?: boolean;
+}
+
+// Extended annotation type that includes shape data
+export interface ShapedAnnotation extends AttachmentAnnotation {
+  shape?: AnnotationShape;
+}
+
+// Helper to get anchor position for an annotation
+function getAnchorPosition(annotation: AttachmentAnnotation): { x: number; y: number } {
+  const shaped = annotation as ShapedAnnotation;
+  if (shaped.shape?.type === 'box') {
+    // Anchor to center-top of the box label badge area
+    return {
+      x: shaped.shape.start.x,
+      y: shaped.shape.start.y,
+    };
+  }
+  // Default: pin position
+  return { x: annotation.x, y: annotation.y };
+}
+
+export function AnnotationLayer<A extends AttachmentAnnotation>({
+  annotations,
+  overlayRef,
+  activeAnnotationId = null,
+  interactive = true,
+  handToolActive = false,
+  savingAnnotationIds,
+  onSelect,
+  onMove,
+  onBoxMove,
+  onMoveComplete,
+  onBoxMoveComplete,
+  onDragStart,
+  onDragEnd,
+  onEdit,
+  onDelete,
+  issueId,
+  attachmentId,
+  enablePopover = true,
+}: AnnotationLayerProps<A>) {
+  const isMobile = useIsMobile();
+  const isDraggingRef = useRef(false);
+  
+  // Mobile sheet state - track which annotation's thread panel is open
+  const [mobileSheetAnnotationId, setMobileSheetAnnotationId] = useState<string | null>(null);
+  
+  // Popover state management (desktop only)
+  const popover = useAnnotationPopover({
+    isDragging: isDraggingRef.current,
+    hoverDelay: 200,
+  });
+
+  // Handle drag start - close popover and set dragging flag
+  const handleDragStart = useCallback((annotationId: string) => {
+    isDraggingRef.current = true;
+    popover.close();
+    setMobileSheetAnnotationId(null);
+    onDragStart?.(annotationId);
+  }, [popover, onDragStart]);
+
+  // Handle drag end - reset dragging flag
+  const handleDragEnd = useCallback((annotationId: string) => {
+    isDraggingRef.current = false;
+    onDragEnd?.(annotationId);
+  }, [onDragEnd]);
+
+  // Handle annotation selection
+  const handleSelect = useCallback((annotationId: string) => {
+    onSelect?.(annotationId);
+    
+    // On mobile, open the thread panel sheet
+    if (isMobile && enablePopover && !!issueId && !!attachmentId && !isDraggingRef.current) {
+      setMobileSheetAnnotationId(annotationId);
+      return;
+    }
+    
+    // On desktop, trigger popover click handler
+    if (enablePopover && !isMobile && !handToolActive && !isDraggingRef.current) {
+      popover.handleClick(annotationId);
+    }
+  }, [onSelect, enablePopover, isMobile, handToolActive, popover, issueId, attachmentId]);
+
+  // Close mobile sheet
+  const handleCloseMobileSheet = useCallback(() => {
+    setMobileSheetAnnotationId(null);
+  }, []);
+
+  // Find currently open annotation (desktop popover)
+  const openAnnotation = useMemo(() => {
+    const currentState = popover.state;
+    if (!currentState?.annotationId) return null;
+    return annotations.find(a => a.id === currentState.annotationId) || null;
+  }, [annotations, popover.state]);
+
+  // Find annotation for mobile sheet
+  const mobileSheetAnnotation = useMemo(() => {
+    if (!mobileSheetAnnotationId) return null;
+    return annotations.find(a => a.id === mobileSheetAnnotationId) || null;
+  }, [annotations, mobileSheetAnnotationId]);
+
+  if (!annotations.length) {
+    return null;
+  }
+
+  // On mobile or when popover is disabled, don't use desktop popovers
+  const shouldEnableDesktopPopover = enablePopover && !isMobile && !!issueId && !!attachmentId;
+
+  return (
+    <div className="relative h-full w-full pointer-events-none">
+      <div className="absolute inset-0 pointer-events-auto">
+        {annotations.map((annotation) => {
+          const shapedAnnotation = annotation as ShapedAnnotation;
+          const isPopoverOpen = popover.isOpen(annotation.id);
+
+          // If annotation has shape metadata, render based on shape type
+          if (shapedAnnotation.shape) {
+            const { shape } = shapedAnnotation;
+
+            if (shape.type === 'box') {
+              const boxAnnotation: BoxAnnotation = {
+                id: annotation.id,
+                label: annotation.label,
+                start: shape.start,
+                end: shape.end,
+              };
+
+              return (
+                <AnnotationBox
+                  key={annotation.id}
+                  annotation={boxAnnotation}
+                  overlayRef={overlayRef}
+                  isActive={annotation.id === activeAnnotationId}
+                  interactive={interactive}
+                  handToolActive={handToolActive}
+                  isSaving={savingAnnotationIds?.has(annotation.id)}
+                  isPopoverOpen={isPopoverOpen}
+                  onSelect={handleSelect}
+                  onMove={onBoxMove}
+                  onMoveComplete={onBoxMoveComplete}
+                  onDragStart={handleDragStart}
+                  onDragEnd={handleDragEnd}
+                  onEdit={onEdit}
+                  onDelete={onDelete}
+                  onHoverStart={popover.handleHoverStart}
+                  onHoverEnd={popover.handleHoverEnd}
+                />
+              );
+            }
+
+            if (shape.type === 'pin') {
+              return (
+                <AnnotationPin
+                  key={annotation.id}
+                  annotation={annotation}
+                  overlayRef={overlayRef}
+                  isActive={annotation.id === activeAnnotationId}
+                  interactive={interactive}
+                  handToolActive={handToolActive}
+                  isSaving={savingAnnotationIds?.has(annotation.id)}
+                  isPopoverOpen={isPopoverOpen}
+                  onSelect={handleSelect}
+                  onMove={onMove}
+                  onMoveComplete={onMoveComplete}
+                  onDragStart={handleDragStart}
+                  onDragEnd={handleDragEnd}
+                  onEdit={onEdit}
+                  onDelete={onDelete}
+                  onHoverStart={popover.handleHoverStart}
+                  onHoverEnd={popover.handleHoverEnd}
+                />
+              );
+            }
+
+            // TODO: Add arrow rendering when needed
+            return null;
+          }
+
+          // Default: render as pin using x, y coordinates
+          return (
+            <AnnotationPin
+              key={annotation.id}
+              annotation={annotation}
+              overlayRef={overlayRef}
+              isActive={annotation.id === activeAnnotationId}
+              interactive={interactive}
+              handToolActive={handToolActive}
+              isSaving={savingAnnotationIds?.has(annotation.id)}
+              isPopoverOpen={isPopoverOpen}
+              onSelect={handleSelect}
+              onMove={onMove}
+              onMoveComplete={onMoveComplete}
+              onDragStart={handleDragStart}
+              onDragEnd={handleDragEnd}
+              onEdit={onEdit}
+              onDelete={onDelete}
+              onHoverStart={popover.handleHoverStart}
+              onHoverEnd={popover.handleHoverEnd}
+            />
+          );
+        })}
+      </div>
+      
+      {/* Desktop: Render popover separately, positioned absolutely */}
+      {shouldEnableDesktopPopover && openAnnotation && (
+        <AnnotationPopover
+          annotation={openAnnotation as unknown as AnnotationThread<AnnotationAuthor>}
+          issueId={issueId!}
+          attachmentId={attachmentId!}
+          mode={popover.state?.mode || 'preview'}
+          open={true}
+          anchorPosition={getAnchorPosition(openAnnotation)}
+          overlayRef={overlayRef}
+          onModeChange={(newMode) => {
+            if (newMode === 'expanded' && openAnnotation) {
+              popover.handleClick(openAnnotation.id);
+            }
+          }}
+          onClose={popover.close}
+          onMouseEnter={popover.handlePopoverMouseEnter}
+          onMouseLeave={popover.handlePopoverMouseLeave}
+        />
+      )}
+
+      {/* Mobile: Render thread panel sheet */}
+      {isMobile && mobileSheetAnnotation && issueId && attachmentId && (
+        <AnnotationThreadPanel
+          annotation={mobileSheetAnnotation}
+          issueId={issueId}
+          attachmentId={attachmentId}
+          open={true}
+          onClose={handleCloseMobileSheet}
+        />
+      )}
+    </div>
+  );
+}