feat: sidebar active indicator bar, group label separators, tooltip support, config panel separators and CSS variable width, tab bar improvements

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

packages/components/src/custom/config-panel-renderer.tsx

@@ -12,6 +12,7 @@ import { X, Save, RotateCcw, ChevronRight } from 'lucide-react';
 
 import { cn } from '../lib/utils';
 import { Button } from '../ui/button';
+import { Separator } from '../ui/separator';
 import { SectionHeader } from './section-header';
 import { ConfigFieldRenderer } from './config-field-renderer';
 import type { ConfigPanelSchema } from '../types/config-panel';
@@ -128,7 +129,7 @@ export function ConfigPanelRenderer({
       aria-label={ariaLabel}
       tabIndex={tabIndex}
       className={cn(
-        'absolute inset-y-0 right-0 w-full sm:w-72 lg:w-80 sm:relative border-l bg-background flex flex-col shrink-0 z-20',
+        'absolute inset-y-0 right-0 w-full sm:w-[var(--config-panel-width,280px)] sm:relative border-l bg-background flex flex-col shrink-0 z-20',
         className,
       )}
     >
@@ -167,13 +168,14 @@ export function ConfigPanelRenderer({
 
       {/* ── Scrollable sections ────────────────────────────── */}
       <div className="flex-1 overflow-auto px-4 pb-4">
-        {schema.sections.map((section) => {
+        {schema.sections.map((section, sectionIdx) => {
           if (section.visibleWhen && !section.visibleWhen(draft)) return null;
 
           const sectionCollapsed = isCollapsed(section.key, section.defaultCollapsed);
 
           return (
             <div key={section.key} data-testid={`config-section-${section.key}`}>
+              {sectionIdx > 0 && <Separator className="my-1" />}
               <SectionHeader
                 title={section.title}
                 collapsible={section.collapsible}

packages/components/src/ui/sidebar.tsx

@@ -36,7 +36,7 @@ export function SidebarNav({ items, title = "Application", className, collapsibl
             <SidebarMenu>
               {items.map((item) => (
                 <SidebarMenuItem key={item.href}>
-                  <SidebarMenuButton asChild isActive={location.pathname === item.href}>
+                  <SidebarMenuButton asChild isActive={location.pathname === item.href} tooltip={item.title}>
                     <NavLink to={item.href}>
                       {item.icon && <item.icon />}
                       <span>{item.title}</span>

packages/layout/src/SidebarNav.tsx

@@ -87,7 +87,7 @@ export const TabBar: React.FC<TabBarProps> = ({
 
   return (
     <div
-      className={cn('border-b px-2 sm:px-4 py-1 flex items-center gap-1 bg-background', className)}
+      className={cn('border-b px-2 sm:px-4 py-1 flex items-center gap-0.5 bg-background', className)}
       data-testid="view-tabs"
       role="tablist"
     >
@@ -97,9 +97,14 @@ export const TabBar: React.FC<TabBarProps> = ({
         return (
           <Button
             key={tab.name}
-            variant={isActive ? 'default' : 'ghost'}
+            variant="ghost"
             size="sm"
-            className="h-7 px-3 text-xs"
+            className={cn(
+              "h-7 px-3 py-1.5 text-xs rounded-none",
+              isActive
+                ? "border-b-2 border-primary font-medium text-foreground"
+                : "text-muted-foreground hover:text-foreground"
+            )}
             data-testid={`view-tab-${tab.name}`}
             role="tab"
             aria-selected={isActive}