Added collapsible panes

assets/media/styles.css

@@ -75,7 +75,7 @@
 }
 
 .frontmatter h3 {
-  margin-bottom: 1rem;
+  /* margin-bottom: 1rem; */
 }
 
 .frontmatter p,
@@ -224,6 +224,7 @@
   text-decoration: none;
   width: 100%;
   white-space: nowrap;
+  border-radius: 0.25rem;
 }
 
 .ext_link_block button.active {

package.json

@@ -2855,7 +2855,6 @@
     "@types/vscode": "^1.90.0",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.50.0",
-    "@vscode-elements/elements": "^1.2.0",
     "@vscode/l10n": "^0.0.14",
     "@webpack-cli/serve": "^1.7.0",
     "ajv": "^8.12.0",
@@ -2918,7 +2917,7 @@
     "uniforms-bridge-json-schema": "^3.10.2",
     "uniforms-unstyled": "^3.10.2",
     "url-join-ts": "^1.0.5",
-    "vscrui": "^0.1.0-beta.1088737",
+    "vscrui": "^0.1.0-beta.1092162",
     "wc-react": "github:estruyf/wc-react",
     "webpack": "^5.75.0",
     "webpack-bundle-analyzer": "^4.7.0",

src/panelWebView/components/Collapsible.tsx

@@ -1,8 +1,8 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
 import * as React from 'react';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { Command } from '../Command';
-import { VsCollapsible } from './VscodeComponents';
+import { Pane as VSCodePane } from 'vscrui';
 
 export interface ICollapsibleProps {
   id: string;
@@ -19,10 +19,16 @@ const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({
   className
 }: React.PropsWithChildren<ICollapsibleProps>) => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const collapseKey = `collapse-${id}`;
+  const collapseKey = useMemo(() => `collapse_${id}`, [id]);
 
   useEffect(() => {
+    if (!collapseKey) {
+      return;
+    }
+
     const prevState: any = Messenger.getState();
+    console.log(collapseKey, prevState[collapseKey]);
+
     if (
       !prevState ||
       !prevState[collapseKey] ||
@@ -31,6 +37,9 @@ const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({
     ) {
       setIsOpen(true);
       updateStorage(true);
+    } else {
+      setIsOpen(false);
+      updateStorage(false);
     }
 
     window.addEventListener('message', (event) => {
@@ -40,7 +49,7 @@ const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({
         updateStorage(false);
       }
     });
-  }, ['']);
+  }, [collapseKey]);
 
   const updateStorage = (value: boolean) => {
     const prevState: any = Messenger.getState();
@@ -50,26 +59,24 @@ const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({
     });
   };
 
-  // This is a work around for a lit-element issue of duplicate slot names
-  const triggerClick = (e: React.MouseEvent<HTMLElement>) => {
-    if ((e.target as Node).nodeName.toUpperCase() === 'VSCODE-COLLAPSIBLE') {
-      setIsOpen((prev) => {
-        if (sendUpdate) {
-          sendUpdate(!prev);
-        }
-
-        updateStorage(!prev);
-        return !prev;
-      });
+  const triggerClick = (open: boolean) => {
+    if (sendUpdate) {
+      sendUpdate(open);
     }
+
+    updateStorage(open);
+    setIsOpen(open);
   };
 
   return (
-    <VsCollapsible title={title} onClick={triggerClick} open={isOpen}>
+    <VSCodePane
+      title={title}
+      onClick={triggerClick}
+      open={isOpen}>
       <div className={`section collapsible__body ${className || ''}`}>
         {children}
       </div>
-    </VsCollapsible>
+    </VSCodePane>
   );
 };
 

src/panelWebView/components/VscodeComponents.ts

@@ -1,5 +1,5 @@
 import { wrapWc } from 'wc-react';
 
 // @bendera/vscode-webview-elements
-export const VsCollapsible = wrapWc(`vscode-collapsible`);
+// export const VsCollapsible = wrapWc(`vscode-collapsible`);
 // export const VsLabel = wrapWc(`vscode-label`);

src/panelWebView/index.tsx

@@ -5,11 +5,10 @@ import { ViewPanel } from './ViewPanel';
 import { RecoilRoot } from 'recoil';
 import { I10nProvider } from '../dashboardWebView/providers/I10nProvider';
 import { SentryInit } from '../utils/sentryInit';
+import 'vscrui/dist/codicon.css';
 
 import './styles.css';
 
-import '@vscode-elements/elements/dist/vscode-collapsible/index.js';
-
 declare const acquireVsCodeApi: <T = unknown>() => {
   getState: () => T;
   setState: (data: T) => void;