ENG-1563: Add Datacore dependency callout in settings (#912)

* add Datacore dependency callout in plugin settings

Shows a warning banner at the top of the settings page when the
Datacore plugin is not installed/enabled, with a link to install it.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix lint

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: trangdoan982

apps/obsidian/src/components/DatacoreCallout.tsx

@@ -0,0 +1,32 @@
+import { useApp } from "./AppContext";
+import { AppWithPlugins } from "~/services/QueryEngine";
+
+export const DatacoreCallout = () => {
+  const app = useApp();
+
+  const datacorePlugin = (app as AppWithPlugins)?.plugins?.plugins?.[
+    "datacore"
+  ];
+
+  if (datacorePlugin) return null;
+
+  return (
+    <div className="callout callout-warning mb-4 rounded-md border border-solid border-yellow-500/30 bg-yellow-500/10 p-4">
+      <div className="callout-title flex items-center gap-2 font-semibold">
+        ⚠️ Datacore plugin required
+      </div>
+      <div className="callout-content mt-2">
+        <p>
+          The Datacore plugin is required for Discourse Graphs to function.
+          Please install and enable it.
+        </p>
+        <a
+          href="obsidian://show-plugin?id=datacore"
+          className="text-accent mt-2 inline-block underline"
+        >
+          Install Datacore
+        </a>
+      </div>
+    </div>
+  );
+};

apps/obsidian/src/components/Settings.tsx

@@ -9,6 +9,7 @@ import NodeTypeSettings from "./NodeTypeSettings";
 import GeneralSettings from "./GeneralSettings";
 import { AdminPanelSettings } from "./AdminPanelSettings";
 import { PluginProvider } from "./PluginContext";
+import { DatacoreCallout } from "./DatacoreCallout";
 
 const Settings = () => {
   const [activeTab, setActiveTab] = useState("general");
@@ -29,6 +30,7 @@ const Settings = () => {
 
   return (
     <div className="flex flex-col gap-4">
+      <DatacoreCallout />
       <div className="border-modifier-border flex w-full overflow-x-auto border-b p-2">
         <button
           onClick={() => setActiveTab("general")}

apps/obsidian/src/services/QueryEngine.ts

@@ -6,7 +6,7 @@ import { extractContentFromTitle } from "~/utils/extractContentFromTitle";
 
 // This is a workaround to get the datacore API.
 // TODO: Remove once we can use datacore npm package
-type AppWithPlugins = App & {
+export type AppWithPlugins = App & {
   plugins: {
     plugins: {
       [key: string]: {