your-ai-workflow-firebase-os 1.2.20 → 1.2.21

package/src/templates/PrivatePageTemplate.tsx

@@ -1,13 +1,14 @@
 import React, { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Bot, Plus, X, Loader2, Trash2, FileText, Download, Check, Edit2, Info } from 'lucide-react';
+import { Bot, Plus, X, Loader2, Trash2, FileText, Download, Check, Edit2, Info, Link , Image , Video , Archive , Code , FileIcon } from 'lucide-react';
 import * as LucideIcons from 'lucide-react';
 import { DashboardNav } from '../components/DashboardNav';
 import { Button } from '../components/Button';
 import { useAuth } from '../lib/AuthContext';
 import { useTheme } from '../lib/ThemeContext';
 import { db, storage } from '../lib/firebase';
-import { collection, addDoc, getDocs, query, where, serverTimestamp, deleteDoc, updateDoc, doc, limit } from 'firebase/firestore';
+import { collection, addDoc, getDocs, query, where, serverTimestamp, deleteDoc, updateDoc, doc, limit, deleteField } from 'firebase/firestore';
 import { ref, uploadBytes, getDownloadURL, deleteObject } from 'firebase/storage';
 import { ConfirmModal } from '../components/ConfirmModal';
 
@@ -38,10 +39,22 @@ export function PrivatePageTemplate({ config }: { config: any }) {
   const [copied, setCopied] = useState(false);
   const [uploading, setUploading] = useState(false);
   const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+  const [_previewFile, _setPreviewFile] = useState<any | null>(null);
+  const setPreviewFile = (f: any) => {
+    _setPreviewFile(f);
+    if (f) {
+      const t = f.fileType || '';
+      const canPreview = t.startsWith('image/') || t.startsWith('video/') || t === 'application/pdf';
+      setPreviewLoading(canPreview);
+    }
+  };
+  const previewFile = _previewFile;
+  const [previewLoading, setPreviewLoading] = useState(true);
   const [isDeleting, setIsDeleting] = useState(false);
   const [editingId, setEditingId] = useState<string | null>(null);
   const [editName, setEditName] = useState('');
   const [editNote, setEditNote] = useState('');
+  const [editFields, setEditFields] = useState<{key: string; value: string}[]>([]);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [availableForms, setAvailableForms] = useState<string[]>([]);
 
@@ -235,31 +248,152 @@ export function PrivatePageTemplate({ config }: { config: any }) {
   };
 
   // ── Edit record (inline) ──────────────────────────────────────────────────
+  // Inline rename state for file records (Drive-style)
+  const [renamingFileId, setRenamingFileId] = useState<string | null>(null);
+  const [renameFileName, setRenameFileName] = useState('');
+  const [isRenamingFile, setIsRenamingFile] = useState(false);
+  const [copiedLink, setCopiedLink] = useState<string | null>(null);
+  const originalFieldKeysRef = useRef<string[]>([]);
+
   const startEdit = (record: SavedRecord) => {
+    // For file records, use inline rename (Drive-style)
+    if (record.recordType === 'file') {
+      setRenamingFileId(record.id);
+      setRenameFileName(record.name);
+      return;
+    }
     setEditingId(record.id);
     setEditName(record.name);
     setEditNote(record.note || '');
+    // Load any extra custom fields (anything beyond the reserved keys)
+    const reserved = ['name','note','uid','recordType','fileName','fileType','fileSize','downloadURL','createdAt'];
+    const extras = Object.entries(record as any)
+      .filter(([k]) => !reserved.includes(k) && k !== 'id')
+      .map(([key, value]) => ({ key, value: String(value ?? '') }));
+    setEditFields(extras);
+    originalFieldKeysRef.current = extras.map(f => f.key);
   };
 
-  const handleSaveEdit = async () => {
-    if (!editingId || !editName.trim()) { setEditingId(null); return; }
-    const original = records.find(r => r.id === editingId);
-    if (original && original.name === editName.trim() && (original.note || '') === editNote.trim()) {
-      setEditingId(null); return; // no changes
+  const handleRenameFile = async () => {
+    if (!renamingFileId || !renameFileName.trim()) { setRenamingFileId(null); return; }
+    const original = records.find(r => r.id === renamingFileId);
+    if (original && original.name === renameFileName.trim()) { setRenamingFileId(null); return; }
+    setIsRenamingFile(true);
+    try {
+      await updateDoc(doc(db, recordsCollection, renamingFileId), {
+        name: renameFileName.trim(),
+      });
+      setRecords(prev => prev.map(r =>
+        r.id === renamingFileId ? { ...r, name: renameFileName.trim() } : r
+      ));
+    } catch (e) {
+      console.error('Error renaming file:', e);
     }
+    setIsRenamingFile(false);
+    setRenamingFileId(null);
+  };
+
+  const handleSaveEdit = async () => {
+    await handleSilentSave();
+    setEditingId(null);
+  };
+
+  // Silent save: persist to Firestore without closing modal, show tiny loader
+  const handleSilentSave = async () => {
+    if (!editingId || !editName.trim()) return;
+    setSaving(true);
+    const extraData: Record<string, any> = {};
+    editFields.forEach(({ key, value }) => {
+      if (key.trim()) extraData[key.trim()] = value;
+    });
+    // Detect removed fields and mark them for deletion
+    const currentKeys = editFields.map(f => f.key.trim()).filter(Boolean);
+    const removedKeys = originalFieldKeysRef.current.filter(k => !currentKeys.includes(k));
+    removedKeys.forEach(k => { extraData[k] = deleteField(); });
     try {
       await updateDoc(doc(db, recordsCollection, editingId), {
         name: editName.trim(),
         note: editNote.trim(),
+        ...extraData,
       });
-      setRecords(prev => prev.map(r => r.id === editingId ? { ...r, name: editName.trim(), note: editNote.trim() } : r));
+      // Update local records: remove deleted keys, add new ones
+      setRecords(prev => prev.map(r => {
+        if (r.id !== editingId) return r;
+        const updated = { ...r, name: editName.trim(), note: editNote.trim() };
+        removedKeys.forEach(k => { delete (updated as any)[k]; });
+        editFields.forEach(({ key, value }) => { if (key.trim()) (updated as any)[key.trim()] = value; });
+        return updated;
+      }));
+      originalFieldKeysRef.current = currentKeys;
     } catch (e) {
-      console.error('Error updating record:', e);
+      console.error('Error saving record:', e);
     }
-    setEditingId(null);
+    setSaving(false);
   };
 
   // ── Utils ─────────────────────────────────────────────────────────────────
+
+  // ── File type icon renderer ───────────────────────────────────────────────
+  const renderFileIcon = (type?: string, url?: string) => {
+    if (!type) return <FileText className="w-4 h-4" />;
+    if (type.startsWith('image/')) {
+      if (url) return <div className="w-9 h-9 rounded-xl bg-cover bg-center shrink-0" style={{ backgroundImage: `url(${url})` }} />;
+      return <Image className="w-4 h-4" />;
+    }
+    if (type.startsWith('video/') || type.startsWith('audio/')) return <Video className="w-4 h-4" />;
+    if (type.includes('pdf') || type.includes('word') || type.includes('text')) return <FileText className="w-4 h-4" />;
+    if (type.includes('zip') || type.includes('rar') || type.includes('archive')) return <Archive className="w-4 h-4" />;
+    if (type.includes('html') || type.includes('csv') || type.includes('json')) return <Code className="w-4 h-4" />;
+    return <FileIcon className="w-4 h-4" />;
+  };
+
+  const renderFileIconBg = (type?: string) => {
+    if (!type) return 'bg-foreground/5 text-foreground/40';
+    if (type.startsWith('image/')) return 'bg-emerald-500/10 text-emerald-500';
+    if (type.startsWith('video/') || type.startsWith('audio/')) return 'bg-purple-500/10 text-purple-500';
+    if (type.includes('pdf') || type.includes('word') || type.includes('text')) return 'bg-blue-500/10 text-blue-500';
+    if (type.includes('zip') || type.includes('rar') || type.includes('archive')) return 'bg-yellow-500/10 text-yellow-500';
+    if (type.includes('html') || type.includes('csv') || type.includes('json')) return 'bg-emerald-500/10 text-emerald-500';
+    return 'bg-foreground/5 text-foreground/40';
+  };
+
+  const formatExtension = (type?: string) => {
+    if (!type) return 'FILE';
+    const mimeMap: Record<string, string> = {
+      'application/pdf': 'PDF',
+      'application/zip': 'ZIP',
+      'application/x-zip-compressed': 'ZIP',
+      'application/x-rar-compressed': 'RAR',
+      'application/x-7z-compressed': '7Z',
+      'application/json': 'JSON',
+      'application/xml': 'XML',
+      'application/javascript': 'JS',
+      'application/typescript': 'TS',
+      'application/msword': 'DOC',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'DOCX',
+      'application/vnd.ms-excel': 'XLS',
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'XLSX',
+      'application/vnd.ms-powerpoint': 'PPT',
+      'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'PPTX',
+      'application/rtf': 'RTF',
+      'application/x-tar': 'TAR',
+      'application/gzip': 'GZ',
+      'text/plain': 'TXT',
+      'text/html': 'HTML',
+      'text/css': 'CSS',
+      'text/csv': 'CSV',
+      'text/markdown': 'MD',
+    };
+    const lower = type.toLowerCase();
+    if (mimeMap[lower]) return mimeMap[lower];
+    // image/png → PNG, video/mp4 → MP4, audio/mpeg → MPEG
+    const parts = lower.split('/');
+    const sub = parts[parts.length - 1];
+    // Strip x- prefix and vnd. noise
+    const clean = sub.replace(/^x-/, '').replace(/^vnd\..*\./, '');
+    return clean.toUpperCase().slice(0, 10);
+  };
+
   const formatSize = (bytes: number) => {
     if (!bytes) return '0 B';
     const k = 1024;
@@ -443,75 +577,79 @@ export function PrivatePageTemplate({ config }: { config: any }) {
                         animate={{ opacity: 1, y: 0 }}
                         exit={{ opacity: 0, scale: 0.95 }}
                         transition={{ delay: i * 0.03, duration: 0.25 }}
-                        className={`group flex flex-col bg-background border rounded-2xl p-5 transition-all relative ${isEditing ? 'border-accent/40 shadow-lg ring-1 ring-accent/20' : 'border-[var(--panel-border)] hover:border-accent/30 hover:shadow-lg'
+                        onClick={() => startEdit(record)}
+                        className={`group flex flex-col bg-background border rounded-2xl p-5 transition-all relative cursor-pointer ${isEditing ? 'border-accent/40 shadow-lg ring-1 ring-accent/20' : 'border-[var(--panel-border)] hover:border-accent/30 hover:shadow-lg'
                           }`}
                       >
                         {/* Top-right action icons — download + edit + delete */}
-                        {!isEditing && (
-                          <div className="absolute top-3 right-3 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-all">
+                        {true && (
+                          <div className="absolute top-3 right-3 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-all z-10">
                             {record.recordType === 'file' && record.downloadURL && (
-                              <a href={record.downloadURL} target="_blank" rel="noreferrer" className="p-1.5 rounded-lg text-foreground/25 hover:text-blue-500 hover:bg-blue-500/10 transition-all" title="Download">
-                                <Download className="w-3.5 h-3.5" />
-                              </a>
+                              <>
+                                <button onClick={(e) => { e.stopPropagation(); navigator.clipboard.writeText(record.downloadURL!); setCopiedLink(record.id); setTimeout(() => setCopiedLink(null), 2000); }} className="p-1.5 rounded-lg text-foreground/25 hover:text-emerald-500 hover:bg-emerald-500/10 transition-all cursor-pointer" title="Copy Link">
+                                  {copiedLink === record.id ? <Check className="w-3.5 h-3.5 text-emerald-500" /> : <Link className="w-3.5 h-3.5" />}
+                                </button>
+                                <a href={record.downloadURL} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} className="p-1.5 rounded-lg text-foreground/25 hover:text-blue-500 hover:bg-blue-500/10 transition-all" title="Download">
+                                  <Download className="w-3.5 h-3.5" />
+                                </a>
+                              </>
                             )}
-                            <button onClick={() => startEdit(record)} className="p-1.5 rounded-lg text-foreground/25 hover:text-accent hover:bg-accent/10 transition-all cursor-pointer" title="Edit">
+                            <button onClick={(e) => { e.stopPropagation(); startEdit(record); }} className="p-1.5 rounded-lg text-foreground/25 hover:text-accent hover:bg-accent/10 transition-all cursor-pointer" title="Edit">
                               <Edit2 className="w-3.5 h-3.5" />
                             </button>
-                            <button onClick={() => setDeleteConfirm(record.id)} className="p-1.5 rounded-lg text-foreground/25 hover:text-red-500 hover:bg-red-500/10 transition-all cursor-pointer" title="Delete">
+                            <button onClick={(e) => { e.stopPropagation(); setDeleteConfirm(record.id); }} className="p-1.5 rounded-lg text-foreground/25 hover:text-red-500 hover:bg-red-500/10 transition-all cursor-pointer" title="Delete">
                               <Trash2 className="w-3.5 h-3.5" />
                             </button>
                           </div>
                         )}
 
                         <div className="flex items-start gap-3 mb-3">
-                          <div className={`w-9 h-9 rounded-xl flex items-center justify-center shrink-0 ${record.recordType === 'file'
-                              ? 'bg-blue-500/10 text-blue-500'
-                              : 'bg-accent/10 text-accent'
-                            }`}>
-                            {record.recordType === 'file' ? (
-                              <FileText className="w-4 h-4" />
-                            ) : (
-                              <div className="w-2 h-2 rounded-full bg-current" />
-                            )}
+                          <div
+                            onClick={(e) => { e.stopPropagation(); if (record.recordType === 'file') setPreviewFile(record); }}
+                            className={`w-9 h-9 rounded-xl flex items-center justify-center shrink-0 ${record.recordType === 'file' ? `cursor-pointer hover:scale-105 transition-transform ${renderFileIconBg(record.fileType)}` : 'bg-accent/10 text-accent'}`}
+                          >
+                            {record.recordType === 'file' ? renderFileIcon(record.fileType, record.downloadURL) : <div className="w-2 h-2 rounded-full bg-current" />}
                           </div>
-                          <div className="flex flex-col min-w-0 flex-1">
-                            {isEditing ? (
-                              <input
-                                autoFocus
-                                value={editName}
-                                onChange={e => setEditName(e.target.value)}
-                                onBlur={handleSaveEdit}
-                                onKeyDown={e => { if (e.key === 'Enter') handleSaveEdit(); if (e.key === 'Escape') setEditingId(null); }}
-                                className="text-[14px] font-bold text-foreground bg-transparent border-b border-accent/30 outline-none pb-0.5 w-full"
-                              />
-                            ) : (
-                              <span className="text-[14px] font-bold text-foreground truncate pr-12">
-                                {record.name}
-                              </span>
-                            )}
+                          <div className="flex flex-col min-w-0 flex-1 relative">
+                          {renamingFileId === record.id ? (
+                            <input
+                              autoFocus
+                              type="text"
+                              value={renameFileName}
+                              onChange={e => setRenameFileName(e.target.value)}
+                              onBlur={() => handleRenameFile()}
+                              onKeyDown={e => { if (e.key === 'Enter') handleRenameFile(); if (e.key === 'Escape') setRenamingFileId(null); }}
+                              onClick={e => e.stopPropagation()}
+                              className="no-glow text-[14px] font-bold text-foreground bg-transparent border-b border-accent/30 outline-none pb-0.5 w-full pr-12"
+                            />
+                          ) : (
+                            <span className="text-[14px] font-bold text-foreground truncate pr-12">
+                              {record.name}
+                            </span>
+                          )}
+                            {record.recordType === 'file' && <div className="absolute inset-0 z-0 cursor-pointer" onClick={() => setPreviewFile(record)} />}
                             <span className="text-[11px] text-foreground/35 font-bold uppercase tracking-wider mt-0.5">
                               {formatDate(record.createdAt)}
                             </span>
                           </div>
                         </div>
 
-                        {isEditing ? (
-                          <textarea
-                            value={editNote}
-                            onChange={e => setEditNote(e.target.value)}
-                            onBlur={handleSaveEdit}
-                            onKeyDown={e => { if (e.key === 'Escape') setEditingId(null); }}
-                            placeholder="Note (optional)"
-                            rows={2}
-                            className="text-[13px] text-foreground/70 font-medium bg-transparent border-b border-accent/20 outline-none resize-none w-full mb-1 placeholder:text-foreground/30"
-                          />
-                        ) : (
-                          record.note && (
-                            <p className="text-[13px] text-foreground/55 font-medium leading-relaxed line-clamp-3 mb-1">
-                              {record.note}
-                            </p>
-                          )
+                        {record.note && (
+                          <p className="text-[13px] text-foreground/55 font-medium leading-relaxed line-clamp-3 mb-1">
+                            {record.note}
+                          </p>
                         )}
+                        {/* Extra custom fields display */}
+                        {Object.entries(record as any)
+                          .filter(([k]) => !['name','note','uid','recordType','fileName','fileType','fileSize','downloadURL','createdAt','creatorName','creatorEmail','creatorAvatar'].includes(k) && k !== 'id')
+                          .slice(0, 3)
+                          .map(([k, v]) => (
+                            <div key={k} className="flex items-center gap-1.5 mt-1">
+                              <span className="text-[10px] font-bold text-foreground/30 uppercase tracking-wider shrink-0">{k}:</span>
+                              <span className="text-[11px] font-semibold text-foreground/60 truncate">{String(v)}</span>
+                            </div>
+                          ))
+                        }
 
 
                       </motion.div>
@@ -600,13 +738,256 @@ export function PrivatePageTemplate({ config }: { config: any }) {
         )}
       </AnimatePresence>
 
+      {/* ── File Preview Modal (Drive-style) ───────────────────────────────────── */}
+      {typeof window !== 'undefined' && createPortal(
+        <AnimatePresence>
+          {previewFile && (
+            <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 md:p-12">
+              <motion.div onClick={() => setPreviewFile(null)} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="absolute inset-0 bg-background/95 backdrop-blur-xl cursor-pointer" />
+              <button onClick={() => setPreviewFile(null)} className="absolute top-6 right-6 z-[160] w-12 h-12 bg-foreground/10 hover:bg-foreground/20 text-foreground rounded-full flex items-center justify-center backdrop-blur-md transition-all cursor-pointer outline-none">
+                <X className="w-5 h-5" />
+              </button>
+              <motion.div
+                initial={{ opacity: 0, scale: 0.95, y: 10 }}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                exit={{ opacity: 0, scale: 0.95, y: 10 }}
+                className="relative z-10 w-full max-w-6xl max-h-[85vh] flex flex-col pointer-events-auto shadow-2xl rounded-3xl overflow-hidden glass-panel border border-[var(--panel-border)]"
+              >
+                {/* File Header */}
+                <div className="flex items-center justify-between p-6 bg-background/80 backdrop-blur-md border-b border-[var(--panel-border)] shrink-0 shadow-sm z-20">
+                  <div className="flex flex-col min-w-0 pr-4">
+                    <span className="text-xl font-extrabold text-foreground truncate">{previewFile.fileName || previewFile.name}</span>
+                    <span className="text-[12px] text-foreground/70 font-bold uppercase tracking-wider mt-1">
+                      {formatExtension(previewFile.fileType)} • {formatSize(previewFile.fileSize || 0)}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2 shrink-0">
+                    <button
+                      onClick={() => { navigator.clipboard.writeText(previewFile.downloadURL!); setCopiedLink('preview'); setTimeout(() => setCopiedLink(null), 2000); }}
+                      className="p-2.5 bg-foreground/5 hover:bg-foreground/10 text-foreground/70 transition-colors rounded-xl shadow-sm hover:text-emerald-500 cursor-pointer"
+                      title="Copy Link"
+                    >
+                      {copiedLink === 'preview' ? <Check className="w-4 h-4 text-emerald-500" /> : <Link className="w-4 h-4" />}
+                    </button>
+                    <button
+                      onClick={() => { setPreviewFile(null); setRenamingFileId(previewFile.id); setRenameFileName(previewFile.name); }}
+                      className="p-2.5 bg-foreground/5 hover:bg-foreground/10 text-foreground/70 hover:text-accent transition-colors rounded-xl shadow-sm cursor-pointer"
+                      title="Rename"
+                    >
+                      <Edit2 className="w-4 h-4" />
+                    </button>
+                    <button
+                      onClick={() => { setPreviewFile(null); setDeleteConfirm(previewFile.id); }}
+                      className="p-2.5 bg-red-500/10 hover:bg-red-500/20 text-red-500 transition-colors rounded-xl shadow-sm cursor-pointer"
+                      title="Delete"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                    <a
+                      href={previewFile.downloadURL}
+                      download
+                      target="_blank"
+                      rel="noreferrer"
+                      className="p-2.5 btn-primary transition-colors rounded-xl shadow-lg ml-1"
+                      title="Download"
+                    >
+                      <Download className="w-4 h-4" />
+                    </a>
+                  </div>
+                </div>
+
+                {/* Preview Content */}
+                <div className="flex-1 w-full relative bg-foreground/[0.02] min-h-[50vh] md:min-h-[600px]" onClick={() => setPreviewFile(null)}>
+                  <div className="absolute inset-x-4 inset-y-8 md:inset-x-12 md:inset-y-12 flex items-center justify-center">
+                    {previewLoading && (
+                      <div className="absolute inset-0 flex items-center justify-center rounded-lg z-50 pointer-events-none">
+                        <div className="w-12 h-12 rounded-full bg-background/80 backdrop-blur-md shadow-xl flex items-center justify-center border border-[var(--panel-border)]/50">
+                          <Loader2 className="w-5 h-5 text-accent animate-spin" />
+                        </div>
+                      </div>
+                    )}
+                    {previewFile.fileType?.startsWith('image/') ? (
+                      <img
+                        onLoad={() => setPreviewLoading(false)}
+                        onError={() => setPreviewLoading(false)}
+                        src={previewFile.downloadURL}
+                        alt={previewFile.fileName || previewFile.name}
+                        className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-auto h-auto max-w-full max-h-full object-contain drop-shadow-[0_0_40px_rgba(0,0,0,0.5)] rounded-lg pointer-events-auto transition-opacity duration-500 ${previewLoading ? 'opacity-0' : 'opacity-100'}`}
+                        onClick={e => e.stopPropagation()}
+                      />
+                    ) : previewFile.fileType?.startsWith('video/') ? (
+                      <video
+                        onLoadedData={() => setPreviewLoading(false)}
+                        onError={() => setPreviewLoading(false)}
+                        src={previewFile.downloadURL}
+                        controls
+                        autoPlay
+                        className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-auto h-auto max-w-full max-h-full outline-none bg-black/40 rounded-lg pointer-events-auto drop-shadow-[0_0_40px_rgba(0,0,0,0.5)] transition-opacity duration-500 ${previewLoading ? 'opacity-0' : 'opacity-100'}`}
+                        onClick={e => e.stopPropagation()}
+                      />
+                    ) : previewFile.fileType === 'application/pdf' ? (
+                      <iframe
+                        onLoad={() => setPreviewLoading(false)}
+                        src={previewFile.downloadURL}
+                        className={`w-full h-full border-none rounded-lg relative z-10 transition-opacity duration-500 ${previewLoading ? 'opacity-0' : 'opacity-100'}`}
+                        style={{ backgroundColor: 'white' }}
+                        title="PDF Preview"
+                        onClick={e => e.stopPropagation()}
+                      />
+                    ) : (
+                      <div
+                        className="w-full h-full flex flex-col items-center justify-center text-foreground/40 text-center relative z-10"
+                        onClick={e => { e.stopPropagation(); setPreviewLoading(false); }}
+                      >
+                        <FileText className="w-24 h-24 mb-6 opacity-40 drop-shadow-sm" />
+                        <span className="text-[20px] font-extrabold text-foreground">Preview Unavailable</span>
+                        <span className="text-[14px] mt-2 text-foreground/60 font-medium max-w-xs">This file format cannot be previewed. Please download it instead.</span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </motion.div>
+            </div>
+          )}
+        </AnimatePresence>,
+        document.body
+      )}
+
+      {/* ── Edit Record Modal ──────────────────────────────────────────────── */}
+      <AnimatePresence>
+        {editingId && (
+          <div className="fixed inset-0 z-[120] flex items-center justify-center p-4">
+            <motion.div
+              onClick={() => handleSaveEdit()}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="absolute inset-0 bg-background/60 backdrop-blur-sm cursor-pointer"
+            />
+            <motion.div
+              initial={{ opacity: 0, scale: 0.97, y: 6 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.97, y: 6 }}
+              transition={{ duration: 0.2 }}
+              className="w-full max-w-[440px] border-[var(--panel-border)] border rounded-2xl relative z-10 glass-panel shadow-2xl bg-background overflow-hidden"
+            >
+              <div className="p-5 flex flex-col gap-3 max-h-[80vh] overflow-y-auto">
+                {/* Header */}
+                <div className="flex items-center justify-between mb-2 mt-2 px-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-[14px] font-bold text-foreground">Edit Record</span>
+                    {saving && <Loader2 className="w-3 h-3 animate-spin text-foreground/40" />}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => handleSaveEdit()}
+                    className="text-foreground/30 hover:text-foreground/60 transition-colors cursor-pointer"
+                  >
+                    <X className="w-4 h-4" />
+                  </button>
+                </div>
+
+                <div className="flex flex-col gap-0 max-h-[70vh] overflow-y-auto no-scrollbar px-1">
+                  {/* Name field */}
+                  <div className="flex flex-col relative group/field">
+                    <input
+                      readOnly
+                      value="NAME"
+                      className="no-glow bg-transparent text-[10px] font-bold text-foreground/30 uppercase tracking-[0.15em] outline-none pt-3 pb-0.5"
+                    />
+                    <input
+                      autoFocus
+                      required
+                      value={editName}
+                      onChange={e => setEditName(e.target.value)}
+                      onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); e.currentTarget.blur(); } }}
+                      onBlur={() => handleSilentSave()}
+                      placeholder="Name *"
+                      className="no-glow bg-transparent text-[13px] font-medium text-foreground outline-none placeholder:text-foreground/15 pb-1 caret-foreground/50"
+                    />
+                    <div className="border-b border-dashed border-[var(--panel-border)]/60" />
+                  </div>
+
+                  {/* Note field */}
+                  <div className="flex flex-col relative group/field">
+                    <input
+                      readOnly
+                      value="NOTE"
+                      className="no-glow bg-transparent text-[10px] font-bold text-foreground/30 uppercase tracking-[0.15em] outline-none pt-3 pb-0.5"
+                    />
+                    <textarea
+                      ref={el => { if (el) { el.style.height = 'auto'; el.style.height = el.scrollHeight + 'px'; } }}
+                      value={editNote}
+                      onChange={e => { setEditNote(e.target.value); e.target.style.height = 'auto'; e.target.style.height = e.target.scrollHeight + 'px'; }}
+                      onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); (e.target as HTMLTextAreaElement).blur(); } }}
+                      onBlur={() => handleSilentSave()}
+                      placeholder="Add a note..."
+                      rows={1}
+                      className="no-glow bg-transparent text-[13px] font-medium text-foreground outline-none placeholder:text-foreground/15 pb-1 caret-foreground/50 resize-none overflow-hidden"
+                    />
+                    <div className="border-b border-dashed border-[var(--panel-border)]/60" />
+                  </div>
+
+                  {/* Custom Fields */}
+                  {editFields.map((field, idx) => (
+                    <div key={idx} className="flex flex-col relative group/field">
+                      <input
+                        placeholder="FIELD NAME"
+                        value={field.key}
+                        onChange={e => {
+                          const next = [...editFields];
+                          next[idx].key = e.target.value;
+                          setEditFields(next);
+                        }}
+                        onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); e.currentTarget.blur(); } }}
+                        onBlur={() => handleSilentSave()}
+                        className="no-glow bg-transparent text-[10px] font-bold text-foreground/30 uppercase tracking-[0.15em] outline-none placeholder:text-foreground/15 pt-3 pb-0.5 caret-foreground/40"
+                      />
+                      <input
+                        placeholder="Field value..."
+                        value={field.value}
+                        onChange={e => {
+                          const next = [...editFields];
+                          next[idx].value = e.target.value;
+                          setEditFields(next);
+                        }}
+                        onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); e.currentTarget.blur(); } }}
+                        onBlur={() => handleSilentSave()}
+                        className="no-glow bg-transparent text-[13px] font-medium text-foreground outline-none placeholder:text-foreground/15 pt-1.5 pb-1 caret-foreground/50"
+                      />
+                      <div className="border-b border-dashed border-[var(--panel-border)]/60" />
+                      <button
+                        type="button"
+                        onClick={() => setEditFields(editFields.filter((_, i) => i !== idx))}
+                        className="absolute top-3 right-0 p-1 text-foreground/0 group-hover/field:text-foreground/20 hover:!text-red-400 transition-colors cursor-pointer"
+                      >
+                        <X className="w-3 h-3" />
+                      </button>
+                    </div>
+                  ))}
+
+                  {/* Add Field */}
+                  <button
+                    type="button"
+                    onClick={() => setEditFields([...editFields, { key: '', value: '' }])}
+                    className="flex items-center gap-1.5 text-[11px] font-medium text-foreground/25 hover:text-foreground/40 transition-colors cursor-pointer mt-4 mb-4"
+                  >
+                    <Plus className="w-3 h-3" /> Add Field
+                  </button>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+
       {/* ── Delete Confirmation ────────────────────────────────────────────── */}
       <ConfirmModal
         isOpen={!!deleteConfirm}
         onCancel={() => setDeleteConfirm(null)}
         onConfirm={handleDelete}
         title="Delete Record"
-        message="Are you sure you want to delete this record? This action cannot be undone."
+        message={<>Are you sure you want to delete <strong className="text-foreground block my-0.5 text-left overflow-hidden text-ellipsis whitespace-nowrap max-w-full">{records.find(r => r.id === deleteConfirm)?.name}</strong> This action cannot be undone.</>}
         confirmText="Delete"
         isProcessing={isDeleting}
       />