Bugfix/styling fixes

index.html

@@ -19,7 +19,7 @@
         "@type": "WebSite",
         "url": "https://bookracy.org/",
         "name": "Bookracy",
-        "description": "Why Pay for Knowledge? Why Pay for Books? Why Pay for Education? Welcome to Bookracy, where our motto is that knowledge and education should be free! We have the largest database of over 2,000 books, articles, publications, and more from many sources, all compiled into one place. Go ahead and search for novels, books, magazines, and even news publications—we've got it all! Because education should be a right, not something to exploit. Furthermore, we are a public library and archive similar to archive.org. You can download books and read them or use our onsite reader without paying or 'borrowing' the item. We hold no license or distribution rights, and all publications are from their original owners under the Creative Commons License. However, by using our site, you grant us permission to use your content without the need for a license and without consent. We are not affiliated with any of the publishers, nor do we support piracy or the usage of pirated materials. We ask that you upload your content to us in good faith and only if you are able to do so. Our content will not be removed and will remain in our database indefinitely. Please upload and share your content as we hope to spread the knowledge of education to the masses without having to search and use multiple untrustworthy sites.",
+        "description": "Why Pay for Knowledge? Why Pay for Books? Why Pay for Education? Welcome to Bookracy, where our motto is that knowledge and education should be free! We have the largest database of over 2,000,000 books, articles, publications, and more from many sources, all compiled into one place. Go ahead and search for novels, books, magazines, and even news publications—we've got it all! Because education should be a right, not something to exploit. Furthermore, we are a public library and archive similar to archive.org. You can download books and read them or use our onsite reader without paying or 'borrowing' the item. We hold no license or distribution rights, and all publications are from their original owners under the Creative Commons License. However, by using our site, you grant us permission to use your content without the need for a license and without consent. We are not affiliated with any of the publishers, nor do we support piracy or the usage of pirated materials. We ask that you upload your content to us in good faith and only if you are able to do so. Our content will not be removed and will remain in our database indefinitely. Please upload and share your content as we hope to spread the knowledge of education to the masses without having to search and use multiple untrustworthy sites.",
         "publisher": {
           "@type": "Organization",
           "name": "Bookracy",
@@ -84,7 +84,7 @@
     </script>
 
     <!-- General Meta Tags -->
-    <meta name="description" content="Bookracy: Free access to over 2,000 books, articles, and publications. Download or read online without paying. Knowledge and education should be free!" />
+    <meta name="description" content="Bookracy: Free access to over 2,000,000 books, articles, and publications. Download or read online without paying. Knowledge and education should be free!" />
     <meta
       name="keywords"
       content="Bookracy, free books, free education, online library, ebooks, digital library, free knowledge, public archive, free publications, free articles, free magazines, free novels, educational resources, open access, digital reading, online reading, free learning, academic resources, research materials, literature, textbooks, educational equality, knowledge sharing, free downloads"
@@ -94,14 +94,17 @@
     <meta name="language" content="English" />
 
     <meta property="og:title" content="Bookracy - Why Pay for Knowledge?" />
-    <meta property="og:description" content="Access over 2,000 free books, articles, and publications. Download or read online without paying. Bookracy: Where knowledge and education are free!" />
+    <meta property="og:description" content="Access over 2,000,000 free books, articles, and publications. Download or read online without paying. Bookracy: Where knowledge and education are free!" />
     <meta property="og:image" content="https://bookracy.org/src/assets/logo.svg" />
     <meta property="og:url" content="https://bookracy.com" />
     <meta property="og:type" content="website" />
 
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="Bookracy - Free Knowledge and Education for All" />
-    <meta name="twitter:description" content="Access over 2,000 free books, articles, and publications. Download or read online without paying. Bookracy: Where knowledge and education are free!" />
+    <meta
+      name="twitter:description"
+      content="Access over 2,000,000 free books, articles, and publications. Download or read online without paying. Bookracy: Where knowledge and education are free!"
+    />
     <meta name="twitter:image" content="https://bookracy.org/src/assets/logo.svg" />
 
     <meta name="theme-color" content="#252525" />
@@ -126,7 +129,7 @@
     <meta property="og:site_name" content="Bookracy" />
     <meta
       property="og:description"
-      content="Bookracy offers free access to over 2,000 books, articles, and publications. Download or read online without paying. We believe knowledge and education should be free and accessible to everyone. Search for novels, books, magazines, and news publications—we've got it all!"
+      content="Bookracy offers free access to over 2,000,000 books, articles, and publications. Download or read online without paying. We believe knowledge and education should be free and accessible to everyone. Search for novels, books, magazines, and news publications—we've got it all!"
     />
     <meta property="og:email" content="contact@bookracy.org" />
 

src/components/books/book-item.tsx

@@ -9,10 +9,12 @@ import { Skeleton } from "../ui/skeleton";
 import { BookOpen, DownloadIcon } from "lucide-react";
 import { EpubReader } from "./epub-reader";
 import { BookmarkButton } from "./bookmark";
+import { useIsMobile } from "@/hooks/use-ismobile";
 
 type BookItemProps = BookItemResponse;
 
 export function BookItem(props: BookItemProps) {
+  const { isMobile } = useIsMobile();
   const [isReaderOpen, setIsReaderOpen] = useState(false);
 
   const isEpub = Boolean(props.link?.toLowerCase().endsWith(".epub"));
@@ -48,12 +50,12 @@ export function BookItem(props: BookItemProps) {
             <div className="mt-4 flex flex-wrap gap-5">
               <Button disabled={!props.link} onClick={() => saveAs(props.link)} className="flex items-center gap-2">
                 <DownloadIcon className="text-lg" />
-                Download ({props.book_size})
+                {!isMobile && "Download"}({props.book_size})
               </Button>
               {isEpub && (
                 <Button onClick={() => setIsReaderOpen(true)} className="flex items-center gap-2">
                   <BookOpen className="text-lg" />
-                  Read Online
+                  Open
                 </Button>
               )}
             </div>

src/components/books/book-list.tsx

@@ -0,0 +1,17 @@
+import { BookItemResponse } from "@/api/backend/types";
+import { BookItem } from "./book-item";
+
+interface BookListProps {
+  books: BookItemResponse[];
+  className?: string;
+}
+
+export function BookList({ books, className = "flex flex-col gap-4 md:grid md:grid-cols-2" }: BookListProps) {
+  return (
+    <div className={className}>
+      {books.map((book) => (
+        <BookItem key={book.md5} {...book} />
+      ))}
+    </div>
+  );
+}

src/components/layout/menu.tsx

@@ -11,9 +11,10 @@ import { CollapseMenuButton } from "./collapse-menu-button";
 
 interface MenuProps {
   isOpen: boolean | undefined;
+  closeSheetMenu?: () => void;
 }
 
-export function Menu({ isOpen }: MenuProps) {
+export function Menu({ isOpen, closeSheetMenu }: MenuProps) {
   const { menuList } = useLayout();
 
   return (
@@ -44,7 +45,7 @@ export function Menu({ isOpen }: MenuProps) {
                     <TooltipProvider>
                       <Tooltip delayDuration={100}>
                         <TooltipTrigger asChild>
-                          <Link to={href} disabled={disabled}>
+                          <Link to={href} disabled={disabled} onClick={() => closeSheetMenu?.()}>
                             <Button variant={active ? "secondary" : "ghost"} className="!pointer-events-auto mb-1 h-10 w-full justify-start" disabled={disabled}>
                               <span
                                 className={cn({

src/components/layout/sheet-menu.tsx

@@ -7,26 +7,28 @@ import { Menu } from "./menu";
 import LogoHeader from "@/assets/logo_header.svg";
 import LogoHeaderDark from "@/assets/logo_header_dark.svg";
 import { useSettingsStore } from "@/stores/settings";
+import { useState } from "react";
 
 export function SheetMenu() {
+  const [isOpen, setIsOpen] = useState(false);
   const theme = useSettingsStore((state) => state.theme);
 
   return (
-    <Sheet>
+    <Sheet open={isOpen} onOpenChange={setIsOpen}>
       <SheetTrigger className="lg:hidden" asChild>
         <Button className="h-8" variant="outline" size="icon">
           <MenuIcon size={20} />
         </Button>
       </SheetTrigger>
       <SheetContent className="flex h-full flex-col px-3 sm:w-72" side="left">
         <SheetHeader>
-          <Button className="flex items-center justify-center pb-2 pt-1" variant="link" asChild>
-            <Link to="/" className="flex items-center gap-2" search={{ q: "" }}>
+          <Button className="mt-3 flex items-center justify-center" variant="link" asChild>
+            <Link to="/" className="flex items-center gap-2" search={{ q: "" }} onClick={() => setIsOpen(false)}>
               {theme === "dark" ? <img src={LogoHeader} className="h-12" /> : <img src={LogoHeaderDark} className="h-12" />}
             </Link>
           </Button>
         </SheetHeader>
-        <Menu isOpen />
+        <Menu isOpen closeSheetMenu={() => setIsOpen(false)} />
       </SheetContent>
     </Sheet>
   );

src/main.tsx

@@ -63,7 +63,11 @@ export function App() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <ReactQueryDevtools initialIsOpen={false} buttonPosition="top-left" />
+      {import.meta.env.DEV && (
+        <div className="absolute right-5 top-14">
+          <ReactQueryDevtools initialIsOpen={false} buttonPosition="relative" />
+        </div>
+      )}
       <RouterProvider router={router} context={routerContext} />
       <Toaster />
     </QueryClientProvider>

src/routes/featured.tsx

@@ -1,8 +1,8 @@
 import { createFileRoute } from "@tanstack/react-router";
 import React, { useMemo } from "react";
-import { BookItem } from "@/components/books/book-item";
 import { getTrendingQueryOptions } from "@/api/backend/trending/trending";
 import { useSuspenseQuery } from "@tanstack/react-query";
+import { BookList } from "@/components/books/book-list";
 
 export const Route = createFileRoute("/featured")({
   component: Feature,
@@ -28,7 +28,7 @@ function Feature() {
                 .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
                 .join(" ")}
             </h1>
-            <div className="flex flex-col gap-4 md:grid md:grid-cols-2">{data[category].length > 0 ? data[category].map((book) => <BookItem key={book.md5} {...book} />) : null}</div>
+            <div>{data[category].length > 0 ? <BookList books={data[category]} /> : null}</div>
           </div>
         ))}
       </div>

src/routes/index.tsx

@@ -1,5 +1,5 @@
 import { useGetBooksQuery } from "@/api/backend/search/search";
-import { BookItem, SkeletonBookItem } from "@/components/books/book-item";
+import { SkeletonBookItem } from "@/components/books/book-item";
 import { useDebounce } from "@/hooks/use-debounce";
 import { useSettingsStore } from "@/stores/settings";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
@@ -10,6 +10,7 @@ import { Input } from "@/components/ui/input";
 import { SearchIcon } from "lucide-react";
 import { useState } from "react";
 import { Filters, FilterProps } from "@/components/books/filters";
+import { BookList } from "@/components/books/book-list";
 
 export const Route = createFileRoute("/")({
   component: Index,
@@ -94,16 +95,13 @@ function Index() {
         {error && <p className="text-red-500">Error: {error.message}</p>}
 
         {data && (
-          <div
+          <BookList
+            books={data.results}
             className={cn({
               "flex flex-col gap-4": filters.view === "list",
               "grid grid-cols-2 gap-4": filters.view === "grid",
             })}
-          >
-            {data.results.map((book) => (
-              <BookItem key={book.md5} {...book} />
-            ))}
-          </div>
+          />
         )}
       </div>
     </div>

src/routes/lists.tsx

@@ -1,4 +1,4 @@
-import { BookItem } from "@/components/books/book-item";
+import { BookList } from "@/components/books/book-list";
 import { useBookmarksStore } from "@/stores/bookmarks";
 import { createFileRoute } from "@tanstack/react-router";
 
@@ -14,11 +14,7 @@ export function Lists() {
       <div className="flex w-full flex-col gap-4">
         {bookmarks.length > 0 ? <h1 className="text-2xl font-bold">Your Bookmarks</h1> : null}
 
-        <div className="grid grid-cols-2 gap-4">
-          {bookmarks.map((bookmark) => (
-            <BookItem key={bookmark.md5} {...bookmark} />
-          ))}
-        </div>
+        <BookList books={bookmarks} />
       </div>
     </div>
   );

src/routes/settings.tsx

@@ -17,7 +17,7 @@ function Settings() {
   const { language, setLanguage, backendURL, setBackendURL } = useSettingsStore();
   return (
     <div className="flex h-full justify-center">
-      <div className="flex w-1/2 flex-col gap-8">
+      <div className="flex w-full flex-col gap-8 md:w-1/2">
         <Card>
           <CardHeader>
             <CardTitle>Application Language</CardTitle>