Add favicon upload option in admin panel

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

@@ -0,0 +1,103 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { useTranslations } from "next-intl";
+import { saveFavicon, deleteFavicon } from "@/actions/save-favicon";
+
+export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
+  const t = useTranslations("pages.admin.favicon");
+  const [uploading, setUploading] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [preview, setPreview] = useState<string | null>(currentUrl);
+  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+
+  async function handleUpload(formData: FormData) {
+    setUploading(true);
+    setMessage(null);
+    const result = await saveFavicon(formData);
+    setUploading(false);
+
+    if (result.success && result.url) {
+      setPreview(result.url);
+      setMessage({ type: "success", text: t("saved") });
+      formRef.current?.reset();
+    } else {
+      setMessage({ type: "error", text: result.error ?? t("error") });
+    }
+  }
+
+  async function handleDelete() {
+    if (!confirm(t("confirmDelete"))) return;
+    setDeleting(true);
+    setMessage(null);
+    const result = await deleteFavicon();
+    setDeleting(false);
+
+    if (result.success) {
+      setPreview(null);
+      setMessage({ type: "success", text: t("deleted") });
+    } 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>
+        </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>
+
+        <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")}
+            </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>
+      )}
+    </div>
+  );
+}

src/app/admin/favicon/page.tsx

@@ -0,0 +1,34 @@
+import { getTranslations } from "next-intl/server";
+import { Image } from "lucide-react";
+import { FaviconForm } from "./favicon-form";
+import { prisma } from "@/lib/prisma";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminFaviconPage() {
+  const t = await getTranslations("pages.admin.favicon");
+
+  let faviconUrl: string | null = null;
+  try {
+    const setting = await prisma.websiteSetting.findUnique({ where: { key: "cms_favicon" } });
+    faviconUrl = setting?.value ?? null;
+  } catch {
+    faviconUrl = null;
+  }
+
+  return (
+    <main>
+      <div className="flex items-center gap-3 mb-6">
+        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
+          <Image size={20} className="text-[var(--color-primary)]" />
+        </div>
+        <div>
+          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("title")}</h1>
+          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("subtitle")}</p>
+        </div>
+      </div>
+
+      <FaviconForm currentUrl={faviconUrl} />
+    </main>
+  );
+}

src/app/admin/layout.tsx

@@ -81,6 +81,7 @@ function getNavGroups(t: (key: string) => string) {
         { href: "/admin/email-templates", label: t("emailTemplates"), icon: <Mail size={16} /> },
         { href: "/admin/theme", label: t("theme"), icon: <Palette size={16} /> },
         { href: "/admin/media", label: t("media"), icon: <Image size={16} /> },
+        { href: "/admin/favicon", label: t("favicon"), icon: <Image size={16} /> },
         { href: "/admin/settings", label: t("settings"), icon: <Cog size={16} /> },
       ],
     },