feat: add previous/next navigation buttons on mobile detail view

1 files changed, 36 insertions, 9 deletions

diff --git a/apps/web/app/reader/_components/reader-shell.tsx b/apps/web/app/reader/_components/reader-shell.tsx
index d063e8c..78ce8e3 100644
--- a/apps/web/app/reader/_components/reader-shell.tsx
+++ b/apps/web/app/reader/_components/reader-shell.tsx
@@ -52,6 +52,9 @@ export function ReaderShell({
   const toggleShortcutsDialog = useUserInterfaceStore(
     (state) => state.toggleShortcutsDialog
   )
+  const navigableEntryIdentifiers = useUserInterfaceStore(
+    (state) => state.navigableEntryIdentifiers
+  )
   const toolbarPosition = useUserInterfaceStore(
     (state) => state.toolbarPosition
   )
@@ -188,15 +191,39 @@ export function ReaderShell({
       "flex items-center justify-between border-border px-4 py-3",
       toolbarPosition === "top" ? "border-b" : "border-t"
     )}>
-      {isMobile && selectedEntryIdentifier ? (
-        <button
-          type="button"
-          onClick={() => setSelectedEntryIdentifier(null)}
-          className="text-text-secondary transition-colors hover:text-text-primary"
-        >
-          &larr; back
-        </button>
-      ) : isRenamingTitle ? (
+      {isMobile && selectedEntryIdentifier ? (() => {
+        const currentIndex = navigableEntryIdentifiers.indexOf(selectedEntryIdentifier)
+        const previousEntryIdentifier = currentIndex > 0 ? navigableEntryIdentifiers[currentIndex - 1] : null
+        const nextEntryIdentifier = currentIndex < navigableEntryIdentifiers.length - 1 ? navigableEntryIdentifiers[currentIndex + 1] : null
+
+        return (
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={() => setSelectedEntryIdentifier(null)}
+              className="text-text-secondary transition-colors hover:text-text-primary"
+            >
+              &larr; back
+            </button>
+            <button
+              type="button"
+              onClick={() => previousEntryIdentifier && setSelectedEntryIdentifier(previousEntryIdentifier)}
+              disabled={!previousEntryIdentifier}
+              className="text-text-secondary transition-colors hover:text-text-primary disabled:opacity-30"
+            >
+              &uarr; previous
+            </button>
+            <button
+              type="button"
+              onClick={() => nextEntryIdentifier && setSelectedEntryIdentifier(nextEntryIdentifier)}
+              disabled={!nextEntryIdentifier}
+              className="text-text-secondary transition-colors hover:text-text-primary disabled:opacity-30"
+            >
+              &darr; next
+            </button>
+          </div>
+        )
+      })() : isRenamingTitle ? (
         <div className="flex items-center gap-2">
           <input
             type="text"