@actuate-media/cms-admin 0.1.4 → 0.2.0

package/src/components/MediaPickerModal.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import { useState, useRef } from 'react';
+import { X, Upload, Search, ImageIcon, Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { cmsApi } from '../lib/api.js';
+import { useApiData } from '../lib/useApiData.js';
+
+interface MediaItem {
+  id: string;
+  filename: string;
+  storageKey: string;
+  mimeType: string;
+  fileSize: number;
+  width?: number;
+  height?: number;
+}
+
+export interface MediaPickerModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSelect: (url: string, alt?: string) => void;
+  accept?: string;
+}
+
+export function MediaPickerModal({ open, onClose, onSelect, accept }: MediaPickerModalProps) {
+  const [tab, setTab] = useState<'library' | 'upload'>('library');
+  const [search, setSearch] = useState('');
+  const [uploading, setUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const { data, loading, refetch } = useApiData<{ data: { items: MediaItem[] } }>(
+    open ? `/media?pageSize=50${search ? `&search=${encodeURIComponent(search)}` : ''}` : null,
+  );
+
+  const items = (data as any)?.data?.items ?? (data as any)?.items ?? [];
+  const imageItems = items.filter((item: MediaItem) =>
+    item.mimeType.startsWith('image/'),
+  );
+
+  async function handleUpload(files: FileList | null) {
+    if (!files || files.length === 0) return;
+    setUploading(true);
+
+    const file = files[0]!;
+    const formData = new FormData();
+    formData.append('file', file);
+
+    const res = await cmsApi<MediaItem>('/media/upload', {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (res.error) {
+      toast.error(res.error);
+    } else if (res.data) {
+      const mediaItem = res.data as any;
+      const url = mediaItem.storageKey ?? '';
+      toast.success(`Uploaded ${file.name}`);
+      onSelect(url, file.name);
+      onClose();
+    }
+
+    setUploading(false);
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  }
+
+  function handleSelectItem(item: MediaItem) {
+    onSelect(item.storageKey, item.filename);
+    onClose();
+  }
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="fixed inset-0 bg-black/40" onClick={onClose} />
+      <div className="relative bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col mx-4">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
+          <h2 className="text-lg font-semibold text-gray-900">Insert Image</h2>
+          <button onClick={onClose} className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors">
+            <X className="w-5 h-5 text-gray-500" />
+          </button>
+        </div>
+
+        <div className="flex border-b border-gray-200">
+          <button
+            onClick={() => setTab('library')}
+            className={`flex-1 px-4 py-2.5 text-sm font-medium transition-colors ${
+              tab === 'library'
+                ? 'text-blue-600 border-b-2 border-blue-600'
+                : 'text-gray-500 hover:text-gray-700'
+            }`}
+          >
+            Media Library
+          </button>
+          <button
+            onClick={() => setTab('upload')}
+            className={`flex-1 px-4 py-2.5 text-sm font-medium transition-colors ${
+              tab === 'upload'
+                ? 'text-blue-600 border-b-2 border-blue-600'
+                : 'text-gray-500 hover:text-gray-700'
+            }`}
+          >
+            Upload New
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-4">
+          {tab === 'library' ? (
+            <>
+              <div className="relative mb-4">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                <input
+                  type="text"
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  placeholder="Search images..."
+                  className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+              </div>
+
+              {loading ? (
+                <div className="flex items-center justify-center py-12">
+                  <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+                </div>
+              ) : imageItems.length === 0 ? (
+                <div className="text-center py-12 text-sm text-gray-500">
+                  No images found. Try uploading one.
+                </div>
+              ) : (
+                <div className="grid grid-cols-3 sm:grid-cols-4 gap-3">
+                  {imageItems.map((item: MediaItem) => (
+                    <button
+                      key={item.id}
+                      onClick={() => handleSelectItem(item)}
+                      className="group relative aspect-square rounded-lg border-2 border-gray-200 hover:border-blue-500 overflow-hidden bg-gray-100 transition-colors"
+                    >
+                      <div className="w-full h-full flex items-center justify-center">
+                        <ImageIcon className="w-8 h-8 text-gray-300" />
+                      </div>
+                      <div className="absolute inset-x-0 bottom-0 bg-black/60 p-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <p className="text-white text-xs truncate">{item.filename}</p>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="flex flex-col items-center justify-center py-12">
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept={accept ?? 'image/*'}
+                className="hidden"
+                onChange={(e) => handleUpload(e.target.files)}
+              />
+              <div className="w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center mb-4">
+                {uploading ? (
+                  <Loader2 className="w-8 h-8 text-blue-600 animate-spin" />
+                ) : (
+                  <Upload className="w-8 h-8 text-blue-600" />
+                )}
+              </div>
+              <p className="text-sm text-gray-600 mb-4">
+                {uploading ? 'Uploading...' : 'Select an image file to upload'}
+              </p>
+              {!uploading && (
+                <button
+                  onClick={() => fileInputRef.current?.click()}
+                  className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                  Choose File
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/PresenceIndicator.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+
+interface PresenceUser {
+  userId: string;
+  name: string;
+  connectedAt: string;
+}
+
+interface PresenceIndicatorProps {
+  documentId: string;
+  currentUserId?: string;
+}
+
+const COLORS = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899'];
+
+export function PresenceIndicator({ documentId, currentUserId }: PresenceIndicatorProps) {
+  const [users, setUsers] = useState<PresenceUser[]>([]);
+  const eventSourceRef = useRef<EventSource | null>(null);
+  const heartbeatRef = useRef<ReturnType<typeof setInterval>>(undefined);
+
+  useEffect(() => {
+    if (!documentId) return;
+
+    const es = new EventSource(`/api/cms/presence/${documentId}`);
+    eventSourceRef.current = es;
+
+    es.addEventListener('presence', (event) => {
+      try {
+        const data = JSON.parse(event.data) as PresenceUser[];
+        setUsers(data.filter(u => u.userId !== currentUserId));
+      } catch {}
+    });
+
+    es.onerror = () => {
+      es.close();
+    };
+
+    heartbeatRef.current = setInterval(() => {
+      fetch(`/api/cms/presence/${documentId}/heartbeat`, { method: 'POST', credentials: 'include' }).catch(() => {});
+    }, 30_000);
+
+    return () => {
+      es.close();
+      if (heartbeatRef.current) clearInterval(heartbeatRef.current);
+    };
+  }, [documentId, currentUserId]);
+
+  if (users.length === 0) return null;
+
+  return (
+    <div className="flex items-center gap-1" title={`${users.length} other editor(s) active`}>
+      {users.slice(0, 5).map((user, i) => (
+        <div
+          key={user.userId}
+          className="w-7 h-7 rounded-full flex items-center justify-center text-white text-xs font-medium ring-2 ring-white"
+          style={{ backgroundColor: COLORS[i % COLORS.length] }}
+          title={user.name}
+        >
+          {user.name.charAt(0).toUpperCase()}
+        </div>
+      ))}
+      {users.length > 5 && (
+        <div className="w-7 h-7 rounded-full flex items-center justify-center bg-muted text-muted-foreground text-xs font-medium ring-2 ring-white">
+          +{users.length - 5}
+        </div>
+      )}
+    </div>
+  );
+}