Improve Options Overlay

Introduces an `Accordion` to make the overlay panel for the advanced
options easier to work with.

Author: planger

media/options-widget.css

@@ -98,13 +98,51 @@
   color: var(--vscode-descriptionForeground);
 }
 
-.advanced-options-content {
-  color: var(--vscode-settings-headerForeground);
+.advanced-options-panel .p-overlaypanel-content {
+  padding: 0.8rem;
+}
+
+.advanced-options-panel .advanced-options-header {
+  font-size: 11px;
+  text-transform: uppercase;
+  line-height: 22px;
+  margin:0;
+  font-weight: normal;
+}
+
+.advanced-options-accordion a:focus {
+  outline-color: var(--vscode-focusBorder);
+}
+
+.advanced-options-accordion .p-accordion-tab {
+  width: 180px;
 }
 
-.advanced-options-content h2 {
-  font-size: 110%;
-  margin: 1.2rem 0 0 0;
+.advanced-options-accordion .p-accordion-header {
+  border-top: 1px solid var(--vscode-widget-border);
+  color: var(--vscode-sideBarSectionHeader-foreground);
+}
+
+.advanced-options-accordion .p-accordion-header-link {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--vscode-sideBarSectionHeader-foreground);
+}
+
+.advanced-options-accordion .p-accordion-header-text {
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: bold;
+  line-height: 22px;
+}
+
+.advanced-options-accordion .p-accordion-toggle-icon {
+  margin-right: 3px;
+}
+
+.advanced-options-content {
+  color: var(--vscode-settings-headerForeground);
+  padding-bottom: 0.5rem;
 }
 
 .advanced-options-toggle {
@@ -113,6 +151,10 @@
   margin-top: 1.1rem
 }
 
+.p-accordion-content .advanced-options-content {
+  padding-left: 0.5rem;
+}
+
 .advanced-options-content {
   width: 180px;
   text-align: left;
@@ -143,6 +185,7 @@
   overflow-y: scroll;
   max-height: 100%;
   margin-top: 0px;
+  width: 210px;
 }
 .advanced-options-panel::-webkit-scrollbar-track {
   background-color: var(--vscode-dropdown-listBackground);

src/webview/components/multi-select.tsx

@@ -25,12 +25,13 @@ export interface SingleSelectItemProps {
 
 interface MultiSelectProps {
     items: SingleSelectItemProps[];
-    label: string;
+    label?: string;
     id?: string;
+    classNames?: string;
     onSelectionChanged: (labelSelected: string, newSelectionState: boolean) => unknown;
 }
 
-const MultiSelectBar: React.FC<MultiSelectProps> = ({ items, onSelectionChanged, id }) => {
+export const MultiSelectBar: React.FC<MultiSelectProps> = ({ items, onSelectionChanged, id }) => {
     const changeHandler: ((e: CheckboxChangeEvent) => unknown) = React.useCallback(e => {
         const target = e.target as HTMLInputElement;
         if (target) {
@@ -54,10 +55,3 @@ const MultiSelectBar: React.FC<MultiSelectProps> = ({ items, onSelectionChanged,
         </div>
     );
 };
-
-export const MultiSelectWithLabel: React.FC<MultiSelectProps> = ({ id, label, items, onSelectionChanged }) => (
-    <div className='flex flex-column'>
-        <h2 className='multi-select-label mb-2 mt-0'>{label}</h2>
-        <MultiSelectBar id={id} items={items} onSelectionChanged={onSelectionChanged} label={label} />
-    </div>
-);