Merge pull request #455 from ejgallego/441-error-msg

[code] ui: Add divider between errors and goals (#441)

editor/code/views/info/ErrorBrowser.tsx

@@ -1,15 +1,13 @@
 import { PpString } from "../../lib/types";
 import { CoqPp } from "./CoqPp";
-import { Details } from "./Details";
 
-export type ErrorBrowserParams = { error?: PpString };
+export type ErrorBrowserParams = { error: PpString };
 
 export function ErrorBrowser({ error }: ErrorBrowserParams) {
-  if (!error) return null;
-
   return (
-    <Details summary={"Error Browser"}>
-      <CoqPp content={error} inline={true} />
-    </Details>
+    <>
+      <header>Errors:</header>
+      <CoqPp content={error} inline={true} />;
+    </>
   );
 }

editor/code/views/info/Info.tsx

@@ -1,15 +1,22 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState, lazy, Suspense } from "react";
 import { GoalAnswer, GoalRequest, PpString } from "../../lib/types";
 
-// import "./media/info.css";
-
 // Main panel components
 import { FileInfo } from "./FileInfo";
 import { Goals } from "./Goals";
 import { Messages } from "./Messages";
 import { ErrorBrowser } from "./ErrorBrowser";
 import { Program } from "./Program";
 
+import "./media/info.css";
+
+// Dynamic import because the project uses CommonJS and the module is an ECMAScript module
+// Top level await is supported with other `module` options in tsconfig.json
+const VSCodeDivider = lazy(async () => {
+  const { VSCodeDivider } = await import("@vscode/webview-ui-toolkit/react");
+  return { default: VSCodeDivider };
+});
+
 // First part, which should be split out is the protocol definition, second part is the UI.
 function doWaitingForInfo(info: GoalRequest) {
   console.log("doWaitingForInfo", info);
@@ -64,12 +71,23 @@ export function InfoPanel() {
   if (!goals) return null;
 
   return (
-    <FileInfo textDocument={goals.textDocument} position={goals.position}>
-      <Goals goals={goals.goals} />
-      <Program program={goals.program} />
-      <Messages messages={goals.messages} />
-      <ErrorBrowser error={goals.error} />
-    </FileInfo>
+    <div className="info-panel-container">
+      <div className="info-panel">
+        <FileInfo textDocument={goals.textDocument} position={goals.position}>
+          <Goals goals={goals.goals} />
+          <Program program={goals.program} />
+          <Messages messages={goals.messages} />
+        </FileInfo>
+      </div>
+      {!goals.error ? null : (
+        <div className="error-browser">
+          <Suspense>
+            <VSCodeDivider />
+          </Suspense>
+          <ErrorBrowser error={goals.error} />
+        </div>
+      )}
+    </div>
   );
 }
 

editor/code/views/info/index.tsx

@@ -1,15 +1,11 @@
 // This is the script that is loaded by Coq's webview
-import { WebviewApi } from "vscode-webview";
 
 import React from "react";
 import { createRoot } from "react-dom/client";
 
 import InfoPanel from "./Info";
 import "./media/index.css";
 
-interface CoqInfoViewState {}
-const vscode: WebviewApi<CoqInfoViewState> = acquireVsCodeApi();
-
 const container = document.getElementById("root");
 const root = createRoot(container!); // createRoot(container!) if you use TypeScript
 root.render(

editor/code/views/info/media/index.css

@@ -4,3 +4,7 @@ body {
   font-family: var(--vscode-editor-font-family);
   /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
 }
+
+#root {
+  height: 100vh;
+}

editor/code/views/info/media/info.css

@@ -0,0 +1,13 @@
+.error-browser {
+  flex: 1 1 0%;
+}
+
+.info-panel-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.info-panel {
+  overflow: auto;
+}