diff --git a/public/app.js b/public/app.js index af09d34..49e3e57 100644 --- a/public/app.js +++ b/public/app.js @@ -1729,13 +1729,17 @@ function createFavoriteManagerRow(item, index) { edit.type = 'button'; edit.className = 'secondary-button favorite-action'; edit.dataset.editFavorite = String(index); - edit.textContent = 'Edit'; + edit.setAttribute('aria-label', `Edit ${item.title}`); + edit.title = 'Edit'; + edit.append(createFavoriteActionIcon('edit')); const remove = document.createElement('button'); remove.type = 'button'; remove.className = 'remove-favorite favorite-action'; remove.dataset.removeFavorite = String(index); - remove.textContent = 'Remove'; + remove.setAttribute('aria-label', `Remove ${item.title}`); + remove.title = 'Remove'; + remove.append(createFavoriteActionIcon('remove')); const actions = document.createElement('div'); actions.className = 'favorite-actions'; @@ -1746,6 +1750,26 @@ function createFavoriteManagerRow(item, index) { return row; } +function createFavoriteActionIcon(kind) { + const namespace = 'http://www.w3.org/2000/svg'; + const svg = document.createElementNS(namespace, 'svg'); + const paths = kind === 'edit' + ? ['M12 20h9', 'M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'] + : ['M3 6h18', 'M8 6V4h8v2', 'M6 6l1 15h10l1-15', 'M10 11v6', 'M14 11v6']; + + svg.setAttribute('viewBox', '0 0 24 24'); + svg.setAttribute('aria-hidden', 'true'); + svg.setAttribute('focusable', 'false'); + + for (const pathData of paths) { + const path = document.createElementNS(namespace, 'path'); + path.setAttribute('d', pathData); + svg.append(path); + } + + return svg; +} + function startFavoriteWizard(mode, index = -1) { const item = mode === 'edit' ? state.favorites[index] : null; diff --git a/public/styles.css b/public/styles.css index 7218f3b..1ee48f0 100644 --- a/public/styles.css +++ b/public/styles.css @@ -489,9 +489,9 @@ audio { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; - gap: 0.5rem; - min-height: 4rem; - padding: 0.55rem; + gap: 0.75rem; + min-height: 4.7rem; + padding: 0.65rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.06); @@ -499,6 +499,7 @@ audio { .favorite-summary { min-width: 0; + padding-right: 0.15rem; } .favorite-title, @@ -520,13 +521,34 @@ audio { } .favorite-action { - min-width: 5.2rem; + display: grid; + width: 2.45rem; + height: 2.45rem; + min-width: 2.45rem; + min-height: 2.45rem; + place-items: center; + padding: 0; + border-radius: 50%; } .favorite-actions { display: flex; - gap: 0.5rem; - min-width: 0; + flex: 0 0 auto; + gap: 0.45rem; + align-items: center; + justify-content: flex-end; +} + +.favorite-action svg { + display: block; + width: 1.05rem; + height: 1.05rem; + fill: none; + stroke: currentColor; + stroke-width: 2.2; + stroke-linecap: round; + stroke-linejoin: round; + pointer-events: none; } .wizard-step { @@ -559,9 +581,9 @@ audio { border-color: rgba(232, 168, 79, 0.7); } -.secondary-button, +.secondary-button:not(.favorite-action), .primary-button, -.remove-favorite { +.remove-favorite:not(.favorite-action) { min-height: 2.7rem; padding: 0.65rem 0.95rem; font-weight: 800; @@ -618,20 +640,23 @@ audio { } .favorite-manager-row { - grid-template-columns: 1fr; - align-items: stretch; - gap: 0.7rem; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: 0.65rem; + min-height: 5rem; + padding: 0.7rem; } .favorite-actions { - display: grid; - grid-template-columns: 1fr 1fr; - width: 100%; + flex-direction: column; + gap: 0.35rem; } .favorite-actions .favorite-action { - width: 100%; - min-width: 0; + width: 2.35rem; + height: 2.35rem; + min-width: 2.35rem; + min-height: 2.35rem; } .remove-favorite,