@acms-subir/core 0.0.1

package/src/components/editor/ImagePicker.tsx

@@ -0,0 +1,215 @@
+import { useEffect, useRef, useState } from 'react';
+import { actions } from 'astro:actions';
+import type { Media } from '../../lib/schema';
+import { uploadImage, mediaSrc, mediaSrcset, mediaThumb, unsplashSrcset, DEFAULT_SIZES } from './imaging';
+
+// Shared image chooser: used by the editor's image card, the feature-image
+// field, and (later) the widget builder.
+
+export interface PickedImage {
+  src: string;
+  srcset: string;
+  sizes: string;
+  alt: string;
+  width: number;
+  height: number;
+  caption: string;
+}
+
+interface UnsplashPhoto {
+  id: string;
+  alt: string;
+  width: number;
+  height: number;
+  thumb: string;
+  regular: string;
+  downloadLocation: string;
+  authorName: string;
+  authorUrl: string;
+}
+
+interface Props {
+  open: boolean;
+  unsplashEnabled: boolean;
+  onClose: () => void;
+  onSelect: (img: PickedImage) => void;
+}
+
+type Tab = 'upload' | 'library' | 'unsplash';
+
+export function ImagePicker({ open, unsplashEnabled, onClose, onSelect }: Props) {
+  const [tab, setTab] = useState<Tab>('upload');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const [dragOver, setDragOver] = useState(false);
+  const [library, setLibrary] = useState<Media[] | null>(null);
+  const [query, setQuery] = useState('');
+  const [photos, setPhotos] = useState<UnsplashPhoto[]>([]);
+  const [searching, setSearching] = useState(false);
+  const fileInput = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    setError('');
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  useEffect(() => {
+    if (open && tab === 'library' && library === null) {
+      actions.media.list({}).then((r) => {
+        // this picker chooses images; documents live in the media library page
+        if (r.data) setLibrary(r.data.media.filter((m) => m.mime.startsWith('image/')));
+        else setError(r.error?.message ?? 'Could not load library.');
+      });
+    }
+  }, [open, tab, library]);
+
+  if (!open) return null;
+
+  async function handleFiles(files: FileList | File[]) {
+    const file = files[0];
+    if (!file || !file.type.startsWith('image/')) return;
+    setBusy(true);
+    setError('');
+    try {
+      const media = await uploadImage(file);
+      setLibrary(null); // refetch next time
+      onSelect({
+        src: mediaSrc(media),
+        srcset: mediaSrcset(media),
+        sizes: media.variants.length ? DEFAULT_SIZES : '',
+        alt: media.alt,
+        width: media.width,
+        height: media.height,
+        caption: '',
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Upload failed.');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function search(page = 1) {
+    if (!query.trim()) return;
+    setSearching(true);
+    setError('');
+    const r = await actions.unsplash.search({ query: query.trim(), page });
+    if (r.data) setPhotos(r.data.photos);
+    else setError(r.error?.message ?? 'Search failed.');
+    setSearching(false);
+  }
+
+  function pickUnsplash(p: UnsplashPhoto) {
+    actions.unsplash.track({ downloadLocation: p.downloadLocation }).catch(() => {});
+    onSelect({
+      src: p.regular,
+      srcset: unsplashSrcset(p.regular),
+      sizes: DEFAULT_SIZES,
+      alt: p.alt,
+      width: p.width,
+      height: p.height,
+      caption: `Photo by ${p.authorName} / Unsplash`,
+    });
+  }
+
+  return (
+    <div className="pe-modal-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+      <div className="pe-modal" role="dialog" aria-label="Choose an image">
+        <div className="pe-modal-head">
+          <div className="pe-tabs">
+            <button type="button" className={tab === 'upload' ? 'is-active' : ''} onClick={() => setTab('upload')}>Upload</button>
+            <button type="button" className={tab === 'library' ? 'is-active' : ''} onClick={() => setTab('library')}>Library</button>
+            {unsplashEnabled && (
+              <button type="button" className={tab === 'unsplash' ? 'is-active' : ''} onClick={() => setTab('unsplash')}>Unsplash</button>
+            )}
+          </div>
+          <button type="button" className="pe-modal-close" onClick={onClose} aria-label="Close">✕</button>
+        </div>
+
+        {error && <div className="pe-modal-error">{error}</div>}
+
+        {tab === 'upload' && (
+          <div
+            className={`pe-dropzone ${dragOver ? 'is-over' : ''} ${busy ? 'is-busy' : ''}`}
+            onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
+            onDragLeave={() => setDragOver(false)}
+            onDrop={(e) => { e.preventDefault(); setDragOver(false); handleFiles(e.dataTransfer.files); }}
+            onClick={() => !busy && fileInput.current?.click()}
+          >
+            <input
+              ref={fileInput}
+              type="file"
+              accept="image/*"
+              hidden
+              onChange={(e) => e.target.files && handleFiles(e.target.files)}
+            />
+            {busy ? (
+              <p>Optimizing & uploading…</p>
+            ) : (
+              <>
+                <p><b>Click to upload</b> or drag an image here</p>
+                <p className="pe-dropzone-hint">Resized & converted to WebP automatically</p>
+              </>
+            )}
+          </div>
+        )}
+
+        {tab === 'library' && (
+          <div className="pe-grid">
+            {library === null && <p className="pe-grid-note">Loading…</p>}
+            {library?.length === 0 && <p className="pe-grid-note">No uploads yet.</p>}
+            {library?.map((m) => (
+              <button
+                key={m.id}
+                type="button"
+                className="pe-grid-item"
+                title={m.filename}
+                onClick={() =>
+                  onSelect({
+                    src: mediaSrc(m),
+                    srcset: mediaSrcset(m),
+                    sizes: m.variants.length ? DEFAULT_SIZES : '',
+                    alt: m.alt,
+                    width: m.width,
+                    height: m.height,
+                    caption: '',
+                  })
+                }
+              >
+                <img src={mediaThumb(m)} alt={m.alt || m.filename} loading="lazy" />
+              </button>
+            ))}
+          </div>
+        )}
+
+        {tab === 'unsplash' && (
+          <>
+            <form className="pe-unsplash-search" onSubmit={(e) => { e.preventDefault(); search(); }}>
+              <input
+                autoFocus
+                type="search"
+                placeholder="Search free high-resolution photos…"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+              />
+              <button type="submit" className="pe-btn primary sm" disabled={searching}>
+                {searching ? 'Searching…' : 'Search'}
+              </button>
+            </form>
+            <div className="pe-grid">
+              {photos.map((p) => (
+                <button key={p.id} type="button" className="pe-grid-item" onClick={() => pickUnsplash(p)}>
+                  <img src={p.thumb} alt={p.alt} loading="lazy" />
+                  <span className="pe-grid-credit">{p.authorName}</span>
+                </button>
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}