From 66cecce5e601c688352ecb8374fb25da35b13f46 Mon Sep 17 00:00:00 2001
From: Roland <roland@learningselfreliance.com>
Date: Tue, 14 Apr 2026 15:32:06 -0600
Subject: [PATCH] Adding Doc filter button so users can search just
 PDFs/EPUB/etc.

---
 app/src/api.js               |  5 ++++-
 app/src/components/Docs.js   |  8 +++++---
 app/src/components/Files.js  | 11 +++++++++++
 app/src/hooks/customHooks.js | 14 ++++++++++++--
 4 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/app/src/api.js b/app/src/api.js
index b4772a40..b25dfc24 100644
--- a/app/src/api.js
+++ b/app/src/api.js
@@ -2239,7 +2239,7 @@ export async function deleteDocs(docIds) {
     return await apiDelete(`${DOCS_API}/${ids}`);
 }
 
-export async function searchDocs(offset, limit, searchStr, order, tagNames, author, subject) {
+export async function searchDocs(offset, limit, searchStr, order, tagNames, author, subject, mimetype) {
     offset = parseInt(offset || 0);
     limit = parseInt(limit || DEFAULT_LIMIT);
     let body = {offset, limit};
@@ -2258,6 +2258,9 @@ export async function searchDocs(offset, limit, searchStr, order, tagNames, auth
     if (subject) {
         body['subject'] = subject;
     }
+    if (mimetype) {
+        body['mimetype'] = mimetype;
+    }
 
     console.debug('searching docs', body);
     const response = await apiPost(`${DOCS_API}/search`, body);
diff --git a/app/src/components/Docs.js b/app/src/components/Docs.js
index 021ad121..4e7a309a 100644
--- a/app/src/components/Docs.js
+++ b/app/src/components/Docs.js
@@ -21,7 +21,7 @@ import {
 } from "./Common";
 import {Button, darkTheme, Header, Icon, Segment, Statistic, Tab} from "./Theme";
 import {BulkTagModal} from "./BulkTagModal";
-import {FilesView} from "./Files";
+import {DocSearchFilterButton, FilesView} from "./Files";
 import {useAuthors, useDoc, useOneQuery, useSearchDocs, useSubjects} from "../hooks/customHooks";
 import {TagsSelector} from "../Tags";
 import {toast} from "react-semantic-toasts-2";
@@ -140,7 +140,8 @@ function DocsPage() {
                     <Grid.Column width={2}>{viewButton}</Grid.Column>
                     <Grid.Column width={4}>{limitDropdown}</Grid.Column>
                     <Grid.Column width={2}>{tagQuerySelector}</Grid.Column>
-                    <Grid.Column width={8}><SortButton sorts={docOrders}/></Grid.Column>
+                    <Grid.Column width={2}><DocSearchFilterButton/></Grid.Column>
+                    <Grid.Column width={6}><SortButton sorts={docOrders}/></Grid.Column>
                 </Grid.Row>
                 <Grid.Row width={16}>
                     <Grid.Column>{searchInput}</Grid.Column>
@@ -153,8 +154,9 @@ function DocsPage() {
                     <Grid.Column width={1}>{viewButton}</Grid.Column>
                     <Grid.Column width={2}>{limitDropdown}</Grid.Column>
                     <Grid.Column width={1}>{tagQuerySelector}</Grid.Column>
+                    <Grid.Column width={1}><DocSearchFilterButton/></Grid.Column>
                     <Grid.Column width={3}><SortButton sorts={docOrders}/></Grid.Column>
-                    <Grid.Column width={9}>{searchInput}</Grid.Column>
+                    <Grid.Column width={8}>{searchInput}</Grid.Column>
                 </Grid.Row>
             </Grid>
         </Media>
diff --git a/app/src/components/Files.js b/app/src/components/Files.js
index ad83f959..dcb02692 100644
--- a/app/src/components/Files.js
+++ b/app/src/components/Files.js
@@ -520,6 +520,17 @@ export function FileSearchFilterButton({size = 'medium'}) {
     return <SearchFilter filters={filterOptions} size={size}/>
 }
 
+export function DocSearchFilterButton({size = 'medium'}) {
+    const filterOptions = [
+        {key: 'pdf', text: 'PDF', value: 'pdf'},
+        {key: 'epub', text: 'EPUB', value: 'epub'},
+        {key: 'comic', text: 'Comic', value: 'comic'},
+        {key: 'mobi', text: 'MOBI', value: 'mobi'},
+    ];
+
+    return <SearchFilter filters={filterOptions} size={size}/>
+}
+
 export function FilesSearchView({
                                     showView = true,
                                     emptySearch = false,
diff --git a/app/src/hooks/customHooks.js b/app/src/hooks/customHooks.js
index 07cd1468..4188740c 100644
--- a/app/src/hooks/customHooks.js
+++ b/app/src/hooks/customHooks.js
@@ -536,6 +536,14 @@ export const useSearchArchives = (defaultLimit) => {
     }
 }
 
+const docFilterToMimetype = (filter) => {
+    if (filter === 'pdf') return 'application/pdf';
+    if (filter === 'epub') return 'application/epub';
+    if (filter === 'comic') return 'application/x-cb';
+    if (filter === 'mobi') return 'application/x-mobipocket-ebook';
+    return null;
+}
+
 export const useSearchDocs = (defaultLimit) => {
     const {offset, limit, setLimit, activePage, setPage} = usePages(defaultLimit);
     const {searchParams, updateQuery} = React.useContext(QueryContext);
@@ -544,6 +552,7 @@ export const useSearchDocs = (defaultLimit) => {
     const activeTags = searchParams.getAll('tag');
     const author = searchParams.get('author') || '';
     const subject = searchParams.get('subject') || '';
+    const filter = searchParams.get('filter') || '';
 
     const [docs, setDocs] = useState(null);
     const [totalPages, setTotalPages] = useState(0);
@@ -552,7 +561,8 @@ export const useSearchDocs = (defaultLimit) => {
         setDocs(null);
         setTotalPages(0);
         try {
-            let [docs_, total] = await searchDocs(offset, limit, searchStr, order, activeTags, author, subject);
+            const mimetype = docFilterToMimetype(filter);
+            let [docs_, total] = await searchDocs(offset, limit, searchStr, order, activeTags, author, subject, mimetype);
             setDocs(docs_);
             setTotalPages(calculateTotalPages(total, limit));
         } catch (e) {
@@ -563,7 +573,7 @@ export const useSearchDocs = (defaultLimit) => {
 
     useEffect(() => {
         localSearchDocs();
-    }, [searchStr, limit, order, offset, JSON.stringify(activeTags), author, subject]);
+    }, [searchStr, limit, order, offset, JSON.stringify(activeTags), author, subject, filter]);
 
     const setSearchStr = (value) => {
         updateQuery({q: value, o: 0, order: undefined});