Reader: Highlights button in the top bar

A highlighter button beside Bookmarks opens your highlights (by colour);
Bookmarks now opens the bookmarks. Each shows in the accent colour when you
have some. "H" opens the highlights.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/reader/MarksSheet.jsx

@@ -1,6 +1,6 @@
 // Everything you have marked in the Bible: highlights (grouped and filtered by colour, each colour
 // named by you — "Promises", "Commands") and bookmarks. Opens from the bookmark button in the top bar.
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Sheet from './Sheet.jsx';
 import { CloseIcon } from './icons.jsx';
 import { COLOR_NAMES, COLOR_SUGGESTIONS, HIGHLIGHT_COLORS, colorTitle } from '../../utils/highlightColors.js';
@@ -8,9 +8,11 @@ import { COLOR_NAMES, COLOR_SUGGESTIONS, HIGHLIGHT_COLORS, colorTitle } from '..
 const tabBtn = (active) => `rounded-full border px-3 py-1 text-xs font-medium ${active ? 'border-[var(--r-text)] bg-[var(--r-text)] text-[var(--r-bg)]' : 'border-[var(--r-line)] text-[var(--r-sub)] hover:bg-black/5'}`;
 
 export default function MarksSheet({
-  open, onClose, bookmarks, highlights, colorLabels, onSetLabel, onJump, onRemoveBookmark, onRemoveHighlight,
+  open, onClose, initialTab = 'highlights', bookmarks, highlights, colorLabels, onSetLabel, onJump, onRemoveBookmark, onRemoveHighlight,
 }) {
-  const [tab, setTab] = useState('highlights');
+  const [tab, setTab] = useState(initialTab);
+  // Opening from the Highlights button shows highlights; from the Bookmarks button, bookmarks
+  useEffect(() => { if (open) setTab(initialTab); }, [open, initialTab]);
   const [filter, setFilter] = useState(null); // a highlight colour, or null for all
   const [editing, setEditing] = useState(false);