alinea/dist/dashboard/view/MediaExplorer.js

Headless git-based CMS

import {
  dist_default
} from "../../chunks/chunk-A5O3N2GS.js";
import {
  useQuery
} from "../../chunks/chunk-YWCPLD22.js";
import "../../chunks/chunk-NZLE2WMY.js";

// src/dashboard/view/MediaExplorer.tsx
import { Entry } from "alinea/core/Entry";
import { workspaceMediaDir } from "alinea/core/util/EntryFilenames";
import { EntryHeader } from "alinea/dashboard/view/entry/EntryHeader";
import { HStack, TextLabel, VStack } from "alinea/ui";
import { IcRoundArrowBack } from "alinea/ui/icons/IcRoundArrowBack";
import { Main } from "alinea/ui/Main";
import { useMemo } from "react";
import { useNavigate } from "../atoms/LocationAtoms.js";
import { useConfig } from "../hook/UseConfig.js";
import { useGraph } from "../hook/UseGraph.js";
import { useNav } from "../hook/UseNav.js";
import { useRoot } from "../hook/UseRoot.js";
import { useWorkspace } from "../hook/UseWorkspace.js";
import { Head } from "../util/Head.js";
import { Explorer } from "./explorer/Explorer.js";
import { IconLink } from "./IconButton.js";

// src/dashboard/view/MediaExplorer.module.scss
var MediaExplorer_module_default = {
  "root": "alinea-MediaExplorer",
  "root-inner": "alinea-MediaExplorer-inner",
  "rootInner": "alinea-MediaExplorer-inner",
  "root-inner-header": "alinea-MediaExplorer-inner-header",
  "rootInnerHeader": "alinea-MediaExplorer-inner-header",
  "root-inner-content": "alinea-MediaExplorer-inner-content",
  "rootInnerContent": "alinea-MediaExplorer-inner-content",
  "root-title": "alinea-MediaExplorer-title",
  "rootTitle": "alinea-MediaExplorer-title",
  "root-list": "alinea-MediaExplorer-list",
  "rootList": "alinea-MediaExplorer-list"
};

// src/dashboard/view/MediaExplorer.tsx
import { FileUploader } from "./media/FileUploader.js";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var styles = dist_default(MediaExplorer_module_default);
function MediaExplorer({ editor }) {
  const config = useConfig();
  const parentId = editor?.entryId;
  const workspace = useWorkspace();
  const root = useRoot();
  const graph = useGraph();
  const condition = useMemo(() => {
    return {
      _root: root.name,
      _workspace: workspace.name,
      _parentId: parentId ?? null
    };
  }, [workspace, root, parentId]);
  const { data } = useQuery(
    ["explorer", "media", "total", condition],
    async () => {
      const query2 = {
        select: void 0,
        orderBy: [{ desc: Entry.type }, { desc: Entry.id }],
        filter: condition
      };
      const info = parentId && await graph.first({
        select: {
          title: Entry.title,
          parent: Entry.parentId
        },
        id: parentId,
        status: "preferDraft"
      });
      return { ...info, query: query2 };
    },
    { suspense: true, keepPreviousData: true }
  );
  const { query } = data;
  const title = data?.title || root.label;
  const nav = useNav();
  const navigate = useNavigate();
  const backLink = data?.parent ? nav.entry({ id: data.parent }) : editor ? nav.root({ root: root.name }) : void 0;
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Main, { className: styles.root(), scrollable: false, children: [
    editor && /* @__PURE__ */ jsx(EntryHeader, { editable: false, editor }),
    /* @__PURE__ */ jsxs("div", { className: styles.root.inner(), children: [
      /* @__PURE__ */ jsx(HStack, { style: { flexGrow: 1, minHeight: 0 }, children: /* @__PURE__ */ jsxs(VStack, { style: { height: "100%", width: "100%" }, children: [
        /* @__PURE__ */ jsxs("header", { className: styles.root.inner.header(), children: [
          /* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: `${workspace.label}: ${String(title)}` }) }),
          /* @__PURE__ */ jsxs(HStack, { center: true, gap: 18, children: [
            backLink && /* @__PURE__ */ jsx(IconLink, { icon: IcRoundArrowBack, href: backLink }),
            /* @__PURE__ */ jsx("h1", { className: styles.root.title(), children: /* @__PURE__ */ jsx(TextLabel, { label: title }) })
          ] })
        ] }),
        /* @__PURE__ */ jsx(
          Explorer,
          {
            query,
            type: "thumb",
            virtualized: true,
            onNavigate: (id) => navigate(nav.entry({ id }))
          }
        )
      ] }) }),
      /* @__PURE__ */ jsx(
        FileUploader,
        {
          destination: {
            parentId,
            workspace: workspace.name,
            root: root.name,
            directory: workspaceMediaDir(config, workspace.name)
          }
        }
      )
    ] })
  ] }) });
}
export {
  MediaExplorer
};