Refactor site header, heroes, and design system

components/root/site-settings-form.tsx

@@ -117,6 +117,20 @@ export function SiteSettingsForm({
   mediaOptions,
 }: SiteSettingsFormProps) {
   const [settings, setSettings] = useState(initialSettings);
+  const [siteLogoLight, setSiteLogoLight] = useState<MediaFieldState>(
+    createImageFieldState(
+      initialBindings.siteLogoLight?.assetId,
+      initialBindings.siteLogoLight?.url,
+      "Site Logo Light",
+    ),
+  );
+  const [siteLogoDark, setSiteLogoDark] = useState<MediaFieldState>(
+    createImageFieldState(
+      initialBindings.siteLogoDark?.assetId,
+      initialBindings.siteLogoDark?.url,
+      "Site Logo Dark",
+    ),
+  );
   const [favicon, setFavicon] = useState<MediaFieldState>(
     createImageFieldState(
       initialBindings.favicon?.assetId,
@@ -131,6 +145,16 @@ export function SiteSettingsForm({
       "Default OG Image",
     ),
   );
+  const siteLogoLightPreviewUrl = getMediaPreviewUrl(
+    siteLogoLight,
+    mediaOptions,
+    initialBindings.siteLogoLight?.url,
+  );
+  const siteLogoDarkPreviewUrl = getMediaPreviewUrl(
+    siteLogoDark,
+    mediaOptions,
+    initialBindings.siteLogoDark?.url,
+  );
   const faviconPreviewUrl = getMediaPreviewUrl(favicon, mediaOptions, initialBindings.favicon?.url);
   const defaultOgImagePreviewUrl = getMediaPreviewUrl(
     defaultOgImage,
@@ -295,12 +319,54 @@ export function SiteSettingsForm({
 
           <AppCard>
             <CardHeader>
-              <CardTitle>Preview Images</CardTitle>
+              <CardTitle>Brand And Preview Images</CardTitle>
               <CardDescription>
-                Favicon erscheint im Browser. Das Default OG Bild wird fuer Social Sharing genutzt, wenn eine Seite kein eigenes Bild liefert.
+                Logo erscheint im Header. Favicon erscheint im Browser. Das Default OG Bild wird fuer Social Sharing genutzt, wenn eine Seite kein eigenes Bild liefert.
               </CardDescription>
             </CardHeader>
             <CardContent className="grid gap-6 xl:grid-cols-2">
+              <MediaFieldPicker
+                title="Site Logo Light"
+                value={siteLogoLight}
+                onChange={setSiteLogoLight}
+                options={mediaOptions}
+                hasInitialValue={Boolean(initialBindings.siteLogoLight?.assetId || initialBindings.siteLogoLight?.url)}
+                inputName="siteLogoLightMedia"
+                fileFieldName="siteLogoLightFile"
+                fileLabel="Upload Light Logo"
+                libraryLabel="Light Logo Library"
+                accept="image/*,.svg"
+                allowExternal={false}
+                allowClear
+                clearLabel="Remove Light Logo"
+                emptyValue={{
+                  mode: "upload",
+                  assetId: "",
+                  url: "",
+                }}
+              />
+
+              <MediaFieldPicker
+                title="Site Logo Dark"
+                value={siteLogoDark}
+                onChange={setSiteLogoDark}
+                options={mediaOptions}
+                hasInitialValue={Boolean(initialBindings.siteLogoDark?.assetId || initialBindings.siteLogoDark?.url)}
+                inputName="siteLogoDarkMedia"
+                fileFieldName="siteLogoDarkFile"
+                fileLabel="Upload Dark Logo"
+                libraryLabel="Dark Logo Library"
+                accept="image/*,.svg"
+                allowExternal={false}
+                allowClear
+                clearLabel="Remove Dark Logo"
+                emptyValue={{
+                  mode: "upload",
+                  assetId: "",
+                  url: "",
+                }}
+              />
+
               <MediaFieldPicker
                 title="Favicon"
                 value={favicon}
@@ -380,6 +446,45 @@ export function SiteSettingsForm({
                 })}
               </div>
 
+              <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+                <ImageIcon className="h-4 w-4 text-brand-primary" />
+                Header Logo Preview
+              </div>
+              <div className="grid gap-3">
+                <div className="rounded-md border bg-card p-4">
+                  <p className="mb-3 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
+                    Light
+                  </p>
+                  {siteLogoLightPreviewUrl ? (
+                    <img
+                      src={siteLogoLightPreviewUrl}
+                      alt="Site Logo Light"
+                      className="h-10 w-auto max-w-full object-contain"
+                    />
+                  ) : (
+                    <div className="flex h-10 items-center text-sm text-muted-foreground">
+                      Default light logo will be used
+                    </div>
+                  )}
+                </div>
+                <div className="rounded-md border border-border/70 bg-slate-950 p-4">
+                  <p className="mb-3 text-xs font-medium uppercase tracking-[0.2em] text-white/55">
+                    Dark
+                  </p>
+                  {siteLogoDarkPreviewUrl ? (
+                    <img
+                      src={siteLogoDarkPreviewUrl}
+                      alt="Site Logo Dark"
+                      className="h-10 w-auto max-w-full object-contain"
+                    />
+                  ) : (
+                    <div className="flex h-10 items-center text-sm text-white/60">
+                      Default dark logo will be used
+                    </div>
+                  )}
+                </div>
+              </div>
+
               <div className="flex items-center gap-2 text-sm font-medium text-foreground">
                 <Search className="h-4 w-4 text-brand-primary" />
                 Search Preview