@itsmrtr/bunkoshelf 1.15.0 → 1.16.0

package/dist/src/components/clubs/ClubDashboard.tsx

@@ -48,6 +48,7 @@ export default function ClubDashboard({ club, cycles, members, activities, activ
   const draftWorks = (index: number) => works.filter((work) => !readingWorkValues.has(workValue(work)) && !candidateValues.some((value, candidateIndex) => candidateIndex !== index && value === workValue(work)));
   const votingWorks = works.filter((work) => !readingWorkValues.has(workValue(work)) && !activeCandidates.some((candidate) => `${candidate.source_type}:${candidate.source_id}` === workValue(work)));
   const voteForCandidate = async (candidate: ClubCandidate) => { if (!voting) return; const result = await voteForClubCandidate(club.slug, voting.id, candidate.id); if (!result.success) setMessage(result.error); else refresh(); };
+  const chooseCandidate = async (candidate: ClubCandidate) => { if (!voting) return; const result = await selectClubWork(club.slug, voting.id, candidate.source_type, candidate.source_id); if (!result.success) setMessage(result.error === "Voting must be closed before choosing a work" ? labels.votingMustClose : result.error); else refresh(); };
   const confirmCandidateRemoval = async (candidateId: string) => { if (!voting || !await confirm({ title: labels.removeCandidateTitle, description: labels.removeCandidateDescription, confirmLabel: labels.removeCandidate, destructive: true })) return; const result = await removeClubCandidate(club.slug, voting.id, candidateId); if (!result.success) setMessage(result.error); else refresh(); };
   const confirmMemberRemoval = async (memberId: string) => { if (!await confirm({ title: labels.removeMemberTitle, description: labels.removeMemberDescription, confirmLabel: labels.removeMember, destructive: true })) return; const result = await removeClubMember(club.slug, memberId); if (!result.success) setMessage(result.error); else refresh(); };
   const confirmArchive = async () => { if (!await confirm({ title: labels.archiveTitle, description: labels.archiveDescription, confirmLabel: labels.archive, destructive: true })) return; const result = await archiveClub(club.slug); if (!result.success) setMessage(result.error); else refresh(); };
@@ -77,13 +78,13 @@ export default function ClubDashboard({ club, cycles, members, activities, activ
               <div className="relative aspect-[2/3] w-12 shrink-0 overflow-hidden rounded bg-blackamber"><Image src={candidate.cover || "/placeholder.svg?=v1"} alt={`Cover for ${candidate.title ?? ""}`} fill sizes="48px" className="object-cover" /></div>
               <p className="min-w-0 text-left">{candidateLabel(candidate)} <span className="text-sand">· {candidate.votes} {labels.votes}</span></p>
             </div>
-            {isManager && <div onClick={(event) => event.stopPropagation()} onKeyDown={(event) => event.stopPropagation()} className="flex shrink-0 items-center gap-4"><button onClick={async () => { const result = await selectClubWork(club.slug, voting.id, candidate.source_type, candidate.source_id); if (!result.success) setMessage(result.error); else refresh(); }} className="text-xs uppercase hover:underline cursor-pointer">{labels.choose}</button><button onClick={() => void confirmCandidateRemoval(candidate.id)} className="text-xs uppercase text-danger-alt hover:underline cursor-pointer">{labels.removeCandidate}</button></div>}
+            {isManager && <div onClick={(event) => event.stopPropagation()} onKeyDown={(event) => event.stopPropagation()} className="flex shrink-0 items-center gap-4"><button onClick={() => void chooseCandidate(candidate)} className="text-xs uppercase hover:underline cursor-pointer">{labels.choose}</button><button onClick={() => void confirmCandidateRemoval(candidate.id)} className="text-xs uppercase text-danger-alt hover:underline cursor-pointer">{labels.removeCandidate}</button></div>}
           </div>
         ))}
       </div>
     </section>}
     <section className="grid grid-cols-1 gap-4 xl:grid-cols-2">
-      <div className="min-w-0 min-h-44 bg-blackamber p-4 rounded-lg"><h2>{labels.participants}</h2><div className="mt-4 space-y-3">{members.map((member) => <div key={member.id} className="flex gap-3 items-center"><div className="flex-1"><p>{member.name ?? member.username}</p><div className="mt-1 flex items-center gap-3"><p className="text-xs uppercase text-sand">{memberStatus(member.status)}</p>{isManager && member.status === "APPROVED" && member.userId !== club.ownerId && <button onClick={() => void confirmMemberRemoval(member.id)} className="cursor-pointer rounded-lg border border-danger-alt px-3 py-2 text-xs font-bold uppercase leading-none text-danger-alt transition-all duration-300 hover:bg-danger-alt hover:text-pearl">{labels.remove}</button>}</div>{member.status === "APPROVED" && <div className="h-2 bg-onix rounded mt-1"><div className="h-full bg-lilah rounded" style={{ width: `${Math.round((member.progress ?? 0) * 100)}%` }} /></div>}</div><span>{member.status === "APPROVED" ? `${Math.round((member.progress ?? 0) * 100)}%` : ""}</span>{isManager && member.status === "PENDING" && <div className="flex gap-2"><Button variant="accent" onClick={async () => { await reviewClubMember(club.slug, member.id, "APPROVED"); refresh(); }} className="px-3 py-2 text-xs">{labels.accept}</Button><button onClick={async () => { await reviewClubMember(club.slug, member.id, "REJECTED"); refresh(); }} className="cursor-pointer rounded-lg border border-danger-alt px-3 py-2 text-xs font-bold uppercase leading-none text-danger-alt transition-all duration-300 hover:bg-danger-alt hover:text-pearl">{labels.reject}</button></div>}</div>)}</div></div>
+      <div className="min-w-0 min-h-44 bg-blackamber p-4 rounded-lg"><h2>{labels.participants}</h2><div className="mt-4 space-y-3">{members.map((member) => <div key={member.id} className="flex gap-3 items-center"><div className="flex-1"><p>{member.name ?? member.username}</p><div className="mt-1 flex items-center gap-3"><p className="text-xs uppercase text-sand">{memberStatus(member.status)}</p>{isManager && member.status === "APPROVED" && member.userId !== club.ownerId && <button onClick={() => void confirmMemberRemoval(member.id)} className="text-xs uppercase text-danger-alt hover:underline cursor-pointer">{labels.remove}</button>}</div>{member.status === "APPROVED" && <div className="h-2 bg-onix rounded mt-1"><div className="h-full bg-lilah rounded" style={{ width: `${Math.round((member.progress ?? 0) * 100)}%` }} /></div>}</div><span>{member.status === "APPROVED" ? `${Math.round((member.progress ?? 0) * 100)}%` : ""}</span>{isManager && member.status === "PENDING" && <div className="flex gap-2"><button onClick={async () => { await reviewClubMember(club.slug, member.id, "APPROVED"); refresh(); }} className="text-xs uppercase hover:underline cursor-pointer">{labels.accept}</button><button onClick={async () => { await reviewClubMember(club.slug, member.id, "REJECTED"); refresh(); }} className="text-xs uppercase text-danger-alt hover:underline cursor-pointer">{labels.reject}</button></div>}</div>)}</div></div>
       <div className="min-w-0 min-h-44 bg-blackamber p-4 rounded-lg"><h2>{labels.activity}</h2><div className="mt-4 space-y-3">{activities.map((activity) => <p key={activity.id}><span className="font-bold">{activity.name ?? activity.username}</span> {activity.type === "COMPLETED" ? labels.completedReading : `${labels.reachedMilestone} ${activity.label ?? ""}`}.</p>)}{!activities.length && <p>{labels.noActivity}</p>}</div></div>
     </section>
     {isManager && club.status === "ACTIVE" && <section className="bg-blackamber p-4 rounded-lg space-y-4">

package/dist/src/components/clubs/ClubInvite.tsx

@@ -12,5 +12,7 @@ export default function ClubInvite({ token, clubName, lang, signedIn, intl }: {
   const labels = intl.clubs as Record<string, string>;
   const joinMember = async () => { const result = await joinClubWithSession(token); if (!result.success) setError(result.error); else router.push(`/${lang}/clubs/${result.slug}`); };
   const joinGuest = async (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); const data = new FormData(event.currentTarget); const result = await joinClubAsGuest({ token, username: String(data.get("username")), password: String(data.get("password")) }); if (!result.success) setError(result.error); else router.push(`/${lang}/clubs/${result.slug}`); };
-  return <div className="p-4"><div className="bg-blackamber p-4 rounded-lg max-w-xl space-y-4"><p className="text-xs uppercase text-sand">{labels.inviteLabel}</p><h1 className="text-2xl leading-11 md:text-3xl md:leading-14">{clubName}</h1><p>{labels.invitePending}</p>{error && <p className="text-danger-alt">{error}</p>}{signedIn ? <Button variant="lightAlt" onClick={joinMember} className="px-8 py-4">{labels.requestJoin}</Button> : <form onSubmit={joinGuest} className="grid gap-4"><p className="font-bold">{labels.joinGuest}</p><input name="username" pattern="[A-Za-z0-9_-]{3,32}" required placeholder={labels.username} className="text-sand bg-onix border border-neutral-700 hover:border-pearl rounded-lg w-full px-5 py-3 transition-all duration-300" /><input name="password" type="password" minLength={8} required placeholder={labels.password} className="text-sand bg-onix border border-neutral-700 hover:border-pearl rounded-lg w-full px-5 py-3 transition-all duration-300" /><Button variant="lightAlt" className="w-fit px-8 py-4">{labels.createGuest}</Button></form>}</div></div>;
+  if (signedIn) return <div className="p-4"><div className="bg-blackamber p-4 rounded-lg max-w-xl space-y-4"><p className="text-xs uppercase text-sand">{labels.inviteLabel}</p><h1 className="text-2xl leading-11 md:text-3xl md:leading-14">{clubName}</h1><p>{labels.invitePending}</p>{error && <p className="text-danger-alt">{error}</p>}<Button variant="lightAlt" onClick={joinMember} className="px-8 py-4">{labels.requestJoin}</Button></div></div>;
+
+  return <div className="mx-auto mt-8 w-full max-w-sm px-4"><p className="text-xs uppercase text-sand">{labels.inviteLabel}</p><h1 className="mt-2 text-2xl leading-11 md:text-3xl md:leading-14">{clubName}</h1><p className="mt-4">{labels.invitePending}</p>{error && <p className="mt-4 text-danger-alt">{error}</p>}<form onSubmit={joinGuest} className="mt-6 w-full"><p className="mb-4 font-bold">{labels.joinGuest}</p><div className="mb-4"><input name="username" minLength={3} required autoComplete="username" placeholder={labels.username} className="w-full rounded-lg border border-neutral-700 bg-onix px-5 py-3 text-sand" /></div><div className="mb-4"><input name="password" type="password" minLength={8} required autoComplete="new-password" placeholder={labels.password} className="w-full rounded-lg border border-neutral-700 bg-onix px-5 py-3 text-sand" /></div><Button variant="dark" className="px-8 py-4">{labels.createGuest}</Button></form></div>;
 }

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

@@ -5,7 +5,6 @@ import { usePathname } from "next/navigation";
 import Link from "next/link";
 import { MenuIcon, SearchIcon } from "lucide-react";
 import MobNavModal from "./MobNavModal";
-import Button from "@/components/ui/Button";
 import type { Dictionary, Session, ChallengeData } from "@/lib/types";
 import type { VersionInfo } from "@/lib/versionInfo";
 import type { LibrarySectionCounts } from "@/lib/db/library";
@@ -31,9 +30,7 @@ export default function MobNavButton({
   const pathname = usePathname();
 
   useEffect(() => {
-    if (open) {
-      setOpen(false);
-    }
+    setOpen(false);
   }, [pathname]);
 
   return (
@@ -46,15 +43,13 @@ export default function MobNavButton({
         <SearchIcon size={28} className="text-onix" />
       </Link>
 
-      <Button
+      <button
         onClick={() => setOpen(true)}
-        variant="light"
-        size="icon"
-        className="size-14 rounded-full"
+        className="bg-pearl border border-stone-300 rounded-full p-3"
         aria-label="Open menu"
       >
         <MenuIcon size={28} className="text-onix" />
-      </Button>
+      </button>
 
       <MobNavModal
         isOpen={open}

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

@@ -0,0 +1,31 @@
+"use client";
+
+import { useState } from "react";
+import { ShieldCheckIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { updatePersonalParentalControl } from "@/actions/parental-control";
+import Switch from "@/components/ui/Switch";
+import { useToast } from "@/components/ToastProvider";
+import type { Dictionary, Locale, Session } from "@/lib/types";
+import { isAdult } from "@/lib/parentalControl";
+import type { ParentalControlMode } from "@/lib/parentalControl";
+
+export default function ParentalControlForm({ user, globallyEnabled, globalMode, lang, intl }: { user: Session; globallyEnabled: boolean; globalMode: ParentalControlMode; lang: Locale; intl: Dictionary }) {
+  const router = useRouter();
+  const [enabled, setEnabled] = useState(user.parentalControlEnabled);
+  const [mode, setMode] = useState(user.parentalControlMode);
+  const [loading, setLoading] = useState(false);
+  const { addToast } = useToast()!;
+  const profile = intl.profile as Record<string, string>;
+  const adult = isAdult(user);
+  const editable = globallyEnabled && adult;
+  async function save(nextEnabled = enabled, nextMode = mode) {
+    setLoading(true);
+    const result = await updatePersonalParentalControl({ enabled: nextEnabled, mode: nextMode }, lang);
+    setLoading(false);
+    if (result.success) { setEnabled(nextEnabled); setMode(nextMode); router.refresh(); }
+    else addToast({ title: intl.alerts.errorTt as string, description: profile.parentalControlUpdateError, variant: "error" });
+  }
+  const description = !globallyEnabled ? profile.parentalControlGlobalDisabled : user.birthYear === null ? profile.parentalControlMissingBirthDate : !adult ? globalMode === "strict" ? profile.parentalControlGlobalStrict : profile.parentalControlMinor : profile.parentalControlHelp;
+  return <section className="rounded-lg bg-blackamber p-4"><h2 className="mb-2 flex items-center gap-2"><ShieldCheckIcon size={28} />{profile.parentalControl}</h2><p className="text-neutral-300">{description}</p>{editable && <div className="mt-5 space-y-4"><div className="flex items-center justify-between gap-4"><span>{profile.parentalControlEnabled}</span><Switch checked={enabled} disabled={loading} onCheckedChange={(next) => void save(next, mode)} /></div>{enabled && <fieldset className="space-y-3" disabled={loading}><label className="grid grid-cols-[auto_1fr] items-start gap-x-3"><input className="mt-1.5" type="radio" checked={mode === "flexible"} onChange={() => void save(true, "flexible")} /><span className="font-bold leading-tight">{profile.parentalControlFlexible}</span><span className="col-start-2 text-sm leading-snug text-neutral-300">{profile.parentalControlFlexibleHelp}</span></label><label className="grid grid-cols-[auto_1fr] items-start gap-x-3"><input className="mt-1.5" type="radio" checked={mode === "strict"} onChange={() => void save(true, "strict")} /><span className="font-bold leading-tight">{profile.parentalControlStrict}</span><span className="col-start-2 text-sm leading-snug text-neutral-300">{profile.parentalControlStrictHelp}</span></label></fieldset>}</div>}</section>;
+}

package/dist/src/components/pwa/PwaProvider.tsx

@@ -2,7 +2,7 @@
 
 import { createContext, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { useRouter } from "next/navigation";
-import { flushOfflineOperations, getReadyVolumes, resumeOfflineDownloads } from "@/lib/client/offlineLibrary";
+import { flushOfflineOperations, getReadyVolumes, purgeRestrictedVolumes, resumeOfflineDownloads, type OfflineContentVisibilityPolicy } from "@/lib/client/offlineLibrary";
 
 interface PwaContextValue {
   online: boolean;
@@ -30,7 +30,7 @@ function subscribe(callback: () => void) {
   };
 }
 
-export default function PwaProvider({ userId, children }: { userId?: string; children: React.ReactNode }) {
+export default function PwaProvider({ userId, contentVisibility, children }: { userId?: string; contentVisibility: OfflineContentVisibilityPolicy; children: React.ReactNode }) {
   const online = useSyncExternalStore(subscribe, () => navigator.onLine, () => true);
   const router = useRouter();
   const [offlineSlugs, setOfflineSlugs] = useState<Set<string>>(new Set());
@@ -91,6 +91,11 @@ export default function PwaProvider({ userId, children }: { userId?: string; chi
     return () => window.removeEventListener("bunko:offline-change", load);
   }, [userId]);
 
+  useEffect(() => {
+    if (!userId) return;
+    void purgeRestrictedVolumes(userId, contentVisibility);
+  }, [contentVisibility, userId]);
+
   useEffect(() => {
     document.documentElement.dataset.offline = online ? "false" : "true";
   }, [online]);

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

@@ -5,6 +5,7 @@ import { UserRoundPlusIcon } from "lucide-react";
 import { useToast } from "@/components/ToastProvider";
 import { createUser } from "@/actions/users";
 import Button from "@/components/ui/Button";
+import Switch from "@/components/ui/Switch";
 import type { Dictionary } from "@/lib/types";
 import type { Role } from "@/lib/types/auth";
 
@@ -18,6 +19,8 @@ export default function CreateUserForm({ intl }: CreateUserFormProps) {
   const [name, setName] = useState("");
   const [lastname, setLastname] = useState("");
   const [birthYear, setBirthYear] = useState("");
+  const [birthMonth, setBirthMonth] = useState("");
+  const [birthDay, setBirthDay] = useState("");
   const [isAdmin, setIsAdmin] = useState(false);
   const [role, setRole] = useState<Role>("MEMBER");
   const [error, setError] = useState<string | null>(null);
@@ -33,6 +36,8 @@ export default function CreateUserForm({ intl }: CreateUserFormProps) {
       name,
       lastname,
       birthYear: birthYear ? parseInt(birthYear) : null,
+      birthMonth: birthMonth ? parseInt(birthMonth) : null,
+      birthDay: birthDay ? parseInt(birthDay) : null,
       isAdmin,
       role,
     };
@@ -50,6 +55,8 @@ export default function CreateUserForm({ intl }: CreateUserFormProps) {
       setName("");
       setLastname("");
       setBirthYear("");
+      setBirthMonth("");
+      setBirthDay("");
       setIsAdmin(false);
       setRole("MEMBER");
       setError(null);
@@ -75,72 +82,24 @@ export default function CreateUserForm({ intl }: CreateUserFormProps) {
       {error && <div className="text-red-500 mb-4 text-center">{error}</div>}
 
       <form onSubmit={handleSubmit} className="space-y-4">
-        <input
-          type="text"
-          value={username}
-          onChange={(e) => setUsername(e.target.value)}
-          placeholder={intl.settings.username as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-          required
-        />
-        <input
-          type="password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          placeholder={intl.settings.password as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-          required
-        />
-        <input
-          type="text"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder={intl.settings.nameOpt as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-        />
-        <input
-          type="text"
-          value={lastname}
-          onChange={(e) => setLastname(e.target.value)}
-          placeholder={intl.settings.lastnameOpt as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-        />
-        <input
-          type="number"
-          value={birthYear}
-          onChange={(e) => setBirthYear(e.target.value)}
-          placeholder={intl.settings.birthYearOpt as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-        />
-        <div className="flex items-center space-x-2">
-          <input
-            type="checkbox"
-            checked={isAdmin}
-            onChange={() => setIsAdmin(!isAdmin)}
-            id="isAdmin"
-          />
-          <label htmlFor="isAdmin">{intl.settings.isAdmin as string}</label>
+        <div className="grid gap-4 md:grid-cols-2">
+          <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder={intl.settings.username as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" required />
+          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder={intl.settings.password as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" required />
         </div>
-        <div className="flex flex-col space-y-1">
-          <label htmlFor="role">{intl.settings.role as string}</label>
-          <select
-            id="role"
-            value={role}
-            onChange={(e) => setRole(e.target.value as Role)}
-            className="bg-pearl border border-onix rounded-lg px-5 py-3"
-          >
-            <option value="ADMIN">{intl.settings.roleAdmin as string}</option>
-            <option value="MEMBER">{intl.settings.roleMember as string}</option>
-            <option value="GUEST">{intl.settings.roleGuest as string}</option>
-          </select>
+        <div className="grid gap-4 md:grid-cols-2">
+          <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={intl.settings.nameOpt as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" />
+          <input type="text" value={lastname} onChange={(e) => setLastname(e.target.value)} placeholder={intl.settings.lastnameOpt as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" />
         </div>
-        <Button
-          type="submit"
-          variant="lightAlt"
-          className="px-8 py-4"
-        >
-          {intl.settings.createUser as string}
-        </Button>
+        <div className="grid gap-4 md:grid-cols-3">
+          <input type="number" min="1" max="31" value={birthDay} onChange={(e) => setBirthDay(e.target.value)} placeholder={intl.settings.birthDay as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" required />
+          <input type="number" min="1" max="12" value={birthMonth} onChange={(e) => setBirthMonth(e.target.value)} placeholder={intl.settings.birthMonth as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" required />
+          <input type="number" value={birthYear} onChange={(e) => setBirthYear(e.target.value)} placeholder={intl.settings.birthYearOpt as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" required />
+        </div>
+        <div className="grid items-center gap-4 md:grid-cols-2">
+          <select aria-label={intl.settings.role as string} value={role} onChange={(e) => setRole(e.target.value as Role)} className="bg-pearl border border-onix rounded-lg px-5 py-3"><option value="ADMIN">{intl.settings.roleAdmin as string}</option><option value="MEMBER">{intl.settings.roleMember as string}</option><option value="GUEST">{intl.settings.roleGuest as string}</option></select>
+          <div className="flex items-center justify-between gap-4 px-5 py-3"><span>{intl.settings.isAdmin as string}</span><Switch checked={isAdmin} onCheckedChange={setIsAdmin} /></div>
+        </div>
+        <Button type="submit" variant="lightAlt" className="px-8 py-4">{intl.settings.createUser as string}</Button>
       </form>
     </div>
   );

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

@@ -6,6 +6,7 @@ import { useToast } from "@/components/ToastProvider";
 import { useAlertDialog } from "@/components/AlertDialogProvider";
 import { adminUpdateUser, deleteUser } from "@/actions/users";
 import Button from "@/components/ui/Button";
+import Switch from "@/components/ui/Switch";
 import type { Dictionary } from "@/lib/types";
 import type { Role } from "@/lib/types/auth";
 
@@ -17,6 +18,8 @@ interface UserData {
   name: string | null;
   lastname: string | null;
   birthYear: number | null;
+  birthMonth: number | null;
+  birthDay: number | null;
 }
 
 interface EditUserFormProps {
@@ -37,6 +40,8 @@ export default function EditUserForm({
   const [name, setName] = useState("");
   const [lastname, setLastname] = useState("");
   const [birthYear, setBirthYear] = useState("");
+  const [birthMonth, setBirthMonth] = useState("");
+  const [birthDay, setBirthDay] = useState("");
   const [isAdmin, setIsAdmin] = useState(false);
   const [role, setRole] = useState<Role>("MEMBER");
   const [error] = useState<string | null>(null);
@@ -53,6 +58,8 @@ export default function EditUserForm({
       setName(user.name || "");
       setLastname(user.lastname || "");
       setBirthYear(user.birthYear?.toString() || "");
+      setBirthMonth(user.birthMonth?.toString() || "");
+      setBirthDay(user.birthDay?.toString() || "");
       setIsAdmin(user.isAdmin || false);
       setRole((user.role as Role) || "MEMBER");
     }
@@ -68,6 +75,8 @@ export default function EditUserForm({
       name,
       lastname,
       birthYear: birthYear ? parseInt(birthYear) : null,
+      birthMonth: birthMonth ? parseInt(birthMonth) : null,
+      birthDay: birthDay ? parseInt(birthDay) : null,
       isAdmin,
       role,
     };
@@ -131,85 +140,22 @@ export default function EditUserForm({
 
       {error && <div className="text-red-500 mb-4 text-center">{error}</div>}
 
-      <form onSubmit={handleSubmit} className="space-x-4 space-y-4">
-        <input
-          type="text"
-          value={username}
-          onChange={(e) => setUsername(e.target.value)}
-          placeholder={intl.settings.username as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-          required
-        />
-        <input
-          type="password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          placeholder={intl.settings.passwordNew as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-        />
-        <input
-          type="text"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder={intl.settings.nameOpt as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-        />
-        <input
-          type="text"
-          value={lastname}
-          onChange={(e) => setLastname(e.target.value)}
-          placeholder={intl.settings.lastnameOpt as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-        />
-        <input
-          type="number"
-          value={birthYear}
-          onChange={(e) => setBirthYear(e.target.value)}
-          placeholder={intl.settings.birthYearOpt as string}
-          className="bg-pearl border border-onix rounded-lg w-full px-5 py-3"
-        />
-        {!isSelf && (
-          <>
-            <div className="flex items-center space-x-2">
-              <input
-                type="checkbox"
-                checked={isAdmin}
-                onChange={() => setIsAdmin(!isAdmin)}
-                id="isAdmin"
-              />
-              <label htmlFor="isAdmin">{intl.settings.isAdmin as string}</label>
-            </div>
-            <div className="flex flex-col space-y-1">
-              <label htmlFor="role">{intl.settings.role as string}</label>
-              <select
-                id="role"
-                value={role}
-                onChange={(e) => setRole(e.target.value as Role)}
-                className="bg-pearl border border-onix rounded-lg px-5 py-3"
-              >
-                <option value="ADMIN">{intl.settings.roleAdmin as string}</option>
-                <option value="MEMBER">{intl.settings.roleMember as string}</option>
-                <option value="GUEST">{intl.settings.roleGuest as string}</option>
-              </select>
-            </div>
-          </>
-        )}
-        <Button
-          type="submit"
-          variant="lightAlt"
-          className="px-8 py-4"
-        >
-          {intl.settings.updateUser as string}
-        </Button>
-        {!isSelf && (
-          <button
-            type="button"
-            onClick={handleDelete}
-            className="font-bold px-8 py-4 rounded-lg leading-none uppercase text-sand bg-red-700 border border-red-700 hover:bg-red-800 transition-all duration-300 cursor-pointer"
-          >
-            {intl.settings.deleteUser as string}
-          </button>
-        )}
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="grid gap-4 md:grid-cols-2">
+          <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder={intl.settings.username as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" required />
+          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder={intl.settings.passwordNew as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" />
+        </div>
+        <div className="grid gap-4 md:grid-cols-2">
+          <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={intl.settings.nameOpt as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" />
+          <input type="text" value={lastname} onChange={(e) => setLastname(e.target.value)} placeholder={intl.settings.lastnameOpt as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" />
+        </div>
+        <div className="grid gap-4 md:grid-cols-3">
+          <input type="number" min="1" max="31" value={birthDay} onChange={(e) => setBirthDay(e.target.value)} placeholder={intl.settings.birthDay as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" />
+          <input type="number" min="1" max="12" value={birthMonth} onChange={(e) => setBirthMonth(e.target.value)} placeholder={intl.settings.birthMonth as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" />
+          <input type="number" value={birthYear} onChange={(e) => setBirthYear(e.target.value)} placeholder={intl.settings.birthYearOpt as string} className="bg-pearl border border-onix rounded-lg w-full px-5 py-3" />
+        </div>
+        {!isSelf && <div className="grid items-center gap-4 md:grid-cols-2"><select aria-label={intl.settings.role as string} value={role} onChange={(e) => setRole(e.target.value as Role)} className="bg-pearl border border-onix rounded-lg px-5 py-3"><option value="ADMIN">{intl.settings.roleAdmin as string}</option><option value="MEMBER">{intl.settings.roleMember as string}</option><option value="GUEST">{intl.settings.roleGuest as string}</option></select><div className="flex items-center justify-between gap-4 px-5 py-3"><span>{intl.settings.isAdmin as string}</span><Switch checked={isAdmin} onCheckedChange={setIsAdmin} /></div></div>}
+        <div className="flex flex-wrap gap-4"><Button type="submit" variant="lightAlt" className="px-8 py-4">{intl.settings.updateUser as string}</Button>{!isSelf && <button type="button" onClick={handleDelete} className="font-bold px-8 py-4 rounded-lg leading-none uppercase text-sand bg-red-700 border border-red-700 hover:bg-red-800 transition-all duration-300 cursor-pointer">{intl.settings.deleteUser as string}</button>}</div>
       </form>
     </div>
   );

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

@@ -0,0 +1,27 @@
+"use client";
+
+import { useState } from "react";
+import { ShieldCheckIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { updateGlobalParentalControl } from "@/actions/parental-control";
+import Switch from "@/components/ui/Switch";
+import { useToast } from "@/components/ToastProvider";
+import type { Dictionary, Locale } from "@/lib/types";
+import type { ParentalControlMode } from "@/lib/parentalControl";
+
+export default function ParentalControlSettings({ enabled, mode: initialMode, lang, intl }: { enabled: boolean; mode: ParentalControlMode; lang: Locale; intl: Dictionary }) {
+  const router = useRouter();
+  const [value, setValue] = useState(enabled);
+  const [mode, setMode] = useState(initialMode);
+  const [loading, setLoading] = useState(false);
+  const { addToast } = useToast()!;
+  const labels = intl.settings as Record<string, string>;
+  async function update(next: boolean, nextMode = mode) {
+    setLoading(true);
+    const result = await updateGlobalParentalControl(next, nextMode, lang);
+    setLoading(false);
+    if (result.success) { setValue(next); setMode(nextMode); router.refresh(); }
+    else addToast({ title: intl.alerts.errorTt as string, description: labels.parentalControlUpdateError, variant: "error" });
+  }
+  return <section className="rounded-lg bg-blackamber p-4"><div className="flex items-start justify-between gap-4"><div><h3 className="flex items-center gap-2 text-base"><ShieldCheckIcon size={20} />{labels.parentalControl}</h3><p className="mt-1 text-neutral-300">{labels.parentalControlGlobalHelp}</p></div><Switch checked={value} disabled={loading} onCheckedChange={(next) => void update(next)} /></div>{value && <fieldset className="mt-4 space-y-3" disabled={loading}><legend className="mb-2 font-bold">{labels.parentalControlGlobalLevel}</legend><label className="grid grid-cols-[auto_1fr] items-start gap-x-3"><input className="mt-1.5" type="radio" checked={mode === "flexible"} onChange={() => void update(true, "flexible")} /><span className="font-bold leading-tight">{labels.parentalControlFlexible}</span><span className="col-start-2 text-sm leading-snug text-neutral-300">{labels.parentalControlGlobalFlexibleHelp}</span></label><label className="grid grid-cols-[auto_1fr] items-start gap-x-3"><input className="mt-1.5" type="radio" checked={mode === "strict"} onChange={() => void update(true, "strict")} /><span className="font-bold leading-tight">{labels.parentalControlStrict}</span><span className="col-start-2 text-sm leading-snug text-neutral-300">{labels.parentalControlGlobalStrictHelp}</span></label></fieldset>}<p className="mt-4 font-bold">{value ? labels.parentalControlGlobalOn : labels.parentalControlGlobalOff}</p></section>;
+}

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

@@ -14,6 +14,8 @@ interface UserRow {
   name: string | null;
   lastname: string | null;
   birthYear: number | null;
+  birthMonth: number | null;
+  birthDay: number | null;
 }
 
 interface UsersTableProps {

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

@@ -0,0 +1,28 @@
+"use client";
+
+import clsx from "clsx";
+import type { ButtonHTMLAttributes } from "react";
+
+interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "type"> {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}
+
+export default function Switch({ checked, onCheckedChange, className, ...props }: SwitchProps) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      onClick={() => onCheckedChange(!checked)}
+      className={clsx(
+        "relative h-7 w-12 shrink-0 rounded-full transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lilah",
+        checked ? "bg-lilah" : "bg-neutral-700",
+        className
+      )}
+      {...props}
+    >
+      <span className={clsx("absolute left-1 top-1 h-5 w-5 rounded-full bg-pearl transition-transform", checked ? "translate-x-5" : "translate-x-0")} />
+    </button>
+  );
+}

package/dist/src/lib/client/offlineLibrary.ts

@@ -1,6 +1,7 @@
 "use client";
 
 import type { LibrarySection } from "@/lib/librarySection";
+import { ageRatingMap } from "@/lib/mangaMetadata";
 
 const DB_NAME = "bunko-pwa";
 const DB_VERSION = 1;
@@ -33,6 +34,12 @@ export interface OfflineVolume {
   totalPages: number;
 }
 
+export interface OfflineContentVisibilityPolicy {
+  enabled: boolean;
+  maxAge: number | null;
+  allowUnrated: boolean;
+}
+
 export interface OfflineDownload {
   key: string;
   userId: string;
@@ -173,6 +180,26 @@ export async function getReadyVolumes(userId: string, section?: LibrarySection)
   return ready.sort((a, b) => a.title.localeCompare(b.title));
 }
 
+export async function purgeRestrictedVolumes(userId: string, policy: OfflineContentVisibilityPolicy) {
+  if (!policy.enabled) return;
+  const db = await openOfflineLibrary();
+  const tx = db.transaction([VOLUMES, PAGES, DOWNLOADS], "readwrite");
+  const volumes = await request<Array<OfflineVolume & { key: string }>>(tx.objectStore(VOLUMES).index("userId").getAll(userId));
+  for (const volume of volumes) {
+    const ageRating = typeof volume.metadata.ageRating === "string" ? volume.metadata.ageRating : null;
+    const minimum = ageRatingMap(ageRating);
+    const allowed = minimum === null ? policy.allowUnrated : minimum <= (policy.maxAge ?? 18);
+    if (allowed) continue;
+    const pageKeys = await request<IDBValidKey[]>(tx.objectStore(PAGES).index("volume").getAllKeys([userId, volume.id]));
+    for (const key of pageKeys) tx.objectStore(PAGES).delete(key);
+    tx.objectStore(VOLUMES).delete(volume.key);
+    tx.objectStore(DOWNLOADS).delete(downloadKey(userId, volume.id));
+  }
+  await transactionDone(tx);
+  db.close();
+  emitChange();
+}
+
 export async function getDownload(userId: string, volumeId: string) {
   const db = await openOfflineLibrary();
   const tx = db.transaction(DOWNLOADS, "readonly");

package/dist/src/lib/db/appSettings.ts

@@ -0,0 +1,25 @@
+import { queryOne, execute } from "./query";
+import type { ParentalControlMode } from "@/lib/parentalControl";
+
+export interface AppSettings {
+  parentalControlEnabled: boolean;
+  parentalControlMode: ParentalControlMode;
+}
+
+export async function getAppSettings(): Promise<AppSettings> {
+  const row = await queryOne<{ parental_control_enabled: boolean; parental_control_mode: ParentalControlMode }>(
+    "SELECT parental_control_enabled, parental_control_mode FROM app_settings WHERE id = 'global' LIMIT 1"
+  );
+
+  return {
+    parentalControlEnabled: row?.parental_control_enabled ?? false,
+    parentalControlMode: row?.parental_control_mode ?? "flexible",
+  };
+}
+
+export async function updateParentalControlEnabled(enabled: boolean, mode: ParentalControlMode): Promise<void> {
+  await execute(
+    "UPDATE app_settings SET parental_control_enabled = $1, parental_control_mode = $2, updated_at = NOW() WHERE id = 'global'",
+    [enabled, mode]
+  );
+}