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,62 +43,81 @@ 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">
-      {preview && (
-        <div className="mb-6">
-          <label className="block text-xs font-bold text-[var(--color-text-muted)] uppercase tracking-wider mb-2">
-            {t("current")}
-          </label>
-          <div className="flex items-center gap-4">
-            <img
-              src={preview}
-              alt="Favicon preview"
-              className="w-16 h-16 rounded-lg border-2 border-[var(--border)] object-contain bg-white"
-            />
-            <div className="text-xs text-[var(--color-text-muted)] break-all">{preview}</div>
+    <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">
+              {t("current")}
+            </label>
+            <div className="flex items-center gap-4">
+              <img
+                src={preview}
+                alt="Favicon preview"
+                className="w-16 h-16 rounded-lg border-2 border-[var(--border)] object-contain bg-white"
+              />
+              <div className="text-xs text-[var(--color-text-muted)] break-all">{preview}</div>
+            </div>
           </div>
-        </div>
-      )}
+        )}
 
-      <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"
-            accept=".png,.jpg,.jpeg,.gif,.webp,.ico,.svg"
-            required
-            className="block w-full text-sm text-[var(--color-text)] file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-[var(--color-primary)] file:text-white hover:file:bg-[var(--color-primary-hover)] cursor-pointer"
-          />
-          <p className="mt-1 text-xs text-[var(--color-text-muted)]">{t("uploadHint")}</p>
-        </div>
+        <form action={handleUpload} ref={formRef}>
+          <div className="mb-4">
+            <input
+              type="file"
+              name="file"
+              accept=".png,.jpg,.jpeg,.gif,.webp,.ico,.svg"
+              required
+              className="block w-full text-sm text-[var(--color-text)] file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-[var(--color-primary)] file:text-white hover:file:bg-[var(--color-primary-hover)] cursor-pointer"
+            />
+            <p className="mt-1 text-xs text-[var(--color-text-muted)]">{t("uploadHint")}</p>
+          </div>
 
-        <div className="flex gap-2">
-          <button type="submit" disabled={uploading} className="btn btn-primary">
-            {uploading ? t("uploading") : t("upload")}
-          </button>
-          {preview && (
-            <button type="button" onClick={handleDelete} disabled={deleting} className="btn btn-danger">
-              {deleting ? t("deleting") : t("delete")}
+          <div className="flex gap-2">
+            <button type="submit" disabled={uploading} className="btn btn-primary">
+              {uploading ? t("uploading") : t("upload")}
             </button>
-          )}
-        </div>
-      </form>
+            {preview && (
+              <button type="button" onClick={handleDelete} disabled={deleting} className="btn btn-danger">
+                {deleting ? t("deleting") : t("delete")}
+              </button>
+            )}
+          </div>
+        </form>
 
-      {message && (
-        <div
-          className={`mt-4 p-3 rounded-lg text-sm ${
-            message.type === "success"
-              ? "bg-green-500/10 text-green-600 dark:text-green-400"
-              : "bg-red-500/10 text-red-600 dark:text-red-400"
-          }`}
-        >
-          {message.text}
-        </div>
-      )}
+        {message && (
+          <div
+            className={`mt-4 p-3 rounded-lg text-sm ${
+              message.type === "success"
+                ? "bg-green-500/10 text-green-600 dark:text-green-400"
+                : "bg-red-500/10 text-red-600 dark:text-red-400"
+            }`}
+          >
+            {message.text}
+          </div>
+        )}
+      </div>
+
+      <FaviconGenerator onSave={handleGenerated} />
     </div>
   );
 }

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

@@ -0,0 +1,170 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslations } from "next-intl";
+
+const SIZE = 64;
+const HALF = SIZE / 2;
+
+interface Props {
+  onSave: (blob: Blob) => void;
+}
+
+export function FaviconGenerator({ onSave }: Props) {
+  const t = useTranslations("pages.admin.favicon.generator");
+  const [bgColor, setBgColor] = useState("#6366f1");
+  const [textColor, setTextColor] = useState("#ffffff");
+  const [text, setText] = useState("A");
+  const [rounded, setRounded] = useState(true);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const render = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    canvas.width = SIZE;
+    canvas.height = SIZE;
+
+    // Background
+    ctx.clearRect(0, 0, SIZE, SIZE);
+    ctx.fillStyle = bgColor;
+    if (rounded) {
+      const r = 12;
+      ctx.beginPath();
+      ctx.moveTo(r, 0);
+      ctx.lineTo(SIZE - r, 0);
+      ctx.quadraticCurveTo(SIZE, 0, SIZE, r);
+      ctx.lineTo(SIZE, SIZE - r);
+      ctx.quadraticCurveTo(SIZE, SIZE, SIZE - r, SIZE);
+      ctx.lineTo(r, SIZE);
+      ctx.quadraticCurveTo(0, SIZE, 0, SIZE - r);
+      ctx.lineTo(0, r);
+      ctx.quadraticCurveTo(0, 0, r, 0);
+      ctx.closePath();
+      ctx.fill();
+    } else {
+      ctx.fillRect(0, 0, SIZE, SIZE);
+    }
+
+    // Text
+    const displayText = text.trim() || "?";
+    const fontSize = displayText.length > 2 ? 28 : displayText.length > 1 ? 32 : 40;
+    ctx.fillStyle = textColor;
+    ctx.font = `bold ${fontSize}px Arial, sans-serif`;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(displayText, HALF, HALF + 1);
+  }, [bgColor, textColor, text, rounded]);
+
+  useEffect(() => {
+    render();
+  }, [render]);
+
+  function handleSave() {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    canvas.toBlob((blob) => {
+      if (blob) onSave(blob);
+    }, "image/png");
+  }
+
+  const swatches = [
+    "#6366f1", "#3b82f6", "#06b6d4", "#10b981",
+    "#f59e0b", "#ef4444", "#ec4899", "#8b5cf6",
+    "#1e1b4b", "#1f2937", "#000000", "#ffffff",
+  ];
+
+  return (
+    <div className="admin-card">
+      <h3 className="text-sm font-extrabold text-[var(--color-text)] mb-4">{t("title")}</h3>
+
+      <div className="flex justify-center mb-6">
+        <canvas
+          ref={canvasRef}
+          width={SIZE}
+          height={SIZE}
+          className="border-2 border-[var(--border)] rounded-xl shadow-lg"
+          style={{ width: 128, height: 128, imageRendering: "pixelated" }}
+        />
+      </div>
+
+      <div className="space-y-4">
+        <div>
+          <label className="block text-xs font-bold text-[var(--color-text-muted)] uppercase tracking-wider mb-2">
+            {t("text")}
+          </label>
+          <input
+            type="text"
+            value={text}
+            onChange={(e) => setText(e.target.value.slice(0, 4))}
+            maxLength={4}
+            className="w-full"
+            placeholder="A"
+          />
+        </div>
+
+        <div>
+          <label className="block text-xs font-bold text-[var(--color-text-muted)] uppercase tracking-wider mb-2">
+            {t("bgColor")}
+          </label>
+          <div className="flex items-center gap-2 mb-2">
+            <input
+              type="color"
+              value={bgColor}
+              onChange={(e) => setBgColor(e.target.value)}
+              className="w-10 h-10 rounded-lg cursor-pointer border border-[var(--border)]"
+            />
+            <span className="text-xs text-[var(--color-text-muted)] font-mono">{bgColor}</span>
+          </div>
+          <div className="flex flex-wrap gap-1.5">
+            {swatches.map((c) => (
+              <button
+                key={c}
+                type="button"
+                onClick={() => setBgColor(c)}
+                className={`w-7 h-7 rounded-lg border-2 transition-all ${
+                  bgColor === c ? "border-[var(--color-primary)] scale-110" : "border-transparent"
+                }`}
+                style={{ backgroundColor: c }}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-xs font-bold text-[var(--color-text-muted)] uppercase tracking-wider mb-2">
+            {t("textColor")}
+          </label>
+          <div className="flex items-center gap-2">
+            <input
+              type="color"
+              value={textColor}
+              onChange={(e) => setTextColor(e.target.value)}
+              className="w-10 h-10 rounded-lg cursor-pointer border border-[var(--border)]"
+            />
+            <span className="text-xs text-[var(--color-text-muted)] font-mono">{textColor}</span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            id="rounded"
+            checked={rounded}
+            onChange={(e) => setRounded(e.target.checked)}
+            className="rounded"
+          />
+          <label htmlFor="rounded" className="text-sm text-[var(--color-text)] cursor-pointer">
+            {t("rounded")}
+          </label>
+        </div>
+
+        <button type="button" onClick={handleSave} className="btn btn-primary w-full">
+          {t("save")}
+        </button>
+      </div>
+    </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",