Cosmetic + sorting

src/network/html/FilesPage.html

@@ -7,6 +7,9 @@
   <title>CrossPoint Reader - Files</title>
   <script src="/js/jszip.min.js"></script>
   <style>
+    html {
+      scrollbar-gutter: stable;
+    }
     :root {
       --font-color: #333;
       --bg: #f5f5f5;
@@ -326,6 +329,35 @@
     .file-table th {
       font-weight: 600;
       color: var(--label-color);
+      position: sticky;
+      top: 0;
+      background: var(--card-bg);
+      z-index: 10;
+    }
+
+    .file-table th.sortable {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .file-table th.sortable:hover {
+      color: var(--font-color);
+    }
+
+    .sort-indicator {
+      display: inline-block;
+      margin-left: 4px;
+      font-size: 0.75em;
+      opacity: 0.5;
+    }
+
+    .file-table th.sort-active .sort-indicator {
+      opacity: 1;
+      color: var(--accent-color);
+    }
+
+    .file-table tbody tr:nth-child(even) {
+      background-color: rgba(0, 0, 0, 0.03);
     }
 
     .file-table tr:hover {
@@ -2222,20 +2254,70 @@
       if (files.length === 0) {
         fileTable.innerHTML = '<div class="no-files">This folder is empty</div>';
       } else {
-        let fileTableContent = '<table class="file-table">';
+        currentFiles = files;
+        renderFileTable();
+      }
+    }
 
-        // Add select-all checkbox column
+    // Sort state: column is 'name'|'type'|'size', dir is 'asc'|'desc'
-        fileTableContent += '<tr><th style="width:40px"><input type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll(this)"></th><th>Name</th><th>Type</th><th>Size</th><th class="actions-col">Actions</th></tr>';
+    let sortState = { column: 'name', dir: 'asc' };
+    let currentFiles = [];
 
+    function getSortKey(file) {
+      if (file.isDirectory) return 0;
+      const ext = file.name.includes('.') ? file.name.split('.').pop().toLowerCase() : '';
+      if (ext === 'epub') return 1;
+      if (ext === 'xtc') return 2;
+      if (ext === 'txt') return 3;
+      return 4;
+    }
 
-        const sortedFiles = files.sort((a, b) => {
+    function sortFiles(files) {
-          // Directories first, then epub files, then other files, alphabetically within each group
+      return [...files].sort((a, b) => {
-          if (a.isDirectory && !b.isDirectory) return -1;
+        // Directories always first regardless of sort column
-          if (!a.isDirectory && b.isDirectory) return 1;
+        if (a.isDirectory !== b.isDirectory) return a.isDirectory ? -1 : 1;
-          if (a.isEpub && !b.isEpub) return -1;
+
-          if (!a.isEpub && b.isEpub) return 1;
+        let cmp = 0;
-          return a.name.localeCompare(b.name);
+        if (sortState.column === 'name') {
+          cmp = a.name.localeCompare(b.name);
+        } else if (sortState.column === 'type') {
+          cmp = getSortKey(a) - getSortKey(b) || a.name.localeCompare(b.name);
+        } else if (sortState.column === 'size') {
+          cmp = a.size - b.size || a.name.localeCompare(b.name);
+        }
+        return sortState.dir === 'asc' ? cmp : -cmp;
       });
+    }
+
+    function setSort(column) {
+      if (sortState.column === column) {
+        sortState.dir = sortState.dir === 'asc' ? 'desc' : 'asc';
+      } else {
+        sortState.column = column;
+        sortState.dir = 'asc';
+      }
+      renderFileTable();
+    }
+
+    function renderFileTable() {
+      const fileTable = document.getElementById('file-table');
+      const sortedFiles = sortFiles(currentFiles);
+
+      const ind = (col) => {
+        const active = sortState.column === col;
+        const arrow = active ? (sortState.dir === 'asc' ? '▲' : '▼') : '▲';
+        return `<span class="sort-indicator">${arrow}</span>`;
+      };
+      const thClass = (col) => `class="sortable${sortState.column === col ? ' sort-active' : ''}"`;
+
+      let fileTableContent = '<table class="file-table"><thead>';
+      fileTableContent += `<tr>`;
+      fileTableContent += `<th style="width:40px;text-align:center"><input type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll(this)"></th>`;
+      fileTableContent += `<th ${thClass('name')} onclick="setSort('name')">Name${ind('name')}</th>`;
+      fileTableContent += `<th ${thClass('type')} onclick="setSort('type')">Type${ind('type')}</th>`;
+      fileTableContent += `<th ${thClass('size')} onclick="setSort('size')">Size${ind('size')}</th>`;
+      fileTableContent += `<th class="actions-col">Actions</th>`;
+      fileTableContent += `</tr></thead><tbody>`;
 
       sortedFiles.forEach(file => {
         if (file.isDirectory) {
@@ -2244,7 +2326,6 @@
           folderPath += file.name;
 
           const isProtected = file.name.startsWith('.');
-            // Checkbox cell + folder row
           fileTableContent += `<tr class="folder-row">`;
           fileTableContent += isProtected
             ? '<td style="text-align:center"></td>'
@@ -2263,14 +2344,13 @@
           if (!filePath.endsWith("/")) filePath += "/";
           filePath += file.name;
 
-            // Checkbox cell + file row
           fileTableContent += `<tr class="${file.isEpub ? 'epub-file' : ''}">`;
-            fileTableContent += `<td><input type="checkbox" class="select-item" data-path="${encodeURIComponent(filePath)}" data-name="${escapeHtml(file.name)}" data-type="file"></td>`;
+          fileTableContent += `<td style="text-align:center"><input type="checkbox" class="select-item" data-path="${encodeURIComponent(filePath)}" data-name="${escapeHtml(file.name)}" data-type="file"></td>`;
           fileTableContent += `<td><span class="file-icon">${file.isEpub ? '📗' : '📄'}</span>`;
           fileTableContent += `<a rel="noopener noreferrer" target="_blank" href="/download?path=${encodeURIComponent(filePath)}" class="file-link">${escapeHtml(displayFileName(file.name))}</a>`;
           if (file.isEpub) fileTableContent += '<span class="epub-badge">EPUB</span>';
           fileTableContent += '</td>';
-            fileTableContent += `<td>${file.name.split('.').pop().toUpperCase()}</td>`;
+          fileTableContent += `<td>${file.name.includes('.') ? file.name.split('.').pop().toUpperCase() : '-'}</td>`;
           fileTableContent += `<td>${formatFileSize(file.size)}</td>`;
           fileTableContent += `<td class="actions-col"><div class="action-icon-group">`;
           fileTableContent += `<button class="move-btn" onclick="openMoveModalForItem('${file.name.replaceAll("'", "\\'")}', '${filePath.replaceAll("'", "\\'")}', false)" title="Move file">📂</button>`;
@@ -2281,14 +2361,13 @@
         }
       });
 
-        fileTableContent += '</table>';
+      fileTableContent += '</tbody></table>';
       fileTable.innerHTML = fileTableContent;
       document.getElementById('file-table').addEventListener('change', function(e) {
         if (e.target.classList.contains('select-item')) updateToolbarState();
       });
       updateToolbarState();
     }
-    }
 
     // Modal functions
     function openUploadModal() {

src/network/html/HomePage.html

@@ -6,6 +6,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>CrossPoint Reader</title>
   <style>
+    html {
+      scrollbar-gutter: stable;
+    }
     :root {
       --font-color: #333;
       --bg: #f5f5f5;

src/network/html/SettingsPage.html

@@ -5,6 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>CrossPoint Reader - Settings</title>
   <style>
+    html {
+      scrollbar-gutter: stable;
+    }
     :root {
       --font-color: #333;
       --bg: #f5f5f5;