From a64a74de9e6e2611abf57c10c4eb528b3f67f2e5 Mon Sep 17 00:00:00 2001
From: purp <rykungaming@gmail.com>
Date: Sun, 9 Feb 2025 18:37:13 -0800
Subject: [PATCH 1/7] fix chapter table checkbox Changes the column checkbox to
 select rows in the current page rather than all rows. This will reduce clicks
 from users when marking large series that aren't fully completed.

---
 .../library/series/chapter-table/ChapterTable.tsx      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx
index 2aa755867..d776397b8 100644
--- a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx
+++ b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx
@@ -99,11 +99,11 @@ export function ChapterTable(props: ChapterTableProps) {
         <div className="flex justify-start">
           <span className="w-5 h-5">
             <Checkbox
-              checked={
-                table.getIsAllRowsSelected() ||
-                (table.getIsSomePageRowsSelected() && 'indeterminate')
-              }
-              onCheckedChange={(value) => table.toggleAllRowsSelected(!!value)}
+              checked={table.getIsAllPageRowsSelected()}
+              onCheckedChange={(value) => {
+                console.log(value)
+                table.toggleAllPageRowsSelected(!!value)
+              }}
             />
           </span>
         </div>

From ba82ab17791d0478fce0f3be0a0916e546426e0a Mon Sep 17 00:00:00 2001
From: purp <rykungaming@gmail.com>
Date: Sun, 9 Feb 2025 23:50:30 -0800
Subject: [PATCH 2/7] add options nested dropdown *Moved marked buttons into
 dropdown, seperating operations for all rows and selected rows *Moved
 Download chapters into dropdown, also seperated for all and selected *Moved
 back the selected buttons back into the main buttons rows using outline
 variant

---
 .../series/chapter-table/ChapterTable.tsx     | 261 +++++++++++++-----
 1 file changed, 193 insertions(+), 68 deletions(-)

diff --git a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx
index d776397b8..20fc0cf98 100644
--- a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx
+++ b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx
@@ -34,11 +34,17 @@ import { Chapter, Languages, Series } from '@tiyo/common';
 import routes from '@/common/constants/routes.json';
 import {
   DropdownMenu,
+  DropdownMenuGroup,
+  DropdownMenuSub,
+  DropdownMenuPortal,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  DropdownMenuItem
 } from '@houdoku/ui/components/DropdownMenu';
 import { Button } from '@houdoku/ui/components/Button';
 import {
@@ -48,6 +54,7 @@ import {
   Download,
   Eye,
   EyeOff,
+  EllipsisVertical,
   FileCheck,
   LanguagesIcon,
   Play,
@@ -100,10 +107,7 @@ export function ChapterTable(props: ChapterTableProps) {
           <span className="w-5 h-5">
             <Checkbox
               checked={table.getIsAllPageRowsSelected()}
-              onCheckedChange={(value) => {
-                console.log(value)
-                table.toggleAllPageRowsSelected(!!value)
-              }}
+              onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
             />
           </span>
         </div>
@@ -269,6 +273,11 @@ export function ChapterTable(props: ChapterTableProps) {
     return table.getSelectedRowModel().rows.map((row) => row.original) as Chapter[];
   };
 
+  const getAllChapters = (): Chapter[] => {
+    console.log(table.getCoreRowModel())
+    return table.getCoreRowModel().rows.map((row) => row.original) as Chapter[];
+  };
+
   const getNextUnreadChapter = () => {
     return sortedFilteredChapterList
       .slice()
@@ -300,6 +309,17 @@ export function ChapterTable(props: ChapterTableProps) {
     );
   };
 
+  const setAllRead = (read: boolean) => {
+    markChapters(
+      getAllChapters(),
+      props.series,
+      read,
+      setChapterList,
+      setSeries,
+      chapterLanguages,
+    );
+  };
+
   const downloadSelected = () => {
     downloaderClient.add(
       getSelectedChapters().map((chapter) => ({
@@ -311,75 +331,180 @@ export function ChapterTable(props: ChapterTableProps) {
     downloaderClient.start();
   };
 
+  const downloadAll = () => {
+    downloaderClient.add(
+      getAllChapters().map((chapter) => ({
+        chapter,
+        series: props.series,
+        downloadsDir: customDownloadsDir || defaultDownloadsDir,
+      })),
+    );
+    downloaderClient.start();
+  };
+
   return (
+    // notes: bring back the selected buttons. it will be annoying to open drop down each time
     <div className="space-y-2 pb-4">
       <div className="flex items-center justify-between">
-        {table.getIsSomeRowsSelected() || table.getIsAllRowsSelected() ? (
-          <div className="flex space-x-2 items-end">
-            <Button className="ml-auto" onClick={() => setSelectedRead(true)}>
-              <Eye className="w-4 h-4" />
-              Mark selected read
-            </Button>
-            <Button className="ml-auto" onClick={() => setSelectedRead(false)}>
-              <EyeOff className="w-4 h-4" />
-              Mark selected unread
-            </Button>
-            {/* TODO add confirmation prompt */}
-            <Button className="ml-auto" onClick={() => downloadSelected()}>
-              <Download className="w-4 h-4" />
-              Download selected
-            </Button>
-          </div>
-        ) : (
-          <>
-            <div className="flex space-x-2">
-              <ChapterTableLanguageFilter />
-              <ChapterTableGroupFilter
-                uniqueGroupNames={Array.from(
-                  new Set(chapterList.map((chapter) => chapter.groupName)),
-                )}
-              />
-            </div>
-            <div className="flex space-x-2">
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="outline" className="ml-auto">
-                    <Settings2 className="w-4 h-4" />
-                    View
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  <DropdownMenuLabel>Columns</DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  {table
-                    .getAllColumns()
-                    .filter((column) => column.getCanHide())
-                    .map((column) => {
-                      return (
-                        <DropdownMenuCheckboxItem
-                          key={column.id}
-                          className="capitalize"
-                          checked={column.getIsVisible()}
-                          onCheckedChange={(value) => column.toggleVisibility(!!value)}
-                          onSelect={(event) => event.preventDefault()}
+        <div className="flex space-x-2">
+          <ChapterTableLanguageFilter />
+          <ChapterTableGroupFilter
+            uniqueGroupNames={Array.from(
+              new Set(chapterList.map((chapter) => chapter.groupName)),
+            )}
+          />
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">
+                <EllipsisVertical className="w-4 h-4" />
+                Options</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-51" align="start">
+              <DropdownMenuGroup>
+                <DropdownMenuLabel>Download Chapters</DropdownMenuLabel>
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>
+                    <div
+                      className="flex items-center w-full"
+                    >
+                      <Download className="w-4 h-4 mr-2" />
+                      Download
+                    </div>
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                    <DropdownMenuSubContent>
+                      <DropdownMenuItem>
+                        <div
+                          onClick={() => downloadAll()}
+                          className="flex items-center w-full"
+                        >
+                          <span>All Chapters</span>
+                        </div>
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem>
+                        <div
+                          onClick={() => downloadSelected()}
+                          className="flex items-center w-full"
+                        >
+                          <span>Selected Chapters</span>
+                        </div>
+                      </DropdownMenuItem>
+                    </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+                </DropdownMenuSub>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuLabel>Mark Chapters</DropdownMenuLabel>
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>All Chapters</DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                    <DropdownMenuSubContent>
+                      <DropdownMenuItem>
+                        <div
+                          onClick={() => setAllRead(true)}
+                          className="flex items-center w-full"
+                        >
+                          <Eye className="w-4 h-4 mr-2" />
+                          <span>Read</span>
+                        </div>
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem>
+                        <div
+                          onClick={() => setAllRead(false)}
+                          className="flex items-center w-full"
+                        >
+                          <EyeOff className="w-4 h-4 mr-2" />
+                          <span>Unread</span>
+                        </div>
+                      </DropdownMenuItem>
+                    </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+                </DropdownMenuSub>
+
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>Selected Chapters</DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                    <DropdownMenuSubContent>
+                      <DropdownMenuItem>
+                        <div
+                          onClick={() => setSelectedRead(true)}
+                          className="flex items-center w-full"
+                        >
+                          <Eye className="w-4 h-4 mr-2" />
+                          <span>Read</span>
+                        </div>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <div
+                          onClick={() => setSelectedRead(false)}
+                          className="flex items-center w-full"
                         >
-                          {column.id}
-                        </DropdownMenuCheckboxItem>
-                      );
-                    })}
-                </DropdownMenuContent>
-              </DropdownMenu>
-              {getNextUnreadChapter() && (
-                <Link to={`${routes.READER}/${props.series.id}/${getNextUnreadChapter()?.id}`}>
-                  <Button variant="outline">
-                    <Play className="w-4 h-4" />
-                    Continue
-                  </Button>
-                </Link>
-              )}
+                          <EyeOff className="w-4 h-4 mr-2" />
+                          <span>Unread</span>
+                        </div>
+                      </DropdownMenuItem>
+                    </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+                </DropdownMenuSub>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          {table.getIsSomeRowsSelected() && (
+            <div className="flex space-x-2 items-end">
+              <Button variant="outline" className="ml-auto" onClick={() => setSelectedRead(true)}>
+                <Eye className="w-4 h-4" />
+                Mark selected read
+              </Button>
+              <Button variant="outline" className="ml-auto" onClick={() => setSelectedRead(false)}>
+                <EyeOff className="w-4 h-4" />
+                Mark selected unread
+              </Button>
             </div>
-          </>
-        )}
+          )}
+        </div>
+
+        <div className="flex space-x-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" className="ml-auto">
+                <Settings2 className="w-4 h-4" />
+                View
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuLabel>Columns</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              {table
+                .getAllColumns()
+                .filter((column) => column.getCanHide())
+                .map((column) => {
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={column.id}
+                      className="capitalize"
+                      checked={column.getIsVisible()}
+                      onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                      onSelect={(event) => event.preventDefault()}
+                    >
+                      {column.id}
+                    </DropdownMenuCheckboxItem>
+                  );
+                })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          {getNextUnreadChapter() && (
+            <Link to={`${routes.READER}/${props.series.id}/${getNextUnreadChapter()?.id}`}>
+              <Button variant="outline">
+                <Play className="w-4 h-4" />
+                Continue
+              </Button>
+            </Link>
+          )}
+        </div>
       </div>
       <div className="rounded-md border">
         <Table>

From 6df9645716f90b39ea6a5e190868e69fd533330f Mon Sep 17 00:00:00 2001
From: purp <rykungaming@gmail.com>
Date: Mon, 10 Feb 2025 00:25:56 -0800
Subject: [PATCH 3/7] added filter dropdown *consolidated group and language
 filters under the filter dropdown

---
 .../series/chapter-table/ChapterTable.tsx     | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx
index 20fc0cf98..733b5512d 100644
--- a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx
+++ b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx
@@ -55,6 +55,7 @@ import {
   Eye,
   EyeOff,
   EllipsisVertical,
+  Filter,
   FileCheck,
   LanguagesIcon,
   Play,
@@ -343,17 +344,30 @@ export function ChapterTable(props: ChapterTableProps) {
   };
 
   return (
-    // notes: bring back the selected buttons. it will be annoying to open drop down each time
     <div className="space-y-2 pb-4">
       <div className="flex items-center justify-between">
         <div className="flex space-x-2">
-          <ChapterTableLanguageFilter />
-          <ChapterTableGroupFilter
-            uniqueGroupNames={Array.from(
-              new Set(chapterList.map((chapter) => chapter.groupName)),
-            )}
-          />
-
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">
+                <Filter className="w-4 h-4" />
+                Filters
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-51 flex flex-col gap-1" align="start">
+              <DropdownMenuItem asChild>
+                <ChapterTableLanguageFilter />
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem asChild className="w-full">
+                <ChapterTableGroupFilter
+                  uniqueGroupNames={Array.from(
+                    new Set(chapterList.map((chapter) => chapter.groupName)),
+                  )}
+                />
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="outline">

From 18917dcbeddbd3fc44b2f29a20b1ef089fbb1c8c Mon Sep 17 00:00:00 2001
From: purp <rykungaming@gmail.com>
Date: Mon, 10 Feb 2025 00:27:05 -0800
Subject: [PATCH 4/7] modify popover filters *Removed filter logo *Swap popover
 trigger style from button to div *Have popover show to the right
 *Conditionally render chevron

---
 .../chapter-table/ChapterTableGroupFilter.tsx     | 15 ++++++++++-----
 .../chapter-table/ChapterTableLanguageFilter.tsx  | 14 +++++++++-----
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableGroupFilter.tsx b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableGroupFilter.tsx
index 78a931013..1edbb110c 100644
--- a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableGroupFilter.tsx
+++ b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableGroupFilter.tsx
@@ -1,4 +1,4 @@
-import { Check, Filter } from 'lucide-react';
+import { Check, ChevronRight } from 'lucide-react';
 
 import { cn } from '@houdoku/ui/util';
 import { Badge } from '@houdoku/ui/components/Badge';
@@ -35,9 +35,14 @@ export function ChapterTableGroupFilter(props: Props) {
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant="outline" onContextMenu={() => setFilterGroupNames([])}>
-          <Filter />
+        <div
+          className="flex items-center justify-between px-2 py-1.5 mr-2 text-sm cursor-pointer relative w-full rounded-md transition-colors focus:outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground active:bg-accent/80"
+          onContextMenu={() => setFilterGroupNames([])}>
           {'Group'}
+
+          {filterGroupNames.length <= 0 && (
+            <ChevronRight className="h-4" />
+          )}
           {filterGroupNames.length > 0 && (
             <>
               <Separator orientation="vertical" className="mx-2 h-4" />
@@ -51,9 +56,9 @@ export function ChapterTableGroupFilter(props: Props) {
               </div>
             </>
           )}
-        </Button>
+        </div>
       </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0" align="start">
+      <PopoverContent className="w-[200px] p-0" align="start" side="right">
         <Command>
           <CommandInput placeholder={'Group'} />
           <CommandList className="-mr-3">
diff --git a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableLanguageFilter.tsx b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableLanguageFilter.tsx
index 9f30fde66..56e1bdf86 100644
--- a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableLanguageFilter.tsx
+++ b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableLanguageFilter.tsx
@@ -1,4 +1,4 @@
-import { Check, Filter } from 'lucide-react';
+import { Check, ChevronRight } from 'lucide-react';
 import { cn } from '@houdoku/ui/util';
 import { Badge } from '@houdoku/ui/components/Badge';
 import { Button } from '@houdoku/ui/components/Button';
@@ -35,9 +35,13 @@ export function ChapterTableLanguageFilter() {
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant="outline" onContextMenu={() => setChapterLanguages([])}>
-          <Filter />
+        <div
+          className="flex items-center justify-between px-2 py-1.5 mr-2 text-sm cursor-pointer relative w-full rounded-md transition-colors focus:outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground active:bg-accent/80"
+          onContextMenu={() => setChapterLanguages([])}>
           {'Language'}
+          {chapterLanguages.length <= 0 && (
+            <ChevronRight className="h-4" />
+          )}
           {chapterLanguages.length > 0 && (
             <>
               <Separator orientation="vertical" className="mx-2 h-4" />
@@ -65,9 +69,9 @@ export function ChapterTableLanguageFilter() {
               </div>
             </>
           )}
-        </Button>
+        </div>
       </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0" align="start">
+      <PopoverContent className="w-[200px] p-0" align="start" side="right">
         <Command>
           <CommandInput placeholder={'Language'} />
           <CommandList className="-mr-3">

From 16ab85d2b6c585702e8c66ea8531f17a4e4c0548 Mon Sep 17 00:00:00 2001
From: purp <rykungaming@gmail.com>
Date: Mon, 10 Feb 2025 01:33:05 -0800
Subject: [PATCH 5/7] added chapter table read filter *Added read filter
 component to filter dropdown *Modified library state to filter read chapters

---
 .../series/chapter-table/ChapterTable.tsx     |  7 ++++-
 .../chapter-table/ChapterTableReadFilter.tsx  | 27 +++++++++++++++++++
 .../src/renderer/state/libraryStates.ts       | 10 +++++--
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableReadFilter.tsx

diff --git a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx
index 733b5512d..95e807946 100644
--- a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx
+++ b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx
@@ -71,6 +71,7 @@ import { TableColumnSortOrder } from '@/common/models/types';
 import { FS_METADATA } from '@/common/temp_fs_metadata';
 import { ContextMenu, ContextMenuTrigger } from '@houdoku/ui/components/ContextMenu';
 import { ChapterTableContextMenu } from './ChapterTableContextMenu';
+import { ChapterTableReadFilter } from './ChapterTableReadFilter';
 import { useEffect } from 'react';
 import { currentTaskState } from '@/renderer/state/downloaderStates';
 
@@ -354,7 +355,7 @@ export function ChapterTable(props: ChapterTableProps) {
                 Filters
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-51 flex flex-col gap-1" align="start">
+            <DropdownMenuContent className="w-51 flex flex-col" align="start">
               <DropdownMenuItem asChild>
                 <ChapterTableLanguageFilter />
               </DropdownMenuItem>
@@ -366,6 +367,10 @@ export function ChapterTable(props: ChapterTableProps) {
                   )}
                 />
               </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <ChapterTableReadFilter />
+              </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
           <DropdownMenu>
diff --git a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableReadFilter.tsx b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableReadFilter.tsx
new file mode 100644
index 000000000..7f6c0c471
--- /dev/null
+++ b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableReadFilter.tsx
@@ -0,0 +1,27 @@
+import { useRecoilState } from 'recoil';
+import { ReadChaptersState } from '@/renderer/state/libraryStates';
+import { Check, Square } from 'lucide-react';
+
+export function ChapterTableReadFilter() {
+  const [hideReadChapters, setHideReadChapters] = useRecoilState(ReadChaptersState);
+
+  const toggleReadChapters = () => {
+    setHideReadChapters(!hideReadChapters);
+  };
+
+  return (
+    <div
+      className="flex items-center space-x-2 cursor-pointer"
+      onClick={toggleReadChapters}
+    >
+      {hideReadChapters ? (
+        <Check className="h-5 w-5 text-blue-500" />
+      ) : (
+        <Square className="h-5 w-5 text-gray-500" />
+      )}
+      <span className="text-sm">
+        Hide Read
+      </span>
+    </div>
+  );
+};
diff --git a/apps/desktop/src/renderer/state/libraryStates.ts b/apps/desktop/src/renderer/state/libraryStates.ts
index f7525e361..d597efada 100644
--- a/apps/desktop/src/renderer/state/libraryStates.ts
+++ b/apps/desktop/src/renderer/state/libraryStates.ts
@@ -95,6 +95,11 @@ export const activeSeriesListState = selector({
   },
 });
 
+export const ReadChaptersState = atom({
+  key: 'ReadChaptersState',
+  default: false,
+});
+
 export const sortedFilteredChapterListState = selector<Chapter[]>({
   key: 'sortedFilteredChapterListState',
   get: ({ get }) => {
@@ -103,8 +108,8 @@ export const sortedFilteredChapterListState = selector<Chapter[]>({
     const chapterFilterGroupNames = get(chapterFilterGroupNamesState);
     const chapterListVolOrder = get(chapterListVolOrderState);
     const chapterListChOrder = get(chapterListChOrderState);
-
     const uniqueChapters = new Map();
+    const toggleReadChapters = get(ReadChaptersState);
 
     if (chapterLanguages.length > 0) {
       chapterLanguages.forEach((lang) => {
@@ -129,8 +134,9 @@ export const sortedFilteredChapterListState = selector<Chapter[]>({
           (uniqueChapters.has(chapter.chapterNumber) &&
             uniqueChapters.get(chapter.chapterNumber) === chapter) ||
           chapterLanguages.length === 0;
+        const readChapters = !toggleReadChapters || !chapter.read;
 
-        return matchesLanguage && matchesGroup && unique;
+        return matchesLanguage && matchesGroup && unique && readChapters;
       })
       .sort((a, b) => {
         const volumeComp = {

From c40f09324730128c2a097c081c30abd060ef7142 Mon Sep 17 00:00:00 2001
From: purp <rykungaming@gmail.com>
Date: Tue, 18 Feb 2025 01:10:00 -0800
Subject: [PATCH 6/7] add filters badge indicator *filters badge indicator that
 will also clear filters *change hide read filter to use actual checkbox
 *clean up

---
 .../series/chapter-table/ChapterTable.tsx     | 67 ++++++++++++-------
 .../chapter-table/ChapterTableGroupFilter.tsx |  2 -
 .../ChapterTableLanguageFilter.tsx            |  1 -
 .../chapter-table/ChapterTableReadFilter.tsx  | 33 ++++-----
 .../src/renderer/state/libraryStates.ts       |  6 +-
 5 files changed, 64 insertions(+), 45 deletions(-)

diff --git a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx
index 95e807946..98cf0fb32 100644
--- a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx
+++ b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx
@@ -18,6 +18,7 @@ import {
 import { ChapterTablePagination } from './ChapterTablePagination';
 import {
   chapterDownloadStatusesState,
+  chapterFilterGroupNamesState,
   chapterListState,
   seriesState,
   sortedFilteredChapterListState,
@@ -60,13 +61,16 @@ import {
   LanguagesIcon,
   Play,
   Settings2,
+  X,
 } from 'lucide-react';
 import { ChapterTableLanguageFilter } from './ChapterTableLanguageFilter';
 import { ChapterTableGroupFilter } from './ChapterTableGroupFilter';
 import { markChapters } from '@/renderer/features/library/utils';
 import { downloaderClient } from '@/renderer/services/downloader';
 import ipcChannels from '@/common/constants/ipcChannels.json';
+import { Badge } from '@houdoku/ui/components/Badge';
 import { Checkbox } from '@houdoku/ui/components/Checkbox';
+import { Separator } from '@houdoku/ui/components/Separator';
 import { TableColumnSortOrder } from '@/common/models/types';
 import { FS_METADATA } from '@/common/temp_fs_metadata';
 import { ContextMenu, ContextMenuTrigger } from '@houdoku/ui/components/ContextMenu';
@@ -92,7 +96,8 @@ export function ChapterTable(props: ChapterTableProps) {
   const setSeries = useSetRecoilState(seriesState);
   const [chapterList, setChapterList] = useRecoilState(chapterListState);
   const sortedFilteredChapterList = useRecoilValue(sortedFilteredChapterListState);
-  const chapterLanguages = useRecoilValue(chapterLanguagesState);
+  const [filterGroupNames, setFilterGroupNames] = useRecoilState(chapterFilterGroupNamesState);
+  const [chapterLanguages, setChapterLanguages] = useRecoilState(chapterLanguagesState);
   const [chapterListVolOrder, setChapterListVolOrder] = useRecoilState(chapterListVolOrderState);
   const [chapterListChOrder, setChapterListChOrder] = useRecoilState(chapterListChOrderState);
   const [chapterDownloadStatuses, setChapterDownloadStatuses] = useRecoilState(
@@ -276,7 +281,6 @@ export function ChapterTable(props: ChapterTableProps) {
   };
 
   const getAllChapters = (): Chapter[] => {
-    console.log(table.getCoreRowModel())
     return table.getCoreRowModel().rows.map((row) => row.original) as Chapter[];
   };
 
@@ -349,13 +353,44 @@ export function ChapterTable(props: ChapterTableProps) {
       <div className="flex items-center justify-between">
         <div className="flex space-x-2">
           <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline">
-                <Filter className="w-4 h-4" />
-                Filters
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-51 flex flex-col" align="start">
+            <Button variant="outline" className="flex items-center">
+              <DropdownMenuTrigger asChild>
+                <div className="flex flex-row items-center">
+                  <Filter className="w-4 h-4 mr-2" />
+                  Filters
+                </div>
+              </DropdownMenuTrigger>
+              {(chapterLanguages.length > 0 || filterGroupNames.length > 0) && (
+                <Separator orientation="vertical" className="mx-2 h-4" />
+              )}
+              <div className="flex flex-row flex-wrap gap-1">
+                {chapterLanguages.length > 0 && (
+                  <Badge
+                    variant="default"
+                    className="rounded-sm px-2 py-0.5 font-normal flex items-center"
+                    onClick={() => {
+                      setChapterLanguages([]);
+                    }}
+                  >
+                    <X className="w-3 h-3 mr-1 text-red-500" />
+                    Languages
+                  </Badge>
+                )}
+                {filterGroupNames.length > 0 && (
+                  <Badge
+                    variant="default"
+                    className="rounded-sm px-2 py-0.5 font-normal flex items-center"
+                    onClick={() => {
+                      setFilterGroupNames([]);
+                    }}
+                  >
+                    <X className="w-3 h-3 mr-1 text-red-500" />
+                    Groups
+                  </Badge>
+                )}
+              </div>
+            </Button>
+            <DropdownMenuContent className="w-51 flex flex-col" align="start" alignOffset={-17} sideOffset={12}>
               <DropdownMenuItem asChild>
                 <ChapterTableLanguageFilter />
               </DropdownMenuItem>
@@ -401,7 +436,6 @@ export function ChapterTable(props: ChapterTableProps) {
                           <span>All Chapters</span>
                         </div>
                       </DropdownMenuItem>
-                      <DropdownMenuSeparator />
                       <DropdownMenuItem>
                         <div
                           onClick={() => downloadSelected()}
@@ -430,7 +464,6 @@ export function ChapterTable(props: ChapterTableProps) {
                           <span>Read</span>
                         </div>
                       </DropdownMenuItem>
-                      <DropdownMenuSeparator />
                       <DropdownMenuItem>
                         <div
                           onClick={() => setAllRead(false)}
@@ -472,18 +505,6 @@ export function ChapterTable(props: ChapterTableProps) {
               </DropdownMenuGroup>
             </DropdownMenuContent>
           </DropdownMenu>
-          {table.getIsSomeRowsSelected() && (
-            <div className="flex space-x-2 items-end">
-              <Button variant="outline" className="ml-auto" onClick={() => setSelectedRead(true)}>
-                <Eye className="w-4 h-4" />
-                Mark selected read
-              </Button>
-              <Button variant="outline" className="ml-auto" onClick={() => setSelectedRead(false)}>
-                <EyeOff className="w-4 h-4" />
-                Mark selected unread
-              </Button>
-            </div>
-          )}
         </div>
 
         <div className="flex space-x-2">
diff --git a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableGroupFilter.tsx b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableGroupFilter.tsx
index 1edbb110c..c635b7c04 100644
--- a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableGroupFilter.tsx
+++ b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableGroupFilter.tsx
@@ -1,8 +1,6 @@
 import { Check, ChevronRight } from 'lucide-react';
-
 import { cn } from '@houdoku/ui/util';
 import { Badge } from '@houdoku/ui/components/Badge';
-import { Button } from '@houdoku/ui/components/Button';
 import {
   Command,
   CommandEmpty,
diff --git a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableLanguageFilter.tsx b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableLanguageFilter.tsx
index 56e1bdf86..0e3d62eb1 100644
--- a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableLanguageFilter.tsx
+++ b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableLanguageFilter.tsx
@@ -1,7 +1,6 @@
 import { Check, ChevronRight } from 'lucide-react';
 import { cn } from '@houdoku/ui/util';
 import { Badge } from '@houdoku/ui/components/Badge';
-import { Button } from '@houdoku/ui/components/Button';
 import {
   Command,
   CommandEmpty,
diff --git a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableReadFilter.tsx b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableReadFilter.tsx
index 7f6c0c471..f0c16fc24 100644
--- a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableReadFilter.tsx
+++ b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTableReadFilter.tsx
@@ -1,27 +1,28 @@
 import { useRecoilState } from 'recoil';
-import { ReadChaptersState } from '@/renderer/state/libraryStates';
-import { Check, Square } from 'lucide-react';
-
+import { hideUnreadChaptersState } from '@/renderer/state/libraryStates';
+import { Checkbox } from '@houdoku/ui/components/Checkbox';
+import { Label } from '@houdoku/ui/components/Label';
 export function ChapterTableReadFilter() {
-  const [hideReadChapters, setHideReadChapters] = useRecoilState(ReadChaptersState);
+  const [hideReadChapters, setHideReadChapters] = useRecoilState(hideUnreadChaptersState);
 
   const toggleReadChapters = () => {
     setHideReadChapters(!hideReadChapters);
   };
 
   return (
-    <div
-      className="flex items-center space-x-2 cursor-pointer"
-      onClick={toggleReadChapters}
-    >
-      {hideReadChapters ? (
-        <Check className="h-5 w-5 text-blue-500" />
-      ) : (
-        <Square className="h-5 w-5 text-gray-500" />
-      )}
-      <span className="text-sm">
-        Hide Read
-      </span>
+    <div className="flex items-center space-x-2" onClick={(e) => e.stopPropagation()}>
+      <Checkbox
+        id="hide-read"
+        checked={hideReadChapters}
+        onCheckedChange={toggleReadChapters}
+      />
+      <Label
+        htmlFor="hide-read"
+        className="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        Hide read
+      </Label>
     </div>
+
   );
 };
diff --git a/apps/desktop/src/renderer/state/libraryStates.ts b/apps/desktop/src/renderer/state/libraryStates.ts
index d597efada..354d20210 100644
--- a/apps/desktop/src/renderer/state/libraryStates.ts
+++ b/apps/desktop/src/renderer/state/libraryStates.ts
@@ -95,8 +95,8 @@ export const activeSeriesListState = selector({
   },
 });
 
-export const ReadChaptersState = atom({
-  key: 'ReadChaptersState',
+export const hideUnreadChaptersState = atom({
+  key: 'hideUnreadChaptersState',
   default: false,
 });
 
@@ -109,7 +109,7 @@ export const sortedFilteredChapterListState = selector<Chapter[]>({
     const chapterListVolOrder = get(chapterListVolOrderState);
     const chapterListChOrder = get(chapterListChOrderState);
     const uniqueChapters = new Map();
-    const toggleReadChapters = get(ReadChaptersState);
+    const toggleReadChapters = get(hideUnreadChaptersState);
 
     if (chapterLanguages.length > 0) {
       chapterLanguages.forEach((lang) => {

From 88dc4644065619a858d7b41e138647398aac3ec0 Mon Sep 17 00:00:00 2001
From: purp <rykungaming@gmail.com>
Date: Tue, 18 Feb 2025 01:49:54 -0800
Subject: [PATCH 7/7] add scroll to chapter table body *removed overflow class
 in table div, it prevented sticky table headers

---
 .../library/series/chapter-table/ChapterTable.tsx          | 7 ++++---
 packages/ui/src/components/Table.tsx                       | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx
index 98cf0fb32..b01c23d19 100644
--- a/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx
+++ b/apps/desktop/src/renderer/components/library/series/chapter-table/ChapterTable.tsx
@@ -48,6 +48,7 @@ import {
   DropdownMenuItem
 } from '@houdoku/ui/components/DropdownMenu';
 import { Button } from '@houdoku/ui/components/Button';
+import { ScrollArea } from '@houdoku/ui/components/ScrollArea';
 import {
   ArrowDown,
   ArrowUp,
@@ -353,7 +354,7 @@ export function ChapterTable(props: ChapterTableProps) {
       <div className="flex items-center justify-between">
         <div className="flex space-x-2">
           <DropdownMenu>
-            <Button variant="outline" className="flex items-center">
+            <Button variant="outline">
               <DropdownMenuTrigger asChild>
                 <div className="flex flex-row items-center">
                   <Filter className="w-4 h-4 mr-2" />
@@ -546,9 +547,9 @@ export function ChapterTable(props: ChapterTableProps) {
           )}
         </div>
       </div>
-      <div className="rounded-md border">
+      <div className="rounded-md border portrait:max-h-[65vh] landscape:max-h-[50vh] overflow-y-auto">
         <Table>
-          <TableHeader>
+          <TableHeader className="sticky top-0 bg-secondary">
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
diff --git a/packages/ui/src/components/Table.tsx b/packages/ui/src/components/Table.tsx
index 30908eb82..79e1f53d3 100644
--- a/packages/ui/src/components/Table.tsx
+++ b/packages/ui/src/components/Table.tsx
@@ -4,7 +4,7 @@ import { cn } from '@houdoku/ui/util';
 
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto">
+    <div className="relative w-full">
       <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
     </div>
   ),