Improvements to missing language scope page (#2993)

Author: AndreasArvidsson

packages/cursorless-org-docs/src/docs/contributing/MissingLanguageScopes.tsx

@@ -7,7 +7,7 @@ import {
   type ScopeType,
   type SimpleScopeTypeType,
 } from "@cursorless/common";
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 export function MissingLanguageScopes(): React.JSX.Element[] {
   return Object.keys(languageScopeSupport)
@@ -35,7 +35,13 @@ function Language({
 
   return (
     <>
-      <h3>{languageId}</h3>
+      <h3>
+        {languageId}
+
+        <small className="ml-2 text-sm">
+          <a href={`../../user/languages/${languageId}`}>link</a>
+        </small>
+      </h3>
       {renderFacets("Unsupported", unsupportedFacets)}
       {renderFacets("Unspecified", unspecifiedFacets)}
     </>
@@ -46,27 +52,49 @@ function renderFacets(
   title: string,
   facets: ScopeSupportFacet[],
 ): React.JSX.Element | null {
-  const scopes = Array.from(
-    new Set(
-      facets.map((f) =>
-        serializeScopeType(scopeSupportFacetInfos[f].scopeType),
+  const [open, setOpen] = useState(false);
+  const [scopes, setScopes] = useState<string[]>([]);
+
+  useEffect(() => {
+    const scopes = Array.from(
+      new Set(
+        facets.map((f) =>
+          serializeScopeType(scopeSupportFacetInfos[f].scopeType),
+        ),
       ),
-    ),
-  ).sort();
+    ).sort();
+    setScopes(scopes);
+    setOpen(scopes.length < 4);
+  }, []);
 
   if (scopes.length === 0) {
     return null;
   }
 
+  const renderBody = () => {
+    if (!open) {
+      return null;
+    }
+
+    return (
+      <div className="card__body">
+        <ul>
+          {scopes.map((scope) => {
+            return <li key={scope}>{scope}</li>;
+          })}
+        </ul>
+      </div>
+    );
+  };
+
   return (
-    <>
-      {title} ({scopes.length})
-      <ul>
-        {scopes.map((scope) => {
-          return <li key={scope}>{scope}</li>;
-        })}
-      </ul>
-    </>
+    <div className={"card" + (open ? " open" : "")}>
+      <div className="card__header pointer" onClick={() => setOpen(!open)}>
+        {title} ({scopes.length})
+      </div>
+
+      {renderBody()}
+    </div>
   );
 }