Differences

This shows you the differences between two versions of the page.

--- wip:internal:downloads [2025/11/20 21:59] – created ayush
+++ wip:internal:downloads [2025/11/20 22:07] (current) – ayush
@@ Line 1: / Line 1: @@
 <html>
 <style>
-/* File listing fills available viewport space, scrolls beyond */
-.plugin__filelisting_bodytable {
-    max-height: calc(100vh - 350px) !important;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
-    height: auto !important;
-    overflow-y: auto !important;
+/* CSS Custom Properties */
+.plugin__filelisting {
+    --fl-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    --fl-font-mono: 'JetBrains Mono', 'SF Mono', monospace;
+    --fl-bg: #ffffff;
+    --fl-bg-hover: #f8f9fa;
+    --fl-bg-nested: #fcfcfd;
+    --fl-border: #e9ecef;
+    --fl-border-light: #f1f3f4;
+    --fl-text: #212529;
+    --fl-text-secondary: #6c757d;
+    --fl-text-muted: #adb5bd;
+    --fl-accent: #228be6;
+    --fl-accent-light: #e7f5ff;
+    --fl-folder: #fab005;
+    --fl-file-pdf: #fa5252;
+    --fl-file-video: #7950f2;
+    --fl-file-default: #868e96;
+    --fl-radius: 8px;
+    --fl-radius-sm: 4px;
+    --fl-transition: 150ms ease;
+    --fl-indent: 28px;
 }
-.plugin__filelisting_collapsible {
+/* Container */
-    max-height: none !important;
+.plugin__filelisting {
-    height: auto !important;
+    font-family: var(--fl-font-sans);
-    overflow: visible !important;
+    background: var(--fl-bg);
+    border: 1px solid var(--fl-border);
+    border-radius: var(--fl-radius);
+    overflow: hidden;
+    font-size: 13px;
+    line-height: 1.5;
+}
+/* Header */
+.plugin__filelisting_capiton {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    background: var(--fl-bg);
+    border-bottom: 1px solid var(--fl-border);
+    font-weight: 600;
+    font-size: 12px;
+    color: var(--fl-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+.plugin__filelisting_capiton span {
+    font-family: var(--fl-font-mono);
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--fl-text-muted);
+    background: var(--fl-bg-hover);
+    padding: 2px 8px;
+    border-radius: var(--fl-radius-sm);
+    margin-left: 8px;
+    text-transform: none;
+    letter-spacing: 0;
+}
+.plugin__filelisting_toggle {
+    font-size: 10px;
+    color: var(--fl-text-muted);
+    transition: transform var(--fl-transition);
+    float: none !important;
 }
+/* Content containers */
+.plugin__filelisting_collapsible,
 .plugin__filelisting_content {
     max-height: none !important;
-    height: auto !important;
     overflow: visible !important;
 }
-.plugin__filelisting {
+/* Scrollable body */
-    max-height: none !important;
+.plugin__filelisting_bodytable {
-    overflow: visible !important;
+    max-height: calc(100vh - 280px) !important;
+    overflow-y: auto !important;
+    overflow-x: hidden;
+}
+/* Minimal scrollbar */
+.plugin__filelisting_bodytable::-webkit-scrollbar {
+    width: 4px;
+}
+.plugin__filelisting_bodytable::-webkit-scrollbar-track {
+    background: transparent;
+}
+.plugin__filelisting_bodytable::-webkit-scrollbar-thumb {
+    background: var(--fl-border);
+    border-radius: 2px;
+}
+.plugin__filelisting_bodytable::-webkit-scrollbar-thumb:hover {
+    background: var(--fl-text-muted);
+}
+/* Tables */
+.plugin__filelisting table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+/* Header row */
+.plugin__filelisting_headertable {
+    border-bottom: 1px solid var(--fl-border);
+}
+.plugin__filelisting_headertable thead tr {
+    background: transparent;
+}
+.plugin__filelisting_headertable th {
+    padding: 8px 12px;
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--fl-text-muted);
+    text-align: left;
+    border: none;
+}
+.plugin__filelisting_headertable th:first-child {
+    padding-left: 16px;
+}
+.plugin__filelisting_headertable th a {
+    color: inherit;
+    text-decoration: none;
+}
+/* Body rows */
+.plugin__filelisting_bodytable tbody tr {
+    border-bottom: 1px solid var(--fl-border-light);
+    transition: background-color var(--fl-transition);
+}
+.plugin__filelisting_bodytable tbody tr:last-child {
+    border-bottom: none;
+}
+.plugin__filelisting_bodytable tbody tr:hover {
+    background-color: var(--fl-bg-hover);
+}
+/* Folder rows */
+.plugin__filelisting_bodytable tbody tr[data-namespace] {
+    cursor: pointer;
+}
+/* Nested file rows */
+.plugin__filelisting_bodytable tbody tr.fl-nested {
+    background: var(--fl-bg-nested);
+}
+.plugin__filelisting_bodytable tbody tr.fl-nested:hover {
+    background: #f4f6f8;
+}
+/* Cells */
+.plugin__filelisting_bodytable td {
+    padding: 10px 12px;
+    font-size: 13px;
+    color: var(--fl-text);
+    border: none;
+    vertical-align: middle;
+}
+/* Checkbox column */
+.plugin__filelisting_bodytable td:first-child {
+    width: 36px;
+    padding: 10px 4px 10px 16px;
+}
+/* Nested row indentation - checkbox cell */
+.plugin__filelisting_bodytable tr.fl-nested td:first-child {
+    padding-left: calc(16px + var(--fl-indent));
+}
+/* Custom checkbox */
+.plugin__filelisting_bodytable input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 1.5px solid var(--fl-border);
+    border-radius: 3px;
+    background: var(--fl-bg);
+    cursor: pointer;
+    transition: all var(--fl-transition);
+    position: relative;
+    flex-shrink: 0;
+}
+.plugin__filelisting_bodytable input[type="checkbox"]:hover {
+    border-color: var(--fl-accent);
+}
+.plugin__filelisting_bodytable input[type="checkbox"]:checked {
+    background: var(--fl-accent);
+    border-color: var(--fl-accent);
+}
+.plugin__filelisting_bodytable input[type="checkbox"]:checked::after {
+    content: '';
+    position: absolute;
+    left: 4.5px;
+    top: 1.5px;
+    width: 4px;
+    height: 8px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+}
+.plugin__filelisting_bodytable input[type="checkbox"]:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--fl-accent-light);
+}
+/* Icon column */
+.plugin__filelisting_cell_icon {
+    width: 28px;
+    padding: 10px 8px 10px 0 !important;
+}
+/* Nested row indentation - icon cell */
+.plugin__filelisting_bodytable tr.fl-nested .plugin__filelisting_cell_icon {
+    position: relative;
+}
+/* Tree connector line */
+.plugin__filelisting_bodytable tr.fl-nested .plugin__filelisting_cell_icon::before {
+    content: '';
+    position: absolute;
+    left: -8px;
+    top: 50%;
+    width: 10px;
+    height: 1px;
+    background: var(--fl-border);
+}
+/* Folder icons - original SVG styling */
+.plugin__filelisting_cell_icon svg {
+    width: 18px !important;
+    height: 18px !important;
+    fill: var(--fl-folder);
+    transition: fill var(--fl-transition), transform var(--fl-transition);
+    display: block;
+}
+tr:hover .plugin__filelisting_cell_icon svg {
+    fill: #f59f00;
+}
+/* Custom file icon container */
+.fl-file-icon {
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.fl-file-icon svg {
+    width: 18px;
+    height: 18px;
+    fill: none;
+}
+/* Name column */
+.plugin__filelisting_cell_name {
+    font-weight: 500;
+    color: var(--fl-text);
+}
+.plugin__filelisting_cell_name a {
+    color: inherit;
+    text-decoration: none;
+    transition: color var(--fl-transition);
+}
+.plugin__filelisting_cell_name a:hover {
+    color: var(--fl-accent);
+}
+/* Hide original nested indicator arrow */
+.plugin__filelisting_cell_name > span {
+    display: none !important;
+}
+/* File name styling for nested */
+tr.fl-nested .plugin__filelisting_cell_name a {
+    font-weight: 400;
+    font-family: var(--fl-font-mono);
+    font-size: 12px;
+    color: var(--fl-text-secondary);
+}
+tr.fl-nested:hover .plugin__filelisting_cell_name a {
+    color: var(--fl-accent);
+}
+/* Size & Date columns */
+.plugin__filelisting_bodytable td:nth-child(4),
+.plugin__filelisting_bodytable td:nth-child(5) {
+    font-family: var(--fl-font-mono);
+    font-size: 11px;
+    color: var(--fl-text-muted);
+    font-weight: 400;
+}
+/* Empty values */
+.plugin__filelisting_bodytable td[data-sort=""] {
+    color: var(--fl-border);
+}
+/* Footer */
+.plugin__filelisting_footer {
+    padding: 10px 16px;
+    background: var(--fl-bg);
+    border-top: 1px solid var(--fl-border);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+.plugin__filelisting_footer label {
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--fl-text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.plugin__filelisting_footer input {
+    padding: 6px 10px;
+    border: 1px solid var(--fl-border);
+    border-radius: var(--fl-radius-sm);
+    font-family: var(--fl-font-sans);
+    font-size: 12px;
+    outline: none;
+    transition: border-color var(--fl-transition), box-shadow var(--fl-transition);
+    background: var(--fl-bg);
+    width: 180px;
+}
+.plugin__filelisting_footer input:focus {
+    border-color: var(--fl-accent);
+    box-shadow: 0 0 0 3px var(--fl-accent-light);
+}
+.plugin__filelisting_footer input::placeholder {
+    color: var(--fl-text-muted);
+}
+.plugin__filelisting_footer button {
+    padding: 6px 12px;
+    font-size: 11px;
+    font-weight: 500;
+    background: #fff5f5;
+    color: var(--fl-file-pdf);
+    border: 1px solid #ffc9c9;
+    border-radius: var(--fl-radius-sm);
+    cursor: pointer;
+    transition: all var(--fl-transition);
+    font-family: var(--fl-font-sans);
+}
+.plugin__filelisting_footer button:hover {
+    background: #ffe3e3;
+    border-color: #ffa8a8;
+}
+/* Animation for row appearance */
+@keyframes fl-fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+tr.fl-nested {
+    animation: fl-fadeIn 200ms ease forwards;
+}
+/* Folder expansion indicator */
+tr[data-namespace].fl-expanded .plugin__filelisting_cell_icon svg {
+    transform: scale(1.05);
 }
 </style>
@@ Line 30: / Line 419: @@
 <script>
 document.addEventListener('DOMContentLoaded', function() {
+    /* ========================================
+       SVG Icon Definitions
+       ======================================== */
+    const fileIcons = {
+        pdf: `<svg viewBox="0 0 24 24" fill="none" stroke="#fa5252" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+            <polyline points="14 2 14 8 20 8"/>
+        </svg>`,
+        mp4: `<svg viewBox="0 0 24 24" fill="none" stroke="#7950f2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+            <polyline points="14 2 14 8 20 8"/>
+            <polygon points="10 11 10 17 15 14 10 11" fill="#7950f2" stroke="none"/>
+        </svg>`,
+        pptx: `<svg viewBox="0 0 24 24" fill="none" stroke="#fd7e14" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+            <polyline points="14 2 14 8 20 8"/>
+        </svg>`,
+        docx: `<svg viewBox="0 0 24 24" fill="none" stroke="#228be6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+            <polyline points="14 2 14 8 20 8"/>
+        </svg>`,
+        xlsx: `<svg viewBox="0 0 24 24" fill="none" stroke="#40c057" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+            <polyline points="14 2 14 8 20 8"/>
+        </svg>`,
+        zip: `<svg viewBox="0 0 24 24" fill="none" stroke="#868e96" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+            <polyline points="14 2 14 8 20 8"/>
+            <line x1="12" y1="12" x2="12" y2="18"/>
+            <line x1="12" y1="12" x2="12" y2="12.01"/>
+        </svg>`,
+        default: `<svg viewBox="0 0 24 24" fill="none" stroke="#868e96" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+            <polyline points="14 2 14 8 20 8"/>
+        </svg>`
+    };
+    /* ========================================
+       Folder Name Beautification
+       ======================================== */
     function beautifyName(name) {
         return name
-            .replace(/__/g, ' - ')
+            .replace(/__/g, ' – ')
             .replace(/_/g, ' ')
-            .replace(/\b\w+/g, function(word) {
+            .replace(/\b\w+/g, word => {
-                return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+                const lowerWords = ['and', 'or', 'the', 'in', 'on', 'at', 'to', 'for'];
-            });
+                const lower = word.toLowerCase();
+                return lowerWords.includes(lower)
+                    ? lower
+                    : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+            })
+            .replace(/^./, c => c.toUpperCase());
     }
-    const nameCells = document.querySelectorAll('.plugin__filelisting_cell_name');
+    /* ========================================
+       Get Icon for File Extension
+       ======================================== */
+    function getFileIcon(filename) {
+        const ext = filename.split('.').pop().toLowerCase();
+        return fileIcons[ext] || fileIcons.default;
+    }
-    nameCells.forEach(function(cell) {
+    /* ========================================
-        const link = cell.querySelector('a');
+       Process All Rows
-        if (link) {
+       ======================================== */
-            const originalText = link.textContent.trim();
+    const rows = document.querySelectorAll('.plugin__filelisting_bodytable tbody tr');
-            const isFile = /\.\w{2,4}$/.test(originalText);
+    rows.forEach((row, index) => {
+        const nameCell = row.querySelector('.plugin__filelisting_cell_name');
+        const iconCell = row.querySelector('.plugin__filelisting_cell_icon');
+        const link = nameCell?.querySelector('a');
+        if (!link) return;
+        const text = link.textContent.trim();
+        const isFile = /\.\w{2,5}$/.test(text);
+        const hasNamespace = row.hasAttribute('data-namespace');
+        const childOf = row.getAttribute('data-childof');
+        // Determine if this is a nested file (not a folder, but has a parent)
+        const isNested = !hasNamespace && childOf && childOf.includes(':');
+        // Beautify folder names only
+        if (!isFile) {
+            link.textContent = beautifyName(text);
+        }
+        // Mark nested rows and handle their icons
+        if (isNested) {
+            row.classList.add('fl-nested');
-            if (!isFile) {
+            // Determine if last child in its group
-                link.textContent = beautifyName(originalText);
+            const nextRow = rows[index + 1];
+            const nextChildOf = nextRow?.getAttribute('data-childof');
+            const nextHasNamespace = nextRow?.hasAttribute('data-namespace');
+            if (!nextRow || nextChildOf !== childOf || nextHasNamespace) {
+                row.classList.add('fl-last-child');
+            }
+            // Replace file icons with custom SVG
+            if (iconCell && isFile) {
+                const oldIcon = iconCell.querySelector('[class^="mf_"]');
+                if (oldIcon) {
+                    const iconWrapper = document.createElement('div');
+                    iconWrapper.className = 'fl-file-icon';
+                    iconWrapper.innerHTML = getFileIcon(text);
+                    oldIcon.replaceWith(iconWrapper);
+                }
             }
         }
     });
+    /* ========================================
+       Folder Expansion State Tracking
+       ======================================== */
+    const folderRows = document.querySelectorAll('tr[data-namespace]');
+    folderRows.forEach(folder => {
+        const namespace = folder.getAttribute('data-namespace');
+        const childRows = document.querySelectorAll(`tr[data-childof="${namespace}"]`);
+        if (childRows.length === 0) return;
+        // Check initial state
+        const hasVisibleChildren = Array.from(childRows).some(
+            child => child.style.display !== 'none'
+        );
+        if (hasVisibleChildren) {
+            folder.classList.add('fl-expanded');
+        }
+        // Observe visibility changes
+        const observer = new MutationObserver(() => {
+            const visible = Array.from(childRows).some(
+                child => child.style.display !== 'none'
+            );
+            folder.classList.toggle('fl-expanded', visible);
+        });
+        childRows.forEach(child => {
+            observer.observe(child, {
+                attributes: true,
+                attributeFilter: ['style']
+            });
+        });
+    });
+    /* ========================================
+       Enhanced Filter Input
+       ======================================== */
+    const filterInput = document.querySelector('.plugin__filelisting_footer input');
+    if (filterInput) {
+        filterInput.setAttribute('placeholder', 'Search files...');
+    }
 });
 </script>