Refactor toolbar layout to group configuration count and actions with improved spacing and alignment

Author: robertpiosik

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

@@ -10,6 +10,12 @@
   justify-content: space-between;
 }
 
+.toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .list {
   display: flex;
   flex-direction: column;

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

@@ -75,12 +75,21 @@ export const ConfigurationsList: React.FC<ConfigurationsList.Props> = (
   return (
     <div className={styles.container}>
       <div className={styles.toolbar}>
+        <div className={styles['toolbar-group']}>
+          <span style={{ fontWeight: 500 }}>
+            {props.configurations.length} configuration
+            {props.configurations.length === 1 ? '' : 's'}
+          </span>
+          {props.on_unset_default && has_default && (
+            <>
+              <span>·</span>
+              <TextButton on_click={props.on_unset_default}>
+                Unset default
+              </TextButton>
+            </>
+          )}
+        </div>
         <Button on_click={props.on_add}>New Configuration...</Button>
-        {props.on_unset_default && has_default && (
-          <TextButton on_click={props.on_unset_default}>
-            Unset default
-          </TextButton>
-        )}
       </div>
       <div className={styles.list}>
         {props.configurations.length > 0 ? (

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

@@ -7,7 +7,7 @@
   display: flex;
   padding: 12px 12px 8px 12px;
   align-items: center;
-  gap: 8px;
+  justify-content: space-between;
 }
 
 .list {

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

@@ -69,6 +69,10 @@ export const ModelProviders: React.FC<ModelProviders.Props> = (props) => {
   return (
     <div className={styles.container}>
       <div className={styles.toolbar}>
+        <span style={{ fontWeight: 500 }}>
+          {props.providers.length} model provider
+          {props.providers.length === 1 ? '' : 's'}
+        </span>
         <Button on_click={props.on_add_provider}>New Provider...</Button>
       </div>
       <div className={styles.list}>