@itsmrtr/bunkoshelf 1.3.2 → 1.4.1

package/dist/src/components/stats/MonthlyReads.tsx

@@ -29,9 +29,12 @@ export default function MonthlyReads({
   bgColor,
   textColor,
 }: MonthlyReadsProps) {
+  const [isMounted, setIsMounted] = useState(false);
   const [data, setData] = useState<ChartEntry[]>([]);
 
   useEffect(() => {
+    setIsMounted(true);
+
     async function fetchMonthlyReads() {
       const json = await getReaderStats();
       if ("monthlyReads" in json && json.monthlyReads) {
@@ -56,54 +59,56 @@ export default function MonthlyReads({
       <h3 className="text-base mb-4">{stats.ttMonthlyRead as string}</h3>
       <div className="overflow-x-auto">
         <div className="min-w-[400px] md:min-w-[500px] h-72 uppercase">
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart
-              data={data}
-              barCategoryGap="30%"
-              barGap={2}
-              margin={{ top: 0, right: 0, bottom: 0, left: -35 }}
-            >
-              <XAxis
-                dataKey="name"
-                tick={{ fill: "currentColor", fontSize: 12 }}
-                axisLine={{ stroke: "currentColor" }}
-                tickLine={false}
-              />
-              <YAxis
-                tick={{ fill: "currentColor", fontSize: 12 }}
-                axisLine={{ stroke: "currentColor" }}
-                tickLine={false}
-                allowDecimals={false}
-              />
-              <Tooltip
-                cursor={{ fill: "transparent" }}
-                contentStyle={{
-                  backgroundColor: "#151515",
-                  border: "none",
-                  borderRadius: "8px",
-                  fontSize: "0.875rem",
-                }}
-                labelStyle={{ color: "#e5e0dc" }}
-                formatter={(value) => [
-                  String(value ?? 0),
-                  stats.tooltip as string,
-                ]}
-              />
-              <Bar
-                dataKey="count"
-                fill="#8a6fdc"
-                radius={[4, 4, 0, 0]}
-                activeBar={{ fill: "#f7f2ec" }}
+          {isMounted ? (
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart
+                data={data}
+                barCategoryGap="30%"
+                barGap={2}
+                margin={{ top: 0, right: 0, bottom: 0, left: -35 }}
               >
-                <LabelList
-                  dataKey="count"
-                  position="top"
-                  fill="#737373"
-                  fontSize={14}
+                <XAxis
+                  dataKey="name"
+                  tick={{ fill: "currentColor", fontSize: 12 }}
+                  axisLine={{ stroke: "currentColor" }}
+                  tickLine={false}
+                />
+                <YAxis
+                  tick={{ fill: "currentColor", fontSize: 12 }}
+                  axisLine={{ stroke: "currentColor" }}
+                  tickLine={false}
+                  allowDecimals={false}
                 />
-              </Bar>
-            </BarChart>
-          </ResponsiveContainer>
+                <Tooltip
+                  cursor={{ fill: "transparent" }}
+                  contentStyle={{
+                    backgroundColor: "#151515",
+                    border: "none",
+                    borderRadius: "8px",
+                    fontSize: "0.875rem",
+                  }}
+                  labelStyle={{ color: "#e5e0dc" }}
+                  formatter={(value) => [
+                    String(value ?? 0),
+                    stats.tooltip as string,
+                  ]}
+                />
+                <Bar
+                  dataKey="count"
+                  fill="#8a6fdc"
+                  radius={[4, 4, 0, 0]}
+                  activeBar={{ fill: "#f7f2ec" }}
+                >
+                  <LabelList
+                    dataKey="count"
+                    position="top"
+                    fill="#737373"
+                    fontSize={14}
+                  />
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+          ) : null}
         </div>
       </div>
     </div>

package/dist/src/components/stats/ReaderPanel.tsx

@@ -66,21 +66,6 @@ export default async function ReaderStatsPanel({
   const monthlyReads = data?.monthlyReads ?? [];
   const allReadDates = data?.allReadDates ?? [];
 
-  const readDaySet = new Set(dailyReading.map(({ date }) => date));
-  let currentDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-  let streak = 0;
-  while (true) {
-    const y = currentDate.getFullYear();
-    const m = String(currentDate.getMonth() + 1).padStart(2, "0");
-    const d = String(currentDate.getDate()).padStart(2, "0");
-    if (readDaySet.has(`${y}-${m}-${d}`)) {
-      streak++;
-      currentDate.setDate(currentDate.getDate() - 1);
-    } else {
-      break;
-    }
-  }
-
   let lastRead = "—";
   if (dailyReading.length > 0) {
     lastRead = formatLoggedDate(dailyReading[0].date, lang, thisYear);
@@ -130,7 +115,7 @@ export default async function ReaderStatsPanel({
     <section className={`grid grid-cols-2 ${mdCols} w-full gap-4`}>
       <TileStreak
         title={stats.streak as string}
-        streak={streak}
+        dailyReadingDates={dailyReading.map(({ date }) => date)}
         daysLabel={stats.days as string}
         bgColor={bgColor}
         textColor={textColor}

package/dist/src/components/stats/TileStreak.tsx

@@ -1,12 +1,45 @@
+"use client";
+
 type TileStreakProps = {
   title: string;
-  streak: number;
+  dailyReadingDates: string[];
   daysLabel: string;
   bgColor: string;
   textColor: string;
 };
 
-export default function TileStreak({ title, streak, daysLabel, bgColor, textColor }: TileStreakProps) {
+function formatLocalDate(date: Date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+
+  return `${year}-${month}-${day}`;
+}
+
+function getCurrentReadingStreak(dailyReadingDates: string[]) {
+  const readDaySet = new Set(dailyReadingDates);
+  const currentDate = new Date();
+  currentDate.setHours(0, 0, 0, 0);
+
+  let streak = 0;
+
+  while (readDaySet.has(formatLocalDate(currentDate))) {
+    streak++;
+    currentDate.setDate(currentDate.getDate() - 1);
+  }
+
+  return streak;
+}
+
+export default function TileStreak({
+  title,
+  dailyReadingDates,
+  daysLabel,
+  bgColor,
+  textColor,
+}: TileStreakProps) {
+  const streak = getCurrentReadingStreak(dailyReadingDates);
+
   return (
     <div className={`h-[110px] rounded-lg ${bgColor} p-4 2xl:px-4 2xl:pt-4 2xl:pb-5 flex flex-col justify-between`}>
       <span className={`${textColor} text-sm uppercase`}>{title}</span>

package/dist/src/components/stats/TopGenres.tsx

@@ -24,9 +24,12 @@ export default function TopGenres({
   bgColor,
   textColor,
 }: TopGenresProps) {
+  const [isMounted, setIsMounted] = useState(false);
   const [data, setData] = useState<GenreStatEntry[]>([]);
 
   useEffect(() => {
+    setIsMounted(true);
+
     async function fetchGenres() {
       try {
         const result = await getGenresStats();
@@ -49,40 +52,42 @@ export default function TopGenres({
     >
       <h3 className="text-base mb-4">{stats.ttGenres as string}</h3>
       <div className="w-full h-72">
-        <ResponsiveContainer width="100%" height="100%">
-          <RadarChart data={data}>
-            <PolarGrid stroke="#333" />
-            <PolarAngleAxis
-              dataKey="genre"
-              tick={{ fill: "currentColor", fontSize: 12 }}
-            />
-            <PolarRadiusAxis
-              tick={{ fill: "currentColor", fontSize: 10 }}
-              stroke="#444"
-              axisLine={false}
-              tickLine={false}
-            />
-            <Tooltip
-              contentStyle={{
-                backgroundColor: "#151515",
-                border: "none",
-                borderRadius: "8px",
-                fontSize: "0.875rem",
-              }}
-              labelStyle={{ color: "#e5e0dc" }}
-              formatter={(value) => [
-                String(value ?? 0),
-                stats.tooltip as string,
-              ]}
-            />
-            <Radar
-              name="Lecturas"
-              dataKey="user"
-              fill="#8a6fdc"
-              fillOpacity={0.6}
-            />
-          </RadarChart>
-        </ResponsiveContainer>
+        {isMounted ? (
+          <ResponsiveContainer width="100%" height="100%">
+            <RadarChart data={data}>
+              <PolarGrid stroke="#333" />
+              <PolarAngleAxis
+                dataKey="genre"
+                tick={{ fill: "currentColor", fontSize: 12 }}
+              />
+              <PolarRadiusAxis
+                tick={{ fill: "currentColor", fontSize: 10 }}
+                stroke="#444"
+                axisLine={false}
+                tickLine={false}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: "#151515",
+                  border: "none",
+                  borderRadius: "8px",
+                  fontSize: "0.875rem",
+                }}
+                labelStyle={{ color: "#e5e0dc" }}
+                formatter={(value) => [
+                  String(value ?? 0),
+                  stats.tooltip as string,
+                ]}
+              />
+              <Radar
+                name="Lecturas"
+                dataKey="user"
+                fill="#8a6fdc"
+                fillOpacity={0.6}
+              />
+            </RadarChart>
+          </ResponsiveContainer>
+        ) : null}
       </div>
     </div>
   );

package/dist/src/components/ui/MobileSecondaryNav.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import Link from "next/link";
+import { ChevronDownIcon, ChevronUpIcon, type LucideIcon } from "lucide-react";
+import clsx from "clsx";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+export interface MobileSecondaryNavItem {
+  label: string;
+  href: string;
+  icon: LucideIcon;
+  isActive: boolean;
+  badge?: string | number | null;
+}
+
+interface MobileSecondaryNavProps {
+  items: MobileSecondaryNavItem[];
+}
+
+export default function MobileSecondaryNav({ items }: MobileSecondaryNavProps) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const activeItem = useMemo(
+    () => items.find((item) => item.isActive) ?? items[0],
+    [items],
+  );
+
+  useEffect(() => {
+    setOpen(false);
+  }, [activeItem?.href]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const handlePointerDown = (event: MouseEvent) => {
+      if (!containerRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [open]);
+
+  if (!activeItem) {
+    return null;
+  }
+
+  const ActiveIcon = activeItem.icon;
+
+  return (
+    <div ref={containerRef} className="md:hidden mt-4 relative">
+      <button
+        type="button"
+        onClick={() => setOpen((prev) => !prev)}
+        aria-expanded={open}
+        className="w-full flex items-center justify-between gap-3 p-4 rounded-lg bg-sand text-onix leading-tight transition-all duration-300"
+      >
+        <span className="flex items-center min-w-0">
+          <ActiveIcon size={20} className="mr-2 shrink-0" />
+          <span className="truncate">{activeItem.label}</span>
+          {activeItem.badge !== undefined && activeItem.badge !== null && (
+            <span className="ml-2 text-xs px-2 py-0.5 rounded-sm bg-pearl shrink-0 uppercase">
+              {activeItem.badge}
+            </span>
+          )}
+        </span>
+        {open ? (
+          <ChevronUpIcon size={20} className="shrink-0" />
+        ) : (
+          <ChevronDownIcon size={20} className="shrink-0" />
+        )}
+      </button>
+
+      {open && (
+        <div className="absolute left-0 right-0 top-full mt-2 z-20 rounded-lg bg-blackamber p-2">
+          <nav className="space-y-1">
+            {items.map(({ href, icon: Icon, label, isActive, badge }) => (
+              <Link
+                key={href}
+                href={href}
+                prefetch={false}
+                onClick={() => setOpen(false)}
+                className={clsx(
+                  "flex items-center justify-between gap-3 rounded p-3 leading-tight transition-all duration-300",
+                  isActive
+                    ? "bg-sand text-onix"
+                    : "text-sand hover:bg-onix hover:text-pearl",
+                )}
+              >
+                <span className="flex items-center min-w-0">
+                  <Icon size={20} className="mr-2 shrink-0" />
+                  <span className="truncate">{label}</span>
+                </span>
+                {badge !== undefined && badge !== null && (
+                  <span
+                    className={clsx(
+                      "text-xs px-2 py-0.5 rounded-sm shrink-0 uppercase",
+                      isActive ? "bg-pearl text-onix" : "bg-sand text-onix",
+                    )}
+                  >
+                    {badge}
+                  </span>
+                )}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      )}
+    </div>
+  );
+}