fix: pageindex status display and mobile sidebar overlay

Author: amethystani

src/components/DashboardViews/DocumentsView.tsx

@@ -112,11 +112,12 @@ const TreeNodeNode = ({ node, depth = 0 }: { node: PageIndexNode; depth?: number
                             <span className="text-[10px] font-mono text-[#FFB286] bg-[#FF8A5B]/10 px-1.5 py-0.5 rounded">
                                 {pageLabel}
                             </span>
-                        ) : node.node_id ? (
-                            <span className="text-[10px] font-mono text-white/40 bg-white/5 px-1.5 py-0.5 rounded">
-                                ID
-                            </span>
                         ) : null}
+                        {node.node_id && (
+                            <span className="text-[10px] font-mono text-white/40 bg-white/5 px-1.5 py-0.5 rounded truncate max-w-[120px]">
+                                {node.node_id}
+                            </span>
+                        )}
                         <h4 className="text-sm font-medium text-white/90 truncate group-hover:text-white">
                             {titleText}
                         </h4>
@@ -126,6 +127,11 @@ const TreeNodeNode = ({ node, depth = 0 }: { node: PageIndexNode; depth?: number
                             {summaryText}
                         </p>
                     )}
+                    {!summaryText && isExpanded && (
+                        <p className="text-xs text-white/30 mt-1 italic leading-relaxed">
+                            No summary available
+                        </p>
+                    )}
                 </div>
             </div>
 

src/components/Layout/Sidebar/MobileSidebar.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { createPortal } from 'react-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { X } from 'lucide-react';
 import { useTheme } from '../../../hooks/useTheme';
@@ -28,7 +29,7 @@ export default function MobileSidebar({
   const { isDark } = useTheme();
   const navigate = useNavigate();
 
-  return (
+  const content = (
     <AnimatePresence>
       {isOpen && (
         <>
@@ -54,7 +55,8 @@ export default function MobileSidebar({
             }}
             className={cn(
               "fixed inset-x-0 bottom-0 z-50",
-              "h-auto max-h-[85vh] overflow-y-auto", // Increased height and added scroll
+              "h-auto max-h-[85vh] max-h-[85dvh] overflow-y-auto overscroll-contain",
+              "pb-[max(1rem,env(safe-area-inset-bottom))]",
               "rounded-t-[1.25rem] shadow-2xl",
               isDark
                 ? [
@@ -129,4 +131,7 @@ export default function MobileSidebar({
       )}
     </AnimatePresence>
   );
-}
+
+  if (typeof document === 'undefined') return content;
+  return createPortal(content, document.body);
+}

src/components/PageIndex/PageIndexView.tsx

@@ -58,11 +58,12 @@ const TreeNode = ({ node, depth = 0 }: { node: PageIndexNode; depth?: number })
                             <span className="text-[10px] font-mono text-[#FFB286] bg-[#FF8A5B]/10 px-1.5 py-0.5 rounded">
                                 {pageLabel}
                             </span>
-                        ) : node.node_id ? (
-                            <span className="text-[10px] font-mono text-white/40 bg-white/5 px-1.5 py-0.5 rounded">
-                                ID
-                            </span>
                         ) : null}
+                        {node.node_id && (
+                            <span className="text-[10px] font-mono text-white/40 bg-white/5 px-1.5 py-0.5 rounded truncate max-w-[120px]">
+                                {node.node_id}
+                            </span>
+                        )}
                         <h4 className="text-sm font-medium text-white/90 truncate group-hover:text-white">
                             {titleText}
                         </h4>
@@ -72,6 +73,11 @@ const TreeNode = ({ node, depth = 0 }: { node: PageIndexNode; depth?: number })
                             {summaryText}
                         </p>
                     )}
+                    {!summaryText && isExpanded && (
+                        <p className="text-xs text-white/30 mt-1 italic leading-relaxed">
+                            No summary available
+                        </p>
+                    )}
                 </div>
             </div>
 

src/services/pageIndexService.ts

@@ -97,7 +97,7 @@ class PageIndexService {
             const treeResponse = await this.fetchTreeStatus(docId);
             const status = treeResponse.status;
 
-            if (status === 'completed' && treeResponse.result) {
+            if (treeResponse.result && treeResponse.result.length > 0) {
                 return treeResponse.result || [];
             } else if (status === 'failed') {
                 throw new Error('PageIndex processing failed');