fix favicon update flow and site media picker

app/apple-icon.png/route.ts

@@ -1,6 +1,4 @@
-import { NextResponse } from "next/server";
+import { buildSiteIconResponse, getDynamicSiteIconUrls } from "@/lib/site-icons";
-
-import { buildFallbackIconResponse, getDynamicSiteIconUrls } from "@/lib/site-icons";
 
 export const dynamic = "force-dynamic";
 export const revalidate = 0;
@@ -8,13 +6,5 @@ export const revalidate = 0;
 export async function GET() {
   const iconUrls = await getDynamicSiteIconUrls();
 
-  if (iconUrls.faviconAssetUrl) {
+  return buildSiteIconResponse(iconUrls.faviconAssetUrl);
-    const response = NextResponse.redirect(iconUrls.faviconAssetUrl, 307);
-
-    response.headers.set("Cache-Control", "no-store, max-age=0");
-
-    return response;
-  }
-
-  return buildFallbackIconResponse(iconUrls.siteName, 180);
 }

app/favicon.ico/route.ts

@@ -1,6 +1,4 @@
-import { NextResponse } from "next/server";
+import { buildSiteIconResponse, getDynamicSiteIconUrls } from "@/lib/site-icons";
-
-import { buildFallbackIconResponse, getDynamicSiteIconUrls } from "@/lib/site-icons";
 
 export const dynamic = "force-dynamic";
 export const revalidate = 0;
@@ -8,13 +6,5 @@ export const revalidate = 0;
 export async function GET() {
   const iconUrls = await getDynamicSiteIconUrls();
 
-  if (iconUrls.faviconAssetUrl) {
+  return buildSiteIconResponse(iconUrls.faviconAssetUrl);
-    const response = NextResponse.redirect(iconUrls.faviconAssetUrl, 307);
-
-    response.headers.set("Cache-Control", "no-store, max-age=0");
-
-    return response;
-  }
-
-  return buildFallbackIconResponse(iconUrls.siteName, 32);
 }

app/root/site-settings/page.tsx

@@ -64,6 +64,7 @@ export default async function RootSiteSettingsPage({
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
       saveFormId="site-settings-form"
+      reloadDocumentOnSave
     >
       <div className="space-y-6">
         {searchParams?.success ? (

components/root/form-save-button.tsx

@@ -12,6 +12,7 @@ type FormSaveButtonProps = {
   formSelector?: string;
   formSelectors?: string[];
   label?: string;
+  reloadDocumentOnSuccess?: boolean;
 };
 
 function serializeForm(form: HTMLFormElement) {
@@ -29,6 +30,7 @@ export function FormSaveButton({
   formSelector,
   formSelectors,
   label = "Speichern",
+  reloadDocumentOnSuccess = false,
 }: FormSaveButtonProps) {
   const pathname = usePathname();
   const router = useRouter();
@@ -220,6 +222,11 @@ export function FormSaveButton({
     }
 
     pendingSubmissionRef.current = null;
+    if (reloadDocumentOnSuccess) {
+      window.location.reload();
+      return;
+    }
+
     router.refresh();
 
     if (!searchParams.has("__saved")) {
@@ -233,7 +240,7 @@ export function FormSaveButton({
     router.replace(nextQuery ? `${pathname}?${nextQuery}` : pathname, {
       scroll: false,
     });
-  }, [currentUrl, pathname, router, searchParams]);
+  }, [currentUrl, pathname, reloadDocumentOnSuccess, router, searchParams]);
 
   return (
     <Button type="submit" form={activeFormId ?? undefined} disabled={!activeFormId || !isDirty || isSubmitting}>

components/root/media-field-picker.tsx

@@ -3,6 +3,8 @@
 /* eslint-disable @next/next/no-img-element */
 
 import type { MediaKind } from "@prisma/client";
+import { Check, Search } from "lucide-react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 
 import type { MediaOption } from "@/lib/media";
 import { cn } from "@/lib/utils";
@@ -15,6 +17,7 @@ export type MediaFieldState = {
   url: string;
   label: string;
   kind: MediaKind;
+  isCleared?: boolean;
 };
 
 type MediaFieldPickerProps = {
@@ -22,36 +25,89 @@ type MediaFieldPickerProps = {
   value: MediaFieldState;
   onChange: (nextValue: MediaFieldState) => void;
   options: MediaOption[];
+  hasInitialValue?: boolean;
   inputName: string;
   fileFieldName: string;
   fileLabel?: string;
   externalLabel?: string;
   libraryLabel?: string;
   accept?: string;
+  allowExternal?: boolean;
+  allowClear?: boolean;
+  clearLabel?: string;
+  emptyValue?: Partial<MediaFieldState>;
 };
 
-const modeOptions: Array<MediaFieldState["mode"]> = ["upload", "external", "library"];
-
 export function MediaFieldPicker({
   title,
   value,
   onChange,
   options,
+  hasInitialValue = false,
   inputName,
   fileFieldName,
   fileLabel,
   externalLabel,
   libraryLabel,
   accept,
+  allowExternal = true,
+  allowClear = false,
+  clearLabel = "Remove",
+  emptyValue,
 }: MediaFieldPickerProps) {
+  const hiddenInputRef = useRef<HTMLInputElement | null>(null);
+  const searchId = useId();
+  const [libraryQuery, setLibraryQuery] = useState("");
+  const modeOptions: Array<MediaFieldState["mode"]> = allowExternal
+    ? ["upload", "external", "library"]
+    : ["upload", "library"];
   const filteredOptions = options.filter((option) => option.kind === value.kind);
   const selectedOption = filteredOptions.find((option) => option.id === value.assetId) ?? null;
-  const previewUrl =
+  const visibleLibraryOptions = useMemo(() => {
+    const normalizedQuery = libraryQuery.trim().toLowerCase();
+
+    if (!normalizedQuery) {
+      return filteredOptions;
+    }
+
+    return filteredOptions.filter((option) => option.label.toLowerCase().includes(normalizedQuery));
+  }, [filteredOptions, libraryQuery]);
+  const resolvedLabel =
     value.mode === "library"
+      ? selectedOption?.label ?? value.label
+      : value.label;
+  const serializedValue = JSON.stringify({
+    mode: value.mode,
+    assetId: value.assetId,
+    url: value.url,
+    label: resolvedLabel,
+    kind: value.kind,
+  });
+  const previewUrl =
+    value.isCleared
+      ? ""
+      : value.mode === "library"
         ? selectedOption?.url ?? ""
         : value.mode === "external"
           ? value.url
-        : "";
+          : ""
+  ;
+  const hasCurrentValue =
+    !value.isCleared &&
+    ((value.mode === "library" && value.assetId.trim() !== "") ||
+      (value.mode === "external" && value.url.trim() !== ""));
+  const canClear = allowClear && (hasCurrentValue || (hasInitialValue && !value.isCleared));
+
+  useEffect(() => {
+    const hiddenInput = hiddenInputRef.current;
+
+    if (!hiddenInput) {
+      return;
+    }
+
+    hiddenInput.dispatchEvent(new Event("input", { bubbles: true }));
+    hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
+  }, [serializedValue]);
 
   return (
     <div className="space-y-3 rounded-surface border border-border p-4">
@@ -68,6 +124,7 @@ export function MediaFieldPicker({
                   mode,
                   assetId: mode === "library" ? value.assetId : "",
                   url: mode === "external" ? value.url : "",
+                  isCleared: false,
                 })
               }
               className={cn(
@@ -80,29 +137,44 @@ export function MediaFieldPicker({
               {mode}
             </button>
           ))}
+          {canClear ? (
+            <button
+              type="button"
+              onClick={() =>
+                onChange({
+                  ...value,
+                  mode: emptyValue?.mode ?? "upload",
+                  assetId: emptyValue?.assetId ?? "",
+                  url: emptyValue?.url ?? "",
+                  label: emptyValue?.label ?? value.label,
+                  isCleared: true,
+                })
+              }
+              className="rounded-pill border border-destructive/25 px-4 py-2 text-sm text-destructive transition-colors hover:border-destructive/50 hover:bg-destructive/5"
+            >
+              {clearLabel}
+            </button>
+          ) : null}
         </div>
       </div>
 
       <input
+        ref={hiddenInputRef}
         type="hidden"
         name={inputName}
-        value={JSON.stringify({
+        value={serializedValue}
-          mode: value.mode,
-          assetId: value.assetId,
-          url: value.url,
-          label: value.label,
-          kind: value.kind,
-        })}
       />
 
+      {value.mode !== "library" ? (
         <div className="space-y-2">
           <Label>Label</Label>
           <Input
             value={value.label}
-          onChange={(event) => onChange({ ...value, label: event.target.value })}
+            onChange={(event) => onChange({ ...value, label: event.target.value, isCleared: false })}
             placeholder="Homepage Hero"
           />
         </div>
+      ) : null}
 
       {value.mode === "upload" ? (
         <div className="space-y-2">
@@ -116,27 +188,71 @@ export function MediaFieldPicker({
           <Label>{externalLabel ?? "External URL"}</Label>
           <Input
             value={value.url}
-            onChange={(event) => onChange({ ...value, url: event.target.value })}
+            onChange={(event) => onChange({ ...value, url: event.target.value, isCleared: false })}
             placeholder="https://example.com/image.jpg"
           />
         </div>
       ) : null}
 
       {value.mode === "library" ? (
-        <div className="space-y-2">
+        <div className="space-y-3">
           <Label>{libraryLabel ?? "Media Library"}</Label>
-          <select
+          <div className="space-y-2 rounded-nested border border-border bg-surface-1 p-3">
-            value={value.assetId}
+            <div className="relative">
-            onChange={(event) => onChange({ ...value, assetId: event.target.value })}
+              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-            className="flex h-11 w-full rounded-pill border border-border bg-background px-4 text-sm text-foreground shadow-sm"
+              <Input
+                id={searchId}
+                value={libraryQuery}
+                onChange={(event) => setLibraryQuery(event.target.value)}
+                className="pl-9"
+                placeholder="Search media"
+              />
+            </div>
+
+            <div className="max-h-64 space-y-2 overflow-y-auto">
+              {visibleLibraryOptions.length > 0 ? (
+                visibleLibraryOptions.map((option) => {
+                  const isActive = option.id === value.assetId;
+
+                  return (
+                    <button
+                      key={option.id}
+                      type="button"
+                      onClick={() =>
+                        onChange({
+                          ...value,
+                          assetId: option.id,
+                          label: option.label,
+                          isCleared: false,
+                        })
+                      }
+                      className={cn(
+                        "flex w-full items-center gap-3 rounded-nested border px-3 py-2 text-left transition-colors",
+                        isActive
+                          ? "border-border-strong bg-background"
+                          : "border-border bg-background/70 hover:border-border-strong hover:bg-background",
+                      )}
                     >
-            <option value="">Select media</option>
+                      {option.url ? (
-            {filteredOptions.map((option) => (
+                        <img src={option.url} alt={option.label} className="h-12 w-12 rounded-md object-cover" />
-              <option key={option.id} value={option.id}>
+                      ) : (
-                {option.label}
+                        <div className="h-12 w-12 rounded-md border border-border bg-background" />
-              </option>
+                      )}
-            ))}
+                      <div className="min-w-0 flex-1">
-          </select>
+                        <p className="truncate text-sm font-medium text-foreground">{option.label}</p>
+                        <p className="truncate text-xs text-muted-foreground">{option.source}</p>
+                      </div>
+                      {isActive ? <Check className="h-4 w-4 text-brand-primary" /> : null}
+                    </button>
+                  );
+                })
+              ) : (
+                <div className="rounded-nested border border-dashed border-border px-3 py-4 text-sm text-muted-foreground">
+                  No media found.
+                </div>
+              )}
+            </div>
+          </div>
         </div>
       ) : null}
 

components/root/root-dashboard-shell.tsx

@@ -48,6 +48,7 @@ type RootDashboardShellProps = {
   saveFormId?: string;
   saveFormSelector?: string;
   saveButtonLabel?: string;
+  reloadDocumentOnSave?: boolean;
   headerActions?: ReactNode;
   sidebarTopContent?: ReactNode;
   toolbar?: ReactNode;
@@ -64,6 +65,7 @@ export async function RootDashboardShell({
   saveFormId,
   saveFormSelector,
   saveButtonLabel,
+  reloadDocumentOnSave = false,
   headerActions,
   sidebarTopContent,
   toolbar,
@@ -98,6 +100,7 @@ export async function RootDashboardShell({
         formIds={saveFormId ? ["sidebar-maintenance-form", saveFormId] : ["sidebar-maintenance-form"]}
         formSelectors={saveFormSelector ? [saveFormSelector] : undefined}
         label={saveButtonLabel ?? "Speichern"}
+        reloadDocumentOnSuccess={reloadDocumentOnSave}
       />
       <ThemeToggle ariaLabel="Theme wechseln" />
     </>

components/root/site-settings-form.tsx

@@ -65,6 +65,7 @@ function createImageFieldState(
       url: "",
       label,
       kind: MediaKind.IMAGE,
+      isCleared: false,
     };
   }
 
@@ -75,6 +76,7 @@ function createImageFieldState(
       url,
       label,
       kind: MediaKind.IMAGE,
+      isCleared: false,
     };
   }
 
@@ -84,6 +86,7 @@ function createImageFieldState(
     url: "",
     label,
     kind: MediaKind.IMAGE,
+    isCleared: false,
   };
 }
 
@@ -92,6 +95,10 @@ function getMediaPreviewUrl(
   options: MediaOption[],
   fallbackUrl: string | null | undefined,
 ) {
+  if (value.isCleared) {
+    return "";
+  }
+
   if (value.mode === "external") {
     return value.url || fallbackUrl || "";
   }
@@ -280,12 +287,20 @@ export function SiteSettingsForm({
                 value={favicon}
                 onChange={setFavicon}
                 options={mediaOptions}
+                hasInitialValue={Boolean(initialBindings.favicon?.assetId || initialBindings.favicon?.url)}
                 inputName="faviconMedia"
                 fileFieldName="faviconFile"
                 fileLabel="Upload Favicon"
-                externalLabel="Favicon URL"
                 libraryLabel="Favicon Library"
                 accept=".png,.svg,.ico,image/png,image/svg+xml,image/x-icon,image/vnd.microsoft.icon"
+                allowExternal={false}
+                allowClear
+                clearLabel="Remove Favicon"
+                emptyValue={{
+                  mode: "upload",
+                  assetId: "",
+                  url: "",
+                }}
               />
 
               <MediaFieldPicker
@@ -293,12 +308,20 @@ export function SiteSettingsForm({
                 value={defaultOgImage}
                 onChange={setDefaultOgImage}
                 options={mediaOptions}
+                hasInitialValue={Boolean(initialBindings.defaultOgImage?.assetId || initialBindings.defaultOgImage?.url)}
                 inputName="defaultOgImageMedia"
                 fileFieldName="defaultOgImageFile"
                 fileLabel="Upload OG Image"
-                externalLabel="OG Image URL"
                 libraryLabel="OG Image Library"
                 accept="image/*,.svg"
+                allowExternal={false}
+                allowClear
+                clearLabel="Remove OG Image"
+                emptyValue={{
+                  mode: "upload",
+                  assetId: "",
+                  url: "",
+                }}
               />
             </CardContent>
           </AppCard>

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) {
+function getResolvedPathname(iconUrl: string) {
-  const label = getFallbackLabel(siteName);
+  const resolvedUrl = new URL(iconUrl, "https://local.invalid");
 
-  return new ImageResponse(
+  return resolvedUrl.pathname;
-    (
+}
-      <div
+
-        style={{
+async function createFileResponse(absolutePath: string) {
-          width: "100%",
+  const fileBuffer = await readFile(absolutePath);
-          height: "100%",
+  const contentType = ICON_CONTENT_TYPES[path.extname(absolutePath).toLowerCase()] ?? "application/octet-stream";
-          display: "flex",
+
-          alignItems: "center",
+  return new Response(fileBuffer, {
-          justifyContent: "center",
+    status: 200,
-          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: {
+      "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 = {