Draw folder and file icons

build-plugin.sh

@@ -2,7 +2,7 @@
 set -eu
 
 PLUGIN="u-navigator"
-VERSION="2026.06.23.r010"
+VERSION="2026.06.23.r011"
 PKG_DIR="packages"
 WORK_DIR=".plugin-build"
 PKG_NAME="${PLUGIN}-${VERSION}.tgz"

server/public/app.js

@@ -308,7 +308,7 @@ function renderFileTable(entries) {
 function renderFileIcons(entries) {
   const items = entries.map((entry) => `
     <button type="button" class="file-row icon-item ${entry.path === state.selectedEntry?.path ? 'selected' : ''}" data-path="${escapeAttr(entry.path)}" data-type="${escapeAttr(entry.type)}">
-      <span class="file-icon ${escapeAttr(entry.type)}">${icons[entry.type] || 'Item'}</span>
+      <span class="file-icon ${escapeAttr(entry.type)}" aria-label="${escapeAttr(icons[entry.type] || 'Item')}"></span>
       <span class="icon-name">${escapeHtml(entry.name)}</span>
       <span class="icon-meta">${entry.type === 'file' ? formatBytes(entry.size) : entry.type}</span>
     </button>

server/public/styles.css

@@ -338,24 +338,85 @@
 }
 
 .u-nav .file-icon {
-  align-items: center;
+  display: block;
-  background: var(--surface-2);
+  height: 52px;
-  border: 1px solid var(--line);
+  position: relative;
-  border-radius: 8px;
+  width: 64px;
-  color: var(--muted);
-  display: inline-flex;
-  font-size: 12px;
-  height: 48px;
-  justify-content: center;
-  width: 58px;
 }
 
 .u-nav .file-icon.directory {
-  color: var(--accent);
+  background: linear-gradient(180deg, #ff9b4f 0%, var(--accent) 100%);
+  border: 1px solid color-mix(in srgb, var(--accent) 78%, #5b2b12);
+  border-radius: 7px 7px 6px 6px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 5px 12px rgba(24, 34, 45, 0.14);
+  height: 40px;
+  margin-top: 10px;
 }
 
-.u-nav .file-icon.file {
+.u-nav .file-icon.directory::before {
-  color: var(--accent-2);
+  background: linear-gradient(180deg, #ffb16e 0%, #f58a3a 100%);
+  border: 1px solid color-mix(in srgb, var(--accent) 72%, #5b2b12);
+  border-bottom: 0;
+  border-radius: 6px 6px 0 0;
+  content: "";
+  height: 12px;
+  left: 5px;
+  position: absolute;
+  top: -9px;
+  width: 27px;
+}
+
+.u-nav .file-icon.directory::after {
+  background: rgba(255, 255, 255, 0.18);
+  border-radius: 999px;
+  content: "";
+  height: 3px;
+  left: 8px;
+  position: absolute;
+  right: 8px;
+  top: 8px;
+}
+
+.u-nav .file-icon.file,
+.u-nav .file-icon.symlink,
+.u-nav .file-icon.other {
+  background: linear-gradient(180deg, #ffffff 0%, #eef3f7 100%);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  box-shadow: 0 5px 12px rgba(24, 34, 45, 0.12);
+  height: 50px;
+  width: 42px;
+}
+
+.u-nav .file-icon.file::before,
+.u-nav .file-icon.symlink::before,
+.u-nav .file-icon.other::before {
+  background: linear-gradient(135deg, #dce5ee 0%, #ffffff 48%, #cfd8e1 49%, #cfd8e1 100%);
+  border-left: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  border-radius: 0 5px 0 4px;
+  content: "";
+  height: 13px;
+  position: absolute;
+  right: -1px;
+  top: -1px;
+  width: 13px;
+}
+
+.u-nav .file-icon.file::after,
+.u-nav .file-icon.symlink::after,
+.u-nav .file-icon.other::after {
+  background:
+    linear-gradient(var(--muted), var(--muted)) 0 0 / 22px 2px no-repeat,
+    linear-gradient(var(--muted), var(--muted)) 0 9px / 26px 2px no-repeat,
+    linear-gradient(var(--muted), var(--muted)) 0 18px / 18px 2px no-repeat;
+  content: "";
+  height: 22px;
+  left: 8px;
+  opacity: 0.58;
+  position: absolute;
+  top: 18px;
+  width: 26px;
 }
 
 .u-nav .icon-name {

u-navigator.plg

@@ -1,7 +1,7 @@
 <!DOCTYPE PLUGIN [
 <!ENTITY name "u-navigator">
 <!ENTITY author "michael">
-<!ENTITY version "2026.06.23.r010">
+<!ENTITY version "2026.06.23.r011">
 <!ENTITY package "&name;-&version;.tgz">
 ]>
 <PLUGIN name="&name;" author="&author;" version="&version;" pluginURL="https://git.casaderoll.de/michael/Unraid-Navigator/raw/branch/main/u-navigator.plg">
@@ -14,7 +14,7 @@
 
 <FILE Name="/boot/config/plugins/&name;/&package;">
 <URL>https://git.casaderoll.de/michael/Unraid-Navigator/raw/branch/main/packages/&package;</URL>
-<MD5>0189ab9d23d2027dfc4c8dc6ebb2ee68</MD5>
+<MD5>4b86244d0a4d43a5df4e86fc5569af81</MD5>
 </FILE>
 
 <FILE Run="/bin/bash">