@itsmrtr/bunkoshelf 1.3.2 → 1.4.1

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

@@ -7,7 +7,6 @@ import MainNav from "@/components/sidebar/MainNav";
 import SecondNav from "@/components/sidebar/SecondNav";
 import ChallengeProg from "@/components/sidebar/ChallengeProg";
 import FooterNav from "@/components/sidebar/FooterNav";
-import SearchInputMob from "@/components/search/SearchInputMob";
 import type { Dictionary, Session, ChallengeData } from "@/lib/types";
 import type { VersionInfo } from "@/lib/versionInfo";
 
@@ -67,7 +66,7 @@ export default function MobNavModal({
       className="fixed inset-0 z-50 bg-pearl text-onix flex p-4 pointer-events-auto transition-opacity duration-200 ease-in-out opacity-100"
     >
       <div
-        className="flex flex-col justify-between w-full max-w-5xl space-y-4 relative"
+        className="flex flex-col justify-between w-full max-w-5xl relative"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex flex-row items-center justify-between">
@@ -82,18 +81,10 @@ export default function MobNavModal({
 
         <div>
           {!user && <SecondNav intl={intl} />}
-          {user && (
-            <MainNav
-              intl={intl}
-              user={user}
-            />
-          )}
+          {user && <MainNav intl={intl} user={user} />}
         </div>
 
         <div className="mt-8 mb-4">
-          <div className="mb-8">
-            <SearchInputMob intl={intl} />
-          </div>
           <ChallengeProg lang={lang} intl={intl} data={challengeData} />
           <FooterNav
             lang={lang}

package/dist/src/components/profile/ProfileNav.tsx

@@ -1,23 +1,12 @@
 "use client";
 
 import Link from "next/link";
-import {
-  LayoutPanelTopIcon,
-  UserRoundPenIcon,
-  BellIcon,
-  type LucideIcon,
-} from "lucide-react";
 import { usePathname, useParams } from "next/navigation";
 import clsx from "clsx";
+import MobileSecondaryNav from "@/components/ui/MobileSecondaryNav";
+import { getProfileNavLinks } from "@/lib/nav/profileNav";
 import type { DictionarySection } from "@/lib/types";
 
-interface NavLink {
-  label: string | DictionarySection;
-  href: string;
-  icon: LucideIcon;
-  isActive: boolean;
-}
-
 interface ProfileNavProps {
   intl: DictionarySection;
 }
@@ -26,44 +15,27 @@ export default function ProfileNav({ intl }: ProfileNavProps) {
   const params = useParams();
   const pathname = usePathname();
   const currentLang = (params.lang as string) || "es";
-
-  const profile = intl.profile as DictionarySection;
-
-  const links: NavLink[] = [
-    {
-      label: profile.overview as string,
-      href: `/${currentLang}/profile`,
-      icon: LayoutPanelTopIcon,
-      isActive: pathname === `/${currentLang}/profile`,
-    },
-    {
-      label: profile.updateProfile as string,
-      href: `/${currentLang}/profile/update`,
-      icon: UserRoundPenIcon,
-      isActive: pathname === `/${currentLang}/profile/update`,
-    },
-    {
-      label: profile.notifications as string,
-      href: `/${currentLang}/profile/notifications`,
-      icon: BellIcon,
-      isActive: pathname === `/${currentLang}/profile/notifications`,
-    },
-  ];
+  const links = getProfileNavLinks({ intl, lang: currentLang, pathname });
 
   return (
     <div className="mt-4 md:mt-16">
-      <div className={clsx("md:space-y-2", "flex md:block gap-2")}>
+      <MobileSecondaryNav items={links.map((link) => ({
+        ...link,
+        label: String(link.label),
+      }))} />
+
+      <div className={clsx("hidden md:space-y-2 md:block")}>
         {links.map(({ href, icon: Icon, label, isActive }, index) => (
           <Link
             key={index}
             href={href}
             className={clsx(
-              "flex flex-col md:flex-row justify-center md:justify-start w-full items-center p-4 rounded-lg leading-none text-onix transition-all duration-300",
+              "flex flex-row justify-start w-full items-center p-4 rounded-lg leading-none text-onix transition-all duration-300",
               isActive ? "bg-sand" : "hover:bg-sand"
             )}
           >
-            <Icon size={20} className="mr-1 md:mr-2" />
-            <span className="hidden md:inline">{label as string}</span>
+            <Icon size={20} className="mr-2" />
+            <span>{label as string}</span>
           </Link>
         ))}
       </div>

package/dist/src/components/profile/SubscriptionsTable.tsx

@@ -95,7 +95,7 @@ export default function SubscriptionsTable({ subscriptions: initial, intl }: Sub
           </p>
         ) : (
           <div className="overflow-x-auto">
-            <div className="min-w-[600px] xl:min-w-full h-72 overflow-y-auto">
+            <div className="min-w-[600px] xl:min-w-full">
               <div className="flex sticky top-0 z-10">
                 <div className="grid grid-cols-2 flex-1 font-bold uppercase bg-onix rounded-l-md">
                   <div className="p-4 text-left">
@@ -126,11 +126,15 @@ export default function SubscriptionsTable({ subscriptions: initial, intl }: Sub
                     </div>
                   </div>
                   <div className="w-24 shrink-0 sticky right-0 bg-blackamber p-4 flex items-center justify-center">
-                    <Trash2Icon
+                    <button
+                      type="button"
                       onClick={() => !isLoading && handleDelete(sub.id, sub.endpoint)}
-                      size={20}
-                      className="cursor-pointer hover:text-red-400 transition-colors duration-300"
-                    />
+                      disabled={isLoading}
+                      title={profile.unsubscribe as string}
+                      className="border border-neutral-800 hover:text-danger-alt rounded-lg p-2 cursor-pointer transition-all duration-300 hover:border-danger-alt disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      <Trash2Icon size={16} />
+                    </button>
                   </div>
                 </div>
               ))}

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

@@ -3,25 +3,15 @@
 import Link from "next/link";
 import { usePathname, useParams } from "next/navigation";
 import { useEffect, useState } from "react";
-import {
-  LayoutPanelTopIcon,
-  FolderCogIcon,
-} from "lucide-react";
 import clsx from "clsx";
+import MobileSecondaryNav from "@/components/ui/MobileSecondaryNav";
+import { getSettingsNavLinks } from "@/lib/nav/settingsNav";
 import type { Dictionary } from "@/lib/types";
-import type { LucideIcon } from "lucide-react";
 
 interface SettingsNavProps {
   intl: Dictionary;
 }
 
-interface NavLink {
-  label: string;
-  href: string;
-  icon: LucideIcon;
-  isActive: boolean;
-}
-
 export default function SettingsNav({ intl }: SettingsNavProps) {
   const params = useParams();
   const pathname = usePathname();
@@ -39,41 +29,27 @@ export default function SettingsNav({ intl }: SettingsNavProps) {
 
     return () => window.removeEventListener("hashchange", updateHash);
   }, []);
-
-  const links: NavLink[] = [
-    {
-      label: intl.settings.overview as string,
-      href: `/${currentLang}/settings#overview`,
-      icon: LayoutPanelTopIcon,
-      isActive:
-        pathname === `/${currentLang}/settings` &&
-        (hash === "#overview" || hash === ""),
-    },
-    {
-      label: intl.settings.library as string,
-      href: `/${currentLang}/settings/library`,
-      icon: FolderCogIcon,
-      isActive: pathname.startsWith(`/${currentLang}/settings/library`),
-    },
-  ];
+  const links = getSettingsNavLinks({ intl, lang: currentLang, pathname, hash });
 
   return (
     <div className="mt-4 md:mt-16">
-      <div className="md:space-y-2 md:block flex gap-1">
+      <MobileSecondaryNav items={links} />
+
+      <div className="hidden md:space-y-2 md:block">
         {links.map(({ label, href, icon: Icon, isActive }) => (
           <Link
             key={href}
             href={href}
             className={clsx(
-              "flex items-center p-4 rounded-lg leading-none text-onix md:w-full justify-center md:justify-start flex-1 transition-all duration-300",
+              "flex items-center p-4 rounded-lg leading-none text-onix w-full justify-start transition-all duration-300",
               {
                 "bg-sand": isActive,
                 "hover:bg-sand": !isActive,
               }
             )}
           >
-            <Icon size={20} className="mr-0 md:mr-2" />
-            <span className="hidden md:inline">{label}</span>
+            <Icon size={20} className="mr-2" />
+            <span>{label}</span>
           </Link>
         ))}
       </div>

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

@@ -43,7 +43,7 @@ export default function UsersTable({
     <>
       <div className="bg-blackamber p-4 rounded-lg">
         <div className="overflow-x-auto">
-          <div className="min-w-[800px] xl:min-w-full h-72 overflow-y-auto">
+          <div className="min-w-[800px] xl:min-w-full">
             <div className="flex sticky top-0 z-10">
               <div className="grid grid-cols-5 flex-1 font-bold uppercase bg-onix rounded-l-md">
                 <div className="p-4 text-left">{intl.settings.username as string}</div>
@@ -88,11 +88,14 @@ export default function UsersTable({
                     <div className="p-4 text-center">{age}</div>
                   </div>
                   <div className="w-24 shrink-0 sticky right-0 bg-blackamber p-4 flex items-center justify-center">
-                    <UserRoundPenIcon
+                    <button
+                      type="button"
                       onClick={() => handleEdit(user)}
-                      size={20}
-                      className="cursor-pointer hover:text-lilah transition-colors duration-300"
-                    />
+                      title={intl.settings.edit as string}
+                      className="border border-neutral-800 hover:text-pearl rounded-lg p-2 cursor-pointer transition-all duration-300 hover:border-lilah"
+                    >
+                      <UserRoundPenIcon size={16} />
+                    </button>
                   </div>
                 </div>
               );

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

@@ -1,19 +1,10 @@
 "use client";
 
 import Link from "next/link";
-import type { LucideIcon } from "lucide-react";
-import {
-  LanguagesIcon,
-  LogOutIcon,
-  BookOpenIcon,
-  Settings2Icon,
-} from "lucide-react";
-import { useEffect, useState } from "react";
 import { usePathname, useParams, useRouter } from "next/navigation";
-import SessionStatus from "@/hooks/SessionStatus";
 import AlertBox from "@/components/ui/AlertBox";
 import { logout } from "@/actions/logout";
-import { getVersion } from "@/actions/version";
+import { getFooterButtons } from "@/lib/nav/footerNav";
 import type { Dictionary, Session } from "@/lib/types";
 import type { VersionInfo } from "@/lib/versionInfo";
 
@@ -24,36 +15,12 @@ interface FooterNavProps {
   versionData: VersionInfo;
 }
 
-type FooterButton =
-  | {
-      type: "link";
-      icon: LucideIcon;
-      href: string;
-      target: string;
-      title: string;
-    }
-  | {
-      type: "button";
-      icon: LucideIcon;
-      title: string;
-      onClick: () => void;
-    };
-
 export default function FooterNav({
   lang,
   intl,
   user,
   versionData,
 }: FooterNavProps) {
-  const [latestVersion, setLatestVersion] = useState<string | null>(
-    versionData.latestVersion,
-  );
-  const [updateAvailable, setUpdateAvailable] = useState(
-    versionData.updateAvailable,
-  );
-  const [changelogUrl, setChangelogUrl] = useState(versionData.changelogUrl);
-  const currentVersion = versionData.currentVersion;
-
   const params = useParams();
   const router = useRouter();
   const pathname = usePathname();
@@ -75,70 +42,22 @@ export default function FooterNav({
     }
   };
 
-  const isLoggedIn = SessionStatus();
-
-  useEffect(() => {
-    async function checkVersion() {
-      try {
-        const data = await getVersion();
-        if (!data || "error" in data) return;
-        setLatestVersion(data.latestVersion);
-        setUpdateAvailable(data.updateAvailable);
-        setChangelogUrl(data.changelogUrl);
-      } catch {
-        console.warn("No se pudo verificar la versión más reciente");
-      }
-    }
-
-    checkVersion();
-    const interval = setInterval(checkVersion, 6 * 60 * 60 * 1000);
-    return () => clearInterval(interval);
-  }, []);
-
-  const buttons: FooterButton[] = [
-    {
-      type: "link",
-      icon: BookOpenIcon,
-      href: "https://bunko.alemartir.com/guides/manga",
-      target: "_blank",
-      title: intl.tooltip.userGuide as string,
-    },
-    {
-      type: "button",
-      icon: LanguagesIcon,
-      title: intl.tooltip.switchLang as string,
-      onClick: toggleLang,
-    },
-    ...(user?.isAdmin
-      ? [
-          {
-            type: "link" as const,
-            icon: Settings2Icon,
-            href: `/${lang}/settings`,
-            target: "_self",
-            title: intl.tooltip.settings as string,
-          },
-        ]
-      : []),
-    ...(isLoggedIn
-      ? [
-          {
-            type: "button" as const,
-            icon: LogOutIcon,
-            title: intl.tooltip.logout as string,
-            onClick: handleLogout,
-          },
-        ]
-      : []),
-  ];
+  const buttons = getFooterButtons({
+    intl,
+    lang,
+    user,
+    isLoggedIn: Boolean(user),
+    onToggleLang: toggleLang,
+    onLogout: handleLogout,
+  });
 
   return (
     <>
-      {updateAvailable && (
+      {versionData.updateAvailable && (
         <div className="text-sand mb-4">
-          <a href={changelogUrl} target="_blank" rel="noopener">
+          <a href={versionData.changelogUrl} target="_blank" rel="noopener">
             <AlertBox
-              title={`${intl.toastVersion.title as string} (${latestVersion})`}
+              title={`${intl.toastVersion.title as string} (${versionData.latestVersion})`}
               description={intl.toastVersion.description as string}
             />
           </a>
@@ -152,7 +71,7 @@ export default function FooterNav({
           rel="noopener"
           className="text-sm px-4 py-1 border border-stone-300 md:border-neutral-800 rounded-full hover:text-pearl transition-all duration-300 hover:border-lilah"
         >
-          {currentVersion}
+          {versionData.currentVersion}
         </a>
 
         <div className="flex items-center gap-2">

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

@@ -1,54 +1,26 @@
 "use client";
 
 import Link from "next/link";
-import type { LucideIcon } from "lucide-react";
-import {
-  HomeIcon as House,
-  LibraryBigIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  HeartIcon,
-  UserRoundIcon,
-} from "lucide-react";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { useEffect, useState, useRef } from "react";
 import { usePathname, useParams } from "next/navigation";
 import clsx from "clsx";
-import { requireRole, ROLES } from "@/lib/auth/roles";
-import type { Dictionary, Session, Role } from "@/lib/types";
-
-interface SubItem {
-  label: string;
-  href: string;
-  isActive: boolean;
-}
-
-interface NavLink {
-  label: string;
-  href?: string;
-  icon: LucideIcon;
-  isActive: boolean;
-  minRole: Role;
-  isDropdown?: boolean;
-  subItems?: SubItem[];
-}
+import { getMainNavLinks } from "@/lib/nav/mainNav";
+import type { Dictionary, Session } from "@/lib/types";
 
 interface MainNavProps {
   intl: Dictionary;
   user: Session;
 }
 
-export default function MainNav({
-  intl,
-  user,
-}: MainNavProps) {
+export default function MainNav({ intl, user }: 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 links = getMainNavLinks({ intl, user, lang: currentLang, pathname });
+  const isLibraryActive = links.some(
+    (link) => link.isDropdown && link.isActive,
+  );
 
   const [openLibraryMenu, setOpenLibraryMenu] = useState(false);
   const hasManuallyToggled = useRef(false);
@@ -69,56 +41,8 @@ export default function MainNav({
     hasManuallyToggled.current = true;
   };
 
-  const links: NavLink[] = [
-    {
-      label: intl.sidebar.home as string,
-      href: `/${currentLang}`,
-      icon: House,
-      isActive: pathname === `/${currentLang}`,
-      minRole: ROLES.MEMBER,
-    },
-    {
-      label: intl.sidebar.library as string,
-      icon: LibraryBigIcon,
-      isDropdown: true,
-      isActive: isLibraryActive,
-      minRole: ROLES.MEMBER,
-      subItems: [
-        {
-          label: intl.sidebar.manga as string,
-          href: `/${currentLang}/manga`,
-          isActive: pathname.startsWith(`/${currentLang}/manga`),
-        },
-        {
-          label: intl.sidebar.others as string,
-          href: `/${currentLang}/others`,
-          isActive: pathname.startsWith(`/${currentLang}/others`),
-        },
-        {
-          label: intl.sidebar.books as string,
-          href: `/${currentLang}/books`,
-          isActive: pathname.startsWith(`/${currentLang}/books`),
-        },
-      ],
-    },
-    {
-      label: intl.sidebar.favorites as string,
-      href: `/${currentLang}/favorites`,
-      icon: HeartIcon,
-      isActive: pathname.startsWith(`/${currentLang}/favorites`),
-      minRole: ROLES.MEMBER,
-    },
-    {
-      label: intl.sidebar.profile as string,
-      href: `/${currentLang}/profile`,
-      icon: UserRoundIcon,
-      isActive: pathname.startsWith(`/${currentLang}/profile`),
-      minRole: ROLES.MEMBER,
-    },
-  ].filter((link) => requireRole(user, link.minRole));
-
   return (
-    <nav className="mt-8 space-y-2">
+    <nav className="mt-8 md:space-y-2">
       {links.map((link) => {
         if (link.isDropdown) {
           return (
@@ -129,7 +53,7 @@ export default function MainNav({
                   "w-full flex items-center justify-between p-4 rounded-lg leading-none cursor-pointer border hover:border-lilah transition-all duration-300",
                   link.isActive
                     ? "text-onix bg-sand md:text-sand md:bg-onix md:border-pearl"
-                    : "border-pearl md:border-blackamber hover:text-pearl hover:border-lilah"
+                    : "border-pearl md:border-blackamber hover:text-pearl hover:border-lilah",
                 )}
               >
                 <span className="flex items-center">
@@ -144,7 +68,7 @@ export default function MainNav({
               </button>
 
               {openLibraryMenu && (
-                <div className="mt-2 space-y-2">
+                <div className="mt-1 md:mt-2 md:space-y-2">
                   {link.subItems?.map((subItem) => (
                     <Link
                       key={subItem.href}
@@ -154,7 +78,7 @@ export default function MainNav({
                         "block pl-12 pr-4 py-4 rounded-lg leading-none transition-all duration-300",
                         subItem.isActive
                           ? "bg-sand text-onix md:bg-onix md:text-sand"
-                          : "hover:bg-onix hover:text-pearl"
+                          : "hover:bg-onix hover:text-pearl",
                       )}
                     >
                       {subItem.label}
@@ -175,7 +99,7 @@ export default function MainNav({
               "flex items-center p-4 rounded-lg leading-none border transition-all duration-300",
               link.isActive
                 ? "border-onix bg-sand text-onix md:border-sand md:bg-onix md:text-sand hover:border-lilah"
-                : "border-pearl md:border-blackamber hover:text-pearl hover:border-lilah"
+                : "border-pearl md:border-blackamber hover:text-pearl hover:border-lilah",
             )}
           >
             <link.icon size={20} className="mr-2" />

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

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { BookOpenIcon } from "lucide-react";
+import { getSecondNavLinks } from "@/lib/nav/secondNav";
 import type { Dictionary } from "@/lib/types";
 
 interface SecondNavProps {
@@ -8,17 +8,10 @@ interface SecondNavProps {
 }
 
 export default function SecondNav({ intl, className }: SecondNavProps) {
-  const links = [
-    {
-      href: "https://bunko.alemartir.com",
-      icon: BookOpenIcon,
-      label: intl.noauth.guide as string,
-      external: true,
-    },
-  ];
+  const links = getSecondNavLinks(intl);
 
   return (
-    <div className={`mt-8 space-y-2 ${className}`}>
+    <div className={`mt-8 md:space-y-2 ${className}`}>
       {links.map(({ href, icon: Icon, label, external }, index) => (
         <Link
           key={index}

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

@@ -1,27 +1,28 @@
-import { getDictionary } from "@/lib/i18n/Dictionary";
 import SidebarLogo from "./siebarLogo";
 import SecondNav from "./SecondNav";
 import MainNav from "./MainNav";
 import ChallengeProg from "./ChallengeProg";
 import FooterNav from "./FooterNav";
-import { verifySession } from "@/lib/auth/verifySession";
 import SearchInput from "@/components/search/SearchImput";
 import SearchModal from "@/components/search/SearchModal";
-import { getChallengeData } from "@/lib/utils";
-import { getVersionInfo } from "@/lib/versionInfo";
-
-import type { Locale } from "@/lib/types";
+import type { ChallengeData, Dictionary, Locale, Session } from "@/lib/types";
+import type { VersionInfo } from "@/lib/versionInfo";
 
 interface SidebarProps {
   lang: Locale;
+  intl: Dictionary;
+  user: Session | null;
+  challengeData: ChallengeData | null;
+  versionData: VersionInfo;
 }
 
-export default async function Sidebar({ lang }: SidebarProps) {
-  const intl = await getDictionary(lang);
-  const user = await verifySession();
-  const challengeData = await getChallengeData(user);
-  const versionData = await getVersionInfo();
-
+export default function Sidebar({
+  lang,
+  intl,
+  user,
+  challengeData,
+  versionData,
+}: SidebarProps) {
   return (
     <>
       <aside className="hidden md:flex md:w-[35%] lg:w-[25%] xl:w-[21%] 2xl:w-[17%] bg-blackamber flex-col justify-between p-4">