From fdceed6067b0238ecc76b3334360e0ee894c64ca Mon Sep 17 00:00:00 2001
From: Richard R <me@richardr.dev>
Date: Mon, 1 Jun 2026 11:05:43 -0600
Subject: [PATCH] Converge reader navigation buttons

---
 src/app/(app)/epub/[id]/page.tsx    |  9 +++++----
 src/app/(app)/html/[id]/page.tsx    |  9 +++++----
 src/app/(app)/pdf/[id]/page.tsx     |  9 +++++----
 src/components/views/EPUBViewer.tsx | 17 ++++++++---------
 4 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/app/(app)/epub/[id]/page.tsx b/src/app/(app)/epub/[id]/page.tsx
index be5bf6d..e55761d 100644
--- a/src/app/(app)/epub/[id]/page.tsx
+++ b/src/app/(app)/epub/[id]/page.tsx
@@ -20,6 +20,7 @@ import { RateLimitBanner } from '@/components/auth/RateLimitBanner';
 import { useAuthRateLimit } from '@/contexts/AuthRateLimitContext';
 import { useFeatureFlag } from '@/contexts/RuntimeConfigContext';
 import { useUnmountCleanupRef } from '@/hooks/useUnmountCleanupRef';
+import { buttonClass } from '@/components/ui';
 import { useEpubDocument } from './useEpubDocument';
 
 export default function EPUBPage() {
@@ -173,9 +174,9 @@ export default function EPUBPage() {
         <p className="text-danger mb-4">{error}</p>
         <Link
           href="/app"
-          className="inline-flex items-center px-3 py-1 bg-surface text-foreground rounded-lg hover:bg-accent-wash transition duration-base ease-standard hover:text-accent"
+          className={buttonClass({ variant: 'secondary', size: 'md', className: 'gap-2' })}
         >
-          <svg className="w-4 h-4 mr-2 text-soft" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg className="w-4 h-4 text-soft" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
           </svg>
           Back to Documents
@@ -190,10 +191,10 @@ export default function EPUBPage() {
         left={
           <Link
             href="/app"
-            className="inline-flex items-center py-1 px-2 rounded-md border border-line bg-surface text-foreground text-xs hover:bg-accent-wash transition duration-base ease-standard hover:text-accent"
+            className={buttonClass({ variant: 'secondary', size: 'sm', className: 'gap-2' })}
             aria-label="Back to documents"
           >
-            <svg className="w-3 h-3 mr-2" fill="currentColor" stroke="currentColor" viewBox="0 0 24 24">
+            <svg className="w-3 h-3" fill="currentColor" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
             </svg>
             Documents
diff --git a/src/app/(app)/html/[id]/page.tsx b/src/app/(app)/html/[id]/page.tsx
index 2238fc2..d5ec371 100644
--- a/src/app/(app)/html/[id]/page.tsx
+++ b/src/app/(app)/html/[id]/page.tsx
@@ -18,6 +18,7 @@ import { AudiobookExportModal } from '@/components/AudiobookExportModal';
 import { useAuthRateLimit } from '@/contexts/AuthRateLimitContext';
 import { useFeatureFlag } from '@/contexts/RuntimeConfigContext';
 import { useUnmountCleanupRef } from '@/hooks/useUnmountCleanupRef';
+import { buttonClass } from '@/components/ui';
 import type { TTSAudiobookChapter } from '@/types/tts';
 import type { AudiobookGenerationSettings } from '@/types/client';
 import { useHtmlDocument } from './useHtmlDocument';
@@ -160,9 +161,9 @@ export default function HTMLPage() {
         <p className="text-danger mb-4">{error}</p>
         <Link
           href="/app"
-          className="inline-flex items-center px-3 py-1 bg-surface text-foreground rounded-lg hover:bg-accent-wash transition duration-base ease-standard hover:text-accent"
+          className={buttonClass({ variant: 'secondary', size: 'md', className: 'gap-2' })}
         >
-          <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
           </svg>
           Back to Documents
@@ -177,10 +178,10 @@ export default function HTMLPage() {
         left={
           <Link
             href="/app"
-            className="inline-flex items-center py-1 px-2 rounded-md border border-line bg-surface text-foreground text-xs hover:bg-accent-wash transition duration-base ease-standard hover:text-accent"
+            className={buttonClass({ variant: 'secondary', size: 'sm', className: 'gap-2' })}
             aria-label="Back to documents"
           >
-            <svg className="w-3 h-3 mr-2" fill="currentColor" stroke="currentColor" viewBox="0 0 24 24">
+            <svg className="w-3 h-3" fill="currentColor" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
             </svg>
             Documents
diff --git a/src/app/(app)/pdf/[id]/page.tsx b/src/app/(app)/pdf/[id]/page.tsx
index 819e641..85d711e 100644
--- a/src/app/(app)/pdf/[id]/page.tsx
+++ b/src/app/(app)/pdf/[id]/page.tsx
@@ -20,6 +20,7 @@ import { RateLimitBanner } from '@/components/auth/RateLimitBanner';
 import { useAuthRateLimit } from '@/contexts/AuthRateLimitContext';
 import { useFeatureFlag } from '@/contexts/RuntimeConfigContext';
 import { LoadingSpinner } from '@/components/Spinner';
+import { buttonClass } from '@/components/ui';
 import {
   FORCE_REPARSE_CONFIRM_MESSAGE,
   FORCE_REPARSE_CONFIRM_TEXT,
@@ -255,9 +256,9 @@ export default function PDFViewerPage() {
         <Link
           href="/app"
           onClick={handleBackToDocuments}
-          className="inline-flex items-center px-3 py-1 bg-surface text-foreground rounded-lg hover:bg-accent-wash transition duration-base ease-standard hover:text-accent"
+          className={buttonClass({ variant: 'secondary', size: 'md', className: 'gap-2' })}
         >
-          <svg className="w-4 h-4 mr-2 text-soft" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg className="w-4 h-4 text-soft" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
           </svg>
           Back to Documents
@@ -384,10 +385,10 @@ export default function PDFViewerPage() {
           <Link
             href="/app"
             onClick={handleBackToDocuments}
-            className="inline-flex items-center py-1 px-2 rounded-md border border-line bg-surface text-foreground text-xs hover:bg-accent-wash transition duration-base ease-standard hover:text-accent"
+            className={buttonClass({ variant: 'secondary', size: 'sm', className: 'gap-2' })}
             aria-label="Back to documents"
           >
-            <svg className="w-3 h-3 mr-2" fill="currentColor" stroke="currentColor" viewBox="0 0 24 24">
+            <svg className="w-3 h-3" fill="currentColor" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
             </svg>
             Documents
diff --git a/src/components/views/EPUBViewer.tsx b/src/components/views/EPUBViewer.tsx
index 60daa00..9c73a93 100644
--- a/src/components/views/EPUBViewer.tsx
+++ b/src/components/views/EPUBViewer.tsx
@@ -9,6 +9,7 @@ import { useEPUBTheme, getThemeStyles } from '@/hooks/epub/useEPUBTheme';
 import { useEPUBResize } from '@/hooks/epub/useEPUBResize';
 import { DotsVerticalIcon, ChevronLeftIcon, ChevronRightIcon } from '@/components/icons/Icons';
 import type { EpubDocumentState } from '@/app/(app)/epub/[id]/useEpubDocument';
+import { ToolbarButton } from '@/components/ui';
 
 const ReactReader = dynamic(() => import('react-reader').then(mod => mod.ReactReader), {
   ssr: false,
@@ -160,36 +161,34 @@ export function EPUBViewer({ className = '', epubState }: EPUBViewerProps) {
     <div className={`h-full flex flex-col relative z-0 ${className}`} ref={containerRef}>
       <div className="flex items-center justify-between px-2 py-1 border-b border-line-soft bg-surface text-xs text-soft">
         <div className="flex items-center gap-2">
-          <button
+          <ToolbarButton
             type="button"
             onClick={() => setIsTocOpen(open => !open)}
-            className="inline-flex items-center py-1 px-1 rounded-md border border-line bg-surface text-foreground text-xs hover:bg-accent-wash transition duration-base ease-standard transform hover:text-accent"
             aria-label={isTocOpen ? 'Hide chapters' : 'Show chapters'}
+            className="px-1"
           >
             <DotsVerticalIcon className="w-4 h-4" />
-          </button>
-          <button
+          </ToolbarButton>
+          <ToolbarButton
             type="button"
             onClick={() => handleLocationChanged('prev')}
-            className="inline-flex items-center py-1 px-2 rounded-md border border-line bg-surface text-foreground text-xs hover:bg-accent-wash transition duration-base ease-standard transform hover:text-accent"
             aria-label="Previous section"
           >
             <ChevronLeftIcon className="w-4 h-4" />
-          </button>
+          </ToolbarButton>
         </div>
         {currDocPages !== undefined && typeof currDocPage === 'number' && (
           <span className="px-2 tabular-nums">
             {currDocPage} / {currDocPages}
           </span>
         )}
-        <button
+        <ToolbarButton
           type="button"
           onClick={() => handleLocationChanged('next')}
-          className="inline-flex items-center py-1 px-2 rounded-md border border-line bg-surface text-foreground text-xs hover:bg-accent-wash transition duration-base ease-standard transform hover:text-accent"
           aria-label="Next section"
         >
           <ChevronRightIcon className="w-4 h-4" />
-        </button>
+        </ToolbarButton>
       </div>
       {isTocOpen && tocRef.current && tocRef.current.length > 0 && (
         <div className="border-b border-line-soft bg-background text-xs overflow-y-auto max-h-64 p-2">