alinea/dist/dashboard/view/MediaExplorer.js

[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)

import {
  useAtomValue
} from "../../chunks/chunk-WF77DMLN.js";
import "../../chunks/chunk-OBOPLPUQ.js";
import {
  useQuery
} from "../../chunks/chunk-DJKGEOOC.js";
import "../../chunks/chunk-U5RRZUYZ.js";

// src/dashboard/view/MediaExplorer.tsx
import { fromModule, HStack, TextLabel, VStack } from "alinea/ui";
import { Main } from "alinea/ui/Main";
import { useMemo } from "react";
import { Entry } from "alinea/core";
import { workspaceMediaDir } from "alinea/core/EntryFilenames";
import { IcRoundArrowBack } from "alinea/ui/icons/IcRoundArrowBack";
import { graphAtom } from "../atoms/DbAtoms.js";
import { useNavigate } from "../atoms/LocationAtoms.js";
import { useConfig } from "../hook/UseConfig.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";
import { FileUploader } from "./media/FileUploader.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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
var styles = fromModule(MediaExplorer_module_default);
function MediaExplorer({ editor }) {
  const config = useConfig();
  const parentId = editor?.entryId;
  const workspace = useWorkspace();
  const root = useRoot();
  const graph = useAtomValue(graphAtom);
  const condition = useMemo(() => {
    return parentId ? Entry.parent.is(parentId) : Entry.root.is(root.name).and(Entry.workspace.is(workspace.name)).and(Entry.parent.isNull());
  }, [workspace, root, parentId]);
  const { data } = useQuery(
    ["explorer", "media", "total", condition],
    async () => {
      const cursor2 = Entry().where(condition).orderBy(Entry.type.desc(), Entry.entryId.desc());
      const info = await graph.preferDraft.get(
        Entry({ entryId: parentId }).select({
          title: Entry.title,
          parent: Entry.parent
        }).maybeFirst()
      );
      return { ...info, cursor: cursor2 };
    },
    { suspense: true, keepPreviousData: true }
  );
  const { cursor } = data;
  const title = data?.title || root.label;
  const nav = useNav();
  const navigate = useNavigate();
  const backLink = data?.parent ? nav.entry({ entryId: data.parent }) : editor ? nav.root({ root: root.name }) : void 0;
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Main, { className: styles.root(), scrollable: false, children: /* @__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: 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,
        {
          cursor,
          type: "thumb",
          virtualized: true,
          onNavigate: (entryId) => navigate(nav.entry({ entryId }))
        }
      )
    ] }) }),
    /* @__PURE__ */ jsx(
      FileUploader,
      {
        destination: {
          parentId,
          workspace: workspace.name,
          root: root.name,
          directory: workspaceMediaDir(config, workspace.name)
        }
      }
    )
  ] }) }) });
}
export {
  MediaExplorer
};