perf/context

app/(private)/dashboard/layout.tsx

@@ -1,26 +1,26 @@
 "use client";
 import Sidebar from "@/app/(private)/_components/sidebar";
 import CookieBanner from "@/components/cookies";
-import CookieContextProvider from "@/context/cookie";
+import CookieMenuContextProvider from "@/context/cookie/menu";
 import { useDashboardContext } from "@/context/dashboard";
 import { cn } from "@/lib/utils";
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
   const dashboardCtx = useDashboardContext();
   return (
     <>
-      <Sidebar />
-      <main
-        id="content"
-        className={cn(
-          "min-h-[100svh] w-full bg-background p-12 pt-[10rem] transition-all md:pt-12",
-          dashboardCtx.isExpanded ? "md:pl-[16.75rem]" : "md:pl-28"
-        )}
-      >
-        {children}
-      </main>
-      <CookieContextProvider>
+      <CookieMenuContextProvider>
+        <Sidebar />
+        <main
+          id="content"
+          className={cn(
+            "min-h-[100svh] w-full bg-background p-12 pt-[10rem] transition-all md:pt-12",
+            dashboardCtx.isExpanded ? "md:pl-[16.75rem]" : "md:pl-28"
+          )}
+        >
+          {children}
+        </main>
         <CookieBanner />
-      </CookieContextProvider>
+      </CookieMenuContextProvider>
     </>
   );
 }

app/(public)/layout.tsx

@@ -1,17 +1,18 @@
 import CookieBanner from "@/components/cookies";
 import Footer from "@/components/footer";
 import Header from "@/components/header";
-import CookieContextProvider from "@/context/cookie";
+import CookieMenuContextProvider from "@/context/cookie/menu";
 
 export default function PublicLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <Header />
-      <main id="content">{children}</main>
-      <CookieContextProvider>
-        <Footer />
+      <CookieMenuContextProvider>
+        <Header />
         <CookieBanner />
-      </CookieContextProvider>
+        <main id="content">{children}</main>
+
+        <Footer />
+      </CookieMenuContextProvider>
     </>
   );
 }

components/cookies/index.tsx

@@ -1,20 +1,21 @@
+import CookieContextProvider from "@/context/cookie";
 import CookieFormContextProvider from "@/context/cookie/form";
 import { cn } from "@/lib/utils";
 
-import ChangeMenu from "./changeMenu";
 import ManageConsent from "./manage";
 import CookieToast from "./toast";
 
 export default function CookieTray() {
   return (
     <>
-      <div className={cn("transition-all")}>
-        <CookieFormContextProvider>
-          <ManageConsent />
-        </CookieFormContextProvider>
-        <ChangeMenu />
-        <CookieToast />
-      </div>
+      <CookieContextProvider>
+        <div className={cn("transition-all")}>
+          <CookieFormContextProvider>
+            <ManageConsent />
+          </CookieFormContextProvider>
+          <CookieToast />
+        </div>
+      </CookieContextProvider>
     </>
   );
 }

components/cookies/manage/buttons.tsx

@@ -1,23 +1,25 @@
 "use client";
 
+import { memo } from "react";
+import { FaWindowClose } from "react-icons/fa";
+
 import { Button } from "@/components/ui/button";
-import { useCookieContext } from "@/context/cookie";
 import { useCookieFormContext } from "@/context/cookie/form";
+import { useCookieMenuAPIContext } from "@/context/cookie/menu";
 
 export function DenyAll() {
-  const cookieStore = useCookieContext();
+  const { toggleManageConsentMenu } = useCookieMenuAPIContext();
   const { setValue } = useCookieFormContext();
   return (
     <>
       <Button
         type="submit"
-        tabIndex={cookieStore.isManageConsentMenuOpen ? 0 : -1}
         onClick={() => {
           setValue("necessary", true);
           setValue("preferences", false);
           setValue("analytics", false);
           setValue("advertising", false);
-          cookieStore.toggleManageConsentMenu();
+          toggleManageConsentMenu();
         }}
         variant="outline"
         className="flex h-[3rem] w-full grow items-center justify-center rounded-lg px-6 font-bold transition-all md:w-fit"
@@ -29,19 +31,18 @@ export function DenyAll() {
 }
 
 export function AcceptAll() {
-  const cookieStore = useCookieContext();
+  const { toggleManageConsentMenu } = useCookieMenuAPIContext();
   const { setValue } = useCookieFormContext();
   return (
     <>
       <Button
         type="submit"
-        tabIndex={cookieStore.isManageConsentMenuOpen ? 0 : -1}
         onClick={() => {
           setValue("necessary", true);
           setValue("preferences", true);
           setValue("analytics", true);
           setValue("advertising", true);
-          cookieStore.toggleManageConsentMenu();
+          toggleManageConsentMenu();
         }}
         variant="default"
         className="flex h-[3rem] w-full grow items-center justify-center rounded-lg px-6 font-bold transition-all md:w-fit"
@@ -53,14 +54,13 @@ export function AcceptAll() {
 }
 
 export function AcceptSelection() {
-  const cookieStore = useCookieContext();
+  const { toggleManageConsentMenu } = useCookieMenuAPIContext();
   return (
     <>
       <Button
         type="submit"
-        tabIndex={cookieStore.isManageConsentMenuOpen ? 0 : -1}
         onClick={() => {
-          cookieStore.toggleManageConsentMenu();
+          toggleManageConsentMenu();
         }}
         variant="outline"
         className="flex h-[3rem] w-full grow items-center justify-center rounded-lg px-6 font-bold transition-all md:w-fit"
@@ -70,3 +70,19 @@ export function AcceptSelection() {
     </>
   );
 }
+
+export const CloseModal = memo(function CloseModal() {
+  const { toggleManageConsentMenu } = useCookieMenuAPIContext();
+  return (
+    <>
+      <Button
+        onClick={toggleManageConsentMenu}
+        className="absolute right-[1rem] top-[1rem]"
+        aria-label="Close manage consent modal"
+        variant="ghost"
+      >
+        <FaWindowClose className="h-8 w-8" />
+      </Button>
+    </>
+  );
+});

components/cookies/manage/controllers.tsx

@@ -1,13 +1,17 @@
 "use client";
-import React from "react";
+import React, { memo } from "react";
 import type { Path } from "react-hook-form";
 import { Controller } from "react-hook-form";
 
 import { useCookieFormContext } from "@/context/cookie/form";
 import { cn } from "@/lib/utils";
 import type { CookieInputs } from "@/types/cookie";
 
-export function ConsentTabController({ name }: { name: Path<CookieInputs> }) {
+export const ConsentTabController = memo(function ConsentTabController({
+  name,
+}: {
+  name: Path<CookieInputs>;
+}) {
   const { register, control, formState } = useCookieFormContext();
 
   return (
@@ -54,9 +58,9 @@ export function ConsentTabController({ name }: { name: Path<CookieInputs> }) {
       />
     </>
   );
-}
+});
 
-export function DetailsTabController({
+export const DetailsTabController = memo(function DetailsTabController({
   name,
   children,
   amount,
@@ -135,4 +139,4 @@ export function DetailsTabController({
       />
     </>
   );
-}
+});

components/cookies/manage/dialog.tsx

@@ -0,0 +1,30 @@
+import { forwardRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+import { CloseModal } from "./buttons";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const Dialog = forwardRef<HTMLDialogElement, Props>(function Dialog({ children }, ref) {
+  return (
+    <dialog
+      ref={ref}
+      className={cn(
+        "hidden open:flex",
+        "flex-col items-center rounded-2xl text-foreground",
+        "fixed left-0 top-0 z-[99] box-border overflow-hidden md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2",
+        "h-auto max-h-[calc(100%-16px)] w-[calc(100%-16px)] max-w-[80rem] rounded-2xl bg-background pt-6 shadow transition-all md:min-h-[30rem]",
+        "backdrop:fixed backdrop:bottom-[-100%] backdrop:left-[-100%] backdrop:right-[-100%] backdrop:top-[-100%] backdrop:z-40 backdrop:m-auto backdrop:h-[100vh] backdrop:w-full backdrop:overflow-hidden backdrop:bg-black backdrop:bg-opacity-50",
+        "backdrop:!bg-no-repeat backdrop:object-cover backdrop:backdrop-blur backdrop:backdrop-brightness-50"
+      )}
+      id="manageConsentMenuDialog"
+    >
+      {children}
+      <CloseModal />
+    </dialog>
+  );
+});
+export default Dialog;