[ENG-1295 & ENG-1350 & ENG-1297] F5 import and refresh published nodes

apps/obsidian/package.json

@@ -19,10 +19,10 @@
     "@octokit/core": "^6.1.2",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
+    "@types/mime-types": "3.0.1",
     "@types/node": "^20",
     "@types/react": "catalog:obsidian",
     "@types/react-dom": "catalog:obsidian",
-    "@types/mime-types": "3.0.1",
     "autoprefixer": "^10.4.21",
     "builtin-modules": "3.3.0",
     "dotenv": "^16.4.5",
@@ -43,6 +43,7 @@
     "@repo/utils": "workspace:*",
     "@supabase/supabase-js": "catalog:",
     "date-fns": "^4.1.0",
+    "gray-matter": "^4.0.3",
     "mime-types": "^3.0.1",
     "nanoid": "^4.0.2",
     "react": "catalog:obsidian",

apps/obsidian/src/components/DiscourseContextView.tsx

@@ -1,18 +1,21 @@
-import { ItemView, TFile, WorkspaceLeaf } from "obsidian";
+import { ItemView, TFile, WorkspaceLeaf, Notice } from "obsidian";
 import { createRoot, Root } from "react-dom/client";
 import DiscourseGraphPlugin from "~/index";
 import { getDiscourseNodeFormatExpression } from "~/utils/getDiscourseNodeFormatExpression";
 import { RelationshipSection } from "~/components/RelationshipSection";
 import { VIEW_TYPE_DISCOURSE_CONTEXT } from "~/types";
 import { PluginProvider, usePlugin } from "~/components/PluginContext";
 import { getNodeTypeById } from "~/utils/typeUtils";
+import { refreshImportedFile } from "~/utils/importNodes";
+import { useState } from "react";
 
 type DiscourseContextProps = {
   activeFile: TFile | null;
 };
 
 const DiscourseContext = ({ activeFile }: DiscourseContextProps) => {
   const plugin = usePlugin();
+  const [isRefreshing, setIsRefreshing] = useState(false);
 
   const extractContentFromTitle = (format: string, title: string): string => {
     if (!format) return "";
@@ -21,6 +24,30 @@ const DiscourseContext = ({ activeFile }: DiscourseContextProps) => {
     return match?.[1] ?? title;
   };
 
+  const handleRefresh = async () => {
+    if (!activeFile || isRefreshing) return;
+
+    setIsRefreshing(true);
+    try {
+      const result = await refreshImportedFile({ plugin, file: activeFile });
+      if (result.success) {
+        new Notice("File refreshed successfully", 3000);
+      } else {
+        new Notice(
+          `Failed to refresh file: ${result.error || "Unknown error"}`,
+          5000,
+        );
+      }
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : String(error);
+      new Notice(`Refresh failed: ${errorMessage}`, 5000);
+      console.error("Refresh failed:", error);
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
   const renderContent = () => {
     if (!activeFile) {
       return <div>No file is open</div>;
@@ -45,6 +72,20 @@ const DiscourseContext = ({ activeFile }: DiscourseContextProps) => {
     if (!nodeType) {
       return <div>Unknown node type: {frontmatter.nodeTypeId}</div>;
     }
+
+    const isImported = !!frontmatter.importedFromSpaceUri;
+    const modifiedAt =
+      typeof frontmatter.lastModified === "number"
+        ? frontmatter.lastModified
+        : activeFile.stat.mtime;
+    const sourceDates =
+      isImported && activeFile?.stat
+        ? {
+            createdAt: new Date(activeFile.stat.ctime).toLocaleString(),
+            modifiedAt: new Date(modifiedAt).toLocaleString(),
+          }
+        : null;
+
     return (
       <>
         <div className="mb-6">
@@ -56,6 +97,18 @@ const DiscourseContext = ({ activeFile }: DiscourseContextProps) => {
               />
             )}
             {nodeType.name || "Unnamed Node Type"}
+            {isImported && (
+              <button
+                onClick={() => {
+                  void handleRefresh();
+                }}
+                disabled={isRefreshing}
+                className="ml-auto rounded border px-2 py-1 text-xs"
+                title="Refresh from source"
+              >
+                {isRefreshing ? "Refreshing..." : "🔄 Refresh"}
+              </button>
+            )}
           </div>
 
           {nodeType.format && (
@@ -64,6 +117,13 @@ const DiscourseContext = ({ activeFile }: DiscourseContextProps) => {
               {extractContentFromTitle(nodeType.format, activeFile.basename)}
             </div>
           )}
+
+          {isImported && sourceDates && (
+            <div className="text-modifier-text mt-2 text-xs">
+              <div>Created in source: {sourceDates.createdAt}</div>
+              <div>Last modified in source: {sourceDates.modifiedAt}</div>
+            </div>
+          )}
         </div>
 
         <div>