📃 Added a bottom sheet to Metadata info

2026-04-02 23:44:03 -04:00
parent 17db1e64e1
commit 3e045f4c10
4 changed files with 595 additions and 962 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,6 @@
        "@floating-ui/react-dom": "^2.1.7",
        "@fortawesome/fontawesome-free": "^7.2.0",
        "@popperjs/core": "^2.11.8",
-        "@rollup/plugin-node-resolve": "^16.0.3",
        "@tanstack/react-query": "^5.90.21",
        "@tanstack/react-table": "^8.21.3",
        "@types/mime-types": "^3.0.1",
@@ -44,6 +43,7 @@
        "immer": "^11.1.4",
        "jsdoc": "^4.0.5",
        "lodash": "^4.17.23",
+        "motion": "^12.38.0",
        "pretty-bytes": "^7.1.0",
        "prop-types": "^15.8.1",
        "qs": "^6.15.0",
@@ -58,6 +58,7 @@
        "react-i18next": "^16.5.4",
        "react-loader-spinner": "^8.0.2",
        "react-modal": "^3.16.3",
+        "react-modal-sheet": "^5.6.0",
        "react-router": "^7.13.1",
        "react-router-dom": "^7.13.1",
        "react-select": "^5.10.2",
@@ -4612,34 +4613,11 @@
      "integrity": "sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q==",
      "license": "MIT"
    },
-    "node_modules/@rollup/plugin-node-resolve": {
-      "version": "16.0.3",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-16.0.3.tgz",
-      "integrity": "sha512-lUYM3UBGuM93CnMPG1YocWu7X802BrNF3jW2zny5gQyLQgRFJhV1Sq0Zi74+dh/6NBx1DxFC4b4GXg9wUCG5Qg==",
-      "license": "MIT",
-      "dependencies": {
-        "@rollup/pluginutils": "^5.0.1",
-        "@types/resolve": "1.20.2",
-        "deepmerge": "^4.2.2",
-        "is-module": "^1.0.0",
-        "resolve": "^1.22.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "rollup": "^2.78.0||^3.0.0||^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "rollup": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/@rollup/pluginutils": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
      "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@types/estree": "^1.0.0",
@@ -6175,12 +6153,6 @@
        "@types/react": "*"
      }
    },
-    "node_modules/@types/resolve": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
-      "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
-      "license": "MIT"
-    },
    "node_modules/@types/stack-utils": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
@@ -10760,6 +10732,33 @@
        "url": "https://github.com/sponsors/rawify"
      }
    },
+    "node_modules/framer-motion": {
+      "version": "12.38.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.38.0.tgz",
+      "integrity": "sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.38.0",
+        "motion-utils": "^12.36.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/fs-extra": {
      "version": "10.1.0",
      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
@@ -12318,12 +12317,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/is-module": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
-      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
-      "license": "MIT"
-    },
    "node_modules/is-negative-zero": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
@@ -14568,6 +14561,47 @@
        "node": ">=18.0.0"
      }
    },
+    "node_modules/motion": {
+      "version": "12.38.0",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.38.0.tgz",
+      "integrity": "sha512-uYfXzeHlgThchzwz5Te47dlv5JOUC7OB4rjJ/7XTUgtBZD8CchMN8qEJ4ZVsUmTyYA44zjV0fBwsiktRuFnn+w==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.38.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.38.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.38.0.tgz",
+      "integrity": "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.36.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.36.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.36.0.tgz",
+      "integrity": "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==",
+      "license": "MIT"
+    },
    "node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -15933,6 +15967,22 @@
        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19"
      }
    },
+    "node_modules/react-modal-sheet": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/react-modal-sheet/-/react-modal-sheet-5.6.0.tgz",
+      "integrity": "sha512-+WE2nVPdB/Jx0QbndIBqGvy6k0IXriW2lFaPeZSW1xOVri6rWhAwrSnArtsR1rxOxW8HBdAYeIPUcbjMvNeeyw==",
+      "license": "MIT",
+      "dependencies": {
+        "react-use-measure": "2.1.7"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "motion": ">=11",
+        "react": ">=16"
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.18.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
@@ -16088,6 +16138,21 @@
        "react-dom": ">=16.6.0"
      }
    },
+    "node_modules/react-use-measure": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
+      "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
    "immer": "^11.1.4",
    "jsdoc": "^4.0.5",
    "lodash": "^4.17.23",
+    "motion": "^12.38.0",
    "pretty-bytes": "^7.1.0",
    "prop-types": "^15.8.1",
    "qs": "^6.15.0",
@@ -66,6 +67,7 @@
    "react-i18next": "^16.5.4",
    "react-loader-spinner": "^8.0.2",
    "react-modal": "^3.16.3",
+    "react-modal-sheet": "^5.6.0",
    "react-router": "^7.13.1",
    "react-router-dom": "^7.13.1",
    "react-select": "^5.10.2",
--- a/src/client/components/ComicDetail/Tabs/VolumeInformation.tsx
+++ b/src/client/components/ComicDetail/Tabs/VolumeInformation.tsx
@@ -1,5 +1,6 @@
-import React, { ReactElement, useMemo } from "react";
+import React, { ReactElement, useMemo, useState } from "react";
 import { isEmpty, isNil } from "lodash";
+import { Sheet } from "react-modal-sheet";
 import ComicVineDetails from "../ComicVineDetails";

 interface ComicVineMetadata {
@@ -31,7 +32,13 @@ interface VolumeInformationProps {
 }

 /** Sources stored under `sourcedMetadata` — excludes `inferredMetadata`, which is checked separately. */
-const SOURCED_METADATA_KEYS = ["comicvine", "locg", "comicInfo", "metron", "gcd"];
+const SOURCED_METADATA_KEYS = [
+  "comicvine",
+  "locg",
+  "comicInfo",
+  "metron",
+  "gcd",
+];

 const SOURCE_LABELS: Record<string, string> = {
  comicvine: "ComicVine",
@@ -42,36 +49,69 @@ const SOURCE_LABELS: Record<string, string> = {
  inferredMetadata: "Local File",
 };

+const SOURCE_ICONS: Record<string, string> = {
+  comicvine: "icon-[solar--database-bold]",
+  locg: "icon-[solar--users-group-rounded-outline]",
+  comicInfo: "icon-[solar--file-text-outline]",
+  metron: "icon-[solar--planet-outline]",
+  gcd: "icon-[solar--book-outline]",
+  inferredMetadata: "icon-[solar--folder-outline]",
+};
+
 const MetadataSourceChips = ({
  sources,
  onReconcile,
 }: {
  sources: string[];
  onReconcile: () => void;
-}): ReactElement => (
-  <div className="flex flex-row flex-wrap items-center gap-2 mb-5 p-3 rounded-lg bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
-    <span className="text-xs text-slate-500 dark:text-slate-400 mr-1">
-      <i className="icon-[solar--database-outline] w-4 h-4 inline-block align-middle mr-1" />
-      {sources.length} metadata sources detected
-    </span>
-    {sources.map((source) => (
-      <span
-        key={source}
-        className="inline-flex items-center gap-1 bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 text-xs font-medium px-2 py-1 rounded-md border border-slate-200 dark:border-slate-600"
+}): ReactElement => {
+  const [isSheetOpen, setSheetOpen] = useState(false);
+
+  return (
+    <>
+      <div className="flex flex-col gap-2 mb-5 p-3 w-fit">
+        <div className="flex flex-row items-center justify-between">
+          <span className="text-md text-slate-500 dark:text-slate-400">
+            <i className="icon-[solar--database-outline] w-4 h-4 inline-block align-middle mr-1" />
+            {sources.length} metadata sources detected
+          </span>
+        </div>
+        <div className="flex flex-row flex-wrap gap-2">
+          {sources.map((source) => (
+            <span
+              key={source}
+              className="inline-flex items-center gap-1 bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 text-xs font-medium px-2 py-1 rounded-md border border-slate-200 dark:border-slate-600"
+            >
+              <i
+                className={`${SOURCE_ICONS[source] ?? "icon-[solar--check-circle-outline]"} w-3 h-3`}
+              />
+              {SOURCE_LABELS[source] ?? source}
+            </span>
+          ))}
+        </div>
+      </div>
+      <button
+        className="flex space-x-1 mb-2 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+        onClick={() => setSheetOpen(true)}
      >
-        <i className="icon-[solar--check-circle-outline] w-3 h-3" />
-        {SOURCE_LABELS[source] ?? source}
-      </span>
-    ))}
-    <button
-      onClick={onReconcile}
-      className="ml-auto inline-flex items-center gap-1 text-xs font-semibold text-sky-600 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-200 transition-colors cursor-pointer"
-    >
-      <i className="icon-[solar--refresh-outline] w-4 h-4" />
-      Reconcile sources
-    </button>
-  </div>
-);
+        <i className="icon-[solar--refresh-outline] w-4 h-4 px-3" />
+        Reconcile sources
+      </button>
+
+      <Sheet isOpen={isSheetOpen} onClose={() => setSheetOpen(false)}>
+        <Sheet.Container>
+          <Sheet.Header />
+          <Sheet.Content>
+            <div className="p-4">
+              {/* Reconciliation UI goes here */}
+            </div>
+          </Sheet.Content>
+        </Sheet.Container>
+        <Sheet.Backdrop />
+      </Sheet>
+    </>
+  );
+};

 /**
 * Displays volume metadata for a comic.
@@ -84,7 +124,9 @@ const MetadataSourceChips = ({
 * @param props.data - Comic data containing sourced and inferred metadata.
 * @param props.onReconcile - Called when the user triggers source reconciliation.
 */
-export const VolumeInformation = (props: VolumeInformationProps): ReactElement => {
+export const VolumeInformation = (
+  props: VolumeInformationProps,
+): ReactElement => {
  const { data, onReconcile } = props;

  const presentSources = useMemo(() => {
@@ -92,10 +134,16 @@ export const VolumeInformation = (props: VolumeInformationProps): ReactElement =
      const val = (data?.sourcedMetadata ?? {})[key];
      if (isNil(val) || isEmpty(val)) return false;
      // locg returns an object even when empty; require at least one non-null value
-      if (key === "locg") return Object.values(val as Record<string, unknown>).some((v) => !isNil(v) && v !== "");
+      if (key === "locg")
+        return Object.values(val as Record<string, unknown>).some(
+          (v) => !isNil(v) && v !== "",
+        );
      return true;
    });
-    if (!isNil(data?.inferredMetadata?.issue) && !isEmpty(data?.inferredMetadata?.issue)) {
+    if (
+      !isNil(data?.inferredMetadata?.issue) &&
+      !isEmpty(data?.inferredMetadata?.issue)
+    ) {
      sources.push("inferredMetadata");
    }
    return sources;
@@ -109,12 +157,13 @@ export const VolumeInformation = (props: VolumeInformationProps): ReactElement =
          onReconcile={onReconcile ?? (() => {})}
        />
      )}
-      {presentSources.length === 1 && data.sourcedMetadata?.comicvine?.volumeInformation && (
-        <ComicVineDetails
-          data={data.sourcedMetadata.comicvine}
-          updatedAt={data.updatedAt}
-        />
-      )}
+      {presentSources.length === 1 &&
+        data.sourcedMetadata?.comicvine?.volumeInformation && (
+          <ComicVineDetails
+            data={data.sourcedMetadata.comicvine}
+            updatedAt={data.updatedAt}
+          />
+        )}
    </div>
  );
 };
--- a/yarn.lock
+++ b/yarn.lock