@bygghammar/cms-platform 0.90.0-m7.9 → 0.91.0

package/src/backoffice/MediaLibraryView.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, type ComponentType, type ReactNode } from "react";
+import { useMemo, useRef, useState, type ComponentType, type ReactNode } from "react";
 import {
   Upload,
   Trash2,
@@ -13,12 +13,24 @@ import {
   RotateCcw,
   Tags,
   Replace,
+  Folder,
+  Clock,
 } from "lucide-react";
 import { toast } from "sonner";
 
 import { optimizeForUpload } from "../media/optimize";
 import { pickVideoPoster } from "../media/pick-video-poster";
 import { cleanFileName, splitExt, uniqueFileName } from "../media/filename";
+import {
+  folderLabel,
+  isInFolder,
+  mediaFolderOf,
+  mediaBaseName,
+  monthFolder,
+  sanitizeMediaFolder,
+  summarizeMediaFolders,
+  type MediaFolderMode,
+} from "../media/folders";
 import { hasMediaMeta, lookupMediaMeta, type MediaMetaMap } from "../media/media-meta";
 import type { MediaUsage, MediaUsageReport, MediaImportResult } from "../media/usage-types";
 import type { MediaLibraryItem, MediaTrashItem } from "../media/library-types";
@@ -34,6 +46,8 @@ export type MediaLibraryDeps = {
   usage: MediaUsageReport | undefined;
   /** Whether the signed-in user may permanently delete / run maintenance. */
   isSuperadmin: boolean;
+  /** Site timezone, so the automatic `YYYY-MM` folder rolls over locally. */
+  timezone?: string;
   metaMap: MediaMetaMap | undefined;
 
   /* Host server calls */
@@ -42,7 +56,12 @@ export type MediaLibraryDeps = {
   purgeMedia: (input: { data: { id: string } }) => Promise<unknown>;
   emptyTrash: () => Promise<{ purged: number }>;
   uploadMediaBundle: (input: {
-    data: { files: { name: string; contentType: string; bytes: number[] }[] };
+    data: {
+      files: { name: string; contentType: string; bytes: number[] }[];
+      /** Destination folder; absent means the automatic `YYYY-MM` folder. */
+      folder?: string;
+      timezone?: string;
+    };
   }) => Promise<unknown>;
   importUrlToMedia: (input: { data: { url: string } }) => Promise<MediaImportResult>;
   /** Invalidate library / trash / usage queries after a mutation. */
@@ -137,6 +156,23 @@ function monthLabel(key: string) {
 
 const PAGE_SIZE = 50;
 
+/**
+ * How many uploads the Recent tab shows before "Load more". Deliberately a
+ * constant rather than a setting — 50 fills the grid without a slow first
+ * paint, and pagination covers everything beyond it.
+ */
+const RECENT_PAGE_SIZE = 50;
+
+/** File name without its folder — cards and downloads show this, not the path. */
+function displayName(item: { name: string }): string {
+  return mediaBaseName(item.name);
+}
+
+/** Newest first, undated last, host order preserved within a tie. */
+function byNewest(a: MediaLibraryItem, b: MediaLibraryItem) {
+  return (itemDate(b)?.getTime() ?? 0) - (itemDate(a)?.getTime() ?? 0);
+}
+
 /**
  * Keep the uploaded filename (SEO-relevant) — slugified, extension stripped so
  * the optimizer appends the final one. Collisions get `-2`, `-3`, … never a timestamp.
@@ -160,6 +196,7 @@ export function MediaLibraryView({ deps }: { deps: MediaLibraryDeps }) {
     trashLoading,
     usage,
     isSuperadmin: isSuper,
+    timezone,
     metaMap,
     deleteMedia: del,
     restoreMedia: restore,
@@ -183,7 +220,12 @@ export function MediaLibraryView({ deps }: { deps: MediaLibraryDeps }) {
   const [percent, setPercent] = useState(0);
   const [filter, setFilter] = useState("");
   const [month, setMonth] = useState("all");
-  const [visible, setVisible] = useState(PAGE_SIZE);
+  const [visible, setVisible] = useState(RECENT_PAGE_SIZE);
+  const [browse, setBrowse] = useState<"recent" | "folders">("recent");
+  const [folder, setFolder] = useState("");
+  const [scopeSearch, setScopeSearch] = useState(false);
+  const [folderMode, setFolderMode] = useState<MediaFolderMode>("auto");
+  const [customFolder, setCustomFolder] = useState("");
 
   const [usageFor, setUsageFor] = useState<{ title: string; usages: MediaUsage[] } | null>(null);
   const [importingUrl, setImportingUrl] = useState<string | null>(null);
@@ -255,31 +297,59 @@ export function MediaLibraryView({ deps }: { deps: MediaLibraryDeps }) {
   const months = [...monthCounts.keys()].sort((a, b) => b.localeCompare(a));
   const undatedCount = items.length - [...monthCounts.values()].reduce((a, b) => a + b, 0);
 
+  // Folders present in the library, month folders newest first.
+  const folders = useMemo(() => summarizeMediaFolders(items.map((i) => i.path)), [items]);
+  // The selected folder may vanish (last file deleted) — fall back to the first.
+  const activeFolder = folders.some((f) => f.folder === folder)
+    ? folder
+    : (folders[0]?.folder ?? "");
+  const query = filter.trim().toLowerCase();
+  const searching = query.length > 0;
+  // Search spans every folder unless the editor explicitly scopes it.
+  const folderScoped = browse === "folders" && (!searching || scopeSearch);
+
   const filtered = items.filter((i) => {
-    if (!i.name.toLowerCase().includes(filter.toLowerCase())) return false;
+    if (query && !i.path.toLowerCase().includes(query)) return false;
+    if (folderScoped && !isInFolder(i.path, activeFolder)) return false;
     if (month === "all") return true;
     if (month === "unknown") return monthKey(i) === null;
     return monthKey(i) === month;
   });
+  // Recent is a view over the whole library; folder browsing keeps the host's
+  // order so a gallery folder reads the way it was uploaded.
+  const ordered = browse === "recent" ? [...filtered].sort(byNewest) : filtered;
   const imageCount = filtered.filter((i) => (i.contentType ?? "").startsWith("image/")).length;
   const videoCount = filtered.filter((i) => (i.contentType ?? "").startsWith("video/")).length;
   const otherCount = filtered.length - imageCount - videoCount;
-  const shown = filtered.slice(0, visible);
+  const shown = ordered.slice(0, visible);
+  const resetPaging = () => setVisible(browse === "recent" ? RECENT_PAGE_SIZE : PAGE_SIZE);
 
   const usageMap = usage?.byPath ?? {};
   const externals = usage?.external ?? [];
 
+  // Where this batch lands. Empty means the server's automatic `YYYY-MM`.
+  const customDest = sanitizeMediaFolder(customFolder);
+  const uploadDest = folderMode === "custom" ? customDest : "";
+  const customInvalid = folderMode === "custom" && customFolder.trim() !== "" && !customDest;
+
   const onUpload = async (files: FileList | null) => {
     if (!files?.length) return;
+    if (folderMode === "custom" && !customDest) {
+      toast.error("Enter a folder name, or switch back to the automatic month folder.");
+      if (fileInput.current) fileInput.current.value = "";
+      return;
+    }
     setUploading(true);
     try {
       let totalSaved = 0;
       const arr = Array.from(files);
       // Names already in the library (plus the ones taken during this batch).
+      // Compared without folders: the server de-duplicates per destination.
       const taken = new Set<string>(
         items.flatMap((i) => {
-          const { base } = splitExt(i.name);
-          return [i.name, base, base.replace(/-(?:480|768|1200|1920)$/, "")];
+          const name = displayName(i);
+          const { base } = splitExt(name);
+          return [name, base, base.replace(/-(?:480|768|1200|1920)$/, "")];
         }),
       );
       const stepPct = (idx: number, frac: number) =>
@@ -306,7 +376,13 @@ export function MediaLibraryView({ deps }: { deps: MediaLibraryDeps }) {
             bytes: Array.from(new Uint8Array(await part.blob.arrayBuffer())),
           })),
         );
-        await uploadBundle({ data: { files: payload } });
+        await uploadBundle({
+          data: {
+            files: payload,
+            ...(uploadDest ? { folder: uploadDest } : {}),
+            ...(timezone ? { timezone } : {}),
+          },
+        });
         totalSaved += Math.max(0, file.size - bundle.primary.blob.size);
         const extraTotal = bundle.extras.length || 1;
         let extraDone = 0;
@@ -317,7 +393,17 @@ export function MediaLibraryView({ deps }: { deps: MediaLibraryDeps }) {
         stepPct(idx, 1);
       }
       const savedTxt = totalSaved > 1024 ? ` (saved ${humanBytes(totalSaved)})` : "";
-      toast.success(`Uploaded ${arr.length} file${arr.length > 1 ? "s" : ""}${savedTxt}`);
+      const dest = uploadDest || monthFolder(Date.now(), timezone);
+      toast.success(
+        `Uploaded ${arr.length} file${arr.length > 1 ? "s" : ""} to ${dest}${savedTxt}`,
+      );
+      // Show the destination straight away instead of leaving the editor on a
+      // Recent list that may not include a back-dated folder.
+      if (uploadDest) {
+        setBrowse("folders");
+        setFolder(uploadDest);
+        setVisible(PAGE_SIZE);
+      }
       await invalidateLibrary();
     } catch (e) {
       toast.error(e instanceof Error ? e.message : "Upload failed");
@@ -366,7 +452,7 @@ export function MediaLibraryView({ deps }: { deps: MediaLibraryDeps }) {
           await del({ data: { path: item.path } });
           ok += 1;
         } catch {
-          failed.push(item.name);
+          failed.push(displayName(item));
         }
       }
       await refreshAll();
@@ -392,7 +478,7 @@ export function MediaLibraryView({ deps }: { deps: MediaLibraryDeps }) {
     for (const item of selectedItems) {
       const a = document.createElement("a");
       a.href = item.url;
-      a.download = item.name;
+      a.download = displayName(item);
       a.target = "_blank";
       a.rel = "noopener";
       document.body.appendChild(a);
@@ -436,7 +522,7 @@ export function MediaLibraryView({ deps }: { deps: MediaLibraryDeps }) {
             value={month}
             onChange={(e) => {
               setMonth(e.target.value);
-              setVisible(PAGE_SIZE);
+              resetPaging();
             }}
             className="border border-ink/15 px-2 py-1.5 text-sm bg-white text-ink focus:outline-none focus:border-sea"
             title="Filter by upload month"
@@ -456,10 +542,11 @@ export function MediaLibraryView({ deps }: { deps: MediaLibraryDeps }) {
             <input
               type="text"
               value={filter}
-              placeholder="Search…"
+              placeholder="Search all folders…"
+              aria-label="Search media"
               onChange={(e) => {
                 setFilter(e.target.value);
-                setVisible(PAGE_SIZE);
+                resetPaging();
               }}
               className="border border-ink/15 pl-8 pr-3 py-1.5 text-sm bg-white focus:outline-none focus:border-sea"
             />
@@ -614,6 +701,130 @@ export function MediaLibraryView({ deps }: { deps: MediaLibraryDeps }) {
             </span>
           </div>
 
+          {/* Browse: newest uploads, or one folder at a time. */}
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-2 border border-ink/10 bg-white px-3 py-2 text-[0.72rem]">
+            <div className="flex items-center gap-1" role="group" aria-label="Browse media by">
+              {(["recent", "folders"] as const).map((b) => (
+                <button
+                  key={b}
+                  type="button"
+                  aria-pressed={browse === b}
+                  onClick={() => {
+                    setBrowse(b);
+                    setVisible(b === "recent" ? RECENT_PAGE_SIZE : PAGE_SIZE);
+                  }}
+                  className={[
+                    "inline-flex items-center gap-1.5 border px-2.5 py-1 text-[0.65rem] uppercase tracking-widest",
+                    browse === b
+                      ? "border-sea bg-sea text-white"
+                      : "border-ink/15 text-ink/60 hover:text-ink",
+                  ].join(" ")}
+                >
+                  {b === "recent" ? <Clock className="size-3" /> : <Folder className="size-3" />}
+                  {b === "recent" ? "Recent" : "Folders"}
+                </button>
+              ))}
+            </div>
+
+            {browse === "folders" ? (
+              <>
+                <label htmlFor="media-folder" className="text-ink/55">
+                  Folder
+                </label>
+                <select
+                  id="media-folder"
+                  value={activeFolder}
+                  onChange={(e) => {
+                    setFolder(e.target.value);
+                    setVisible(PAGE_SIZE);
+                  }}
+                  className="border border-ink/15 px-2 py-1 text-sm bg-white text-ink focus:outline-none focus:border-sea"
+                >
+                  {folders.length === 0 ? <option value="">No folders yet</option> : null}
+                  {folders.map((f) => (
+                    <option key={f.folder} value={f.folder}>
+                      {f.label} ({f.count})
+                    </option>
+                  ))}
+                </select>
+                {searching ? (
+                  <label className="inline-flex cursor-pointer items-center gap-1.5 text-ink/70">
+                    <input
+                      type="checkbox"
+                      checked={scopeSearch}
+                      onChange={(e) => {
+                        setScopeSearch(e.target.checked);
+                        setVisible(PAGE_SIZE);
+                      }}
+                      className="size-3.5 accent-[color:var(--color-sea,#2ac4ea)]"
+                    />
+                    Search only {folderLabel(activeFolder)}
+                  </label>
+                ) : null}
+              </>
+            ) : null}
+
+            <span className="ml-auto text-ink/55">
+              {searching
+                ? folderScoped
+                  ? `Searching ${folderLabel(activeFolder)}`
+                  : "Searching every folder"
+                : browse === "recent"
+                  ? "Newest uploads first"
+                  : folderLabel(activeFolder)}
+            </span>
+          </div>
+
+          {/* Where the next batch lands. Existing files are never moved. */}
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-2 border border-ink/10 bg-white px-3 py-2 text-[0.72rem] text-ink/70">
+            <span className="uppercase tracking-[0.18em] text-ink/45">Upload to</span>
+            <div className="flex items-center gap-1" role="group" aria-label="Upload destination">
+              {(["auto", "custom"] as const).map((m) => (
+                <button
+                  key={m}
+                  type="button"
+                  aria-pressed={folderMode === m}
+                  onClick={() => setFolderMode(m)}
+                  className={[
+                    "border px-2.5 py-1 text-[0.65rem] uppercase tracking-widest",
+                    folderMode === m
+                      ? "border-sea bg-sea text-white"
+                      : "border-ink/15 text-ink/60 hover:text-ink",
+                  ].join(" ")}
+                >
+                  {m === "auto" ? "Automatic month" : "Custom folder"}
+                </button>
+              ))}
+            </div>
+            {folderMode === "custom" ? (
+              <input
+                type="text"
+                value={customFolder}
+                onChange={(e) => setCustomFolder(e.target.value)}
+                placeholder="2027-01-Cruice_1_Gallery"
+                aria-label="Custom upload folder"
+                aria-invalid={customInvalid || undefined}
+                aria-describedby="media-upload-dest"
+                className={[
+                  "border px-2 py-1 text-sm bg-white focus:outline-none focus:border-sea",
+                  customInvalid ? "border-red-500" : "border-ink/15",
+                ].join(" ")}
+              />
+            ) : null}
+            <span
+              id="media-upload-dest"
+              className={customInvalid ? "text-red-600" : "text-ink/55"}
+            >
+              {folderMode === "auto"
+                ? `New uploads go to ${monthFolder(Date.now(), timezone)}/. Files already in the library stay where they are.`
+                : customInvalid
+                  ? "Use letters, numbers, dashes, dots or underscores."
+                  : customDest
+                    ? `New uploads go to ${customDest}/.`
+                    : "Name the folder for this batch."}
+            </span>
+          </div>
+
           <div className="flex flex-wrap items-center gap-x-4 gap-y-1 border border-ink/10 bg-white px-3 py-2 text-[0.72rem] text-ink/70">
             <span className="uppercase tracking-[0.18em] text-ink/45">
               {month === "all"
@@ -752,7 +963,7 @@ export function MediaLibraryView({ deps }: { deps: MediaLibraryDeps }) {
                         <FocalImage
                           src={bustUrl(item.url)}
                           responsive={false}
-                          alt={item.name}
+                          alt={displayName(item)}
                           className="w-full h-full object-cover"
                         />
                       ) : isVideo ? (
@@ -768,7 +979,9 @@ export function MediaLibraryView({ deps }: { deps: MediaLibraryDeps }) {
                       )}
                       <button
                         type="button"
-                        onClick={() => inUse && setUsageFor({ title: item.name, usages })}
+                        onClick={() =>
+                          inUse && setUsageFor({ title: displayName(item), usages })
+                        }
                         disabled={!inUse}
                         title={
                           inUse
@@ -787,9 +1000,14 @@ export function MediaLibraryView({ deps }: { deps: MediaLibraryDeps }) {
                       </button>
                     </div>
                     <div className="p-2.5 flex-1 flex flex-col gap-1.5">
-                      <div className="text-xs text-ink truncate" title={item.name}>
-                        {item.name}
+                      <div className="text-xs text-ink truncate" title={item.path}>
+                        {displayName(item)}
                       </div>
+                      {mediaFolderOf(item.path) ? (
+                        <div className="text-[0.65rem] text-ink/40 truncate">
+                          {mediaFolderOf(item.path)}
+                        </div>
+                      ) : null}
                       <div className="text-[0.65rem] uppercase tracking-widest text-ink/45">
                         {humanBytes(item.size)} · {isoDate(item) ?? "Unknown date"}
                       </div>
@@ -983,8 +1201,8 @@ export function MediaLibraryView({ deps }: { deps: MediaLibraryDeps }) {
           title="Move file to the bin?"
           description={
             (usageMap[confirmOne.path]?.length ?? 0) > 0
-              ? `"${confirmOne.name}" is still used in ${usageMap[confirmOne.path]!.length} place(s) — it will disappear from the site. You can restore it from the bin.`
-              : `"${confirmOne.name}" will be moved to the bin. You can restore it later.`
+              ? `"${displayName(confirmOne)}" is still used in ${usageMap[confirmOne.path]!.length} place(s) — it will disappear from the site. You can restore it from the bin.`
+              : `"${displayName(confirmOne)}" will be moved to the bin. You can restore it later.`
           }
           confirmLabel="Move to bin"
           danger
@@ -1015,7 +1233,7 @@ export function MediaLibraryView({ deps }: { deps: MediaLibraryDeps }) {
               ? `These files are used in ${selectedUses} place(s) on the site and will disappear there. You can restore them from the bin.`
               : "The selected files will be moved to the bin. You can restore them later."
           }
-          details={selectedItems.map((i) => i.name)}
+          details={selectedItems.map((i) => i.path)}
           confirmLabel="Move to bin"
           danger
           busy={bulkBusy}

package/src/backoffice/NavigationView.tsx

@@ -4,11 +4,19 @@ import { RotateCcw, Save } from "lucide-react";
 import { toast } from "sonner";
 
 import { EDIT_LOCK_TYPES } from "../cms/edit-lock";
+import type { SiteTypography, TypographySlot } from "../config/typography";
 import { EditLockBanner, EditLockFence, useEditLock } from "./EditLock";
+import { TypographyPanel } from "./TypographyPanel";
 
 /** The two site-wide content sections this screen edits. */
 export type NavigationSectionKey = "nav" | "footer";
 
+/** Which typography slot belongs to which section on this screen. */
+const TYPOGRAPHY_SLOT: Record<NavigationSectionKey, TypographySlot> = {
+  nav: "menu",
+  footer: "footer",
+};
+
 /** Host-provided data and actions for the navigation & footer screen. */
 export type NavigationDeps = {
   /** Saved overrides keyed by section, as stored in the CMS. */
@@ -28,6 +36,24 @@ export type NavigationDeps = {
     };
   }) => Promise<unknown>;
   refresh: () => Promise<unknown> | void;
+  /**
+   * Menu and footer typography, edited beside the section it restyles.
+   *
+   * Optional: a host that has not wired the site-settings functions into this
+   * screen simply does not get the panels, and nothing else changes.
+   */
+  typography?: {
+    /** In effect now — code defaults with any stored override applied. */
+    value: SiteTypography;
+    /**
+     * Stored overrides only. Saving merges into this, so writing the menu font
+     * never freezes the footer's code default into the database.
+     */
+    overrides?: SiteTypography;
+    /** Persist the complete typography override object. */
+    save: (next: SiteTypography) => Promise<unknown>;
+    refresh?: () => Promise<unknown> | void;
+  };
 };
 
 function Editor({
@@ -42,6 +68,8 @@ function Editor({
   description: string;
 }) {
   const { overrides, site, defaults, SectionForm, saveSection, refresh } = deps;
+  const typography = deps.typography;
+  const slot = TYPOGRAPHY_SLOT[sectionKey];
 
   const current = useMemo(() => {
     const override = overrides?.[sectionKey];
@@ -128,6 +156,21 @@ function Editor({
             Reset to default
           </button>
         </div>
+
+        {/* Typography is a site setting rather than section content, so it has
+            its own save and is not held by this section's content lock. */}
+        {typography ? (
+          <div className="mt-8 border-t border-ink/10 pt-6">
+            <TypographyPanel
+              slot={slot}
+              value={typography.value[slot]}
+              onSave={async (choice) => {
+                await typography.save({ ...(typography.overrides ?? {}), [slot]: choice });
+                await typography.refresh?.();
+              }}
+            />
+          </div>
+        ) : null}
       </div>
     </section>
   );