Introduce the component to visually separate and label sections within the settings sidebar navigation

Author: robertpiosik

packages/ui/src/components/editor/settings/NavigationDivider/NavigationDivider.module.scss

@@ -0,0 +1,13 @@
+.line {
+  height: 1px;
+  background-color: var(--vscode-settings-headerBorder);
+  margin: 0 var(--padding-8px);
+}
+
+.text {
+  color: var(--vscode-descriptionForeground);
+  font-size: 0.9em;
+  font-weight: 600;
+  padding: 0 var(--padding-8px);
+  margin-top: var(--padding-8px);
+}

packages/ui/src/components/editor/settings/NavigationDivider/NavigationDivider.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { NavigationDivider } from './NavigationDivider'
+
+const meta: Meta<typeof NavigationDivider> = {
+  component: NavigationDivider,
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: '200px',
+          padding: '1rem',
+          backgroundColor: 'var(--vscode-sideBar-background)',
+          color: 'var(--vscode-foreground)'
+        }}
+      >
+        <Story />
+      </div>
+    )
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof NavigationDivider>
+
+export const Default: Story = {
+  render: () => (
+    <>
+      <div>Item 1</div>
+      <NavigationDivider />
+      <div>Item 2</div>
+    </>
+  )
+}
+
+export const WithText: Story = {
+  render: () => (
+    <>
+      <div>Item 1</div>
+      <NavigationDivider text="API Tools" />
+      <div>Item 2</div>
+      <div>Item 3</div>
+    </>
+  )
+}

packages/ui/src/components/editor/settings/NavigationDivider/NavigationDivider.tsx

@@ -0,0 +1,14 @@
+import styles from './NavigationDivider.module.scss'
+import React from 'react'
+
+type Props = {
+  text?: string
+}
+
+export const NavigationDivider: React.FC<Props> = ({ text }) => {
+  if (!text) {
+    return <div className={styles.line} />
+  }
+
+  return <div className={styles.text}>{text}</div>
+}

packages/ui/src/components/editor/settings/NavigationDivider/index.ts

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

packages/vscode/src/views/settings/frontend/Home/Home.tsx

@@ -2,6 +2,7 @@ import { useState, useRef, useEffect, useCallback } from 'react'
 import { Layout } from '@ui/components/editor/settings/Layout'
 import { NavigationItem } from '@ui/components/editor/settings/NavigationItem'
 import { ModelProvidersSection } from './sections/ModelProvidersSection'
+import { NavigationDivider } from '@ui/components/editor/settings/NavigationDivider'
 import { Item } from '@ui/components/editor/settings/Item'
 import { ApiToolConfigurationSection } from './sections/ApiToolConfigurationSection'
 import { dictionary } from '@shared/constants/dictionary'
@@ -21,19 +22,26 @@ type NavItem =
   | 'intelligent-update'
   | 'commit-messages'
 
-const NAV_ITEMS_CONFIG: { id: NavItem; label: string }[] = [
+type NavConfigItem =
+  | { type: 'item'; id: NavItem; label: string }
+  | { type: 'divider'; text?: string }
+
+const NAV_ITEMS_CONFIG: NavConfigItem[] = [
   {
+    type: 'item',
     id: 'general',
     label: 'General'
   },
   {
+    type: 'item',
     id: 'model-providers',
     label: dictionary.settings.MODEL_PROVIDERS_LABEL
   },
-  { id: 'edit-context', label: 'Edit Context' },
-  { id: 'code-completions', label: 'Code Completions' },
-  { id: 'intelligent-update', label: 'Intelligent Update' },
-  { id: 'commit-messages', label: 'Commit Messages' }
+  { type: 'divider', text: 'API Tools' },
+  { type: 'item', id: 'edit-context', label: 'Edit Context' },
+  { type: 'item', id: 'code-completions', label: 'Code Completions' },
+  { type: 'item', id: 'intelligent-update', label: 'Intelligent Update' },
+  { type: 'item', id: 'commit-messages', label: 'Commit Messages' }
 ]
 
 type Props = {
@@ -124,7 +132,10 @@ export const Home: React.FC<Props> = (props) => {
     [handle_stuck_change]
   )
 
-  const nav_item_ids = NAV_ITEMS_CONFIG.map((item) => item.id)
+  const nav_item_ids = NAV_ITEMS_CONFIG.filter(
+    (item): item is Extract<NavConfigItem, { type: 'item' }> =>
+      item.type === 'item'
+  ).map((item) => item.id)
   const active_nav_item_id =
     nav_item_ids.filter((id) => stuck_sections.has(id)).pop() || nav_item_ids[0]
 
@@ -185,19 +196,21 @@ export const Home: React.FC<Props> = (props) => {
       <Layout
         ref={scroll_container_ref}
         title={dictionary.settings.SETTINGS_TITLE}
-        sidebar={
-          <>
-            {NAV_ITEMS_CONFIG.map(({ id, label }) => (
-              <NavigationItem
-                key={id}
-                href={`#${id}`}
-                label={label}
-                is_active={id === active_nav_item_id}
-                on_click={(e) => handle_nav_click(e, id)}
-              />
-            ))}
-          </>
-        }
+        sidebar={NAV_ITEMS_CONFIG.map((item, i) => {
+          if (item.type == 'divider') {
+            return <NavigationDivider key={i} text={item.text} />
+          }
+
+          return (
+            <NavigationItem
+              key={i}
+              href={`#${item.id}`}
+              label={item.label}
+              is_active={item.id === active_nav_item_id}
+              on_click={(e) => handle_nav_click(e, item.id)}
+            />
+          )
+        })}
       >
         <Section
           ref={(el) => (section_refs.current['general'] = el)}