deepspace 0.20.0 → 0.22.0

package/features/file-manager/src/FileManagerPage.tsx

@@ -1,48 +1,36 @@
-/**
- * File Manager Page
- *
- * Demonstrates:
- * - useR2Files for upload, list, download, delete
- * - Drag-and-drop upload zone
- * - Inline image preview
- * - File size formatting
- */
-
-import { useState, useEffect, useCallback, useRef } from 'react'
-import { useR2Files } from 'deepspace'
-import { EmptyState, Badge, Modal } from '@/components/ui'
-import type { R2FileInfo } from 'deepspace'
-
-// ============================================================================
-// Helpers
-// ============================================================================
+/** Per-user file management with authenticated previews and visible mutation outcomes. */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  Download,
+  Eye,
+  File as FileIcon,
+  FileImage,
+  FolderOpen,
+  Trash2,
+  TriangleAlert,
+  UploadCloud,
+} from 'lucide-react'
+import { useR2Files, type R2FileInfo } from 'deepspace'
+import { Badge, Button, ConfirmModal, EmptyState, Modal, useToast } from '@/components/ui'
 
 function formatBytes(bytes: number): string {
   if (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]}`
+  const units = ['B', 'KB', 'MB', 'GB']
+  const unit = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
+  return `${parseFloat((bytes / 1024 ** unit).toFixed(1))} ${units[unit]}`
 }
 
-function isImage(name: string): boolean {
-  return /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)$/i.test(name)
+function displayName(file: R2FileInfo): string {
+  return file.originalName ?? file.key.split('/').pop() ?? 'Unnamed'
 }
 
-function fileIcon(name: string): string {
-  if (isImage(name)) return 'image'
-  if (/\.(pdf)$/i.test(name)) return 'pdf'
-  if (/\.(doc|docx|txt|md)$/i.test(name)) return 'doc'
-  if (/\.(mp4|mov|webm|avi)$/i.test(name)) return 'video'
-  if (/\.(mp3|wav|ogg|flac)$/i.test(name)) return 'audio'
-  if (/\.(zip|tar|gz|rar|7z)$/i.test(name)) return 'archive'
-  return 'file'
+// SVG is served as a download for origin safety, so it is deliberately not
+// rendered inline. It remains uploadable and downloadable like every file.
+function canPreviewImage(name: string): boolean {
+  return /\.(jpg|jpeg|png|gif|webp|bmp|ico)$/i.test(name)
 }
 
-// ============================================================================
-// Drop Zone
-// ============================================================================
-
 interface DropZoneProps {
   onFiles: (files: File[]) => void
   isUploading: boolean
@@ -52,75 +40,60 @@ function DropZone({ onFiles, isUploading }: DropZoneProps) {
   const [isDragging, setIsDragging] = useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
 
-  const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    setIsDragging(true)
-  }, [])
-
-  const handleDragLeave = useCallback(() => {
-    setIsDragging(false)
-  }, [])
-
-  const handleDrop = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    setIsDragging(false)
-    const files = Array.from(e.dataTransfer.files)
-    if (files.length > 0) onFiles(files)
-  }, [onFiles])
-
-  const handleClick = () => inputRef.current?.click()
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(e.target.files ?? [])
-    if (files.length > 0) onFiles(files)
-    e.target.value = ''
-  }
+  const handleDrop = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault()
+      setIsDragging(false)
+      const files = Array.from(event.dataTransfer.files)
+      if (files.length > 0) onFiles(files)
+    },
+    [onFiles],
+  )
 
   return (
     <div
-      onDragOver={handleDragOver}
-      onDragLeave={handleDragLeave}
+      onDragOver={(event) => {
+        event.preventDefault()
+        setIsDragging(true)
+      }}
+      onDragLeave={() => setIsDragging(false)}
       onDrop={handleDrop}
-      onClick={handleClick}
-      className={`
-        relative border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-colors
-        ${isDragging
-          ? 'border-primary bg-primary/5'
-          : 'border-border hover:border-primary/50 hover:bg-muted/30'
-        }
-        ${isUploading ? 'pointer-events-none opacity-60' : ''}
-      `}
+      className={`rounded-xl border-2 border-dashed p-8 text-center transition-colors ${
+        isDragging ? 'border-primary bg-primary/5' : 'border-border bg-card/30'
+      }`}
     >
       <input
         ref={inputRef}
         type="file"
         multiple
-        onChange={handleInputChange}
+        onChange={(event) => {
+          const files = Array.from(event.target.files ?? [])
+          if (files.length > 0) onFiles(files)
+          event.target.value = ''
+        }}
         className="hidden"
       />
       {isUploading ? (
-        <div className="flex flex-col items-center gap-2">
-          <div className="w-8 h-8 border-2 border-primary/20 border-t-primary rounded-full animate-spin" />
-          <p className="text-sm text-muted-foreground">Uploading...</p>
+        <div className="mx-auto max-w-xs space-y-3" aria-label="Uploading files" aria-busy="true">
+          <div className="mx-auto size-10 animate-pulse rounded-lg bg-muted" />
+          <div className="mx-auto h-4 w-32 animate-pulse rounded bg-muted" />
+          <div className="mx-auto h-3 w-48 animate-pulse rounded bg-muted/70" />
         </div>
       ) : (
-        <div className="flex flex-col items-center gap-2">
-          <svg className="w-10 h-10 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
-          </svg>
+        <div className="flex flex-col items-center gap-3">
+          <UploadCloud className="size-10 text-muted-foreground" aria-hidden="true" />
           <p className="text-sm text-muted-foreground">
-            <span className="font-medium text-foreground">Click to upload</span> or drag and drop
+            Drag files here or choose them from your device.
           </p>
+          <Button variant="secondary" onClick={() => inputRef.current?.click()}>
+            Choose files
+          </Button>
         </div>
       )}
     </div>
   )
 }
 
-// ============================================================================
-// File Card
-// ============================================================================
-
 interface FileCardProps {
   file: R2FileInfo
   onDownload: () => void
@@ -129,180 +102,234 @@ interface FileCardProps {
 }
 
 function FileCard({ file, onDownload, onDelete, onPreview }: FileCardProps) {
-  const name = file.originalName ?? file.key.split('/').pop() ?? 'Unnamed'
-  const type = fileIcon(name)
-  const previewable = isImage(name)
-
-  const iconColor: Record<string, string> = {
-    image: 'text-emerald-500',
-    pdf: 'text-red-500',
-    doc: 'text-blue-500',
-    video: 'text-purple-500',
-    audio: 'text-orange-500',
-    archive: 'text-yellow-500',
-    file: 'text-muted-foreground',
-  }
+  const name = displayName(file)
+  const previewable = canPreviewImage(name)
 
   return (
-    <div className="group p-4 bg-card/60 rounded-xl border border-border hover:border-primary/30 transition-colors">
+    <div className="rounded-xl border border-border bg-card/60 p-4 transition-colors hover:border-primary/30">
       <div className="flex items-start gap-3">
-        <div
-          className={`shrink-0 w-10 h-10 rounded-lg bg-muted/60 flex items-center justify-center ${iconColor[type] ?? ''} ${previewable ? 'cursor-pointer' : ''}`}
-          onClick={previewable ? onPreview : undefined}
-        >
-          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            {type === 'image' ? (
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-            ) : (
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-            )}
-          </svg>
+        <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted/60">
+          {previewable ? (
+            <FileImage className="size-5 text-emerald-500" aria-hidden="true" />
+          ) : (
+            <FileIcon className="size-5 text-muted-foreground" aria-hidden="true" />
+          )}
         </div>
-
-        <div className="flex-1 min-w-0">
-          <p className="text-sm font-medium text-foreground truncate">{name}</p>
-          <div className="flex items-center gap-2 mt-1">
-            <Badge variant="secondary" size="sm">{formatBytes(file.size)}</Badge>
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-medium text-foreground">{name}</p>
+          <div className="mt-1 flex items-center gap-2">
+            <Badge variant="secondary" size="sm">
+              {formatBytes(file.size)}
+            </Badge>
             <span className="text-xs text-muted-foreground">
               {new Date(file.uploaded).toLocaleDateString()}
             </span>
           </div>
         </div>
-
-        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-          <button
-            onClick={onDownload}
-            className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-muted/60 rounded-lg transition-colors"
-            title="Download"
-          >
-            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-            </svg>
-          </button>
-          <button
-            onClick={onDelete}
-            className="p-1.5 text-muted-foreground hover:text-destructive hover:bg-destructive/20 rounded-lg transition-colors"
-            title="Delete"
-          >
-            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-            </svg>
-          </button>
-        </div>
+      </div>
+      <div className="mt-4 flex flex-wrap gap-2">
+        {previewable && (
+          <Button variant="ghost" size="sm" onClick={onPreview}>
+            <Eye aria-hidden="true" />
+            Preview
+          </Button>
+        )}
+        <Button variant="ghost" size="sm" onClick={onDownload}>
+          <Download aria-hidden="true" />
+          Download
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="text-destructive hover:bg-destructive/20 hover:text-destructive"
+          onClick={onDelete}
+        >
+          <Trash2 aria-hidden="true" />
+          Delete
+        </Button>
       </div>
     </div>
   )
 }
 
-// ============================================================================
-// Preview Modal
-// ============================================================================
-
-interface PreviewModalProps {
+function PreviewModal({
+  file,
+  imageUrl,
+  onClose,
+}: {
   file: R2FileInfo | null
   imageUrl: string | null
   onClose: () => void
-}
-
-function PreviewModal({ file, imageUrl, onClose }: PreviewModalProps) {
-  const name = file?.originalName ?? file?.key.split('/').pop() ?? ''
-
+}) {
   return (
-    <Modal open={!!file} onClose={onClose} size="lg">
+    <Modal open={file !== null} onClose={onClose} size="lg">
       <Modal.Header>
-        <Modal.Title>{name}</Modal.Title>
+        <Modal.Title>{file ? displayName(file) : ''}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        {imageUrl && (
-          <img src={imageUrl} alt={name} className="max-w-full max-h-[70vh] mx-auto rounded-lg" />
+        {imageUrl && file && (
+          <img
+            src={imageUrl}
+            alt={displayName(file)}
+            className="mx-auto max-h-[70vh] max-w-full rounded-lg"
+          />
         )}
       </Modal.Body>
     </Modal>
   )
 }
 
-// ============================================================================
-// Main Page
-// ============================================================================
-
 export default function FileManagerPage({ className }: { className?: string }) {
-  const { upload, downloadFile, deleteFile, list, getUrl, isUploading } = useR2Files()
+  const { upload, downloadFile, readFile, deleteFile, list, isUploading } = useR2Files()
+  const toast = useToast()
   const [files, setFiles] = useState<R2FileInfo[]>([])
   const [loading, setLoading] = useState(true)
+  const [loadError, setLoadError] = useState<string | null>(null)
   const [previewFile, setPreviewFile] = useState<R2FileInfo | null>(null)
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<R2FileInfo | null>(null)
+  const [deleting, setDeleting] = useState(false)
+  const previewUrlRef = useRef<string | null>(null)
 
+  // `list` throws on failure; rendered as an error state rather than the
+  // empty grid an unreachable or unauthorized account is not.
   const refreshFiles = useCallback(async () => {
-    const result = await list()
-    setFiles(result)
-    setLoading(false)
+    try {
+      setFiles(await list())
+      setLoadError(null)
+    } catch (error) {
+      setLoadError(error instanceof Error ? error.message : 'Please try again.')
+    } finally {
+      setLoading(false)
+    }
   }, [list])
 
   useEffect(() => {
-    refreshFiles()
+    void refreshFiles()
   }, [refreshFiles])
 
+  useEffect(
+    () => () => {
+      if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current)
+    },
+    [],
+  )
+
+  const closePreview = () => {
+    if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current)
+    previewUrlRef.current = null
+    setPreviewUrl(null)
+    setPreviewFile(null)
+  }
+
   const handleUpload = async (fileList: File[]) => {
+    let uploaded = 0
     for (const file of fileList) {
-      await upload(file)
+      const result = await upload(file)
+      if (!result.success) {
+        toast.error(`Could not upload "${file.name}"`, result.error ?? 'Please try again.')
+        continue
+      }
+      uploaded += 1
+    }
+    if (uploaded > 0) {
+      toast.success(
+        uploaded === 1 ? 'File uploaded' : `${uploaded} files uploaded`,
+        'Your file list is up to date.',
+      )
+      await refreshFiles()
     }
-    await refreshFiles()
   }
 
   const handleDownload = async (file: R2FileInfo) => {
-    await downloadFile(file)
+    const result = await downloadFile(file)
+    if (!result.success) {
+      toast.error(`Could not download "${displayName(file)}"`, result.error ?? 'Please try again.')
+    }
   }
 
-  const handleDelete = async (file: R2FileInfo) => {
-    const name = file.originalName ?? file.key.split('/').pop() ?? 'this file'
-    if (!confirm(`Delete "${name}"?`)) return
-    await deleteFile(file)
-    await refreshFiles()
+  const handleDelete = async () => {
+    if (!deleteTarget || deleting) return
+    setDeleting(true)
+    try {
+      const result = await deleteFile(deleteTarget)
+      if (!result.success) {
+        toast.error(
+          `Could not delete "${displayName(deleteTarget)}"`,
+          result.error ?? 'Please try again.',
+        )
+        return
+      }
+      toast.success('File deleted', `"${displayName(deleteTarget)}" was deleted.`)
+      setDeleteTarget(null)
+      await refreshFiles()
+    } finally {
+      setDeleting(false)
+    }
   }
 
-  const handlePreview = (file: R2FileInfo) => {
-    setPreviewFile(file)
+  const handlePreview = async (file: R2FileInfo) => {
+    try {
+      const response = await readFile(file)
+      const url = URL.createObjectURL(await response.blob())
+      if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current)
+      previewUrlRef.current = url
+      setPreviewUrl(url)
+      setPreviewFile(file)
+    } catch (error) {
+      toast.error(
+        `Could not preview "${displayName(file)}"`,
+        error instanceof Error ? error.message : 'Please try again.',
+      )
+    }
   }
 
   return (
-    <div className={`h-full bg-background overflow-y-auto ${className ?? ''}`}>
-      {/* Header */}
-      <div className="bg-card/60 backdrop-blur-md border-b border-border sticky top-0 z-10">
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+    <div className={`h-full overflow-y-auto bg-background ${className ?? ''}`}>
+      <div className="sticky top-0 z-10 border-b border-border bg-card/60 backdrop-blur-md">
+        <div className="mx-auto max-w-4xl px-4 py-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between">
             <div>
               <h1 className="text-2xl font-bold text-foreground">Files</h1>
-              <p className="text-muted-foreground mt-1">
+              <p className="mt-1 text-muted-foreground">
                 {files.length} {files.length === 1 ? 'file' : 'files'} stored
               </p>
             </div>
             {files.length > 0 && (
               <Badge variant="secondary">
-                {formatBytes(files.reduce((sum, f) => sum + f.size, 0))} used
+                {formatBytes(files.reduce((sum, file) => sum + file.size, 0))} used
               </Badge>
             )}
           </div>
         </div>
       </div>
 
-      {/* Content */}
-      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
-        {/* Upload zone */}
-        <DropZone onFiles={handleUpload} isUploading={isUploading} />
+      <div className="mx-auto max-w-4xl space-y-6 px-4 py-8 sm:px-6 lg:px-8">
+        <DropZone onFiles={(nextFiles) => void handleUpload(nextFiles)} isUploading={isUploading} />
 
-        {/* File list */}
         {loading ? (
-          <div className="flex items-center justify-center py-16">
-            <div className="w-8 h-8 border-2 border-primary/20 border-t-primary rounded-full animate-spin" />
+          <div className="grid gap-3 sm:grid-cols-2" aria-label="Loading files" aria-busy="true">
+            <div className="h-36 animate-pulse rounded-xl border border-border bg-muted/40" />
+            <div className="h-36 animate-pulse rounded-xl border border-border bg-muted/40" />
           </div>
+        ) : loadError ? (
+          <EmptyState
+            title="Could not load files"
+            description={loadError}
+            icon={<TriangleAlert aria-hidden="true" />}
+            action={{
+              label: 'Retry',
+              onClick: () => {
+                setLoading(true)
+                void refreshFiles()
+              },
+            }}
+          />
         ) : files.length === 0 ? (
           <EmptyState
             title="No files yet"
-            description="Upload your first file using the drop zone above"
-            icon={
-              <svg className="w-12 h-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
-              </svg>
-            }
+            description="Upload your first file using the drop zone above."
+            icon={<FolderOpen aria-hidden="true" />}
           />
         ) : (
           <div className="grid gap-3 sm:grid-cols-2">
@@ -310,20 +337,26 @@ export default function FileManagerPage({ className }: { className?: string }) {
               <FileCard
                 key={file.key}
                 file={file}
-                onDownload={() => handleDownload(file)}
-                onDelete={() => handleDelete(file)}
-                onPreview={() => handlePreview(file)}
+                onDownload={() => void handleDownload(file)}
+                onDelete={() => setDeleteTarget(file)}
+                onPreview={() => void handlePreview(file)}
               />
             ))}
           </div>
         )}
       </div>
 
-      {/* Image preview modal */}
-      <PreviewModal
-        file={previewFile}
-        imageUrl={previewFile ? getUrl(previewFile) : null}
-        onClose={() => setPreviewFile(null)}
+      <PreviewModal file={previewFile} imageUrl={previewUrl} onClose={closePreview} />
+      <ConfirmModal
+        open={deleteTarget !== null}
+        onClose={() => {
+          if (!deleting) setDeleteTarget(null)
+        }}
+        onConfirm={() => void handleDelete()}
+        title={deleteTarget ? `Delete "${displayName(deleteTarget)}"?` : 'Delete file?'}
+        description="This cannot be undone."
+        confirmText="Delete"
+        loading={deleting}
       />
     </div>
   )