feat: enhance documentation command with optional path and add actions to ContentHealth component

src/extension.ts

@@ -191,10 +191,11 @@ export async function activate(context: vscode.ExtensionContext) {
 
   // Open docs
   subscriptions.push(
-    vscode.commands.registerCommand(COMMAND_NAME.docs, () => {
+    vscode.commands.registerCommand(COMMAND_NAME.docs, (path?: string) => {
+      const docsPath = typeof path === 'string' ? path : '';
       vscode.commands.executeCommand(
         `workbench.action.browser.open`,
-        `https://${extension.isBetaVersion() ? `beta.` : ``}frontmatter.codes/docs`
+        `https://${extension.isBetaVersion() ? `beta.` : ``}frontmatter.codes/docs${docsPath}`
       );
     })
   );

src/panelWebView/components/Collapsible.tsx

@@ -2,13 +2,14 @@ import { Messenger } from '@estruyf/vscode/dist/client';
 import * as React from 'react';
 import { useEffect, useMemo } from 'react';
 import { Command } from '../Command';
-import { Pane as VSCodePane } from 'vscrui';
+import { Pane as VSCodePane, type PaneAction } from 'vscrui';
 
 export interface ICollapsibleProps {
   id: string;
   title: string;
   className?: string;
   sendUpdate?: (open: boolean) => void;
+  actions?: PaneAction[];
 }
 
 const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({
@@ -16,7 +17,8 @@ const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({
   children,
   title,
   sendUpdate,
-  className
+  className,
+  actions
 }: React.PropsWithChildren<ICollapsibleProps>) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const collapseKey = useMemo(() => `collapse_${id}`, [id]);
@@ -71,7 +73,9 @@ const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({
     <VSCodePane
       title={title}
       onClick={triggerClick}
-      open={isOpen}>
+      open={isOpen}
+      actions={actions}
+    >
       <div className={`section collapsible__body overflow-y-auto ${className || ''}`}>
         {children}
       </div>

src/panelWebView/components/ContentHealth/ContentHealth.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
+import { Messenger } from '@estruyf/vscode/dist/client';
+import type { PaneAction } from 'vscrui';
 import { Collapsible } from '../Collapsible';
 import { VSCodeTable, VSCodeTableBody } from '../VSCode/VSCodeTable';
 import { ReadabilityScore } from './ReadabilityScore';
 import { FreshnessWarning } from './FreshnessWarning';
 import { InternalLinks } from './InternalLinks';
 import { BrokenExternalLinks } from './BrokenExternalLinks';
+import { COMMAND_NAME, GeneralCommands } from '../../../constants';
 import { LocalizationKey, localize } from '../../../localization';
 import type { LinkValidationResult } from '../../../helpers/LinkValidator';
 import type { ReadabilityResult } from '../../../helpers/ReadabilityHelper';
@@ -22,9 +25,23 @@ interface Props {
 }
 
 const ContentHealth: React.FunctionComponent<Props> = ({ contentHealth }) => {
+  const openContentHealthDocs = React.useCallback(() => {
+    Messenger.send(GeneralCommands.toVSCode.runCommand, {
+      command: COMMAND_NAME.docs,
+      args: '/panel#content-health'
+    });
+  }, []);
+
+  const actions = React.useMemo<PaneAction[]>(() => ([
+    {
+      iconName: 'book',
+      onClick: openContentHealthDocs
+    }
+  ]), [openContentHealthDocs]);
+
   if (contentHealth === undefined) {
     return (
-      <Collapsible id='contentHealth' title={localize(LocalizationKey.panelContentHealthTitle)}>
+      <Collapsible id='contentHealth' title={localize(LocalizationKey.panelContentHealthTitle)} actions={actions}>
         <p className='opacity-60'>{localize(LocalizationKey.panelContentHealthChecking)}</p>
       </Collapsible>
     );
@@ -39,7 +56,7 @@ const ContentHealth: React.FunctionComponent<Props> = ({ contentHealth }) => {
     (readability && minReadability > 0 && readability.score < minReadability);
 
   return (
-    <Collapsible id='contentHealth' title={localize(LocalizationKey.panelContentHealthTitle)}>
+    <Collapsible id='contentHealth' title={localize(LocalizationKey.panelContentHealthTitle)} actions={actions}>
       <div className='space-y-2'>
         <VSCodeTable>
           <VSCodeTableBody>