@plannotator/ui 0.22.0

package/components/ImageThumbnail.tsx

@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+
+export type ImageSrcResolver = (path: string, base?: string) => string;
+
+/**
+ * Default image URL resolver — Plannotator's local server behavior, verbatim.
+ * Remote URLs pass through; local paths resolve through `/api/image`.
+ */
+const defaultImageSrcResolver: ImageSrcResolver = (path, base) => {
+  if (path.startsWith('http://') || path.startsWith('https://')) {
+    return path; // Remote URL, use directly
+  }
+  let url = `/api/image?path=${encodeURIComponent(path)}`;
+  if (base && !path.startsWith('/')) {
+    url += `&base=${encodeURIComponent(base)}`;
+  }
+  return url;
+};
+
+// Module-level resolver, stable identity. Defaults to Plannotator's behavior so
+// callers and consumers are unchanged. A host (e.g. Workspaces) calls
+// `setImageSrcResolver` once at startup to resolve images via its own backend.
+let imageSrcResolver: ImageSrcResolver = defaultImageSrcResolver;
+
+/** Override how image paths resolve to URLs. Call once at app startup. */
+export const setImageSrcResolver = (resolver: ImageSrcResolver): void => {
+  imageSrcResolver = resolver;
+};
+
+/** Reset to the default (Plannotator local) resolver. Mainly for tests. */
+export const resetImageSrcResolver = (): void => {
+  imageSrcResolver = defaultImageSrcResolver;
+};
+
+/**
+ * Get the display URL for an image path or URL.
+ * Delegates to the active resolver (default = Plannotator `/api/image`).
+ */
+export const getImageSrc = (path: string, base?: string): string =>
+  imageSrcResolver(path, base);
+
+interface ImageThumbnailProps {
+  path: string;
+  size?: 'sm' | 'md' | 'lg';
+  onClick?: () => void;
+  onRemove?: () => void;
+  showRemove?: boolean;
+  className?: string;
+}
+
+const SIZES = {
+  sm: 'w-6 h-6',
+  md: 'w-10 h-10',
+  lg: 'w-16 h-16',
+};
+
+export const ImageThumbnail: React.FC<ImageThumbnailProps> = ({
+  path,
+  size = 'md',
+  onClick,
+  onRemove,
+  showRemove = true,
+  className = '',
+}) => {
+  const [error, setError] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  const sizeClass = SIZES[size];
+
+  return (
+    <div className={`group relative ${sizeClass} ${className}`}>
+      {loading && !error && (
+        <div className={`absolute inset-0 bg-muted rounded animate-pulse`} />
+      )}
+
+      {error ? (
+        <div
+          className={`${sizeClass} rounded bg-muted flex items-center justify-center text-muted-foreground`}
+        >
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={1.5}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+            />
+          </svg>
+        </div>
+      ) : (
+        <img
+          src={getImageSrc(path)}
+          alt="Attachment"
+          loading="lazy"
+          onClick={onClick}
+          onLoad={() => setLoading(false)}
+          onError={() => {
+            setError(true);
+            setLoading(false);
+          }}
+          className={`${sizeClass} rounded object-cover border border-border ${onClick ? 'cursor-pointer hover:opacity-80' : ''}`}
+        />
+      )}
+
+      {/* Remove button */}
+      {showRemove && onRemove && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove();
+          }}
+          className="absolute -top-1 -right-1 w-4 h-4 bg-destructive text-destructive-foreground rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+        >
+          <svg className="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+};

package/components/ImportModal.tsx

@@ -0,0 +1,146 @@
+/**
+ * Import Modal for loading teammate annotations from a share URL
+ */
+
+import React, { useState, useRef } from 'react';
+import type { ImportResult } from '../hooks/useSharing';
+
+interface ImportModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onImport: (url: string) => Promise<ImportResult>;
+  shareBaseUrl?: string;
+}
+
+export const ImportModal: React.FC<ImportModalProps> = ({
+  isOpen,
+  onClose,
+  onImport,
+  shareBaseUrl,
+}) => {
+  const [url, setUrl] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<ImportResult | null>(null);
+  const autoCloseTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  if (!isOpen) return null;
+
+  const handleImport = async () => {
+    if (!url.trim()) return;
+    setLoading(true);
+    setResult(null);
+    const res = await onImport(url.trim());
+    setResult(res);
+    setLoading(false);
+    if (res.success && res.count > 0) {
+      // Auto-close after successful import
+      autoCloseTimer.current = setTimeout(() => {
+        autoCloseTimer.current = null;
+        setUrl('');
+        setResult(null);
+        onClose();
+      }, 1500);
+    }
+  };
+
+  const handleClose = () => {
+    if (autoCloseTimer.current) {
+      clearTimeout(autoCloseTimer.current);
+      autoCloseTimer.current = null;
+    }
+    setUrl('');
+    setResult(null);
+    onClose();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !loading) {
+      handleImport();
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm p-4">
+      <div
+        className="bg-card border border-border rounded-xl w-full max-w-lg flex flex-col shadow-2xl"
+        onClick={e => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="p-4 border-b border-border">
+          <div className="flex justify-between items-center">
+            <h3 className="font-semibold text-sm">Import Teammate Review</h3>
+            <button
+              onClick={handleClose}
+              className="p-1.5 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Body */}
+        <div className="p-4 space-y-4">
+          <div>
+            <label className="block text-xs font-medium text-muted-foreground mb-2">
+              Plannotator Share Link
+            </label>
+            <input
+              type="text"
+              value={url}
+              onChange={e => setUrl(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={`${shareBaseUrl || 'https://share.plannotator.ai'}/#...`}
+              className="w-full bg-muted rounded-lg px-3 py-2 text-xs font-mono focus:outline-none focus:ring-2 focus:ring-accent/50"
+              disabled={loading}
+              autoFocus
+            />
+          </div>
+
+          <p className="text-xs text-muted-foreground">
+            Paste a share link from a teammate to import their annotations into the current plan review.
+          </p>
+
+          {/* Result feedback */}
+          {result && (
+            <div className={`rounded-lg px-3 py-2 text-xs ${
+              result.success && result.count > 0
+                ? 'bg-green-500/10 text-green-600 dark:text-green-400'
+                : result.success && result.count === 0
+                ? 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400'
+                : 'bg-destructive/10 text-destructive'
+            }`}>
+              {result.success && result.count > 0 && (
+                <span>Imported {result.count} annotation{result.count !== 1 ? 's' : ''} from "{result.planTitle}"</span>
+              )}
+              {result.success && result.count === 0 && (
+                <span>{result.error || 'No new annotations to import (all already exist)'}</span>
+              )}
+              {!result.success && (
+                <span>{result.error || 'Failed to import'}</span>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-border flex justify-end gap-2">
+          <button
+            onClick={handleClose}
+            className="px-3 py-1.5 rounded-md text-xs font-medium bg-muted hover:bg-muted/80 transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleImport}
+            disabled={!url.trim() || loading}
+            className="px-3 py-1.5 rounded-md text-xs font-medium bg-primary text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? 'Importing...' : 'Import'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};