@itsmrtr/bunkoshelf 1.1.1 → 1.2.1

package/dist/src/components/library/manga/grid/VolumesIndex.tsx

@@ -5,6 +5,11 @@ import MangaCard from "@/components/ui/MangaCard";
 import Pagination from "@/components/ui/Pagination";
 import FiltersDrawer from "@/components/library/manga/FiltersDrawer";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
+import {
+  getLibraryVolumeHref,
+  type LibraryScope,
+  type LibrarySection,
+} from "@/lib/librarySection";
 import type { Locale, Dictionary } from "@/lib/types";
 
 const PAGE_SIZE = 35;
@@ -15,6 +20,8 @@ interface VolumesIndexProps {
   page?: number;
   genreFilter?: string | string[];
   tagFilter?: string | string[];
+  scope?: LibraryScope;
+  section?: LibrarySection;
 }
 
 export default async function VolumesIndex({
@@ -23,6 +30,8 @@ export default async function VolumesIndex({
   page = 1,
   genreFilter = [],
   tagFilter = [],
+  scope = "all",
+  section = "manga",
 }: VolumesIndexProps) {
   const genreList =
     typeof genreFilter === "string" ? genreFilter.split(",") : genreFilter;
@@ -34,6 +43,7 @@ export default async function VolumesIndex({
     includeTags: true,
     genreNames: genreList,
     tagNames: tagList,
+    scope,
   });
 
   const sortedVolumes = sortByPaddedTitle(volumes);
@@ -59,12 +69,12 @@ export default async function VolumesIndex({
           {intl.manga.allVolumes as string}
         </h2>
 
-        <FiltersDrawer intl={intl} />
+        <FiltersDrawer intl={intl} scope={scope} />
       </div>
 
       <section className="grid grid-cols-2 md:grid-cols-5 2xl:grid-cols-7 gap-4">
         {paginatedEntries.map((entry) => {
-          const href = `/${lang}/manga/volume/${entry.slug}`;
+          const href = getLibraryVolumeHref(lang, section, entry.slug);
 
           return (
             <MangaCard

package/dist/src/components/library/manga/grid/VolumesIndexFav.tsx

@@ -2,6 +2,11 @@ import MangaCard from "@/components/ui/MangaCard";
 import { verifySession } from "@/lib/auth/verifySession";
 import { listFavoriteVolumeIds, listVolumes } from "@/lib/db/library";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
+import {
+  getLibraryVolumeHref,
+  type LibraryScope,
+  type LibrarySection,
+} from "@/lib/librarySection";
 import { sortByPaddedTitle } from "@/lib/utils";
 import { GhostIcon, BookCopyIcon } from "lucide-react";
 import type { Locale, Dictionary } from "@/lib/types";
@@ -9,9 +14,16 @@ import type { Locale, Dictionary } from "@/lib/types";
 interface VolumesIndexFavProps {
   lang: Locale;
   intl: Dictionary;
+  scope?: LibraryScope;
+  section?: LibrarySection;
 }
 
-export default async function VolumesIndexFav({ lang, intl }: VolumesIndexFavProps) {
+export default async function VolumesIndexFav({
+  lang,
+  intl,
+  scope = "all",
+  section = "manga",
+}: VolumesIndexFavProps) {
   const user = await verifySession();
   if (!user) return null;
 
@@ -27,6 +39,7 @@ export default async function VolumesIndexFav({ lang, intl }: VolumesIndexFavPro
 
   const volumes = await listVolumes({
     volumeIds: favoriteVolumeIds,
+    scope,
   });
   const sortedVolumes = sortByPaddedTitle(volumes);
   const entries = sortedVolumes.map((vol) => ({
@@ -45,7 +58,7 @@ export default async function VolumesIndexFav({ lang, intl }: VolumesIndexFavPro
 
       <div className="grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
         {entries.map((entry) => {
-          const href = `/${lang}/manga/volume/${entry.slug}`;
+          const href = getLibraryVolumeHref(lang, section, entry.slug);
           const coverImage = entry.coverImage;
 
           return (

package/dist/src/components/library/manga/grid/WantToRead.tsx

@@ -6,6 +6,11 @@ import MangaCard from "@/components/ui/MangaCard";
 import Pagination from "@/components/ui/Pagination";
 import FiltersDrawer from "@/components/library/manga/FiltersDrawer";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
+import {
+  getLibraryVolumeHref,
+  type LibraryScope,
+  type LibrarySection,
+} from "@/lib/librarySection";
 import type { Locale, Dictionary } from "@/lib/types";
 
 const PAGE_SIZE = 35;
@@ -16,6 +21,8 @@ interface WantToReadProps {
   page?: number;
   genreFilter?: string | string[];
   tagFilter?: string | string[];
+  scope?: LibraryScope;
+  section?: LibrarySection;
 }
 
 export default async function WantToRead({
@@ -24,6 +31,8 @@ export default async function WantToRead({
   page = 1,
   genreFilter = [],
   tagFilter = [],
+  scope = "all",
+  section = "manga",
 }: WantToReadProps) {
   const user = await verifySession();
   if (!user) return null;
@@ -40,6 +49,7 @@ export default async function WantToRead({
     genreNames: genreList,
     tagNames: tagList,
     onlyUnreadForUser: true,
+    scope,
   });
 
   const sortedVolumes = sortByPaddedTitle(volumes);
@@ -64,12 +74,12 @@ export default async function WantToRead({
           <LibraryBigIcon size={28} className="mr-2" />
           {intl.manga.wantToRead as string}
         </h2>
-        <FiltersDrawer intl={intl} />
+        <FiltersDrawer intl={intl} scope={scope} />
       </div>
 
       <section className="grid grid-cols-2 md:grid-cols-5 2xl:grid-cols-7 gap-4">
         {paginatedEntries.map((entry) => {
-          const href = `/${lang}/manga/volume/${entry.slug}`;
+          const href = getLibraryVolumeHref(lang, section, entry.slug);
 
           return (
             <MangaCard

package/dist/src/components/library/manga/row/HeroKeepRead.tsx

@@ -5,6 +5,11 @@ import { usePathname } from "next/navigation";
 import MangaCard from "@/components/ui/MangaCard";
 import MangaNav from "@/components/library/manga/MangaNav";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
+import {
+  getLibraryVolumeHref,
+  type LibraryScope,
+  type LibrarySection,
+} from "@/lib/librarySection";
 import {
   LibraryBigIcon,
   ChevronLeftIcon,
@@ -17,6 +22,8 @@ import type { MouseEvent as ReactMouseEvent, DragEvent } from "react";
 interface HeroKeepReadProps {
   lang: Locale;
   intl: Dictionary;
+  section?: LibrarySection;
+  scope?: LibraryScope;
 }
 
 interface ReadingEntry {
@@ -30,9 +37,15 @@ interface ReadingEntry {
   lastPage: number;
   totalPages: number;
   lastReadAt: Date | null;
+  progressRatio: number;
 }
 
-export default function HeroKeepRead({ lang, intl }: HeroKeepReadProps) {
+export default function HeroKeepRead({
+  lang,
+  intl,
+  section = "manga",
+  scope = "all",
+}: HeroKeepReadProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const [entries, setEntries] = useState<ReadingEntry[]>([]);
   const [isDragging, setIsDragging] = useState(false);
@@ -43,7 +56,7 @@ export default function HeroKeepRead({ lang, intl }: HeroKeepReadProps) {
 
   useEffect(() => {
     async function fetchReadingProgress() {
-      const result = await getMangaVolumes();
+      const result = await getMangaVolumes({ scope });
       if (!result || !result.success) return;
 
       const data = result.data;
@@ -63,6 +76,10 @@ export default function HeroKeepRead({ lang, intl }: HeroKeepReadProps) {
             lastReadAt: progress?.lastReadAt
               ? new Date(progress.lastReadAt)
               : null,
+            progressRatio:
+              progress?.totalPages && progress.totalPages > 0
+                ? ((progress.lastPage ?? 0) + 1) / progress.totalPages
+                : 0,
           };
         })
         .filter((vol) => {
@@ -80,7 +97,7 @@ export default function HeroKeepRead({ lang, intl }: HeroKeepReadProps) {
     }
 
     fetchReadingProgress();
-  }, [pathname]);
+  }, [pathname, scope]);
 
   const handleMouseDown = (e: ReactMouseEvent<HTMLDivElement>) => {
     setIsDragging(true);
@@ -121,7 +138,7 @@ export default function HeroKeepRead({ lang, intl }: HeroKeepReadProps) {
   const shouldHideHero = (() => {
     const parts = pathname.split("/").filter(Boolean);
 
-    if (parts[1] !== "manga") return true;
+    if (parts[1] !== section) return true;
 
     if (parts.length === 2) return false;
 
@@ -181,7 +198,7 @@ export default function HeroKeepRead({ lang, intl }: HeroKeepReadProps) {
               }}
             >
               {entries.map((entry) => {
-                const href = `/${lang}/manga/volume/${entry.slug}`;
+                const href = getLibraryVolumeHref(lang, section, entry.slug);
                 return (
                   <div
                     key={entry.slug}
@@ -202,7 +219,7 @@ export default function HeroKeepRead({ lang, intl }: HeroKeepReadProps) {
                       intl={intl}
                       isDragging={isDragging}
                       seriesSlug={null}
-                      progressRatio={null}
+                      progressRatio={entry.progressRatio}
                       className="font-roboto font-bold leading-5 2xl:leading-5.5 text-base 2xl:text-xl"
                     />
                   </div>
@@ -212,7 +229,7 @@ export default function HeroKeepRead({ lang, intl }: HeroKeepReadProps) {
           </section>
 
           <div className="sticky top-0 z-10 bg-pearl p-4">
-            <MangaNav lang={lang} intl={intl} />
+            <MangaNav lang={lang} intl={intl} section={section} />
           </div>
         </>
       )}

package/dist/src/components/library/manga/row/MangaRowCarousel.tsx

@@ -3,6 +3,10 @@
 import { useRef, useState } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import MangaCard from "@/components/ui/MangaCard";
+import {
+  getLibraryVolumeHref,
+  type LibrarySection,
+} from "@/lib/librarySection";
 import type { Dictionary, Locale } from "@/lib/types";
 import type { MouseEvent as ReactMouseEvent, DragEvent, ReactNode } from "react";
 
@@ -11,6 +15,7 @@ export interface VolEntry {
   title: string;
   isOneshot: boolean;
   coverImage: string | null;
+  section?: LibrarySection;
   meta: {
     title?: string | null;
   } | null;
@@ -22,6 +27,7 @@ interface MangaRowCarouselProps {
   intl: Dictionary;
   header: ReactNode;
   className?: string;
+  section?: LibrarySection;
 }
 
 export default function MangaRowCarousel({
@@ -30,6 +36,7 @@ export default function MangaRowCarousel({
   intl,
   header,
   className = "mt-8",
+  section = "manga",
 }: MangaRowCarouselProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const [isDragging, setIsDragging] = useState(false);
@@ -107,7 +114,11 @@ export default function MangaRowCarousel({
           <div key={entry.slug} className="flex-shrink-0 w-1/2 md:w-1/5 2xl:w-1/7">
             <MangaCard
               title={(entry.meta as Record<string, string>)?.title ?? entry.title}
-              href={`/${lang}/manga/volume/${entry.slug}`}
+              href={getLibraryVolumeHref(
+                lang,
+                entry.section ?? section,
+                entry.slug
+              )}
               isSeries={false}
               isOneshot={entry.isOneshot}
               onGoing={false}

package/dist/src/components/library/manga/row/NewVols.tsx

@@ -2,16 +2,25 @@ import { BookPlusIcon } from "lucide-react";
 import { getMangaVolumes } from "@/actions/library";
 import MangaRowCarousel, { type VolEntry } from "./MangaRowCarousel";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
+import type { LibraryScope, LibrarySection } from "@/lib/librarySection";
 import type { Locale, Dictionary } from "@/lib/types";
 
 interface NewVolsProps {
   lang: Locale;
   intl: Dictionary;
   maxItems?: number;
+  scope?: LibraryScope;
+  section?: LibrarySection;
 }
 
-export default async function NewVols({ lang, intl, maxItems = 12 }: NewVolsProps) {
-  const result = await getMangaVolumes();
+export default async function NewVols({
+  lang,
+  intl,
+  maxItems = 12,
+  scope = "all",
+  section = "manga",
+}: NewVolsProps) {
+  const result = await getMangaVolumes({ scope });
 
   const entries: VolEntry[] = result?.success && result.data
     ? [...result.data]
@@ -22,6 +31,7 @@ export default async function NewVols({ lang, intl, maxItems = 12 }: NewVolsProp
           title: vol.title,
           isOneshot: vol.series?.isOneshot === true,
           coverImage: getMangaCoverUrl(vol),
+          section,
           meta: vol.metadataObj ?? null,
         }))
     : [];
@@ -31,6 +41,7 @@ export default async function NewVols({ lang, intl, maxItems = 12 }: NewVolsProp
       entries={entries}
       lang={lang}
       intl={intl}
+      section={section}
       header={
         <h2 key="header" className="flex items-center text-base md:text-lg">
           <BookPlusIcon size={28} className="mr-2" />

package/dist/src/components/library/manga/row/NextVol.tsx

@@ -2,16 +2,25 @@ import { BookMarkedIcon } from "lucide-react";
 import { getMangaVolumes } from "@/actions/library";
 import MangaRowCarousel, { type VolEntry } from "./MangaRowCarousel";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
+import type { LibraryScope, LibrarySection } from "@/lib/librarySection";
 import type { Locale, Dictionary } from "@/lib/types";
 
 interface NextVolProps {
   lang: Locale;
   intl: Dictionary;
   maxItems?: number;
+  scope?: LibraryScope;
+  section?: LibrarySection;
 }
 
-export default async function NextVol({ lang, intl, maxItems = 12 }: NextVolProps) {
-  const result = await getMangaVolumes();
+export default async function NextVol({
+  lang,
+  intl,
+  maxItems = 12,
+  scope = "all",
+  section = "manga",
+}: NextVolProps) {
+  const result = await getMangaVolumes({ scope });
 
   const entries: VolEntry[] = (() => {
     if (!result?.success || !result.data) return [];
@@ -50,6 +59,7 @@ export default async function NextVol({ lang, intl, maxItems = 12 }: NextVolProp
           title: nextUnread.title,
           isOneshot: nextUnread.series?.isOneshot === true,
           coverImage: getMangaCoverUrl(nextUnread),
+          section,
           meta: nextUnread.metadataObj ?? null,
         });
       }
@@ -63,6 +73,7 @@ export default async function NextVol({ lang, intl, maxItems = 12 }: NextVolProp
       entries={entries}
       lang={lang}
       intl={intl}
+      section={section}
       className="mt-4"
       header={
         <h2 key="header" className="flex items-center text-base md:text-lg">

package/dist/src/components/library/manga/row/RecentlyRead.tsx

@@ -2,16 +2,25 @@ import { BookCheckIcon } from "lucide-react";
 import { getMangaVolumes } from "@/actions/library";
 import MangaRowCarousel, { type VolEntry } from "./MangaRowCarousel";
 import { getMangaCoverUrl } from "@/lib/mangaCover";
+import type { LibraryScope, LibrarySection } from "@/lib/librarySection";
 import type { Locale, Dictionary } from "@/lib/types";
 
 interface RecentlyReadProps {
   lang: Locale;
   intl: Dictionary;
   maxItems?: number;
+  scope?: LibraryScope;
+  section?: LibrarySection;
 }
 
-export default async function RecentlyRead({ lang, intl, maxItems = 12 }: RecentlyReadProps) {
-  const result = await getMangaVolumes();
+export default async function RecentlyRead({
+  lang,
+  intl,
+  maxItems = 12,
+  scope = "all",
+  section = "manga",
+}: RecentlyReadProps) {
+  const result = await getMangaVolumes({ scope });
 
   const entries: VolEntry[] = result?.success && result.data
     ? result.data
@@ -22,6 +31,7 @@ export default async function RecentlyRead({ lang, intl, maxItems = 12 }: Recent
             title: vol.title,
             isOneshot: vol.series?.isOneshot === true,
             coverImage: getMangaCoverUrl(vol),
+            section,
             meta: vol.metadataObj ?? null,
             isRead: progress?.isRead ?? false,
             lastReadAt: progress?.lastReadAt ? new Date(progress.lastReadAt) : null,
@@ -37,6 +47,7 @@ export default async function RecentlyRead({ lang, intl, maxItems = 12 }: Recent
       entries={entries}
       lang={lang}
       intl={intl}
+      section={section}
       header={
         <h2 key="header" className="flex items-center text-base md:text-lg">
           <BookCheckIcon size={28} className="mr-2" />

package/dist/src/components/mobNav/MobNav.tsx

@@ -3,6 +3,7 @@ import { verifySession } from "@/lib/auth/verifySession";
 import { getChallengeData } from "@/lib/utils";
 import MobNavButton from "./MobNavButton";
 import { getVersionInfo } from "@/lib/versionInfo";
+import { isOthersLibraryEnabled } from "@/lib/db/appSettings";
 import type { Locale } from "@/lib/types";
 
 interface MobNavProps {
@@ -14,6 +15,7 @@ export default async function MobNav({ lang }: MobNavProps) {
   const user = await verifySession();
   const challengeData = await getChallengeData(user);
   const versionData = await getVersionInfo();
+  const othersLibraryEnabled = await isOthersLibraryEnabled();
 
   return (
     <div className="fixed bottom-8 right-6 z-50 md:hidden">
@@ -23,6 +25,7 @@ export default async function MobNav({ lang }: MobNavProps) {
         user={user}
         challengeData={challengeData}
         versionData={versionData}
+        isOthersEnabled={othersLibraryEnabled}
       />
     </div>
   );

package/dist/src/components/mobNav/MobNavButton.tsx

@@ -13,6 +13,7 @@ interface MobNavButtonProps {
   user: Session | null;
   challengeData: ChallengeData | null;
   versionData: VersionInfo;
+  isOthersEnabled: boolean;
 }
 
 export default function MobNavButton({
@@ -21,6 +22,7 @@ export default function MobNavButton({
   user,
   challengeData,
   versionData,
+  isOthersEnabled,
 }: MobNavButtonProps) {
   const [open, setOpen] = useState(false);
   const pathname = usePathname();
@@ -29,7 +31,7 @@ export default function MobNavButton({
     if (open) {
       setOpen(false);
     }
-  }, [pathname]);
+  }, [open, pathname]);
 
   return (
     <>
@@ -48,6 +50,7 @@ export default function MobNavButton({
         user={user}
         challengeData={challengeData}
         versionData={versionData}
+        isOthersEnabled={isOthersEnabled}
       />
     </>
   );

package/dist/src/components/mobNav/MobNavModal.tsx

@@ -19,6 +19,7 @@ interface MobNavModalProps {
   user: Session | null;
   challengeData: ChallengeData | null;
   versionData: VersionInfo;
+  isOthersEnabled: boolean;
 }
 
 export default function MobNavModal({
@@ -29,6 +30,7 @@ export default function MobNavModal({
   user,
   challengeData,
   versionData,
+  isOthersEnabled,
 }: MobNavModalProps) {
   const modalRef = useRef<HTMLDivElement>(null);
 
@@ -82,7 +84,13 @@ export default function MobNavModal({
 
         <div>
           {!user && <SecondNav intl={intl} />}
-          {user && <MainNav intl={intl} user={user} />}
+          {user && (
+            <MainNav
+              intl={intl}
+              user={user}
+              isOthersEnabled={isOthersEnabled}
+            />
+          )}
         </div>
 
         <div className="mt-8 mb-4">

package/dist/src/components/settings/LibraryModeTile.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { LibraryBigIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { setOthersLibraryMode } from "@/actions/app-settings";
+import clsx from "clsx";
+import type { Dictionary } from "@/lib/types";
+
+interface LibraryModeTileProps {
+  intl: Dictionary;
+  initialEnabled: boolean;
+}
+
+export default function LibraryModeTile({
+  intl,
+  initialEnabled,
+}: LibraryModeTileProps) {
+  const router = useRouter();
+  const [enabled, setEnabled] = useState(initialEnabled);
+  const [isPending, startTransition] = useTransition();
+
+  const handleChange = (nextValue: boolean) => {
+    setEnabled(nextValue);
+
+    startTransition(async () => {
+      const result = await setOthersLibraryMode(nextValue);
+
+      if (result?.error) {
+        setEnabled(!nextValue);
+        return;
+      }
+
+      router.refresh();
+    });
+  };
+
+  return (
+    <div className="rounded-lg bg-blackamber p-4">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h3 className="flex items-center text-base mb-2">
+            <LibraryBigIcon size={20} className="mr-2" />
+            {intl.settings.othersLibraryTitle as string}
+          </h3>
+          <p className="text-sm text-neutral-400">
+            {intl.settings.othersLibraryDesc as string}
+          </p>
+        </div>
+
+        <label className="inline-flex cursor-pointer items-center">
+          <input
+            type="checkbox"
+            checked={enabled}
+            disabled={isPending}
+            onChange={(event) => handleChange(event.target.checked)}
+            className="peer sr-only"
+          />
+          <span
+            className={clsx(
+              "relative h-7 w-13 rounded-full transition-colors",
+              "after:absolute after:left-1 after:top-1 after:h-5 after:w-5 after:rounded-full after:bg-pearl after:transition-transform",
+              enabled ? "bg-lilah after:translate-x-6" : "bg-onix"
+            )}
+          />
+        </label>
+      </div>
+
+      <p className="mt-4 text-xs uppercase text-neutral-500">
+        {enabled
+          ? (intl.settings.othersLibraryEnabled as string)
+          : (intl.settings.othersLibraryDisabled as string)}
+      </p>
+    </div>
+  );
+}

package/dist/src/components/sidebar/MainNav.tsx

@@ -35,15 +35,21 @@ interface NavLink {
 interface MainNavProps {
   intl: Dictionary;
   user: Session;
+  isOthersEnabled: boolean;
 }
 
-export default function MainNav({ intl, user }: MainNavProps) {
+export default function MainNav({
+  intl,
+  user,
+  isOthersEnabled,
+}: MainNavProps) {
   const params = useParams();
   const currentLang = (params.lang as string) || "es";
   const pathname = usePathname();
 
   const isLibraryActive =
     pathname.startsWith(`/${currentLang}/manga`) ||
+    pathname.startsWith(`/${currentLang}/others`) ||
     pathname.startsWith(`/${currentLang}/books`);
 
   const [openLibraryMenu, setOpenLibraryMenu] = useState(false);
@@ -58,7 +64,7 @@ export default function MainNav({ intl, user }: MainNavProps) {
       setOpenLibraryMenu(false);
       hasManuallyToggled.current = false;
     }
-  }, [pathname]);
+  }, [isLibraryActive, pathname]);
 
   const handleToggleLibrary = () => {
     setOpenLibraryMenu((prev) => !prev);
@@ -85,6 +91,15 @@ export default function MainNav({ intl, user }: MainNavProps) {
           href: `/${currentLang}/manga`,
           isActive: pathname.startsWith(`/${currentLang}/manga`),
         },
+        ...(isOthersEnabled
+          ? [
+              {
+                label: intl.sidebar.others as string,
+                href: `/${currentLang}/others`,
+                isActive: pathname.startsWith(`/${currentLang}/others`),
+              },
+            ]
+          : []),
         {
           label: intl.sidebar.books as string,
           href: `/${currentLang}/books`,

package/dist/src/components/sidebar/sidebar.tsx

@@ -9,6 +9,7 @@ import SearchInput from "@/components/search/SearchImput";
 import SearchModal from "@/components/search/SearchModal";
 import { getChallengeData } from "@/lib/utils";
 import { getVersionInfo } from "@/lib/versionInfo";
+import { isOthersLibraryEnabled } from "@/lib/db/appSettings";
 
 import type { Locale } from "@/lib/types";
 
@@ -21,6 +22,7 @@ export default async function Sidebar({ lang }: SidebarProps) {
   const user = await verifySession();
   const challengeData = await getChallengeData(user);
   const versionData = await getVersionInfo();
+  const othersLibraryEnabled = await isOthersLibraryEnabled();
 
   return (
     <>
@@ -33,7 +35,11 @@ export default async function Sidebar({ lang }: SidebarProps) {
 
         {user && (
           <div className="flex-1">
-            <MainNav intl={intl} user={user} />
+            <MainNav
+              intl={intl}
+              user={user}
+              isOthersEnabled={othersLibraryEnabled}
+            />
 
             <div className="mt-16">
               <SearchInput intl={intl} />