salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix invalid HTML structure in folder selection view

Browse Source 
- Move delete button outside of folder selection button
- Prevents button nesting which is invalid HTML
- Fixes build warning about malformed HTML
This commit is contained in:
Shantur Rathore
2025-10-24 18:37:39 +01:00
parent b0e636d781
commit 2c9a29ebc4
1 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/folder-selection-view.tsx
View File

@@ -173,8 +173,9 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
data-folder-index={index()} data-folder-index={index()}
class="group relative border-b border-gray-100 dark:border-gray-700 last:border-b-0" class="group relative border-b border-gray-100 dark:border-gray-700 last:border-b-0"
> >
<div class="flex items-center">
<button <button
class="w-full text-left px-4 py-3 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all focus:outline-none flex items-center justify-between gap-3" class="flex-1 text-left px-4 py-3 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all focus:outline-none flex items-center justify-between gap-3"
classList={{ classList={{
"bg-blue-100 dark:bg-blue-900/30 ring-2 ring-blue-500 ring-inset": "bg-blue-100 dark:bg-blue-900/30 ring-2 ring-blue-500 ring-inset":
focusMode() === "recent" && selectedIndex() === index(), focusMode() === "recent" && selectedIndex() === index(),
@@ -199,21 +200,20 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
{formatRelativeTime(folder.lastAccessed)} {formatRelativeTime(folder.lastAccessed)}
</div> </div>
</div> </div>
<div class="flex items-center gap-2 flex-shrink-0">
<Show when={focusMode() === "recent" && selectedIndex() === index()}> <Show when={focusMode() === "recent" && selectedIndex() === index()}>
<kbd class="px-1.5 py-0.5 text-xs font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded"> <kbd class="px-1.5 py-0.5 text-xs font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded">
↵ ↵
</kbd> </kbd>
</Show> </Show>
</button>
<button <button
onClick={(e) => handleRemove(folder.path, e)} onClick={(e) => handleRemove(folder.path, e)}
class="opacity-0 group-hover:opacity-100 p-1.5 hover:bg-red-100 dark:hover:bg-red-900/30 rounded transition-all" class="opacity-0 group-hover:opacity-100 p-2.5 hover:bg-red-100 dark:hover:bg-red-900/30 transition-all mr-2"
title="Remove from recent" title="Remove from recent"
> >
<Trash2 class="w-3.5 h-3.5 text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400" /> <Trash2 class="w-3.5 h-3.5 text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400" />
</button> </button>
</div> </div>
</button>
</div> </div>
)} )}
</For> </For>