feat: sidebar tab improvements

Author: alanpq

src/routes/(app)/sessions/create/+page.svelte

@@ -7,6 +7,7 @@
 	import IconXRegular from 'phosphor-icons-svelte/IconXRegular.svelte';
 	import IconTrash from 'phosphor-icons-svelte/IconTrashRegular.svelte';
 	import IconArrowsClockwise from 'phosphor-icons-svelte/IconArrowsClockwiseRegular.svelte';
+	import IconUsersThreeRegular from 'phosphor-icons-svelte/IconUsersThreeRegular.svelte';
 	import IconHeartRegular from 'phosphor-icons-svelte/IconHeartBold.svelte';
 	import * as Resizable from '$lib/components/ui/resizable/index.js';
 	import * as Accordion from '$lib/components/ui/accordion/index.js';
@@ -69,6 +70,7 @@
 	import CopyButton from '$lib/components/copy-button.svelte';
 	import Pip from '$lib/components/pip.svelte';
 	import OptionField from './OptionField.svelte';
+	import IconRobotRegular from 'phosphor-icons-svelte/IconRobotRegular.svelte';
 
 	type CreateSessionRequest = NonNullable<
 		operations['createSession']['requestBody']
@@ -888,22 +890,35 @@
 		<Resizable.Pane defaultSize={50} minSize={25} class="bg-card flex min-h-0 flex-col gap-4">
 			<Tabs.Root bind:value={currentTab} class="w-full grow overflow-hidden">
 				<Tabs.List class="bg-sidebar flex w-full rounded-none border-0 *:rounded-none">
-					<Tabs.Trigger value="agent" class="flex items-center truncate">
-						<IconMenu class="m-auto size-6 xl:hidden xl:size-0 " />
-						<span class=" m-auto hidden xl:inline">Agent editor</span>
+					<Tabs.Trigger value="agent" class="group @container flex items-center gap-1 truncate">
+						<IconRobotRegular class="size-6" />
+						<span
+							class={cn(
+								'hidden @[11ch]:inline',
+								Object.values($errors?.agents ?? {}).length > 0 &&
+									'group-not-data-[state=active]:text-destructive'
+							)}>Agent</span
+						>
 					</Tabs.Trigger>
-
-					<Tabs.Trigger value="session" class="flex items-center truncate">
-						<IconWrenchRegular class="m-auto size-6 xl:hidden xl:size-0 " />
+					<Tabs.Trigger value="groups" class="group @container flex items-center gap-1 truncate">
+						<IconUsersThreeRegular class="size-6" />
 						<span
-							class=" m-auto hidden xl:inline {$errors?.sessionRuntimeSettings?.ttl
-								? 'text-destructive'
-								: ''}">Session details</span
+							class={cn(
+								'hidden @[11ch]:inline',
+								Object.values($errors?.groups ?? {}).length > 0 &&
+									'group-not-data-[state=active]:text-destructive'
+							)}>Groups</span
 						>
 					</Tabs.Trigger>
-					<Tabs.Trigger value="groups" class="flex items-center truncate">
-						<IconWrenchRegular class="m-auto size-6 xl:hidden xl:size-0 " />
-						Agent Groups
+					<Tabs.Trigger value="session" class="group @container flex items-center gap-1 truncate">
+						<IconWrenchRegular class="size-6" />
+						<span
+							class={cn(
+								'hidden @[11ch]:inline',
+								$errors?.sessionRuntimeSettings?.ttl &&
+									'group-not-data-[state=active]:text-destructive'
+							)}>Session</span
+						>
 					</Tabs.Trigger>
 				</Tabs.List>
 				{@const availableOptions = {}}