Add book sorting and reader keyboard shortcuts with favorite indicator

Author: KrapfalAT

frontend/src/views/ReaderView.jsx

@@ -2,12 +2,13 @@ import { useState, useEffect, useCallback, useRef } from 'react'
 import { useParams, useNavigate, useSearchParams } from 'react-router-dom'
 import {
   LuArrowLeft, LuChevronLeft, LuChevronRight, LuDownload,
-  LuFileText, LuColumns2, LuFile, LuSearch, LuList, LuBookmark, LuBookmarkPlus,
+  LuFileText, LuColumns2, LuFile, LuSearch, LuList, LuBookmark, LuBookmarkPlus, LuHeart,
 } from 'react-icons/lu'
 import api, { mediaUrl } from '../api'
 import Spinner from '../components/Spinner'
 import { getBookPrefs, saveBookPrefs, saveRecentBook } from '../hooks/useBookPrefs'
 import { getUserPrefs } from '../hooks/useUserPrefs'
+import { useFavorites } from '../context/FavoritesContext'
 import useReaderGestures from '../hooks/useReaderGestures'
 import TocSidebar from '../components/reader/TocSidebar'
 import SearchSidebar from '../components/reader/SearchSidebar'
@@ -72,6 +73,8 @@ export default function ReaderView() {
   const [zoom, setZoom] = useState(1)
   const [pan, setPan]   = useState({ x: 0, y: 0 })
 
+  const { isFavorite, toggleFavorite } = useFavorites()
+
   const directionRef       = useRef(1)   // 1 = forward, -1 = backward
   const axisRef            = useRef('x') // 'x' | 'y'
   const currentPageRef     = useRef(1)   // always tracks latest page without being a dep
@@ -225,19 +228,25 @@ export default function ReaderView() {
     if (mode === 'spread') goToPage(currentPage, 'spread')
   }, [mode]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Keyboard navigation
+  // Keyboard navigation + shortcuts
   const step = mode === 'spread' ? (currentPage === 1 ? 1 : 2) : 1
   useEffect(() => {
     const handleKeyDown = (e) => {
-      if (mode === 'pdf') return
-      if (e.key === 'ArrowLeft')  { e.preventDefault(); goToPage(currentPage - step, undefined, 'x') }
-      if (e.key === 'ArrowRight') { e.preventDefault(); goToPage(currentPage + step, undefined, 'x') }
-      if (e.key === 'ArrowUp')    { e.preventDefault(); goToPage(currentPage - step, undefined, 'y') }
-      if (e.key === 'ArrowDown')  { e.preventDefault(); goToPage(currentPage + step, undefined, 'y') }
+      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return
+      if (mode !== 'pdf') {
+        if (e.key === 'ArrowLeft')  { e.preventDefault(); goToPage(currentPage - step, undefined, 'x') }
+        if (e.key === 'ArrowRight') { e.preventDefault(); goToPage(currentPage + step, undefined, 'x') }
+        if (e.key === 'ArrowUp')    { e.preventDefault(); goToPage(currentPage - step, undefined, 'y') }
+        if (e.key === 'ArrowDown')  { e.preventDefault(); goToPage(currentPage + step, undefined, 'y') }
+      }
+      if (e.key === 'f') toggleFavorite('book', bookId)
+      if (e.key === 't') togglePanel('toc')
+      if (e.key === 'b') togglePanel('bookmarks')
+      if (e.key === 's') togglePanel('search')
     }
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [mode, currentPage, step, goToPage])
+  }, [mode, currentPage, step, goToPage, bookId, toggleFavorite])
 
   const wheelNav = getUserPrefs().wheelNav !== false
 
@@ -358,6 +367,14 @@ export default function ReaderView() {
 
         <AddToCampaignButton resourceType="book" resourceId={bookId} />
 
+        <button
+          onClick={() => toggleFavorite('book', bookId)}
+          title={isFavorite('book', bookId) ? 'Remove from favorites' : 'Add to favorites'}
+          style={{ ...btnStyle, color: isFavorite('book', bookId) ? 'var(--gold)' : 'var(--text-muted)' }}
+        >
+          <LuHeart size={14} fill={isFavorite('book', bookId) ? 'var(--gold)' : 'none'} />
+        </button>
+
         {/* Add bookmark action — separate from the panel toggle */}
         {mode !== 'pdf' && (
           <button

frontend/src/views/SystemDetailView.jsx

@@ -28,6 +28,7 @@ export default function SystemDetailView() {
   const [collapsedCats, setCollapsedCats] = useState(new Set())
   const [selectedTags, setSelectedTags] = useState(new Set())
   const [showAllTags, setShowAllTags] = useState(false)
+  const [bookSort, setBookSort] = useState('title')
   const [searchQuery, setSearchQuery] = useState('')
   const [searchResults, setSearchResults] = useState(null)
   const [searching, setSearching] = useState(false)
@@ -66,6 +67,15 @@ export default function SystemDetailView() {
     return next
   })
 
+  const sortBooks = (books) => {
+    const sorted = [...books]
+    if (bookSort === 'title')     sorted.sort((a, b) => a.title.localeCompare(b.title))
+    if (bookSort === 'year')      sorted.sort((a, b) => (b.year || 0) - (a.year || 0))
+    if (bookSort === 'size')      sorted.sort((a, b) => (b.file_size || 0) - (a.file_size || 0))
+    if (bookSort === 'pages')     sorted.sort((a, b) => (b.page_count || 0) - (a.page_count || 0))
+    return sorted
+  }
+
   const categories = {}
   ;(system.books || [])
     .filter(book => selectedTags.size === 0 || [...selectedTags].every(t => (book.tags || []).includes(t)))
@@ -221,6 +231,27 @@ export default function SystemDetailView() {
         </div>
       )}
 
+      {/* Sort bar */}
+      {!searchResults && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
+          <span style={{ fontSize: 13, color: 'var(--text-muted)', flexShrink: 0 }}>Sort:</span>
+          {[['title', 'A–Z'], ['year', 'Year'], ['pages', 'Pages'], ['size', 'Size']].map(([val, label]) => (
+            <button
+              key={val}
+              onClick={() => setBookSort(val)}
+              style={{
+                fontSize: 12, padding: '3px 10px', borderRadius: 6, cursor: 'pointer',
+                background: bookSort === val ? 'var(--bg-card-hover)' : 'var(--bg-card)',
+                border: '1px solid var(--border)',
+                color: bookSort === val ? 'var(--gold)' : 'var(--text-dim)',
+              }}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      )}
+
       {/* Search results */}
       {searchResults && (
         <div style={{ marginBottom: 32 }}>
@@ -252,7 +283,7 @@ export default function SystemDetailView() {
       {!searchResults && [...CATEGORY_ORDER, ...Object.keys(categories).filter(c => !CATEGORY_ORDER.includes(c))]
         .filter(cat => categories[cat])
         .map(cat => {
-          const books = categories[cat]
+          const books = sortBooks(categories[cat])
           const CatIcon = CATEGORY_ICONS[cat] || LuFileText
           const isCollapsed = collapsedCats.has(cat)
           const toggle = () => setCollapsedCats(prev => {