Refactor portfolio admin and views

components/root/media-field-picker.tsx

@@ -3,14 +3,23 @@
 /* eslint-disable @next/next/no-img-element */
 
 import type { MediaKind } from "@prisma/client";
-import { Check, Link2, Search, Type, Upload } from "lucide-react";
-import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Check, ImageIcon, Search, Trash2 } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
-import type { MediaOption } from "@/lib/media";
-import { cn } from "@/lib/utils";
 import { AppCard } from "@/components/ui/app-card";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import type { MediaOption } from "@/lib/media";
+import { cn } from "@/lib/utils";
 
 export type MediaFieldState = {
   mode: "upload" | "external" | "library";
@@ -29,11 +38,6 @@ type MediaFieldPickerProps = {
   hasInitialValue?: boolean;
   inputName: string;
   fileFieldName: string;
-  fileLabel?: string;
-  externalLabel?: string;
-  libraryLabel?: string;
-  accept?: string;
-  allowExternal?: boolean;
   allowClear?: boolean;
   clearLabel?: string;
   emptyValue?: Partial<MediaFieldState>;
@@ -46,58 +50,32 @@ export function MediaFieldPicker({
   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 [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
   const filteredOptions = options.filter((option) => option.kind === value.kind);
   const selectedOption = filteredOptions.find((option) => option.id === value.assetId) ?? null;
-  const visibleLibraryOptions = useMemo(() => {
-    const normalizedQuery = libraryQuery.trim().toLowerCase();
+  const visibleOptions = useMemo(() => {
+    const normalizedQuery = query.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;
+  }, [filteredOptions, query]);
   const serializedValue = JSON.stringify({
     mode: value.mode,
     assetId: value.assetId,
     url: value.url,
-    label: resolvedLabel,
+    label: value.label,
     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));
+  const canClear = allowClear && (Boolean(value.assetId) || (hasInitialValue && !value.isCleared));
 
   useEffect(() => {
     const hiddenInput = hiddenInputRef.current;
@@ -111,174 +89,132 @@ export function MediaFieldPicker({
   }, [serializedValue]);
 
   return (
-    <AppCard padding="sm" className="space-y-3">
-      <div className="space-y-2">
-        <Label className="sr-only">{title}</Label>
-        <div className="flex flex-wrap gap-2">
-          {modeOptions.map((mode) => (
-            <button
-              key={mode}
-              type="button"
-              onClick={() =>
-                onChange({
-                  ...value,
-                  mode,
-                  assetId: mode === "library" ? value.assetId : "",
-                  url: mode === "external" ? value.url : "",
-                  isCleared: false,
-                })
-              }
-              className={cn(
-                "rounded-nested border px-4 py-2 text-sm transition-colors",
-                value.mode === mode
-                  ? "border-input bg-primary text-primary-foreground"
-                  : "border-input bg-background text-foreground/75 hover:bg-accent hover:text-accent-foreground",
-              )}
-            >
-              {mode}
-            </button>
-          ))}
+    <AppCard level={2} padding="sm" className="space-y-4">
+      <input ref={hiddenInputRef} type="hidden" name={inputName} value={serializedValue} />
+
+      <div className="flex items-start justify-between gap-4">
+        <div className="space-y-1">
+          <Label className="text-sm font-semibold text-foreground">{title}</Label>
+          <p className="text-sm text-muted-foreground">
+            Media must be selected from the
+            {" "}
+            Media Library
+            .
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button type="button" variant="outline" onClick={() => setOpen(true)}>
+            <ImageIcon className="h-4 w-4" />
+            Select from Media
+          </Button>
           {canClear ? (
-            <button
+            <Button
               type="button"
+              variant="ghost"
+              className="text-destructive hover:text-destructive"
               onClick={() =>
                 onChange({
                   ...value,
                   mode: emptyValue?.mode ?? "upload",
                   assetId: emptyValue?.assetId ?? "",
                   url: emptyValue?.url ?? "",
-                  label: emptyValue?.label ?? value.label,
+                  label: emptyValue?.label ?? "",
                   isCleared: true,
                 })
               }
-              className="rounded-nested border border-destructive/25 px-4 py-2 text-sm text-destructive transition-colors hover:bg-destructive/5"
             >
+              <Trash2 className="h-4 w-4" />
               {clearLabel}
-            </button>
+            </Button>
           ) : null}
         </div>
       </div>
 
-      <input
-        ref={hiddenInputRef}
-        type="hidden"
-        name={inputName}
-        value={serializedValue}
-      />
-
-      {value.mode !== "library" ? (
-        <div className="space-y-2">
-          <Label className="sr-only">Label</Label>
-          <div className="relative">
-            <Type className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              value={value.label}
-              onChange={(event) => onChange({ ...value, label: event.target.value, isCleared: false })}
-              placeholder="Label"
-              className="pl-9"
+      <AppCard padding="sm" className="rounded-nested border-border/70">
+        {selectedOption ? (
+          <div className="flex items-center gap-4">
+            <img
+              src={selectedOption.url}
+              alt={selectedOption.label}
+              className="h-16 w-16 rounded-nested object-cover"
             />
+            <div className="min-w-0">
+              <p className="truncate text-sm font-medium text-foreground">{selectedOption.label}</p>
+              <p className="truncate text-xs text-muted-foreground">{selectedOption.source}</p>
+            </div>
           </div>
-        </div>
-      ) : null}
-
-      {value.mode === "upload" ? (
-        <div className="space-y-2">
-          <Label className="sr-only">{fileLabel ?? fileFieldName}</Label>
-          <div className="relative">
-            <Upload className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-            <Input name={fileFieldName} type="file" accept={accept} className="pl-9 file:mr-3" />
+        ) : (
+          <div className="rounded-nested border border-dashed border-border/70 px-4 py-6 text-sm text-muted-foreground">
+            No media selected.
           </div>
-        </div>
-      ) : null}
+        )}
+      </AppCard>
 
-      {value.mode === "external" ? (
-        <div className="space-y-2">
-          <Label className="sr-only">{externalLabel ?? "External URL"}</Label>
-          <div className="relative">
-            <Link2 className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              value={value.url}
-              onChange={(event) => onChange({ ...value, url: event.target.value, isCleared: false })}
-              placeholder={externalLabel ?? "External URL"}
-              className="pl-9"
-            />
-          </div>
-        </div>
-      ) : null}
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-w-4xl">
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogDescription>Select an existing item from the media library.</DialogDescription>
+          </DialogHeader>
 
-      {value.mode === "library" ? (
-        <div className="space-y-3">
-          <Label className="sr-only">{libraryLabel ?? "Media Library"}</Label>
-          <div className="space-y-2 rounded-nested border border-border/80 bg-card p-3">
+          <div className="space-y-4">
             <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"
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
                 placeholder="Search media"
+                className="pl-9"
               />
             </div>
 
-            <div className="max-h-64 space-y-2 overflow-y-auto">
-              {visibleLibraryOptions.length > 0 ? (
-                visibleLibraryOptions.map((option) => {
-                  const isActive = option.id === value.assetId;
+            <div className="grid max-h-[55vh] gap-3 overflow-y-auto md:grid-cols-2 xl:grid-cols-3">
+              {visibleOptions.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-input bg-accent/40"
-                          : "border-input bg-background hover:bg-accent/20",
-                      )}
-                    >
-                      {option.url ? (
-                        <img src={option.url} alt={option.label} className="h-12 w-12 rounded-nested object-cover" />
-                      ) : (
-                        <div className="h-12 w-12 rounded-nested border border-border bg-background" />
-                      )}
-                      <div className="min-w-0 flex-1">
+                return (
+                  <button
+                    key={option.id}
+                    type="button"
+                    onClick={() => {
+                      onChange({
+                        ...value,
+                        mode: "library",
+                        assetId: option.id,
+                        url: option.url,
+                        label: option.label,
+                        isCleared: false,
+                      });
+                      setOpen(false);
+                    }}
+                    className={cn(
+                      "overflow-hidden rounded-surface border text-left transition-colors",
+                      isActive
+                        ? "border-input bg-accent/20"
+                        : "border-border/70 bg-card hover:border-input hover:bg-accent/10",
+                    )}
+                  >
+                    <img src={option.url} alt={option.label} className="h-40 w-full object-cover" />
+                    <div className="flex items-center justify-between gap-3 p-4">
+                      <div className="min-w-0">
                         <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-input px-3 py-4 text-sm text-muted-foreground">
-                  No media found.
-                </div>
-              )}
+                    </div>
+                  </button>
+                );
+              })}
             </div>
           </div>
-        </div>
-      ) : null}
 
-      {previewUrl ? (
-        value.kind === "IMAGE" ? (
-          <AppCard className="overflow-hidden rounded-nested">
-            <img src={previewUrl} alt={value.label || title} className="h-40 w-full object-cover" />
-          </AppCard>
-        ) : (
-          <AppCard className="rounded-nested px-4 py-3 text-sm text-muted-foreground">
-            {previewUrl}
-          </AppCard>
-        )
-      ) : null}
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+              Close
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </AppCard>
   );
 }