Make cluster toolbar collapsible

Collapse the cluster toolbar on initial render and allow user to toggle
it open and closed.

Fixes #4926

src/annotator/components/ClusterToolbar.tsx

 import {
+  Button,
   Card,
   CardContent,
+  CaretDownIcon,
+  CaretRightIcon,
   HideIcon,
+  HighlightIcon,
 } from '@hypothesis/frontend-shared/lib/next';
 import classnames from 'classnames';
-import { useCallback } from 'preact/hooks';
+import { useCallback, useState } from 'preact/hooks';
 
 import type { HighlightCluster } from '../../types/shared';
 import type { AppliedStyles, HighlightStyles } from '../highlight-clusters';
@@ -120,35 +124,58 @@ export default function ClusterToolbar({
     [onStyleChange]
   );
 
+  const [isOpen, setOpen] = useState(false);
+
   if (!active) {
     return null;
   }
 
   return (
     <Card>
-      <CardContent size="sm">
-        <ClusterStyleControl
-          highlightStyles={availableStyles}
-          label="My annotations"
-          cluster="user-annotations"
-          onChange={handleStyleChange}
-          currentStyles={currentStyles}
-        />
-        <ClusterStyleControl
-          highlightStyles={availableStyles}
-          label="My highlights"
-          cluster="user-highlights"
-          onChange={handleStyleChange}
-          currentStyles={currentStyles}
-        />
-        <ClusterStyleControl
-          highlightStyles={availableStyles}
-          label="Everybody's content"
-          cluster="other-content"
-          onChange={handleStyleChange}
-          currentStyles={currentStyles}
-        />
-      </CardContent>
+      <div className="flex flex-col text-annotator-base text-color-text">
+        <Button
+          data-testid="control-toggle-button"
+          onClick={() => setOpen(!isOpen)}
+          title={isOpen ? 'Hide highlight settings' : 'Show highlight settings'}
+        >
+          {isOpen ? (
+            <>
+              <CaretDownIcon />
+              <span>Highlight Appearance</span>
+            </>
+          ) : (
+            <>
+              <CaretRightIcon />
+              <HighlightIcon />
+            </>
+          )}
+        </Button>
+        {isOpen && (
+          <CardContent data-testid="cluster-style-controls" size="sm">
+            <ClusterStyleControl
+              highlightStyles={availableStyles}
+              label="My annotations"
+              cluster="user-annotations"
+              onChange={handleStyleChange}
+              currentStyles={currentStyles}
+            />
+            <ClusterStyleControl
+              highlightStyles={availableStyles}
+              label="My highlights"
+              cluster="user-highlights"
+              onChange={handleStyleChange}
+              currentStyles={currentStyles}
+            />
+            <ClusterStyleControl
+              highlightStyles={availableStyles}
+              label="Everybody's content"
+              cluster="other-content"
+              onChange={handleStyleChange}
+              currentStyles={currentStyles}
+            />
+          </CardContent>
+        )}
+      </div>
     </Card>
   );
 }

src/annotator/components/test/ClusterToolbar-test.js

 import { mount } from 'enzyme';
-
 import { highlightStyles, defaultStyles } from '../../highlight-clusters';
 import ClusterToolbar from '../ClusterToolbar';
 
@@ -17,14 +16,37 @@ describe('ClusterToolbar', () => {
       />
     );
 
+  const toggleOpen = wrapper => {
+    wrapper
+      .find('button[data-testid="control-toggle-button"]')
+      .simulate('click');
+  };
+
   it('renders nothing if the cluster feature is not active', () => {
     const wrapper = createComponent({ active: false });
 
     assert.isEmpty(wrapper.html());
   });
 
+  it('renders collapsed until expanded', () => {
+    const wrapper = createComponent();
+
+    assert.equal(
+      wrapper.find('div[data-testid="cluster-style-controls"]').length,
+      0
+    );
+
+    toggleOpen(wrapper);
+
+    assert.equal(
+      wrapper.find('div[data-testid="cluster-style-controls"]').length,
+      1
+    );
+  });
+
   it('renders a control for each highlight cluster', () => {
     const wrapper = createComponent();
+    toggleOpen(wrapper);
 
     assert.equal(
       wrapper.find('ClusterStyleControl').length,
@@ -35,6 +57,7 @@ describe('ClusterToolbar', () => {
   it('calls style-change callback when user clicks on a style option', () => {
     const onStyleChange = sinon.stub();
     const wrapper = createComponent({ onStyleChange });
+    toggleOpen(wrapper);
 
     wrapper
       .find('#hypothesis-user-annotations-green')

src/annotator/highlight-clusters.tsx

@@ -77,8 +77,8 @@ export class HighlightClusterController implements Destroyable {
     // For now, the controls are fixed at top-left of screen. This is temporary.
     Object.assign(this._outerContainer.style, {
       position: 'fixed',
-      top: 0,
-      left: 0,
+      top: '4px',
+      left: '4px',
     });
 
     this.appliedStyles = defaultStyles;