chore: bump version to 0.1.3

feat: make entire compact list row clickable to open reader
- Add onClick handler to compact-row div - Show pointer cursor on rows with URLs - Add stopPropagation to action button to prevent double-trigger - Include accessibility attributes (role, tabIndex)
2026-02-16 12:34:41 +01:00 · 2025-10-03 09:52:03 +02:00 · 2025-10-03 09:51:34 +02:00 · 2025-10-03 09:49:07 +02:00 · 2025-10-03 09:44:39 +02:00 · 2025-10-03 09:37:56 +02:00
23 changed files with 1598 additions and 246 deletions
--- 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/README.md
+++ b/README.md
@@ -4,9 +4,16 @@ A minimal nostr client for bookmark management, built with [applesauce](https://

 ## 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
+- **Minimal UI**: Clean, modern interface focused on bookmark management

 ## Getting Started

@@ -63,11 +70,32 @@ 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
+│   ├── 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
+│   └── readerService.ts                 # Content extraction via reader API
+├── types/
+│   ├── bookmarks.ts                     # Bookmark type definitions
+│   ├── 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)
@@ -108,15 +136,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/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-DO40HQQ6.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Dw4opAJ_.css">
  </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.2",
+  "version": "0.1.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
@@ -1541,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",
@@ -1579,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": "*",
@@ -1818,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": {
@@ -2476,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",
@@ -2503,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",
@@ -2523,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",
@@ -2556,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",
@@ -2901,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",
@@ -3193,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",
@@ -3269,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",
@@ -3292,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",
@@ -3497,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",
@@ -3549,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",
@@ -3563,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",
@@ -3676,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",
@@ -4304,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",
@@ -4422,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",
@@ -4478,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",
@@ -4504,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",
@@ -4520,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",
@@ -4713,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",
@@ -4739,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",
@@ -4772,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",
@@ -4873,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,12 +1,12 @@
 {
  "name": "markr",
-  "version": "0.1.0",
+  "version": "0.1.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "markr",
-      "version": "0.1.0",
+      "version": "0.1.1",
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^7.1.0",
        "@fortawesome/free-solid-svg-icons": "^7.1.0",
@@ -17,6 +17,7 @@
        "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",
@@ -2602,6 +2603,16 @@
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
      "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",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "markr",
-  "version": "0.1.0",
+  "version": "0.1.3",
  "description": "A minimal nostr client for bookmark management",
  "type": "module",
  "scripts": {
@@ -19,6 +19,7 @@
    "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",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -63,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
@@ -1,40 +1,29 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { 
-  faBookmark, 
-  faUserLock, 
-  faCircleUser,
-  faFeather,
-  faRetweet,
-  faHeart,
-  faImage,
-  faVideo,
-  faFile,
-  faLaptopCode,
-  faCodePullRequest,
-  faBug,
-  faExclamationTriangle,
-  faBolt,
-  faCloudBolt,
-  faHighlighter,
-  faNewspaper,
-  faEyeSlash,
-  faThumbtack
-} from '@fortawesome/free-solid-svg-icons'
+import { faBookmark, faUserLock } from '@fortawesome/free-solid-svg-icons'
+import { faChevronDown, faChevronUp, faBookOpen, faPlay, faEye } from '@fortawesome/free-solid-svg-icons'
+import IconButton from './IconButton'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
+import { npubEncode, neventEncode } from 'nostr-tools/nip19'
 import { IndividualBookmark } from '../types/bookmarks'
 import { formatDate, renderParsedContent } from '../utils/bookmarkUtils'
+import { getKindIcon } from './kindIcon'
 import ContentWithResolvedProfiles from './ContentWithResolvedProfiles'
 import { extractUrlsFromContent } from '../services/bookmarkHelpers'
+import { classifyUrl } from '../utils/helpers'
+import { ViewMode } from './Bookmarks'

 interface BookmarkItemProps {
  bookmark: IndividualBookmark
  index: number
  onSelectUrl?: (url: string) => void
+  viewMode?: ViewMode
 }

-export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl }) => {
+export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards' }) => {
+  const [expanded, setExpanded] = useState(false)
+  const [urlsExpanded, setUrlsExpanded] = useState(false)
  // removed copy-to-clipboard buttons

  const short = (v: string) => `${v.slice(0, 8)}...${v.slice(-8)}`
@@ -42,9 +31,14 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
  // Extract URLs from bookmark content
  const extractedUrls = extractUrlsFromContent(bookmark.content)
  const hasUrls = extractedUrls.length > 0
+  const contentLength = (bookmark.content || '').length
+  const shouldTruncate = !expanded && contentLength > 210

  // 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 = () => {
@@ -54,30 +48,19 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
    return short(bookmark.pubkey) // fallback to short pubkey
  }

-  // Map kind numbers to FontAwesome icons
-  const getKindIcon = (kind: number) => {
-    const iconMap: Record<number, import('@fortawesome/fontawesome-svg-core').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
+  // 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
    }
-    return iconMap[kind] || faFile // fallback to file icon
  }

  const handleReadNow = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -91,6 +74,56 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
    }
  }

+  // Get classification for the first URL (for the main button)
+  const firstUrlClassification = hasUrls ? classifyUrl(extractedUrls[0]) : null
+
+  // Compact view rendering
+  if (viewMode === 'compact') {
+    const handleCompactClick = () => {
+      if (hasUrls && onSelectUrl) {
+        onSelectUrl(extractedUrls[0])
+      }
+    }
+
+    return (
+      <div key={`${bookmark.id}-${index}`} className={`individual-bookmark compact ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
+        <div 
+          className={`compact-row ${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>
+    )
+  }
+
+  // Card/Large view rendering (existing)
  return (
    <div key={`${bookmark.id}-${index}`} className={`individual-bookmark ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
      <div className="bookmark-header">
@@ -104,51 +137,106 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
            <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
          )}
        </span>
-        <span className="bookmark-id">
-          {short(bookmark.id)}
-        </span>
+        
        <span className="bookmark-date">{formatDate(bookmark.created_at)}</span>
      </div>
      
      {extractedUrls.length > 0 && (
        <div className="bookmark-urls">
          <h4>URLs:</h4>
-          {extractedUrls.map((url, urlIndex) => (
-            <a
-              key={urlIndex}
-              href={url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="bookmark-url"
-              onClick={(e) => { if (onSelectUrl) { e.preventDefault(); onSelectUrl(url) } }}
+          {(urlsExpanded ? extractedUrls : extractedUrls.slice(0, 3)).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={36}
+                  onClick={(e) => { e.preventDefault(); onSelectUrl?.(url) }}
+                />
+              </div>
+            )
+          })}
+          {extractedUrls.length > 3 && (
+            <button
+              className="expand-toggle"
+              onClick={() => setUrlsExpanded(v => !v)}
+              aria-label={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
+              title={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
            >
-              {url}
-            </a>
-          ))}
+              <FontAwesomeIcon icon={urlsExpanded ? faChevronUp : faChevronDown} />
+            </button>
+          )}
        </div>
      )}
      
      {bookmark.parsedContent ? (
        <div className="bookmark-content">
-          {renderParsedContent(bookmark.parsedContent)}
+          {shouldTruncate && bookmark.content
+            ? <ContentWithResolvedProfiles content={`${bookmark.content.slice(0, 210).trimEnd()}…`} />
+            : renderParsedContent(bookmark.parsedContent)}
        </div>
      ) : bookmark.content && (
-        <ContentWithResolvedProfiles content={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-meta">
-        <span className="kind-icon">
-          <FontAwesomeIcon icon={getKindIcon(bookmark.kind)} />
-        </span>
+        {eventNevent ? (
+          <a
+            href={`https://search.dergigi.com/e/${eventNevent}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="kind-icon-link"
+            title="Open event in search"
+          >
+            <span className="kind-icon">
+              <FontAwesomeIcon icon={getKindIcon(bookmark.kind)} />
+            </span>
+          </a>
+        ) : (
+          <span className="kind-icon">
+            <FontAwesomeIcon icon={getKindIcon(bookmark.kind)} />
+          </span>
+        )}
        <span>
-          Author: {getAuthorDisplayName()}
+          <a
+            href={`https://search.dergigi.com/p/${authorNpub}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="author-link"
+            title="Open author in search"
+          >
+            by: {getAuthorDisplayName()}
+          </a>
        </span>
      </div>

-      {hasUrls && (
+      {hasUrls && firstUrlClassification && (
        <div className="read-now">
          <button className="read-now-button" onClick={handleReadNow}>
-            READ NOW
+            {firstUrlClassification.buttonText}
          </button>
        </div>
      )}
--- a/src/components/BookmarkList.tsx
+++ b/src/components/BookmarkList.tsx
@@ -1,36 +1,54 @@
 import React from 'react'
-import { Bookmark, ActiveAccount } from '../types/bookmarks'
+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[]
-  activeAccount: ActiveAccount | null
-  onLogout: () => void
-  formatUserDisplay: () => string
  onSelectUrl?: (url: string) => void
+  isCollapsed: boolean
+  onToggleCollapse: () => void
+  onLogout: () => void
+  viewMode: ViewMode
+  onViewModeChange: (mode: ViewMode) => void
 }

 export const BookmarkList: React.FC<BookmarkListProps> = ({ 
  bookmarks, 
-  activeAccount, 
-  onLogout, 
-  formatUserDisplay,
-  onSelectUrl
+  onSelectUrl,
+  isCollapsed,
+  onToggleCollapse,
+  onLogout,
+  viewMode,
+  onViewModeChange
 }) => {
-  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
+  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">
@@ -41,10 +59,18 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
        <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
+                  {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 && (
@@ -59,10 +85,15 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
              )}
              {bookmark.individualBookmarks && bookmark.individualBookmarks.length > 0 && (
                <div className="individual-bookmarks">
-                  <h4>Individual Bookmarks ({bookmark.individualBookmarks.length}):</h4>
-                  <div className="bookmarks-grid">
+                  <div className={`bookmarks-grid bookmarks-${viewMode}`}>
                    {bookmark.individualBookmarks.map((individualBookmark, index) => 
-                      <BookmarkItem key={index} bookmark={individualBookmark} index={index} onSelectUrl={onSelectUrl} />
+                      <BookmarkItem 
+                        key={index} 
+                        bookmark={individualBookmark} 
+                        index={index} 
+                        onSelectUrl={onSelectUrl}
+                        viewMode={viewMode}
+                      />
                    )}
                  </div>
                </div>
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -1,7 +1,5 @@
 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 { Bookmark } from '../types/bookmarks'
 import { BookmarkList } from './BookmarkList'
@@ -9,6 +7,8 @@ import { fetchBookmarks } from '../services/bookmarkService'
 import ContentPanel from './ContentPanel'
 import { fetchReadableContent, ReadableContent } from '../services/readerService'

+export type ViewMode = 'compact' | 'cards' | 'large'
+
 interface BookmarksProps {
  relayPool: RelayPool | null
  onLogout: () => void
@@ -20,11 +20,10 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
  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 [viewMode, setViewMode] = useState<ViewMode>('cards')
  const activeAccount = Hooks.useActiveAccount()
  const accountManager = Hooks.useAccountManager()
-  
-  // Use ProfileModel to get user profile information
-  const profile = useEventModel(Models.ProfileModel, activeAccount ? [activeAccount.pubkey] : null)

  useEffect(() => {
    console.log('Bookmarks useEffect triggered')
@@ -72,56 +71,25 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {



-  const formatUserDisplay = () => {
-    if (!activeAccount) return 'Unknown User'
-
-    // Debug profile loading
-    console.log('Profile data:', profile)
-    console.log('Active account pubkey:', activeAccount.pubkey)
-
-    // 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 to avoid sticky loading text
-    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="two-pane">
+    <div className={`two-pane ${isCollapsed ? 'sidebar-collapsed' : ''}`}>
      <div className="pane sidebar">
        <BookmarkList 
          bookmarks={bookmarks}
-          activeAccount={activeAccount || null}
-          onLogout={onLogout}
-          formatUserDisplay={formatUserDisplay}
          onSelectUrl={handleSelectUrl}
+          isCollapsed={isCollapsed}
+          onToggleCollapse={() => setIsCollapsed(!isCollapsed)}
+          onLogout={onLogout}
+          viewMode={viewMode}
+          onViewModeChange={setViewMode}
        />
      </div>
      <div className="pane main">
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -15,15 +15,15 @@ interface ContentPanelProps {
 const ContentPanel: React.FC<ContentPanelProps> = ({ loading, title, html, markdown, selectedUrl }) => {
  if (!selectedUrl) {
    return (
-      <div className="content-panel empty">
-        <p>Select a bookmark to preview its content.</p>
+      <div className="reader empty">
+        <p>Select a bookmark to read its content.</p>
      </div>
    )
  }

  if (loading) {
    return (
-      <div className="content-panel loading">
+      <div className="reader loading">
        <div className="loading-spinner">
          <FontAwesomeIcon icon={faSpinner} spin />
          <span>Loading content…</span>
@@ -33,18 +33,18 @@ const ContentPanel: React.FC<ContentPanelProps> = ({ loading, title, html, markd
  }

  return (
-    <div className="content-panel">
-      {title && <h2 className="content-title">{title}</h2>}
+    <div className="reader">
+      {title && <h2 className="reader-title">{title}</h2>}
      {markdown ? (
-        <div className="content-markdown">
+        <div className="reader-markdown">
          <ReactMarkdown remarkPlugins={[remarkGfm]}>
            {markdown}
          </ReactMarkdown>
        </div>
      ) : html ? (
-        <div className="content-html" dangerouslySetInnerHTML={{ __html: html }} />
+        <div className="reader-html" dangerouslySetInnerHTML={{ __html: html }} />
      ) : (
-        <div className="content-panel empty">
+        <div className="reader empty">
          <p>No readable content found for this URL.</p>
        </div>
      )}
--- a/src/components/ContentWithResolvedProfiles.tsx
+++ b/src/components/ContentWithResolvedProfiles.tsx
@@ -11,17 +11,19 @@ const ContentWithResolvedProfiles: React.FC<Props> = ({ content }) => {
  const matches = extractNprofilePubkeys(content)
  const decoded = matches
    .map((m) => {
-      try { return decode(m) } catch { return undefined }
+      try { return decode(m) } catch { return undefined as undefined }
    })
-    .filter(Boolean)
+    .filter((v): v is ReturnType<typeof decode> => Boolean(v))

-  const lookups = decoded.map((res) => getPubkeyFromDecodeResult(res as any)).filter(Boolean) as string[]
+  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] as any)
+    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}`)
--- 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/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
@@ -28,6 +28,7 @@ body {

 .app {
  text-align: center;
+  position: relative;
 }

 .app header {
@@ -97,24 +98,113 @@ body {
  text-align: left;
 }

-.bookmarks-header {
+.sidebar-header-bar {
  display: flex;
+  align-items: center;
  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 2rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid #333;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: #1a1a1a;
+  border: 1px solid #333;
+  border-radius: 8px;
+  margin-bottom: 0.5rem;
 }

-.bookmarks-header > div {
-  flex: 1;
+.view-mode-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: #1a1a1a;
+  border: 1px solid #333;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  justify-content: center;
 }

-.bookmarks-header h2 {
-  margin: 0;
+.profile-avatar {
+  width: 33px;
+  height: 33px;
+  border-radius: 6px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #2a2a2a;
+  border: 1px solid #444;
+  flex-shrink: 0;
+  color: #ddd;
+  box-sizing: border-box;
+}
+
+.profile-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.profile-avatar svg {
+  font-size: 1rem;
+}
+
+.sidebar-header-bar .toggle-sidebar-btn {
+  background: transparent;
+  color: #ddd;
+  border: 1px solid #444;
+  padding: 0;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 33px;
+  height: 33px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.sidebar-header-bar .toggle-sidebar-btn:hover {
+  background: #2a2a2a;
  color: #fff;
 }

+.sidebar-header-bar .toggle-sidebar-btn:active {
+  transform: translateY(1px);
+}
+
+.bookmarks-container.collapsed {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 1rem;
+}
+
+.bookmarks-container.collapsed .toggle-sidebar-btn {
+  background: #2a2a2a;
+  color: #ddd;
+  border: 1px solid #444;
+  padding: 0;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 33px;
+  height: 33px;
+  box-sizing: border-box;
+}
+
+.bookmarks-container.collapsed .toggle-sidebar-btn:hover {
+  background: #333;
+  color: #fff;
+}
+
+.bookmarks-container.collapsed .toggle-sidebar-btn:active {
+  transform: translateY(1px);
+}
+
 .user-info {
  margin: 0.5rem 0 0 0;
  color: #888;
@@ -128,6 +218,16 @@ body {
  margin: 0.5rem 0;
 }

+.event-link {
+  color: #8ab4f8;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.event-link:hover {
+  text-decoration: underline;
+}
+
 .bookmark-urls {
  margin: 1rem 0;
 }
@@ -144,12 +244,65 @@ body {
  color: #007bff;
  text-decoration: none;
  word-break: break-all;
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
 }

 .bookmark-url:hover {
  text-decoration: underline;
 }

+.url-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.read-inline-btn {
+  background: #28a745;
+  color: white;
+  border: none;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.read-inline-btn:hover {
+  background: #218838;
+}
+
+/* Generic IconButton styling */
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #444;
+  border-radius: 6px;
+  background: #2a2a2a;
+  color: #ddd;
+  cursor: pointer;
+  min-width: 33px;
+  min-height: 33px;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.icon-button:hover { background: #333; }
+.icon-button:active { transform: translateY(1px); }
+
+.icon-button.primary { background: #646cff; color: white; border-color: #646cff; }
+.icon-button.primary:hover { filter: brightness(1.05); }
+
+.icon-button.success { background: #28a745; color: white; border-color: #28a745; }
+.icon-button.success:hover { filter: brightness(1.05); }
+
+.icon-button.ghost { background: #2a2a2a; }
+
 .bookmark-events {
  margin: 1rem 0;
 }
@@ -262,20 +415,25 @@ body {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 1rem;
-  align-items: start;
+  height: calc(100vh - 4rem);
+  transition: grid-template-columns 0.3s ease;
+}
+
+.two-pane.sidebar-collapsed {
+  grid-template-columns: 60px 1fr;
 }

 .pane.sidebar {
-  position: sticky;
-  top: 1rem;
-  align-self: start;
+  overflow-y: auto;
+  height: 100%;
 }

 .pane.main {
-  min-height: 60vh;
+  overflow-y: auto;
+  height: 100%;
 }

-.content-panel {
+.reader {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
@@ -283,7 +441,7 @@ body {
  text-align: left;
 }

-.content-panel.empty {
+.reader.empty {
  color: #888;
 }

@@ -298,11 +456,11 @@ body {
  font-size: 1.2rem;
 }

-.content-title {
+.reader-title {
  margin: 0 0 1rem 0;
 }

-.content-html {
+.reader-html {
  color: #ddd;
  line-height: 1.6;
  word-wrap: break-word;
@@ -310,25 +468,25 @@ body {
  word-break: break-word;
 }

-.content-markdown {
+.reader-markdown {
  color: #ddd;
  line-height: 1.7;
 }

 /* Ensure content is left-aligned even if source markup uses center */
-.content-panel .content-html *,
-.content-panel .content-markdown * {
+.reader .reader-html *,
+.reader .reader-markdown * {
  text-align: left !important;
 }

-.content-panel center,
-.content-panel [align="center"] {
+.reader center,
+.reader [align="center"] {
  text-align: left !important;
 }

 /* Tame images from external content */
-.content-panel .content-html img,
-.content-panel .content-markdown img {
+.reader .reader-html img,
+.reader .reader-markdown img {
  max-width: 100%;
  max-height: 70vh;
  height: auto;
@@ -338,37 +496,37 @@ body {
  border-radius: 6px;
 }

-.content-markdown h1,
-.content-markdown h2,
-.content-markdown h3,
-.content-markdown h4 {
+.reader-markdown h1,
+.reader-markdown h2,
+.reader-markdown h3,
+.reader-markdown h4 {
  margin-top: 1.2rem;
 }

-.content-markdown p {
+.reader-markdown p {
  margin: 0.5rem 0;
 }

-.content-markdown a {
+.reader-markdown a {
  color: #8ab4f8;
  text-decoration: none;
 }

-.content-markdown a:hover { text-decoration: underline; }
+.reader-markdown a:hover { text-decoration: underline; }

-.content-markdown pre,
-.content-markdown code {
+.reader-markdown pre,
+.reader-markdown code {
  background: #111;
  border: 1px solid #333;
  border-radius: 6px;
 }

-.content-markdown pre {
+.reader-markdown pre {
  padding: 0.75rem;
  overflow: auto;
 }

-.content-markdown code {
+.reader-markdown code {
  padding: 0.1rem 0.3rem;
 }

@@ -376,13 +534,11 @@ body {
  background: #1a1a1a;
  padding: 1.5rem;
  border-radius: 12px;
-  border: 1px solid #333;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

 .bookmark-item:hover {
-  border-color: #646cff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 }
@@ -399,6 +555,13 @@ body {
  display: block;
  margin-bottom: 0.5rem;
  word-break: break-all;
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
 }

 .bookmark-url:hover {
@@ -437,11 +600,14 @@ body {
  gap: 1rem;
 }

+.bookmarks-grid.bookmarks-compact {
+  gap: 0.5rem;
+}
+
 .individual-bookmark {
  background: #2a2a2a;
  padding: 1.25rem;
  border-radius: 8px;
-  border: 1px solid #444;
  transition: all 0.2s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  word-wrap: break-word;
@@ -451,11 +617,92 @@ body {
 }

 .individual-bookmark:hover {
-  border-color: #646cff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }

+/* Compact view styles */
+.individual-bookmark.compact {
+  padding: 0.4rem 0.75rem;
+  background: transparent;
+  border-bottom: 1px solid #333;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.individual-bookmark.compact:hover {
+  background: #2a2a2a;
+  transform: none;
+  box-shadow: none;
+}
+
+.compact-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  height: 28px;
+}
+
+.compact-row.clickable {
+  cursor: pointer;
+}
+
+.compact-row.clickable:active {
+  opacity: 0.8;
+}
+
+.bookmark-type-compact {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: #646cff;
+  font-size: 0.85rem;
+  flex-shrink: 0;
+}
+
+.compact-text {
+  flex: 1;
+  min-width: 0;
+  color: #ccc;
+  font-size: 0.85rem;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bookmark-date-compact {
+  font-size: 0.7rem;
+  color: #666;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.compact-read-btn {
+  background: #28a745;
+  color: white;
+  border: none;
+  padding: 0;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 22px;
+  flex-shrink: 0;
+  transition: background-color 0.2s ease;
+}
+
+.compact-read-btn:hover {
+  background: #218838;
+}
+
+.compact-read-btn:active {
+  transform: translateY(1px);
+}
+
 .bookmark-header {
  display: flex;
  justify-content: space-between;
@@ -501,6 +748,23 @@ body {
  word-break: break-word;
 }

+.expand-toggle {
+  margin: 0.25rem 0;
+  background: transparent;
+  border: none;
+  color: #888;
+  cursor: pointer;
+  width: 100%;
+  height: 22px; /* half of default icon button */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.expand-toggle:hover {
+  color: #bbb;
+}
+
 .individual-bookmark .bookmark-meta {
  display: flex;
  gap: 1rem;
@@ -517,13 +781,23 @@ body {
  font-family: monospace;
 }

+.author-link {
+  color: #8ab4f8;
+  text-decoration: none;
+}
+
+.author-link:hover { text-decoration: underline; }
+
 .kind-icon {
-  background: #1a1a1a;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
  display: inline-flex;
  align-items: center;
-  gap: 0.25rem;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid #444;
+  border-radius: 6px;
+  background: #2a2a2a;
+  color: #ddd;
 }

 .kind-icon svg {
@@ -531,6 +805,10 @@ body {
  color: #646cff;
 }

+.kind-icon-link {
+  text-decoration: none;
+}
+
 .read-now {
  margin-top: 0.75rem;
  display: flex;
@@ -559,13 +837,11 @@ body {

 /* Private Bookmark Styles */
 .private-bookmark {
-  border-left: 4px solid #ff6b6b;
-  background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
+  background: #2a2a2a;
 }

 .private-bookmark:hover {
-  border-color: #ff6b6b;
-  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }

 .private-indicator {
--- a/src/services/bookmarkHelpers.ts
+++ b/src/services/bookmarkHelpers.ts
@@ -66,7 +66,8 @@ export const processApplesauceBookmarks = (
      tags: bookmark.tags || [],
      parsedContent: bookmark.content ? (getParsedContent(bookmark.content) as ParsedContent) : undefined,
      type: 'event' as const,
-      isPrivate
+      isPrivate,
+      added_at: Math.floor(Date.now() / 1000)
    }))
  }

@@ -80,7 +81,8 @@ export const processApplesauceBookmarks = (
    tags: bookmark.tags || [],
    parsedContent: bookmark.content ? (getParsedContent(bookmark.content) as ParsedContent) : undefined,
    type: 'event' as const,
-    isPrivate
+    isPrivate,
+    added_at: Math.floor(Date.now() / 1000)
  }))
 }

--- a/src/services/bookmarkService.ts
+++ b/src/services/bookmarkService.ts
@@ -113,7 +113,8 @@ export const fetchBookmarks = async (
      ...hydrateItems(privateItemsAll, idToEvent)
    ])

-    // Sort individual bookmarks by timestamp (newest first)
+    // 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 || [],
@@ -121,7 +122,7 @@ export const fetchBookmarks = async (
    }))
    const sortedBookmarks = enriched
      .map(b => ({ ...b, urlReferences: extractUrlsFromContent(b.content) }))
-      .sort((a, b) => (b.created_at || 0) - (a.created_at || 0))
+      .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`,
--- a/src/types/bookmarks.ts
+++ b/src/types/bookmarks.ts
@@ -40,6 +40,8 @@ export interface IndividualBookmark {
  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 {
--- a/src/utils/bookmarkUtils.tsx
+++ b/src/utils/bookmarkUtils.tsx
@@ -1,13 +1,16 @@
 import React from 'react'
+import { formatDistanceToNow } from 'date-fns'
 import { ParsedContent, ParsedNode } from '../types/bookmarks'
-import { ContentWithResolvedProfiles } from '../components/ContentWithResolvedProfiles'
+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) => {
-  return new Date(timestamp * 1000).toLocaleDateString()
+  const date = new Date(timestamp * 1000)
+  return formatDistanceToNow(date, { addSuffix: true })
 }

 // Component to render content with resolved nprofile names
-export { default as ContentWithResolvedProfiles } from '../components/ContentWithResolvedProfiles'
+// Intentionally no exports except components and render helpers

 // Component to render parsed content using applesauce-content
 export const renderParsedContent = (parsedContent: ParsedContent) => {
@@ -21,17 +24,7 @@ export const renderParsedContent = (parsedContent: ParsedContent) => {
    }
    
    if (node.type === 'mention') {
-      return (
-        <a 
-          key={index}
-          href={`nostr:${node.encoded}`}
-          className="nostr-mention"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {node.encoded}
-        </a>
-      )
+      return <ResolvedMention key={index} encoded={node.encoded} />
    }
    
    if (node.type === 'link') {
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -1,7 +1,3 @@
-export const formatDate = (timestamp: number): string => {
-  return new Date(timestamp * 1000).toLocaleDateString()
-}
-
 // Extract pubkeys from nprofile strings in content
 export const extractNprofilePubkeys = (content: string): string[] => {
  const nprofileRegex = /nprofile1[a-z0-9]+/gi
@@ -10,4 +6,34 @@ export const extractNprofilePubkeys = (content: string): string[] => {
  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' }
+}
Author	SHA1	Message	Date
Gigi	7e9cdfb0e1	chore: bump version to 0.1.3	2025-10-03 09:52:03 +02:00
Gigi	bdfb7ca9a6	feat: make entire compact list row clickable to open reader - Add onClick handler to compact-row div - Show pointer cursor on rows with URLs - Add stopPropagation to action button to prevent double-trigger - Include accessibility attributes (role, tabIndex)	2025-10-03 09:51:34 +02:00
Gigi	288b96d614	refactor: make compact list view even more compact - Move all elements to a single horizontal line - Reduce text preview from 100 to 60 characters - Decrease padding and font sizes - Fix row height to 28px for consistent spacing - Improve text truncation with ellipsis	2025-10-03 09:49:07 +02:00
Gigi	99c6a4c23b	feat: add view mode switching for bookmarks with compact list view - Add ViewMode type with options: compact, cards, large - Add view mode toggle buttons in SidebarHeader - Implement compact list view rendering in BookmarkItem - Add CSS styles for compact view with condensed layout - Cards view remains the default and current style	2025-10-03 09:44:39 +02:00
Gigi	5727a38a7e	chore: bump version to 0.1.2	2025-10-03 09:37:56 +02:00
Gigi	9046150d1f	fix(ui): make sidebar and reader scroll independently - Remove position: sticky from sidebar - Set fixed height on two-pane container (calc(100vh - 4rem)) - Add overflow-y: auto to both sidebar and main panes - Each pane now scrolls independently without affecting the other - Fix issue where bookmark bar was 'stuck' with long articles	2025-10-03 09:31:04 +02:00
Gigi	53b54c77e7	feat(reader): open bookmark URLs in reader instead of new window - Change URL links to buttons that open in reader - Style URL buttons to look like links (cursor, hover, no button appearance) - Rename 'content-panel' to 'reader' throughout codebase - Update all CSS classes: content-panel → reader, content-title → reader-title, etc. - Change empty state text from 'preview' to 'read' to match reader terminology - Keep things simple and focused on in-app reading experience	2025-10-03 09:30:28 +02:00
Gigi	d6756dc5a1	refactor: remove duplicate formatDate function from helpers.ts - Keep single formatDate implementation in bookmarkUtils.tsx - Both BookmarkList and BookmarkItem already import from bookmarkUtils - Maintain DRY principle by eliminating duplication	2025-10-03 09:27:56 +02:00
Gigi	5ea81bda8e	fix(deps): replace relative-time with date-fns for timestamp formatting - Replace relative-time package (which uses Temporal API) with date-fns - Update formatDate to use formatDistanceToNow from date-fns - Remove relative-time type declarations - Apply fix to both helpers.ts and bookmarkUtils.tsx - Fix runtime error: relative-time expects Temporal objects, not Date objects - date-fns provides better compatibility with current JavaScript standards	2025-10-03 09:25:05 +02:00
Gigi	6ad273b5f9	fix(deps): correct relative-time package usage - Change from calling relativeTime as function to instantiating RelativeTime class - Use relativeTime.from(date) method instead of relativeTime(date) - Update TypeScript type definitions to reflect class-based API - Fix runtime error: 'Cannot call a class as a function' - Apply fix to both bookmarkUtils.tsx and helpers.ts	2025-10-03 09:22:19 +02:00
Gigi	32bbda0364	docs(readme): update features, project structure, and add TODO section - Update features list to reflect current functionality - Add comprehensive project structure documentation - Add TODO section with prioritized next steps - Include high priority, medium priority, and nice-to-have items - Add contributing guidelines - Keep technical details about private bookmarks implementation	2025-10-03 02:08:38 +02:00
Gigi	857337c748	fix(ui): swap chevron directions for collapse/expand button - When sidebar is expanded: show chevron RIGHT (to collapse/hide) - When sidebar is collapsed: show chevron LEFT (to expand/show) - Update SidebarHeader to use faChevronRight - Update BookmarkList collapsed state to use faChevronLeft	2025-10-03 02:06:40 +02:00
Gigi	c21c29d5ee	fix(ui): ensure all icon buttons remain perfectly square - Add padding: 0 and box-sizing: border-box to .icon-button - Add box-sizing: border-box to .profile-avatar - Update .sidebar-header-bar .toggle-sidebar-btn to use fixed width/height instead of min values - Add explicit styling for .bookmarks-container.collapsed .toggle-sidebar-btn - Ensure borders don't add to total dimensions (33px x 33px including borders)	2025-10-03 02:05:19 +02:00
Gigi	0d956ed692	feat(ui): display timestamps as relative time - Install relative-time package from npm - Update formatDate functions to use relative-time instead of toLocaleDateString - Add TypeScript type definitions for relative-time module - Show human-friendly relative times (e.g., '2 hours ago', 'yesterday') - Apply to all timestamp displays (bookmark dates, created dates)	2025-10-03 02:03:31 +02:00
Gigi	8fe01d5337	feat(ui): replace user text with profile image in sidebar header - Replace 'Logged in as: [user]' text with profile avatar - Use applesauce ProfileModel to fetch user's profile picture - Display profile image in 33px square (same size as IconButton) - Show fallback user icon when no profile image available - Style avatar with same border radius and styling as IconButton - Add tooltip showing user display name on hover	2025-10-03 02:02:15 +02:00
Gigi	55c4fe9d4e	refactor(ui): move user info and logout to sidebar header bar - Create new SidebarHeader component as bar-shaped container - Combine collapse button, user info, and logout button in one bar - Position header bar at top of bookmark sidebar with matching width - Remove fixed top-right positioning for user header - Style as cohesive bar with background, border, and spacing - Update all prop passing from App through Bookmarks to BookmarkList - Remove old UserHeader component	2025-10-03 02:00:54 +02:00
Gigi	8014ee4ddd	refactor(ui): reduce IconButton size by 25% - Change default size from 44px to 33px (25% reduction) - Update min-width and min-height in CSS to match - Apply size reduction to toggle-sidebar-btn as well for consistency	2025-10-03 01:58:42 +02:00
Gigi	365b84ba9d	refactor(ui): remove duplicate bookmark title and heading - Remove bookmark title (h3) from bookmark items - Remove duplicate h4 heading from individual-bookmarks section - Keep only the single 'X bookmarks in this list:' line with event link	2025-10-03 01:57:51 +02:00
Gigi	c419679099	refactor(ui): remove horizontal line below collapse button - Remove border-bottom from bookmarks-header - Remove padding-bottom for cleaner appearance	2025-10-03 01:56:44 +02:00
Gigi	e644f07828	refactor(ui): move user info to top-right app header - Create UserHeader component to display user info and logout button - Move 'Logged in as: user' from sidebar to app-header in top-right - Remove user info display from BookmarkList and Bookmarks components - Simplify bookmarks-header layout (only contains collapse button now) - Update CSS to display user info and logout button inline with proper spacing	2025-10-03 01:56:16 +02:00
Gigi	448c4dac1c	feat(bookmarks): classify URLs by type and adjust action buttons - Add URL classification system (article, video, youtube, image) - Classify based on domain (youtube) and file extensions - Update button text: 'READ NOW' for articles, 'WATCH NOW' for videos, 'VIEW NOW' for images - Update icons: faBookOpen for articles, faPlay for videos, faEye for images - Apply classification to both individual URL buttons and main action button	2025-10-03 01:53:49 +02:00
Gigi	85695b5934	feat(ui): improve bookmark list heading with event links - Replace 'Bookmarks (count)' with 'count bookmarks in this list:' - Replace 'Individual Bookmarks (count):' with 'count bookmarks in this list:' - Make 'this list' a clickable link to search.dergigi.com/e/{eventId} - Add event-link CSS styling with blue color and hover effect	2025-10-03 01:52:07 +02:00
Gigi	ef3ce445f5	refactor(ui): move logout button to top-right of app - Move logout IconButton from sidebar to App component - Position logout button fixed at top-right corner - Remove onLogout prop from Bookmarks and BookmarkList components - Clean up sidebar header by removing logout button - Add app-header CSS with fixed positioning and high z-index	2025-10-03 01:51:03 +02:00
Gigi	436bbf2b43	refactor(ui): replace logout button text with icon button - Replace text logout buttons with IconButton component - Use faRightFromBracket icon for a cleaner, more minimal interface - Apply changes to both loading state and normal state - Maintain consistent styling with ghost variant	2025-10-03 01:48:45 +02:00
Gigi	0c2f528a23	refactor(ui): remove 'Your Bookmarks' heading - Remove the 'Your Bookmarks (count)' heading from the sidebar - Keep only the user info and action buttons for a cleaner interface	2025-10-03 01:47:20 +02:00
Gigi	d2cf27db42	refactor(ui): remove header text from app - Remove 'Markr' title and 'A minimal nostr bookmark client' subtitle - Clean up the app header for a more minimal interface	2025-10-03 01:46:24 +02:00
Gigi	53a6c86d8a	feat(ui): add collapse/expand functionality for bookmarks sidebar - Add toggle button to collapse/expand the bookmarks sidebar completely - Sidebar collapses to 60px width showing only expand button - Main content area expands to fill available space when sidebar collapsed - Smooth transitions when toggling between states - Use FontAwesome chevron icons for visual feedback - Preserve all functionality in both collapsed and expanded states	2025-10-03 01:45:42 +02:00
Gigi	0b058440bc	refactor(components): improve type safety and simplify IconButton - Add proper type guards in ContentWithResolvedProfiles to avoid type assertions - Remove href/link functionality from IconButton component for simplification - Replace 'as any' with proper type narrowing using type predicates	2025-10-03 01:43:13 +02:00
Gigi	0964156bcc	feat(bookmarks): sort by added_at (recently added first), fallback to event time\n\n- Track synthetic added_at on processed items\n- Keep order aligned with append semantics from Kind 10003 guidance (newest at end)\n- Cite: https://nostrbook.dev/kinds/10003	2025-10-03 01:41:11 +02:00
Gigi	86de9c9f1f	chore(release): bump version to 0.1.1	2025-10-03 01:04:20 +02:00
Gigi	974cecb85f	style(ui): use full-width slim chevron toggle; keep IconButton square for actions	2025-10-03 01:02:52 +02:00
Gigi	9b245b3d29	style(ui): make kind icon square to match IconButton sizing	2025-10-03 01:01:37 +02:00
Gigi	4fe9fd5470	refactor(ui): use IconButton for kind icon (square, link-capable)	2025-10-03 00:59:45 +02:00
Gigi	18af2d02ea	style(ui): remove colored borders and gradients; keep neutral cards	2025-10-03 00:56:58 +02:00
Gigi	a80352d8d3	refactor(ui): use IconButton for all icon-only actions to enforce square sizing	2025-10-03 00:55:51 +02:00
Gigi	6652694304	refactor(ui): extract kind icon mapping to helper and keep BookmarkItem under 210 lines	2025-10-03 00:53:38 +02:00
Gigi	728c269a29	feat(ui): make IconButton square and mobile-tappable (44px min)	2025-10-03 00:50:12 +02:00
Gigi	91c68a9d48	feat(ui): show bookmarked event date top-right; remove event id display	2025-10-03 00:48:48 +02:00
Gigi	f9d381e451	feat(ui): add reusable IconButton component with square styling	2025-10-03 00:47:37 +02:00
Gigi	81a48bd0f6	feat(ui): resolve nprofile/npub mentions to names in content - Add ResolvedMention component using applesauce ProfileModel - Update parsed content renderer to use ResolvedMention for mentions - Mentions now show @name and link to search page	2025-10-03 00:46:11 +02:00
Gigi	386a821c6b	feat(ui): make kind icon open event on search.dergigi.com\n\n- Wrap kind icon with link to nevent-encoded event\n- Adds fallback when id is not hex	2025-10-03 00:44:40 +02:00
Gigi	d10e12b8df	feat(ui): link author to search.dergigi.com with npub\n\n- Clickable 'by: <author>' opens profile search in new tab\n- Styles for author link	2025-10-03 00:43:19 +02:00
Gigi	c3eb29445e	feat(ui): add chevron toggle for URL list (show 3 by default)	2025-10-03 00:40:37 +02:00
Gigi	e0450385ed	fix(ui): enforce 210-char truncation for both plain and parsed content\n\n- Show truncated plain text when parsedContent exists and not expanded\n- Render full parsed content only when expanded\n- Keep chevron toggle below content	2025-10-03 00:35:55 +02:00
Gigi	a2620caa29	feat(ui): add 'Read now' button next to each URL in bookmarks\n\n- Display inline book-open icon button per URL\n- Clicking loads readability content in the right panel\n- Added styles for url rows and inline button	2025-10-03 00:32:16 +02:00
Gigi	609e15a738	feat(ui): truncate long bookmark text with expand/collapse chevron\n\n- Show first 210 chars by default\n- Toggle expansion with FontAwesome chevrons\n- Add minimal styles for the toggle	2025-10-03 00:27:31 +02:00
Gigi	fdb8511c87	chore(ui): change 'Author:' label to 'by:' in bookmark cards	2025-10-03 00:26:16 +02:00