Fix page refresh on navigation and folder clicks - use button elements and prevent default

.dockerignore

@@ -1,16 +0,0 @@
-.git
-.gitignore
-.DS_Store
-__pycache__
-*.pyc
-.pytest_cache
-.env
-venv/
-env/
-logs/
-data/
-*.log
-.vscode
-.idea
-node_modules
-.env.local

Dockerfile

@@ -1,28 +0,0 @@
-# Use official Python runtime as a parent image
-FROM python:3.10-slim
-
-# Set working directory in container
-WORKDIR /app
-
-# Copy requirements first for better caching
-COPY server/requirements.txt .
-
-# Install Python dependencies
-RUN pip install --no-cache-dir -r requirements.txt
-
-# Copy the entire project
-COPY . .
-
-# Create data and logs directories
-RUN mkdir -p data logs
-
-# Set environment variables
-ENV FLASK_APP=server/app.py
-ENV FLASK_ENV=production
-ENV PYTHONUNBUFFERED=1
-
-# Expose port 5000 for Flask
-EXPOSE 5000
-
-# Run the Flask application
-CMD ["python", "-m", "flask", "run", "--host", "0.0.0.0"]

README.md

@@ -3,7 +3,9 @@ title: DocVault App
 emoji: 📁
 colorFrom: blue
 colorTo: purple
-sdk: docker
+sdk: static
+app_file: index.html
+pinned: false
 ---
 
 # DocVault - Offline-First Document Storage System

app.js

@@ -1,19 +1,7 @@
 // DocVault — Offline-First Document Storage System
 // Uses local Flask backend for all operations
 
-// Determine API base URL based on environment
-const API_BASE = (() => {
-  const host = window.location.hostname;
-  const isLocal = ['localhost', '127.0.0.1'].includes(host);
-  
-  if (isLocal) {
-    return 'http://localhost:5000/api';
-  } else {
-    // For HF Spaces and other deployments, use root path
-    return '/api';
-  }
-})();
-
+const API_BASE = 'http://localhost:5000/api';
 const USER_ID = 'default_user';
 const DEFAULT_FOLDER = '';
 
@@ -36,17 +24,26 @@ async function apiFetch(endpoint, options = {}) {
 async function listFilesAPI(path = DEFAULT_FOLDER) {
   try {
     const queryPath = path ? `?folder_path=${encodeURIComponent(path)}` : '';
+    const url = `${API_BASE}/list${queryPath}`;
+    console.log('Fetching from URL:', url); // Debug
     const res = await apiFetch(`/list${queryPath}`);
     
+    console.log('API Response status:', res.status); // Debug
+    
     if (!res.ok) {
-      if (res.status === 404) return { files: [], folders: [] };
-      throw new Error(`Failed to list files: ${res.status}`);
+      if (res.status === 404) {
+        console.warn('Path not found, returning empty list'); // Debug
+        return { files: [], folders: [] };
+      }
+      throw new Error(`Failed to list files: ${res.status} ${res.statusText}`);
     }
     
     const data = await res.json();
+    console.log('API Data:', data); // Debug
+    
     if (!data.success) {
       console.error('API error:', data.error);
-      return { files: [], folders: [] };
+      throw new Error(data.error || 'API returned success: false');
     }
     
     const files = (data.files || []).map(f => ({
@@ -66,9 +63,11 @@ async function listFilesAPI(path = DEFAULT_FOLDER) {
       modified_at: f.modified_at
     }));
 
+    console.log('Parsed folders:', folders.length, 'files:', files.length); // Debug
     return { files, folders };
   } catch (err) {
     console.error('List files error:', err);
+    showToast(`Error loading files: ${err.message}`, 'error');
     return { files: [], folders: [] };
   }
 }
@@ -79,23 +78,32 @@ async function uploadFileAPI(file, destPath) {
     const fileBlob = file instanceof File ? file : file.content;
     const filename = file instanceof File ? file.name : (file.name || 'upload.bin');
     
+    console.log('Uploading file:', filename, 'to:', folderPath); // Debug
+    
     const formData = new FormData();
     formData.append('folder_path', folderPath);
     formData.append('file', fileBlob, filename);
     
-    const res = await fetch(`${API_BASE}/upload-file`, {
+    const url = `${API_BASE}/upload-file`;
+    console.log('Upload endpoint:', url); // Debug
+    
+    const res = await fetch(url, {
       method: 'POST',
       headers: { 'X-User-ID': USER_ID },
       body: formData
     });
     
+    console.log('Upload response status:', res.status); // Debug
+    
     if (!res.ok) {
-      const errData = await res.json();
-      throw new Error(errData.error || `Upload failed: ${res.status}`);
+      const errData = await res.json().catch(() => ({ error: `HTTP ${res.status}` }));
+      throw new Error(errData.error || `Upload failed: ${res.status} ${res.statusText}`);
     }
     
     const data = await res.json();
-    if (!data.success) throw new Error(data.error);
+    console.log('Upload API response:', data); // Debug
+    
+    if (!data.success) throw new Error(data.error || 'Upload API returned success: false');
     
     return data;
   } catch (err) {
@@ -362,6 +370,7 @@ function showSkeletons(container, count = 6) {
 // ─── FETCH FILES ──────────────────────────────────────────
 async function fetchAndRender() {
   if (isFetching) {
+    console.warn('Already fetching, ignoring request');
     return;
   }
   isFetching = true;
@@ -372,11 +381,16 @@ async function fetchAndRender() {
   showSkeletons(filesContainer,   6);
   try {
     const prefix   = getFolderPath();
+    console.log('Fetching contents for path:', prefix); // Debug
     const pathSnapshot = JSON.stringify(currentPath); // Capture for safety check
     const { files, folders } = await listFilesAPI(prefix);
     
+    console.log('API returned:', { folders: folders.length, files: files.length }); // Debug
+    
     // SAFETY CHECK: Path may have changed due to user clicking elsewhere
     if (JSON.stringify(currentPath) !== pathSnapshot) {
+      console.log('Path changed during fetch'); // Debug
+      isFetching = false;
       return;
     }
     
@@ -504,26 +518,23 @@ function renderFolders(folders) {
         </div>
       </div>`;
 
-    // NAVIGATION HANDLER - Use a self-contained function to avoid closure issues
-    const handleFolderClick = (e) => {
+    // FIXED: Simplified folder click handler
+    card.addEventListener('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      
       // Don't navigate if clicking on the actions menu
       if (e.target.closest('.folder-actions')) {
         return;
       }
 
-      // Stop all propagation for actual navigation clicks
-      e.preventDefault();
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-      
       // Navigate into the folder
-      currentPath.push(name);
-      addToRecent(folder.path, name, 'folder');
+      const folderName = folder.path.split('/').pop();
+      console.log('Navigating to folder:', folderName, 'Full path:', folder.path); // Debug
+      currentPath.push(folderName);
+      addToRecent(folder.path, folderName, 'folder');
       fetchAndRender();
-      return false;
-    };
-    
-    card.addEventListener('click', handleFolderClick, true); // Use capture phase
+    });
 
     // Attach menu functionality
     attachCardMenu(card, folder.path, 'folder');
@@ -860,7 +871,10 @@ function hideProgress() { uploadProgress.classList.remove('active'); }
 
 // ─── FILE INPUT ───────────────────────────────────────────
 fileInput.addEventListener('change', () => {
-  uploadFiles(fileInput.files);
+  console.log('File input changed, files:', fileInput.files.length); // Debug
+  if (fileInput.files && fileInput.files.length > 0) {
+    uploadFiles(fileInput.files);
+  }
   fileInput.value = '';
 });
 
@@ -877,9 +891,24 @@ createFolderBtn.addEventListener('click', () => {
   createFolderModal.classList.add('active');
   setTimeout(() => folderNameInput.focus(), 100);
 });
-uploadFileBtn.addEventListener('click', () => {
+uploadFileBtn.addEventListener('click', (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+  console.log('Upload button clicked'); // Debug
   newDropdown.classList.remove('active');
-  fileInput.click();
+  // Use try-catch in case fileInput doesn't exist
+  try {
+    if (fileInput) {
+      fileInput.click();
+      console.log('fileInput.click() called'); // Debug
+    } else {
+      console.error('fileInput element not found');
+      showToast('Error: File input not available', 'error');
+    }
+  } catch (err) {
+    console.error('Error clicking file input:', err);
+    showToast('Error: Could not open file dialog', 'error');
+  }
 });
 
 // ─── CREATE FOLDER ────────────────────────────────────────
@@ -921,26 +950,37 @@ function setNavActive(nav) {
 }
 
 navMyFiles.addEventListener('click', (e) => {
+  console.log('navMyFiles clicked'); // Debug
   e.preventDefault();
   e.stopPropagation();
   e.stopImmediatePropagation();
-  currentBrowse = 'files'; currentPath = [];
+  currentBrowse = 'files'; 
+  currentPath = [];
   setNavActive(navMyFiles);
   fetchAndRender();
+  return false;
 });
 
 navRecent.addEventListener('click', (e) => {
+  console.log('navRecent clicked'); // Debug
   e.preventDefault();
+  e.stopPropagation();
+  e.stopImmediatePropagation();
   currentBrowse = 'recent';
   setNavActive(navRecent);
   renderRecentView();
+  return false;
 });
 
 navStarred.addEventListener('click', (e) => {
+  console.log('navStarred clicked'); // Debug
   e.preventDefault();
+  e.stopPropagation();
+  e.stopImmediatePropagation();
   currentBrowse = 'starred';
   setNavActive(navStarred);
   renderStarredView();
+  return false;
 });
 
 function renderRecentView() {
@@ -1080,6 +1120,16 @@ confirmRenameBtn.addEventListener('click', async () => {
 // ─── INIT ─────────────────────────────────────────────────
 // Initialize offline-first DocVault
 (function initApp() {
+  console.log('🚀 DocVault initializing...'); // Debug
+  console.log('API_BASE:', API_BASE); // Debug
+  console.log('USER_ID:', USER_ID); // Debug
+  console.log('DOM Elements check:', {
+    fileInput: !!fileInput,
+    uploadFileBtn: !!uploadFileBtn,
+    foldersContainer: !!foldersContainer,
+    filesContainer: !!filesContainer
+  }); // Debug
+  
   // Show welcome message
   showToast('🎉 Welcome to DocVault! Loading your files...', 'info');
   

index.html

@@ -38,29 +38,29 @@
             </div>
 
             <div class="new-btn-wrapper">
-                <button class="btn-primary new-btn" id="newBtn">
+                <button type="button" class="btn-primary new-btn" id="newBtn">
                     <i class="ph-bold ph-plus"></i> New
                 </button>
                 <div class="new-dropdown" id="newDropdown">
-                    <button class="new-dropdown-item" id="createFolderBtn">
+                    <button type="button" class="new-dropdown-item" id="createFolderBtn">
                         <i class="ph-fill ph-folder-plus"></i> Create Folder
                     </button>
-                    <button class="new-dropdown-item" id="uploadFileBtn">
+                    <button type="button" class="new-dropdown-item" id="uploadFileBtn">
                         <i class="ph-fill ph-upload-simple"></i> Upload File
                     </button>
                 </div>
             </div>
 
             <nav class="sidebar-nav">
-                <a href="#" class="nav-item active" id="navMyFiles">
+                <button type="button" class="nav-item active" id="navMyFiles">
                     <i class="ph-fill ph-folder"></i> My Files
-                </a>
-                <a href="#" class="nav-item" id="navRecent">
+                </button>
+                <button type="button" class="nav-item" id="navRecent">
                     <i class="ph-fill ph-clock-counter-clockwise"></i> Recent
-                </a>
-                <a href="#" class="nav-item" id="navStarred">
+                </button>
+                <button type="button" class="nav-item" id="navStarred">
                     <i class="ph-fill ph-star"></i> Starred
-                </a>
+                </button>
             </nav>
 
             <div class="sidebar-bottom">
@@ -102,8 +102,8 @@
                 <div class="section-header">
                     <h2>Folders</h2>
                     <div class="view-toggles">
-                        <button class="icon-btn active" id="viewGrid" title="Grid"><i class="ph-fill ph-squares-four"></i></button>
-                        <button class="icon-btn" id="viewList" title="List"><i class="ph-fill ph-list-dashes"></i></button>
+                        <button type="button" class="icon-btn active" id="viewGrid" title="Grid"><i class="ph-fill ph-squares-four"></i></button>
+                        <button type="button" class="icon-btn" id="viewList" title="List"><i class="ph-fill ph-list-dashes"></i></button>
                     </div>
                 </div>
                 <div class="grid-container" id="foldersContainer"></div>
@@ -121,14 +121,14 @@
     <!-- Create Folder -->
     <div class="modal-overlay" id="createFolderModal">
         <div class="modal glass-panel">
-            <button class="close-modal" id="closeNameModal"><i class="ph-bold ph-x"></i></button>
+            <button type="button" class="close-modal" id="closeNameModal"><i class="ph-bold ph-x"></i></button>
             <h3><i class="ph-fill ph-folder-plus" style="color:var(--folder-color);margin-right:10px"></i>New Folder</h3>
             <div class="input-group">
                 <input type="text" id="folderNameInput" placeholder="Enter folder name..." autocomplete="off">
             </div>
             <div class="modal-footer">
-                <button class="btn-secondary" id="cancelFolderBtn">Cancel</button>
-                <button class="btn-primary" id="confirmFolderBtn">Create</button>
+                <button type="button" class="btn-secondary" id="cancelFolderBtn">Cancel</button>
+                <button type="button" class="btn-primary" id="confirmFolderBtn">Create</button>
             </div>
         </div>
     </div>
@@ -136,14 +136,14 @@
     <!-- Delete Confirmation -->
     <div class="modal-overlay" id="deleteModal">
         <div class="modal glass-panel" style="max-width:360px">
-            <button class="close-modal" id="closeDeleteModal"><i class="ph-bold ph-x"></i></button>
+            <button type="button" class="close-modal" id="closeDeleteModal"><i class="ph-bold ph-x"></i></button>
             <div class="delete-icon-wrap"><i class="ph-fill ph-warning"></i></div>
             <p style="text-align:center; margin-bottom:20px; font-size:15px; color:var(--text-main);">
                 Are you sure you want to delete <strong>this item</strong>?
             </p>
             <div class="modal-footer" style="justify-content:center;gap:16px">
-                <button class="btn-secondary" id="cancelDeleteBtn">Cancel</button>
-                <button class="btn-danger" id="confirmDeleteBtn"><i class="ph-fill ph-trash"></i> Delete</button>
+                <button type="button" class="btn-secondary" id="cancelDeleteBtn">Cancel</button>
+                <button type="button" class="btn-danger" id="confirmDeleteBtn"><i class="ph-fill ph-trash"></i> Delete</button>
             </div>
         </div>
     </div>
@@ -151,15 +151,15 @@
     <!-- Rename Modal -->
     <div class="modal-overlay" id="renameModal">
         <div class="modal glass-panel" style="max-width:400px">
-            <button class="close-modal" id="closeRenameModal"><i class="ph-bold ph-x"></i></button>
+            <button type="button" class="close-modal" id="closeRenameModal"><i class="ph-bold ph-x"></i></button>
             <h3><i class="ph-fill ph-pencil-simple" style="color:var(--primary-color)"></i> Rename File</h3>
             <div class="input-group">
                 <label class="input-label">New Name</label>
                 <input type="text" id="renameInput" placeholder="Enter new name..." autocomplete="off">
             </div>
             <div class="modal-footer">
-                <button class="btn-secondary" id="cancelRenameBtn">Cancel</button>
-                <button class="btn-primary" id="confirmRenameBtn"><i class="ph-fill ph-check"></i> Rename</button>
+                <button type="button" class="btn-secondary" id="cancelRenameBtn">Cancel</button>
+                <button type="button" class="btn-primary" id="confirmRenameBtn"><i class="ph-fill ph-check"></i> Rename</button>
             </div>
         </div>
     </div>
@@ -175,8 +175,8 @@
                     <span id="previewFileName">filename.pdf</span>
                 </div>
                 <div style="display:flex; gap:12px">
-                    <button class="icon-btn" id="downloadFromPreview" title="Download"><i class="ph-bold ph-download-simple"></i></button>
-                    <button class="close-modal" id="closePreviewModal" style="position:static"><i class="ph-bold ph-x"></i></button>
+                    <button type="button" class="icon-btn" id="downloadFromPreview" title="Download"><i class="ph-bold ph-download-simple"></i></button>
+                    <button type="button" class="close-modal" id="closePreviewModal" style="position:static"><i class="ph-bold ph-x"></i></button>
                 </div>
             </div>
             <div class="preview-body" id="previewBody">
@@ -185,6 +185,6 @@
         </div>
     </div>
 
-    <script src="app.js"></script>
+    <script type="module" src="js/main.js?v=2"></script>
 </body>
 </html>

js/api/hfService.js

@@ -37,34 +37,42 @@ class HFService {
     }
   }
 
-  async listFiles(path = '', recursive = false) {
-    const cacheKey = `list-${path}-${recursive}`;
+  async listFiles(path = '') {
+    const cacheKey = `list-${path}`;
     const cached = this.cache.get(cacheKey);
     if (cached && (Date.now() - cached.timestamp < CACHE_TTL)) {
       return cached.data;
     }
 
-    const url = `${this.apiBase}/list?path=${encodeURIComponent(path)}&recursive=${recursive}`;
-    const res = await this.fetchWithRetry(url);
+    const queryPath = path ? `?folder_path=${encodeURIComponent(path)}` : '';
+    const url = `${this.apiBase}/list${queryPath}`;
+    
+    // Add X-User-ID header to match app.py expected requests
+    const res = await this.fetchWithRetry(url, { headers: { 'X-User-ID': 'default_user' } });
     const data = await res.json();
 
     const result = { files: [], folders: [] };
 
-    if (Array.isArray(data)) {
-      for (const item of data) {
-        if (item.type === 'file' && !item.path.endsWith('/.gitkeep') && item.path !== '.gitkeep') {
-          result.files.push({
-            path: item.path,
-            name: item.path.split('/').pop(),
-            size: item.size || 0,
-            type: 'file',
-            lastModified: item.lastModified
-          });
-        } else if (item.type === 'directory') {
+    if (data && data.success) {
+      if (data.files) {
+        for (const item of data.files) {
+          if (!item.path.endsWith('/.gitkeep') && item.path !== '.gitkeep') {
+            result.files.push({
+              path: item.path,
+              name: item.name,
+              size: item.size || 0,
+              type: 'file',
+              lastModified: item.modified_at
+            });
+          }
+        }
+      }
+      if (data.folders) {
+        for (const item of data.folders) {
           result.folders.push({
             path: item.path,
-            name: item.path.split('/').pop(),
-            type: 'directory'
+            name: item.name,
+            type: 'folder'
           });
         }
       }
@@ -75,17 +83,20 @@ class HFService {
   }
 
   async uploadFile(file, destPath) {
-    const base64Content = await this.fileToBase64(file);
-    const url = `${this.apiBase}/upload`;
+    const formData = new FormData();
+    const folderPath = destPath.includes('/') ? destPath.substring(0, destPath.lastIndexOf('/')) : '';
+    const filename = file instanceof File ? file.name : destPath.split('/').pop();
+    const fileBlob = file instanceof File ? file : new Blob([file.content || '']);
+    
+    formData.append('folder_path', folderPath);
+    formData.append('file', fileBlob, filename);
+
+    const url = `${this.apiBase}/upload-file`;
 
     const res = await this.fetchWithRetry(url, {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        path: destPath,
-        content: base64Content,
-        summary: `Upload ${destPath.split('/').pop()}`
-      }),
+      headers: { 'X-User-ID': 'default_user' }, // Let browser set Content-Type with boundary
+      body: formData
     });
 
     this.clearCache();
@@ -93,11 +104,11 @@ class HFService {
   }
 
   async deleteFile(path) {
-    const url = `${this.apiBase}/delete`;
+    const url = `${this.apiBase}/delete-file`;
     await this.fetchWithRetry(url, {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ path }),
+      headers: { 'Content-Type': 'application/json', 'X-User-ID': 'default_user' },
+      body: JSON.stringify({ file_path: path }),
     });
 
     this.clearCache();
@@ -108,24 +119,14 @@ class HFService {
     const url = `${this.apiBase}/delete-folder`;
     const res = await this.fetchWithRetry(url, {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ path: folderPath }),
+      headers: { 'Content-Type': 'application/json', 'X-User-ID': 'default_user' },
+      body: JSON.stringify({ folder_path: folderPath, force: true }),
     });
 
     this.clearCache();
     return await res.json();
   }
 
-  async fileToBase64(file) {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      const blob = file instanceof File ? file : file.content;
-      reader.readAsDataURL(blob);
-      reader.onload = () => resolve(reader.result.split(',')[1]);
-      reader.onerror = reject;
-    });
-  }
-
   clearCache() {
     this.cache.clear();
   }

js/main.js

@@ -1,4 +1,4 @@
-import { hfService } from './api/hfService.js';
+import { hfService } from './api/hfService.js?v=2';
 import { stateManager } from './state/stateManager.js';
 import { UIRenderer } from './ui/uiRenderer.js';
 import { getFileUrl, isImage, isPDF, isText } from './utils/formatters.js';
@@ -97,11 +97,15 @@ class App {
       e.stopPropagation();
       document.getElementById('newDropdown').classList.toggle('active');
     };
-    document.getElementById('uploadFileBtn').onclick = () => {
+    document.getElementById('uploadFileBtn').onclick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
       document.getElementById('newDropdown').classList.remove('active');
       document.getElementById('fileInput').click();
     };
-    document.getElementById('createFolderBtn').onclick = () => {
+    document.getElementById('createFolderBtn').onclick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
       document.getElementById('newDropdown').classList.remove('active');
       document.getElementById('createFolderModal').classList.add('active');
       document.getElementById('folderNameInput').value = '';

js/ui/uiRenderer.js

@@ -91,6 +91,8 @@ export class UIRenderer {
         <div class="item-meta">Folder</div>`;
 
       card.onclick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
         if (e.target.closest('.card-menu')) return;
         onFolderClick(folder.name);
       };

server/app.py

@@ -39,6 +39,7 @@ def create_app():
     def add_cache_headers(response):
         if response.content_type and ('text/html' in response.content_type or 
                                       'text/javascript' in response.content_type or
+                                      'application/javascript' in response.content_type or
                                       'text/css' in response.content_type):
             response.cache_control.max_age = 0
             response.cache_control.no_cache = True