firebase-os 1.1.4 → 1.1.6

package/src/templates/PublicPageTemplate.tsx

@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ArrowLeft, Bot } from 'lucide-react';
+import { ContactPopup } from '../components/ContactPopup';
+import { db } from '../lib/firebase';
+import { collection, getDocs } from 'firebase/firestore';
+import { publicPagePrompt } from '../prompts';
+
+export function PublicPageTemplate({ config }: { config: any }) {
+  const [copied, setCopied] = useState(false);
+  const [showForm, setShowForm] = useState<string | null>(null);
+  const [availableForms, setAvailableForms] = useState<string[]>([]);
+
+  useEffect(() => {
+    document.title = config.pageName || config.pageTitle || 'Firebase OS';
+    
+    // Fetch available forms
+    getDocs(collection(db, 'sys_forms')).then(snap => {
+      setAvailableForms(snap.docs.filter(d => d.data().formType === 'public').map(doc => doc.id));
+    });
+  }, [config.pageName, config.pageTitle]);
+
+  const promptText = publicPagePrompt(config, availableForms);
+
+  const handleCopyPrompt = () => {
+    navigator.clipboard.writeText(promptText);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col pt-12 relative min-h-screen">
+      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-4">
+        <h1 className="w-fit inline-block text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-3 text-gradient mt-1">
+          {config.pageTitle || config.pageName || 'New Page'}
+        </h1>
+        {config.route && (
+          <div className="flex items-center gap-2 text-foreground/40 font-bold uppercase tracking-[0.2em] text-[11px]">
+            <span className="w-8 h-[1px] bg-foreground/10" />
+            {config.route}
+          </div>
+        )}
+      </motion.div>
+
+      <div className="flex justify-between items-center mb-6 pt-2 border-b border-[var(--panel-border)] pb-6 relative z-20 overflow-x-auto no-scrollbar gap-4">
+        <button onClick={() => window.history.back()} className="px-5 py-2 border border-[var(--panel-border)] rounded-xl text-[13px] font-bold hover:bg-foreground/5 transition-all flex items-center gap-2 cursor-pointer shadow-sm text-foreground/70 whitespace-nowrap shrink-0">
+          <ArrowLeft className="w-4 h-4" /> Go Back
+        </button>
+        <div className="flex gap-2 shrink-0">
+          {config.copyPrompt && (
+            <button
+              onClick={handleCopyPrompt}
+              title="Copy Developer Prompt"
+              className="px-6 py-2.5 rounded-xl border border-[var(--panel-border)] bg-background flex items-center gap-2 hover:bg-foreground/5 hover:text-accent transition-all cursor-pointer text-[14px] font-bold tracking-wide shadow-sm whitespace-nowrap"
+            >
+              <Bot className="w-4 h-4" />
+              <span className="hidden sm:inline">{copied ? 'Copied!' : 'Copy Prompt'}</span>
+            </button>
+          )}
+          {config.showButton && (
+            <button
+              onClick={() => {
+                if (config.action === 'redirect') window.location.href = config.url || '/';
+                else if (config.action === 'form') setShowForm(config.form || 'contact');
+              }}
+              className="px-6 py-2.5 rounded-xl font-bold tracking-wide transition-all duration-300 flex items-center justify-center btn-primary shadow-xl hover:-translate-y-1 active:scale-95 text-[14px] whitespace-nowrap"
+            >
+              {config.buttonText || 'Action Button'}
+            </button>
+          )}
+        </div>
+      </div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="glass-panel border border-[var(--panel-border)] rounded-3xl shadow-2xl relative flex flex-col flex-1 bg-background/50 h-full min-h-[400px]"
+      >
+        <div className="flex-1 flex flex-col items-center justify-center opacity-40 glass-panel border border-[var(--panel-border)]/50 border-dashed m-4 md:m-8 rounded-2xl p-8 py-20 text-center">
+          <Bot className="w-8 h-8 md:w-12 md:h-12 mb-4 text-foreground/80 opacity-50" />
+          <p className="text-[14px] font-bold mb-2">Click copy prompt at the top to start adding changes</p>
+          <div className="mt-8 text-left bg-background p-6 rounded-2xl text-[12px] font-mono whitespace-pre-wrap max-w-2xl border border-[var(--panel-border)]/50 text-foreground/60 shadow-inner">
+            {promptText}
+          </div>
+        </div>
+      </motion.div>
+      <AnimatePresence>
+        {showForm && <ContactPopup onClose={() => setShowForm(null)} formId={showForm} />}
+      </AnimatePresence>
+    </main>
+  );
+}

package/src/templates/SharedPageTemplate.tsx

@@ -0,0 +1,551 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Bot, Plus, X, Loader2, Trash2, FileText, Download, Check, Edit2, Info } from 'lucide-react';
+import * as IconoirIcons from 'iconoir-react';
+import { DashboardNav } from '../components/DashboardNav';
+import { Button } from '../components/Button';
+import { useAuth } from '../lib/AuthContext';
+import { db, storage } from '../lib/firebase';
+import { collection, addDoc, getDocs, query, orderBy, where, serverTimestamp, deleteDoc, updateDoc, doc, onSnapshot } from 'firebase/firestore';
+import { ref, uploadBytes, getDownloadURL, deleteObject } from 'firebase/storage';
+import { ConfirmModal } from '../components/ConfirmModal';
+
+interface SavedRecord {
+  id: string;
+  name: string;
+  note: string;
+  uid: string;
+  createdAt: any;
+  recordType?: 'record' | 'file';
+  fileName?: string;
+  fileType?: string;
+  fileSize?: number;
+  downloadURL?: string;
+  creatorName?: string;
+  creatorEmail?: string;
+  creatorAvatar?: string;
+}
+
+import { sharedCrudPrompt } from '../prompts';
+
+export function SharedPageTemplate({ config }: { config: any }) {
+  const { user } = useAuth();
+  const [records, setRecords] = useState<SavedRecord[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [newNote, setNewNote] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editName, setEditName] = useState('');
+  const [editNote, setEditNote] = useState('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const parsedTabName = (config.tabName || config.pageId || 'shared_page')
+    .toLowerCase().replace(/[^a-z0-9]+/g, '_');
+  const recordsCollection = `mem_${parsedTabName}_records`;
+
+  useEffect(() => {
+    document.title = config.tabTitle || config.tabName || 'Firebase OS';
+  }, [config.tabTitle, config.tabName]);
+
+  // ── Real-time listener for shared records (visible to all members) ───────
+  useEffect(() => {
+    if (!user) return;
+    setLoading(true);
+
+    const q = query(collection(db, recordsCollection), orderBy('createdAt', 'desc'));
+    const unsub = onSnapshot(q, (snap) => {
+      setRecords(snap.docs.map(d => ({ id: d.id, ...d.data() } as SavedRecord)));
+      setLoading(false);
+    }, (err) => {
+      console.error('Error listening to shared records:', err);
+      // Fallback: try without orderBy (index not yet created)
+      const fallbackUnsub = onSnapshot(collection(db, recordsCollection), (snap) => {
+        const items = snap.docs.map(d => ({ id: d.id, ...d.data() } as SavedRecord));
+        items.sort((a, b) => (b.createdAt?.toMillis?.() || 0) - (a.createdAt?.toMillis?.() || 0));
+        setRecords(items);
+        setLoading(false);
+      });
+      return () => fallbackUnsub();
+    });
+
+    return () => unsub();
+  }, [user, recordsCollection]);
+
+  // ── Get current user's embedded profile (no user_profiles query) ──────────
+  const getEmbeddedProfile = () => {
+    return {
+      name: user!.displayName || user!.email?.split('@')[0] || 'Member',
+      email: user!.email || '',
+      avatar: user!.photoURL || '',
+    };
+  };
+
+  // ── Save new record ───────────────────────────────────────────────────────
+  const handleSaveRecord = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!user || !newName.trim()) return;
+    setSaving(true);
+    try {
+      const profile = getEmbeddedProfile();
+      await addDoc(collection(db, recordsCollection), {
+        name: newName.trim(),
+        note: newNote.trim(),
+        uid: user.uid,
+        recordType: 'record',
+        creatorName: profile.name,
+        creatorEmail: profile.email,
+        creatorAvatar: profile.avatar,
+        createdAt: serverTimestamp(),
+      });
+      // onSnapshot will update the records list automatically
+      setNewName('');
+      setNewNote('');
+      setShowAddForm(false);
+    } catch (e) {
+      console.error('Error saving shared record:', e);
+    }
+    setSaving(false);
+  };
+
+  // ── Upload file ─────────────────────────────────────────────────────────
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file || !user) return;
+    setUploading(true);
+    try {
+      const uniqueName = `${Date.now()}_${file.name.replace(/[^a-zA-Z0-9.-]/g, '_')}`;
+      const storagePath = `mem_files/${uniqueName}`;
+      const fileRef = ref(storage, storagePath);
+      await uploadBytes(fileRef, file, {
+        customMetadata: { ownerId: user.uid }
+      });
+      const downloadURL = await getDownloadURL(fileRef);
+      const profile = getEmbeddedProfile();
+
+      // Save to mem_files so it appears in Drive > Shared
+      await addDoc(collection(db, 'mem_files'), {
+        fileName: file.name,
+        fileType: file.type || 'unknown',
+        fileSize: file.size,
+        downloadURL,
+        uid: user.uid,
+        uploaderEmail: user.email || 'member',
+        sourceTab: parsedTabName,
+        accessPrefix: 'mem_',
+        creatorName: profile.name,
+        creatorEmail: profile.email,
+        creatorAvatar: profile.avatar,
+        createdAt: serverTimestamp(),
+      });
+
+      // Save reference in this tab's records collection
+      await addDoc(collection(db, recordsCollection), {
+        name: file.name,
+        note: `${file.type || 'File'} · ${formatSize(file.size)}`,
+        uid: user.uid,
+        recordType: 'file',
+        fileName: file.name,
+        fileType: file.type || 'unknown',
+        fileSize: file.size,
+        downloadURL,
+        creatorName: profile.name,
+        creatorEmail: profile.email,
+        creatorAvatar: profile.avatar,
+        createdAt: serverTimestamp(),
+      });
+      // onSnapshot will update the records list automatically
+    } catch (e) {
+      console.error('Error uploading shared file:', e);
+    }
+    setUploading(false);
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  };
+
+  // ── Delete record ─────────────────────────────────────────────────────────
+  const handleDelete = async () => {
+    if (!deleteConfirm) return;
+    setIsDeleting(true);
+    try {
+      const record = records.find(r => r.id === deleteConfirm);
+      await deleteDoc(doc(db, recordsCollection, deleteConfirm));
+
+      // If it's a file, also delete from Storage and mem_files
+      if (record?.recordType === 'file' && record.downloadURL) {
+        try {
+          const fileName = record.downloadURL.split('mem_files%2F')[1]?.split('?')[0];
+          if (fileName) {
+            const fileRef = ref(storage, `mem_files/${decodeURIComponent(fileName)}`);
+            await deleteObject(fileRef).catch(() => {});
+          }
+          const filesSnap = await getDocs(query(
+            collection(db, 'mem_files'),
+            where('downloadURL', '==', record.downloadURL)
+          ));
+          for (const d of filesSnap.docs) {
+            await deleteDoc(d.ref);
+          }
+        } catch (e) {
+          console.error('Error cleaning up shared file:', e);
+        }
+      }
+
+      // onSnapshot will update the records list automatically
+      setDeleteConfirm(null);
+    } catch (e) {
+      console.error('Error deleting shared record:', e);
+    }
+    setIsDeleting(false);
+  };
+
+  // ── Edit record (inline) ──────────────────────────────────────────────────
+  const startEdit = (record: SavedRecord) => {
+    setEditingId(record.id);
+    setEditName(record.name);
+    setEditNote(record.note || '');
+  };
+
+  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;
+    }
+    try {
+      await updateDoc(doc(db, recordsCollection, editingId), {
+        name: editName.trim(),
+        note: editNote.trim(),
+      });
+      // onSnapshot will update the records list automatically
+    } catch (e) {
+      console.error('Error updating shared record:', e);
+    }
+    setEditingId(null);
+  };
+
+  // ── Utils ─────────────────────────────────────────────────────────────────
+  const formatSize = (bytes: number) => {
+    if (!bytes) 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(2)) + ' ' + sizes[i];
+  };
+
+  const formatDate = (ts: any) => {
+    if (!ts) return '';
+    const ms = ts.toMillis ? ts.toMillis() : ts;
+    return new Date(ms).toLocaleDateString('en-US', {
+      month: 'short', day: 'numeric', year: 'numeric'
+    });
+  };
+
+  // ── Resolve storage icon from iconoir ─────────────────────────────────────
+  const getStorageIcon = () => {
+    const iconName = config.buttonStorageIcon || 'upload';
+    const cleanName = iconName.trim();
+    const variations = [
+      cleanName,
+      cleanName.charAt(0).toUpperCase() + cleanName.slice(1),
+      cleanName.split('-').map((w: string) => w.charAt(0).toUpperCase() + w.slice(1)).join(''),
+      cleanName.split('_').map((w: string) => w.charAt(0).toUpperCase() + w.slice(1)).join(''),
+    ];
+    for (const v of variations) {
+      if ((IconoirIcons as any)[v]) return (IconoirIcons as any)[v];
+    }
+    return (IconoirIcons as any)['Upload'] || Plus;
+  };
+
+  const StorageIcon = getStorageIcon();
+  const isPrimaryBtn = config.buttonStyle !== 'secondary';
+  const isPrimaryStorage = config.buttonStorageStyle === 'primary';
+  const isOwner = (record: SavedRecord) => record.uid === user?.uid;
+
+  // ── Prompt ────────────────────────────────────────────────────────────────
+  const promptText = sharedCrudPrompt(config, recordsCollection);
+
+  const handleCopyPrompt = () => {
+    navigator.clipboard.writeText(promptText);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  // ── Creator badge (embedded in each record) ───────────────────────────────
+  const CreatorBadge = ({ record }: { record: SavedRecord }) => {
+    const name = record.creatorName || record.creatorEmail?.split('@')[0] || 'Member';
+    const email = record.creatorEmail || '';
+    const avatar = record.creatorAvatar || '';
+    const initials = name.split(' ').map(w => w[0]).join('').toUpperCase().slice(0, 2);
+    return (
+      <div className="flex items-center gap-2 mt-2 pt-2 border-t border-[var(--panel-border)]/30">
+        {avatar ? (
+          <img src={avatar} alt="" className="w-5 h-5 rounded-full object-cover shrink-0" />
+        ) : (
+          <div className="w-5 h-5 rounded-full bg-accent/15 text-accent flex items-center justify-center text-[8px] font-extrabold shrink-0">
+            {initials}
+          </div>
+        )}
+        <div className="flex items-center gap-1 min-w-0 flex-1">
+          <span className="text-[11px] font-semibold text-foreground/40 truncate">{name}</span>
+          {email && <span className="text-[10px] text-foreground/25 truncate">· {email}</span>}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col">
+      {/* ── Header ──────────────────────────────────────────────────────── */}
+      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="w-fit inline-block text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-3 text-gradient mt-1">
+            {config.tabTitle || config.tabName || 'Shared Page'}
+          </h1>
+          {config.route && (
+            <div className="flex items-center gap-2 text-foreground/40 font-bold uppercase tracking-[0.2em] text-[11px]">
+              <span className="w-8 h-[1px] bg-foreground/10" />
+              {config.route}
+            </div>
+          )}
+        </div>
+      </motion.div>
+
+      <div className="flex flex-col gap-6 flex-1 pb-16">
+        <DashboardNav />
+
+        {/* ── Main Container ────────────────────────────────────────────── */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+          className="flex flex-col glass-panel border border-[var(--panel-border)] rounded-3xl overflow-hidden flex-1 shadow-2xl bg-background"
+        >
+          {/* Container Header */}
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-6 md:px-8 md:py-6 border-b border-[var(--panel-border)]/50 bg-background/50 shrink-0">
+            <div className="flex-1 min-w-0">
+              <h2 className="text-xl font-extrabold text-foreground tracking-tight truncate">
+                {config.tabTitle || config.tabName || 'Dashboard'}
+              </h2>
+              <p className="text-[13px] font-medium text-foreground/50 mt-1">
+                {loading ? 'Loading…' : `${records.length} ${records.length === 1 ? 'item' : 'items'} · Shared`}
+              </p>
+            </div>
+
+            <div className="flex items-center gap-2 shrink-0">
+              {/* Prompt Copy */}
+              {config.showPrompt && (
+                <motion.button
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                  onClick={handleCopyPrompt}
+                  title={copied ? 'Copied!' : 'Copy Developer Prompt'}
+                  className={`w-10 h-10 flex items-center justify-center rounded-xl transition-all duration-300 cursor-pointer ${copied
+                    ? 'bg-emerald-500/10 text-emerald-500'
+                    : 'btn-secondary'
+                  }`}
+                >
+                  {copied ? <Check className="w-4 h-4" /> : <Bot className="w-4 h-4" />}
+                </motion.button>
+              )}
+
+              {/* Storage Upload */}
+              {config.storage !== false && (
+                <>
+                  <input type="file" ref={fileInputRef} onChange={handleFileSelect} className="hidden" />
+                  <motion.button
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={uploading}
+                    title={config.buttonStorageText || 'Upload File'}
+                    className={`h-10 flex items-center justify-center gap-2 rounded-xl transition-all duration-300 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed ${config.buttonStorageText ? 'px-4' : 'w-10'
+                      } ${isPrimaryStorage ? 'btn-primary' : 'btn-secondary'}`}
+                  >
+                    {uploading ? <Loader2 className="w-4 h-4 animate-spin" /> : <StorageIcon className="w-4 h-4" />}
+                    {config.buttonStorageText && <span className="text-[13px] font-bold">{config.buttonStorageText}</span>}
+                  </motion.button>
+                </>
+              )}
+
+              {/* Add Button */}
+              {config.showButton !== false && (
+                <motion.button
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                  onClick={() => setShowAddForm(true)}
+                  title="Add New"
+                  className={`h-10 flex items-center justify-center gap-2 rounded-xl transition-all duration-300 cursor-pointer ${config.buttonText && config.buttonText !== '+' ? 'px-5' : 'w-10'
+                    } ${isPrimaryBtn ? 'btn-primary' : 'btn-secondary'}`}
+                >
+                  {config.buttonText === '+' || !config.buttonText ? (
+                    <Plus className="w-4 h-4" />
+                  ) : (
+                    <span className="text-[13px] font-bold">{config.buttonText}</span>
+                  )}
+                </motion.button>
+              )}
+            </div>
+          </div>
+
+          {/* ── Content Area ─────────────────────────────────────────────── */}
+          <div className="p-6 md:p-8 flex-1 overflow-y-auto relative min-h-[400px]">
+            {loading && (
+              <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/50 backdrop-blur-sm">
+                <Loader2 className="w-8 h-8 text-accent animate-spin" />
+              </div>
+            )}
+
+            {!loading && records.length === 0 && (
+              <motion.div
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="flex-1 flex flex-col items-center justify-center border border-[var(--panel-border)]/50 border-dashed rounded-2xl p-8 py-20 text-center min-h-[350px]"
+              >
+                <div className="w-16 h-16 rounded-2xl bg-accent/5 border border-accent/10 flex items-center justify-center mb-5">
+                  <Plus className="w-6 h-6 text-accent/40" />
+                </div>
+                <p className="text-[15px] font-bold mb-1.5 text-foreground/50">No items yet</p>
+                <p className="text-[13px] font-medium text-foreground/35 max-w-xs leading-relaxed">
+                  Use the buttons above to add records or upload files. All team members can view and contribute.
+                </p>
+              </motion.div>
+            )}
+
+            {!loading && records.length > 0 && (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <AnimatePresence>
+                  {records.map((record) => {
+                    const isEditing = editingId === record.id;
+                    const owned = isOwner(record);
+                    return (
+                      <motion.div
+                        key={record.id}
+                        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'
+                          }`}
+                      >
+                        {/* 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">
+                            {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>
+                            )}
+                            {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">
+                                  <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">
+                                  <Trash2 className="w-3.5 h-3.5" />
+                                </button>
+                              </>
+                            )}
+                          </div>
+                        )}
+
+                        <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>
+                          <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>
+                            )}
+                            <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>
+                          )
+                        )}
+
+
+
+                        <CreatorBadge record={record} />
+                      </motion.div>
+                    );
+                  })}
+                </AnimatePresence>
+              </div>
+            )}
+          </div>
+
+          {/* ── Settings Info ─────────────────────────────────────────────── */}
+          <div className="px-6 md:px-8 py-4 border-t border-[var(--panel-border)]/30 bg-background/30 shrink-0">
+            <div className="flex items-start gap-2 text-[11px] text-foreground/30 font-medium leading-relaxed">
+              <Info className="w-3.5 h-3.5 shrink-0 mt-0.5" />
+              <span>
+                Shared between all members · Edit and delete available on your own items only ·
+                Records: <code className="text-foreground/40 font-mono text-[10px]">{recordsCollection}</code> ·
+                Files: <code className="text-foreground/40 font-mono text-[10px]">mem_files</code> → Drive / Shared
+              </span>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+
+      {/* ── Add Record Modal ──────────────────────────────────────────────── */}
+      <AnimatePresence>
+        {showAddForm && (
+          <div className="fixed inset-0 z-[120] flex items-center justify-center p-4">
+            <motion.div onClick={() => !saving && setShowAddForm(false)} 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-[360px] border-[var(--panel-border)] border rounded-2xl relative z-10 glass-panel shadow-2xl bg-background overflow-hidden">
+              <form onSubmit={handleSaveRecord} className="p-5 flex flex-col gap-3">
+                <div className="flex items-center justify-between mb-1">
+                  <span className="text-[14px] font-bold text-foreground">New Record</span>
+                  <button type="button" onClick={() => !saving && setShowAddForm(false)} className="text-foreground/30 hover:text-foreground/60 transition-colors cursor-pointer p-0.5">
+                    <X className="w-4 h-4" />
+                  </button>
+                </div>
+                <input autoFocus type="text" required value={newName} onChange={e => setNewName(e.target.value)} placeholder="Name *" disabled={saving}
+                  className="w-full bg-foreground/[0.03] border border-[var(--panel-border)] px-3.5 py-2.5 text-[13px] font-semibold text-foreground outline-none focus:border-accent transition-colors placeholder:text-foreground/30"
+                  style={{ borderRadius: 'var(--input-radius, 0.75rem)' }} />
+                <textarea value={newNote} onChange={e => setNewNote(e.target.value)} placeholder="Note (optional)" disabled={saving} rows={2}
+                  className="w-full bg-foreground/[0.03] border border-[var(--panel-border)] px-3.5 py-2.5 text-[13px] font-medium text-foreground outline-none focus:border-accent transition-colors placeholder:text-foreground/30 resize-none"
+                  style={{ borderRadius: 'var(--input-radius, 0.75rem)' }} />
+                <div className="flex justify-end pt-1">
+                  <Button type="submit" isLoading={saving} className="px-5 py-2 text-[12px] font-bold shadow-md">
+                    {saving ? 'Saving…' : 'Save'}
+                  </Button>
+                </div>
+              </form>
+            </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."
+        confirmText="Delete"
+        isProcessing={isDeleting}
+      />
+    </main>
+  );
+}