deepspace 0.7.0 → 0.8.1

package/features/file-attachments/feature.json

@@ -3,12 +3,12 @@
   "name": "File Attachments",
   "category": "data",
   "description": "File upload with inline previews for images, videos, audio, PDF, code, CSV, DOCX, XLSX",
-  "details": "Adds a file attachments collection backed by R2 storage with useR2Files. Includes two hooks: useMimeTypeDetection (magic-byte MIME detection + 11 file categories) and useFilePreview (centralized preview with dynamic imports for PDF.js, CodeMirror, PapaParse, docx-preview, ExcelJS). Members can upload and manage their own files, admins can manage all.",
+  "details": "Adds a file attachments collection backed by R2 storage with useR2Files. MIME detection and preview loading live in focused hooks; one preview component owns thumbnail and full rendering for PDF.js, CodeMirror, CSV, DOCX, XLSX, audio, video, and images. Members can upload and manage their own files, admins can manage all.",
   "files": [
     { "src": "src/attachments-schema.ts", "dest": "src/schemas/attachments-schema.ts" },
-    { "src": "src/attachments-constants.ts", "dest": "src/constants/attachments-constants.ts" },
     { "src": "src/useMimeTypeDetection.ts", "dest": "src/hooks/useMimeTypeDetection.ts" },
     { "src": "src/useFilePreview.ts", "dest": "src/hooks/useFilePreview.ts" },
+    { "src": "src/AttachmentPreview.tsx", "dest": "src/components/AttachmentPreview.tsx" },
     { "src": "src/AttachmentsPage.tsx", "dest": "src/pages/attachments.tsx" }
   ],
   "schema": {

package/features/file-attachments/src/AttachmentPreview.tsx

@@ -0,0 +1,428 @@
+import { useEffect, useRef, useState } from 'react'
+
+import { useFilePreview, type XlsxData } from '../hooks/useFilePreview'
+import type { FileCategory } from '../hooks/useMimeTypeDetection'
+
+const ICON_PATHS: Record<FileCategory, string> = {
+  image:
+    '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',
+  video:
+    'M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z',
+  audio:
+    'M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2z',
+  pdf: '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',
+  document:
+    'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
+  spreadsheet:
+    'M3 10h18M3 14h18M9 4v16M15 4v16M3 6a2 2 0 012-2h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6z',
+  presentation:
+    'M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z',
+  archive: 'M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4',
+  code: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4',
+  text: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
+  other:
+    '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',
+}
+
+function FileIcon({ category }: { category: FileCategory }) {
+  return (
+    <div
+      className="flex h-48 w-full items-center justify-center rounded-lg bg-muted/20"
+      role="img"
+      aria-label={`${category} file`}
+    >
+      <svg
+        className="h-12 w-12 text-muted-foreground/50"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d={ICON_PATHS[category]}
+        />
+      </svg>
+    </div>
+  )
+}
+
+export function AttachmentThumbnail({
+  url,
+  fileName,
+  category,
+}: {
+  url: string | null
+  fileName: string
+  category: FileCategory
+}) {
+  if (!url) return <FileIcon category={category} />
+
+  switch (category) {
+    case 'image':
+      return (
+        <img
+          src={url}
+          alt={fileName}
+          className="h-48 w-full rounded-t-xl object-cover"
+          loading="lazy"
+        />
+      )
+    case 'video':
+      return (
+        <video
+          src={url}
+          aria-label={`${fileName} preview`}
+          className="h-48 w-full rounded-t-xl bg-black"
+          preload="metadata"
+          muted
+        />
+      )
+    case 'audio':
+      return (
+        <div className="flex h-48 w-full flex-col items-center justify-center gap-2 rounded-t-xl bg-muted/20 px-4">
+          <svg
+            className="h-8 w-8 text-muted-foreground/50"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1.5}
+              d={ICON_PATHS.audio}
+            />
+          </svg>
+          <audio
+            src={url}
+            aria-label={fileName}
+            controls
+            className="w-full"
+            preload="metadata"
+            onClick={(event) => event.stopPropagation()}
+          />
+        </div>
+      )
+    default:
+      return <FileIcon category={category} />
+  }
+}
+
+function TabularPreview({
+  headers,
+  rows,
+  truncated,
+}: {
+  headers: string[]
+  rows: string[][]
+  truncated: boolean
+}) {
+  return (
+    <div className="w-full overflow-auto rounded-lg border border-border">
+      <table className="w-full border-collapse font-mono text-sm">
+        <thead>
+          <tr>
+            <th className="sticky top-0 border-b-2 border-border bg-muted/50 px-3 py-2 text-right text-xs text-muted-foreground">
+              #
+            </th>
+            {headers.map((header, index) => (
+              <th
+                key={`${index}-${header}`}
+                className="sticky top-0 whitespace-nowrap border-b-2 border-border bg-muted/50 px-3 py-2 text-left font-semibold text-foreground"
+              >
+                {header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, rowIndex) => (
+            <tr key={rowIndex} className={rowIndex % 2 === 0 ? '' : 'bg-muted/20'}>
+              <td className="border-b border-border/50 px-3 py-1.5 text-right text-xs text-muted-foreground">
+                {rowIndex + 1}
+              </td>
+              {headers.map((_, columnIndex) => (
+                <td
+                  key={columnIndex}
+                  className="max-w-[300px] truncate whitespace-nowrap border-b border-border/50 px-3 py-1.5 text-foreground"
+                  title={row[columnIndex] ?? ''}
+                >
+                  {row[columnIndex] ?? ''}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {truncated && (
+        <div className="border-t border-border bg-muted/30 px-4 py-2 text-center text-xs text-muted-foreground">
+          Showing first 500 rows. Download the file to see all data.
+        </div>
+      )}
+    </div>
+  )
+}
+
+function DocxPreview({
+  data,
+  module: docxModule,
+}: {
+  data: ArrayBuffer
+  module: typeof import('docx-preview')
+}) {
+  const styleRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const [status, setStatus] = useState<'loading' | 'ready' | 'error'>('loading')
+
+  useEffect(() => {
+    const content = contentRef.current
+    const styles = styleRef.current
+    if (!content || !styles) return
+
+    let active = true
+    setStatus('loading')
+    content.replaceChildren()
+    styles.replaceChildren()
+
+    void docxModule
+      .renderAsync(data, content, styles, {
+        className: 'docx-preview-page',
+        inWrapper: true,
+        ignoreWidth: true,
+        ignoreHeight: false,
+        ignoreFonts: false,
+        breakPages: true,
+        renderHeaders: true,
+        renderFooters: true,
+        renderFootnotes: true,
+        renderEndnotes: true,
+        useBase64URL: true,
+      })
+      .then(
+        () => {
+          if (active) setStatus('ready')
+        },
+        () => {
+          if (active) setStatus('error')
+        },
+      )
+
+    return () => {
+      active = false
+      content.replaceChildren()
+      styles.replaceChildren()
+    }
+  }, [data, docxModule])
+
+  return (
+    <div
+      className="min-h-[400px] w-full overflow-auto rounded-lg"
+      style={{ background: '#e8e8e8' }}
+    >
+      {status === 'loading' && (
+        <div className="p-8 text-center text-muted-foreground">Loading document...</div>
+      )}
+      {status === 'error' && (
+        <div className="p-8 text-center text-muted-foreground">Failed to render document.</div>
+      )}
+      <div ref={styleRef} />
+      <div ref={contentRef} />
+      <style>{`
+        .docx-preview-page-wrapper {
+          background: #e8e8e8;
+          padding: 16px 0;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 16px;
+        }
+        .docx-preview-page-wrapper > section.docx-preview-page {
+          background: #ffffff !important;
+          color: #1a1a1a !important;
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
+          border-radius: 4px;
+          overflow: hidden;
+          width: 100% !important;
+          padding: 24px !important;
+          box-sizing: border-box !important;
+        }
+        .docx-preview-page-wrapper > section.docx-preview-page * {
+          color: inherit;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+function XlsxPreview({ data }: { data: XlsxData }) {
+  const [activeSheet, setActiveSheet] = useState(0)
+
+  useEffect(() => {
+    setActiveSheet(0)
+  }, [data])
+
+  const sheet = data.sheets[activeSheet] ?? data.sheets[0]
+  if (!sheet) {
+    return <div className="p-8 text-center text-muted-foreground">This workbook has no sheets.</div>
+  }
+
+  return (
+    <div className="w-full">
+      {data.sheets.length > 1 && (
+        <div className="flex gap-1 overflow-x-auto border-b border-border bg-muted/30 px-2 py-1">
+          {data.sheets.map((candidate, index) => (
+            <button
+              key={candidate.name}
+              type="button"
+              onClick={() => setActiveSheet(index)}
+              className={`whitespace-nowrap rounded px-3 py-1 text-xs font-medium transition-colors ${
+                index === activeSheet
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground hover:bg-muted'
+              }`}
+            >
+              {candidate.name}
+            </button>
+          ))}
+        </div>
+      )}
+      <TabularPreview headers={sheet.headers} rows={sheet.rows} truncated={sheet.truncated} />
+    </div>
+  )
+}
+
+function PdfPage({ canvas }: { canvas: HTMLCanvasElement }) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+    canvas.style.width = '100%'
+    canvas.style.height = 'auto'
+    canvas.style.display = 'block'
+    container.replaceChildren(canvas)
+    return () => {
+      if (canvas.parentNode === container) canvas.remove()
+    }
+  }, [canvas])
+
+  return (
+    <div
+      ref={containerRef}
+      className="w-full flex-shrink-0 overflow-hidden rounded-lg border border-border bg-white"
+      style={{ aspectRatio: `${canvas.width / canvas.height}` }}
+    />
+  )
+}
+
+export function AttachmentPreview({
+  url,
+  fileName,
+  mimeType,
+}: {
+  url: string
+  fileName: string
+  mimeType: string
+}) {
+  const preview = useFilePreview({ url, fileName, mimeType })
+
+  if (preview.isLoading) {
+    return (
+      <div className="flex items-center justify-center py-16">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary/20 border-t-primary" />
+      </div>
+    )
+  }
+
+  if (preview.error) {
+    return (
+      <div className="p-8 text-center text-muted-foreground">
+        Failed to load preview: {preview.error}
+      </div>
+    )
+  }
+
+  if (preview.category === 'image') {
+    return <img src={url} alt={fileName} className="w-full rounded-lg" />
+  }
+
+  if (preview.category === 'video') {
+    return <video src={url} aria-label={fileName} controls className="w-full rounded-lg bg-black" />
+  }
+
+  if (preview.category === 'audio') {
+    return (
+      <div className="flex flex-col items-center gap-4 p-8">
+        <FileIcon category="audio" />
+        <audio src={url} aria-label={fileName} controls className="w-full" />
+      </div>
+    )
+  }
+
+  if (preview.category === 'pdf' && preview.pdfPages) {
+    return (
+      <div className="flex max-h-[80vh] flex-col gap-4 overflow-auto">
+        {preview.pdfPages.map((canvas, index) => (
+          <PdfPage key={index} canvas={canvas} />
+        ))}
+      </div>
+    )
+  }
+
+  if (
+    (preview.category === 'code' || preview.category === 'text') &&
+    preview.textContent !== null
+  ) {
+    if (preview.codeEditorKit) {
+      const { Component, langExtensions, darkTheme } = preview.codeEditorKit
+      return (
+        <div className="w-full overflow-hidden rounded-lg border border-border">
+          <Component
+            value={preview.textContent}
+            extensions={[...langExtensions, darkTheme]}
+            readOnly
+            editable={false}
+            theme="dark"
+            height="400px"
+            basicSetup={{ lineNumbers: true, foldGutter: true, highlightActiveLine: false }}
+            style={{ fontSize: '13px' }}
+          />
+        </div>
+      )
+    }
+
+    return (
+      <pre className="max-h-[400px] w-full overflow-auto whitespace-pre-wrap rounded-lg border border-border bg-muted/20 p-4 text-sm text-foreground">
+        {preview.textContent}
+      </pre>
+    )
+  }
+
+  if (preview.csvData) {
+    return <TabularPreview {...preview.csvData} />
+  }
+
+  if (preview.category === 'document' && preview.docxData && preview.docxModule) {
+    return <DocxPreview data={preview.docxData} module={preview.docxModule} />
+  }
+
+  if (preview.xlsxData) {
+    return <XlsxPreview data={preview.xlsxData} />
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-4 p-12 text-center">
+      <FileIcon category={preview.category} />
+      <div className="space-y-1">
+        <p className="text-sm font-medium text-foreground">No preview available</p>
+        <p className="text-xs text-muted-foreground">
+          Preview is not supported for this file type. You can download the file to view it.
+        </p>
+      </div>
+    </div>
+  )
+}