remove @radix-ui/react-icons & lazy load navbar components & load sch…

…eherazade font only in reader

package.json

@@ -35,7 +35,6 @@
     "@radix-ui/react-direction": "^1.0.1",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-hover-card": "^1.0.7",
-    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-popover": "^1.0.7",

src/app/[locale]/t/[bookId]/layout.tsx

@@ -1,9 +1,25 @@
 import Providers from "./providers";
+import { cn } from "@/lib/utils";
+import { Scheherazade_New } from "next/font/google";
+
+const scheherazade = Scheherazade_New({
+  subsets: ["arabic"],
+  style: "normal",
+  variable: "--font-scheherazade",
+  weight: ["400", "700"],
+});
 
 function ReaderLayout({ children }: { children: React.ReactNode }) {
   return (
     <Providers>
-      <div className="max-h-screen overflow-hidden bg-reader">{children}</div>
+      <div
+        className={cn(
+          "max-h-screen overflow-hidden bg-reader",
+          scheherazade.variable,
+        )}
+      >
+        {children}
+      </div>
     </Providers>
   );
 }

src/app/_components/navbar/index.tsx

@@ -13,15 +13,26 @@ import {
 
 import React, { useEffect, useState } from "react";
 import { ThemeToggle } from "./theme-toggle";
-import SearchBar from "./search-bar";
 import { useNavbarStore } from "@/stores/navbar";
 import { useReaderScroller } from "../../[locale]/t/[bookId]/_components/context";
-import HomepageNavigationMenu from "./navigation-menu";
+
+// import HomepageNavigationMenu from "./navigation-menu";
+// import SearchBar from "./search-bar";
+
+const SearchBar = dynamic(() => import("./search-bar"), {
+  ssr: false,
+});
+
+const HomepageNavigationMenu = dynamic(() => import("./navigation-menu"), {
+  ssr: false,
+});
+
 import LocaleSwitcher from "./locale-switcher";
 import MobileMenu from "./mobile-menu";
 import MobileNavigationMenu from "./mobile-navigation-menu";
 import { useTranslations } from "next-intl";
 import { useDirection } from "@/lib/locale/utils";
+import dynamic from "next/dynamic";
 
 interface NavbarProps {
   layout?: "home" | "reader";

src/components/ui/accordion/index.tsx

@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "@radix-ui/react-icons"
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon } from "lucide-react";
 
-const Accordion = AccordionPrimitive.Root
+const Accordion = AccordionPrimitive.Root;
 
 const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
@@ -17,8 +17,8 @@ const AccordionItem = React.forwardRef<
     className={cn("border-b", className)}
     {...props}
   />
-))
-AccordionItem.displayName = "AccordionItem"
+));
+AccordionItem.displayName = "AccordionItem";
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -29,16 +29,16 @@ const AccordionTrigger = React.forwardRef<
       ref={ref}
       className={cn(
         "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
+        className,
       )}
       {...props}
     >
       {children}
       <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
@@ -51,7 +51,7 @@ const AccordionContent = React.forwardRef<
   >
     <div className={cn("pb-4 pt-0", className)}>{children}</div>
   </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

src/components/ui/command/index.tsx

@@ -2,12 +2,12 @@
 
 import * as React from "react";
 import { type DialogProps } from "@radix-ui/react-dialog";
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { Command as CommandPrimitive } from "cmdk";
 
 import { cn } from "@/lib/utils";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import Spinner from "../spinner";
+import { SearchIcon } from "lucide-react";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -53,7 +53,7 @@ const CommandInput = React.forwardRef<
     {isLoading ? (
       <Spinner className="h-4 w-4 shrink-0" />
     ) : (
-      <MagnifyingGlassIcon className="h-4 w-4 shrink-0 opacity-50" />
+      <SearchIcon className="h-4 w-4 shrink-0 opacity-50" />
     )}
 
     <CommandPrimitive.Input

src/components/ui/dialog/index.tsx

@@ -2,9 +2,9 @@
 
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { Cross2Icon } from "@radix-ui/react-icons";
 
 import { cn } from "@/lib/utils";
+import { XIcon } from "lucide-react";
 
 const Dialog = DialogPrimitive.Root;
 
@@ -51,7 +51,7 @@ const DialogContent = React.forwardRef<
       >
         {children}
         <DialogPrimitive.Close className="absolute top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground ltr:right-4 rtl:left-4">
-          <Cross2Icon className="h-4 w-4" />
+          <XIcon className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
       </DialogPrimitive.Content>

src/components/ui/dropdown-menu/index.tsx

@@ -2,13 +2,9 @@
 
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  DotFilledIcon,
-} from "@radix-ui/react-icons";
 
 import { cn } from "@/lib/utils";
+import { CheckIcon, ChevronRightIcon, DotIcon } from "lucide-react";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
@@ -135,7 +131,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
+        <DotIcon className="h-4 w-4 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

src/components/ui/navigation-menu.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { ChevronDownIcon } from "@radix-ui/react-icons";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
+import { ChevronDownIcon } from "lucide-react";
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,

src/components/ui/resizable/index.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { DragHandleDots2Icon } from "@radix-ui/react-icons";
 import * as ResizablePrimitive from "react-resizable-panels";
 
 import { cn } from "@/lib/utils";
+import { GripVerticalIcon } from "lucide-react";
 
 const ResizablePanelGroup = ({
   className,
@@ -36,7 +36,7 @@ const ResizableHandle = ({
   >
     {withHandle && (
       <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <DragHandleDots2Icon className="h-2.5 w-2.5" />
+        <GripVerticalIcon className="h-2.5 w-2.5" />
       </div>
     )}
   </ResizablePrimitive.PanelResizeHandle>

src/components/ui/select/index.tsx

@@ -1,16 +1,17 @@
 "use client";
 
 import * as React from "react";
-import {
-  CaretSortIcon,
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-} from "@radix-ui/react-icons";
+
 import * as SelectPrimitive from "@radix-ui/react-select";
 
 import { cn } from "@/lib/utils";
 import Spinner from "../spinner";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  ChevronsUpDownIcon,
+} from "lucide-react";
 
 const Select = SelectPrimitive.Root;
 
@@ -54,7 +55,7 @@ const SelectTrigger = React.forwardRef<
           {isLoading ? (
             <Spinner className="h-4 w-4" />
           ) : (
-            icon ?? <CaretSortIcon className="h-4 w-4 opacity-50" />
+            icon ?? <ChevronsUpDownIcon className="h-4 w-4 opacity-50" />
           )}
         </div>
       </SelectPrimitive.Icon>

src/components/ui/sheet.tsx

@@ -2,10 +2,10 @@
 
 import * as React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { Cross2Icon } from "@radix-ui/react-icons";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
+import { XIcon } from "lucide-react";
 
 const Sheet = SheetPrimitive.Root;
 
@@ -66,7 +66,7 @@ const SheetContent = React.forwardRef<
     >
       {children}
       <SheetPrimitive.Close className="absolute top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary ltr:left-4 rtl:right-4">
-        <Cross2Icon className="h-5 w-5" />
+        <XIcon className="h-5 w-5" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>

src/components/ui/toast.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import * as React from "react";
-import { Cross2Icon } from "@radix-ui/react-icons";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
+import { XIcon } from "lucide-react";
 
 const ToastProvider = ToastPrimitives.Provider;
 
@@ -86,7 +86,7 @@ const ToastClose = React.forwardRef<
     toast-close=""
     {...props}
   >
-    <Cross2Icon className="h-4 w-4" />
+    <XIcon className="h-4 w-4" />
   </ToastPrimitives.Close>
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;

src/lib/fonts.ts

@@ -1,13 +1,6 @@
-import { Plus_Jakarta_Sans, Scheherazade_New } from "next/font/google";
+import { Plus_Jakarta_Sans } from "next/font/google";
 import localFont from "next/font/local";
 
-const scheherazade = Scheherazade_New({
-  subsets: ["arabic"],
-  style: "normal",
-  variable: "--font-scheherazade",
-  weight: ["400", "700"],
-});
-
 const plusJakartaSans = Plus_Jakarta_Sans({
   subsets: ["latin"],
   style: "normal",
@@ -78,9 +71,4 @@ const ibmPlexSansArabic = localFont({
 // });
 
 export const getFontsClassnames = () =>
-  [
-    plusJakartaSans.variable,
-    ibmPlexSansArabic.variable,
-    scheherazade.variable,
-    // uthmanicHafs.variable,
-  ].join(" ");
+  [plusJakartaSans.variable, ibmPlexSansArabic.variable].join(" ");