app/components/common/Toggle.tsx

@@ -26,7 +26,7 @@ export function Toggle(props: ToggleProps) {
           <span
             className={clsx(
               "h-4 w-4 rounded-full bg-white shadow-md transition-transform duration-200 ease-in-out z-10",
-              props.checked ? "translate-x-full" : "translate-x-0",
+              props.checked ? "translate-x-[calc(100%+.25em)]" : "translate-x-1",
             )}
           />
           <span

app/layouts/LayoutDefault.telefunc.ts

@@ -0,0 +1,12 @@
+import { getTelefuncContext } from "@/lib/getTelefuncContext";
+import { CookieParser } from "@/services/CookieParser";
+
+export async function onUpdateConsentCookie(cookieName: string, cookieValue: boolean) {
+  const context = getTelefuncContext();
+  console.log(`Updating cookie ${cookieName} to ${cookieValue}`);
+
+  const { reply } = context;
+  CookieParser.set(reply, cookieName, cookieValue.toString(), 365);
+
+  return { ok: true, message: "Updated consent cookie" };
+}

app/layouts/LayoutDefault.tsx

@@ -105,9 +105,9 @@ function CookieModal() {
             <Toggle
               id="cookies-analytics"
               label="Cookies d'analyse (Umami et Google Analytics)"
-              checked={cookies.consent.analytics}
+              checked={consentCookies.analytics}
               onChange={(checked) => {
-                setConsentCookies((prev) => ({ ...prev, analytics: checked }));
+                setConsentCookies({ ...consentCookies, analytics: checked });
                 reload();
               }}
             />
@@ -115,7 +115,7 @@ function CookieModal() {
             <Toggle
               id="cookies-customization"
               label="Cookie de personnalisation (thème)"
-              checked={cookies.consent.customization}
+              checked={consentCookies.customization}
               onChange={(checked) => {
                 setConsentCookies((prev) => ({ ...prev, customization: checked }));
                 reload();

app/lib/getTelefuncContext.ts

@@ -0,0 +1,18 @@
+import type { FastifyRequest, FastifyReply } from "fastify";
+
+import { getContext } from "telefunc";
+
+export function getTelefuncContext() {
+  const context = getContext<{
+    fastify: {
+      request: FastifyRequest;
+      reply: FastifyReply;
+    };
+  }>();
+
+  return {
+    ...context,
+    reply: context.fastify.reply,
+    request: context.fastify.request,
+  };
+}

app/services/CookieParser.ts

@@ -1,3 +1,5 @@
+import { FastifyReply } from "fastify";
+
 export class CookieParser {
   private rawCookies: string;
   private cookies: Record<string, string>;
@@ -25,4 +27,18 @@ export class CookieParser {
     if (formatter) return formatter(value);
     return value;
   }
+
+  set(reply: FastifyReply, key: string, value: string, daysDuration = 30): FastifyReply {
+    const options = {
+      path: "/",
+      httpOnly: true,
+      secure: process.env.NODE_ENV === "production",
+      expires: new Date(Date.now() + 60 * 60 * 24 * daysDuration * 1000),
+    };
+
+    reply.setCookie(key, value, options);
+    this.cookies[key] = value;
+
+    return reply;
+  }
 }