chore: bump version to 0.1.4

fix: resolve all linting and type errors
- Remove unused applyHighlightsToText import from ContentPanel - Replace while(true) with proper condition in findHighlightMatches - Remove unused match parameter from replaceTextWithMark function All ESLint and TypeScript checks now pass with no errors.
2026-02-16 12:34:41 +01:00 · 2025-10-04 22:14:00 +01:00 · 2025-10-04 22:13:31 +01:00 · 2025-10-04 22:09:38 +01:00 · 2025-10-04 22:00:19 +01:00 · 2025-10-04 21:54:18 +01:00
43 changed files with 4926 additions and 462 deletions
--- a/.cursor/rules/applesauce.mdc
+++ b/.cursor/rules/applesauce.mdc
@@ -1,12 +1,10 @@
 ---
+description: applesauce reference documentation and examples
 alwaysApply: true
 ---

-If you can use an applesauce-module for something, use applesauce. https://hzrd149.github.io/applesauce/typedoc/modules.html
+If you can use an applesauce-module for something, use applesauce.

-Code snippets & examples:
- https://hzrd149.github.io/applesauce/snippets/?q=applesauce#nevent1qgszv6q4uryjzr06xfxxew34wwc5hmjfmfpqn229d72gfegsdn2q3fgppemhxue69uhkummn9ekx7mp0qqs8c7umrjum47vjp9jxyyedhyq4v6kvahs6s8tu0r87dvv4cx2ekdq2nepz3
- https://hzrd149.github.io/applesauce/snippets/?q=applesauce#nevent1qgszv6q4uryjzr06xfxxew34wwc5hmjfmfpqn229d72gfegsdn2q3fgpz9mhxue69uhkummnw3ezumrpdejz7qpq860x9snxtqxg2jyn8dpmq8we8j6avnw5dhkpgl2s66fzy3rumatqm36qyh
- https://hzrd149.github.io/applesauce/snippets/?q=applesauce#nevent1qgsrkwjz6dx0pg2q95vd2dkf62kzavwxqxdfz5a72uyyeqt96xfwxfgppemhxue69uhkummn9ekx7mp0qqsgpexqt77wq4hl3j8l4gvza9cq0hedtlcp6veg04ghg5kl322t7tgqk205c
- https://hzrd149.github.io/applesauce/snippets/?q=applesauce#nevent1qgszv6q4uryjzr06xfxxew34wwc5hmjfmfpqn229d72gfegsdn2q3fgpz9mhxue69uhkummnw3ezumrpdejz7qpqqjfzehsxvdq4r2eqc9c5hd80nkznj8sspcs6f77l3498qwz5ne2sst2t48
- https://hzrd149.github.io/applesauce/snippets/?q=applesauce#nevent1qgszv6q4uryjzr06xfxxew34wwc5hmjfmfpqn229d72gfegsdn2q3fgpz9mhxue69uhkummnw3ezumrpdejz7qpqsjgpalr742kqcke5av2ey8pnfz7j837u78l30wuzktw3v8j6vufqufzyte
+Documentation: https://hzrd149.github.io/applesauce/typedoc/modules.html
+
+When unsure how to use applesauce correctly, look at the examples in the `applesauce/packages/examples` directory.
--- a/.cursor/rules/bookmarks.mdc
+++ b/.cursor/rules/bookmarks.mdc
@@ -0,0 +1,16 @@
+---
+description: documentation that's useful when dealing with bookmark events (kind:10003 or kind:30003) or anything related to NIP-51
+alwaysApply: false
+---
+
+Read the nostrbook to understand how bookmarks work:
+- https://nostrbook.dev/kinds/10003
+- https://nostrbook.dev/kinds/30003
+
+They are defined in NIP-51:
+- https://github.com/nostr-protocol/nips/blob/master/51.md
+
+Also refer to the applesauce bookmark helpers:
+- https://github.com/hzrd149/applesauce/blob/17c9dbb0f2c263e2ebd01729ea2fa138eca12bd1/packages/core/src/helpers/bookmarks.ts
+
+Make sure to always use applesauce, and use it properly.
--- a/.cursor/rules/fontawesome.mdc
+++ b/.cursor/rules/fontawesome.mdc
@@ -0,0 +1,6 @@
+---
+description: when creating or modifying UI elements, especially related to icons and buttons
+alwaysApply: false
+---
+
+We use FontAwesome. If you can use a fa-icon (instead of text) use a fa-icon. Always strive to keep the UI modern, beautiful, and minimalistic. Shy away from using too many colors, borders, glow, and animations.
--- a/.gitignore
+++ b/.gitignore
@@ -116,3 +116,6 @@ temp/
 .env.development.local
 .env.test.local
 .env.production.local
+
+# applesauce examples
+applesauce/
--- a/README.md
+++ b/README.md
@@ -1,12 +1,21 @@
-# Markr
+# Boris

 A minimal nostr client for bookmark management, built with [applesauce](https://github.com/hzrd149/applesauce).

 ## Features

- **Nostr Authentication**: Connect using your nostr account
+- **Nostr Authentication**: Connect using your nostr account via browser extension
 - **Bookmark Display**: View your nostr bookmarks as per [NIP-51](https://github.com/nostr-protocol/nips/blob/master/51.md)
- **Minimal UI**: Clean, simple interface focused on bookmark management
+- **Content Classification**: Automatically detect and classify URLs (articles, videos, YouTube, images)
+- **Reader Mode**: View article content inline with readable formatting
+- **Collapsible Sidebar**: Expand/collapse bookmark list for focused reading
+- **Profile Integration**: Display user profile images using applesauce ProfileModel
+- **Relative Timestamps**: Human-friendly time display (e.g., "2 hours ago")
+- **Event Links**: Quick access to view bookmarks on search.dergigi.com
+- **Private Bookmarks**: Support for Amethyst-style hidden/encrypted bookmarks
+- **Highlights Panel**: View and manage your NIP-84 highlights in a dedicated collapsible panel
+- **Three-Pane Layout**: Bookmarks sidebar, content viewer, and highlights panel working together
+- **Minimal UI**: Clean, modern interface focused on bookmark management

 ## Getting Started

@@ -20,7 +29,7 @@ A minimal nostr client for bookmark management, built with [applesauce](https://
 1. Clone the repository:
 ```bash
 git clone <your-repo-url>
-cd markr
+cd boris
 ```

 2. Install dependencies:
@@ -46,8 +55,10 @@ yarn dev
 ## Usage

 1. **Connect**: Click "Connect with Nostr" to authenticate using your nostr account
-2. **View Bookmarks**: Once connected, you'll see all your nostr bookmarks
-3. **Navigate**: Click on bookmark URLs to open them in a new tab
+2. **View Bookmarks**: Once connected, you'll see all your nostr bookmarks in the left sidebar
+3. **View Highlights**: Your NIP-84 highlights appear in the right panel
+4. **Navigate**: Click on bookmark URLs to view content in the center panel
+5. **Collapse Panels**: Use the collapse buttons to hide/show sidebars for focused viewing

 ## Technical Details

@@ -63,13 +74,66 @@ yarn dev
 ```
 src/
 ├── components/
-│   ├── Login.tsx      # Authentication component
-│   └── Bookmarks.tsx  # Bookmark display component
-├── App.tsx            # Main application component
-├── main.tsx           # Application entry point
-└── index.css          # Global styles
+│   ├── Login.tsx                        # Authentication component
+│   ├── Bookmarks.tsx                    # Main bookmarks view with layout
+│   ├── BookmarkList.tsx                 # Bookmark list sidebar
+│   ├── BookmarkItem.tsx                 # Individual bookmark card
+│   ├── SidebarHeader.tsx                # Header bar with collapse, profile, logout
+│   ├── ContentPanel.tsx                 # Content viewer panel
+│   ├── HighlightsPanel.tsx              # Highlights sidebar panel (NIP-84)
+│   ├── HighlightItem.tsx                # Individual highlight display
+│   ├── IconButton.tsx                   # Reusable icon button component
+│   ├── ContentWithResolvedProfiles.tsx  # Profile mention resolver
+│   ├── ResolvedMention.tsx              # Nostr mention component
+│   └── kindIcon.ts                      # Kind-specific icon mapping
+├── services/
+│   ├── bookmarkService.ts               # Main bookmark fetching orchestration
+│   ├── bookmarkProcessing.ts            # Decryption and processing pipeline
+│   ├── bookmarkHelpers.ts               # Shared types, guards, and utilities
+│   ├── bookmarkEvents.ts                # Event type handling and deduplication
+│   ├── highlightService.ts              # Highlight fetching (NIP-84)
+│   └── readerService.ts                 # Content extraction via reader API
+├── types/
+│   ├── bookmarks.ts                     # Bookmark type definitions
+│   ├── highlights.ts                    # Highlight type definitions (NIP-84)
+│   ├── nostr.d.ts                       # Nostr type augmentations
+│   └── relative-time.d.ts               # relative-time package types
+├── utils/
+│   ├── bookmarkUtils.tsx                # Bookmark rendering utilities
+│   └── helpers.ts                       # General helper functions
+├── App.tsx                              # Main application component
+├── main.tsx                             # Application entry point
+└── index.css                            # Global styles
 ```

+### Private (hidden) bookmarks (Amethyst-style)
+
+We support Amethyst-style private (hidden) bookmark lists alongside public ones (NIP‑51):
+
+- **Detection and unlock**
+  - Use `Helpers.hasHiddenTags(evt)` and `Helpers.isHiddenTagsLocked(evt)` to detect hidden tags.
+  - First try `Helpers.unlockHiddenTags(evt, signer)`; if that fails, try with `'nip44'`.
+  - For events with encrypted `content` that aren’t recognized as supporting hidden tags (e.g. kind 30001), manually decrypt:
+    - Prefer `signer.nip44.decrypt(evt.pubkey, evt.content)`, fallback to `signer.nip04.decrypt(evt.pubkey, evt.content)`.
+
+- **Parsing and rendering**
+  - Decrypted `content` is JSON `string[][]` (tags). Convert with `Helpers.parseBookmarkTags(hiddenTags)`.
+  - Map to `IndividualBookmark[]` via our `processApplesauceBookmarks(..., isPrivate=true)` and append to the private list so they render immediately alongside public items.
+
+- **Caching for downstream helpers**
+  - Cache manual results on the event with `BookmarkHiddenSymbol` and also store the decrypted blob under `EncryptedContentSymbol` to aid debugging and hydration.
+
+- **Structure**
+  - `src/services/bookmarkService.ts`: orchestrates fetching, hydration, and assembling the final bookmark payload.
+  - `src/services/bookmarkProcessing.ts`: decryption/collection pipeline (unlock, manual decrypt, parse, merge).
+  - `src/services/bookmarkHelpers.ts`: shared types, guards, mapping, hydration, and symbols.
+  - `src/services/bookmarkEvents.ts`: event type and de‑duplication for NIP‑51 lists/sets.
+
+- **Notes**
+  - We avoid `any` via narrow type guards for `nip44`/`nip04` decrypt functions.
+  - Files are kept small and DRY per project rules.
+  - Built on applesauce helpers (`Helpers.getPublicBookmarks`, `Helpers.getHiddenBookmarks`, etc.). See applesauce docs: https://hzrd149.github.io/applesauce/typedoc/modules.html
+
 ### Building for Production

 ```bash
@@ -80,15 +144,42 @@ pnpm build
 yarn build
 ```

+## TODO
+
+### High Priority
+- [ ] **Mobile Responsive Design**: Optimize sidebar and content panel for mobile devices
+- [ ] **Keyboard Shortcuts**: Add keyboard navigation (collapse sidebar, navigate bookmarks)
+- [ ] **Search & Filter**: Add ability to search bookmarks by title, URL, or content
+- [ ] **Error Handling**: Improve error states and retry logic for failed fetches
+- [ ] **Loading States**: Better skeleton screens and loading indicators
+
+### Medium Priority
+- [ ] **Bookmark Creation**: Add ability to create new bookmarks
+- [ ] **Bookmark Editing**: Edit existing bookmark metadata and tags
+- [ ] **Bookmark Deletion**: Remove bookmarks from lists
+- [ ] **Sorting Options**: Sort by date, title, kind, or custom order
+- [ ] **Bulk Actions**: Select and perform actions on multiple bookmarks
+- [ ] **Video Embeds**: Inline YouTube and video playback for video bookmarks
+
+### Nice to Have
+- [ ] **Dark/Light Mode Toggle**: User preference for color scheme
+- [ ] **Export Functionality**: Export bookmarks as JSON, CSV, or HTML
+- [ ] **Import Bookmarks**: Import from browser bookmarks or other formats
+- [ ] **Tags & Categories**: Better organization with custom tags
+- [ ] **Bookmark Collections**: Create and manage custom bookmark collections
+- [ ] **Offline Support**: Cache bookmarks for offline viewing
+- [ ] **Share Bookmarks**: Generate shareable links to bookmark lists
+- [ ] **Performance Optimization**: Virtual scrolling for large bookmark lists
+- [ ] **Browser Extension**: Quick bookmark saving from any page
+
 ## Contributing

-This is a minimal MVP. Future enhancements could include:
+Contributions are welcome! Please feel free to submit a Pull Request. Make sure to:

- Bookmark creation and editing
- Bookmark organization and tagging
- Search functionality
- Export capabilities
- Mobile-responsive design improvements
+- Follow the existing code style
+- Keep files under 210 lines
+- Use conventional commits
+- Run linter and type checks before submitting

 ## License

--- a/1
+++ b/1
@@ -0,0 +1 @@
+../applesauce
--- a/dist/index.html
+++ b/dist/index.html
@@ -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-ez6f4baA.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DCTVEVF8.css">
+    <script type="module" crossorigin src="/assets/index-sYF0VIKc.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BNyWhz1u.css">
  </head>
  <body>
    <div id="root"></div>
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-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>
+    <title>Boris - Nostr Bookmarks</title>
  </head>
  <body>
    <div id="root"></div>
--- a/kind-icons.txt
+++ b/kind-icons.txt
@@ -0,0 +1,19 @@
+kind:0 = fa-circle-user
+kind:1 = fa-feather
+kind:6 = fa-retweet
+kind:7 = fa-heart
+kind:20 = fa-image
+kind:21 = fa-video
+kind:22 = fa-video
+kind:1063 = fa-file
+kind:1337 = fa-laptop-code
+kind:1617 = fa-code-pull-request
+kind:1621 = fa-bug
+kind:1984 = fa-exclamation-triangle
+kind:9735 = fa-bolt
+kind:9321 = fa-cloud-bolt
+kind:9802 = fa-highlighter
+kind:30023 = fa-newspaper  
+kind:10000 = fa-eye-slash
+kind:10001 = fa-thumbtack
+kind:10003 = fa-bookmark
--- a/node_modules/.package-lock.json
+++ b/node_modules/.package-lock.json
@@ -1,6 +1,6 @@
 {
  "name": "markr",
-  "version": "0.0.1",
+  "version": "0.1.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
@@ -846,6 +846,52 @@
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
      }
    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.1.0.tgz",
+      "integrity": "sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.1.0.tgz",
+      "integrity": "sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.1.0.tgz",
+      "integrity": "sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-3.0.2.tgz",
+      "integrity": "sha512-cmp/nT0pPC7HUALF8uc3+D5ECwEBWxYQbOIHwtGUWEu72sWtZc26k5onr920HWOViF0nYaC+Qzz6Ln56SQcaVg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~6 || ~7",
+        "react": "^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/@humanwhocodes/config-array": {
      "version": "0.13.0",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -1495,9 +1541,17 @@
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
    "node_modules/@types/hast": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
@@ -1533,14 +1587,12 @@
      "version": "15.7.15",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/@types/react": {
      "version": "18.3.25",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.25.tgz",
      "integrity": "sha512-oSVZmGtDPmRZtVDqvdKUi/qgCsWp5IDY29wp8na8Bj4B3cc99hfNzvNhlMkVVxctkAOGUA3Km7MMpBHAnWfcIA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@types/prop-types": "*",
@@ -1772,7 +1824,6 @@
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
-      "dev": true,
      "license": "ISC"
    },
    "node_modules/@vitejs/plugin-react": {
@@ -2430,6 +2481,16 @@
      ],
      "license": "CC-BY-4.0"
    },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2457,6 +2518,36 @@
        "url": "https://github.com/sponsors/wooorm"
      }
    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2477,6 +2568,16 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2510,9 +2611,18 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
      "license": "MIT"
    },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
    "node_modules/debug": {
      "version": "4.4.3",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -2855,6 +2965,16 @@
        "node": ">=4.0"
      }
    },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/esutils": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -3147,6 +3267,56 @@
      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
      "license": "MIT"
    },
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
+      "integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-js": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/ieee754": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -3223,6 +3393,46 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
+      "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==",
+      "license": "MIT"
+    },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -3246,6 +3456,16 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/is-number": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -3451,6 +3671,16 @@
        "yallist": "^3.0.2"
      }
    },
+    "node_modules/markdown-table": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
+      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/mdast-util-find-and-replace": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
@@ -3503,6 +3733,167 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/mdast-util-gfm": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
+      "integrity": "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/mdast-util-phrasing": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
@@ -3517,6 +3908,27 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
+      "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/mdast-util-to-markdown": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
@@ -3630,6 +4042,127 @@
        "micromark-util-types": "^2.0.0"
      }
    },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+      "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/micromark-factory-destination": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
@@ -4258,6 +4791,31 @@
        "node": ">=6"
      }
    },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
    "node_modules/path-exists": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -4376,6 +4934,16 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/punycode": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4432,6 +5000,33 @@
        "react": "^18.3.1"
      }
    },
+    "node_modules/react-markdown": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
+      "integrity": "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.17.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -4458,6 +5053,24 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/remark-gfm": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/remark-parse": {
      "version": "11.0.0",
      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
@@ -4474,6 +5087,23 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/remark-rehype": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
+      "integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/remark-stringify": {
      "version": "11.0.0",
      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
@@ -4667,6 +5297,30 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/strip-ansi": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -4693,6 +5347,24 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/style-to-js": {
+      "version": "1.1.17",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.17.tgz",
+      "integrity": "sha512-xQcBGDxJb6jjFCTzvQtfiPn6YvvP2O8U1MDIPNfJQlWMYfktPy+iGsHE7cssjs7y84d9fQaK4UF3RIJaAHSoYA==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.9"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.9.tgz",
+      "integrity": "sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.4"
+      }
+    },
    "node_modules/supports-color": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -4726,6 +5398,16 @@
        "node": ">=8.0"
      }
    },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/trough": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
@@ -4827,6 +5509,19 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/unist-util-stringify-position": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,22 +1,28 @@
 {
-  "name": "markr",
-  "version": "0.0.1",
+  "name": "boris",
+  "version": "0.1.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
-      "name": "markr",
-      "version": "0.0.1",
+      "name": "boris",
+      "version": "0.1.1",
      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^7.1.0",
+        "@fortawesome/free-solid-svg-icons": "^7.1.0",
+        "@fortawesome/react-fontawesome": "^3.0.2",
        "applesauce-accounts": "^3.1.0",
        "applesauce-content": "^4.0.0",
        "applesauce-core": "^3.1.0",
        "applesauce-loaders": "^3.1.0",
        "applesauce-react": "^3.1.0",
        "applesauce-relay": "^3.1.0",
+        "date-fns": "^4.1.0",
        "nostr-tools": "^2.4.0",
        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-markdown": "^10.1.0",
+        "remark-gfm": "^4.0.1"
      },
      "devDependencies": {
        "@types/react": "^18.2.43",
@@ -851,6 +857,52 @@
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
      }
    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.1.0.tgz",
+      "integrity": "sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.1.0.tgz",
+      "integrity": "sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.1.0.tgz",
+      "integrity": "sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-3.0.2.tgz",
+      "integrity": "sha512-cmp/nT0pPC7HUALF8uc3+D5ECwEBWxYQbOIHwtGUWEu72sWtZc26k5onr920HWOViF0nYaC+Qzz6Ln56SQcaVg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~6 || ~7",
+        "react": "^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/@humanwhocodes/config-array": {
      "version": "0.13.0",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -1479,9 +1531,17 @@
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
    "node_modules/@types/hast": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
@@ -1517,14 +1577,12 @@
      "version": "15.7.15",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/@types/react": {
      "version": "18.3.25",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.25.tgz",
      "integrity": "sha512-oSVZmGtDPmRZtVDqvdKUi/qgCsWp5IDY29wp8na8Bj4B3cc99hfNzvNhlMkVVxctkAOGUA3Km7MMpBHAnWfcIA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@types/prop-types": "*",
@@ -1756,7 +1814,6 @@
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
-      "dev": true,
      "license": "ISC"
    },
    "node_modules/@vitejs/plugin-react": {
@@ -2414,6 +2471,16 @@
      ],
      "license": "CC-BY-4.0"
    },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2441,6 +2508,36 @@
        "url": "https://github.com/sponsors/wooorm"
      }
    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2461,6 +2558,16 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2494,9 +2601,18 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
      "license": "MIT"
    },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
    "node_modules/debug": {
      "version": "4.4.3",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -2839,6 +2955,16 @@
        "node": ">=4.0"
      }
    },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/esutils": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -3131,6 +3257,56 @@
      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
      "license": "MIT"
    },
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
+      "integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-js": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/ieee754": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -3207,6 +3383,46 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
+      "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==",
+      "license": "MIT"
+    },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -3230,6 +3446,16 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/is-number": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -3435,6 +3661,16 @@
        "yallist": "^3.0.2"
      }
    },
+    "node_modules/markdown-table": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
+      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/mdast-util-find-and-replace": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
@@ -3487,6 +3723,167 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/mdast-util-gfm": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
+      "integrity": "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/mdast-util-phrasing": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
@@ -3501,6 +3898,27 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
+      "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/mdast-util-to-markdown": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
@@ -3614,6 +4032,127 @@
        "micromark-util-types": "^2.0.0"
      }
    },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+      "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/micromark-factory-destination": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
@@ -4242,6 +4781,31 @@
        "node": ">=6"
      }
    },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
    "node_modules/path-exists": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -4360,6 +4924,16 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/punycode": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4416,6 +4990,33 @@
        "react": "^18.3.1"
      }
    },
+    "node_modules/react-markdown": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
+      "integrity": "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.17.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -4442,6 +5043,24 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/remark-gfm": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/remark-parse": {
      "version": "11.0.0",
      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
@@ -4458,6 +5077,23 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/remark-rehype": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
+      "integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/remark-stringify": {
      "version": "11.0.0",
      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
@@ -4651,6 +5287,30 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/strip-ansi": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -4677,6 +5337,24 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/style-to-js": {
+      "version": "1.1.17",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.17.tgz",
+      "integrity": "sha512-xQcBGDxJb6jjFCTzvQtfiPn6YvvP2O8U1MDIPNfJQlWMYfktPy+iGsHE7cssjs7y84d9fQaK4UF3RIJaAHSoYA==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.9"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.9.tgz",
+      "integrity": "sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.4"
+      }
+    },
    "node_modules/supports-color": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -4710,6 +5388,16 @@
        "node": ">=8.0"
      }
    },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/trough": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
@@ -4811,6 +5499,19 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/unist-util-stringify-position": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "markr",
-  "version": "0.0.2",
+  "name": "boris",
+  "version": "0.1.4",
  "description": "A minimal nostr client for bookmark management",
  "type": "module",
  "scripts": {
@@ -10,15 +10,21 @@
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
  },
  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.0.2",
    "applesauce-accounts": "^3.1.0",
    "applesauce-content": "^4.0.0",
    "applesauce-core": "^3.1.0",
    "applesauce-loaders": "^3.1.0",
    "applesauce-react": "^3.1.0",
    "applesauce-relay": "^3.1.0",
+    "date-fns": "^4.1.0",
    "nostr-tools": "^2.4.0",
    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
@@ -43,7 +49,8 @@
    ],
    "ignorePatterns": [
      "dist",
-      ".eslintrc.cjs"
+      ".eslintrc.cjs",
+      "applesauce"
    ],
    "parser": "@typescript-eslint/parser",
    "plugins": [
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import { EventStoreProvider, AccountsProvider } from 'applesauce-react'
 import { EventStore } from 'applesauce-core'
 import { AccountManager } from 'applesauce-accounts'
 import { RelayPool } from 'applesauce-relay'
+import { createAddressLoader } from 'applesauce-loaders/loaders'
 import Login from './components/Login'
 import Bookmarks from './components/Bookmarks'

@@ -21,9 +22,13 @@ function App() {
    // Define relay URLs for bookmark fetching
    const relayUrls = [
      'wss://relay.damus.io',
-      'wss://nos.lol', 
+      'wss://nos.lol',
+      'wss://relay.nostr.band',
+      'wss://relay.dergigi.com',
+      'wss://wot.dergigi.com',
      'wss://relay.snort.social',
-      'wss://relay.nostr.band'
+      'wss://relay.current.fyi',
+      'wss://nostr-pub.wellorder.net'
    ]
    
    // Create a relay group for better event deduplication and management
@@ -33,6 +38,18 @@ function App() {
    console.log('Created relay group with', relayUrls.length, 'relays')
    console.log('Relay URLs:', relayUrls)
    
+    // Attach address/replaceable loaders so ProfileModel can fetch profiles
+    const addressLoader = createAddressLoader(pool, {
+      eventStore: store,
+      lookupRelays: [
+        'wss://purplepag.es',
+        'wss://relay.primal.net',
+        'wss://relay.nostr.band'
+      ]
+    })
+    store.addressableLoader = addressLoader
+    store.replaceableLoader = addressLoader
+
    setEventStore(store)
    setAccountManager(accounts)
    setRelayPool(pool)
@@ -46,17 +63,12 @@ function App() {
    <EventStoreProvider eventStore={eventStore}>
      <AccountsProvider manager={accountManager}>
        <div className="app">
-          <header>
-            <h1>Markr</h1>
-            <p>A minimal nostr bookmark client</p>
-          </header>
-          
          {!isAuthenticated ? (
            <Login onLogin={() => setIsAuthenticated(true)} />
          ) : (
            <Bookmarks 
              relayPool={relayPool}
-              onLogout={() => setIsAuthenticated(false)} 
+              onLogout={() => setIsAuthenticated(false)}
            />
          )}
        </div>
--- a/src/components/BookmarkItem.tsx
+++ b/src/components/BookmarkItem.tsx
@@ -0,0 +1,105 @@
+import React, { useState } from 'react'
+import { faBookOpen, faPlay, faEye } from '@fortawesome/free-solid-svg-icons'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
+import { npubEncode, neventEncode } from 'nostr-tools/nip19'
+import { IndividualBookmark } from '../types/bookmarks'
+import { extractUrlsFromContent } from '../services/bookmarkHelpers'
+import { classifyUrl } from '../utils/helpers'
+import { ViewMode } from './Bookmarks'
+import { getPreviewImage, fetchOgImage } from '../utils/imagePreview'
+import { CompactView } from './BookmarkViews/CompactView'
+import { LargeView } from './BookmarkViews/LargeView'
+import { CardView } from './BookmarkViews/CardView'
+
+interface BookmarkItemProps {
+  bookmark: IndividualBookmark
+  index: number
+  onSelectUrl?: (url: string) => void
+  viewMode?: ViewMode
+}
+
+export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards' }) => {
+  const [ogImage, setOgImage] = useState<string | null>(null)
+
+  const short = (v: string) => `${v.slice(0, 8)}...${v.slice(-8)}`
+  
+  // Extract URLs from bookmark content
+  const extractedUrls = extractUrlsFromContent(bookmark.content)
+  const hasUrls = extractedUrls.length > 0
+  const firstUrl = hasUrls ? extractedUrls[0] : null
+  const firstUrlClassification = firstUrl ? classifyUrl(firstUrl) : null
+  
+  // Fetch OG image for large view (hook must be at top level)
+  const instantPreview = firstUrl ? getPreviewImage(firstUrl, firstUrlClassification?.type || '') : null
+  React.useEffect(() => {
+    if (viewMode === 'large' && firstUrl && !instantPreview && !ogImage) {
+      fetchOgImage(firstUrl).then(setOgImage)
+    }
+  }, [viewMode, firstUrl, instantPreview, ogImage])
+
+  // Resolve author profile using applesauce
+  const authorProfile = useEventModel(Models.ProfileModel, [bookmark.pubkey])
+  const authorNpub = npubEncode(bookmark.pubkey)
+  const isHexId = /^[0-9a-f]{64}$/i.test(bookmark.id)
+  const eventNevent = isHexId ? neventEncode({ id: bookmark.id }) : undefined
+  
+  // Get display name for author
+  const getAuthorDisplayName = () => {
+    if (authorProfile?.name) return authorProfile.name
+    if (authorProfile?.display_name) return authorProfile.display_name
+    if (authorProfile?.nip05) return authorProfile.nip05
+    return short(bookmark.pubkey) // fallback to short pubkey
+  }
+
+  // use helper from kindIcon.ts
+
+  const getIconForUrlType = (url: string) => {
+    const classification = classifyUrl(url)
+    switch (classification.type) {
+      case 'youtube':
+      case 'video':
+        return faPlay
+      case 'image':
+        return faEye
+      default:
+        return faBookOpen
+    }
+  }
+
+  const handleReadNow = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (!hasUrls) return
+    const firstUrl = extractedUrls[0]
+    if (onSelectUrl) {
+      event.preventDefault()
+      onSelectUrl(firstUrl)
+    } else {
+      window.open(firstUrl, '_blank')
+    }
+  }
+
+  const sharedProps = {
+    bookmark,
+    index,
+    hasUrls,
+    extractedUrls,
+    onSelectUrl,
+    getIconForUrlType,
+    firstUrlClassification,
+    authorNpub,
+    eventNevent,
+    getAuthorDisplayName,
+    handleReadNow
+  }
+
+  if (viewMode === 'compact') {
+    return <CompactView {...sharedProps} />
+  }
+
+  if (viewMode === 'large') {
+    const previewImage = instantPreview || ogImage
+    return <LargeView {...sharedProps} previewImage={previewImage} />
+  }
+
+  return <CardView {...sharedProps} />
+}
--- a/src/components/BookmarkList.tsx
+++ b/src/components/BookmarkList.tsx
@@ -0,0 +1,132 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'
+import { Bookmark } from '../types/bookmarks'
+import { BookmarkItem } from './BookmarkItem'
+import { formatDate, renderParsedContent } from '../utils/bookmarkUtils'
+import SidebarHeader from './SidebarHeader'
+import { ViewMode } from './Bookmarks'
+
+interface BookmarkListProps {
+  bookmarks: Bookmark[]
+  onSelectUrl?: (url: string) => void
+  isCollapsed: boolean
+  onToggleCollapse: () => void
+  onLogout: () => void
+  viewMode: ViewMode
+  onViewModeChange: (mode: ViewMode) => void
+}
+
+export const BookmarkList: React.FC<BookmarkListProps> = ({ 
+  bookmarks, 
+  onSelectUrl,
+  isCollapsed,
+  onToggleCollapse,
+  onLogout,
+  viewMode,
+  onViewModeChange
+}) => {
+  if (isCollapsed) {
+    return (
+      <div className="bookmarks-container collapsed">
+        <button 
+          onClick={onToggleCollapse}
+          className="toggle-sidebar-btn"
+          title="Expand bookmarks sidebar"
+          aria-label="Expand bookmarks sidebar"
+        >
+          <FontAwesomeIcon icon={faChevronLeft} />
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="bookmarks-container">
+      <SidebarHeader 
+        onToggleCollapse={onToggleCollapse} 
+        onLogout={onLogout}
+        viewMode={viewMode}
+        onViewModeChange={onViewModeChange}
+      />
+      
+      {bookmarks.length === 0 ? (
+        <div className="empty-state">
+          <p>No bookmarks found.</p>
+          <p>Add bookmarks using your nostr client to see them here.</p>
+        </div>
+      ) : (
+        <div className="bookmarks-list">
+          {bookmarks.map((bookmark, index) => (
+            <div key={`${bookmark.id}-${index}`} className="bookmark-item">
+              {bookmark.bookmarkCount && (
+                <p className="bookmark-count">
+                  {bookmark.bookmarkCount} bookmarks in{' '}
+                  <a 
+                    href={`https://search.dergigi.com/e/${bookmark.id}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="event-link"
+                  >
+                    this list
+                  </a>
+                  :
+                </p>
+              )}
+              {bookmark.urlReferences && bookmark.urlReferences.length > 0 && (
+                <div className="bookmark-urls">
+                  <h4>URLs:</h4>
+                  {bookmark.urlReferences.map((url, index) => (
+                    <a key={index} href={url} target="_blank" rel="noopener noreferrer" className="bookmark-url">
+                      {url}
+                    </a>
+                  ))}
+                </div>
+              )}
+              {bookmark.individualBookmarks && bookmark.individualBookmarks.length > 0 && (
+                <div className="individual-bookmarks">
+                  <div className={`bookmarks-grid bookmarks-${viewMode}`}>
+                    {bookmark.individualBookmarks.map((individualBookmark, index) => 
+                      <BookmarkItem 
+                        key={index} 
+                        bookmark={individualBookmark} 
+                        index={index} 
+                        onSelectUrl={onSelectUrl}
+                        viewMode={viewMode}
+                      />
+                    )}
+                  </div>
+                </div>
+              )}
+              {bookmark.eventReferences && bookmark.eventReferences.length > 0 && bookmark.individualBookmarks?.length === 0 && (
+                <div className="bookmark-events">
+                  <h4>Event References ({bookmark.eventReferences.length}):</h4>
+                  <div className="event-ids">
+                    {bookmark.eventReferences.slice(0, 3).map((eventId, index) => (
+                      <span key={index} className="event-id">
+                        {eventId.slice(0, 8)}...{eventId.slice(-8)}
+                      </span>
+                    ))}
+                    {bookmark.eventReferences.length > 3 && (
+                      <span className="more-events">... and {bookmark.eventReferences.length - 3} more</span>
+                    )}
+                  </div>
+                </div>
+              )}
+              {bookmark.parsedContent ? (
+                <div className="bookmark-content">
+                  {renderParsedContent(bookmark.parsedContent)}
+                </div>
+              ) : bookmark.content && (
+                <p className="bookmark-content">{bookmark.content}</p>
+              )}
+              <div className="bookmark-meta">
+                <span>Created: {formatDate(bookmark.created_at)}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
--- a/src/components/BookmarkViews/CardView.tsx
+++ b/src/components/BookmarkViews/CardView.tsx
@@ -0,0 +1,153 @@
+import React, { useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBookmark, faUserLock, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+import { IndividualBookmark } from '../../types/bookmarks'
+import { formatDate, renderParsedContent } from '../../utils/bookmarkUtils'
+import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
+import IconButton from '../IconButton'
+import { classifyUrl } from '../../utils/helpers'
+import { IconGetter } from './shared'
+
+interface CardViewProps {
+  bookmark: IndividualBookmark
+  index: number
+  hasUrls: boolean
+  extractedUrls: string[]
+  onSelectUrl?: (url: string) => void
+  getIconForUrlType: IconGetter
+  firstUrlClassification: { buttonText: string } | null
+  authorNpub: string
+  eventNevent?: string
+  getAuthorDisplayName: () => string
+  handleReadNow: (e: React.MouseEvent<HTMLButtonElement>) => void
+}
+
+export const CardView: React.FC<CardViewProps> = ({
+  bookmark,
+  index,
+  hasUrls,
+  extractedUrls,
+  onSelectUrl,
+  getIconForUrlType,
+  firstUrlClassification,
+  authorNpub,
+  eventNevent,
+  getAuthorDisplayName,
+  handleReadNow
+}) => {
+  const [expanded, setExpanded] = useState(false)
+  const [urlsExpanded, setUrlsExpanded] = useState(false)
+  const contentLength = (bookmark.content || '').length
+  const shouldTruncate = !expanded && contentLength > 210
+
+  return (
+    <div key={`${bookmark.id}-${index}`} className={`individual-bookmark ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
+      <div className="bookmark-header">
+        <span className="bookmark-type">
+          {bookmark.isPrivate ? (
+            <>
+              <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
+              <FontAwesomeIcon icon={faUserLock} className="bookmark-visibility private" />
+            </>
+          ) : (
+            <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
+          )}
+        </span>
+        
+        {eventNevent ? (
+          <a
+            href={`https://search.dergigi.com/e/${eventNevent}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="bookmark-date-link"
+            title="Open event in search"
+          >
+            {formatDate(bookmark.created_at)}
+          </a>
+        ) : (
+          <span className="bookmark-date">{formatDate(bookmark.created_at)}</span>
+        )}
+      </div>
+      
+      {extractedUrls.length > 0 && (
+        <div className="bookmark-urls">
+          {(urlsExpanded ? extractedUrls : extractedUrls.slice(0, 1)).map((url, urlIndex) => {
+            const classification = classifyUrl(url)
+            return (
+              <div key={urlIndex} className="url-row">
+                <button
+                  className="bookmark-url"
+                  onClick={() => onSelectUrl?.(url)}
+                  title="Open in reader"
+                >
+                  {url}
+                </button>
+                <IconButton
+                  icon={getIconForUrlType(url)}
+                  ariaLabel={classification.buttonText}
+                  title={classification.buttonText}
+                  variant="success"
+                  size={32}
+                  onClick={(e) => { e.preventDefault(); onSelectUrl?.(url) }}
+                />
+              </div>
+            )
+          })}
+          {extractedUrls.length > 1 && (
+            <button
+              className="expand-toggle-urls"
+              onClick={() => setUrlsExpanded(v => !v)}
+              aria-label={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
+              title={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
+            >
+              {urlsExpanded ? `Hide ${extractedUrls.length - 1} more` : `Show ${extractedUrls.length - 1} more`}
+            </button>
+          )}
+        </div>
+      )}
+      
+      {bookmark.parsedContent ? (
+        <div className="bookmark-content">
+          {shouldTruncate && bookmark.content
+            ? <ContentWithResolvedProfiles content={`${bookmark.content.slice(0, 210).trimEnd()}…`} />
+            : renderParsedContent(bookmark.parsedContent)}
+        </div>
+      ) : bookmark.content && (
+        <div className="bookmark-content">
+          <ContentWithResolvedProfiles content={shouldTruncate ? `${bookmark.content.slice(0, 210).trimEnd()}…` : bookmark.content} />
+        </div>
+      )}
+
+      {contentLength > 210 && (
+        <button
+          className="expand-toggle"
+          onClick={() => setExpanded(v => !v)}
+          aria-label={expanded ? 'Collapse' : 'Expand'}
+          title={expanded ? 'Collapse' : 'Expand'}
+        >
+          <FontAwesomeIcon icon={expanded ? faChevronUp : faChevronDown} />
+        </button>
+      )}
+      
+      <div className="bookmark-footer">
+        <div className="bookmark-meta-minimal">
+          <a
+            href={`https://search.dergigi.com/p/${authorNpub}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="author-link-minimal"
+            title="Open author in search"
+          >
+            {getAuthorDisplayName()}
+          </a>
+        </div>
+        {hasUrls && firstUrlClassification && (
+          <button className="read-now-button-minimal" onClick={handleReadNow}>
+            {firstUrlClassification.buttonText}
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
--- a/src/components/BookmarkViews/CompactView.tsx
+++ b/src/components/BookmarkViews/CompactView.tsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBookmark, faUserLock } from '@fortawesome/free-solid-svg-icons'
+import { IndividualBookmark } from '../../types/bookmarks'
+import { formatDate } from '../../utils/bookmarkUtils'
+import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
+import { IconGetter } from './shared'
+
+interface CompactViewProps {
+  bookmark: IndividualBookmark
+  index: number
+  hasUrls: boolean
+  extractedUrls: string[]
+  onSelectUrl?: (url: string) => void
+  getIconForUrlType: IconGetter
+  firstUrlClassification: { buttonText: string } | null
+}
+
+export const CompactView: React.FC<CompactViewProps> = ({
+  bookmark,
+  index,
+  hasUrls,
+  extractedUrls,
+  onSelectUrl,
+  getIconForUrlType,
+  firstUrlClassification
+}) => {
+  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 ${hasUrls ? 'clickable' : ''}`}
+        onClick={handleCompactClick}
+        role={hasUrls ? 'button' : undefined}
+        tabIndex={hasUrls ? 0 : undefined}
+      >
+        <span className="bookmark-type-compact">
+          {bookmark.isPrivate ? (
+            <>
+              <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
+              <FontAwesomeIcon icon={faUserLock} className="bookmark-visibility private" />
+            </>
+          ) : (
+            <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
+          )}
+        </span>
+        {bookmark.content && (
+          <div className="compact-text">
+            <ContentWithResolvedProfiles content={bookmark.content.slice(0, 60) + (bookmark.content.length > 60 ? '…' : '')} />
+          </div>
+        )}
+        <span className="bookmark-date-compact">{formatDate(bookmark.created_at)}</span>
+        {hasUrls && (
+          <button
+            className="compact-read-btn"
+            onClick={(e) => { e.stopPropagation(); onSelectUrl?.(extractedUrls[0]) }}
+            title={firstUrlClassification?.buttonText}
+          >
+            <FontAwesomeIcon icon={getIconForUrlType(extractedUrls[0])} />
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
--- a/src/components/BookmarkViews/LargeView.tsx
+++ b/src/components/BookmarkViews/LargeView.tsx
@@ -0,0 +1,94 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IndividualBookmark } from '../../types/bookmarks'
+import { formatDate } from '../../utils/bookmarkUtils'
+import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
+import { IconGetter } from './shared'
+
+interface LargeViewProps {
+  bookmark: IndividualBookmark
+  index: number
+  hasUrls: boolean
+  extractedUrls: string[]
+  onSelectUrl?: (url: string) => void
+  getIconForUrlType: IconGetter
+  firstUrlClassification: { buttonText: string } | null
+  previewImage: string | null
+  authorNpub: string
+  eventNevent?: string
+  getAuthorDisplayName: () => string
+  handleReadNow: (e: React.MouseEvent<HTMLButtonElement>) => void
+}
+
+export const LargeView: React.FC<LargeViewProps> = ({
+  bookmark,
+  index,
+  hasUrls,
+  extractedUrls,
+  onSelectUrl,
+  getIconForUrlType,
+  firstUrlClassification,
+  previewImage,
+  authorNpub,
+  eventNevent,
+  getAuthorDisplayName,
+  handleReadNow
+}) => {
+  return (
+    <div key={`${bookmark.id}-${index}`} className={`individual-bookmark large ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
+      {hasUrls && (
+        <div 
+          className="large-preview-image" 
+          onClick={() => onSelectUrl?.(extractedUrls[0])}
+          style={previewImage ? { backgroundImage: `url(${previewImage})` } : undefined}
+        >
+          {!previewImage && (
+            <div className="preview-placeholder">
+              <FontAwesomeIcon icon={getIconForUrlType(extractedUrls[0])} />
+            </div>
+          )}
+        </div>
+      )}
+      
+      <div className="large-content">
+        {bookmark.content && (
+          <div className="large-text">
+            <ContentWithResolvedProfiles content={bookmark.content} />
+          </div>
+        )}
+        
+        <div className="large-footer">
+          <span className="large-author">
+            <a
+              href={`https://search.dergigi.com/p/${authorNpub}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="author-link-minimal"
+            >
+              {getAuthorDisplayName()}
+            </a>
+          </span>
+          
+          {eventNevent && (
+            <a
+              href={`https://search.dergigi.com/e/${eventNevent}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="bookmark-date-link"
+            >
+              {formatDate(bookmark.created_at)}
+            </a>
+          )}
+          
+          {hasUrls && firstUrlClassification && (
+            <button className="large-read-button" onClick={handleReadNow}>
+              <FontAwesomeIcon icon={getIconForUrlType(extractedUrls[0])} />
+              {firstUrlClassification.buttonText}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
--- a/src/components/BookmarkViews/shared.ts
+++ b/src/components/BookmarkViews/shared.ts
@@ -0,0 +1,4 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+
+export type IconGetter = (url: string) => IconDefinition
+
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -1,52 +1,16 @@
 import React, { useState, useEffect } from 'react'
 import { Hooks } from 'applesauce-react'
-import { useEventModel } from 'applesauce-react/hooks'
-import { Models } from 'applesauce-core'
 import { RelayPool } from 'applesauce-relay'
-import { completeOnEose } from 'applesauce-relay'
-import { getParsedContent } from 'applesauce-content/text'
-import { Filter } from 'nostr-tools'
-import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
+import { Bookmark } from '../types/bookmarks'
+import { Highlight } from '../types/highlights'
+import { BookmarkList } from './BookmarkList'
+import { fetchBookmarks } from '../services/bookmarkService'
+import { fetchHighlights } from '../services/highlightService'
+import ContentPanel from './ContentPanel'
+import { HighlightsPanel } from './HighlightsPanel'
+import { fetchReadableContent, ReadableContent } from '../services/readerService'

-interface ParsedNode {
-  type: string
-  value?: string
-  url?: string
-  encoded?: string
-  children?: ParsedNode[]
-}
-
-interface ParsedContent {
-  type: string
-  children: ParsedNode[]
-}
-
-interface Bookmark {
-  id: string
-  title: string
-  url: string
-  content: string
-  created_at: number
-  tags: string[][]
-  bookmarkCount?: number
-  eventReferences?: string[]
-  articleReferences?: string[]
-  urlReferences?: string[]
-  parsedContent?: ParsedContent
-  individualBookmarks?: IndividualBookmark[]
-}
-
-interface IndividualBookmark {
-  id: string
-  content: string
-  created_at: number
-  pubkey: string
-  kind: number
-  tags: string[][]
-  parsedContent?: ParsedContent
-  author?: string
-  type: 'event' | 'article'
-}
+export type ViewMode = 'compact' | 'cards' | 'large'

 interface BookmarksProps {
  relayPool: RelayPool | null
@@ -56,359 +20,124 @@ interface BookmarksProps {
 const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
  const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
  const [loading, setLoading] = useState(true)
+  const [highlights, setHighlights] = useState<Highlight[]>([])
+  const [highlightsLoading, setHighlightsLoading] = useState(true)
+  const [selectedUrl, setSelectedUrl] = useState<string | undefined>(undefined)
+  const [readerLoading, setReaderLoading] = useState(false)
+  const [readerContent, setReaderContent] = useState<ReadableContent | undefined>(undefined)
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const [isHighlightsCollapsed, setIsHighlightsCollapsed] = useState(false)
+  const [viewMode, setViewMode] = useState<ViewMode>('cards')
+  const [showUnderlines, setShowUnderlines] = useState(true)
  const activeAccount = Hooks.useActiveAccount()
-  
-  // Use ProfileModel to get user profile information
-  const profile = useEventModel(Models.ProfileModel, activeAccount ? [activeAccount.pubkey] : null)
+  const accountManager = Hooks.useAccountManager()

  useEffect(() => {
    console.log('Bookmarks useEffect triggered')
    console.log('relayPool:', !!relayPool)
    console.log('activeAccount:', !!activeAccount)
    if (relayPool && activeAccount) {
-      console.log('Starting to fetch bookmarks...')
-      fetchBookmarks()
+      console.log('Starting to fetch bookmarks and highlights...')
+      handleFetchBookmarks()
+      handleFetchHighlights()
    } else {
      console.log('Not fetching bookmarks - missing dependencies')
    }
  }, [relayPool, activeAccount?.pubkey]) // Only depend on pubkey, not the entire activeAccount object

-  const fetchBookmarks = async () => {
+  const handleFetchBookmarks = async () => {
    console.log('🔍 fetchBookmarks called, loading:', loading)
    if (!relayPool || !activeAccount) {
      console.log('🔍 fetchBookmarks early return - relayPool:', !!relayPool, 'activeAccount:', !!activeAccount)
      return
    }

+    // Set a timeout to ensure loading state gets reset
+    const timeoutId = setTimeout(() => {
+      console.log('⏰ Timeout reached, resetting loading state')
+      setLoading(false)
+    }, 15000) // 15 second timeout
+
+    // Get the full account object with extension capabilities
+    const fullAccount = accountManager.getActive()
+    await fetchBookmarks(relayPool, fullAccount || activeAccount, setBookmarks, setLoading, timeoutId)
+  }
+
+  const handleFetchHighlights = async () => {
+    if (!relayPool || !activeAccount) {
+      return
+    }
+    
+    setHighlightsLoading(true)
    try {
-      setLoading(true)
-      console.log('🚀 NEW VERSION: Fetching bookmark list for pubkey:', activeAccount.pubkey)
-      
-      // Set a timeout to ensure loading state gets reset
-      const timeoutId = setTimeout(() => {
-        console.log('⏰ Timeout reached, resetting loading state')
-        setLoading(false)
-      }, 15000) // 15 second timeout
-      
-      // Get relay URLs from the pool
-      const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
-      
-      // Step 1: Fetch the bookmark list event (kind 10003)
-      const bookmarkListFilter: Filter = {
-        kinds: [10003],
-        authors: [activeAccount.pubkey],
-        limit: 1 // Just get the most recent bookmark list
-      }
-      
-      console.log('Fetching bookmark list with filter:', bookmarkListFilter)
-      const bookmarkListEvents = await lastValueFrom(
-        relayPool.req(relayUrls, bookmarkListFilter).pipe(
-          completeOnEose(),
-          takeUntil(timer(10000)),
-          toArray(),
-        )
-      )
-      
-      console.log('Found bookmark list events:', bookmarkListEvents.length)
-      
-      if (bookmarkListEvents.length === 0) {
-        console.log('No bookmark list found')
-        setBookmarks([])
-        setLoading(false)
-        return
-      }
-      
-      // Step 2: Extract event IDs from the bookmark list
-      const bookmarkListEvent = bookmarkListEvents[0]
-      const eventTags = bookmarkListEvent.tags.filter(tag => tag[0] === 'e')
-      const eventIds = eventTags.map(tag => tag[1])
-      
-      console.log('Found event IDs in bookmark list:', eventIds.length, eventIds)
-      
-      if (eventIds.length === 0) {
-        console.log('No event references found in bookmark list')
-        setBookmarks([])
-        setLoading(false)
-        return
-      }
-      
-      // Step 3: Fetch each individual event
-      console.log('Fetching individual events...')
-      const individualBookmarks: IndividualBookmark[] = []
-      
-      for (const eventId of eventIds) {
-        try {
-          console.log('Fetching event:', eventId)
-          const eventFilter: Filter = {
-            ids: [eventId]
-          }
-          
-          const events = await lastValueFrom(
-            relayPool.req(relayUrls, eventFilter).pipe(
-              completeOnEose(),
-              takeUntil(timer(5000)),
-              toArray(),
-            )
-          )
-          
-          if (events.length > 0) {
-            const event = events[0]
-            const parsedContent = event.content ? getParsedContent(event.content) as ParsedContent : undefined
-            
-            individualBookmarks.push({
-              id: event.id,
-              content: event.content,
-              created_at: event.created_at,
-              pubkey: event.pubkey,
-              kind: event.kind,
-              tags: event.tags,
-              parsedContent: parsedContent,
-              type: 'event'
-            })
-            console.log('Successfully fetched event:', event.id)
-          } else {
-            console.log('Event not found:', eventId)
-          }
-        } catch (error) {
-          console.error('Error fetching event:', eventId, error)
-        }
-      }
-      
-      console.log('Fetched individual bookmarks:', individualBookmarks.length)
-      
-      // Create a single bookmark entry with all individual bookmarks
-      const bookmark: Bookmark = {
-        id: bookmarkListEvent.id,
-        title: bookmarkListEvent.content || `Bookmark List (${individualBookmarks.length} items)`,
-        url: '',
-        content: bookmarkListEvent.content,
-        created_at: bookmarkListEvent.created_at,
-        tags: bookmarkListEvent.tags,
-        bookmarkCount: individualBookmarks.length,
-        eventReferences: eventIds,
-        individualBookmarks: individualBookmarks
-      }
-      
-      setBookmarks([bookmark])
-      clearTimeout(timeoutId)
-      setLoading(false)
+      const fetchedHighlights = await fetchHighlights(relayPool, activeAccount.pubkey)
+      setHighlights(fetchedHighlights)
+    } catch (err) {
+      console.error('Failed to fetch highlights:', err)
+    } finally {
+      setHighlightsLoading(false)
+    }
+  }

-    } catch (error) {
-      console.error('Failed to fetch bookmarks:', error)
-      clearTimeout(timeoutId)
-      setLoading(false)
+  const handleSelectUrl = async (url: string) => {
+    setSelectedUrl(url)
+    setReaderLoading(true)
+    setReaderContent(undefined)
+    try {
+      const content = await fetchReadableContent(url)
+      setReaderContent(content)
+    } catch (err) {
+      console.warn('Failed to fetch readable content:', err)
+    } finally {
+      setReaderLoading(false)
    }
  }


-  const formatDate = (timestamp: number) => {
-    return new Date(timestamp * 1000).toLocaleDateString()
-  }
-
-  // Component to render parsed content using applesauce-content
-  const renderParsedContent = (parsedContent: ParsedContent) => {
-    if (!parsedContent || !parsedContent.children) {
-      return null
-    }
-
-    const renderNode = (node: ParsedNode, index: number): React.ReactNode => {
-      if (node.type === 'text') {
-        return <span key={index}>{node.value}</span>
-      }
-      
-      if (node.type === 'mention') {
-        return (
-          <a 
-            key={index}
-            href={`nostr:${node.encoded}`}
-            className="nostr-mention"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {node.encoded}
-          </a>
-        )
-      }
-      
-      if (node.type === 'link') {
-        return (
-          <a 
-            key={index}
-            href={node.url}
-            className="nostr-link"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {node.url}
-          </a>
-        )
-      }
-      
-      if (node.children) {
-        return (
-          <span key={index}>
-            {node.children.map((child: ParsedNode, childIndex: number) => 
-              renderNode(child, childIndex)
-            )}
-          </span>
-        )
-      }
-      
-      return null
-    }
-
-    return (
-      <div className="parsed-content">
-        {parsedContent.children.map((node: ParsedNode, index: number) => 
-          renderNode(node, index)
-        )}
-      </div>
-    )
-  }
-
-  // Component to render individual bookmarks
-  const renderIndividualBookmark = (bookmark: IndividualBookmark, index: number) => {
-    return (
-      <div key={`${bookmark.id}-${index}`} className="individual-bookmark">
-        <div className="bookmark-header">
-          <span className="bookmark-type">{bookmark.type}</span>
-          <span className="bookmark-id">{bookmark.id.slice(0, 8)}...{bookmark.id.slice(-8)}</span>
-          <span className="bookmark-date">{formatDate(bookmark.created_at)}</span>
-        </div>
-        
-        {bookmark.parsedContent ? (
-          <div className="bookmark-content">
-            {renderParsedContent(bookmark.parsedContent)}
-          </div>
-        ) : bookmark.content && (
-          <div className="bookmark-content">
-            <p>{bookmark.content}</p>
-          </div>
-        )}
-        
-        <div className="bookmark-meta">
-          <span>Kind: {bookmark.kind}</span>
-          <span>Author: {bookmark.pubkey.slice(0, 8)}...{bookmark.pubkey.slice(-8)}</span>
-        </div>
-      </div>
-    )
-  }
-
-  const formatUserDisplay = () => {
-    if (!activeAccount) return 'Unknown User'
-
-    // Use profile data from ProfileModel if available
-    if (profile?.name) {
-      return profile.name
-    }
-    if (profile?.display_name) {
-      return profile.display_name
-    }
-    if (profile?.nip05) {
-      return profile.nip05
-    }
-
-    // Fallback to formatted public key
-    return `${activeAccount.pubkey.slice(0, 8)}...${activeAccount.pubkey.slice(-8)}`
-  }

  if (loading) {
    return (
      <div className="bookmarks-container">
-        <div className="bookmarks-header">
-          <div>
-            <h2>Your Bookmarks</h2>
-            {activeAccount && (
-              <p className="user-info">Logged in as: {formatUserDisplay()}</p>
-            )}
-          </div>
-          <button onClick={onLogout} className="logout-button">
-            Logout
-          </button>
-        </div>
        <div className="loading">Loading bookmarks...</div>
      </div>
    )
  }

  return (
-    <div className="bookmarks-container">
-      <div className="bookmarks-header">
-        <div>
-          <h2>Your Bookmarks ({bookmarks.length})</h2>
-          {activeAccount && (
-            <p className="user-info">Logged in as: {formatUserDisplay()}</p>
-          )}
-        </div>
-        <button onClick={onLogout} className="logout-button">
-          Logout
-        </button>
+    <div className={`three-pane ${isCollapsed ? 'sidebar-collapsed' : ''} ${isHighlightsCollapsed ? 'highlights-collapsed' : ''}`}>
+      <div className="pane sidebar">
+        <BookmarkList 
+          bookmarks={bookmarks}
+          onSelectUrl={handleSelectUrl}
+          isCollapsed={isCollapsed}
+          onToggleCollapse={() => setIsCollapsed(!isCollapsed)}
+          onLogout={onLogout}
+          viewMode={viewMode}
+          onViewModeChange={setViewMode}
+        />
+      </div>
+      <div className="pane main">
+        <ContentPanel 
+          loading={readerLoading}
+          title={readerContent?.title}
+          html={readerContent?.html}
+          markdown={readerContent?.markdown}
+          selectedUrl={selectedUrl}
+          highlights={highlights}
+          showUnderlines={showUnderlines}
+        />
+      </div>
+      <div className="pane highlights">
+        <HighlightsPanel
+          highlights={highlights}
+          loading={highlightsLoading}
+          isCollapsed={isHighlightsCollapsed}
+          onToggleCollapse={() => setIsHighlightsCollapsed(!isHighlightsCollapsed)}
+          onSelectUrl={handleSelectUrl}
+          selectedUrl={selectedUrl}
+          onToggleUnderlines={setShowUnderlines}
+        />
      </div>
-      
-      {bookmarks.length === 0 ? (
-        <div className="empty-state">
-          <p>No bookmarks found.</p>
-          <p>Add bookmarks using your nostr client to see them here.</p>
-        </div>
-      ) : (
-        <div className="bookmarks-list">
-          {bookmarks.map((bookmark, index) => (
-            <div key={`${bookmark.id}-${index}`} className="bookmark-item">
-              <h3>{bookmark.title}</h3>
-              {bookmark.bookmarkCount && (
-                <p className="bookmark-count">
-                  {bookmark.bookmarkCount} bookmarks in this list
-                </p>
-              )}
-              {bookmark.urlReferences && bookmark.urlReferences.length > 0 && (
-                <div className="bookmark-urls">
-                  <h4>URLs:</h4>
-                  {bookmark.urlReferences.map((url, index) => (
-                    <a key={index} href={url} target="_blank" rel="noopener noreferrer" className="bookmark-url">
-                      {url}
-                    </a>
-                  ))}
-                </div>
-              )}
-              {bookmark.individualBookmarks && bookmark.individualBookmarks.length > 0 && (
-                <div className="individual-bookmarks">
-                  <h4>Individual Bookmarks ({bookmark.individualBookmarks.length}):</h4>
-                  <div className="bookmarks-grid">
-                    {bookmark.individualBookmarks.map((individualBookmark, index) => 
-                      renderIndividualBookmark(individualBookmark, index)
-                    )}
-                  </div>
-                </div>
-              )}
-              {bookmark.eventReferences && bookmark.eventReferences.length > 0 && bookmark.individualBookmarks?.length === 0 && (
-                <div className="bookmark-events">
-                  <h4>Event References ({bookmark.eventReferences.length}):</h4>
-                  <div className="event-ids">
-                    {bookmark.eventReferences.slice(0, 3).map((eventId, index) => (
-                      <span key={index} className="event-id">
-                        {eventId.slice(0, 8)}...{eventId.slice(-8)}
-                      </span>
-                    ))}
-                    {bookmark.eventReferences.length > 3 && (
-                      <span className="more-events">... and {bookmark.eventReferences.length - 3} more</span>
-                    )}
-                  </div>
-                </div>
-              )}
-              {bookmark.parsedContent ? (
-                <div className="bookmark-content">
-                  {renderParsedContent(bookmark.parsedContent)}
-                </div>
-              ) : bookmark.content && (
-                <p className="bookmark-content">{bookmark.content}</p>
-              )}
-              <div className="bookmark-meta">
-                <span>Created: {formatDate(bookmark.created_at)}</span>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
    </div>
  )
 }
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -0,0 +1,206 @@
+import React, { useMemo, useEffect, useRef } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSpinner, faHighlighter } from '@fortawesome/free-solid-svg-icons'
+import { Highlight } from '../types/highlights'
+import { applyHighlightsToHTML } from '../utils/highlightMatching'
+
+interface ContentPanelProps {
+  loading: boolean
+  title?: string
+  html?: string
+  markdown?: string
+  selectedUrl?: string
+  highlights?: Highlight[]
+  showUnderlines?: boolean
+}
+
+const ContentPanel: React.FC<ContentPanelProps> = ({ 
+  loading, 
+  title, 
+  html, 
+  markdown, 
+  selectedUrl,
+  highlights = [],
+  showUnderlines = true
+}) => {
+  const contentRef = useRef<HTMLDivElement>(null)
+  
+  // Filter highlights relevant to the current URL
+  const relevantHighlights = useMemo(() => {
+    if (!selectedUrl || highlights.length === 0) {
+      console.log('🔍 No highlights to filter:', { selectedUrl, highlightsCount: highlights.length })
+      return []
+    }
+    
+    // Normalize URLs for comparison (remove trailing slashes, protocols, www, query params, fragments)
+    const normalizeUrl = (url: string) => {
+      try {
+        const urlObj = new URL(url.startsWith('http') ? url : `https://${url}`)
+        // Get just the hostname + pathname, remove trailing slash
+        return `${urlObj.hostname.replace(/^www\./, '')}${urlObj.pathname}`.replace(/\/$/, '').toLowerCase()
+      } catch {
+        // Fallback for invalid URLs
+        return url.replace(/^https?:\/\//, '').replace(/^www\./, '').replace(/\/$/, '').toLowerCase()
+      }
+    }
+    
+    const normalizedSelected = normalizeUrl(selectedUrl)
+    console.log('🔍 Normalized selected URL:', normalizedSelected)
+    
+    const filtered = highlights.filter(h => {
+      if (!h.urlReference) {
+        console.log('⚠️ Highlight has no URL reference:', h.id.slice(0, 8))
+        return false
+      }
+      
+      const normalizedRef = normalizeUrl(h.urlReference)
+      const matches = normalizedSelected === normalizedRef || 
+                     normalizedSelected.includes(normalizedRef) ||
+                     normalizedRef.includes(normalizedSelected)
+      
+      console.log('🔍 URL comparison:', {
+        highlightId: h.id.slice(0, 8),
+        originalRef: h.urlReference,
+        normalizedRef,
+        normalizedSelected,
+        matches
+      })
+      
+      return matches
+    })
+    
+    console.log('🔍 Filtered highlights:', {
+      selectedUrl,
+      totalHighlights: highlights.length,
+      relevantHighlights: filtered.length,
+      highlights: filtered.map(h => ({
+        id: h.id.slice(0, 8),
+        urlRef: h.urlReference,
+        content: h.content.slice(0, 50)
+      }))
+    })
+    
+    return filtered
+  }, [selectedUrl, highlights])
+
+  // Apply highlights after DOM is rendered
+  useEffect(() => {
+    // Skip if no content or underlines are hidden
+    if ((!html && !markdown) || !showUnderlines) {
+      console.log('⚠️ Skipping highlight application:', {
+        reason: (!html && !markdown) ? 'no content' : 'underlines hidden',
+        hasHtml: !!html,
+        hasMarkdown: !!markdown
+      })
+      
+      // If underlines are hidden, remove any existing highlights
+      if (!showUnderlines && contentRef.current) {
+        const marks = contentRef.current.querySelectorAll('mark.content-highlight')
+        marks.forEach(mark => {
+          const text = mark.textContent || ''
+          const textNode = document.createTextNode(text)
+          mark.parentNode?.replaceChild(textNode, mark)
+        })
+      }
+      
+      return
+    }
+    
+    // Skip if no relevant highlights
+    if (relevantHighlights.length === 0) {
+      console.log('⚠️ No relevant highlights to apply')
+      return
+    }
+    
+    console.log('🔍 Scheduling highlight application:', {
+      relevantHighlightsCount: relevantHighlights.length,
+      highlights: relevantHighlights.map(h => h.content.slice(0, 50)),
+      hasHtml: !!html,
+      hasMarkdown: !!markdown
+    })
+    
+    // Use requestAnimationFrame to ensure DOM is fully rendered
+    const rafId = requestAnimationFrame(() => {
+      if (!contentRef.current) {
+        console.log('⚠️ contentRef not available after RAF')
+        return
+      }
+      
+      console.log('🔍 Applying highlights to rendered DOM')
+      
+      const originalHTML = contentRef.current.innerHTML
+      const highlightedHTML = applyHighlightsToHTML(originalHTML, relevantHighlights)
+      
+      if (originalHTML !== highlightedHTML) {
+        console.log('✅ Applied highlights to DOM')
+        contentRef.current.innerHTML = highlightedHTML
+      } else {
+        console.log('⚠️ No changes made to DOM')
+      }
+    })
+    
+    return () => cancelAnimationFrame(rafId)
+  }, [relevantHighlights, html, markdown, showUnderlines])
+
+  const highlightedMarkdown = useMemo(() => {
+    if (!markdown || relevantHighlights.length === 0) return markdown
+    // For markdown, we'll apply highlights after rendering
+    return markdown
+  }, [markdown, relevantHighlights])
+
+  if (!selectedUrl) {
+    return (
+      <div className="reader empty">
+        <p>Select a bookmark to read its content.</p>
+      </div>
+    )
+  }
+
+  if (loading) {
+    return (
+      <div className="reader loading">
+        <div className="loading-spinner">
+          <FontAwesomeIcon icon={faSpinner} spin />
+          <span>Loading content…</span>
+        </div>
+      </div>
+    )
+  }
+
+  const hasHighlights = relevantHighlights.length > 0
+
+  return (
+    <div className="reader">
+      {title && (
+        <div className="reader-header">
+          <h2 className="reader-title">{title}</h2>
+          {hasHighlights && (
+            <div className="highlight-indicator">
+              <FontAwesomeIcon icon={faHighlighter} />
+              <span>{relevantHighlights.length} highlight{relevantHighlights.length !== 1 ? 's' : ''}</span>
+            </div>
+          )}
+        </div>
+      )}
+      {markdown ? (
+        <div ref={contentRef} className="reader-markdown">
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>
+            {highlightedMarkdown}
+          </ReactMarkdown>
+        </div>
+      ) : html ? (
+        <div ref={contentRef} className="reader-html" dangerouslySetInnerHTML={{ __html: html }} />
+      ) : (
+        <div className="reader empty">
+          <p>No readable content found for this URL.</p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ContentPanel
+
+
--- a/src/components/ContentWithResolvedProfiles.tsx
+++ b/src/components/ContentWithResolvedProfiles.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
+import { decode } from 'nostr-tools/nip19'
+import { getPubkeyFromDecodeResult } from 'applesauce-core/helpers'
+import { extractNprofilePubkeys } from '../utils/helpers'
+
+interface Props { content: string }
+
+const ContentWithResolvedProfiles: React.FC<Props> = ({ content }) => {
+  const matches = extractNprofilePubkeys(content)
+  const decoded = matches
+    .map((m) => {
+      try { return decode(m) } catch { return undefined as undefined }
+    })
+    .filter((v): v is ReturnType<typeof decode> => Boolean(v))
+
+  const lookups = decoded
+    .map((res) => getPubkeyFromDecodeResult(res))
+    .filter((v): v is string => typeof v === 'string')
+
+  const profiles = lookups.map((pubkey) => ({ pubkey, profile: useEventModel(Models.ProfileModel, [pubkey]) }))
+
+  let rendered = content
+  matches.forEach((m, i) => {
+    const pk = getPubkeyFromDecodeResult(decoded[i])
+    const found = profiles.find((p) => p.pubkey === pk)
+    const name = found?.profile?.name || found?.profile?.display_name || found?.profile?.nip05 || `${pk?.slice(0,8)}...`
+    if (name) rendered = rendered.replace(m, `@${name}`)
+  })
+
+  return <div className="bookmark-content">{rendered}</div>
+}
+
+export default ContentWithResolvedProfiles
+
+
--- a/src/components/HighlightItem.tsx
+++ b/src/components/HighlightItem.tsx
@@ -0,0 +1,76 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faQuoteLeft, faLink, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
+import { Highlight } from '../types/highlights'
+import { formatDistanceToNow } from 'date-fns'
+
+interface HighlightItemProps {
+  highlight: Highlight
+  onSelectUrl?: (url: string) => void
+}
+
+export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelectUrl }) => {
+  const handleLinkClick = (url: string, e: React.MouseEvent) => {
+    if (onSelectUrl) {
+      e.preventDefault()
+      onSelectUrl(url)
+    }
+  }
+  
+  const getSourceLink = () => {
+    if (highlight.eventReference) {
+      return `https://search.dergigi.com/e/${highlight.eventReference}`
+    }
+    return highlight.urlReference
+  }
+  
+  const sourceLink = getSourceLink()
+  
+  return (
+    <div className="highlight-item">
+      <div className="highlight-quote-icon">
+        <FontAwesomeIcon icon={faQuoteLeft} />
+      </div>
+      
+      <div className="highlight-content">
+        <blockquote className="highlight-text">
+          {highlight.content}
+        </blockquote>
+        
+        {highlight.comment && (
+          <div className="highlight-comment">
+            {highlight.comment}
+          </div>
+        )}
+        
+        {highlight.context && (
+          <details className="highlight-context">
+            <summary>Show context</summary>
+            <p className="context-text">{highlight.context}</p>
+          </details>
+        )}
+        
+        <div className="highlight-meta">
+          <span className="highlight-time">
+            {formatDistanceToNow(new Date(highlight.created_at * 1000), { addSuffix: true })}
+          </span>
+          
+          {sourceLink && (
+            <a
+              href={sourceLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={(e) => highlight.urlReference && onSelectUrl ? handleLinkClick(highlight.urlReference, e) : undefined}
+              className="highlight-source"
+              title={highlight.eventReference ? 'View on Nostr' : 'View source'}
+            >
+              <FontAwesomeIcon icon={highlight.eventReference ? faLink : faExternalLinkAlt} />
+              <span>{highlight.eventReference ? 'Nostr event' : 'Source'}</span>
+            </a>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
--- a/src/components/HighlightsPanel.tsx
+++ b/src/components/HighlightsPanel.tsx
@@ -0,0 +1,131 @@
+import React, { useMemo, useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronRight, faChevronLeft, faHighlighter, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'
+import { Highlight } from '../types/highlights'
+import { HighlightItem } from './HighlightItem'
+
+interface HighlightsPanelProps {
+  highlights: Highlight[]
+  loading: boolean
+  isCollapsed: boolean
+  onToggleCollapse: () => void
+  onSelectUrl?: (url: string) => void
+  selectedUrl?: string
+  onToggleUnderlines?: (show: boolean) => void
+}
+
+export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
+  highlights,
+  loading,
+  isCollapsed,
+  onToggleCollapse,
+  onSelectUrl,
+  selectedUrl,
+  onToggleUnderlines
+}) => {
+  const [showUnderlines, setShowUnderlines] = useState(true)
+  
+  const handleToggleUnderlines = () => {
+    const newValue = !showUnderlines
+    setShowUnderlines(newValue)
+    onToggleUnderlines?.(newValue)
+  }
+  
+  // Filter highlights to show only those relevant to the current URL
+  const filteredHighlights = useMemo(() => {
+    if (!selectedUrl) return highlights
+    
+    const normalizeUrl = (url: string) => {
+      try {
+        const urlObj = new URL(url.startsWith('http') ? url : `https://${url}`)
+        return `${urlObj.hostname.replace(/^www\./, '')}${urlObj.pathname}`.replace(/\/$/, '').toLowerCase()
+      } catch {
+        return url.replace(/^https?:\/\//, '').replace(/^www\./, '').replace(/\/$/, '').toLowerCase()
+      }
+    }
+    
+    const normalizedSelected = normalizeUrl(selectedUrl)
+    
+    return highlights.filter(h => {
+      if (!h.urlReference) return false
+      const normalizedRef = normalizeUrl(h.urlReference)
+      return normalizedSelected === normalizedRef || 
+             normalizedSelected.includes(normalizedRef) ||
+             normalizedRef.includes(normalizedSelected)
+    })
+  }, [highlights, selectedUrl])
+  
+  if (isCollapsed) {
+    return (
+      <div className="highlights-container collapsed">
+        <button
+          onClick={onToggleCollapse}
+          className="toggle-highlights-btn"
+          title="Expand highlights panel"
+          aria-label="Expand highlights panel"
+        >
+          <FontAwesomeIcon icon={faChevronLeft} />
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="highlights-container">
+      <div className="highlights-header">
+        <div className="highlights-title">
+          <FontAwesomeIcon icon={faHighlighter} />
+          <h3>Highlights</h3>
+          {!loading && <span className="count">({filteredHighlights.length})</span>}
+        </div>
+        <div className="highlights-actions">
+          {filteredHighlights.length > 0 && (
+            <button
+              onClick={handleToggleUnderlines}
+              className="toggle-underlines-btn"
+              title={showUnderlines ? 'Hide underlines' : 'Show underlines'}
+              aria-label={showUnderlines ? 'Hide underlines' : 'Show underlines'}
+            >
+              <FontAwesomeIcon icon={showUnderlines ? faEye : faEyeSlash} />
+            </button>
+          )}
+          <button
+            onClick={onToggleCollapse}
+            className="toggle-highlights-btn"
+            title="Collapse highlights panel"
+            aria-label="Collapse highlights panel"
+          >
+            <FontAwesomeIcon icon={faChevronRight} rotation={180} />
+          </button>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="highlights-loading">
+          <p>Loading highlights...</p>
+        </div>
+      ) : filteredHighlights.length === 0 ? (
+        <div className="highlights-empty">
+          <FontAwesomeIcon icon={faHighlighter} size="2x" />
+          <p>No highlights for this article.</p>
+          <p className="empty-hint">
+            {selectedUrl 
+              ? 'Create highlights for this article using a Nostr client that supports NIP-84.'
+              : 'Select an article to view its highlights.'}
+          </p>
+        </div>
+      ) : (
+        <div className="highlights-list">
+          {filteredHighlights.map((highlight) => (
+            <HighlightItem
+              key={highlight.id}
+              highlight={highlight}
+              onSelectUrl={onSelectUrl}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+
+interface IconButtonProps {
+  icon: IconDefinition
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+  title?: string
+  ariaLabel?: string
+  variant?: 'primary' | 'success' | 'ghost'
+  size?: number
+}
+
+const IconButton: React.FC<IconButtonProps> = ({
+  icon,
+  onClick,
+  title,
+  ariaLabel,
+  variant = 'ghost',
+  size = 33
+}) => {
+  return (
+    <button
+      className={`icon-button ${variant}`}
+      onClick={onClick}
+      title={title}
+      aria-label={ariaLabel || title}
+      style={{ width: size, height: size }}
+    >
+      <FontAwesomeIcon icon={icon} />
+    </button>
+  )
+}
+
+export default IconButton
+
+
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -30,7 +30,7 @@ const Login: React.FC<LoginProps> = ({ onLogin }) => {
  return (
    <div className="login-container">
      <div className="login-card">
-        <h2>Welcome to Markr</h2>
+        <h2>Welcome to Boris</h2>
        <p>Connect your nostr account to view your bookmarks</p>
        <button 
          onClick={handleLogin} 
--- a/src/components/ResolvedMention.tsx
+++ b/src/components/ResolvedMention.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
+import { decode, npubEncode } from 'nostr-tools/nip19'
+import { getPubkeyFromDecodeResult } from 'applesauce-core/helpers'
+
+interface ResolvedMentionProps {
+  encoded?: string
+}
+
+const ResolvedMention: React.FC<ResolvedMentionProps> = ({ encoded }) => {
+  if (!encoded) return null
+  let pubkey: string | undefined
+  try {
+    pubkey = getPubkeyFromDecodeResult(decode(encoded))
+  } catch {
+    // ignore; will fallback to showing the encoded value
+  }
+
+  const profile = pubkey ? useEventModel(Models.ProfileModel, [pubkey]) : undefined
+  const display = profile?.name || profile?.display_name || profile?.nip05 || (pubkey ? `${pubkey.slice(0, 8)}...` : encoded)
+  const npub = pubkey ? npubEncode(pubkey) : undefined
+
+  if (npub) {
+    return (
+      <a
+        href={`https://search.dergigi.com/p/${npub}`}
+        className="nostr-mention"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        @{display}
+      </a>
+    )
+  }
+
+  return <span className="nostr-mention">{encoded}</span>
+}
+
+export default ResolvedMention
+
+
--- a/src/components/SidebarHeader.tsx
+++ b/src/components/SidebarHeader.tsx
@@ -0,0 +1,89 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronRight, faRightFromBracket, faUser, faList, faThLarge, faImage } from '@fortawesome/free-solid-svg-icons'
+import { Hooks } from 'applesauce-react'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
+import IconButton from './IconButton'
+import { ViewMode } from './Bookmarks'
+
+interface SidebarHeaderProps {
+  onToggleCollapse: () => void
+  onLogout: () => void
+  viewMode: ViewMode
+  onViewModeChange: (mode: ViewMode) => void
+}
+
+const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogout, viewMode, onViewModeChange }) => {
+  const activeAccount = Hooks.useActiveAccount()
+  const profile = useEventModel(Models.ProfileModel, activeAccount ? [activeAccount.pubkey] : null)
+
+  const getProfileImage = () => {
+    return profile?.picture || null
+  }
+
+  const getUserDisplayName = () => {
+    if (!activeAccount) return 'Unknown User'
+    if (profile?.name) return profile.name
+    if (profile?.display_name) return profile.display_name
+    if (profile?.nip05) return profile.nip05
+    return `${activeAccount.pubkey.slice(0, 8)}...${activeAccount.pubkey.slice(-8)}`
+  }
+
+  const profileImage = getProfileImage()
+
+  return (
+    <>
+      <div className="sidebar-header-bar">
+        <button 
+          onClick={onToggleCollapse}
+          className="toggle-sidebar-btn"
+          title="Collapse bookmarks sidebar"
+          aria-label="Collapse bookmarks sidebar"
+        >
+          <FontAwesomeIcon icon={faChevronRight} />
+        </button>
+        <div className="profile-avatar" title={getUserDisplayName()}>
+          {profileImage ? (
+            <img src={profileImage} alt={getUserDisplayName()} />
+          ) : (
+            <FontAwesomeIcon icon={faUser} />
+          )}
+        </div>
+        <IconButton
+          icon={faRightFromBracket}
+          onClick={onLogout}
+          title="Logout"
+          ariaLabel="Logout"
+          variant="ghost"
+        />
+      </div>
+      <div className="view-mode-controls">
+        <IconButton
+          icon={faList}
+          onClick={() => onViewModeChange('compact')}
+          title="Compact list view"
+          ariaLabel="Compact list view"
+          variant={viewMode === 'compact' ? 'primary' : 'ghost'}
+        />
+        <IconButton
+          icon={faThLarge}
+          onClick={() => onViewModeChange('cards')}
+          title="Cards view"
+          ariaLabel="Cards view"
+          variant={viewMode === 'cards' ? 'primary' : 'ghost'}
+        />
+        <IconButton
+          icon={faImage}
+          onClick={() => onViewModeChange('large')}
+          title="Large preview view"
+          ariaLabel="Large preview view"
+          variant={viewMode === 'large' ? 'primary' : 'ghost'}
+        />
+      </div>
+    </>
+  )
+}
+
+export default SidebarHeader
+
--- a/src/components/kindIcon.ts
+++ b/src/components/kindIcon.ts
@@ -0,0 +1,49 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCircleUser,
+  faFeather,
+  faRetweet,
+  faHeart,
+  faImage,
+  faVideo,
+  faFile,
+  faLaptopCode,
+  faCodePullRequest,
+  faBug,
+  faExclamationTriangle,
+  faBolt,
+  faCloudBolt,
+  faHighlighter,
+  faNewspaper,
+  faEyeSlash,
+  faThumbtack,
+  faBookmark
+} from '@fortawesome/free-solid-svg-icons'
+
+const iconMap: Record<number, IconDefinition> = {
+  0: faCircleUser,
+  1: faFeather,
+  6: faRetweet,
+  7: faHeart,
+  20: faImage,
+  21: faVideo,
+  22: faVideo,
+  1063: faFile,
+  1337: faLaptopCode,
+  1617: faCodePullRequest,
+  1621: faBug,
+  1984: faExclamationTriangle,
+  9735: faBolt,
+  9321: faCloudBolt,
+  9802: faHighlighter,
+  30023: faNewspaper,
+  10000: faEyeSlash,
+  10001: faThumbtack,
+  10003: faBookmark
+}
+
+export function getKindIcon(kind: number): IconDefinition {
+  return iconMap[kind] || faFile
+}
+
+
--- a/src/index.css
+++ b/src/index.css
--- a/src/services/bookmarkEvents.ts
+++ b/src/services/bookmarkEvents.ts
@@ -0,0 +1,39 @@
+export interface NostrEvent {
+  id: string
+  kind: number
+  created_at: number
+  tags: string[][]
+  content: string
+  pubkey: string
+  sig: string
+}
+
+export function dedupeNip51Events(events: NostrEvent[]): NostrEvent[] {
+  const byId = new Map<string, NostrEvent>()
+  for (const e of events) {
+    if (e?.id && !byId.has(e.id)) byId.set(e.id, e)
+  }
+  const unique = Array.from(byId.values())
+
+  const bookmarkLists = unique
+    .filter(e => e.kind === 10003 || e.kind === 30001)
+    .sort((a, b) => (b.created_at || 0) - (a.created_at || 0))
+  const latestBookmarkList = bookmarkLists.find(list => !list.tags?.some((t: string[]) => t[0] === 'd'))
+
+  const byD = new Map<string, NostrEvent>()
+  for (const e of unique) {
+    if (e.kind === 10003 || e.kind === 30003 || e.kind === 30001) {
+      const d = (e.tags || []).find((t: string[]) => t[0] === 'd')?.[1] || ''
+      const prev = byD.get(d)
+      if (!prev || (e.created_at || 0) > (prev.created_at || 0)) byD.set(d, e)
+    }
+  }
+
+  const setsAndNamedLists = Array.from(byD.values())
+  const out: NostrEvent[] = []
+  if (latestBookmarkList) out.push(latestBookmarkList)
+  out.push(...setsAndNamedLists)
+  return out
+}
+
+
--- a/src/services/bookmarkHelpers.ts
+++ b/src/services/bookmarkHelpers.ts
@@ -0,0 +1,147 @@
+import { getParsedContent } from 'applesauce-content/text'
+import { ActiveAccount, IndividualBookmark, ParsedContent } from '../types/bookmarks'
+import type { NostrEvent } from './bookmarkEvents'
+
+// Global symbol for caching hidden bookmark content on events
+export const BookmarkHiddenSymbol = Symbol.for('bookmark-hidden')
+
+export interface BookmarkData {
+  id?: string
+  content?: string
+  created_at?: number
+  kind?: number
+  tags?: string[][]
+}
+
+export interface ApplesauceBookmarks {
+  notes?: BookmarkData[]
+  articles?: BookmarkData[]
+  hashtags?: BookmarkData[]
+  urls?: BookmarkData[]
+}
+
+export interface AccountWithExtension {
+  pubkey: string
+  signer?: unknown
+  nip04?: unknown
+  nip44?: unknown
+  [key: string]: unknown
+}
+
+export function isAccountWithExtension(account: unknown): account is AccountWithExtension {
+  return (
+    typeof account === 'object' &&
+    account !== null &&
+    'pubkey' in account &&
+    typeof (account as { pubkey?: unknown }).pubkey === 'string'
+  )
+}
+
+export function isHexId(id: unknown): id is string {
+  return typeof id === 'string' && /^[0-9a-f]{64}$/i.test(id)
+}
+export type { NostrEvent } from './bookmarkEvents'
+export { dedupeNip51Events } from './bookmarkEvents'
+
+export const processApplesauceBookmarks = (
+  bookmarks: unknown,
+  activeAccount: ActiveAccount,
+  isPrivate: boolean
+): IndividualBookmark[] => {
+  if (!bookmarks) return []
+
+  if (typeof bookmarks === 'object' && bookmarks !== null && !Array.isArray(bookmarks)) {
+    const applesauceBookmarks = bookmarks as ApplesauceBookmarks
+    const allItems: BookmarkData[] = []
+    if (applesauceBookmarks.notes) allItems.push(...applesauceBookmarks.notes)
+    if (applesauceBookmarks.articles) allItems.push(...applesauceBookmarks.articles)
+    if (applesauceBookmarks.hashtags) allItems.push(...applesauceBookmarks.hashtags)
+    if (applesauceBookmarks.urls) allItems.push(...applesauceBookmarks.urls)
+    return allItems.map((bookmark: BookmarkData) => ({
+      id: bookmark.id || `${isPrivate ? 'private' : 'public'}-${Date.now()}`,
+      content: bookmark.content || '',
+      created_at: bookmark.created_at || Math.floor(Date.now() / 1000),
+      pubkey: activeAccount.pubkey,
+      kind: bookmark.kind || 30001,
+      tags: bookmark.tags || [],
+      parsedContent: bookmark.content ? (getParsedContent(bookmark.content) as ParsedContent) : undefined,
+      type: 'event' as const,
+      isPrivate,
+      added_at: Math.floor(Date.now() / 1000)
+    }))
+  }
+
+  const bookmarkArray = Array.isArray(bookmarks) ? bookmarks : [bookmarks]
+  return bookmarkArray.map((bookmark: BookmarkData) => ({
+    id: bookmark.id || `${isPrivate ? 'private' : 'public'}-${Date.now()}`,
+    content: bookmark.content || '',
+    created_at: bookmark.created_at || Math.floor(Date.now() / 1000),
+    pubkey: activeAccount.pubkey,
+    kind: bookmark.kind || 30001,
+    tags: bookmark.tags || [],
+    parsedContent: bookmark.content ? (getParsedContent(bookmark.content) as ParsedContent) : undefined,
+    type: 'event' as const,
+    isPrivate,
+    added_at: Math.floor(Date.now() / 1000)
+  }))
+}
+
+// Types and guards around signer/decryption APIs
+export function hydrateItems(
+  items: IndividualBookmark[],
+  idToEvent: Map<string, NostrEvent>
+): IndividualBookmark[] {
+  return items.map(item => {
+    const ev = idToEvent.get(item.id)
+    if (!ev) return item
+    return {
+      ...item,
+      pubkey: ev.pubkey || item.pubkey,
+      content: ev.content || item.content || '',
+      created_at: ev.created_at || item.created_at,
+      kind: ev.kind || item.kind,
+      tags: ev.tags || item.tags,
+      parsedContent: ev.content ? (getParsedContent(ev.content) as ParsedContent) : item.parsedContent
+    }
+  })
+}
+
+// Note: event decryption/collection lives in `bookmarkProcessing.ts`
+
+export type DecryptFn = (pubkey: string, content: string) => Promise<string>
+export type UnlockSigner = unknown
+export type UnlockMode = unknown
+
+export function hasNip44Decrypt(obj: unknown): obj is { nip44: { decrypt: DecryptFn } } {
+  const nip44 = (obj as { nip44?: unknown })?.nip44 as { decrypt?: unknown } | undefined
+  return typeof nip44?.decrypt === 'function'
+}
+
+export function hasNip04Decrypt(obj: unknown): obj is { nip04: { decrypt: DecryptFn } } {
+  const nip04 = (obj as { nip04?: unknown })?.nip04 as { decrypt?: unknown } | undefined
+  return typeof nip04?.decrypt === 'function'
+}
+
+export function dedupeBookmarksById(bookmarks: IndividualBookmark[]): IndividualBookmark[] {
+  const seen = new Set<string>()
+  const result: IndividualBookmark[] = []
+  for (const b of bookmarks) {
+    if (!seen.has(b.id)) {
+      seen.add(b.id)
+      result.push(b)
+    }
+  }
+  return result
+}
+
+export function extractUrlsFromContent(content: string): string[] {
+  if (!content) return []
+  // Basic URL regex covering http(s) schemes
+  const urlRegex = /https?:\/\/[\w.-]+(?:\/[\w\-._~:/?#[\]@!$&'()*+,;=%]*)?/gi
+  const matches = content.match(urlRegex)
+  if (!matches) return []
+  // Normalize by trimming trailing punctuation
+  return Array.from(new Set(matches.map(u => u.replace(/[),.;]+$/, ''))))
+}
+
+
--- a/src/services/bookmarkProcessing.ts
+++ b/src/services/bookmarkProcessing.ts
@@ -0,0 +1,104 @@
+import { Helpers } from 'applesauce-core'
+import {
+  ActiveAccount,
+  IndividualBookmark
+} from '../types/bookmarks'
+import { BookmarkHiddenSymbol, hasNip04Decrypt, hasNip44Decrypt, processApplesauceBookmarks } from './bookmarkHelpers'
+import type { NostrEvent } from './bookmarkHelpers'
+
+type DecryptFn = (pubkey: string, content: string) => Promise<string>
+type UnlockHiddenTagsFn = typeof Helpers.unlockHiddenTags
+type HiddenContentSigner = Parameters<UnlockHiddenTagsFn>[1]
+type UnlockMode = Parameters<UnlockHiddenTagsFn>[2]
+
+export async function collectBookmarksFromEvents(
+  bookmarkListEvents: NostrEvent[],
+  activeAccount: ActiveAccount,
+  signerCandidate?: unknown
+): Promise<{
+  publicItemsAll: IndividualBookmark[]
+  privateItemsAll: IndividualBookmark[]
+  newestCreatedAt: number
+  latestContent: string
+  allTags: string[][]
+}> {
+  const publicItemsAll: IndividualBookmark[] = []
+  const privateItemsAll: IndividualBookmark[] = []
+  let newestCreatedAt = 0
+  let latestContent = ''
+  let allTags: string[][] = []
+
+  for (const evt of bookmarkListEvents) {
+    newestCreatedAt = Math.max(newestCreatedAt, evt.created_at || 0)
+    if (!latestContent && evt.content && !Helpers.hasHiddenContent(evt)) latestContent = evt.content
+    if (Array.isArray(evt.tags)) allTags = allTags.concat(evt.tags)
+
+    const pub = Helpers.getPublicBookmarks(evt)
+    publicItemsAll.push(...processApplesauceBookmarks(pub, activeAccount, false))
+
+    try {
+      if (Helpers.hasHiddenTags(evt) && Helpers.isHiddenTagsLocked(evt) && signerCandidate) {
+        try {
+          await Helpers.unlockHiddenTags(evt, signerCandidate as HiddenContentSigner)
+        } catch {
+          try {
+            await Helpers.unlockHiddenTags(evt, signerCandidate as HiddenContentSigner, 'nip44' as UnlockMode)
+          } catch {
+            // ignore
+          }
+        }
+      } else if (evt.content && evt.content.length > 0 && signerCandidate) {
+        let decryptedContent: string | undefined
+        try {
+          if (hasNip44Decrypt(signerCandidate)) {
+            decryptedContent = await (signerCandidate as { nip44: { decrypt: DecryptFn } }).nip44.decrypt(
+              evt.pubkey,
+              evt.content
+            )
+          }
+        } catch {
+          // ignore
+        }
+
+        if (!decryptedContent) {
+          try {
+            if (hasNip04Decrypt(signerCandidate)) {
+              decryptedContent = await (signerCandidate as { nip04: { decrypt: DecryptFn } }).nip04.decrypt(
+                evt.pubkey,
+                evt.content
+              )
+            }
+          } catch {
+            // ignore
+          }
+        }
+
+        if (decryptedContent) {
+          try {
+            const hiddenTags = JSON.parse(decryptedContent) as string[][]
+            const manualPrivate = Helpers.parseBookmarkTags(hiddenTags)
+            privateItemsAll.push(...processApplesauceBookmarks(manualPrivate, activeAccount, true))
+            Reflect.set(evt, BookmarkHiddenSymbol, manualPrivate)
+            Reflect.set(evt, 'EncryptedContentSymbol', decryptedContent)
+            if (!latestContent) {
+              latestContent = decryptedContent
+            }
+          } catch {
+            // ignore
+          }
+        }
+      }
+
+      const priv = Helpers.getHiddenBookmarks(evt)
+      if (priv) {
+        privateItemsAll.push(...processApplesauceBookmarks(priv, activeAccount, true))
+      }
+    } catch {
+      // ignore individual event failures
+    }
+  }
+
+  return { publicItemsAll, privateItemsAll, newestCreatedAt, latestContent, allTags }
+}
+
+
--- a/src/services/bookmarkService.ts
+++ b/src/services/bookmarkService.ts
@@ -0,0 +1,150 @@
+import { RelayPool, completeOnEose } from 'applesauce-relay'
+import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
+import {
+  AccountWithExtension,
+  NostrEvent,
+  dedupeNip51Events,
+  hydrateItems,
+  isAccountWithExtension,
+  isHexId,
+  hasNip04Decrypt,
+  hasNip44Decrypt,
+  dedupeBookmarksById,
+  extractUrlsFromContent
+} from './bookmarkHelpers'
+import { Bookmark } from '../types/bookmarks'
+import { collectBookmarksFromEvents } from './bookmarkProcessing.ts'
+
+
+
+export const fetchBookmarks = async (
+  relayPool: RelayPool,
+  activeAccount: unknown, // Full account object with extension capabilities
+  setBookmarks: (bookmarks: Bookmark[]) => void,
+  setLoading: (loading: boolean) => void,
+  timeoutId: number
+) => {
+  try {
+    setLoading(true)
+    
+    if (!isAccountWithExtension(activeAccount)) {
+      throw new Error('Invalid account object provided')
+    }
+    // Get relay URLs from the pool
+    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+    // Fetch bookmark events - NIP-51 standards and legacy formats
+    console.log('🔍 Fetching bookmark events from relays:', relayUrls)
+    const rawEvents = await lastValueFrom(
+      relayPool
+        .req(relayUrls, { kinds: [10003, 30003, 30001], authors: [activeAccount.pubkey] })
+        .pipe(completeOnEose(), takeUntil(timer(20000)), toArray())
+    )
+    console.log('📊 Raw events fetched:', rawEvents.length, 'events')
+
+    // Check for events with potentially encrypted content
+    const eventsWithContent = rawEvents.filter(evt => evt.content && evt.content.length > 0)
+    if (eventsWithContent.length > 0) {
+      console.log('🔐 Events with content (potentially encrypted):', eventsWithContent.length)
+      eventsWithContent.forEach((evt, i) => {
+        const dTag = evt.tags?.find((t: string[]) => t[0] === 'd')?.[1] || 'none'
+        const contentPreview = evt.content.slice(0, 60) + (evt.content.length > 60 ? '...' : '')
+        console.log(`  Encrypted Event ${i}: kind=${evt.kind}, id=${evt.id?.slice(0, 8)}, dTag=${dTag}, contentLength=${evt.content.length}, preview=${contentPreview}`)
+      })
+    }
+
+    rawEvents.forEach((evt, i) => {
+      const dTag = evt.tags?.find((t: string[]) => t[0] === 'd')?.[1] || 'none'
+      const contentPreview = evt.content ? evt.content.slice(0, 50) + (evt.content.length > 50 ? '...' : '') : 'empty'
+      console.log(`  Event ${i}: kind=${evt.kind}, id=${evt.id?.slice(0, 8)}, dTag=${dTag}, contentLength=${evt.content?.length || 0}, contentPreview=${contentPreview}`)
+    })
+
+    const bookmarkListEvents = dedupeNip51Events(rawEvents)
+    console.log('📋 After deduplication:', bookmarkListEvents.length, 'bookmark events')
+    if (bookmarkListEvents.length === 0) {
+      setBookmarks([])
+      setLoading(false)
+      return
+    }
+    // Aggregate across events
+    const maybeAccount = activeAccount as AccountWithExtension
+    console.log('🔐 Account object:', {
+      hasSignEvent: typeof maybeAccount?.signEvent === 'function',
+      hasSigner: !!maybeAccount?.signer,
+      accountType: typeof maybeAccount,
+      accountKeys: maybeAccount ? Object.keys(maybeAccount) : []
+    })
+
+    // For ExtensionAccount, we need a signer with nip04/nip44 for decrypting hidden content
+    // The ExtensionAccount itself has nip04/nip44 getters that proxy to the signer
+    let signerCandidate: unknown = maybeAccount
+    const hasNip04Prop = (signerCandidate as { nip04?: unknown })?.nip04 !== undefined
+    const hasNip44Prop = (signerCandidate as { nip44?: unknown })?.nip44 !== undefined
+    if (signerCandidate && !hasNip04Prop && !hasNip44Prop && maybeAccount?.signer) {
+      // Fallback to the raw signer if account doesn't have nip04/nip44
+      signerCandidate = maybeAccount.signer
+    }
+
+    console.log('🔑 Signer candidate:', !!signerCandidate, typeof signerCandidate)
+    if (signerCandidate) {
+      console.log('🔑 Signer has nip04:', hasNip04Decrypt(signerCandidate))
+      console.log('🔑 Signer has nip44:', hasNip44Decrypt(signerCandidate))
+    }
+    const { publicItemsAll, privateItemsAll, newestCreatedAt, latestContent, allTags } = await collectBookmarksFromEvents(
+      bookmarkListEvents,
+      activeAccount,
+      signerCandidate
+    )
+
+    const allItems = [...publicItemsAll, ...privateItemsAll]
+    const noteIds = Array.from(new Set(allItems.map(i => i.id).filter(isHexId)))
+    let idToEvent: Map<string, NostrEvent> = new Map()
+    if (noteIds.length > 0) {
+      try {
+        const events = await lastValueFrom(
+          relayPool.req(relayUrls, { ids: noteIds }).pipe(completeOnEose(), takeUntil(timer(10000)), toArray())
+        )
+        idToEvent = new Map(events.map((e: NostrEvent) => [e.id, e]))
+      } catch (error) {
+        console.warn('Failed to fetch events for hydration:', error)
+      }
+    }
+    const allBookmarks = dedupeBookmarksById([
+      ...hydrateItems(publicItemsAll, idToEvent),
+      ...hydrateItems(privateItemsAll, idToEvent)
+    ])
+
+    // Sort individual bookmarks by "added" timestamp first (most recently added first),
+    // falling back to event created_at when unknown.
+    const enriched = allBookmarks.map(b => ({
+      ...b,
+      tags: b.tags || [],
+      content: b.content || ''
+    }))
+    const sortedBookmarks = enriched
+      .map(b => ({ ...b, urlReferences: extractUrlsFromContent(b.content) }))
+      .sort((a, b) => ((b.added_at || 0) - (a.added_at || 0)) || ((b.created_at || 0) - (a.created_at || 0)))
+
+    const bookmark: Bookmark = {
+      id: `${activeAccount.pubkey}-bookmarks`,
+      title: `Bookmarks (${sortedBookmarks.length})`,
+      url: '',
+      content: latestContent,
+      created_at: newestCreatedAt || Math.floor(Date.now() / 1000),
+      tags: allTags,
+      bookmarkCount: sortedBookmarks.length,
+      eventReferences: allTags.filter((tag: string[]) => tag[0] === 'e').map((tag: string[]) => tag[1]),
+      individualBookmarks: sortedBookmarks,
+      isPrivate: privateItemsAll.length > 0,
+      encryptedContent: undefined
+    }
+    
+    setBookmarks([bookmark])
+    clearTimeout(timeoutId)
+    setLoading(false)
+
+  } catch (error) {
+    console.error('Failed to fetch bookmarks:', error)
+    clearTimeout(timeoutId)
+    setLoading(false)
+  }
+}
--- a/src/services/highlightService.ts
+++ b/src/services/highlightService.ts
@@ -0,0 +1,91 @@
+import { RelayPool, completeOnEose } from 'applesauce-relay'
+import { lastValueFrom, takeUntil, timer, toArray } from 'rxjs'
+import { NostrEvent } from 'nostr-tools'
+import {
+  getHighlightText,
+  getHighlightContext,
+  getHighlightComment,
+  getHighlightSourceEventPointer,
+  getHighlightSourceAddressPointer,
+  getHighlightSourceUrl,
+  getHighlightAttributions
+} from 'applesauce-core/helpers'
+import { Highlight } from '../types/highlights'
+
+/**
+ * Deduplicate highlight events by ID
+ * Since highlights can come from multiple relays, we need to ensure
+ * we only show each unique highlight once
+ */
+function dedupeHighlights(events: NostrEvent[]): NostrEvent[] {
+  const byId = new Map<string, NostrEvent>()
+  
+  for (const event of events) {
+    if (event?.id && !byId.has(event.id)) {
+      byId.set(event.id, event)
+    }
+  }
+  
+  return Array.from(byId.values())
+}
+
+export const fetchHighlights = async (
+  relayPool: RelayPool,
+  pubkey: string
+): Promise<Highlight[]> => {
+  try {
+    const relayUrls = Array.from(relayPool.relays.values()).map(relay => relay.url)
+    
+    console.log('🔍 Fetching highlights (kind 9802) from relays:', relayUrls)
+    
+    const rawEvents = await lastValueFrom(
+      relayPool
+        .req(relayUrls, { kinds: [9802], authors: [pubkey] })
+        .pipe(completeOnEose(), takeUntil(timer(10000)), toArray())
+    )
+    
+    console.log('📊 Raw highlight events fetched:', rawEvents.length)
+    
+    // Deduplicate events by ID
+    const uniqueEvents = dedupeHighlights(rawEvents)
+    console.log('📊 Unique highlight events after deduplication:', uniqueEvents.length)
+    
+    const highlights: Highlight[] = uniqueEvents.map((event: NostrEvent) => {
+      // Use applesauce helpers to extract highlight data
+      const highlightText = getHighlightText(event)
+      const context = getHighlightContext(event)
+      const comment = getHighlightComment(event)
+      const sourceEventPointer = getHighlightSourceEventPointer(event)
+      const sourceAddressPointer = getHighlightSourceAddressPointer(event)
+      const sourceUrl = getHighlightSourceUrl(event)
+      const attributions = getHighlightAttributions(event)
+      
+      // Get author from attributions
+      const author = attributions.find(a => a.role === 'author')?.pubkey
+      
+      // Get event reference (prefer event pointer, fallback to address pointer)
+      const eventReference = sourceEventPointer?.id || 
+        (sourceAddressPointer ? `${sourceAddressPointer.kind}:${sourceAddressPointer.pubkey}:${sourceAddressPointer.identifier}` : undefined)
+      
+      return {
+        id: event.id,
+        pubkey: event.pubkey,
+        created_at: event.created_at,
+        content: highlightText,
+        tags: event.tags,
+        eventReference,
+        urlReference: sourceUrl,
+        author,
+        context,
+        comment
+      }
+    })
+    
+    // Sort by creation time (newest first)
+    return highlights.sort((a, b) => b.created_at - a.created_at)
+  } catch (error) {
+    console.error('Failed to fetch highlights:', error)
+    return []
+  }
+}
+
--- a/src/services/readerService.ts
+++ b/src/services/readerService.ts
@@ -0,0 +1,49 @@
+// Lightweight readability-style fetcher using r.jina.ai proxy
+// Returns simplified HTML for a given URL. This avoids CORS and heavy deps.
+
+export interface ReadableContent {
+  url: string
+  title?: string
+  html?: string
+  markdown?: string
+}
+
+function toProxyUrl(url: string): string {
+  // Ensure the target URL has a protocol and build the proxy URL
+  const normalized = /^https?:\/\//i.test(url) ? url : `https://${url}`
+  return `https://r.jina.ai/http://${normalized.replace(/^https?:\/\//, '')}`
+}
+
+export async function fetchReadableContent(targetUrl: string): Promise<ReadableContent> {
+  const proxyUrl = toProxyUrl(targetUrl)
+  const res = await fetch(proxyUrl)
+  if (!res.ok) {
+    throw new Error(`Failed to fetch readable content (${res.status})`)
+  }
+  const text = await res.text()
+  // Detect if the proxy delivered Markdown or HTML. r.jina.ai often returns a
+  // block starting with "Title:" and "Markdown Content:". We handle both.
+  const hasMarkdownBlock = /Markdown Content:\s/i.test(text)
+
+  if (hasMarkdownBlock) {
+    // Try to split out Title and the Markdown payload
+    const titleMatch = text.match(/Title:\s*(.*?)(?:\s+URL Source:|\s+Markdown Content:)/i)
+    const mdMatch = text.match(/Markdown Content:\s*([\s\S]*)$/i)
+    return {
+      url: targetUrl,
+      title: titleMatch?.[1]?.trim(),
+      markdown: mdMatch?.[1]?.trim()
+    }
+  }
+
+  const html = text
+  // Best-effort title extraction from HTML
+  const match = html.match(/<title[^>]*>(.*?)<\/title>/i)
+  return {
+    url: targetUrl,
+    title: match?.[1],
+    html
+  }
+}
+
+
--- a/src/types/bookmarks.ts
+++ b/src/types/bookmarks.ts
@@ -0,0 +1,49 @@
+export interface ParsedNode {
+  type: string
+  value?: string
+  url?: string
+  encoded?: string
+  children?: ParsedNode[]
+}
+
+export interface ParsedContent {
+  type: string
+  children: ParsedNode[]
+}
+
+export interface Bookmark {
+  id: string
+  title: string
+  url: string
+  content: string
+  created_at: number
+  tags: string[][]
+  bookmarkCount?: number
+  eventReferences?: string[]
+  articleReferences?: string[]
+  urlReferences?: string[]
+  parsedContent?: ParsedContent
+  individualBookmarks?: IndividualBookmark[]
+  isPrivate?: boolean
+  encryptedContent?: string
+}
+
+export interface IndividualBookmark {
+  id: string
+  content: string
+  created_at: number
+  pubkey: string
+  kind: number
+  tags: string[][]
+  parsedContent?: ParsedContent
+  author?: string
+  type: 'event' | 'article'
+  isPrivate?: boolean
+  encryptedContent?: string
+  // When the item was added to the bookmark list (synthetic, for sorting)
+  added_at?: number
+}
+
+export interface ActiveAccount {
+  pubkey: string
+}
--- a/src/types/highlights.ts
+++ b/src/types/highlights.ts
@@ -0,0 +1,15 @@
+// NIP-84 Highlight types
+export interface Highlight {
+  id: string
+  pubkey: string
+  created_at: number
+  content: string // The highlighted text
+  tags: string[][]
+  // Extracted tag values
+  eventReference?: string // 'e' or 'a' tag
+  urlReference?: string // 'r' tag
+  author?: string // 'p' tag with 'author' role
+  context?: string // surrounding text context
+  comment?: string // optional comment about the highlight
+}
+
--- a/src/utils/bookmarkUtils.tsx
+++ b/src/utils/bookmarkUtils.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import { formatDistanceToNow } from 'date-fns'
+import { ParsedContent, ParsedNode } from '../types/bookmarks'
+import ResolvedMention from '../components/ResolvedMention'
+// Note: ContentWithResolvedProfiles is imported by components directly to keep this file component-only for fast refresh
+
+export const formatDate = (timestamp: number) => {
+  const date = new Date(timestamp * 1000)
+  return formatDistanceToNow(date, { addSuffix: true })
+}
+
+// Component to render content with resolved nprofile names
+// Intentionally no exports except components and render helpers
+
+// Component to render parsed content using applesauce-content
+export const renderParsedContent = (parsedContent: ParsedContent) => {
+  if (!parsedContent || !parsedContent.children) {
+    return null
+  }
+
+  const renderNode = (node: ParsedNode, index: number): React.ReactNode => {
+    if (node.type === 'text') {
+      return <span key={index}>{node.value}</span>
+    }
+    
+    if (node.type === 'mention') {
+      return <ResolvedMention key={index} encoded={node.encoded} />
+    }
+    
+    if (node.type === 'link') {
+      return (
+        <a 
+          key={index}
+          href={node.url}
+          className="nostr-link"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {node.url}
+        </a>
+      )
+    }
+    
+    if (node.children) {
+      return (
+        <span key={index}>
+          {node.children.map((child: ParsedNode, childIndex: number) => 
+            renderNode(child, childIndex)
+          )}
+        </span>
+      )
+    }
+    
+    return null
+  }
+
+  return (
+    <div className="parsed-content">
+      {parsedContent.children.map((node: ParsedNode, index: number) => 
+        renderNode(node, index)
+      )}
+    </div>
+  )
+}
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -0,0 +1,39 @@
+// Extract pubkeys from nprofile strings in content
+export const extractNprofilePubkeys = (content: string): string[] => {
+  const nprofileRegex = /nprofile1[a-z0-9]+/gi
+  const matches = content.match(nprofileRegex) || []
+  const unique = new Set<string>(matches)
+  return Array.from(unique)
+}
+
+export type UrlType = 'video' | 'image' | 'youtube' | 'article'
+
+export interface UrlClassification {
+  type: UrlType
+  buttonText: string
+}
+
+export const classifyUrl = (url: string): UrlClassification => {
+  const urlLower = url.toLowerCase()
+  
+  // Check for YouTube
+  if (urlLower.includes('youtube.com') || urlLower.includes('youtu.be')) {
+    return { type: 'youtube', buttonText: 'WATCH NOW' }
+  }
+  
+  // Check for video extensions
+  const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv', '.m4v']
+  if (videoExtensions.some(ext => urlLower.includes(ext))) {
+    return { type: 'video', buttonText: 'WATCH NOW' }
+  }
+  
+  // Check for image extensions
+  const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp', '.ico']
+  if (imageExtensions.some(ext => urlLower.includes(ext))) {
+    return { type: 'image', buttonText: 'VIEW NOW' }
+  }
+  
+  // Default to article
+  return { type: 'article', buttonText: 'READ NOW' }
+}
+
--- a/src/utils/highlightMatching.tsx
+++ b/src/utils/highlightMatching.tsx
@@ -0,0 +1,208 @@
+import React from 'react'
+import { Highlight } from '../types/highlights'
+
+export interface HighlightMatch {
+  highlight: Highlight
+  startIndex: number
+  endIndex: number
+}
+
+/**
+ * Find all occurrences of highlight text in the content
+ */
+export function findHighlightMatches(
+  content: string,
+  highlights: Highlight[]
+): HighlightMatch[] {
+  const matches: HighlightMatch[] = []
+  
+  for (const highlight of highlights) {
+    if (!highlight.content || highlight.content.trim().length === 0) {
+      continue
+    }
+    
+    const searchText = highlight.content.trim()
+    let startIndex = 0
+    
+    // Find all occurrences of this highlight in the content
+    let index = content.indexOf(searchText, startIndex)
+    while (index !== -1) {
+      matches.push({
+        highlight,
+        startIndex: index,
+        endIndex: index + searchText.length
+      })
+      
+      startIndex = index + searchText.length
+      index = content.indexOf(searchText, startIndex)
+    }
+  }
+  
+  // Sort by start index
+  return matches.sort((a, b) => a.startIndex - b.startIndex)
+}
+
+/**
+ * Apply highlights to text content by wrapping matched text in span elements
+ */
+export function applyHighlightsToText(
+  text: string,
+  highlights: Highlight[]
+): React.ReactNode {
+  const matches = findHighlightMatches(text, highlights)
+  
+  if (matches.length === 0) {
+    return text
+  }
+  
+  const result: React.ReactNode[] = []
+  let lastIndex = 0
+  
+  for (let i = 0; i < matches.length; i++) {
+    const match = matches[i]
+    
+    // Skip overlapping highlights (keep the first one)
+    if (match.startIndex < lastIndex) {
+      continue
+    }
+    
+    // Add text before the highlight
+    if (match.startIndex > lastIndex) {
+      result.push(text.substring(lastIndex, match.startIndex))
+    }
+    
+    // Add the highlighted text
+    const highlightedText = text.substring(match.startIndex, match.endIndex)
+    result.push(
+      <mark
+        key={`highlight-${match.highlight.id}-${match.startIndex}`}
+        className="content-highlight"
+        data-highlight-id={match.highlight.id}
+        title={`Highlighted ${new Date(match.highlight.created_at * 1000).toLocaleDateString()}`}
+      >
+        {highlightedText}
+      </mark>
+    )
+    
+    lastIndex = match.endIndex
+  }
+  
+  // Add remaining text
+  if (lastIndex < text.length) {
+    result.push(text.substring(lastIndex))
+  }
+  
+  return <>{result}</>
+}
+
+// Helper to normalize whitespace for flexible matching
+const normalizeWhitespace = (str: string) => str.replace(/\s+/g, ' ').trim()
+
+// Helper to create a mark element for a highlight
+function createMarkElement(highlight: Highlight, matchText: string): HTMLElement {
+  const mark = document.createElement('mark')
+  mark.className = 'content-highlight'
+  mark.setAttribute('data-highlight-id', highlight.id)
+  mark.setAttribute('title', `Highlighted ${new Date(highlight.created_at * 1000).toLocaleDateString()}`)
+  mark.textContent = matchText
+  return mark
+}
+
+// Helper to replace text node with mark element
+function replaceTextWithMark(textNode: Text, before: string, after: string, mark: HTMLElement) {
+  const parent = textNode.parentNode
+  if (!parent) return
+  
+  if (before) parent.insertBefore(document.createTextNode(before), textNode)
+  parent.insertBefore(mark, textNode)
+  if (after) {
+    textNode.textContent = after
+  } else {
+    parent.removeChild(textNode)
+  }
+}
+
+// Helper to find and mark text in nodes
+function tryMarkInTextNodes(
+  textNodes: Text[],
+  searchText: string,
+  highlight: Highlight,
+  useNormalized: boolean
+): boolean {
+  const normalizedSearch = normalizeWhitespace(searchText)
+  
+  for (const textNode of textNodes) {
+    const text = textNode.textContent || ''
+    const searchIn = useNormalized ? normalizeWhitespace(text) : text
+    const searchFor = useNormalized ? normalizedSearch : searchText
+    const index = searchIn.indexOf(searchFor)
+    
+    if (index === -1) continue
+    
+    console.log(`✅ Found ${useNormalized ? 'normalized' : 'exact'} match:`, text.slice(0, 50))
+    
+    let actualIndex = index
+    if (useNormalized) {
+      // Map normalized index back to original text
+      let normalizedIdx = 0
+      for (let i = 0; i < text.length && normalizedIdx < index; i++) {
+        if (!/\s/.test(text[i]) || (i > 0 && !/\s/.test(text[i-1]))) normalizedIdx++
+        actualIndex = i + 1
+      }
+    }
+    
+    const before = text.substring(0, actualIndex)
+    const match = text.substring(actualIndex, actualIndex + searchText.length)
+    const after = text.substring(actualIndex + searchText.length)
+    const mark = createMarkElement(highlight, match)
+    
+    replaceTextWithMark(textNode, before, after, mark)
+    return true
+  }
+  
+  return false
+}
+
+/**
+ * Apply highlights to HTML content by injecting mark tags using DOM manipulation
+ */
+export function applyHighlightsToHTML(html: string, highlights: Highlight[]): string {
+  if (!html || highlights.length === 0) return html
+  
+  const tempDiv = document.createElement('div')
+  tempDiv.innerHTML = html
+  
+  console.log('🔍 applyHighlightsToHTML:', {
+    htmlLength: html.length,
+    highlightsCount: highlights.length,
+    highlightTexts: highlights.map(h => h.content.slice(0, 50))
+  })
+  
+  for (const highlight of highlights) {
+    const searchText = highlight.content.trim()
+    if (!searchText) continue
+    
+    console.log('🔍 Processing highlight:', searchText.slice(0, 50))
+    
+    // Collect all text nodes
+    const walker = document.createTreeWalker(tempDiv, NodeFilter.SHOW_TEXT, null)
+    const textNodes: Text[] = []
+    let node: Node | null
+    while ((node = walker.nextNode())) textNodes.push(node as Text)
+    
+    // Try exact match first, then normalized match
+    const found = tryMarkInTextNodes(textNodes, searchText, highlight, false) ||
+                  tryMarkInTextNodes(textNodes, searchText, highlight, true)
+    
+    if (!found) console.log('⚠️ No match found for highlight')
+  }
+  
+  const result = tempDiv.innerHTML
+  console.log('🔍 HTML highlighting complete:', {
+    originalLength: html.length,
+    modifiedLength: result.length,
+    changed: html !== result
+  })
+  
+  return result
+}
--- a/src/utils/imagePreview.ts
+++ b/src/utils/imagePreview.ts
@@ -0,0 +1,88 @@
+// Utility to extract preview images from URLs
+
+export const extractYouTubeVideoId = (url: string): string | null => {
+  // Handle various YouTube URL formats
+  const patterns = [
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
+    /youtube\.com\/shorts\/([^&\n?#]+)/,
+  ]
+  
+  for (const pattern of patterns) {
+    const match = url.match(pattern)
+    if (match && match[1]) {
+      return match[1]
+    }
+  }
+  
+  return null
+}
+
+export const getYouTubeThumbnail = (url: string): string | null => {
+  const videoId = extractYouTubeVideoId(url)
+  if (!videoId) return null
+  
+  // Use maxresdefault for best quality, falls back to hqdefault if not available
+  return `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`
+}
+
+const extractOgImage = (html: string): string | null => {
+  // Extract og:image meta tag from HTML
+  const ogImageMatch = html.match(/<meta[^>]*property=["']og:image["'][^>]*content=["']([^"']+)["'][^>]*>/i)
+  if (ogImageMatch && ogImageMatch[1]) {
+    return ogImageMatch[1]
+  }
+  
+  // Try reversed order (content before property)
+  const ogImageMatch2 = html.match(/<meta[^>]*content=["']([^"']+)["'][^>]*property=["']og:image["'][^>]*>/i)
+  if (ogImageMatch2 && ogImageMatch2[1]) {
+    return ogImageMatch2[1]
+  }
+  
+  return null
+}
+
+// Cache for fetched OG images to avoid repeated requests
+const ogImageCache = new Map<string, string | null>()
+
+export const fetchOgImage = async (url: string): Promise<string | null> => {
+  // Check cache first
+  if (ogImageCache.has(url)) {
+    return ogImageCache.get(url) || null
+  }
+  
+  try {
+    // Use allorigins.win as a free CORS proxy (no auth required)
+    const proxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(url)}`
+    const response = await fetch(proxyUrl, {
+      signal: AbortSignal.timeout(5000) // 5 second timeout
+    })
+    
+    if (!response.ok) {
+      ogImageCache.set(url, null)
+      return null
+    }
+    
+    const data = await response.json()
+    const html = data.contents
+    
+    const ogImage = extractOgImage(html)
+    ogImageCache.set(url, ogImage)
+    
+    return ogImage
+  } catch (error) {
+    console.warn('Failed to fetch OG image for:', url, error)
+    ogImageCache.set(url, null)
+    return null
+  }
+}
+
+export const getPreviewImage = (url: string, type: string): string | null => {
+  // YouTube videos - instant thumbnail
+  if (type === 'youtube') {
+    return getYouTubeThumbnail(url)
+  }
+  
+  // For other URLs, return null and let component fetch async
+  return null
+}
+
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,7 +4,7 @@ import react from '@vitejs/plugin-react'
 export default defineConfig({
  plugins: [react()],
  server: {
-    port: 3000
+    port: 9802
  }
 })