fix favicon update flow and site media picker

lib/app-config.ts

@@ -98,7 +98,9 @@ export async function getSiteSettingsMediaBindings(): Promise<SiteSettingsMediaB
         entityType: SITE_SETTINGS_ENTITY_TYPE,
         entityId: SITE_SETTINGS_ENTITY_ID,
       },
-      include: {
+      select: {
+        fieldKey: true,
+        updatedAt: true,
         asset: {
           select: {
             id: true,
@@ -114,6 +116,7 @@ export async function getSiteSettingsMediaBindings(): Promise<SiteSettingsMediaB
           result.favicon = {
             assetId: usage.asset.id,
             url: usage.asset.url,
+            version: usage.updatedAt.toISOString(),
           };
         }
 
@@ -121,6 +124,7 @@ export async function getSiteSettingsMediaBindings(): Promise<SiteSettingsMediaB
           result.defaultOgImage = {
             assetId: usage.asset.id,
             url: usage.asset.url,
+            version: usage.updatedAt.toISOString(),
           };
         }
 

lib/metadata.ts

@@ -72,7 +72,7 @@ export function buildAppMetadataFromConfig(
   const openGraphImages = buildMetadataImages(bindings.defaultOgImage?.url);
   const siteIconUrls = buildSiteIconUrls({
     siteName: defaultLocaleSettings.siteName,
-    faviconAssetId: bindings.favicon?.assetId,
+    faviconVersion: bindings.favicon?.version,
     faviconUrl: bindings.favicon?.url,
   });
 

lib/site-icons.tsx

@@ -1,17 +1,30 @@
-import { ImageResponse } from "next/og";
+import { readFile } from "fs/promises";
+import path from "path";
 
 import { routing } from "@/i18n/routing";
 
 import { getSiteSettings, getSiteSettingsMediaBindings } from "./app-config";
+import { isManagedMediaFilePath, resolveMediaUploadPath } from "./media-storage";
 
 const INTERNAL_FAVICON_PATH = "/favicon.ico";
 const INTERNAL_APPLE_ICON_PATH = "/apple-icon.png";
 const INTERNAL_MANIFEST_PATH = "/manifest.webmanifest";
 const DEFAULT_ICON_VERSION = "default";
+const TRANSPARENT_PNG_BASE64 =
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9sot5WQAAAAASUVORK5CYII=";
+
+const ICON_CONTENT_TYPES: Record<string, string> = {
+  ".ico": "image/x-icon",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+  ".webp": "image/webp",
+};
 
 type SiteIconInput = {
   siteName: string;
-  faviconAssetId?: string | null;
+  faviconVersion?: string | null;
   faviconUrl?: string | null;
 };
 
@@ -37,15 +50,9 @@ function appendVersionToUrl(url: string, version: string): string {
   return resolved.toString();
 }
 
-function getFallbackLabel(siteName: string): string {
-  const firstCharacter = siteName.trim().charAt(0).toUpperCase() || "M";
-
-  return firstCharacter;
-}
-
 export function buildSiteIconUrls(input: SiteIconInput): SiteIconUrls {
   const siteName = input.siteName.trim() || "Moh";
-  const version = input.faviconAssetId?.trim() || DEFAULT_ICON_VERSION;
+  const version = input.faviconVersion?.trim() || DEFAULT_ICON_VERSION;
 
   return {
     siteName,
@@ -63,40 +70,44 @@ export async function getDynamicSiteIconUrls(): Promise<SiteIconUrls> {
 
   return buildSiteIconUrls({
     siteName: defaultLocaleSettings.siteName,
-    faviconAssetId: bindings.favicon?.assetId,
+    faviconVersion: bindings.favicon?.version,
     faviconUrl: bindings.favicon?.url,
   });
 }
 
-export function buildFallbackIconResponse(siteName: string, size: number) {
-  const label = getFallbackLabel(siteName);
+function getResolvedPathname(iconUrl: string) {
+  const resolvedUrl = new URL(iconUrl, "https://local.invalid");
 
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          background: "linear-gradient(135deg, #111827 0%, #0f766e 100%)",
-          color: "#f8fafc",
-          fontSize: size * 0.52,
-          fontWeight: 700,
-          letterSpacing: "-0.08em",
-          borderRadius: size * 0.22,
-        }}
-      >
-        {label}
-      </div>
-    ),
-    {
-      width: size,
-      height: size,
-      headers: {
-        "Cache-Control": "no-store, max-age=0",
-      },
+  return resolvedUrl.pathname;
+}
+
+async function createFileResponse(absolutePath: string) {
+  const fileBuffer = await readFile(absolutePath);
+  const contentType = ICON_CONTENT_TYPES[path.extname(absolutePath).toLowerCase()] ?? "application/octet-stream";
+
+  return new Response(fileBuffer, {
+    status: 200,
+    headers: {
+      "Content-Type": contentType,
+      "Cache-Control": "no-store, max-age=0",
     },
-  );
+  });
+}
+
+export async function buildSiteIconResponse(iconUrl: string | null) {
+  if (iconUrl) {
+    const pathname = getResolvedPathname(iconUrl);
+
+    if (isManagedMediaFilePath(pathname)) {
+      return createFileResponse(resolveMediaUploadPath(pathname));
+    }
+  }
+
+  return new Response(Buffer.from(TRANSPARENT_PNG_BASE64, "base64"), {
+    status: 200,
+    headers: {
+      "Content-Type": "image/png",
+      "Cache-Control": "no-store, max-age=0",
+    },
+  });
 }

lib/site-settings.ts

@@ -26,6 +26,7 @@ export type SiteSettings = {
 export type SiteSettingsMediaBinding = {
   assetId: string;
   url: string;
+  version: string;
 };
 
 export type SiteSettingsMediaBindings = {