diff --git a/packages/cursorless-org-docs/src/docs/contributing/MissingLanguageScopes.tsx b/packages/cursorless-org-docs/src/docs/contributing/MissingLanguageScopes.tsx
index 1afbd9467f..b09f4d168b 100644
--- a/packages/cursorless-org-docs/src/docs/contributing/MissingLanguageScopes.tsx
+++ b/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 (
<>
-
{languageId}
+
+ {languageId}
+
+
+ link
+
+
{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([]);
+
+ 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 (
+
+
+ {scopes.map((scope) => {
+ return - {scope}
;
+ })}
+
+
+ );
+ };
+
return (
- <>
- {title} ({scopes.length})
-
- {scopes.map((scope) => {
- return - {scope}
;
- })}
-
- >
+
+
setOpen(!open)}>
+ {title} ({scopes.length})
+
+
+ {renderBody()}
+
);
}