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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "your-ai-workflow-firebase-os",
-  "version": "1.2.20",
+  "version": "1.2.21",
   "description": "A complete Firebase-powered admin OS — one React component.",
   "type": "module",
   "main": "dist/your-ai-workflow-firebase-os.cjs.js",

package/src/pages/PagesAdmin.tsx

@@ -4,7 +4,7 @@ import { DashboardNav } from '../components/DashboardNav';
 import { useAuth } from '../lib/AuthContext';
 import { Shield, Eye, EyeOff, Lock, Globe, Plus, Trash2, Power, ChevronUp, ChevronDown, Layers, Loader2, Save, Copy, RotateCcw, CheckCircle2 } from 'lucide-react';
 import { Button } from '../components/Button';
-import { db } from '../lib/firebase';
+import { db, storage } from '../lib/firebase';
 import { doc, onSnapshot, setDoc, collection, getDocs, getDoc } from 'firebase/firestore';
 import { ConfirmModal } from '../components/ConfirmModal';
 import { JsonNode } from './ThemeAdmin';
@@ -50,7 +50,10 @@ export function PagesAdmin() {
   const location = useLocation();
   const config = useConfig();
   const [pages, setPages] = useState<PageItem[]>(initialPages);
-  const [expandedPageId, setExpandedPageId] = useState<string | null>(null);
+  const [expandedPageId, setExpandedPageId] = useState<string | null>(() => {
+    try { return sessionStorage.getItem('fbos_pages_expandedId') || null; } catch { return null; }
+  });
+  const expandedPageIdRef = useRef(expandedPageId);
   const [isAddingPage, setIsAddingPage] = useState(false);
   const [draftConfigs, setDraftConfigs] = useState<Record<string, any>>({});
   const [savingConfigMap, setSavingConfigMap] = useState<Record<string, boolean>>({});
@@ -102,6 +105,32 @@ export function PagesAdmin() {
     }
   }, [location.pathname, pages]);
 
+  // Persist expanded page ID to sessionStorage and keep ref in sync
+  useEffect(() => {
+    expandedPageIdRef.current = expandedPageId;
+    try {
+      if (expandedPageId) sessionStorage.setItem('fbos_pages_expandedId', expandedPageId);
+      else sessionStorage.removeItem('fbos_pages_expandedId');
+    } catch {}
+  }, [expandedPageId]);
+
+  // Persist scroll position
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = scrollContainerRef.current;
+    if (!el) return;
+    // Restore scroll position on mount
+    try {
+      const saved = sessionStorage.getItem('fbos_pages_scrollY');
+      if (saved) el.scrollTop = parseInt(saved, 10);
+    } catch {}
+    const handleScroll = () => {
+      try { sessionStorage.setItem('fbos_pages_scrollY', String(el.scrollTop)); } catch {}
+    };
+    el.addEventListener('scroll', handleScroll, { passive: true });
+    return () => el.removeEventListener('scroll', handleScroll);
+  }, []);
+
 
 
   useEffect(() => {
@@ -234,7 +263,13 @@ export function PagesAdmin() {
         } catch (e) { }
         await setDoc(doc(db, collectionName, targetId), val);
 
+        // Batch pages + expandedPageId update together to prevent collapse
         setPages(prev => prev.map(p => p.id === id ? { ...p, id: targetId, _uiKey: p._uiKey || id, path: val.route, title: val.pageName || val.tabName || val.title || p.title } : p));
+        // Use ref to read the LATEST expandedPageId (closure value is stale after async await)
+        if (expandedPageIdRef.current === id) {
+          setExpandedPageId(targetId);
+          window.history.replaceState(null, '', `/pages/${targetId}`);
+        }
         setDraftConfigs(prev => {
           const next = { ...prev };
           next[targetId] = val;
@@ -242,11 +277,6 @@ export function PagesAdmin() {
           return next;
         });
 
-        if (expandedPageId === id) {
-          setExpandedPageId(targetId);
-          window.history.replaceState(null, '', `/pages/${targetId}`);
-        }
-
         // Append new tab to the TOP of the order list
         const isPublicPage = pageType === 'public';
         const orderDocId = isPublicPage ? 'page_order' : 'tab_order';
@@ -306,19 +336,27 @@ export function PagesAdmin() {
     const newId = 'draft_' + Math.floor(Math.random() * 10000);
     setPages([...pages, { id: newId, title: 'New Tab', path: '/draft', type, isSystem: false, enabled: true }]);
 
-    let defaultPayload = {};
+    // Count existing pages of this type to generate a unique numbered route
+    const existingCount = pages.filter(p => p.type === type && !p.id.startsWith('draft_')).length;
+    const routeNum = existingCount + 1;
+
+    let defaultPayload: any = {};
     if (type === 'public') {
-      defaultPayload = { ...defaultPublicConfig };
+      defaultPayload = { ...defaultPublicConfig, route: `/page-${routeNum}` };
     } else if (type === 'private') {
-      defaultPayload = { ...defaultPrivateConfig };
+      defaultPayload = { ...defaultPrivateConfig, route: `/private-tab-${routeNum}` };
     } else if (type === 'admin') {
-      defaultPayload = { ...defaultAdminConfig };
+      defaultPayload = { ...defaultAdminConfig, route: `/admin-tab-${routeNum}` };
     } else if (type === 'shared') {
-      defaultPayload = { ...defaultSharedConfig };
+      defaultPayload = { ...defaultSharedConfig, route: `/shared-tab-${routeNum}` };
     }
     setDraftConfigs(p => ({ ...p, [newId]: defaultPayload }));
     setExpandedPageId(newId);
     setIsAddingPage(false);
+
+    // Immediately save the draft to Firestore so the route is resolvable
+    handleSaveConfig(newId, { ...defaultPayload, pageType: type !== 'public' ? type : undefined });
+
     setTimeout(() => {
       document.getElementById(`page-${newId}`)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
     }, 100);
@@ -367,30 +405,110 @@ export function PagesAdmin() {
     if (!deleteConfirmId) return;
     setIsDeleting(true);
     try {
-      const { deleteDoc, collection, getDocs, doc } = await import('firebase/firestore');
+      const { deleteDoc, collection, getDocs, doc, getDoc: getDocFn, query, where } = await import('firebase/firestore');
+      const { ref, deleteObject } = await import('firebase/storage');
       const page = pages.find(p => p.id === deleteConfirmId);
       const collectionName = page?.type === 'public' ? 'sys_pages' : 'sys_tabs';
-      await deleteDoc(doc(db, collectionName, deleteConfirmId));
 
       if (collectionName === 'sys_tabs' && page) {
-        const tabName = page.id;
-        try {
-          const collectionsClean = [
-            `admin_${tabName}_records`,
-            `mem_${tabName}_records`,
-            `user_${tabName}_records`
-          ];
+        // Read the tab config to derive the correct collection names
+        // (templates use config.tabName || config.pageId, lowercased + sanitized)
+        let tabConfig = draftConfigs[deleteConfirmId];
+        if (!tabConfig) {
+          try {
+            const tabDoc = await getDocFn(doc(db, 'sys_tabs', deleteConfirmId));
+            if (tabDoc.exists()) tabConfig = tabDoc.data();
+          } catch {}
+        }
+
+        const parsedTabName = ((tabConfig?.tabName || tabConfig?.pageId || deleteConfirmId) as string)
+          .toLowerCase().replace(/[^a-z0-9]+/g, '_');
+
+        const collectionsClean = [
+          `admin_${parsedTabName}_records`,
+          `mem_${parsedTabName}_records`,
+          `user_${parsedTabName}_records`
+        ];
 
-          for (const col of collectionsClean) {
+        // Storage folder prefixes and their Drive collections
+        const storageMap: Record<string, { prefix: string; driveCollection: string }> = {
+          [`admin_${parsedTabName}_records`]: { prefix: 'admin_files', driveCollection: 'admin_files' },
+          [`mem_${parsedTabName}_records`]: { prefix: 'mem_files', driveCollection: 'mem_files' },
+          [`user_${parsedTabName}_records`]: { prefix: 'user_files', driveCollection: 'user_files' },
+        };
+
+        for (const col of collectionsClean) {
+          try {
             const recordsSnap = await getDocs(collection(db, col));
+            const mapping = storageMap[col];
+
+            // Delete files from Storage and Drive for file-type records
+            for (const d of recordsSnap.docs) {
+              const data = d.data();
+              if (data.recordType === 'file' && data.downloadURL && mapping) {
+                try {
+                  const encodedPrefix = `${mapping.prefix}%2F`;
+                  const fileName = data.downloadURL.split(encodedPrefix)[1]?.split('?')[0];
+                  if (fileName) {
+                    const fileRef = ref(storage, `${mapping.prefix}/${decodeURIComponent(fileName)}`);
+                    await deleteObject(fileRef).catch(() => {});
+                  }
+                  // Remove matching Drive metadata doc by downloadURL
+                  const driveSnap = await getDocs(query(
+                    collection(db, mapping.driveCollection),
+                    where('downloadURL', '==', data.downloadURL)
+                  ));
+                  for (const driveDoc of driveSnap.docs) {
+                    await deleteDoc(driveDoc.ref);
+                  }
+                } catch (fileErr) {
+                  console.error('Error deleting storage file:', fileErr);
+                }
+              }
+            }
+
+            // Delete all record documents in this collection
             const deletePromises = recordsSnap.docs.map(d => deleteDoc(d.ref));
             await Promise.all(deletePromises);
+
+            // Clear localStorage cache for this collection
+            try { localStorage.removeItem(`fbos_records_${col}`); } catch {}
+          } catch (colErr) {
+            console.error(`Error cleaning up collection ${col}:`, colErr);
           }
-        } catch (cleanupErr) {
-          console.error("Error cleaning up tab records:", cleanupErr);
+        }
+
+        // Also clean Drive collections by sourceTab (catches any orphaned file docs)
+        const driveCollections = ['admin_files', 'mem_files', 'user_files'];
+        for (const driveColl of driveCollections) {
+          try {
+            const orphanedSnap = await getDocs(query(
+              collection(db, driveColl),
+              where('sourceTab', '==', parsedTabName)
+            ));
+            for (const orphanDoc of orphanedSnap.docs) {
+              const data = orphanDoc.data();
+              // Also delete the actual file from Storage if we haven't already
+              if (data.downloadURL) {
+                try {
+                  const prefix = driveColl.replace('_files', '_files');
+                  const encodedPrefix = `${prefix}%2F`;
+                  const fName = data.downloadURL.split(encodedPrefix)[1]?.split('?')[0];
+                  if (fName) {
+                    const fRef = ref(storage, `${prefix}/${decodeURIComponent(fName)}`);
+                    await deleteObject(fRef).catch(() => {});
+                  }
+                } catch {}
+              }
+              await deleteDoc(orphanDoc.ref);
+            }
+          } catch {}
         }
       }
 
+      // Delete the tab/page document itself
+      await deleteDoc(doc(db, collectionName, deleteConfirmId));
+
       const orderDocId = collectionName === 'sys_pages' ? 'page_order' : 'tab_order';
       const currentOrderItems = collectionName === 'sys_pages' ? pageOrderItems : tabOrderItems;
       const { setDoc } = await import('firebase/firestore');
@@ -545,7 +663,7 @@ export function PagesAdmin() {
               </div>
             </div>
           </div>
-          <div className="px-6 md:px-10 pb-6 md:pb-10 flex flex-col pt-0 gap-10 overflow-y-auto mt-2 relative min-h-[400px]">
+          <div ref={scrollContainerRef} className="px-6 md:px-10 pb-6 md:pb-10 flex flex-col pt-0 gap-10 overflow-y-auto mt-2 relative min-h-[400px]">
             <AnimatePresence>
               {isResettingAll && (
                 <motion.div

package/src/pages/StorageAdmin.tsx

@@ -185,7 +185,7 @@ export function StorageAdmin() {
 
       return onSnapshot(q, (snap) => {
         const newData = (snap.docs || []).map(d => ({ _id: d.id, accessPrefix: pfx as any, ...d.data() }) as StorageRecord);
-        
+
         setRecords(prev => {
           // Filter out existing records for this prefix and add new ones
           const otherPrefixes = prev.filter(r => r.accessPrefix !== pfx);
@@ -381,7 +381,7 @@ export function StorageAdmin() {
         </div>
       </motion.div>
 
-      <div 
+      <div
         className="flex flex-col gap-6 flex-1 pb-16"
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
@@ -515,7 +515,7 @@ export function StorageAdmin() {
                             onBlur={() => executeRename()}
                             onKeyDown={e => { if (e.key === 'Enter') executeRename(); if (e.key === 'Escape') setRenameFile(null); }}
                             onClick={e => e.stopPropagation()}
-                            className="text-[12.5px] font-bold text-foreground bg-transparent border-b border-accent/30 outline-none pb-0.5 w-full"
+                            className="no-glow text-[12.5px] font-bold text-foreground bg-transparent border-b border-accent/30 outline-none pb-0.5 w-full"
                           />
                         ) : (
                           <span className="text-[12.5px] font-bold text-foreground truncate select-none group-hover:text-accent transition-colors" title={rec.fileName}>{rec.fileName}</span>
@@ -624,7 +624,7 @@ export function StorageAdmin() {
                       value={stagedName}
                       onChange={e => setStagedName(e.target.value)}
                       disabled={isUploading}
-                      className="w-full bg-foreground/[0.02] border border-[var(--panel-border)] rounded-xl px-4 py-3.5 text-[14px] font-bold text-foreground outline-none focus:border-accent transition-colors shadow-sm"
+                      className="no-glow w-full bg-foreground/[0.02] border border-[var(--panel-border)] rounded-xl px-4 py-3.5 text-[14px] font-bold text-foreground outline-none focus:border-accent transition-colors shadow-sm"
                     />
                   </div>
 
@@ -731,7 +731,7 @@ export function StorageAdmin() {
       <ConfirmModal
         isOpen={!!confirmDelete}
         title="Confirm Deletion"
-        message={<>Are you entirely sure you wish to delete <strong className="text-foreground truncate block my-0.5">{confirmDelete?.name}</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?.name}</strong> This action is permanent.</>}
         onConfirm={executeDelete}
         onCancel={() => setConfirmDelete(null)}
         isProcessing={isDeleting}
@@ -740,13 +740,13 @@ export function StorageAdmin() {
 
       <AnimatePresence>
         {isDragging && (
-          <motion.div 
+          <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             className="fixed inset-0 z-[1000] bg-background/60 backdrop-blur-md pointer-events-none flex items-center justify-center p-6"
           >
-            <motion.div 
+            <motion.div
               initial={{ scale: 0.9, opacity: 0 }}
               animate={{ scale: 1, opacity: 1 }}
               exit={{ scale: 0.9, opacity: 0 }}
@@ -754,7 +754,7 @@ export function StorageAdmin() {
             >
               <div className="absolute inset-0 bg-accent/5 rounded-[38px] animate-pulse" />
               <div className="w-20 h-20 rounded-full bg-accent/10 flex items-center justify-center text-accent shadow-[0_0_40px_rgba(var(--accent-rgb),0.2)]">
-                 <UploadCloud className="w-10 h-10 animate-bounce" />
+                <UploadCloud className="w-10 h-10 animate-bounce" />
               </div>
               <div className="flex flex-col items-center text-center gap-2 relative z-10">
                 <span className="text-[24px] font-extrabold text-foreground tracking-tight">Drop files to upload</span>

package/src/pages/ThemeAdmin.tsx

@@ -607,6 +607,21 @@ export function ThemeAdmin() {
   const [copiedStatus, setCopiedStatus] = useState<boolean>(false);
   const [showResetConfirm, setShowResetConfirm] = useState<boolean>(false);
 
+  // Persist scroll position
+  useEffect(() => {
+    try {
+      const saved = sessionStorage.getItem('fbos_theme_scrollY');
+      if (saved) {
+        requestAnimationFrame(() => window.scrollTo(0, parseInt(saved, 10)));
+      }
+    } catch {}
+    const handleScroll = () => {
+      try { sessionStorage.setItem('fbos_theme_scrollY', String(window.scrollY)); } catch {}
+    };
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   // Auto-Save: only fires when localConfig actually changes compared to
   // what we last saved. Does NOT depend on activeConfig to avoid the
   // Firestore snapshot echo loop.