chore: bump version to 0.5.6

fix: use round checkmark icon (faCheckCircle) in Mark as Read button
style: remove horizontal divider above Mark as Read button
2026-02-16 20:45:01 +01:00 · 2025-10-13 17:12:24 +02:00 · 2025-10-13 17:10:29 +02:00 · 2025-10-13 17:09:26 +02:00 · 2025-10-13 17:07:02 +02:00 · 2025-10-13 17:05:49 +02:00
13 changed files with 807 additions and 59 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,47 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [Unreleased]

+## [0.5.5] - 2025-01-27
+
+### Added
+- `/me` page with tabbed layout featuring Highlights, Reading List, and Library tabs
+- Two-pane layout for `/me` page with article sources and highlights
+- Custom FontAwesome Pro books icon for Archive tab
+- CompactButton component for highlight cards
+- Instant mark-as-read functionality with checkmark animation and read status checking
+
+### Changed
+- Rename Library tab to Archive
+- Move highlight timestamp to top-right corner of cards
+- Replace username with AuthorCard component on `/me` page
+- Use user's custom highlight color for Highlights tab
+- Render library articles using BlogPostCard component for consistency
+- Use faBooks icon for Mark as Read button
+- Make quote icon a CompactButton in top-left corner
+
+### Fixed
+- Include currentArticle in useEffect deps to satisfy lint
+- Deduplicate article events in library to prevent showing duplicates
+- Remove incorrect useSettings hook usage in Me component
+- Correct fetchBookmarks usage with callback pattern in Me component
+- Add padding to prevent quote text from overlapping timestamp
+- Improve spacing and alignment of highlight card elements
+- Align corner elements symmetrically with proper margins
+- Group relay icon and author in footer-left for consistent alignment
+- Position relay indicator in bottom-left corner to prevent overlap with author
+
+### Style
+- Match `/me` profile card width to highlight cards
+- Improve Me page mobile tabs and avoid overlap with sidebar buttons
+- Reduce margins/paddings to make highlight cards more compact
+- Tighten vertical spacing on highlight cards
+- Left-align text inside author card
+- Constrain `/me` page content width to match author card (600px)
+- Improve tab border styling for dark theme
+- Make relay indicator match CompactButton (same look as menu)
+- Align relay indicator within footer with symmetric spacing
+- Make header and footer full-width with borders and corners
+
 ## [0.5.4] - 2025-10-13

 ### Changed
@@ -758,7 +799,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Optimize relay usage following applesauce-relay best practices
 - Use applesauce-react event models for better profile handling

-[Unreleased]: https://github.com/dergigi/boris/compare/v0.5.2...HEAD
+[Unreleased]: https://github.com/dergigi/boris/compare/v0.5.5...HEAD
+[0.5.5]: https://github.com/dergigi/boris/compare/v0.5.4...v0.5.5
 [0.5.2]: https://github.com/dergigi/boris/compare/v0.5.1...v0.5.2
 [0.5.1]: https://github.com/dergigi/boris/compare/v0.5.0...v0.5.1
 [0.5.0]: https://github.com/dergigi/boris/compare/v0.4.3...v0.5.0
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "boris",
-  "version": "0.4.3",
+  "version": "0.5.5",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "boris",
-      "version": "0.4.3",
+      "version": "0.5.5",
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^7.1.0",
        "@fortawesome/free-solid-svg-icons": "^7.1.0",
@@ -20,11 +20,14 @@
        "applesauce-relay": "^4.0.0",
        "date-fns": "^4.1.0",
        "nostr-tools": "^2.4.0",
+        "prismjs": "^1.30.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-markdown": "^10.1.0",
        "react-router-dom": "^7.9.3",
        "reading-time-estimator": "^1.14.0",
+        "rehype-prism-plus": "^2.0.1",
+        "rehype-raw": "^7.0.0",
        "remark-gfm": "^4.0.1"
      },
      "devDependencies": {
@@ -2964,6 +2967,12 @@
      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
      "license": "MIT"
    },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.5",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz",
+      "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==",
+      "license": "MIT"
+    },
    "node_modules/@types/prop-types": {
      "version": "15.7.15",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
@@ -5283,6 +5292,82 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/hast-util-from-html": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-html/-/hast-util-from-html-2.0.3.tgz",
+      "integrity": "sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.1.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "parse5": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-parse5": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.3.tgz",
+      "integrity": "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "property-information": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-location": "^5.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-raw": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.1.0.tgz",
+      "integrity": "sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "hast-util-to-parse5": "^8.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "parse5": "^7.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "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",
@@ -5310,6 +5395,48 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/hast-util-to-parse5": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.0.tgz",
+      "integrity": "sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-parse5/node_modules/property-information": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+      "integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/hast-util-to-string": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.1.tgz",
+      "integrity": "sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.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",
@@ -5323,6 +5450,23 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/hastscript": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.1.tgz",
+      "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.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",
@@ -5333,6 +5477,16 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/htmlparser2": {
      "version": "8.0.2",
      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
@@ -7429,12 +7583,42 @@
      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
      "license": "MIT"
    },
+    "node_modules/parse-numeric-range": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz",
+      "integrity": "sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==",
+      "license": "ISC"
+    },
    "node_modules/parse-srcset": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
      "license": "MIT"
    },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5/node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
    "node_modules/path-exists": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -7580,6 +7764,15 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/property-information": {
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
@@ -7763,6 +7956,77 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/refractor": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-4.9.0.tgz",
+      "integrity": "sha512-nEG1SPXFoGGx+dcjftjv8cAjEusIh6ED1xhf5DG3C0x/k+rmZ2duKnc3QLpt6qeHv5fPb8uwN3VWN2BT7fr3Og==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "@types/prismjs": "^1.0.0",
+        "hastscript": "^7.0.0",
+        "parse-entities": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/@types/hast": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
+      "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "node_modules/refractor/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/refractor/node_modules/hast-util-parse-selector": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-3.1.1.tgz",
+      "integrity": "sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/refractor/node_modules/hastscript": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-7.2.0.tgz",
+      "integrity": "sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^3.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/refractor/node_modules/property-information": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+      "integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/regenerate": {
      "version": "1.4.2",
      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -7842,6 +8106,50 @@
        "regjsparser": "bin/parser"
      }
    },
+    "node_modules/rehype-parse": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/rehype-parse/-/rehype-parse-9.0.1.tgz",
+      "integrity": "sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-from-html": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-prism-plus": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/rehype-prism-plus/-/rehype-prism-plus-2.0.1.tgz",
+      "integrity": "sha512-Wglct0OW12tksTUseAPyWPo3srjBOY7xKlql/DPKi7HbsdZTyaLCAoO58QBKSczFQxElTsQlOY3JDOFzB/K++Q==",
+      "license": "MIT",
+      "dependencies": {
+        "hast-util-to-string": "^3.0.0",
+        "parse-numeric-range": "^1.3.0",
+        "refractor": "^4.8.0",
+        "rehype-parse": "^9.0.0",
+        "unist-util-filter": "^5.0.0",
+        "unist-util-visit": "^5.0.0"
+      }
+    },
+    "node_modules/rehype-raw": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
+      "integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-raw": "^9.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/remark": {
      "version": "15.0.1",
      "resolved": "https://registry.npmjs.org/remark/-/remark-15.0.1.tgz",
@@ -9024,6 +9332,17 @@
        "node": ">=8"
      }
    },
+    "node_modules/unist-util-filter": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-filter/-/unist-util-filter-5.0.1.tgz",
+      "integrity": "sha512-pHx7D4Zt6+TsfwylH9+lYhBhzyhEnCXs/lbq/Hstxno5z4gVdyc2WEW0asfjGKPyG4pEKrnBv5hdkO6+aRnQJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      }
+    },
    "node_modules/unist-util-is": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
@@ -9168,6 +9487,20 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/vfile-location": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+      "integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/vfile-message": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
@@ -9273,6 +9606,16 @@
        }
      }
    },
+    "node_modules/web-namespaces": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+      "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/webidl-conversions": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "boris",
-  "version": "0.5.5",
+  "version": "0.5.6",
  "description": "A minimal nostr client for bookmark management",
  "homepage": "https://read.withboris.com/",
  "type": "module",
@@ -23,11 +23,14 @@
    "applesauce-relay": "^4.0.0",
    "date-fns": "^4.1.0",
    "nostr-tools": "^2.4.0",
+    "prismjs": "^1.30.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-markdown": "^10.1.0",
    "react-router-dom": "^7.9.3",
    "reading-time-estimator": "^1.14.0",
+    "rehype-prism-plus": "^2.0.1",
+    "rehype-raw": "^7.0.0",
    "remark-gfm": "^4.0.1"
  },
  "devDependencies": {
--- a/src/components/BlogPostCard.tsx
+++ b/src/components/BlogPostCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCalendar, faUser } from '@fortawesome/free-solid-svg-icons'
+import { faCalendar, faUser, faNewspaper } from '@fortawesome/free-solid-svg-icons'
 import { formatDistance } from 'date-fns'
 import { BlogPostPreview } from '../services/exploreService'
 import { useEventModel } from 'applesauce-react/hooks'
@@ -28,15 +28,19 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href }) => {
      className="blog-post-card"
      style={{ textDecoration: 'none', color: 'inherit' }}
    >
-      {post.image && (
-        <div className="blog-post-card-image">
+      <div className="blog-post-card-image">
+        {post.image ? (
          <img 
            src={post.image} 
            alt={post.title}
            loading="lazy"
          />
-        </div>
-      )}
+        ) : (
+          <div className="blog-post-image-placeholder">
+            <FontAwesomeIcon icon={faNewspaper} />
+          </div>
+        )}
+      </div>
      <div className="blog-post-card-content">
        <h3 className="blog-post-card-title">{post.title}</h3>
        {post.summary && (
--- a/src/components/BookmarkViews/CardView.tsx
+++ b/src/components/BookmarkViews/CardView.tsx
@@ -8,6 +8,7 @@ import IconButton from '../IconButton'
 import { classifyUrl } from '../../utils/helpers'
 import { IconGetter } from './shared'
 import { useImageCache } from '../../hooks/useImageCache'
+import { getPreviewImage, fetchOgImage } from '../../utils/imagePreview'
 import { UserSettings } from '../../services/settingsService'
 import { getProfileUrl, getEventUrl } from '../../config/nostrGateways'

@@ -44,17 +45,33 @@ export const CardView: React.FC<CardViewProps> = ({
  articleSummary,
  settings
 }) => {
-  const cachedImage = useImageCache(articleImage, settings)
+  const firstUrl = hasUrls ? extractedUrls[0] : null
+  const firstUrlClassificationType = firstUrl ? classifyUrl(firstUrl)?.type : null
+  const instantPreview = firstUrl ? getPreviewImage(firstUrl, firstUrlClassificationType || '') : null
+  
+  const [ogImage, setOgImage] = useState<string | null>(null)
  const [expanded, setExpanded] = useState(false)
  const [urlsExpanded, setUrlsExpanded] = useState(false)
+  
  const contentLength = (bookmark.content || '').length
  const shouldTruncate = !expanded && contentLength > 210
  const isArticle = bookmark.kind === 30023
  const isWebBookmark = bookmark.kind === 39701
+  
+  // Determine which image to use (article image, instant preview, or OG image)
+  const previewImage = articleImage || instantPreview || ogImage
+  const cachedImage = useImageCache(previewImage || undefined, settings)
+  
+  // Fetch OG image if we don't have any other image
+  React.useEffect(() => {
+    if (firstUrl && !articleImage && !instantPreview && !ogImage) {
+      fetchOgImage(firstUrl).then(setOgImage)
+    }
+  }, [firstUrl, articleImage, instantPreview, ogImage])

  return (
    <div key={`${bookmark.id}-${index}`} className={`individual-bookmark ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
-      {isArticle && cachedImage && (
+      {cachedImage && (
        <div 
          className="article-hero-image"
          style={{ backgroundImage: `url(${cachedImage})` }}
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -1,8 +1,14 @@
-import React, { useMemo, useState, useEffect } from 'react'
+import React, { useMemo, useState, useEffect, useRef } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
+import rehypeRaw from 'rehype-raw'
+import rehypePrism from 'rehype-prism-plus'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner, faCheck } from '@fortawesome/free-solid-svg-icons'
+import 'prismjs/themes/prism-tomorrow.css'
+import { faSpinner, faCheckCircle, faEllipsisH, faExternalLinkAlt, faMobileAlt } from '@fortawesome/free-solid-svg-icons'
+import { nip19 } from 'nostr-tools'
+import { getNostrUrl } from '../config/nostrGateways'
+import { RELAYS } from '../config/relays'
 import { RelayPool } from 'applesauce-relay'
 import { IAccount } from 'applesauce-accounts'
 import { NostrEvent } from 'nostr-tools'
@@ -79,6 +85,8 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
  const [isMarkedAsRead, setIsMarkedAsRead] = useState(false)
  const [isCheckingReadStatus, setIsCheckingReadStatus] = useState(false)
  const [showCheckAnimation, setShowCheckAnimation] = useState(false)
+  const [showArticleMenu, setShowArticleMenu] = useState(false)
+  const articleMenuRef = useRef<HTMLDivElement>(null)
  const { renderedHtml: renderedMarkdownHtml, previewRef: markdownPreviewRef, processedMarkdown } = useMarkdownToHTML(markdown, relayPool)
  
  const { finalHtml, relevantHighlights } = useHighlightedContent({
@@ -101,6 +109,22 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
    onClearSelection
  })

+  // Close menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (articleMenuRef.current && !articleMenuRef.current.contains(event.target as Node)) {
+        setShowArticleMenu(false)
+      }
+    }
+    
+    if (showArticleMenu) {
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside)
+      }
+    }
+  }, [showArticleMenu])
+
  const readingStats = useMemo(() => {
    const content = markdown || html || ''
    if (!content) return null
@@ -112,6 +136,48 @@ const ContentPanel: React.FC<ContentPanelProps> = ({

  // Determine if we're on a nostr-native article (/a/) or external URL (/r/)
  const isNostrArticle = selectedUrl && selectedUrl.startsWith('nostr:')
+
+  // Get article links for menu
+  const getArticleLinks = () => {
+    if (!currentArticle) return null
+
+    const dTag = currentArticle.tags.find(t => t[0] === 'd')?.[1] || ''
+    const relayHints = RELAYS.filter(r => 
+      !r.includes('localhost') && !r.includes('127.0.0.1')
+    ).slice(0, 3)
+
+    const naddr = nip19.naddrEncode({
+      kind: 30023,
+      pubkey: currentArticle.pubkey,
+      identifier: dTag,
+      relays: relayHints
+    })
+
+    return {
+      portal: getNostrUrl(naddr),
+      native: `nostr:${naddr}`
+    }
+  }
+
+  const articleLinks = getArticleLinks()
+
+  const handleMenuToggle = () => {
+    setShowArticleMenu(!showArticleMenu)
+  }
+
+  const handleOpenPortal = () => {
+    if (articleLinks) {
+      window.open(articleLinks.portal, '_blank', 'noopener,noreferrer')
+    }
+    setShowArticleMenu(false)
+  }
+
+  const handleOpenNative = () => {
+    if (articleLinks) {
+      window.location.href = articleLinks.native
+    }
+    setShowArticleMenu(false)
+  }
  
  // Check if article is already marked as read when URL/article changes
  useEffect(() => {
@@ -216,7 +282,19 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
      {/* Hidden markdown preview to convert markdown to HTML */}
      {markdown && (
        <div ref={markdownPreviewRef} style={{ display: 'none' }}>
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>
+          <ReactMarkdown 
+            remarkPlugins={[remarkGfm]}
+            rehypePlugins={[rehypeRaw, rehypePrism]}
+            components={{
+              img: ({ src, alt, ...props }) => (
+                <img 
+                  src={src} 
+                  alt={alt} 
+                  {...props}
+                />
+              )
+            }}
+          >
            {processedMarkdown || markdown}
          </ReactMarkdown>
        </div>
@@ -262,6 +340,40 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
            />
          )}
          
+          {/* Article menu for nostr-native articles */}
+          {isNostrArticle && currentArticle && articleLinks && (
+            <div className="article-menu-container">
+              <div className="article-menu-wrapper" ref={articleMenuRef}>
+                <button
+                  className="article-menu-btn"
+                  onClick={handleMenuToggle}
+                  title="More options"
+                >
+                  <FontAwesomeIcon icon={faEllipsisH} />
+                </button>
+                
+                {showArticleMenu && (
+                  <div className="article-menu">
+                    <button
+                      className="article-menu-item"
+                      onClick={handleOpenPortal}
+                    >
+                      <FontAwesomeIcon icon={faExternalLinkAlt} />
+                      <span>Open on Nostr</span>
+                    </button>
+                    <button
+                      className="article-menu-item"
+                      onClick={handleOpenNative}
+                    >
+                      <FontAwesomeIcon icon={faMobileAlt} />
+                      <span>Open with Native App</span>
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+          
          {/* Mark as Read button */}
          {activeAccount && (
            <div className="mark-as-read-container">
@@ -272,7 +384,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
                title={isMarkedAsRead ? 'Already Marked as Read' : 'Mark as Read'}
              >
                <FontAwesomeIcon 
-                  icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheck : faBooks} 
+                  icon={isCheckingReadStatus ? faSpinner : isMarkedAsRead ? faCheckCircle : faBooks} 
                  spin={isCheckingReadStatus} 
                />
                <span>
--- a/src/components/HighlightItem.tsx
+++ b/src/components/HighlightItem.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faQuoteLeft, faExternalLinkAlt, faPlane, faSpinner, faServer, faTrash, faEllipsisH } from '@fortawesome/free-solid-svg-icons'
+import { faQuoteLeft, faExternalLinkAlt, faPlane, faSpinner, faServer, faTrash, faEllipsisH, faMobileAlt } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models, IEventStore } from 'applesauce-core'
@@ -123,7 +123,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
    }
  }
  
-  const getHighlightLink = () => {
+  const getHighlightLinks = () => {
    // Encode the highlight event itself (kind 9802) as a nevent
    // Get non-local relays for the hint
    const relayHints = RELAYS.filter(r => 
@@ -136,10 +136,14 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
      author: highlight.pubkey,
      kind: 9802
    })
-    return getNostrUrl(nevent)
+    
+    return {
+      portal: getNostrUrl(nevent),
+      native: `nostr:${nevent}`
+    }
  }
  
-  const highlightLink = getHighlightLink()
+  const highlightLinks = getHighlightLinks()
  
  // Handle rebroadcast to all relays
  const handleRebroadcast = async (e: React.MouseEvent) => {
@@ -283,9 +287,15 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
    setShowMenu(!showMenu)
  }
  
-  const handleOpenExternal = (e: React.MouseEvent) => {
+  const handleOpenPortal = (e: React.MouseEvent) => {
    e.stopPropagation()
-    window.open(highlightLink, '_blank', 'noopener,noreferrer')
+    window.open(highlightLinks.portal, '_blank', 'noopener,noreferrer')
+    setShowMenu(false)
+  }
+
+  const handleOpenNative = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    window.location.href = highlightLinks.native
    setShowMenu(false)
  }
  
@@ -364,11 +374,18 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
              <div className="highlight-menu">
                <button
                  className="highlight-menu-item"
-                  onClick={handleOpenExternal}
+                  onClick={handleOpenPortal}
                >
                  <FontAwesomeIcon icon={faExternalLinkAlt} />
                  <span>Open on Nostr</span>
                </button>
+                <button
+                  className="highlight-menu-item"
+                  onClick={handleOpenNative}
+                >
+                  <FontAwesomeIcon icon={faMobileAlt} />
+                  <span>Open with Native App</span>
+                </button>
                {canDelete && (
                  <button
                    className="highlight-menu-item highlight-menu-item-danger"
--- a/src/components/Me.tsx
+++ b/src/components/Me.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner, faExclamationCircle, faHighlighter, faBookmark } from '@fortawesome/free-solid-svg-icons'
+import { faSpinner, faExclamationCircle, faHighlighter, faBookmark, faList, faThLarge, faImage } from '@fortawesome/free-solid-svg-icons'
 import { Hooks } from 'applesauce-react'
 import { RelayPool } from 'applesauce-relay'
 import { nip19 } from 'nostr-tools'
@@ -10,9 +10,14 @@ import { fetchHighlights } from '../services/highlightService'
 import { fetchBookmarks } from '../services/bookmarkService'
 import { fetchReadArticlesWithData } from '../services/libraryService'
 import { BlogPostPreview } from '../services/exploreService'
-import { Bookmark } from '../types/bookmarks'
+import { Bookmark, IndividualBookmark } from '../types/bookmarks'
 import AuthorCard from './AuthorCard'
 import BlogPostCard from './BlogPostCard'
+import { BookmarkItem } from './BookmarkItem'
+import IconButton from './IconButton'
+import { ViewMode } from './Bookmarks'
+import { extractUrlsFromContent } from '../services/bookmarkHelpers'
+import { getCachedMeData, setCachedMeData, updateCachedHighlights } from '../services/meCache'
 import { faBooks } from '../icons/customIcons'

 interface MeProps {
@@ -29,6 +34,7 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
  const [readArticles, setReadArticles] = useState<BlogPostPreview[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
+  const [viewMode, setViewMode] = useState<ViewMode>('cards')

  useEffect(() => {
    const loadData = async () => {
@@ -42,6 +48,14 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
        setLoading(true)
        setError(null)

+        // Seed from cache if available to avoid empty flash
+        const cached = getCachedMeData(activeAccount.pubkey)
+        if (cached) {
+          setHighlights(cached.highlights)
+          setBookmarks(cached.bookmarks)
+          setReadArticles(cached.readArticles)
+        }
+
        // Fetch highlights and read articles
        const [userHighlights, userReadArticles] = await Promise.all([
          fetchHighlights(relayPool, activeAccount.pubkey),
@@ -52,12 +66,19 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
        setReadArticles(userReadArticles)

        // Fetch bookmarks using callback pattern
+        let fetchedBookmarks: Bookmark[] = []
        try {
-          await fetchBookmarks(relayPool, activeAccount, setBookmarks)
+          await fetchBookmarks(relayPool, activeAccount, (newBookmarks) => {
+            fetchedBookmarks = newBookmarks
+            setBookmarks(newBookmarks)
+          })
        } catch (err) {
          console.warn('Failed to load bookmarks:', err)
          setBookmarks([])
        }
+
+        // Update cache with all fetched data
+        setCachedMeData(activeAccount.pubkey, userHighlights, fetchedBookmarks, userReadArticles)
      } catch (err) {
        console.error('Failed to load data:', err)
        setError('Failed to load data. Please try again.')
@@ -70,7 +91,14 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
  }, [relayPool, activeAccount])

  const handleHighlightDelete = (highlightId: string) => {
-    setHighlights(prev => prev.filter(h => h.id !== highlightId))
+    setHighlights(prev => {
+      const updated = prev.filter(h => h.id !== highlightId)
+      // Update cache when highlight is deleted
+      if (activeAccount) {
+        updateCachedHighlights(activeAccount.pubkey, updated)
+      }
+      return updated
+    })
  }

  const getPostUrl = (post: BlogPostPreview) => {
@@ -83,7 +111,32 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
    return `/a/${naddr}`
  }

-  if (loading) {
+  // Helper to check if a bookmark has either content or a URL (same logic as BookmarkList)
+  const hasContentOrUrl = (ib: IndividualBookmark) => {
+    const hasContent = ib.content && ib.content.trim().length > 0
+    
+    let hasUrl = false
+    if (ib.kind === 39701) {
+      const dTag = ib.tags?.find((t: string[]) => t[0] === 'd')?.[1]
+      hasUrl = !!dTag && dTag.trim().length > 0
+    } else {
+      const urls = extractUrlsFromContent(ib.content || '')
+      hasUrl = urls.length > 0
+    }
+    
+    if (ib.kind === 30023) return true
+    return hasContent || hasUrl
+  }
+
+  // Merge and flatten all individual bookmarks (same logic as BookmarkList)
+  const allIndividualBookmarks = bookmarks.flatMap(b => b.individualBookmarks || [])
+    .filter(hasContentOrUrl)
+    .sort((a, b) => ((b.added_at || 0) - (a.added_at || 0)) || ((b.created_at || 0) - (a.created_at || 0)))
+
+  // Only show full loading screen if we don't have any data yet
+  const hasData = highlights.length > 0 || bookmarks.length > 0 || readArticles.length > 0
+  
+  if (loading && !hasData) {
    return (
      <div className="explore-container">
        <div className="explore-loading">
@@ -125,20 +178,52 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
        )

      case 'reading-list':
-        return bookmarks.length === 0 ? (
+        return allIndividualBookmarks.length === 0 ? (
          <div className="explore-error">
            <p>No bookmarks yet. Bookmark articles to see them here!</p>
          </div>
        ) : (
          <div className="bookmarks-list">
-            {bookmarks.map((bookmark) => (
-              <div key={bookmark.id} className="bookmark-item">
-                <a href={bookmark.url} target="_blank" rel="noopener noreferrer">
-                  <h3>{bookmark.title || 'Untitled'}</h3>
-                  {bookmark.content && <p>{bookmark.content.slice(0, 150)}...</p>}
-                </a>
-              </div>
-            ))}
+            <div className={`bookmarks-grid bookmarks-${viewMode}`}>
+              {allIndividualBookmarks.map((individualBookmark, index) => (
+                <BookmarkItem
+                  key={`${individualBookmark.id}-${index}`}
+                  bookmark={individualBookmark}
+                  index={index}
+                  viewMode={viewMode}
+                />
+              ))}
+            </div>
+            <div className="view-mode-controls" style={{
+              display: 'flex',
+              justifyContent: 'center',
+              gap: '0.5rem',
+              padding: '1rem',
+              marginTop: '1rem',
+              borderTop: '1px solid var(--border-color)'
+            }}>
+              <IconButton
+                icon={faList}
+                onClick={() => setViewMode('compact')}
+                title="Compact list view"
+                ariaLabel="Compact list view"
+                variant={viewMode === 'compact' ? 'primary' : 'ghost'}
+              />
+              <IconButton
+                icon={faThLarge}
+                onClick={() => setViewMode('cards')}
+                title="Cards view"
+                ariaLabel="Cards view"
+                variant={viewMode === 'cards' ? 'primary' : 'ghost'}
+              />
+              <IconButton
+                icon={faImage}
+                onClick={() => setViewMode('large')}
+                title="Large preview view"
+                ariaLabel="Large preview view"
+                variant={viewMode === 'large' ? 'primary' : 'ghost'}
+              />
+            </div>
          </div>
        )

@@ -169,6 +254,12 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
      <div className="explore-header">
        {activeAccount && <AuthorCard authorPubkey={activeAccount.pubkey} />}
        
+        {loading && hasData && (
+          <div className="explore-loading" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0' }}>
+            <FontAwesomeIcon icon={faSpinner} spin />
+          </div>
+        )}
+        
        <div className="me-tabs">
          <button
            className={`me-tab ${activeTab === 'highlights' ? 'active' : ''}`}
@@ -184,7 +275,7 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
            onClick={() => setActiveTab('reading-list')}
          >
            <FontAwesomeIcon icon={faBookmark} />
-            Reading List ({bookmarks.length})
+            Reading List ({allIndividualBookmarks.length})
          </button>
          <button
            className={`me-tab ${activeTab === 'archive' ? 'active' : ''}`}
--- a/src/index.css
+++ b/src/index.css
@@ -617,20 +617,69 @@

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

-.reader-markdown pre,
 .reader-markdown code {
-  background: #111;
+  background: #1e1e1e;
  border: 1px solid #333;
-  border-radius: 6px;
+  border-radius: 4px;
+  padding: 0.15rem 0.4rem;
+  font-size: 0.9em;
+  font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
 }

 .reader-markdown pre {
-  padding: 0.75rem;
-  overflow: auto;
+  background: #1e1e1e;
+  border: 1px solid #333;
+  border-radius: 8px;
+  padding: 1rem;
+  overflow-x: auto;
+  margin: 1rem 0;
+  line-height: 1.5;
+  font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
 }

-.reader-markdown code {
-  padding: 0.1rem 0.3rem;
+.reader-markdown pre code {
+  background: transparent;
+  border: none;
+  padding: 0;
+  font-size: 0.9em;
+  display: block;
+}
+
+/* Prism.js enhancements */
+.reader-markdown pre[class*="language-"] {
+  background: #1e1e1e;
+  border: 1px solid #333;
+}
+
+.reader-markdown code[class*="language-"] {
+  background: transparent;
+  text-shadow: none;
+}
+
+.reader-html pre {
+  background: #1e1e1e;
+  border: 1px solid #333;
+  border-radius: 8px;
+  padding: 1rem;
+  overflow-x: auto;
+  margin: 1rem 0;
+  font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
+}
+
+.reader-html code {
+  background: #1e1e1e;
+  border: 1px solid #333;
+  border-radius: 4px;
+  padding: 0.15rem 0.4rem;
+  font-size: 0.9em;
+  font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
+}
+
+.reader-html pre code {
+  background: transparent;
+  border: none;
+  padding: 0;
+  display: block;
 }

 /* Mark as Read button */
@@ -640,7 +689,6 @@
  align-items: center;
  padding: 2rem 1rem;
  margin-top: 2rem;
-  border-top: 1px solid #333;
 }

 .mark-as-read-btn {
--- a/src/services/meCache.ts
+++ b/src/services/meCache.ts
@@ -0,0 +1,54 @@
+import { Highlight } from '../types/highlights'
+import { Bookmark } from '../types/bookmarks'
+import { BlogPostPreview } from './exploreService'
+
+export interface MeCache {
+  highlights: Highlight[]
+  bookmarks: Bookmark[]
+  readArticles: BlogPostPreview[]
+  timestamp: number
+}
+
+const meCache = new Map<string, MeCache>() // key: pubkey
+
+export function getCachedMeData(pubkey: string): MeCache | null {
+  const entry = meCache.get(pubkey)
+  if (!entry) return null
+  return entry
+}
+
+export function setCachedMeData(
+  pubkey: string,
+  highlights: Highlight[],
+  bookmarks: Bookmark[],
+  readArticles: BlogPostPreview[]
+): void {
+  meCache.set(pubkey, {
+    highlights,
+    bookmarks,
+    readArticles,
+    timestamp: Date.now()
+  })
+}
+
+export function updateCachedHighlights(pubkey: string, highlights: Highlight[]): void {
+  const existing = meCache.get(pubkey)
+  if (existing) {
+    meCache.set(pubkey, { ...existing, highlights, timestamp: Date.now() })
+  }
+}
+
+export function updateCachedBookmarks(pubkey: string, bookmarks: Bookmark[]): void {
+  const existing = meCache.get(pubkey)
+  if (existing) {
+    meCache.set(pubkey, { ...existing, bookmarks, timestamp: Date.now() })
+  }
+}
+
+export function updateCachedReadArticles(pubkey: string, readArticles: BlogPostPreview[]): void {
+  const existing = meCache.get(pubkey)
+  if (existing) {
+    meCache.set(pubkey, { ...existing, readArticles, timestamp: Date.now() })
+  }
+}
+
--- a/src/styles/components/cards.css
+++ b/src/styles/components/cards.css
@@ -19,8 +19,8 @@
  .bookmarks-grid.bookmarks-large { gap: 1rem; }
 }

-.individual-bookmark { background: transparent; padding: 1rem; border-radius: 8px; transition: all 0.2s ease; border: 1px solid transparent; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; overflow: hidden; }
-.individual-bookmark:hover { border-color: transparent; background: #2a2a2a; }
+.individual-bookmark { background: transparent; padding: 1rem; border-radius: 8px; transition: all 0.2s ease; border: 1px solid #2a2a2a; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; overflow: hidden; }
+.individual-bookmark:hover { border-color: #3a3a3a; background: #252525; }

 /* Compact view */
 .individual-bookmark.compact { padding: 0.5rem 0.5rem; background: transparent; border: none; border-bottom: 1px solid #2a2a2a; border-radius: 0; box-shadow: none; width: 100%; max-width: 100%; overflow: hidden; }
@@ -48,13 +48,13 @@
 .bookmark-meta-minimal { font-size: 0.8rem; color: #888; }
 .author-link-minimal { color: #888; text-decoration: none; transition: color 0.2s ease; }
 .author-link-minimal:hover { color: #aaa; }
-.read-now-button-minimal { background: #28a745; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.2s ease; white-space: nowrap; }
-.read-now-button-minimal:hover { background: #218838; }
+.read-now-button-minimal { background: #646cff; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.2s ease; white-space: nowrap; }
+.read-now-button-minimal:hover { background: #535bf2; }
 .expand-toggle-urls { margin-top: 0.5rem; background: transparent; border: none; color: #646cff; cursor: pointer; font-size: 0.8rem; padding: 0.25rem 0; text-decoration: underline; }
 .expand-toggle-urls:hover { color: #8088ff; }

 /* Large preview view */
-.individual-bookmark.large { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
+.individual-bookmark.large { padding: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #2a2a2a; }
 .large-preview-image { width: 100%; height: 180px; background: #1a1a1a; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid #333; position: relative; }
 .large-preview-image:hover { opacity: 0.9; }
 .large-preview-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.3) 100%); pointer-events: none; }
@@ -63,8 +63,8 @@
 .large-text { color: #ccc; font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
 .large-footer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: #888; padding-top: 0.75rem; border-top: 1px solid #333; }
 .large-author { flex: 1; }
-.large-read-button { background: #28a745; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.2s ease; display: flex; align-items: center; gap: 0.5rem; }
-.large-read-button:hover { background: #218838; }
+.large-read-button { background: #646cff; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: all 0.2s ease; display: flex; align-items: center; gap: 0.5rem; }
+.large-read-button:hover { background: #535bf2; }

 /* Blog cards (Explore) */
 .explore-container { padding: 2rem; max-width: 1400px; margin: 0 auto; min-height: 100vh; }
@@ -77,9 +77,10 @@
 .explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; margin-top: 2rem; }
 .blog-post-card { background: #1a1a1a; border: 1px solid #333; border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; height: 100%; }
 .blog-post-card:hover { border-color: #646cff; transform: translateY(-4px); box-shadow: 0 8px 24px rgba(100, 108, 255, 0.15); }
-.blog-post-card-image { width: 100%; height: 200px; overflow: hidden; background: #0f0f0f; }
+.blog-post-card-image { width: 100%; height: 200px; overflow: hidden; background: #0f0f0f; display: flex; align-items: center; justify-content: center; }
 .blog-post-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
 .blog-post-card:hover .blog-post-card-image img { transform: scale(1.05); }
+.blog-post-image-placeholder { font-size: 3rem; color: #444; display: flex; align-items: center; justify-content: center; }
 .blog-post-card-content { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
 .blog-post-card-title { font-size: 1.25rem; font-weight: 600; margin: 0; color: rgba(255, 255, 255, 0.95); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
 .blog-post-card-summary { font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); margin: 0; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; flex: 1; }
--- a/src/styles/components/icon-button.css
+++ b/src/styles/components/icon-button.css
@@ -20,8 +20,8 @@
 .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.success { background: #646cff; color: white; border-color: #646cff; }
+.icon-button.success:hover { filter: brightness(1.1); }

 .icon-button.ghost { background: #2a2a2a; }

--- a/src/styles/components/reader.css
+++ b/src/styles/components/reader.css
@@ -26,11 +26,27 @@
 .reader-html p, .reader-html div, .reader-html span, .reader-html li, .reader-html td, .reader-html th { font-size: 1em !important; }
 .reader-markdown a { color: #8ab4f8; text-decoration: none; }
 .reader-markdown a:hover { text-decoration: underline; }
-.reader-markdown pre, .reader-markdown code { background: #111; border: 1px solid #333; border-radius: 6px; }
-.reader-markdown pre { padding: 0.75rem; overflow: auto; }
-.reader-markdown code { padding: 0.1rem 0.3rem; }
+.reader-markdown code { background: #1e1e1e; border: 1px solid #333; border-radius: 4px; padding: 0.15rem 0.4rem; font-size: 0.9em; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
+.reader-markdown pre { background: #1e1e1e; border: 1px solid #333; border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1rem 0; line-height: 1.5; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
+.reader-markdown pre code { background: transparent; border: none; padding: 0; font-size: 0.9em; display: block; }
+/* Prism.js enhancements */
+.reader-markdown pre[class*="language-"] { background: #1e1e1e; border: 1px solid #333; }
+.reader-markdown code[class*="language-"] { background: transparent; text-shadow: none; }
+.reader-html pre { background: #1e1e1e; border: 1px solid #333; border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1rem 0; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
+.reader-html code { background: #1e1e1e; border: 1px solid #333; border-radius: 4px; padding: 0.15rem 0.4rem; font-size: 0.9em; font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace; }
+.reader-html pre code { background: transparent; border: none; padding: 0; display: block; }
+/* Article menu */
+.article-menu-container { display: flex; justify-content: flex-end; padding: 1.5rem 0 0.5rem; margin-top: 2rem; }
+.article-menu-wrapper { position: relative; }
+.article-menu-btn { background: none; border: none; color: #888; cursor: pointer; padding: 0.5rem 0.75rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s ease; border-radius: 6px; }
+.article-menu-btn:hover { color: #646cff; background: rgba(100, 108, 255, 0.1); }
+.article-menu { position: absolute; right: 0; top: calc(100% + 4px); background: #2a2a2a; border: 1px solid #444; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 1000; min-width: 180px; overflow: hidden; }
+.article-menu-item { width: 100%; background: none; border: none; color: #ddd; padding: 0.75rem 1rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; transition: all 0.15s ease; text-align: left; white-space: nowrap; }
+.article-menu-item:hover { background: rgba(100, 108, 255, 0.15); color: #fff; }
+.article-menu-item svg { font-size: 0.875rem; flex-shrink: 0; }
+
 /* Mark as Read button */
-.mark-as-read-container { display: flex; justify-content: center; align-items: center; padding: 2rem 1rem; margin-top: 2rem; border-top: 1px solid #333; }
+.mark-as-read-container { display: flex; justify-content: center; align-items: center; padding: 2rem 1rem; margin-top: 1rem; }
 .mark-as-read-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: #2a2a2a; color: #ddd; border: 1px solid #444; border-radius: 8px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; min-width: 160px; justify-content: center; }
 .mark-as-read-btn:hover:not(:disabled) { background: #333; border-color: #555; transform: translateY(-1px); }
 .mark-as-read-btn:active:not(:disabled) { transform: translateY(0); }
Author	SHA1	Message	Date
Gigi	c0f34b684d	chore: bump version to 0.5.6	2025-10-13 17:12:24 +02:00
Gigi	613956bbaf	fix: use round checkmark icon (faCheckCircle) in Mark as Read button	2025-10-13 17:10:29 +02:00
Gigi	041ba5c05b	style: remove horizontal divider above Mark as Read button	2025-10-13 17:09:26 +02:00
Gigi	05c21cfd6d	style: remove horizontal divider below article menu button	2025-10-13 17:07:02 +02:00
Gigi	4898f99ae1	style: make article menu button more subtle by removing border	2025-10-13 17:05:49 +02:00
Gigi	be920e8c44	fix: remove extra horizontal divider above article menu	2025-10-13 17:05:15 +02:00
Gigi	0fa5ac536b	feat: add three-dot menu to articles and enhance highlight menus - Add three-dot menu button at end of articles (before Mark as Read) - Right-aligned menu with two options: - Open on Nostr (using nostr gateway/portal) - Open with Native App (using nostr: URI scheme) - Add 'Open with Native App' option to highlight card menus - Menu only appears for nostr-native articles (kind:30023) - Styled consistently with highlight card menus - Click outside to close menu functionality	2025-10-13 17:03:00 +02:00
Gigi	cef359af29	fix: ensure code blocks use monospace fonts explicitly - Add explicit monospace font-family to all pre elements - Include Courier New as additional cross-platform fallback - Apply to both reader-markdown and reader-html contexts - Ensures code always renders in monospace even if Prism theme is overridden	2025-10-13 16:58:03 +02:00
Gigi	2de72b73c1	feat: add Prism.js syntax highlighting for code blocks - Install prismjs and rehype-prism-plus packages - Integrate rehype-prism plugin into ReactMarkdown - Use prism-tomorrow dark theme for syntax highlighting - Enhanced code block styling with better padding and borders - Inline code now has distinct styling from code blocks - Monospace font for all code (Monaco, Menlo, Consolas) - Improved readability with proper line-height and spacing	2025-10-13 16:55:06 +02:00
Gigi	a794331c1a	feat: add image placeholders to blog post cards in /explore - Show newspaper icon placeholder when blog posts don't have images - Always render image container with consistent height - Match the same placeholder style as large bookmark preview - Improves visual consistency across the app	2025-10-13 16:52:32 +02:00
Gigi	e09be543bc	feat: add caching to /me page for faster loading - Create meCache service to store highlights, bookmarks, and read articles - Seed Me component from cache on load to avoid empty flash - Show small spinner while refreshing if cached data is displayed - Update cache when highlights are deleted - Only show full loading screen if no cached data is available - Improves perceived performance similar to /explore page	2025-10-13 16:50:43 +02:00
Gigi	88085c48d2	style: improve bookmarks sidebar visual design - Replace green buttons with purple/blue primary color - Add subtle borders to card and large preview views - Enable image previews in card view for all bookmarks (not just articles) - Fetch OG images for regular bookmarks in card view - Improve hover states with lighter border colors	2025-10-13 16:47:41 +02:00
Gigi	e32010771b	refactor: make /me Reading List use same components as bookmark sidebar - Reuse BookmarkItem component for rendering individual bookmarks - Apply same filtering logic (hasContentOrUrl) as BookmarkList - Add view mode controls (compact/cards/large) matching sidebar - Count shows individual bookmarks not bookmark lists - Keeps code DRY by reusing existing components and logic	2025-10-13 16:41:01 +02:00
Gigi	03e7484e71	fix: preserve reading font settings in markdown images - Remove inline styles from custom image component - Let CSS inheritance handle font and styling properly - Images now respect user's reading font and size settings	2025-10-13 16:35:11 +02:00
Gigi	d9fd4ec286	feat: enable inline image rendering in nostr-native blog posts - Install rehype-raw plugin for HTML support in ReactMarkdown - Configure ReactMarkdown to parse and render HTML img tags - Add responsive image styling with max-width and auto height - Images now render inline in nostr-native blog posts with proper styling	2025-10-13 16:34:08 +02:00
Gigi	8f14f0347c	docs: update CHANGELOG for v0.5.5	2025-10-13 16:33:03 +02:00