@@ -56,6 +97,18 @@ const DiscourseContext = ({ activeFile }: DiscourseContextProps) => {
/>
)}
{nodeType.name || "Unnamed Node Type"}
+ {isImported && (
+
+ )}
{nodeType.format && (
@@ -64,6 +117,13 @@ const DiscourseContext = ({ activeFile }: DiscourseContextProps) => {
{extractContentFromTitle(nodeType.format, activeFile.basename)}
)}
+
+ {isImported && sourceDates && (
+
diff --git a/apps/obsidian/src/components/ImportNodesModal.tsx b/apps/obsidian/src/components/ImportNodesModal.tsx
new file mode 100644
index 000000000..16f72d78c
--- /dev/null
+++ b/apps/obsidian/src/components/ImportNodesModal.tsx
@@ -0,0 +1,380 @@
+import { App, Modal, Notice } from "obsidian";
+import { createRoot, Root } from "react-dom/client";
+import { StrictMode, useState, useEffect, useCallback } from "react";
+import type DiscourseGraphPlugin from "../index";
+import type { ImportableNode, GroupWithNodes } from "~/types";
+import {
+ getAvailableGroups,
+ getPublishedNodesForGroups,
+ getLocalNodeInstanceIds,
+ getSpaceNameFromIds,
+ importSelectedNodes,
+} from "~/utils/importNodes";
+import { getLoggedInClient, getSupabaseContext } from "~/utils/supabaseContext";
+
+type ImportNodesModalProps = {
+ plugin: DiscourseGraphPlugin;
+ onClose: () => void;
+};
+
+const ImportNodesContent = ({ plugin, onClose }: ImportNodesModalProps) => {
+ const [step, setStep] = useState<"loading" | "select" | "importing">(
+ "loading",
+ );
+ const [groupsWithNodes, setGroupsWithNodes] = useState
([]);
+ const [isLoading, setIsLoading] = useState(true);
+ const [importProgress, setImportProgress] = useState({
+ current: 0,
+ total: 0,
+ });
+
+ const loadImportableNodes = useCallback(async () => {
+ setIsLoading(true);
+ try {
+ const client = await getLoggedInClient(plugin);
+ if (!client) {
+ new Notice("Cannot get Supabase client");
+ onClose();
+ return;
+ }
+
+ const context = await getSupabaseContext(plugin);
+ if (!context) {
+ new Notice("Cannot get Supabase context");
+ onClose();
+ return;
+ }
+
+ const groups = await getAvailableGroups(client);
+ if (groups.length === 0) {
+ new Notice("You are not a member of any groups");
+ onClose();
+ return;
+ }
+
+ const groupIds = groups.map((g) => g.group_id);
+
+ const publishedNodes = await getPublishedNodesForGroups({
+ client,
+ groupIds,
+ currentSpaceId: context.spaceId,
+ });
+
+ const localNodeInstanceIds = getLocalNodeInstanceIds(plugin);
+
+ // Filter out nodes that already exist locally
+ const importableNodes = publishedNodes.filter(
+ (node) => !localNodeInstanceIds.has(node.source_local_id),
+ );
+
+ const uniqueSpaceIds = [
+ ...new Set(importableNodes.map((n) => n.space_id)),
+ ];
+ const spaceNames = await getSpaceNameFromIds(client, uniqueSpaceIds);
+ const grouped: Map = new Map();
+
+ for (const node of importableNodes) {
+ const groupId = String(node.space_id);
+ if (!grouped.has(groupId)) {
+ grouped.set(groupId, {
+ groupId,
+ groupName:
+ spaceNames.get(node.space_id) ?? `Space ${node.space_id}`,
+ nodes: [],
+ });
+ }
+
+ const group = grouped.get(groupId)!;
+ group.nodes.push({
+ nodeInstanceId: node.source_local_id,
+ title: node.text,
+ spaceId: node.space_id,
+ spaceName: spaceNames.get(node.space_id) ?? `Space ${node.space_id}`,
+ groupId,
+ selected: false,
+ createdAt: node.createdAt,
+ modifiedAt: node.modifiedAt,
+ filePath: node.filePath,
+ });
+ }
+
+ setGroupsWithNodes(Array.from(grouped.values()));
+ setStep("select");
+ } catch (error) {
+ console.error("Error loading importable nodes:", error);
+ const errorMessage =
+ error instanceof Error ? error.message : String(error);
+ new Notice(`Failed to load nodes: ${errorMessage}`, 5000);
+ onClose();
+ } finally {
+ setIsLoading(false);
+ }
+ }, [plugin, onClose]);
+
+ useEffect(() => {
+ void loadImportableNodes();
+ }, [loadImportableNodes]);
+
+ const handleNodeToggle = (groupId: string, nodeIndex: number) => {
+ setGroupsWithNodes((prev) =>
+ prev.map((group) => {
+ if (group.groupId !== groupId) return group;
+ return {
+ ...group,
+ nodes: group.nodes.map((node, idx) =>
+ idx === nodeIndex ? { ...node, selected: !node.selected } : node,
+ ),
+ };
+ }),
+ );
+ };
+
+ const handleImport = async () => {
+ const selectedNodes: ImportableNode[] = [];
+ for (const group of groupsWithNodes) {
+ for (const node of group.nodes) {
+ if (node.selected) {
+ selectedNodes.push(node);
+ }
+ }
+ }
+
+ if (selectedNodes.length === 0) {
+ new Notice("Please select at least one node to import");
+ return;
+ }
+
+ setStep("importing");
+ setImportProgress({ current: 0, total: selectedNodes.length });
+
+ try {
+ const result = await importSelectedNodes({
+ plugin,
+ selectedNodes,
+ onProgress: (current, total) => {
+ setImportProgress({ current, total });
+ },
+ });
+
+ if (result.failed > 0) {
+ new Notice(
+ `Import completed with some issues:\n${result.success} files imported successfully\n${result.failed} files failed`,
+ 5000,
+ );
+ } else {
+ new Notice(`Successfully imported ${result.success} node(s)`, 3000);
+ }
+
+ onClose();
+ } catch (error) {
+ console.error("Error importing nodes:", error);
+ const errorMessage =
+ error instanceof Error ? error.message : String(error);
+ new Notice(`Import failed: ${errorMessage}`, 5000);
+ setStep("select");
+ }
+ };
+
+ const renderLoadingStep = () => (
+
+
Loading importable nodes...
+
+ Fetching groups and published nodes
+
+
+
Select Nodes to Import
+
+ {totalNodes > 0
+ ? `${totalNodes} importable node(s) found. Select which nodes to import into your vault.`
+ : "No importable nodes found."}
+
+
+
+
+
+
+
+
+ {Array.from(nodesBySpace.entries()).map(
+ ([spaceId, { spaceName, nodes }]) => {
+ return (
+
+
+ 📂
+
+ {spaceName}
+
+
+ ({nodes.length} node{nodes.length !== 1 ? "s" : ""})
+
+
+
+ {nodes.map(({ node, groupId, nodeIndex }) => (
+
+
handleNodeToggle(groupId, nodeIndex)}
+ className="mr-3 mt-1 flex-shrink-0"
+ />
+
+
+ ))}
+
+ );
+ },
+ )}
+
+
+
+
+
+
+
+
Importing nodes
+
+
+
+ {importProgress.current} of {importProgress.total} node(s) processed
+
+
+