convex-cms 0.0.3 → 0.0.5-alpha.2

package/admin/src/components/media/MediaPreviewModal.tsx

@@ -0,0 +1,370 @@
+import { useEffect, useCallback } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '~/components/ui/dialog'
+import { CmsButton } from '~/components/cmsds/CmsButton'
+import { cn } from '~/lib/cn'
+import {
+  X,
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  Pencil,
+  Trash2,
+  Image,
+  Video,
+  Music,
+  FileText,
+  File,
+  Copy,
+} from 'lucide-react'
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
+
+export interface MediaAsset {
+  _id: string
+  _creationTime: number
+  name: string
+  title?: string
+  description?: string
+  altText?: string
+  mimeType?: string
+  size?: number
+  width?: number
+  height?: number
+  url: string | null
+  tags?: string[]
+}
+
+type MediaType = 'image' | 'video' | 'audio' | 'document' | 'other'
+
+function getMediaTypeFromMimeType(mimeType?: string): MediaType {
+  if (!mimeType) return 'other'
+  if (mimeType.startsWith('image/')) return 'image'
+  if (mimeType.startsWith('video/')) return 'video'
+  if (mimeType.startsWith('audio/')) return 'audio'
+  if (
+    mimeType === 'application/pdf' ||
+    mimeType.includes('document') ||
+    mimeType.includes('sheet') ||
+    mimeType.includes('presentation') ||
+    mimeType.startsWith('text/')
+  ) {
+    return 'document'
+  }
+  return 'other'
+}
+
+interface MediaPreviewModalProps {
+  asset: MediaAsset | null
+  assets: MediaAsset[]
+  currentIndex: number
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onNavigate: (index: number) => void
+  onEdit?: (asset: MediaAsset) => void
+  onDelete?: (asset: MediaAsset) => void
+}
+
+function formatFileSize(bytes?: number): string {
+  if (!bytes || bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`
+}
+
+function formatDate(timestamp: number): string {
+  return new Date(timestamp).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+}
+
+function getMediaTypeIcon(type: string, className = 'size-16') {
+  const iconProps = { className }
+  switch (type) {
+    case 'image':
+      return <Image {...iconProps} />
+    case 'video':
+      return <Video {...iconProps} />
+    case 'audio':
+      return <Music {...iconProps} />
+    case 'document':
+      return <FileText {...iconProps} />
+    default:
+      return <File {...iconProps} />
+  }
+}
+
+export function MediaPreviewModal({
+  asset,
+  assets,
+  currentIndex,
+  open,
+  onOpenChange,
+  onNavigate,
+  onEdit,
+  onDelete,
+}: MediaPreviewModalProps) {
+  const canNavigatePrev = currentIndex > 0
+  const canNavigateNext = currentIndex < assets.length - 1
+
+  const handlePrev = useCallback(() => {
+    if (canNavigatePrev) {
+      onNavigate(currentIndex - 1)
+    }
+  }, [canNavigatePrev, currentIndex, onNavigate])
+
+  const handleNext = useCallback(() => {
+    if (canNavigateNext) {
+      onNavigate(currentIndex + 1)
+    }
+  }, [canNavigateNext, currentIndex, onNavigate])
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!open) return
+
+      switch (e.key) {
+        case 'ArrowLeft':
+          e.preventDefault()
+          handlePrev()
+          break
+        case 'ArrowRight':
+          e.preventDefault()
+          handleNext()
+          break
+        case 'Escape':
+          e.preventDefault()
+          onOpenChange(false)
+          break
+      }
+    },
+    [open, handlePrev, handleNext, onOpenChange]
+  )
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [handleKeyDown])
+
+  const handleDownload = useCallback(() => {
+    if (!asset?.url) return
+
+    const link = document.createElement('a')
+    link.href = asset.url
+    link.download = asset.name
+    link.target = '_blank'
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  }, [asset])
+
+  const handleCopyUrl = useCallback(async () => {
+    if (!asset?.url) return
+    await navigator.clipboard.writeText(asset.url)
+  }, [asset])
+
+  if (!asset) return null
+
+  const mediaType = getMediaTypeFromMimeType(asset.mimeType)
+  const isImage = mediaType === 'image'
+  const hasUrl = Boolean(asset.url)
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="flex h-[90vh] w-[95vw] max-w-[1400px] flex-col gap-0 overflow-hidden p-0 sm:max-w-[1400px]"
+        showCloseButton={false}
+      >
+        <VisuallyHidden>
+          <DialogTitle>Preview: {asset.name}</DialogTitle>
+        </VisuallyHidden>
+
+        {/* Header */}
+        <div className="flex items-center justify-between border-b px-4 py-3">
+          <div className="flex items-center gap-3">
+            <h2 className="truncate text-lg font-semibold" title={asset.name}>
+              {asset.name}
+            </h2>
+            <span className="text-sm text-muted-foreground">
+              {currentIndex + 1} of {assets.length}
+            </span>
+          </div>
+          <div className="flex items-center gap-1">
+            <CmsButton
+              variant="ghost"
+              size="icon"
+              onClick={handleCopyUrl}
+              disabled={!asset.url}
+              title="Copy URL"
+            >
+              <Copy className="size-4" />
+            </CmsButton>
+            <CmsButton
+              variant="ghost"
+              size="icon"
+              onClick={handleDownload}
+              disabled={!asset.url}
+              title="Download"
+            >
+              <Download className="size-4" />
+            </CmsButton>
+            {onEdit && (
+              <CmsButton
+                variant="ghost"
+                size="icon"
+                onClick={() => onEdit(asset)}
+                title="Edit"
+              >
+                <Pencil className="size-4" />
+              </CmsButton>
+            )}
+            {onDelete && (
+              <CmsButton
+                variant="ghost"
+                size="icon"
+                onClick={() => onDelete(asset)}
+                title="Delete"
+                className="text-destructive hover:text-destructive"
+              >
+                <Trash2 className="size-4" />
+              </CmsButton>
+            )}
+            <CmsButton
+              variant="ghost"
+              size="icon"
+              onClick={() => onOpenChange(false)}
+              title="Close (Esc)"
+            >
+              <X className="size-4" />
+            </CmsButton>
+          </div>
+        </div>
+
+        {/* Main content area */}
+        <div className="flex min-h-0 flex-1">
+          {/* Preview area */}
+          <div className="relative flex flex-1 items-center justify-center bg-zinc-950">
+            {/* Navigation buttons */}
+            {canNavigatePrev && (
+              <button
+                onClick={handlePrev}
+                className="absolute left-4 z-10 flex size-10 items-center justify-center rounded-full bg-black/50 text-white transition-colors hover:bg-black/70"
+                title="Previous (←)"
+              >
+                <ChevronLeft className="size-6" />
+              </button>
+            )}
+
+            {canNavigateNext && (
+              <button
+                onClick={handleNext}
+                className="absolute right-4 z-10 flex size-10 items-center justify-center rounded-full bg-black/50 text-white transition-colors hover:bg-black/70"
+                title="Next (→)"
+              >
+                <ChevronRight className="size-6" />
+              </button>
+            )}
+
+            {/* Image preview */}
+            {isImage && hasUrl ? (
+              <img
+                src={asset.url!}
+                alt={asset.altText || asset.title || asset.name}
+                className="max-h-full max-w-full object-contain"
+              />
+            ) : (
+              <div className="flex flex-col items-center gap-4 text-zinc-400">
+                {getMediaTypeIcon(mediaType)}
+                <p className="text-sm">
+                  {isImage && !hasUrl
+                    ? 'Image URL not available'
+                    : 'Preview not available for this file type'}
+                </p>
+                {hasUrl && (
+                  <CmsButton variant="secondary" onClick={handleDownload}>
+                    <Download className="mr-2 size-4" />
+                    Download to view
+                  </CmsButton>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Info sidebar */}
+          <div className="w-72 shrink-0 overflow-y-auto border-l bg-background">
+            <div className="space-y-4 p-4">
+              <h3 className="font-semibold">File Information</h3>
+
+              <InfoRow label="Filename" value={asset.name} />
+              {asset.title && <InfoRow label="Title" value={asset.title} />}
+              {asset.description && (
+                <InfoRow label="Description" value={asset.description} />
+              )}
+              {asset.altText && <InfoRow label="Alt Text" value={asset.altText} />}
+
+              <div className="border-t pt-4">
+                <InfoRow label="Type" value={mediaType} capitalize />
+                {asset.mimeType && <InfoRow label="MIME Type" value={asset.mimeType} />}
+                <InfoRow label="Size" value={formatFileSize(asset.size)} />
+                {asset.width && asset.height && (
+                  <InfoRow
+                    label="Dimensions"
+                    value={`${asset.width} × ${asset.height} px`}
+                  />
+                )}
+              </div>
+
+              <div className="border-t pt-4">
+                <InfoRow label="Uploaded" value={formatDate(asset._creationTime)} />
+              </div>
+
+              {asset.tags && asset.tags.length > 0 && (
+                <div className="border-t pt-4">
+                  <p className="mb-2 text-xs font-medium text-muted-foreground">
+                    Tags
+                  </p>
+                  <div className="flex flex-wrap gap-1">
+                    {asset.tags.map((tag) => (
+                      <span
+                        key={tag}
+                        className="rounded-full bg-muted px-2 py-0.5 text-xs"
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function InfoRow({
+  label,
+  value,
+  capitalize,
+}: {
+  label: string
+  value: string
+  capitalize?: boolean
+}) {
+  return (
+    <div className="space-y-0.5">
+      <p className="text-xs font-medium text-muted-foreground">{label}</p>
+      <p className={cn('break-words text-sm', capitalize && 'capitalize')}>
+        {value}
+      </p>
+    </div>
+  )
+}

package/admin/src/components/media/MediaTaxonomyPicker.tsx

@@ -0,0 +1,304 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+import { useQuery, useMutation } from 'convex/react'
+import { api } from '../../../convex/_generated/api'
+import { Badge } from '~/components/ui/badge'
+import { Input } from '~/components/ui/input'
+import { Button } from '~/components/ui/button'
+import { cn } from '~/lib/cn'
+import { X, Plus, Loader2, Tag } from 'lucide-react'
+
+interface TaxonomyTermDisplay {
+  _id: string
+  name: string
+  slug: string
+  color?: string
+  usageCount: number
+}
+
+interface MediaTaxonomyPickerProps {
+  mediaId: string
+  taxonomyId: string
+  taxonomyName?: string
+  allowCreate?: boolean
+  disabled?: boolean
+  className?: string
+}
+
+export function MediaTaxonomyPicker({
+  mediaId,
+  taxonomyId,
+  taxonomyName = 'Tags',
+  allowCreate = true,
+  disabled = false,
+  className = '',
+}: MediaTaxonomyPickerProps) {
+  const [inputValue, setInputValue] = useState('')
+  const [showSuggestions, setShowSuggestions] = useState(false)
+  const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(0)
+  const [isCreating, setIsCreating] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+
+  const inputRef = useRef<HTMLInputElement>(null)
+  const suggestionsRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const currentTerms = useQuery(api.taxonomies.getTermsByMedia, {
+    mediaId,
+    taxonomyId,
+  })
+
+  const selectedTermIds = currentTerms?.map((t: TaxonomyTermDisplay) => t._id) ?? []
+
+  const suggestionsResult = useQuery(api.taxonomies.suggestTerms, {
+    taxonomyId,
+    query: inputValue,
+    limit: 10,
+    excludeIds: selectedTermIds,
+  })
+  const suggestions = (suggestionsResult ?? []) as TaxonomyTermDisplay[]
+
+  const setMediaTermsMutation = useMutation(api.taxonomies.setMediaTerms)
+  const createTermMutation = useMutation(api.taxonomies.createTermAndAddToMedia)
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setShowSuggestions(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  const addTag = useCallback(
+    async (termId: string) => {
+      if (selectedTermIds.includes(termId)) return
+      setIsSaving(true)
+      try {
+        await setMediaTermsMutation({
+          mediaId,
+          taxonomyId,
+          termIds: [...selectedTermIds, termId],
+        })
+      } catch (err) {
+        console.error('Failed to add tag:', err)
+      } finally {
+        setIsSaving(false)
+        setInputValue('')
+        setShowSuggestions(false)
+        setActiveSuggestionIndex(0)
+        inputRef.current?.focus()
+      }
+    },
+    [mediaId, taxonomyId, selectedTermIds, setMediaTermsMutation]
+  )
+
+  const removeTag = useCallback(
+    async (termId: string) => {
+      setIsSaving(true)
+      try {
+        await setMediaTermsMutation({
+          mediaId,
+          taxonomyId,
+          termIds: selectedTermIds.filter((id: string) => id !== termId),
+        })
+      } catch (err) {
+        console.error('Failed to remove tag:', err)
+      } finally {
+        setIsSaving(false)
+      }
+    },
+    [mediaId, taxonomyId, selectedTermIds, setMediaTermsMutation]
+  )
+
+  const createTag = useCallback(async () => {
+    if (!inputValue.trim() || !allowCreate) return
+    setIsCreating(true)
+    try {
+      await createTermMutation({
+        taxonomyId,
+        name: inputValue.trim(),
+        mediaId,
+      })
+      setInputValue('')
+      setShowSuggestions(false)
+      setActiveSuggestionIndex(0)
+    } catch (err) {
+      console.error('Failed to create tag:', err)
+    } finally {
+      setIsCreating(false)
+    }
+  }, [inputValue, allowCreate, taxonomyId, mediaId, createTermMutation])
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (disabled) return
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault()
+        setActiveSuggestionIndex((prev) =>
+          prev < suggestions.length - 1 ? prev + 1 : prev
+        )
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        setActiveSuggestionIndex((prev) => (prev > 0 ? prev - 1 : 0))
+        break
+      case 'Enter':
+        e.preventDefault()
+        if (suggestions.length > 0 && activeSuggestionIndex < suggestions.length) {
+          addTag(suggestions[activeSuggestionIndex]._id)
+        } else if (inputValue.trim() && allowCreate) {
+          createTag()
+        }
+        break
+      case 'Escape':
+        setShowSuggestions(false)
+        break
+      case 'Backspace':
+        if (inputValue === '' && selectedTermIds.length > 0) {
+          removeTag(selectedTermIds[selectedTermIds.length - 1])
+        }
+        break
+    }
+  }
+
+  useEffect(() => {
+    if (suggestionsRef.current && showSuggestions) {
+      const activeElement = suggestionsRef.current.querySelector(
+        `[data-index="${activeSuggestionIndex}"]`
+      )
+      if (activeElement) {
+        activeElement.scrollIntoView({ block: 'nearest' })
+      }
+    }
+  }, [activeSuggestionIndex, showSuggestions])
+
+  const filteredSuggestions = suggestions.filter(
+    (term) => !selectedTermIds.includes(term._id)
+  )
+  const showCreateOption =
+    allowCreate &&
+    inputValue.trim() &&
+    !filteredSuggestions.some(
+      (s) => s.name.toLowerCase() === inputValue.trim().toLowerCase()
+    )
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+        <Tag className="size-4" />
+        {taxonomyName}
+      </div>
+
+      <div
+        ref={containerRef}
+        className={cn(
+          'relative rounded-md border border-input bg-background',
+          disabled && 'opacity-50'
+        )}
+      >
+        <div className="flex flex-wrap items-center gap-1.5 p-2">
+          {(currentTerms ?? []).map((term: TaxonomyTermDisplay) => (
+            <Badge
+              key={term._id}
+              variant="secondary"
+              className="gap-1 pr-1"
+              style={term.color ? { backgroundColor: term.color, color: '#fff' } : undefined}
+            >
+              {term.name}
+              {!disabled && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-4 hover:bg-transparent"
+                  onClick={() => removeTag(term._id)}
+                  disabled={isSaving}
+                  aria-label={`Remove ${term.name}`}
+                >
+                  <X className="size-3" />
+                </Button>
+              )}
+            </Badge>
+          ))}
+
+          {!disabled && (
+            <Input
+              ref={inputRef}
+              type="text"
+              className="h-7 min-w-[120px] flex-1 border-0 bg-transparent px-1 shadow-none focus-visible:ring-0"
+              value={inputValue}
+              onChange={(e) => {
+                setInputValue(e.target.value)
+                setShowSuggestions(true)
+                setActiveSuggestionIndex(0)
+              }}
+              onFocus={() => setShowSuggestions(true)}
+              onKeyDown={handleKeyDown}
+              placeholder={selectedTermIds.length === 0 ? 'Add tags...' : ''}
+              disabled={disabled || isCreating || isSaving}
+            />
+          )}
+        </div>
+
+        {showSuggestions && (filteredSuggestions.length > 0 || showCreateOption) && (
+          <div
+            ref={suggestionsRef}
+            className="absolute left-0 right-0 top-full z-50 mt-1 max-h-48 overflow-auto rounded-md border bg-popover shadow-lg"
+            role="listbox"
+          >
+            {filteredSuggestions.map((term, index) => (
+              <div
+                key={term._id}
+                data-index={index}
+                className={cn(
+                  'flex cursor-pointer items-center gap-2 px-3 py-2 text-sm',
+                  index === activeSuggestionIndex && 'bg-accent'
+                )}
+                onClick={() => addTag(term._id)}
+                role="option"
+                aria-selected={index === activeSuggestionIndex}
+              >
+                {term.color && (
+                  <span
+                    className="size-2.5 rounded-full"
+                    style={{ backgroundColor: term.color }}
+                  />
+                )}
+                <span className="flex-1">{term.name}</span>
+                <span className="text-xs text-muted-foreground">{term.usageCount} uses</span>
+              </div>
+            ))}
+
+            {showCreateOption && (
+              <div
+                data-index={filteredSuggestions.length}
+                className={cn(
+                  'flex cursor-pointer items-center gap-2 px-3 py-2 text-sm',
+                  filteredSuggestions.length === activeSuggestionIndex && 'bg-accent'
+                )}
+                onClick={createTag}
+                role="option"
+                aria-selected={filteredSuggestions.length === activeSuggestionIndex}
+              >
+                {isCreating ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <Plus className="size-4" />
+                )}
+                <span>Create "{inputValue.trim()}"</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {(isSaving || isCreating) && (
+          <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+            <Loader2 className="size-4 animate-spin" />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}