Disable empty settings groups and navigation items instead of hiding them

- instead of hiding settings groups (e.g. model, defaults), make them dimmed and ignore pointer events

├── apps
│   └── editor
│       └── src
│           └── views
│               └── settings
│                   └── frontend
│                       └── Home
│                           ├── Home.tsx
│                           ├── hooks
│                           │   └── use-scroll-to.ts
│                           └── sections
│                               └── ApiSection.tsx
└── packages
    └── ui
        └── src
            ├── components
            │   └── editor
            │       └── settings
            │           ├── Group
            │           │   ├── Group.module.scss
            │           │   └── Group.tsx
            │           └── NavigationItemGroup
            │               ├── NavigationItemGroup.module.scss
            │               └── NavigationItemGroup.tsx
            └── styles
                └── foundation
                    └── _variables.scss

Author: robertpiosik

apps/editor/src/views/settings/frontend/Home/Home.tsx

@@ -164,8 +164,6 @@ export const Home: React.FC<Props> = (props) => {
     handle_nav_click
   } = use_scroll_to({
     nav_items_config: NAV_ITEMS_CONFIG,
-    providers_length: props.providers.length,
-    api_configurations_length: props.api_configurations.length,
     scroll_to_section_on_load: props.scroll_to_section_on_load
   })
 
@@ -204,21 +202,6 @@ export const Home: React.FC<Props> = (props) => {
           }[] = []
 
           for (const item of NAV_ITEMS_CONFIG) {
-            if (
-              [
-                'section:api:group:api-defaults',
-                'section:api:group:system-instructions'
-              ].includes(item.id) &&
-              props.api_configurations.length === 0
-            ) {
-              continue
-            }
-            if (
-              item.id === 'section:api:group:models' &&
-              props.providers.length === 0
-            ) {
-              continue
-            }
             if (
               item.id.startsWith('section:') &&
               !item.id.includes(':group:')
@@ -241,17 +224,29 @@ export const Home: React.FC<Props> = (props) => {
                   is_active={is_section_active}
                   has_warning={get_has_warning(section.parent.id)}
                 />
-                {section.groups.map((group, j) => (
-                  <UiNavigationItemGroup
-                    key={j}
-                    href={`#${group.id}`}
-                    label={t(group.label)}
-                    is_active={group.id === active_nav_item_id}
-                    has_warning={get_has_warning(group.id)}
-                    on_click={(e) => handle_nav_click(e, group.id)}
-                    is_last={j === section.groups.length - 1}
-                  />
-                ))}
+                {section.groups.map((group, j) => {
+                  const is_disabled =
+                    (group.id === 'section:api:group:models' &&
+                      props.providers.length === 0) ||
+                    ([
+                      'section:api:group:api-defaults',
+                      'section:api:group:system-instructions'
+                    ].includes(group.id) &&
+                      props.api_configurations.length === 0)
+
+                  return (
+                    <UiNavigationItemGroup
+                      key={j}
+                      href={`#${group.id}`}
+                      label={t(group.label)}
+                      is_active={group.id === active_nav_item_id}
+                      has_warning={get_has_warning(group.id)}
+                      on_click={(e) => handle_nav_click(e, group.id)}
+                      is_last={j === section.groups.length - 1}
+                      is_disabled={is_disabled}
+                    />
+                  )
+                })}
               </UiNavigationSection>
             )
           })

apps/editor/src/views/settings/frontend/Home/hooks/use-scroll-to.ts

@@ -4,16 +4,9 @@ import type { NavItem, NavConfigItem } from '../Home'
 
 export const use_scroll_to = (params: {
   nav_items_config: NavConfigItem[]
-  providers_length: number
-  api_configurations_length: number
   scroll_to_section_on_load?: NavItem
 }) => {
-  const {
-    nav_items_config,
-    providers_length,
-    api_configurations_length,
-    scroll_to_section_on_load
-  } = params
+  const { nav_items_config, scroll_to_section_on_load } = params
 
   const scroll_container_ref = useRef<HTMLDivElement>(null)
   const section_refs = useRef<Partial<Record<NavItem, HTMLDivElement | null>>>(
@@ -33,24 +26,8 @@ export const use_scroll_to = (params: {
   const [is_layout_ready, set_is_layout_ready] = useState(false)
 
   const last_rendered_item_id = useMemo(() => {
-    let last_id = nav_items_config[0].id
-    for (const item of nav_items_config) {
-      if (
-        [
-          'section:api:group:api-defaults',
-          'section:api:group:system-instructions'
-        ].includes(item.id) &&
-        api_configurations_length === 0
-      ) {
-        continue
-      }
-      if (item.id === 'section:api:group:models' && providers_length === 0) {
-        continue
-      }
-      last_id = item.id
-    }
-    return last_id
-  }, [nav_items_config, providers_length, api_configurations_length])
+    return nav_items_config[nav_items_config.length - 1].id
+  }, [nav_items_config])
 
   useEffect(() => {
     const scroll_container = scroll_container_ref.current
@@ -120,18 +97,6 @@ export const use_scroll_to = (params: {
       let new_active_id = nav_items_config[0].id
 
       for (const item of nav_items_config) {
-        if (
-          [
-            'section:api:group:api-defaults',
-            'section:api:group:system-instructions'
-          ].includes(item.id) &&
-          api_configurations_length === 0
-        ) {
-          continue
-        }
-        if (item.id === 'section:api:group:models' && providers_length === 0) {
-          continue
-        }
         const el = section_refs.current[item.id]
         if (el) {
           const rect = el.getBoundingClientRect()
@@ -154,7 +119,7 @@ export const use_scroll_to = (params: {
       scroll_container.removeEventListener('scroll', handle_scroll)
       window.removeEventListener('resize', handle_scroll)
     }
-  }, [providers_length, api_configurations_length, nav_items_config])
+  }, [nav_items_config])
 
   const handle_scroll_to_section = useCallback(
     (item_id: NavItem) => {