From 8a9293218b0a519f32e6284da319ee5368a6a633 Mon Sep 17 00:00:00 2001 From: Meleki Date: Thu, 5 Mar 2026 15:11:05 +0100 Subject: [PATCH] =?UTF-8?q?refactor:=20Shared=20Links=20als=20Card-Grid=20?= =?UTF-8?q?mit=20Card-Men=C3=BC=20(wie=20Cronjobs)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - index.html: shared-links-list → card-grid - dashboard.js: Cards mit card-compact, card-menu-dropdown, fa-cog statt fa-robot - dashboard.css: 60 Zeilen shared-link-*/danger-icon CSS entfernt (nutzt card-Styles) --- wwwroot/css/dashboard.css | 60 -------------------------- wwwroot/index.html | 2 +- wwwroot/js/pages/dashboard.js | 79 ++++++++++++++++++++++++----------- 3 files changed, 56 insertions(+), 85 deletions(-) diff --git a/wwwroot/css/dashboard.css b/wwwroot/css/dashboard.css index d76b223..7dc57f9 100644 --- a/wwwroot/css/dashboard.css +++ b/wwwroot/css/dashboard.css @@ -256,66 +256,6 @@ color: var(--text); } -/* Shared Links */ - -.shared-links-list { - display: flex; - flex-direction: column; - gap: var(--badge-spacing); -} - -.shared-link-row { - display: flex; - align-items: center; - gap: var(--box-spacing); - padding: var(--box-padding); - background: var(--f3-bg); - border: var(--border-width) solid var(--f3-border); - border-radius: var(--border-radius); -} - -.shared-link-info { - flex: 1; - min-width: 0; - display: flex; - flex-direction: column; - gap: calc(var(--badge-spacing) / 2); -} - -.shared-link-preview { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.shared-link-preview .fa { - opacity: var(--semi-transparent); - margin-right: calc(var(--badge-spacing) / 2); -} - -.shared-link-meta { - display: flex; - flex-wrap: wrap; - gap: var(--box-spacing); - opacity: var(--semi-transparent); - font-size: calc(var(--font-size) * 0.9); -} - -.shared-link-actions { - display: flex; - gap: var(--badge-spacing); - flex-shrink: 0; -} - -.danger-icon { - color: var(--dangerous); - opacity: var(--semi-transparent); -} - -.danger-icon:hover { - opacity: 1; -} - /* Compact cards (no image) */ .card-compact { padding: var(--box-padding); diff --git a/wwwroot/index.html b/wwwroot/index.html index 541687e..a9cd9ac 100644 --- a/wwwroot/index.html +++ b/wwwroot/index.html @@ -84,7 +84,7 @@

Geteilte Links

- +
diff --git a/wwwroot/js/pages/dashboard.js b/wwwroot/js/pages/dashboard.js index 3e50e19..5054ff6 100644 --- a/wwwroot/js/pages/dashboard.js +++ b/wwwroot/js/pages/dashboard.js @@ -329,45 +329,76 @@ registerPage('dashboard', { // Shared Links const shares = await apiListShares(); const sharedSection = document.getElementById('sharedLinksSection'); - const sharedList = document.getElementById('sharedLinksList'); + const sharedGrid = document.getElementById('sharedLinksCards'); if (shares.length > 0) { sharedSection.hidden = false; - sharedList.innerHTML = ''; + sharedGrid.innerHTML = ''; for (const s of shares) { - const row = document.createElement('div'); - row.className = 'shared-link-row'; + const card = document.createElement('div'); + card.className = 'card card-compact'; const shareUrl = `${location.origin}/#shared/${s.shareToken}`; const modeLabel = s.includeContext ? 'Thread' : 'Einzeln'; - const roleIcon = s.role === 'user' ? 'fa-user' : 'fa-robot'; - row.innerHTML = ` -
- ${esc(s.preview || '(leer)')} - - ${s.sessionName ? ` ${esc(s.sessionName)}` : ''} - ${modeLabel} - ${formatDate(s.createdAt)} - -
-
- - - + const roleIcon = s.role === 'user' ? 'fa-user' : 'fa-cog'; + + card.innerHTML = ` +
+
+ ${esc(s.preview || '(leer)')} +
+ + +
+
+
+ ${s.sessionName ? ` ${esc(s.sessionName)}` : ''} + ${modeLabel} + ${formatDate(s.createdAt)} +
`; - row.querySelector('[data-action="copy"]').addEventListener('click', async () => { + + const menuTrigger = card.querySelector('.card-menu-trigger'); + const menuDropdown = card.querySelector('.card-menu-dropdown'); + menuTrigger.addEventListener('click', (e) => { + e.stopPropagation(); + closeAllCardMenus(); + const rect = menuTrigger.getBoundingClientRect(); + menuDropdown.hidden = false; + const dropRect = menuDropdown.getBoundingClientRect(); + menuDropdown.style.top = `${rect.bottom + 4}px`; + menuDropdown.style.left = `${rect.right - dropRect.width}px`; + if (rect.bottom + 4 + dropRect.height > window.innerHeight) { + menuDropdown.style.top = `${rect.top - dropRect.height - 4}px`; + } + const finalRect = menuDropdown.getBoundingClientRect(); + if (finalRect.left < 0) menuDropdown.style.left = '8px'; + }); + + menuDropdown.querySelector('[data-action="copy"]').addEventListener('click', async (e) => { + e.stopPropagation(); + menuDropdown.hidden = true; await navigator.clipboard.writeText(shareUrl); showToast('Link kopiert!'); }); - row.querySelector('[data-action="open"]').addEventListener('click', () => { + menuDropdown.querySelector('[data-action="open"]').addEventListener('click', (e) => { + e.stopPropagation(); + menuDropdown.hidden = true; window.open(shareUrl, '_blank'); }); - row.querySelector('[data-action="delete"]').addEventListener('click', async () => { + menuDropdown.querySelector('[data-action="delete"]').addEventListener('click', async (e) => { + e.stopPropagation(); + menuDropdown.hidden = true; await apiDeleteShare(s.shareToken); - row.remove(); - if (sharedList.children.length === 0) sharedSection.hidden = true; + card.remove(); + if (sharedGrid.children.length === 0) sharedSection.hidden = true; showToast('Link gelöscht'); }); - sharedList.appendChild(row); + + sharedGrid.appendChild(card); } } },