Add favicon generator with color picker and text

src/app/admin/favicon/favicon-form.tsx

@@ -3,6 +3,7 @@
 import { useRef, useState } from "react";
 import { useTranslations } from "next-intl";
 import { saveFavicon, deleteFavicon } from "@/actions/save-favicon";
+import { FaviconGenerator } from "./favicon-generator";
 
 export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
   const t = useTranslations("pages.admin.favicon");
@@ -42,8 +43,27 @@ export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
     }
   }
 
+  async function handleGenerated(blob: Blob) {
+    setUploading(true);
+    setMessage(null);
+    const file = new File([blob], "favicon.png", { type: "image/png" });
+    const fd = new FormData();
+    fd.append("file", file);
+    const result = await saveFavicon(fd);
+    setUploading(false);
+
+    if (result.success && result.url) {
+      setPreview(result.url);
+      setMessage({ type: "success", text: t("saved") });
+    } else {
+      setMessage({ type: "error", text: result.error ?? t("error") });
+    }
+  }
+
   return (
-    <div className="admin-card max-w-lg">
+    <div className="grid gap-6 lg:grid-cols-2">
+      <div className="admin-card">
+        <h3 className="text-sm font-extrabold text-[var(--color-text)] mb-4">{t("uploadLabel")}</h3>
         {preview && (
           <div className="mb-6">
             <label className="block text-xs font-bold text-[var(--color-text-muted)] uppercase tracking-wider mb-2">
@@ -62,9 +82,6 @@ export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
 
         <form action={handleUpload} ref={formRef}>
           <div className="mb-4">
-          <label className="block text-xs font-bold text-[var(--color-text-muted)] uppercase tracking-wider mb-2">
-            {t("uploadLabel")}
-          </label>
             <input
               type="file"
               name="file"
@@ -99,5 +116,8 @@ export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
           </div>
         )}
       </div>
+
+      <FaviconGenerator onSave={handleGenerated} />
+    </div>
   );
 }

src/messages/en.json

@@ -1987,7 +1987,15 @@
         "saved": "Favicon saved successfully!",
         "deleted": "Favicon removed successfully!",
         "error": "Something went wrong",
-        "confirmDelete": "Remove the favicon? The site will no longer show a custom favicon."
+        "confirmDelete": "Remove the favicon? The site will no longer show a custom favicon.",
+        "generator": {
+          "title": "Generate favicon",
+          "text": "Text",
+          "bgColor": "Background color",
+          "textColor": "Text color",
+          "rounded": "Rounded corners",
+          "save": "Save as favicon"
+        }
       },
       "settings": {
         "title": "CMS Settings",

src/messages/nl.json

@@ -1984,7 +1984,15 @@
         "saved": "Favicon succesvol opgeslagen!",
         "deleted": "Favicon succesvol verwijderd!",
         "error": "Er is iets misgegaan",
-        "confirmDelete": "Favicon verwijderen? De site zal geen aangepaste favicon meer tonen."
+        "confirmDelete": "Favicon verwijderen? De site zal geen aangepaste favicon meer tonen.",
+        "generator": {
+          "title": "Favicon genereren",
+          "text": "Tekst",
+          "bgColor": "Achtergrondkleur",
+          "textColor": "Tekstkleur",
+          "rounded": "Afgeronde hoeken",
+          "save": "Opslaan als favicon"
+        }
       },
       "settings": {
         "title": "CMS-instellingen",