convex-cms 0.0.3 → 0.0.5-alpha.2

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

@@ -0,0 +1,217 @@
+import { useState, useCallback, useEffect } from 'react'
+import { useMutation, useQuery } from 'convex/react'
+import { api } from '../../../convex/_generated/api'
+import { CmsDialog } from '~/components/cmsds/CmsDialog'
+import { CmsButton } from '~/components/cmsds/CmsButton'
+import { CmsField } from '~/components/cmsds/CmsField'
+import { Input } from '~/components/ui/input'
+import { Textarea } from '~/components/ui/textarea'
+import { MediaTaxonomyPicker } from './MediaTaxonomyPicker'
+
+export interface MediaAssetForEdit {
+  _id: string
+  name: string
+  title?: string
+  description?: string
+  altText?: string
+  tags?: string[]
+}
+
+interface MediaAssetEditDialogProps {
+  asset: MediaAssetForEdit | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSaved?: () => void
+}
+
+export function MediaAssetEditDialog({
+  asset,
+  open,
+  onOpenChange,
+  onSaved,
+}: MediaAssetEditDialogProps) {
+  const [name, setName] = useState('')
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [altText, setAltText] = useState('')
+  const [tagsInput, setTagsInput] = useState('')
+  const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const updateAsset = useMutation(api.media.updateAsset)
+
+  const taxonomiesResult = useQuery(api.taxonomies.list, {
+    isActive: true,
+    paginationOpts: { numItems: 50, cursor: null },
+  })
+  const taxonomies = taxonomiesResult?.page ?? []
+
+  useEffect(() => {
+    if (asset) {
+      setName(asset.name)
+      setTitle(asset.title || '')
+      setDescription(asset.description || '')
+      setAltText(asset.altText || '')
+      setTagsInput(asset.tags?.join(', ') || '')
+      setError('')
+    }
+  }, [asset])
+
+  const handleSave = useCallback(async () => {
+    if (!asset) return
+
+    if (!name.trim()) {
+      setError('Filename is required')
+      return
+    }
+
+    setIsSaving(true)
+    setError('')
+
+    try {
+      const tags = tagsInput
+        .split(',')
+        .map((t) => t.trim())
+        .filter(Boolean)
+
+      await updateAsset({
+        id: asset._id,
+        name: name.trim(),
+        title: title.trim() || undefined,
+        description: description.trim() || undefined,
+        altText: altText.trim() || undefined,
+        tags: tags.length > 0 ? tags : undefined,
+      })
+
+      onSaved?.()
+      onOpenChange(false)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update asset')
+    } finally {
+      setIsSaving(false)
+    }
+  }, [
+    asset,
+    name,
+    title,
+    description,
+    altText,
+    tagsInput,
+    updateAsset,
+    onSaved,
+    onOpenChange,
+  ])
+
+  if (!asset) return null
+
+  return (
+    <CmsDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Edit File"
+      size="md"
+      footer={
+        <>
+          <CmsButton
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isSaving}
+          >
+            Cancel
+          </CmsButton>
+          <CmsButton onClick={handleSave} loading={isSaving}>
+            Save Changes
+          </CmsButton>
+        </>
+      }
+    >
+      <div className="space-y-4">
+        {error && (
+          <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+            {error}
+          </div>
+        )}
+
+        <CmsField label="Filename" required htmlFor="asset-name">
+          <Input
+            id="asset-name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Enter filename"
+          />
+        </CmsField>
+
+        <CmsField
+          label="Title"
+          description="A human-readable title for the file"
+          htmlFor="asset-title"
+        >
+          <Input
+            id="asset-title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="Enter title (optional)"
+          />
+        </CmsField>
+
+        <CmsField
+          label="Description"
+          description="A brief description of the file"
+          htmlFor="asset-description"
+        >
+          <Textarea
+            id="asset-description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="Enter description (optional)"
+            rows={3}
+          />
+        </CmsField>
+
+        <CmsField
+          label="Alt Text"
+          description="Alternative text for accessibility (important for images)"
+          htmlFor="asset-alt"
+        >
+          <Input
+            id="asset-alt"
+            value={altText}
+            onChange={(e) => setAltText(e.target.value)}
+            placeholder="Describe the image content"
+          />
+        </CmsField>
+
+        <CmsField
+          label="Quick Tags"
+          description="Comma-separated tags for simple organization"
+          htmlFor="asset-tags"
+        >
+          <Input
+            id="asset-tags"
+            value={tagsInput}
+            onChange={(e) => setTagsInput(e.target.value)}
+            placeholder="e.g., hero, blog, product"
+          />
+        </CmsField>
+
+        {taxonomies.length > 0 && asset && (
+          <div className="space-y-4 pt-2 border-t">
+            <p className="text-sm text-muted-foreground">
+              Organize with taxonomy terms
+            </p>
+            {taxonomies.map((taxonomy) => (
+              <MediaTaxonomyPicker
+                key={taxonomy._id}
+                mediaId={asset._id}
+                taxonomyId={taxonomy._id}
+                taxonomyName={taxonomy.displayName}
+                allowCreate={taxonomy.allowInlineCreation}
+                disabled={isSaving}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </CmsDialog>
+  )
+}

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

@@ -0,0 +1,51 @@
+import { CmsButton } from '~/components/cmsds/CmsButton'
+import { FolderInput, Trash2, X } from 'lucide-react'
+
+interface MediaBulkActionBarProps {
+  selectedCount: number
+  onClear: () => void
+  onMove: () => void
+  onDelete: () => void
+  isDeleting?: boolean
+}
+
+export function MediaBulkActionBar({
+  selectedCount,
+  onClear,
+  onMove,
+  onDelete,
+  isDeleting,
+}: MediaBulkActionBarProps) {
+  if (selectedCount === 0) return null
+
+  return (
+    <div className="fixed inset-x-0 bottom-0 z-50 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
+      <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-3">
+        <div className="flex items-center gap-3">
+          <span className="text-sm font-medium">
+            {selectedCount} {selectedCount === 1 ? 'file' : 'files'} selected
+          </span>
+          <CmsButton variant="ghost" size="sm" onClick={onClear}>
+            <X className="mr-1 size-4" />
+            Clear
+          </CmsButton>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <CmsButton variant="secondary" onClick={onMove} disabled={isDeleting}>
+            <FolderInput className="mr-2 size-4" />
+            Move to...
+          </CmsButton>
+          <CmsButton
+            variant="danger"
+            onClick={onDelete}
+            loading={isDeleting}
+          >
+            <Trash2 className="mr-2 size-4" />
+            Delete
+          </CmsButton>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,69 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '~/components/ui/dropdown-menu'
+import { CmsButton } from '~/components/cmsds/CmsButton'
+import { MoreHorizontal, Pencil, FolderInput, Trash2 } from 'lucide-react'
+
+export interface MediaFolderForActions {
+  _id: string
+  name: string
+}
+
+interface MediaFolderActionsProps {
+  folder: MediaFolderForActions
+  onEdit?: () => void
+  onMove?: () => void
+  onDelete?: () => void
+}
+
+export function MediaFolderActions({
+  folder: _folder,
+  onEdit,
+  onMove,
+  onDelete,
+}: MediaFolderActionsProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <CmsButton
+          variant="ghost"
+          size="icon-sm"
+          className="opacity-0 group-hover:opacity-100"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <MoreHorizontal className="size-4" />
+        </CmsButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
+        {onEdit && (
+          <DropdownMenuItem onClick={onEdit}>
+            <Pencil className="mr-2 size-4" />
+            Rename
+          </DropdownMenuItem>
+        )}
+        {onMove && (
+          <DropdownMenuItem onClick={onMove}>
+            <FolderInput className="mr-2 size-4" />
+            Move to...
+          </DropdownMenuItem>
+        )}
+        {onDelete && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={onDelete}
+              className="text-destructive focus:text-destructive"
+            >
+              <Trash2 className="mr-2 size-4" />
+              Delete
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

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

@@ -0,0 +1,126 @@
+import { useState, useCallback, useEffect } from 'react'
+import { useMutation } from 'convex/react'
+import { api } from '../../../convex/_generated/api'
+import { CmsDialog } from '~/components/cmsds/CmsDialog'
+import { CmsButton } from '~/components/cmsds/CmsButton'
+import { CmsField } from '~/components/cmsds/CmsField'
+import { Input } from '~/components/ui/input'
+import { Textarea } from '~/components/ui/textarea'
+
+export interface MediaFolderForEdit {
+  _id: string
+  name: string
+  description?: string
+}
+
+interface MediaFolderEditDialogProps {
+  folder: MediaFolderForEdit | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSaved?: () => void
+}
+
+export function MediaFolderEditDialog({
+  folder,
+  open,
+  onOpenChange,
+  onSaved,
+}: MediaFolderEditDialogProps) {
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const updateFolder = useMutation(api.media.updateFolder)
+
+  useEffect(() => {
+    if (folder) {
+      setName(folder.name)
+      setDescription(folder.description || '')
+      setError('')
+    }
+  }, [folder])
+
+  const handleSave = useCallback(async () => {
+    if (!folder) return
+
+    if (!name.trim()) {
+      setError('Folder name is required')
+      return
+    }
+
+    setIsSaving(true)
+    setError('')
+
+    try {
+      await updateFolder({
+        id: folder._id,
+        name: name.trim(),
+        description: description.trim() || undefined,
+      })
+
+      onSaved?.()
+      onOpenChange(false)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update folder')
+    } finally {
+      setIsSaving(false)
+    }
+  }, [folder, name, description, updateFolder, onSaved, onOpenChange])
+
+  if (!folder) return null
+
+  return (
+    <CmsDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Edit Folder"
+      size="sm"
+      footer={
+        <>
+          <CmsButton
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isSaving}
+          >
+            Cancel
+          </CmsButton>
+          <CmsButton onClick={handleSave} loading={isSaving}>
+            Save Changes
+          </CmsButton>
+        </>
+      }
+    >
+      <div className="space-y-4">
+        {error && (
+          <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+            {error}
+          </div>
+        )}
+
+        <CmsField label="Folder Name" required htmlFor="folder-name">
+          <Input
+            id="folder-name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Enter folder name"
+          />
+        </CmsField>
+
+        <CmsField
+          label="Description"
+          description="A brief description of the folder contents"
+          htmlFor="folder-description"
+        >
+          <Textarea
+            id="folder-description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="Enter description (optional)"
+            rows={3}
+          />
+        </CmsField>
+      </div>
+    </CmsDialog>
+  )
+}

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

@@ -0,0 +1,179 @@
+import { useState, useMemo } from 'react'
+import { useQuery, useMutation } from 'convex/react'
+import { api } from '../../../convex/_generated/api'
+import { CmsDialog } from '~/components/cmsds/CmsDialog'
+import { CmsButton } from '~/components/cmsds/CmsButton'
+import { cn } from '~/lib/cn'
+import { Folder, Home, ChevronRight } from 'lucide-react'
+
+interface MediaMoveModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  assetIds: string[]
+  currentFolderId?: string
+  onMoved?: () => void
+}
+
+interface FolderTreeItem {
+  _id: string
+  name: string
+  parentId?: string
+  depth: number
+}
+
+export function MediaMoveModal({
+  open,
+  onOpenChange,
+  assetIds,
+  currentFolderId,
+  onMoved,
+}: MediaMoveModalProps) {
+  const [selectedFolderId, setSelectedFolderId] = useState<string | undefined>(
+    undefined
+  )
+  const [isMoving, setIsMoving] = useState(false)
+  const [error, setError] = useState('')
+
+  const folderTree = useQuery(api.media.getFolderTree, {})
+  const moveAssets = useMutation(api.media.moveAssets)
+
+  const sortedFolders = useMemo(() => {
+    if (!folderTree) return []
+
+    const buildTree = (
+      parentId: string | undefined,
+      depth: number
+    ): FolderTreeItem[] => {
+      const children = folderTree.filter((f) => f.parentId === parentId)
+      return children.flatMap((folder) => [
+        { ...folder, depth },
+        ...buildTree(folder._id, depth + 1),
+      ])
+    }
+
+    return buildTree(undefined, 0)
+  }, [folderTree])
+
+  const handleMove = async () => {
+    if (assetIds.length === 0) return
+
+    setIsMoving(true)
+    setError('')
+
+    try {
+      await moveAssets({
+        assetIds,
+        targetFolderId: selectedFolderId,
+      })
+      onMoved?.()
+      onOpenChange(false)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to move files')
+    } finally {
+      setIsMoving(false)
+    }
+  }
+
+  const isCurrentFolder = selectedFolderId === currentFolderId
+  const isRootSelected = selectedFolderId === undefined
+
+  return (
+    <CmsDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Move Files"
+      description={`Select a destination folder for ${assetIds.length} ${assetIds.length === 1 ? 'file' : 'files'}`}
+      size="sm"
+      footer={
+        <>
+          <CmsButton
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isMoving}
+          >
+            Cancel
+          </CmsButton>
+          <CmsButton
+            onClick={handleMove}
+            loading={isMoving}
+            disabled={isCurrentFolder}
+          >
+            Move Here
+          </CmsButton>
+        </>
+      }
+    >
+      <div className="space-y-2">
+        {error && (
+          <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+            {error}
+          </div>
+        )}
+
+        <div className="max-h-[300px] overflow-y-auto rounded-md border">
+          {/* Root folder option */}
+          <button
+            type="button"
+            className={cn(
+              'flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors hover:bg-muted',
+              isRootSelected && 'bg-primary/10 text-primary',
+              currentFolderId === undefined && 'opacity-50'
+            )}
+            onClick={() => setSelectedFolderId(undefined)}
+          >
+            <Home className="size-4" />
+            <span className="font-medium">Root (All Files)</span>
+            {currentFolderId === undefined && (
+              <span className="ml-auto text-xs text-muted-foreground">
+                Current
+              </span>
+            )}
+          </button>
+
+          {/* Folder tree */}
+          {sortedFolders.map((folder) => {
+            const isCurrent = folder._id === currentFolderId
+            const isSelected = folder._id === selectedFolderId
+
+            return (
+              <button
+                key={folder._id}
+                type="button"
+                className={cn(
+                  'flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors hover:bg-muted',
+                  isSelected && 'bg-primary/10 text-primary',
+                  isCurrent && 'opacity-50'
+                )}
+                style={{ paddingLeft: `${12 + folder.depth * 20}px` }}
+                onClick={() => setSelectedFolderId(folder._id)}
+              >
+                {folder.depth > 0 && (
+                  <ChevronRight className="size-3 text-muted-foreground" />
+                )}
+                <Folder className="size-4 text-amber-500" />
+                <span className="truncate">{folder.name}</span>
+                {isCurrent && (
+                  <span className="ml-auto text-xs text-muted-foreground">
+                    Current
+                  </span>
+                )}
+              </button>
+            )
+          })}
+
+          {sortedFolders.length === 0 && (
+            <div className="px-3 py-6 text-center text-sm text-muted-foreground">
+              No folders yet. Create folders to organize your files.
+            </div>
+          )}
+        </div>
+
+        {isCurrentFolder && (
+          <p className="text-xs text-muted-foreground">
+            Files are already in this folder
+          </p>
+        )}
+      </div>
+    </CmsDialog>
+  )
+}