Fix file options menu and starred sync behavior

js/main.js

@@ -240,6 +240,34 @@ class App {
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
   }
 
+  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]));
+
+    return this.state.starred.map((path) => {
+      const cached = cachedByPath.get(path);
+      if (cached) return cached;
+
+      const recent = recentByPath.get(path);
+      if (recent) {
+        return {
+          path,
+          name: recent.name || path.split('/').pop(),
+          size: recent.size || 0,
+          type: 'file',
+          lastModified: recent.lastModified
+        };
+      }
+
+      return {
+        path,
+        name: path.split('/').pop(),
+        size: 0,
+        type: 'file'
+      };
+    });
+  }
+
   render() {
     const browseMode = this.state.currentBrowse;
     let displayFiles = [];
@@ -256,7 +284,7 @@ class App {
       displayFiles = this.state.recent;
       document.getElementById('breadcrumbs').innerHTML = '<span class="breadcrumb-item active">Recent</span>';
     } else if (browseMode === 'starred') {
-      displayFiles = this.state.cachedFiles.filter(f => this.state.starred.includes(f.path));
+      displayFiles = this.buildStarredDisplayFiles();
       document.getElementById('breadcrumbs').innerHTML = '<span class="breadcrumb-item active">Starred</span>';
     }
 
@@ -276,7 +304,11 @@ class App {
       onPreview: (file) => this.openPreview(file),
       onDownload: (url, name) => this.downloadFile(url, name),
       onRename: (path, name) => this.openRenameModal(path, name),
-      onStar: (path) => this.state.toggleStar(path),
+      onStar: (path) => {
+        const wasStarred = this.state.starred.includes(path);
+        this.state.toggleStar(path);
+        this.ui.showToast(wasStarred ? 'Removed from Starred' : 'Added to Starred', 'success');
+      },
       onDelete: (path, name) => this.openDeleteModal(path, name),
       onHistory: (path, name) => this.openHistory(path, name),
       getUrl: (path) => getFileUrl(this.hf.apiBase || '/api', path)
@@ -406,23 +438,19 @@ class App {
     if (!this.pendingDelete) return;
     const path = this.pendingDelete;
     const btn = document.getElementById('confirmDeleteBtn');
-    
-    // Check if item still exists in local set to avoid stale deletes
-    const exists = this.state.cachedFiles.some(f => f.path === path) || this.cachedFolders.some(f => f.path === path);
-    if (!exists) {
-      this.ui.showToast('Item no longer exists', 'warning');
-      this.pendingDelete = null;
-      document.getElementById('deleteModal').classList.remove('active');
-      return;
-    }
 
     if (btn) btn.classList.add('loading');
     try {
       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));
       } else {
         await this.hf.deleteFile(path);
+        this.state.removeStar(path);
+        this.state.removeRecent(path);
       }
       this.ui.showToast('Deleted successfully', 'success');
       document.getElementById('deleteModal').classList.remove('active');
@@ -470,11 +498,14 @@ class App {
     
     const path = this.pendingRename.path;
     const oldName = this.pendingRename.originalName;
-    
+    const parentPath = path.includes('/') ? path.slice(0, path.lastIndexOf('/')) : '';
+    const newPath = parentPath ? `${parentPath}/${newName}` : newName;
+
     btn.classList.add('loading');
     try {
       const res = await this.hf.renameItem(path, newName);
       if (res.success) {
+        this.state.replacePathReferences(path, newPath, newName);
         this.ui.showToast(`Renamed "${oldName}" to "${newName}"`, 'success');
         document.getElementById('renameModal').classList.remove('active');
         this.pendingRename = null;

js/state/stateManager.js

@@ -73,6 +73,38 @@ class StateManager {
     this.notify('TOGGLE_STAR', path);
   }
 
+  removeStar(path) {
+    if (typeof path !== 'string') return;
+    this.starred = this.starred.filter(p => p !== path);
+    this.save(STARRED_KEY, this.starred);
+    this.notify('REMOVE_STAR', path);
+  }
+
+  removeRecent(path) {
+    if (typeof path !== 'string') return;
+    this.recent = this.recent.filter(f => f.path !== path);
+    this.save(RECENT_KEY, this.recent);
+    this.notify('REMOVE_RECENT', path);
+  }
+
+  replacePathReferences(oldPath, newPath, newName = null) {
+    if (typeof oldPath !== 'string' || typeof newPath !== 'string') return;
+
+    this.starred = this.starred.map(p => (p === oldPath ? newPath : p));
+    this.save(STARRED_KEY, this.starred);
+
+    this.recent = this.recent.map(item => {
+      if (item.path !== oldPath) return item;
+      return {
+        ...item,
+        path: newPath,
+        name: newName || item.name
+      };
+    });
+    this.save(RECENT_KEY, this.recent);
+    this.notify('REPLACE_PATH_REFERENCES', { oldPath, newPath });
+  }
+
   addToRecent(file) {
     if (!file || !file.path) return;
     this.recent = [file, ...this.recent.filter(f => f.path !== file.path)].slice(0, 20);

js/ui/uiRenderer.js

@@ -134,7 +134,7 @@ export class UIRenderer {
     files.forEach(file => {
       const card = document.createElement('div');
       card.className = mode === 'grid' ? 'file-card' : 'file-list-item';
-      
+
       const { icon, color } = getFileIcon(file.name);
       const ext = getExt(file.name).toUpperCase();
       const size = formatSize(file.size);
@@ -144,7 +144,7 @@ export class UIRenderer {
       if (mode === 'grid') {
         const isImg = isImage(file.name);
         const previewHTML = isImg
-          ? `<img src="${url}" alt="${file.name}" loading="lazy" onerror="this.parentElement.innerHTML='<span class=\\'file-icon\\'>📄</span>'">`
+          ? `<img src="${url}" alt="${file.name}" loading="lazy" onerror="this.parentElement.innerHTML='<span class=\\'file-icon\\'>&#128196;</span>'">`
           : `<span class="file-icon">${getFileEmoji(ext)}</span>`;
 
         card.innerHTML = `
@@ -154,10 +154,24 @@ export class UIRenderer {
             <h4 class="file-name" title="${file.name}">${file.name}</h4>
             <p class="file-meta">${size} • ${file.lastModified ? formatDate(file.lastModified) : 'Recently'}</p>
           </div>
-          <div class="file-actions">⋮</div>
+          <div class="file-actions card-menu">
+            <button class="icon-btn card-menu-btn" title="More options"><i class="ph-bold ph-dots-three-vertical"></i></button>
+            <div class="dropdown-menu">
+              <button class="dropdown-item" data-action="star">
+                <i class="ph-fill ph-star"></i> ${starred ? 'Unstar' : 'Star'}
+              </button>
+              <button class="dropdown-item" data-action="rename">
+                <i class="ph-fill ph-pencil-simple"></i> Rename
+              </button>
+              <button class="dropdown-item danger" data-action="delete">
+                <i class="ph-fill ph-trash"></i> Delete
+              </button>
+            </div>
+          </div>
           <div class="quick-actions">
             <button class="quick-btn" data-action="preview" title="Preview"><i class="ph-fill ph-eye"></i></button>
             <button class="quick-btn" data-action="download" title="Download"><i class="ph-fill ph-download-simple"></i></button>
+            <button class="quick-btn" data-action="star" title="${starred ? 'Unstar' : 'Star'}"><i class="ph-fill ph-star${starred ? '' : '-bold'}"></i></button>
             <button class="quick-btn" data-action="rename" title="Rename"><i class="ph-fill ph-pencil-simple"></i></button>
             <button class="quick-btn" data-action="history" title="History"><i class="ph-fill ph-clock-counter-clockwise"></i></button>
           </div>`;
@@ -182,10 +196,11 @@ export class UIRenderer {
         actions.onPreview(file);
       };
 
-      // Action Handlers
       card.addEventListener('click', (e) => {
         const btn = e.target.closest('[data-action]');
         if (!btn) return;
+        e.stopPropagation();
+        card.querySelectorAll('.dropdown-menu.open').forEach(m => m.classList.remove('open'));
         const action = btn.dataset.action;
         if (action === 'preview') actions.onPreview(file);
         else if (action === 'download') actions.onDownload(url, file.name);
@@ -195,10 +210,24 @@ export class UIRenderer {
         else if (action === 'history') actions.onHistory(file.path, file.name);
       });
 
+      const menuBtn = card.querySelector('.card-menu-btn');
+      const menu = card.querySelector('.dropdown-menu');
+      if (menuBtn && menu) {
+        menuBtn.onclick = (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          document.querySelectorAll('.dropdown-menu.open').forEach(m => {
+            if (m !== menu) m.classList.remove('open');
+          });
+          menu.classList.toggle('open');
+        };
+
+        menu.onclick = (e) => e.stopPropagation();
+      }
+
       this.containers.files.appendChild(card);
     });
   }
-
   showEmpty() {
     this.containers.files.innerHTML = `
       <div class="empty-state">

styles.css

@@ -732,6 +732,14 @@ body {
   border: 1px solid var(--border-color);
 }
 
+.file-actions .card-menu-btn {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border-radius: 50%;
+  font-size: 16px;
+}
+
 .file-card:hover .file-actions {
   opacity: 1;
 }