diff --git a/src/components/BookmarkItem.tsx b/src/components/BookmarkItem.tsx index 155a78db..6f400910 100644 --- a/src/components/BookmarkItem.tsx +++ b/src/components/BookmarkItem.tsx @@ -24,6 +24,18 @@ export const BookmarkItem: React.FC = ({ bookmark, index, onS // Extract URLs from bookmark content const extractedUrls = extractUrlsFromContent(bookmark.content) + const hasUrls = extractedUrls.length > 0 + + const handleReadNow = (event: React.MouseEvent) => { + if (!hasUrls) return + const firstUrl = extractedUrls[0] + if (onSelectUrl) { + event.preventDefault() + onSelectUrl(firstUrl) + } else { + window.open(firstUrl, '_blank') + } + } return (
@@ -84,6 +96,14 @@ export const BookmarkItem: React.FC = ({ bookmark, index, onS
+ + {hasUrls && ( +
+ +
+ )} ) } diff --git a/src/index.css b/src/index.css index 152f9094..592c6b67 100644 --- a/src/index.css +++ b/src/index.css @@ -443,6 +443,32 @@ body { font-family: monospace; } +.read-now { + margin-top: 0.75rem; + display: flex; + justify-content: flex-end; +} + +.read-now-button { + background: #28a745; + color: white; + border: none; + padding: 0.6rem 1rem; + border-radius: 6px; + cursor: pointer; + font-weight: 700; + letter-spacing: 0.5px; + transition: background-color 0.2s ease, transform 0.1s ease; +} + +.read-now-button:hover { + background: #218838; +} + +.read-now-button:active { + transform: translateY(1px); +} + /* Private Bookmark Styles */ .private-bookmark { border-left: 4px solid #ff6b6b;