diff --git a/apps/readest-app/src/app/layout.tsx b/apps/readest-app/src/app/layout.tsx index 33ca8cb4..f1ed41bc 100644 --- a/apps/readest-app/src/app/layout.tsx +++ b/apps/readest-app/src/app/layout.tsx @@ -1,17 +1,19 @@ +'use client'; + import * as React from 'react'; -import type { Metadata } from 'next'; +import { usePathname } from 'next/navigation'; import { AuthProvider } from '@/context/AuthContext'; import { EnvProvider } from '@/context/EnvContext'; import { CSPostHogProvider } from '@/context/PHContext'; import '../styles/globals.css'; import '../styles/fonts.css'; -export const metadata: Metadata = { - title: 'Readest', - description: 'read to learn', -}; - export default function RootLayout({ children }: { children: React.ReactNode }) { + const pathname = usePathname(); + React.useEffect(() => { + document.documentElement.setAttribute('data-page', pathname.replace('/', '') || 'default'); + }, [pathname]); + return ( diff --git a/apps/readest-app/src/app/library/components/Bookshelf.tsx b/apps/readest-app/src/app/library/components/Bookshelf.tsx index ed09fc1d..ca33a2ef 100644 --- a/apps/readest-app/src/app/library/components/Bookshelf.tsx +++ b/apps/readest-app/src/app/library/components/Bookshelf.tsx @@ -10,6 +10,7 @@ import { Book, BooksGroup } from '@/types/book'; import Alert from '@/components/Alert'; import { useReaderStore } from '@/store/readerStore'; import { useEnv } from '@/context/EnvContext'; +import clsx from 'clsx'; type BookshelfItem = Book | BooksGroup; @@ -96,24 +97,35 @@ const Bookshelf: React.FC = ({ libraryBooks, isSelectMode, onImp
{bookshelfItems.map((item, index) => ( -
+
{'format' in item ? (
handleBookClick(item.hash)} > -
+
{(item { + (e.target as HTMLImageElement).style.display = 'none'; + (e.target as HTMLImageElement).nextElementSibling?.classList.remove( + 'invisible', + ); + }} /> +
+ {item.title} +
{(selectedBooks.includes(item.hash) || clickedImage === item.hash) && (
)} diff --git a/apps/readest-app/src/app/library/components/LibraryHeader.tsx b/apps/readest-app/src/app/library/components/LibraryHeader.tsx index fbc14d36..ed5d7441 100644 --- a/apps/readest-app/src/app/library/components/LibraryHeader.tsx +++ b/apps/readest-app/src/app/library/components/LibraryHeader.tsx @@ -52,7 +52,7 @@ const LibraryHeader: React.FC = ({
@@ -64,9 +64,11 @@ const LibraryHeader: React.FC = ({
diff --git a/apps/readest-app/src/app/library/page.tsx b/apps/readest-app/src/app/library/page.tsx index cfd72cb4..1aa326d8 100644 --- a/apps/readest-app/src/app/library/page.tsx +++ b/apps/readest-app/src/app/library/page.tsx @@ -77,22 +77,26 @@ const LibraryPage = () => { } return ( -
- -
- {loading || libraryBooks.length > 0 ? ( -
- - -
+
+
+ +
+ {loading && ( +
+ +
+ )} +
+ {libraryBooks.length > 0 ? ( + ) : (
diff --git a/apps/readest-app/src/app/reader/page.tsx b/apps/readest-app/src/app/reader/page.tsx index 1a32c8d0..d77d49b9 100644 --- a/apps/readest-app/src/app/reader/page.tsx +++ b/apps/readest-app/src/app/reader/page.tsx @@ -30,7 +30,7 @@ const ReaderPage = () => { return ( library.length > 0 && settings.globalReadSettings && ( -
+
diff --git a/apps/readest-app/src/styles/globals.css b/apps/readest-app/src/styles/globals.css index 82109af6..10b47e52 100644 --- a/apps/readest-app/src/styles/globals.css +++ b/apps/readest-app/src/styles/globals.css @@ -5,17 +5,32 @@ :root { --background: #ffffff; --foreground: #171717; - border-radius: 10px; } @media (prefers-color-scheme: dark) { :root { --background: #0a0a0a; --foreground: #ededed; - border-radius: 10px; } } +:root { + background: var(--background); + border-radius: 10px; +} + +html[data-page="default"] { + background: #ffffff; +} + +html[data-page="library"] { + background: #f3f4f6; +} + +html[data-page="reader"] { + background: #f3f4f6; +} + body { color: var(--foreground); background: var(--background); @@ -30,6 +45,14 @@ body { } } +library-page { + --background: #f3f4f6; +} + +reader-page { + --background: #ffffff; +} + foliate-view { display: block; width: 100%;