Add interactive link storage section

index.html

@@ -106,26 +106,55 @@
             </div>
 
             <div class="content-area" id="contentArea">
-                <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>
+                <div id="filesView">
+                    <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>
+                        </div>
                     </div>
-                </div>
-                <div class="grid-container" id="foldersContainer"></div>
-
-                <div class="section-header mt-8">
-                    <h2>Files</h2>
-                </div>
-                <div class="grid-container" id="filesContainer"></div>
+                    <div class="grid-container" id="foldersContainer"></div>
 
-                <!-- Links Section -->
-                <div id="linksSection" style="display:none;">
                     <div class="section-header mt-8">
-                        <h2>Your Links</h2>
+                        <h2>Files</h2>
                     </div>
-                    <div class="links-container" id="linksContainer"></div>
+                    <div class="grid-container" id="filesContainer"></div>
+                </div>
+
+                <div id="linksView" class="links-view" style="display:none;">
+                    <section class="links-hero">
+                        <div>
+                            <span class="links-eyebrow">Interactive Link Storage</span>
+                            <h2>Save important websites alongside your documents</h2>
+                            <p>Collect references, dashboards, and research links in one searchable place.</p>
+                        </div>
+                        <button class="btn-primary" id="heroAddLinkBtn">
+                            <i class="ph-fill ph-link-plus"></i> Add Link
+                        </button>
+                    </section>
+
+                    <section class="links-toolbar">
+                        <div class="links-stat-card">
+                            <span class="links-stat-label">Stored Links</span>
+                            <strong id="linksCount">0</strong>
+                        </div>
+                        <div class="links-stat-card">
+                            <span class="links-stat-label">Latest Update</span>
+                            <strong id="linksUpdatedAt">Just now</strong>
+                        </div>
+                        <div class="links-search">
+                            <i class="ph-bold ph-magnifying-glass"></i>
+                            <input type="text" id="linksSearchInput" placeholder="Search title, URL, or notes...">
+                        </div>
+                    </section>
+
+                    <section id="linksSection">
+                        <div class="section-header">
+                            <h2>Your Links</h2>
+                        </div>
+                        <div class="links-container" id="linksContainer"></div>
+                    </section>
                 </div>
             </div>
         </main>
@@ -183,7 +212,7 @@
     <div class="modal-overlay" id="addLinkModal">
         <div class="modal glass-panel" style="max-width:500px">
             <button class="close-modal" id="closeAddLinkModal"><i class="ph-bold ph-x"></i></button>
-            <h3><i class="ph-fill ph-link-plus" style="color:var(--primary-color);margin-right:10px"></i>Add Link</h3>
+            <h3 id="addLinkModalTitle"><i class="ph-fill ph-link-plus" style="color:var(--primary-color);margin-right:10px"></i>Add Link</h3>
             <div class="input-group">
                 <label class="input-label">URL *</label>
                 <input type="url" id="linkUrlInput" placeholder="https://example.com" autocomplete="off">
@@ -198,7 +227,7 @@
             </div>
             <div class="modal-footer">
                 <button class="btn-secondary" id="cancelLinkBtn">Cancel</button>
-                <button class="btn-primary" id="confirmLinkBtn"><i class="ph-fill ph-check"></i> Add Link</button>
+                <button class="btn-primary" id="confirmLinkBtn"><i class="ph-fill ph-check"></i> Save Link</button>
             </div>
         </div>
     </div>

js/api/hfService.js

@@ -238,6 +238,54 @@ class HFService {
     return await res.json();
   }
 
+  async listLinks() {
+    const apiBase = await this.getApiBase();
+    const res = await this.fetchWithRetry(`${apiBase}/links/list`, {
+      headers: { 'X-User-ID': 'default_user' }
+    });
+    const data = await res.json();
+    return Array.isArray(data.links) ? data.links : [];
+  }
+
+  async addLink(payload) {
+    const apiBase = await this.getApiBase();
+    const res = await this.fetchWithRetry(`${apiBase}/links/add`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-User-ID': 'default_user'
+      },
+      body: JSON.stringify(payload)
+    });
+    return await res.json();
+  }
+
+  async updateLink(payload) {
+    const apiBase = await this.getApiBase();
+    const res = await this.fetchWithRetry(`${apiBase}/links/update`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-User-ID': 'default_user'
+      },
+      body: JSON.stringify(payload)
+    });
+    return await res.json();
+  }
+
+  async deleteLink(linkId) {
+    const apiBase = await this.getApiBase();
+    const res = await this.fetchWithRetry(`${apiBase}/links/delete`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-User-ID': 'default_user'
+      },
+      body: JSON.stringify({ link_id: linkId })
+    });
+    return await res.json();
+  }
+
   clearCache() {
     this.cache.clear();
   }

js/main.js

@@ -10,6 +10,7 @@ class App {
     this.hf = hfService;
     this.pendingDelete = null;
     this.pendingRename = null;
+    this.pendingLinkEdit = null;
     this.cachedFolders = [];
     this.currentPreviewObjectUrl = null;
     this.init();
@@ -26,8 +27,13 @@ class App {
   setupNetworkHandling() {
     window.addEventListener('online', () => {
       this.ui.showToast('Back online! Syncing...', 'success');
-      this.fetchAndRender();
+      if (this.state.currentBrowse === 'links') {
+        this.fetchAndRenderLinks();
+      } else {
+        this.fetchAndRender();
+      }
     });
+
     window.addEventListener('offline', () => {
       this.ui.showToast('You are offline. Some features may be limited.', 'warning');
     });
@@ -37,15 +43,17 @@ class App {
     const area = document.getElementById('contentArea');
     if (!area) return;
 
-    ['dragenter', 'dragover'].forEach(evt => {
+    ['dragenter', 'dragover'].forEach((evt) => {
       area.addEventListener(evt, (e) => {
         e.preventDefault();
         e.stopPropagation();
-        area.classList.add('drag-over');
+        if (this.state.currentBrowse !== 'links') {
+          area.classList.add('drag-over');
+        }
       });
     });
 
-    ['dragleave', 'drop'].forEach(evt => {
+    ['dragleave', 'drop'].forEach((evt) => {
       area.addEventListener(evt, (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -54,6 +62,7 @@ class App {
     });
 
     area.addEventListener('drop', (e) => {
+      if (this.state.currentBrowse === 'links') return;
       const files = e.dataTransfer.files;
       if (files.length > 0) {
         this.uploadFiles(files);
@@ -72,58 +81,67 @@ class App {
       }
     };
 
-    // Nav
     document.getElementById('navMyFiles').onclick = (e) => {
       e.preventDefault();
       this.state.setBrowseMode('files');
       this.state.setPath([]);
       this.fetchAndRender();
     };
+
     document.getElementById('navRecent').onclick = (e) => {
       e.preventDefault();
       this.state.setBrowseMode('recent');
       this.render();
     };
+
     document.getElementById('navStarred').onclick = (e) => {
       e.preventDefault();
       this.state.setBrowseMode('starred');
       this.render();
     };
+
     document.getElementById('navLinks').onclick = (e) => {
       e.preventDefault();
       this.state.setBrowseMode('links');
       this.fetchAndRenderLinks();
-      this.updateActiveNavItem();
-      document.getElementById('contentArea').innerHTML = '';
-      document.getElementById('linksSection').style.display = 'block';
-      document.getElementById('breadcrumbs').innerHTML = '<span class="breadcrumb-item active">Links</span>';
     };
 
-    // View Toggles
     document.getElementById('viewGrid').onclick = () => this.state.setViewMode('grid');
     document.getElementById('viewList').onclick = () => this.state.setViewMode('list');
 
-    // Search
     let searchDebounce;
     document.getElementById('searchInput').oninput = (e) => {
+      const value = e.target.value.trim();
       clearTimeout(searchDebounce);
       searchDebounce = setTimeout(() => {
-        this.state.setSearchQuery(e.target.value.trim());
+        if (this.state.currentBrowse === 'links') {
+          this.state.setLinksSearchQuery(value);
+          this.render();
+          return;
+        }
+
+        this.state.setSearchQuery(value);
         this.fetchAndRender();
-      }, 400);
+      }, 250);
+    };
+
+    document.getElementById('linksSearchInput').oninput = (e) => {
+      this.state.setLinksSearchQuery(e.target.value.trim());
+      this.render();
     };
 
-    // New actions
     document.getElementById('newBtn').onclick = (e) => {
       e.stopPropagation();
       document.getElementById('newDropdown').classList.toggle('active');
     };
+
     document.getElementById('uploadFileBtn').onclick = (e) => {
       e.preventDefault();
       e.stopPropagation();
       document.getElementById('newDropdown').classList.remove('active');
       document.getElementById('fileInput').click();
     };
+
     document.getElementById('createFolderBtn').onclick = (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -132,67 +150,66 @@ class App {
       document.getElementById('folderNameInput').value = '';
       document.getElementById('folderNameInput').focus();
     };
+
     document.getElementById('addLinkBtn').onclick = (e) => {
       e.preventDefault();
       e.stopPropagation();
       document.getElementById('newDropdown').classList.remove('active');
-      document.getElementById('addLinkModal').classList.add('active');
-      document.getElementById('linkUrlInput').focus();
+      this.openLinkModal();
     };
 
-    // File Input
+    document.getElementById('heroAddLinkBtn').onclick = () => this.openLinkModal();
+
     document.getElementById('fileInput').onchange = (e) => {
       this.uploadFiles(e.target.files);
       e.target.value = '';
     };
 
     if (contentArea) {
-      contentArea.addEventListener('click', () => {
-        closeSidebarOnCompactView();
-      });
-      contentArea.addEventListener('touchstart', () => {
-        closeSidebarOnCompactView();
-      }, { passive: true });
+      contentArea.addEventListener('click', () => closeSidebarOnCompactView());
+      contentArea.addEventListener(
+        'touchstart',
+        () => closeSidebarOnCompactView(),
+        { passive: true }
+      );
     }
 
-    // Create Folder Modal
     document.getElementById('confirmFolderBtn').onclick = () => this.createFolder();
     document.getElementById('cancelFolderBtn').onclick = () => document.getElementById('createFolderModal').classList.remove('active');
 
-    // Enter on folder name input
     document.getElementById('folderNameInput').addEventListener('keydown', (e) => {
       if (e.key === 'Enter') this.createFolder();
     });
 
-    // Delete Modal
     document.getElementById('confirmDeleteBtn').onclick = () => this.confirmDelete();
     document.getElementById('cancelDeleteBtn').onclick = () => document.getElementById('deleteModal').classList.remove('active');
 
-    // Rename Modal
     document.getElementById('confirmRenameBtn').onclick = () => this.renameItem();
     document.getElementById('cancelRenameBtn').onclick = () => document.getElementById('renameModal').classList.remove('active');
 
-    // Enter on rename input
     document.getElementById('renameInput').addEventListener('keydown', (e) => {
       if (e.key === 'Enter') this.renameItem();
       if (e.key === 'Escape') document.getElementById('renameModal').classList.remove('active');
     });
 
-    // Add Link Modal
-    document.getElementById('confirmLinkBtn').onclick = () => this.addLink();
+    document.getElementById('confirmLinkBtn').onclick = () => this.saveLink();
     document.getElementById('cancelLinkBtn').onclick = () => document.getElementById('addLinkModal').classList.remove('active');
 
-    // Enter on link URL input
     document.getElementById('linkUrlInput').addEventListener('keydown', (e) => {
       if (e.key === 'Enter') document.getElementById('linkTitleInput').focus();
     });
+
+    document.getElementById('linkDescriptionInput').addEventListener('keydown', (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+        this.saveLink();
+      }
+    });
+
     document.addEventListener('click', () => {
       document.getElementById('newDropdown').classList.remove('active');
-      // Close all dropdown menus
-      document.querySelectorAll('.dropdown-menu.open').forEach(m => m.classList.remove('open'));
+      document.querySelectorAll('.dropdown-menu.open').forEach((m) => m.classList.remove('open'));
     });
 
-    // Mobile Toggle
     if (menuToggle && sidebar) {
       menuToggle.onclick = (e) => {
         e.stopPropagation();
@@ -200,15 +217,11 @@ class App {
       };
     }
 
-    // Close sidebar on navigation (mobile)
-    document.querySelectorAll('.nav-item').forEach(item => {
-      item.addEventListener('click', () => {
-        closeSidebarOnCompactView();
-      });
+    document.querySelectorAll('.nav-item').forEach((item) => {
+      item.addEventListener('click', () => closeSidebarOnCompactView());
     });
 
-    // Modals Close via X button
-    document.querySelectorAll('.close-modal').forEach(btn => {
+    document.querySelectorAll('.close-modal').forEach((btn) => {
       btn.onclick = () => {
         const modal = btn.closest('.modal-overlay');
         if (modal && modal.id === 'previewModal') {
@@ -219,8 +232,7 @@ class App {
       };
     });
 
-    // Modals close on overlay click
-    document.querySelectorAll('.modal-overlay').forEach(overlay => {
+    document.querySelectorAll('.modal-overlay').forEach((overlay) => {
       overlay.addEventListener('click', (e) => {
         if (e.target === overlay) {
           if (overlay.id === 'previewModal') {
@@ -234,9 +246,26 @@ class App {
     });
   }
 
+  setContentView(mode) {
+    const filesView = document.getElementById('filesView');
+    const linksView = document.getElementById('linksView');
+    const searchInput = document.getElementById('searchInput');
+    const isLinksMode = mode === 'links';
+
+    if (filesView) filesView.style.display = isLinksMode ? 'none' : 'block';
+    if (linksView) linksView.style.display = isLinksMode ? 'block' : 'none';
+    if (searchInput) {
+      searchInput.placeholder = isLinksMode
+        ? 'Search stored links...'
+        : 'Search files or folders...';
+      searchInput.value = isLinksMode ? this.state.linksSearchQuery : this.state.searchQuery;
+    }
+  }
+
   async fetchAndRender() {
     if (this.state.isFetching) return;
     this.state.isFetching = true;
+    this.setContentView('files');
     this.ui.showSkeletons();
 
     try {
@@ -259,16 +288,40 @@ class App {
     }
   }
 
+  async fetchAndRenderLinks() {
+    this.setContentView('links');
+    const linksContainer = document.getElementById('linksContainer');
+    if (linksContainer) {
+      linksContainer.innerHTML = `
+        <div class="links-empty">
+          <div class="spinner"></div>
+          <h3>Loading your links</h3>
+          <p>Pulling saved websites from your vault.</p>
+        </div>
+      `;
+    }
+
+    try {
+      this.state.cachedLinks = await this.hf.listLinks();
+      this.render();
+    } catch (err) {
+      console.error('Fetch links error:', err);
+      this.state.cachedLinks = [];
+      this.render();
+      this.ui.showToast(err.message || 'Failed to load links', 'error');
+    }
+  }
+
   async updateStorageStats() {
     try {
-      const { files } = await this.hf.listFiles('', true);
+      const { files } = await this.hf.listFiles('');
       const totalSize = files.reduce((sum, f) => sum + (f.size || 0), 0);
       const count = files.length;
 
       document.getElementById('storageUsageText').textContent = `${count} files • ${this.formatSize(totalSize)} used`;
-      const MAX_STORAGE = 10 * 1024 * 1024 * 1024; // 10GB
+      const MAX_STORAGE = 10 * 1024 * 1024 * 1024;
       const pct = Math.min((totalSize / MAX_STORAGE) * 100, 100);
-      document.getElementById('storageProgress').style.width = pct + '%';
+      document.getElementById('storageProgress').style.width = `${pct}%`;
     } catch (err) {
       console.error('Storage stats error:', err);
     }
@@ -279,12 +332,27 @@ class App {
     const k = 1024;
     const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+  }
+
+  formatRelativeDate(value) {
+    if (!value) return 'Just now';
+    const diffMs = Date.now() - new Date(value).getTime();
+    if (Number.isNaN(diffMs)) return 'Just now';
+
+    const minutes = Math.floor(diffMs / 60000);
+    if (minutes < 1) return 'Just now';
+    if (minutes < 60) return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    if (days < 7) return `${days}d ago`;
+    return new Date(value).toLocaleDateString();
   }
 
   buildStarredDisplayFiles() {
-    const cachedByPath = new Map(this.state.cachedFiles.map(file => [file.path, file]));
-    const recentByPath = new Map(this.state.recent.map(file => [file.path, file]));
+    const cachedByPath = new Map(this.state.cachedFiles.map((file) => [file.path, file]));
+    const recentByPath = new Map(this.state.recent.map((file) => [file.path, file]));
 
     return this.state.starred.map((path) => {
       const cached = cachedByPath.get(path);
@@ -310,8 +378,31 @@ class App {
     });
   }
 
+  getFilteredLinks() {
+    const query = this.state.linksSearchQuery.toLowerCase();
+    const links = Array.isArray(this.state.cachedLinks) ? this.state.cachedLinks : [];
+    if (!query) return links;
+
+    return links.filter((link) => {
+      const haystack = [link.title, link.url, link.description]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+      return haystack.includes(query);
+    });
+  }
+
   render() {
     const browseMode = this.state.currentBrowse;
+    this.setContentView(browseMode);
+
+    if (browseMode === 'links') {
+      document.getElementById('breadcrumbs').innerHTML = '<span class="breadcrumb-item active">Links</span>';
+      this.renderLinks(this.getFilteredLinks());
+      this.updateActiveNavItem();
+      return;
+    }
+
     let displayFiles = [];
     let displayFolders = [];
 
@@ -330,17 +421,21 @@ class App {
       document.getElementById('breadcrumbs').innerHTML = '<span class="breadcrumb-item active">Starred</span>';
     }
 
-    // Filter by search
     if (this.state.searchQuery) {
       const q = this.state.searchQuery.toLowerCase();
-      displayFiles = displayFiles.filter(f => f.name.toLowerCase().includes(q));
-      displayFolders = displayFolders.filter(f => f.name.toLowerCase().includes(q));
+      displayFiles = displayFiles.filter((f) => f.name.toLowerCase().includes(q));
+      displayFolders = displayFolders.filter((f) => f.name.toLowerCase().includes(q));
     }
 
-    this.ui.renderFolders(displayFolders, (name) => {
-      this.state.setPath([...this.state.currentPath, name]);
-      this.fetchAndRender();
-    }, (path, name) => this.openRenameModal(path, name), (path, name) => this.openDeleteModal(path, name));
+    this.ui.renderFolders(
+      displayFolders,
+      (name) => {
+        this.state.setPath([...this.state.currentPath, name]);
+        this.fetchAndRender();
+      },
+      (path, name) => this.openRenameModal(path, name),
+      (path, name) => this.openDeleteModal(path, name)
+    );
 
     this.ui.renderFiles(displayFiles, {
       onPreview: (file) => this.openPreview(file),
@@ -359,6 +454,104 @@ class App {
     this.updateActiveNavItem();
   }
 
+  renderLinks(links) {
+    const linksContainer = document.getElementById('linksContainer');
+    const linksCount = document.getElementById('linksCount');
+    const linksUpdatedAt = document.getElementById('linksUpdatedAt');
+
+    if (!linksContainer) return;
+
+    const totalLinks = Array.isArray(this.state.cachedLinks) ? this.state.cachedLinks.length : 0;
+    const latestUpdated = [...(this.state.cachedLinks || [])]
+      .map((link) => link.updated_at || link.created_at)
+      .filter(Boolean)
+      .sort((a, b) => new Date(b) - new Date(a))[0];
+
+    if (linksCount) linksCount.textContent = String(totalLinks);
+    if (linksUpdatedAt) linksUpdatedAt.textContent = this.formatRelativeDate(latestUpdated);
+
+    if (!links.length) {
+      const hasSearch = Boolean(this.state.linksSearchQuery);
+      linksContainer.innerHTML = `
+        <div class="links-empty">
+          <i class="ph-fill ph-link"></i>
+          <h3>${hasSearch ? 'No links match your search' : 'No links saved yet'}</h3>
+          <p>${hasSearch ? 'Try a different title, URL, or note.' : 'Add your first site to start building your link vault.'}</p>
+          ${hasSearch ? '' : '<button class="btn-primary" id="emptyStateAddLinkBtn"><i class="ph-fill ph-link-plus"></i> Add Your First Link</button>'}
+        </div>
+      `;
+
+      const emptyBtn = document.getElementById('emptyStateAddLinkBtn');
+      if (emptyBtn) emptyBtn.onclick = () => this.openLinkModal();
+      return;
+    }
+
+    linksContainer.innerHTML = links
+      .map((link) => `
+        <article class="link-card">
+          <div class="link-card-header">
+            <div class="link-icon">
+              <i class="ph-fill ph-link"></i>
+            </div>
+            <div class="link-card-content">
+              <div class="link-title">${this.escapeHtml(link.title || link.url)}</div>
+              <a href="${this.escapeHtml(link.url)}" target="_blank" rel="noopener noreferrer" class="link-url" title="${this.escapeHtml(link.url)}">
+                ${this.escapeHtml(link.url)}
+              </a>
+            </div>
+          </div>
+          ${link.description ? `<p class="link-description">${this.escapeHtml(link.description)}</p>` : '<p class="link-description muted">No notes added yet.</p>'}
+          <div class="link-meta">
+            <span><i class="ph-fill ph-clock"></i> ${this.formatRelativeDate(link.updated_at || link.created_at)}</span>
+            <span><i class="ph-fill ph-bookmark-simple"></i> Saved item</span>
+          </div>
+          <div class="link-actions">
+            <a href="${this.escapeHtml(link.url)}" target="_blank" rel="noopener noreferrer" class="link-action-btn">
+              <i class="ph-fill ph-arrow-up-right"></i> Open
+            </a>
+            <button class="link-action-btn" data-action="copy" data-link-url="${this.escapeHtml(link.url)}">
+              <i class="ph-fill ph-copy"></i> Copy
+            </button>
+            <button class="link-action-btn" data-action="edit" data-link-id="${link.id}">
+              <i class="ph-fill ph-pencil-simple"></i> Edit
+            </button>
+            <button class="link-action-btn delete" data-action="delete" data-link-id="${link.id}">
+              <i class="ph-fill ph-trash"></i> Delete
+            </button>
+          </div>
+        </article>
+      `)
+      .join('');
+
+    linksContainer.querySelectorAll('[data-action="copy"]').forEach((btn) => {
+      btn.addEventListener('click', async (e) => {
+        e.preventDefault();
+        const url = btn.dataset.linkUrl || '';
+        try {
+          await navigator.clipboard.writeText(url);
+          this.ui.showToast('Link copied to clipboard', 'success');
+        } catch (err) {
+          this.ui.showToast('Could not copy the link', 'error');
+        }
+      });
+    });
+
+    linksContainer.querySelectorAll('[data-action="edit"]').forEach((btn) => {
+      btn.addEventListener('click', (e) => {
+        e.preventDefault();
+        const link = (this.state.cachedLinks || []).find((item) => item.id === btn.dataset.linkId);
+        if (link) this.openLinkModal(link);
+      });
+    });
+
+    linksContainer.querySelectorAll('[data-action="delete"]').forEach((btn) => {
+      btn.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.deleteLink(btn.dataset.linkId);
+      });
+    });
+  }
+
   updateActiveNavItem() {
     const items = {
       files: 'navMyFiles',
@@ -366,7 +559,8 @@ class App {
       starred: 'navStarred',
       links: 'navLinks'
     };
-    Object.values(items).forEach(id => document.getElementById(id).classList.remove('active'));
+
+    Object.values(items).forEach((id) => document.getElementById(id).classList.remove('active'));
     if (items[this.state.currentBrowse]) {
       document.getElementById(items[this.state.currentBrowse]).classList.add('active');
     }
@@ -374,10 +568,9 @@ class App {
 
   async uploadFiles(fileList) {
     const files = Array.from(fileList);
-    const MAX_SIZE = 10 * 1024 * 1024; // 10MB limit for simple API
+    const MAX_SIZE = 10 * 1024 * 1024;
 
     for (const file of files) {
-      // 1. Validation
       if (!this.isValidName(file.name)) {
         this.ui.showToast(`Invalid file name: ${file.name}`, 'error');
         continue;
@@ -391,8 +584,7 @@ class App {
       const path = this.state.getFolderPath();
       const destPath = path ? `${path}/${file.name}` : file.name;
 
-      // 2. Duplicate Check
-      if (this.state.cachedFiles.some(f => f.path === destPath)) {
+      if (this.state.cachedFiles.some((f) => f.path === destPath)) {
         this.ui.showToast(`File already exists: ${file.name}`, 'warning');
         continue;
       }
@@ -405,6 +597,7 @@ class App {
         this.ui.showToast(err.message, 'error');
       }
     }
+
     this.ui.hideProgress();
     this.fetchAndRender();
   }
@@ -421,8 +614,7 @@ class App {
     const path = this.state.getFolderPath();
     const destPath = path ? `${path}/${name}` : name;
 
-    // Check if folder name is already taken
-    if (this.cachedFolders.some(f => f.name === name)) {
+    if (this.cachedFolders.some((f) => f.name === name)) {
       this.ui.showToast(`Folder already exists: ${name}`, 'warning');
       return;
     }
@@ -445,6 +637,12 @@ class App {
     return name && name.length > 0 && !forbidden.test(name) && name.length < 255;
   }
 
+  normalizeUrl(url) {
+    if (!url) return '';
+    if (/^https?:\/\//i.test(url)) return url;
+    return `https://${url}`;
+  }
+
   openDeleteModal(path, name) {
     this.pendingDelete = path;
     const strong = document.querySelector('#deleteModal p strong');
@@ -456,7 +654,7 @@ class App {
     const renameModal = document.getElementById('renameModal');
     const renameInput = document.getElementById('renameInput');
     const renameTitle = document.querySelector('#renameModal h3');
-    const isFolder = this.cachedFolders.some(folder => folder.path === path);
+    const isFolder = this.cachedFolders.some((folder) => folder.path === path);
 
     this.pendingRename = {
       path,
@@ -486,12 +684,12 @@ class App {
 
     if (btn) btn.classList.add('loading');
     try {
-      const isFolder = this.cachedFolders.some(f => f.path === path);
+      const isFolder = this.cachedFolders.some((f) => f.path === path);
       if (isFolder) {
         await this.hf.deleteFolder(path);
         this.state.starred
-          .filter(starredPath => starredPath === path || starredPath.startsWith(`${path}/`))
-          .forEach(starredPath => this.state.removeStar(starredPath));
+          .filter((starredPath) => starredPath === path || starredPath.startsWith(`${path}/`))
+          .forEach((starredPath) => this.state.removeStar(starredPath));
       } else {
         await this.hf.deleteFile(path);
         this.state.removeStar(path);
@@ -510,37 +708,36 @@ class App {
 
   async renameItem() {
     if (!this.pendingRename) return;
-    
+
     const newNameInput = document.getElementById('renameInput');
     const btn = document.getElementById('confirmRenameBtn');
     if (!newNameInput || !btn) return;
-    
+
     const newName = newNameInput.value.trim();
     if (!newName) {
       this.ui.showToast('Please enter a new name', 'warning');
       return;
     }
-    
+
     if (newName === this.pendingRename.originalName) {
       document.getElementById('renameModal').classList.remove('active');
       this.pendingRename = null;
       return;
     }
-    
+
     if (!this.isValidName(newName)) {
       this.ui.showToast('Invalid name format (avoid < > : " / \\ | ? *)', 'error');
       return;
     }
 
-    // Client-side Conflict Check
-    const isConflict = this.state.cachedFiles.some(f => f.name.toLowerCase() === newName.toLowerCase()) || 
-                      this.cachedFolders.some(f => f.name.toLowerCase() === newName.toLowerCase());
-    
+    const isConflict = this.state.cachedFiles.some((f) => f.name.toLowerCase() === newName.toLowerCase())
+      || this.cachedFolders.some((f) => f.name.toLowerCase() === newName.toLowerCase());
+
     if (isConflict) {
       this.ui.showToast(`An item with name "${newName}" already exists in this folder`, 'warning');
       return;
     }
-    
+
     const path = this.pendingRename.path;
     const oldName = this.pendingRename.originalName;
     const parentPath = path.includes('/') ? path.slice(0, path.lastIndexOf('/')) : '';
@@ -727,144 +924,95 @@ class App {
     }
   }
 
-  // =================== LINKS MANAGEMENT ===================
+  resetLinkForm() {
+    document.getElementById('linkUrlInput').value = '';
+    document.getElementById('linkTitleInput').value = '';
+    document.getElementById('linkDescriptionInput').value = '';
+  }
 
-  async fetchAndRenderLinks() {
-    try {
-      const response = await fetch(`${this.hf.apiBase}/links/list`, {
-        headers: { 'X-User-ID': 'default_user' }
-      });
-      const data = await response.json();
-      if (data.success) {
-        this.renderLinks(data.links || []);
-      } else {
-        this.ui.showToast('Failed to load links', 'error');
-      }
-    } catch (err) {
-      console.error('Fetch links error:', err);
+  openLinkModal(link = null) {
+    const modal = document.getElementById('addLinkModal');
+    const title = document.getElementById('addLinkModalTitle');
+    const confirmBtn = document.getElementById('confirmLinkBtn');
+
+    this.pendingLinkEdit = link;
+    if (link) {
+      title.innerHTML = '<i class="ph-fill ph-pencil-simple" style="color:var(--primary-color);margin-right:10px"></i>Edit Link';
+      confirmBtn.innerHTML = '<i class="ph-fill ph-check"></i> Update Link';
+      document.getElementById('linkUrlInput').value = link.url || '';
+      document.getElementById('linkTitleInput').value = link.title || '';
+      document.getElementById('linkDescriptionInput').value = link.description || '';
+    } else {
+      title.innerHTML = '<i class="ph-fill ph-link-plus" style="color:var(--primary-color);margin-right:10px"></i>Add Link';
+      confirmBtn.innerHTML = '<i class="ph-fill ph-check"></i> Save Link';
+      this.resetLinkForm();
     }
+
+    modal.classList.add('active');
+    setTimeout(() => document.getElementById('linkUrlInput').focus(), 50);
   }
 
-  renderLinks(links) {
-    const linksSection = document.getElementById('linksSection');
-    const linksContainer = document.getElementById('linksContainer');
-    
-    if (!linksContainer) return;
+  async saveLink() {
+    const urlInput = document.getElementById('linkUrlInput');
+    const titleInput = document.getElementById('linkTitleInput');
+    const descriptionInput = document.getElementById('linkDescriptionInput');
+    const confirmBtn = document.getElementById('confirmLinkBtn');
 
-    linksSection.style.display = links.length > 0 ? 'block' : 'none';
+    const url = this.normalizeUrl(urlInput.value.trim());
+    const title = titleInput.value.trim();
+    const description = descriptionInput.value.trim();
 
-    if (links.length === 0) {
-      linksContainer.innerHTML = `
-        <div class="links-empty">
-          <i class="ph-fill ph-link"></i>
-          <h3>No links yet</h3>
-          <p>Add your first link to get started</p>
-        </div>
-      `;
+    if (!url) {
+      this.ui.showToast('URL is required', 'error');
       return;
     }
 
-    linksContainer.innerHTML = links.map(link => `
-      <div class="link-card">
-        <div class="link-card-header">
-          <div class="link-icon">
-            <i class="ph-fill ph-link"></i>
-          </div>
-          <div style="flex: 1;">
-            <div class="link-title">${this.escapeHtml(link.title || link.url)}</div>
-            <a href="${this.escapeHtml(link.url)}" target="_blank" class="link-url" title="${this.escapeHtml(link.url)}">
-              ${this.escapeHtml(link.url)}
-            </a>
-          </div>
-        </div>
-        ${link.description ? `<div class="link-description">${this.escapeHtml(link.description)}</div>` : ''}
-        <div class="link-actions">
-          <a href="${this.escapeHtml(link.url)}" target="_blank" class="link-action-btn">
-            <i class="ph-fill ph-arrow-up-right"></i> Open
-          </a>
-          <button class="link-action-btn delete" data-link-id="${link.id}">
-            <i class="ph-fill ph-trash"></i> Delete
-          </button>
-        </div>
-      </div>
-    `).join('');
-
-    // Add delete event listeners
-    linksContainer.querySelectorAll('.link-action-btn.delete').forEach(btn => {
-      btn.addEventListener('click', (e) => {
-        e.preventDefault();
-        const linkId = btn.dataset.linkId;
-        this.deleteLink(linkId);
-      });
-    });
-  }
+    try {
+      confirmBtn.classList.add('loading');
+      this.ui.showProgress(this.pendingLinkEdit ? 'Updating link...' : 'Adding link...');
+      const isEditing = Boolean(this.pendingLinkEdit);
 
-  async deleteLink(linkId) {
-    if (!confirm('Are you sure you want to delete this link?')) return;
+      const payload = { url, title, description };
+      const result = isEditing
+        ? await this.hf.updateLink({ link_id: this.pendingLinkEdit.id, ...payload })
+        : await this.hf.addLink(payload);
 
-    try {
-      const response = await fetch(`${this.hf.apiBase}/links/delete`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-User-ID': 'default_user'
-        },
-        body: JSON.stringify({ link_id: linkId })
-      });
-      const data = await response.json();
-      if (data.success) {
-        this.ui.showToast('Link deleted', 'success');
-        this.fetchAndRenderLinks();
-      } else {
-        this.ui.showToast(data.error || 'Failed to delete link', 'error');
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to save link');
       }
+
+      document.getElementById('addLinkModal').classList.remove('active');
+      this.pendingLinkEdit = null;
+      this.resetLinkForm();
+      this.ui.showToast(isEditing ? 'Link updated successfully' : 'Link added successfully', 'success');
+      await this.fetchAndRenderLinks();
     } catch (err) {
-      console.error('Delete link error:', err);
-      this.ui.showToast('Error deleting link', 'error');
+      console.error('Save link error:', err);
+      this.ui.showToast(err.message || 'Error saving link', 'error');
+    } finally {
+      this.ui.hideProgress();
+      confirmBtn.classList.remove('loading');
     }
   }
 
-  async addLink() {
-    const url = document.getElementById('linkUrlInput').value.trim();
-    const title = document.getElementById('linkTitleInput').value.trim();
-    const description = document.getElementById('linkDescriptionInput').value.trim();
-
-    if (!url) {
-      this.ui.showToast('URL is required', 'error');
-      return;
-    }
+  async deleteLink(linkId) {
+    if (!linkId) return;
+    if (!window.confirm('Are you sure you want to delete this link?')) return;
 
     try {
-      this.ui.showProgress('Adding link...');
-      const response = await fetch(`${this.hf.apiBase}/links/add`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-User-ID': 'default_user'
-        },
-        body: JSON.stringify({
-          url,
-          title,
-          description
-        })
-      });
-      const data = await response.json();
-      this.ui.hideProgress();
-
+      this.ui.showProgress('Deleting link...');
+      const data = await this.hf.deleteLink(linkId);
       if (data.success) {
-        this.ui.showToast('Link added successfully', 'success');
-        document.getElementById('addLinkModal').classList.remove('active');
-        document.getElementById('linkUrlInput').value = '';
-        document.getElementById('linkTitleInput').value = '';
-        document.getElementById('linkDescriptionInput').value = '';
-        this.fetchAndRenderLinks();
+        this.ui.showToast('Link deleted', 'success');
+        await this.fetchAndRenderLinks();
       } else {
-        this.ui.showToast(data.error || 'Failed to add link', 'error');
+        this.ui.showToast(data.error || 'Failed to delete link', 'error');
       }
     } catch (err) {
-      console.error('Add link error:', err);
+      console.error('Delete link error:', err);
+      this.ui.showToast(err.message || 'Error deleting link', 'error');
+    } finally {
       this.ui.hideProgress();
-      this.ui.showToast('Error adding link', 'error');
     }
   }
 

js/state/stateManager.js

@@ -5,10 +5,12 @@ class StateManager {
   constructor() {
     this.currentPath = [];
     this.searchQuery = '';
+    this.linksSearchQuery = '';
     this.viewMode = localStorage.getItem('view_mode') || 'grid'; // 'grid' | 'list'
-    this.currentBrowse = 'files'; // 'files' | 'starred' | 'recent'
+    this.currentBrowse = 'files'; // 'files' | 'starred' | 'recent' | 'links'
     this.isFetching = false;
     this.cachedFiles = [];
+    this.cachedLinks = [];
     this.starred = this.load(STARRED_KEY);
     this.recent = this.load(RECENT_KEY);
     this.listeners = [];
@@ -56,8 +58,13 @@ class StateManager {
     this.notify('SET_SEARCH', query);
   }
 
+  setLinksSearchQuery(query) {
+    this.linksSearchQuery = typeof query === 'string' ? query : '';
+    this.notify('SET_LINKS_SEARCH', query);
+  }
+
   setBrowseMode(mode) {
-    if (!['files', 'starred', 'recent'].includes(mode)) return;
+    if (!['files', 'starred', 'recent', 'links'].includes(mode)) return;
     this.currentBrowse = mode;
     this.notify('SET_BROWSE', mode);
   }

styles.css

@@ -448,6 +448,104 @@ body {
   color: var(--primary-color);
 }
 
+.links-view {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding-top: 12px;
+}
+
+.links-hero {
+  background:
+    radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 32%),
+    linear-gradient(135deg, #0f172a, #1e293b 55%, #164e63);
+  color: #f8fafc;
+  border-radius: 24px;
+  padding: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  box-shadow: var(--shadow-lg);
+}
+
+.links-eyebrow {
+  display: inline-flex;
+  font-size: 11px;
+  letter-spacing: 1.4px;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.7);
+  margin-bottom: 12px;
+}
+
+.links-hero h2 {
+  font-size: 30px;
+  line-height: 1.1;
+  letter-spacing: -1px;
+  margin-bottom: 10px;
+}
+
+.links-hero p {
+  max-width: 560px;
+  color: rgba(241, 245, 249, 0.82);
+  line-height: 1.6;
+}
+
+.links-toolbar {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 180px)) minmax(240px, 1fr);
+  gap: 16px;
+}
+
+.links-stat-card,
+.links-search {
+  background: var(--card);
+  border: 1px solid var(--border-color);
+  border-radius: 18px;
+  padding: 18px 20px;
+  box-shadow: var(--shadow-sm);
+}
+
+.links-stat-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.links-stat-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-muted);
+  font-weight: 700;
+}
+
+.links-stat-card strong {
+  font-size: 28px;
+  color: var(--text-main);
+}
+
+.links-search {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.links-search i {
+  color: var(--text-muted);
+  font-size: 18px;
+}
+
+.links-search input {
+  width: 100%;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--text-main);
+}
+
 /* ── SECTION HEADERS ── */
 .section-header {
   display: flex;
@@ -1496,6 +1594,8 @@ body {
   .sidebar { width: 224px; }
   .search-bar { width: 100%; max-width: 420px; }
   .grid-container { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
+  .links-toolbar { grid-template-columns: 1fr 1fr; }
+  .links-search { grid-column: 1 / -1; }
 }
 
 @media (max-width: 768px) {
@@ -1533,6 +1633,14 @@ body {
   .folder-card { padding: 12px; min-height: 136px; }
   .file-card { border-radius: 16px; }
   .file-preview { height: 92px; }
+  .links-hero {
+    padding: 20px;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .links-hero h2 { font-size: 24px; }
+  .links-toolbar { grid-template-columns: 1fr; }
+  .links-stat-card strong { font-size: 22px; }
   
   /* Mobile Menu Toggle */
   .menu-toggle {
@@ -1699,11 +1807,15 @@ body {
 
 .link-card-header {
   display: flex;
-  justify-content: space-between;
   align-items: flex-start;
   gap: 12px;
 }
 
+.link-card-content {
+  flex: 1;
+  min-width: 0;
+}
+
 .link-icon {
   width: 40px;
   height: 40px;
@@ -1747,16 +1859,36 @@ body {
   overflow: hidden;
 }
 
+.link-description.muted {
+  color: #94a3b8;
+  font-style: italic;
+}
+
+.link-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 16px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.link-meta span {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
 .link-actions {
   display: flex;
   gap: 8px;
   justify-content: space-between;
+  flex-wrap: wrap;
   padding-top: 8px;
   border-top: 1px solid var(--border-color);
 }
 
 .link-action-btn {
-  flex: 1;
+  flex: 1 1 140px;
   display: flex;
   align-items: center;
   justify-content: center;