aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-02-06 23:54:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: make entire compact list row clickable to open reader

Browse Source 
- Add onClick handler to compact-row div
- Show pointer cursor on rows with URLs
- Add stopPropagation to action button to prevent double-trigger
- Include accessibility attributes (role, tabIndex)
This commit is contained in:
Gigi
2025-10-03 09:51:34 +02:00
parent 288b96d614
commit bdfb7ca9a6
3 changed files with 23 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/index.html vendored
View File

@@ -5,8 +5,8 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Markr - Nostr Bookmarks</title>
<script type="module" crossorigin src="/assets/index-DhqqAZnu.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BH-ZsNV9.css">
<script type="module" crossorigin src="/assets/index-DO40HQQ6.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Dw4opAJ_.css">
</head>
<body>
<div id="root"></div>

15
src/components/BookmarkItem.tsx
View File

@@ -79,9 +79,20 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
// Compact view rendering
if (viewMode === 'compact') {
const handleCompactClick = () => {
if (hasUrls && onSelectUrl) {
onSelectUrl(extractedUrls[0])
}
}
return (
<div key={`${bookmark.id}-${index}`} className={`individual-bookmark compact ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
<div className="compact-row">
<div
className={`compact-row ${hasUrls ? 'clickable' : ''}`}
onClick={handleCompactClick}
role={hasUrls ? 'button' : undefined}
tabIndex={hasUrls ? 0 : undefined}
>
<span className="bookmark-type-compact">
{bookmark.isPrivate ? (
<>
@@ -101,7 +112,7 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
{hasUrls && (
<button
className="compact-read-btn"
onClick={(e) => { e.preventDefault(); onSelectUrl?.(extractedUrls[0]) }}
onClick={(e) => { e.stopPropagation(); onSelectUrl?.(extractedUrls[0]) }}
title={firstUrlClassification?.buttonText}
>
<FontAwesomeIcon icon={getIconForUrlType(extractedUrls[0])} />

8
src/index.css
View File

@@ -643,6 +643,14 @@ body {
height: 28px;
}
.compact-row.clickable {
cursor: pointer;
}
.compact-row.clickable:active {
opacity: 0.8;
}
.bookmark-type-compact {
display: flex;
align-items: center;