Refactor list headers into a reusable ListHeader component and introduce a new collapsible Fieldset component to organize and group preset editing fields

Author: robertpiosik

packages/ui/src/components/editor/panel/Configurations/Configurations.module.scss

@@ -2,30 +2,6 @@
   display: flex;
   flex-direction: column;
 }
-
-.header {
-  height: var(--list-item-height);
-  padding: 0 12px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--vscode-list-hoverBackground);
-  }
-
-  &__left {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  &__right {
-    display: flex;
-  }
-}
-
 .missing-config {
   padding: 2px 12px 0 12px;
   font-weight: 500;

packages/ui/src/components/editor/panel/Configurations/Configurations.tsx

@@ -4,6 +4,7 @@ import cn from 'classnames'
 import { ReactSortable } from 'react-sortablejs'
 import { IconButton } from '../IconButton/IconButton'
 import { Button } from '../../common/Button'
+import { ListHeader } from '../ListHeader'
 
 export namespace Configurations {
   export type Configuration = {
@@ -105,21 +106,13 @@ export const Configurations: React.FC<Configurations.Props> = (props) => {
           {pinned_configurations.map((i) => render_configuration_item(i, true))}
         </div>
       )}
-      <div
-        className={styles.header}
-        onClick={() => props.on_toggle_collapsed(!props.is_collapsed)}
-        role="button"
-      >
-        <div className={styles.header__left}>
-          <span
-            className={cn('codicon', {
-              'codicon-chevron-down': !props.is_collapsed,
-              'codicon-chevron-right': props.is_collapsed
-            })}
-          />
-          <span>Configurations</span>
-        </div>
-        <div className={styles.header__right}>
+      <ListHeader
+        title="Configurations"
+        is_collapsed={props.is_collapsed}
+        on_toggle_collapsed={() =>
+          props.on_toggle_collapsed(!props.is_collapsed)
+        }
+        actions={
           <IconButton
             codicon_icon="edit"
             on_click={(e) => {
@@ -128,8 +121,8 @@ export const Configurations: React.FC<Configurations.Props> = (props) => {
             }}
             title="Edit Configurations"
           />
-        </div>
-      </div>
+        }
+      />
       {!props.is_collapsed && (
         <>
           <div className={styles.configurations}>

packages/ui/src/components/editor/panel/Field/Field.module.scss

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
+  padding: 0 12px;
 
   &__label {
     font-size: 12px;

packages/ui/src/components/editor/panel/Fieldset/Fieldset.module.scss

@@ -0,0 +1,37 @@
+.fieldset {
+  display: flex;
+  flex-direction: column;
+
+  &__label {
+    padding: 8px 12px 4px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--vscode-descriptionForeground);
+    text-transform: uppercase;
+  }
+
+  &__header {
+    height: var(--list-item-height);
+    padding: 0 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--vscode-list-hoverBackground);
+    }
+
+    &__left {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+}

packages/ui/src/components/editor/panel/Fieldset/Fieldset.tsx

@@ -0,0 +1,48 @@
+import cn from 'classnames'
+import styles from './Fieldset.module.scss'
+
+type Props = {
+  label?: string
+  children?: React.ReactNode
+  is_collapsed?: boolean
+  on_toggle_collapsed?: () => void
+}
+
+export const Fieldset: React.FC<Props> = ({
+  label,
+  children,
+  is_collapsed,
+  on_toggle_collapsed
+}) => {
+  if (is_collapsed !== undefined) {
+    return (
+      <div className={styles.fieldset}>
+        <div
+          className={styles.fieldset__header}
+          onClick={on_toggle_collapsed}
+          role="button"
+        >
+          <div className={styles.fieldset__header__left}>
+            <span
+              className={cn('codicon', {
+                'codicon-chevron-down': !is_collapsed,
+                'codicon-chevron-right': is_collapsed
+              })}
+            />
+            <span>{label}</span>
+          </div>
+        </div>
+        {!is_collapsed && (
+          <div className={styles.fieldset__content}>{children}</div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className={styles.fieldset}>
+      {label && <div className={styles.fieldset__label}>{label}</div>}
+      <div className={styles.fieldset__content}>{children}</div>
+    </div>
+  )
+}

packages/ui/src/components/editor/panel/Fieldset/index.ts

@@ -0,0 +1 @@
+export * from './Fieldset'

packages/ui/src/components/editor/panel/ListHeader/ListHeader.module.scss

@@ -0,0 +1,22 @@
+.header {
+  height: var(--list-item-height);
+  padding: 0 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--vscode-list-hoverBackground);
+  }
+
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  &__right {
+    display: flex;
+  }
+}

packages/ui/src/components/editor/panel/ListHeader/ListHeader.tsx

@@ -0,0 +1,34 @@
+import styles from './ListHeader.module.scss'
+import cn from 'classnames'
+
+export namespace ListHeader {
+  export type Props = {
+    title: string
+    is_collapsed: boolean
+    on_toggle_collapsed: () => void
+    actions?: React.ReactNode
+  }
+}
+
+export const ListHeader: React.FC<ListHeader.Props> = (props) => {
+  return (
+    <div
+      className={styles.header}
+      onClick={props.on_toggle_collapsed}
+      role="button"
+    >
+      <div className={styles.header__left}>
+        <span
+          className={cn('codicon', {
+            'codicon-chevron-down': !props.is_collapsed,
+            'codicon-chevron-right': props.is_collapsed
+          })}
+        />
+        <span>{props.title}</span>
+      </div>
+      {props.actions && (
+        <div className={styles.header__right}>{props.actions}</div>
+      )}
+    </div>
+  )
+}

packages/ui/src/components/editor/panel/ListHeader/index.ts

@@ -0,0 +1 @@
+export { ListHeader } from './ListHeader'

packages/ui/src/components/editor/panel/Presets/Presets.module.scss

@@ -2,30 +2,6 @@
   display: flex;
   flex-direction: column;
 }
-
-.header {
-  height: var(--list-item-height);
-  padding: 0 12px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--vscode-list-hoverBackground);
-  }
-
-  &__left {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  &__right {
-    display: flex;
-  }
-}
-
 .presets {
   display: flex;
   flex-direction: column;