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

package/src/templates/SharedPageTemplate.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, orderBy, where, serverTimestamp, deleteDoc, updateDoc, doc, onSnapshot, limit } from 'firebase/firestore';
+import { collection, addDoc, getDocs, query, orderBy, where, serverTimestamp, deleteDoc, updateDoc, doc, onSnapshot, limit, deleteField } from 'firebase/firestore';
 import { ref, uploadBytes, getDownloadURL, deleteObject } from 'firebase/storage';
 import { ConfirmModal } from '../components/ConfirmModal';
 
@@ -41,11 +42,25 @@ export function SharedPageTemplate({ 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 [copiedLink, setCopiedLink] = useState<string | null>(null);
+  const originalFieldKeysRef = useRef<string[]>([]);
 
   const parsedTabName = (config.tabName || config.pageId || 'shared_page')
     .toLowerCase().replace(/[^a-z0-9]+/g, '_');
@@ -231,31 +246,146 @@ export function SharedPageTemplate({ 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 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','creatorName','creatorEmail','creatorAvatar'];
+    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;
+  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;
+    });
+    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,
       });
-      // onSnapshot will update the records list automatically
+      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 shared 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];
+    const parts = lower.split('/');
+    const sub = parts[parts.length - 1];
+    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;
@@ -449,23 +579,29 @@ export function SharedPageTemplate({ config }: { config: any }) {
                         initial={false}
                         animate={{ opacity: 1, y: 0 }}
                         exit={{ opacity: 0, scale: 0.95 }}
-                        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={() => owned ? startEdit(record) : null}
+                        className={`group flex flex-col bg-background border rounded-2xl p-5 transition-all relative ${owned ? '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 (owner only) */}
-                        {!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>
+                              </>
                             )}
                             {owned && (
                               <>
-                                <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>
                               </>
@@ -474,33 +610,48 @@ export function SharedPageTemplate({ config }: { config: any }) {
                         )}
 
                         <div className="flex items-start gap-3 mb-2">
-                          <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>
+                          ))
+                        }
 
 
 
@@ -558,12 +709,255 @@ export function SharedPageTemplate({ 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>
+
       <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}
       />

package/src/templates/TemplateBoard.tsx

@@ -378,7 +378,16 @@ export function TemplateBoard({
             <ArrowLeft className="w-4 h-4" /> Go Back
           </Link>
         )}
-        {isTabMode && <div />}
+        {isTabMode && (
+          <div className="flex-1 min-w-0">
+            <h2 className="text-xl font-extrabold text-foreground tracking-tight truncate">
+              {config?.tabTitle || config?.tabName || title}
+            </h2>
+            <p className="text-[13px] font-medium text-foreground/50 mt-1">
+              {tasks.length} {tasks.length === 1 ? 'item' : 'items'} · {sortedCategories.length} {sortedCategories.length === 1 ? 'category' : 'categories'}
+            </p>
+          </div>
+        )}
         <div className="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
           {config?.showPrompt && (
             <motion.button
@@ -501,11 +510,11 @@ export function TemplateBoard({
                               <div key={i} className="flex items-start bg-foreground/[0.04] border border-[var(--panel-border)]/50 rounded-[8px] px-2.5 py-1.5 w-full">
                                 <input
                                   placeholder={keyLabel}
-                                  style={{ width: `${Math.max(25, f.key.length * 7)}px` }}
                                   value={f.key}
                                   onChange={e => updateField(i, e.target.value, f.value)}
                                   onKeyDown={e => e.key === 'Enter' && handleSaveInline(col.id)}
-                                  className="no-glow bg-transparent outline-none text-[11px] text-foreground/50 font-bold placeholder:text-foreground/30 relative top-[1px]"
+                                  className="no-glow bg-transparent outline-none text-[11px] text-foreground/50 font-bold placeholder:text-foreground/30 relative top-[1px] shrink-0"
+                                  style={{ width: `${Math.max(3, f.key.length || keyLabel.length)}ch` }}
                                 />
                                 <span className="text-[11px] text-foreground/50 font-bold mr-1.5 relative top-[1px]">:</span>
                                 <textarea
@@ -547,9 +556,9 @@ export function TemplateBoard({
                           {item.fields && item.fields.length > 0 && (
                             <div className="flex flex-row flex-wrap gap-2 mt-2">
                               {item.fields.map((f, i) => (
-                                <div key={i} className="inline-block bg-foreground/[0.04] border border-[var(--panel-border)]/50 rounded-[8px] px-2.5 py-1.5 max-w-full">
-                                  <span className="text-[11px] text-foreground/50 font-bold mr-1.5 relative -top-[1px]">{f.key}:</span>
-                                  <span className="text-[12px] text-foreground/90 font-medium break-words leading-tight">{f.value}</span>
+                                <div key={i} className="inline-flex bg-foreground/[0.04] border border-[var(--panel-border)]/50 rounded-[8px] px-2.5 py-1.5 max-w-full">
+                                  <span className="text-[11px] text-foreground/50 font-bold mr-1.5 relative -top-[1px] shrink-0 break-all">{f.key}:</span>
+                                  <span className="text-[12px] text-foreground/90 font-medium break-words leading-tight min-w-0">{f.value}</span>
                                 </div>
                               ))}
                             </div>
@@ -597,7 +606,7 @@ export function TemplateBoard({
                           <div key={i} className="flex items-start bg-foreground/[0.04] border border-[var(--panel-border)]/50 rounded-[8px] px-2.5 py-1.5 w-full">
                             <input
                               placeholder={keyLabel}
-                              style={{ width: `${Math.max(25, f.key.length * 7)}px` }}
+                              style={{ width: `${Math.max(3, f.key.length || keyLabel.length)}ch` }}
                               value={f.key}
                               onChange={e => updateField(i, e.target.value, f.value)}
                               onKeyDown={e => e.key === 'Enter' && handleSaveInline(col.id)}
@@ -641,7 +650,7 @@ export function TemplateBoard({
       <ConfirmModal
         isOpen={!!confirmDelete}
         title="Confirm Deletion"
-        message={<>Are you entirely sure you wish to delete <strong className="text-foreground">{confirmDelete?.title}</strong>? This action is permanent.</>}
+        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">{confirmDelete?.title}</strong> This action is permanent.</>}
         onConfirm={executeDelete}
         onCancel={() => setConfirmDelete(null)}
         isProcessing={isDeleting}