Simplify active configuration selection and clean up web configuration parameter naming

- use css mixin instad of [Fragment]
- should not highlight first configuration when there is no last used one

├── apps
│   └── editor
│       └── src
│           └── views
│               └── prompt
│                   └── frontend
│                       ├── Home
│                       │   ├── Home.module.scss
│                       │   └── Home.tsx
│                       ├── Main
│                       │   └── MainView
│                       │       ├── MainView.module.scss
│                       │       ├── MainView.tsx
│                       │       └── components
│                       │           └── Header
│                       │               ├── Header.module.scss
│                       │               └── Header.tsx
│                       └── hooks
│                           └── use-is-landscape.ts
└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── prompt
                        └── Configurations
                            └── Configurations.tsx

Author: robertpiosik

apps/editor/src/views/prompt/frontend/Main/MainView/MainView.tsx

@@ -188,8 +188,7 @@ export const MainView: React.FC<Props> = (props) => {
 
   const last_choice_tooltip = use_last_choice_tooltip({
     target: props.target,
-    selected_web_configuration_or_group_name:
-      props.selected_web_configuration_name,
+    selected_web_configuration_name: props.selected_web_configuration_name,
     web_configurations: props.web_configurations,
     selected_api_configuration_id: props.selected_api_configuration_id,
     api_configurations: props.api_configurations

apps/editor/src/views/prompt/frontend/Main/MainView/hooks/use-last-choice-tooltip.ts

@@ -6,19 +6,19 @@ import { WebConfiguration } from '@shared/types/web-configuration'
 
 export const use_last_choice_tooltip = (params: {
   target: Target
-  selected_web_configuration_or_group_name?: string
+  selected_web_configuration_name?: string
   web_configurations: WebConfiguration[]
   selected_api_configuration_id?: string
   api_configurations: ApiConfiguration[]
 }): { name: string; details?: string } | undefined => {
   return useMemo(() => {
     if (params.target == TARGET.WEB) {
-      if (params.selected_web_configuration_or_group_name) {
-        if (params.selected_web_configuration_or_group_name == 'Ungrouped') {
+      if (params.selected_web_configuration_name) {
+        if (params.selected_web_configuration_name == 'Ungrouped') {
           return { name: 'Ungrouped' }
         } else {
           const web_configuration = params.web_configurations.find(
-            (p) => p.name == params.selected_web_configuration_or_group_name
+            (p) => p.name == params.selected_web_configuration_name
           )
           if (web_configuration) {
             const is_unnamed =
@@ -68,10 +68,9 @@ export const use_last_choice_tooltip = (params: {
         }
       }
     } else {
-      // MODE.API
       if (params.selected_api_configuration_id !== undefined) {
         const configuration = params.api_configurations.find(
-          (c) => c.id === params.selected_api_configuration_id
+          (c) => c.id == params.selected_api_configuration_id
         )
         if (configuration) {
           const description_parts = [configuration.provider_name]
@@ -86,7 +85,7 @@ export const use_last_choice_tooltip = (params: {
     return undefined
   }, [
     params.target,
-    params.selected_web_configuration_or_group_name,
+    params.selected_web_configuration_name,
     params.web_configurations,
     params.selected_api_configuration_id,
     params.api_configurations

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

@@ -41,8 +41,7 @@ export namespace Configurations {
 
 export const Configurations: React.FC<Configurations.Props> = (props) => {
   const pinned_configurations = props.configurations.filter((c) => c.is_pinned)
-  const active_configuration_id =
-    props.selected_configuration_id ?? props.configurations[0]?.id
+  const active_configuration_id = props.selected_configuration_id
 
   const render_configuration_item = (
     configuration: Configurations.Configuration,