diff --git a/src/components/BookmarkItem.tsx b/src/components/BookmarkItem.tsx index 4fad6d23..c929e0ac 100644 --- a/src/components/BookmarkItem.tsx +++ b/src/components/BookmarkItem.tsx @@ -21,7 +21,7 @@ import { faEyeSlash, faThumbtack } from '@fortawesome/free-solid-svg-icons' -import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons' +import { faChevronDown, faChevronUp, faBookOpen } from '@fortawesome/free-solid-svg-icons' import { useEventModel } from 'applesauce-react/hooks' import { Models } from 'applesauce-core' import { IndividualBookmark } from '../types/bookmarks' @@ -116,16 +116,23 @@ export const BookmarkItem: React.FC = ({ bookmark, index, onS

URLs:

{extractedUrls.map((url, urlIndex) => ( - { if (onSelectUrl) { e.preventDefault(); onSelectUrl(url) } }} - > - {url} - +
+ + {url} + + +
))}
)} diff --git a/src/index.css b/src/index.css index 39465771..eaefe180 100644 --- a/src/index.css +++ b/src/index.css @@ -150,6 +150,25 @@ body { text-decoration: underline; } +.url-row { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.read-inline-btn { + background: #28a745; + color: white; + border: none; + padding: 0.25rem 0.5rem; + border-radius: 4px; + cursor: pointer; +} + +.read-inline-btn:hover { + background: #218838; +} + .bookmark-events { margin: 1rem 0; }