diff --git a/build-plugin.sh b/build-plugin.sh
index 9b77775..b0b6fc3 100755
--- a/build-plugin.sh
+++ b/build-plugin.sh
@@ -2,7 +2,7 @@
set -eu
PLUGIN="u-navigator"
-VERSION="2026.06.23.r009"
+VERSION="2026.06.23.r010"
PKG_DIR="packages"
WORK_DIR=".plugin-build"
PKG_NAME="${PLUGIN}-${VERSION}.tgz"
diff --git a/packages/u-navigator-2026.06.23.r009.tgz b/packages/u-navigator-2026.06.23.r009.tgz
deleted file mode 100644
index 69dd1f3..0000000
Binary files a/packages/u-navigator-2026.06.23.r009.tgz and /dev/null differ
diff --git a/packages/u-navigator-2026.06.23.r010.tgz b/packages/u-navigator-2026.06.23.r010.tgz
new file mode 100644
index 0000000..cf37edc
Binary files /dev/null and b/packages/u-navigator-2026.06.23.r010.tgz differ
diff --git a/server/public/app.js b/server/public/app.js
index 34a6b99..514a13e 100644
--- a/server/public/app.js
+++ b/server/public/app.js
@@ -73,6 +73,7 @@ function openExplorer(initialPath = state.config?.roots?.[0]?.path) {
path: initialPath,
entries: [],
selectedPath: null,
+ view: 'list',
loading: false,
error: null
}
@@ -202,10 +203,14 @@ function renderExplorer(body, win) {
+
+
+
+
${data.error ? `
${escapeHtml(data.error)}
` : ''}
- ${data.loading ? '
Lade...
' : renderFileTable(data.entries || [])}
+ ${data.loading ? '
Lade...
' : renderFileEntries(data.entries || [], data.view || 'list')}
`;
@@ -213,6 +218,8 @@ function renderExplorer(body, win) {
body.querySelector('[data-action="go"]').addEventListener('click', () => loadExplorer(win, input.value));
body.querySelector('[data-action="refresh"]').addEventListener('click', () => loadExplorer(win, data.path));
body.querySelector('[data-action="up"]').addEventListener('click', () => loadExplorer(win, parentPath(data.path)));
+ body.querySelector('[data-action="view-list"]').addEventListener('click', () => setExplorerView(win, 'list'));
+ body.querySelector('[data-action="view-icons"]').addEventListener('click', () => setExplorerView(win, 'icons'));
const dropZone = body.querySelector('.drop-zone');
dropZone.addEventListener('dragenter', (event) => {
@@ -273,11 +280,14 @@ function renderExplorer(body, win) {
}
}
-function renderFileTable(entries) {
+function renderFileEntries(entries, view) {
if (!entries.length) {
return 'Dieser Ordner ist leer. Dateien können hier abgelegt werden.
';
}
+ return view === 'icons' ? renderFileIcons(entries) : renderFileTable(entries);
+}
+function renderFileTable(entries) {
const rows = entries.map((entry) => `
| ${icons[entry.type] || 'Item'}${escapeHtml(entry.name)} |
@@ -295,6 +305,23 @@ function renderFileTable(entries) {
`;
}
+function renderFileIcons(entries) {
+ const items = entries.map((entry) => `
+
+ `).join('');
+
+ return `${items}
`;
+}
+
+function setExplorerView(win, view) {
+ win.data.view = view;
+ render();
+}
+
function renderProperties(body) {
const entry = state.selectedEntry;
if (!entry) {
diff --git a/server/public/styles.css b/server/public/styles.css
index 2dc191d..eff0321 100644
--- a/server/public/styles.css
+++ b/server/public/styles.css
@@ -169,7 +169,7 @@
align-items: center;
display: grid;
gap: 8px;
- grid-template-columns: auto 1fr auto auto;
+ grid-template-columns: auto 1fr auto auto auto;
margin-bottom: 10px;
}
@@ -197,6 +197,30 @@
box-shadow: inset 0 0 0 2px var(--accent);
}
+.u-nav .view-toggle {
+ display: inline-flex;
+ gap: 0;
+}
+
+.u-nav .view-toggle button {
+ border-radius: 0;
+ min-width: 72px;
+}
+
+.u-nav .view-toggle button:first-child {
+ border-radius: 6px 0 0 6px;
+}
+
+.u-nav .view-toggle button:last-child {
+ border-left: 0;
+ border-radius: 0 6px 6px 0;
+}
+
+.u-nav .view-toggle button.active {
+ background: var(--surface-2);
+ border-color: var(--accent);
+}
+
.u-nav .file-table {
border-collapse: collapse;
background: var(--surface);
@@ -277,6 +301,80 @@
user-select: none;
}
+.u-nav .icon-grid {
+ display: grid;
+ gap: 10px;
+ grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
+ padding: 4px;
+}
+
+.u-nav .icon-item {
+ align-items: center;
+ background: var(--surface);
+ border: 1px solid transparent;
+ border-radius: 8px;
+ color: var(--text);
+ display: grid;
+ gap: 6px;
+ grid-template-rows: auto minmax(32px, auto) auto;
+ justify-items: center;
+ min-height: 126px;
+ padding: 10px 8px;
+ text-align: center;
+ width: 100%;
+}
+
+.u-nav .icon-item:hover,
+.u-nav .icon-item.selected,
+.u-nav .icon-item.dragging,
+.u-nav .icon-item.drop-target {
+ background: var(--surface-2);
+ border-color: var(--line);
+}
+
+.u-nav .icon-item.selected,
+.u-nav .icon-item.drop-target {
+ border-color: var(--accent);
+}
+
+.u-nav .file-icon {
+ align-items: center;
+ background: var(--surface-2);
+ border: 1px solid var(--line);
+ border-radius: 8px;
+ color: var(--muted);
+ display: inline-flex;
+ font-size: 12px;
+ height: 48px;
+ justify-content: center;
+ width: 58px;
+}
+
+.u-nav .file-icon.directory {
+ color: var(--accent);
+}
+
+.u-nav .file-icon.file {
+ color: var(--accent-2);
+}
+
+.u-nav .icon-name {
+ color: var(--text);
+ display: -webkit-box;
+ font-size: 13px;
+ line-height: 1.25;
+ max-width: 100%;
+ overflow: hidden;
+ overflow-wrap: anywhere;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+}
+
+.u-nav .icon-meta {
+ color: var(--muted);
+ font-size: 12px;
+}
+
.u-nav .context-menu {
background: var(--surface);
border: 1px solid var(--line);
diff --git a/u-navigator.plg b/u-navigator.plg
index ad0c88a..392dc5d 100644
--- a/u-navigator.plg
+++ b/u-navigator.plg
@@ -1,7 +1,7 @@
-
+
]>
@@ -14,7 +14,7 @@
https://git.casaderoll.de/michael/Unraid-Navigator/raw/branch/main/packages/&package;
-1388b0f68a4cc0ddfaacc4e6f2402ea7
+0189ab9d23d2027dfc4c8dc6ebb2ee68