fix favicon update flow and site media picker

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?.url ?? ""
-      : value.mode === "external"
-        ? value.url
-        : "";
+      ? 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({
-          mode: value.mode,
-          assetId: value.assetId,
-          url: value.url,
-          label: value.label,
-          kind: value.kind,
-        })}
+        value={serializedValue}
       />
 
-      <div className="space-y-2">
-        <Label>Label</Label>
-        <Input
-          value={value.label}
-          onChange={(event) => onChange({ ...value, label: event.target.value })}
-          placeholder="Homepage Hero"
-        />
-      </div>
+      {value.mode !== "library" ? (
+        <div className="space-y-2">
+          <Label>Label</Label>
+          <Input
+            value={value.label}
+            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
-            value={value.assetId}
-            onChange={(event) => onChange({ ...value, assetId: event.target.value })}
-            className="flex h-11 w-full rounded-pill border border-border bg-background px-4 text-sm text-foreground shadow-sm"
-          >
-            <option value="">Select media</option>
-            {filteredOptions.map((option) => (
-              <option key={option.id} value={option.id}>
-                {option.label}
-              </option>
-            ))}
-          </select>
+          <div className="space-y-2 rounded-nested border border-border bg-surface-1 p-3">
+            <div className="relative">
+              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              <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.url ? (
+                        <img src={option.url} alt={option.label} className="h-12 w-12 rounded-md object-cover" />
+                      ) : (
+                        <div className="h-12 w-12 rounded-md border border-border bg-background" />
+                      )}
+                      <div className="min-w-0 flex-1">
+                        <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}