AISidebar: replace horizontal tabs with icon strip layout, show active tab title below icons

2026-07-21 22:50:45 +02:00
parent b30d1e9300
commit a4793991dd
1 changed files with 75 additions and 87 deletions
@@ -18,12 +18,25 @@ const bellIcon = (className: string) => (
  </svg>
 );

+const bulbIcon = (className: string) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+  </svg>
+);
+
 const chevronRightIcon = (
  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
  </svg>
 );

+interface TabDef {
+  key: 'proactive' | 'chat' | 'notifications';
+  label: string;
+  icon: (cls: string) => React.ReactNode;
+  testId: string;
+}
+
 export function AISidebar() {
  const { t } = useTranslation();
  const { aiSidebarCollapsed, toggleAISidebar, aiSidebarTab, setAISidebarTab, notifications, removeNotification } = useUIStore();
@@ -48,6 +61,14 @@ export function AISidebar() {
    })();
  }, []);

+  const tabs: TabDef[] = [
+    { key: 'chat', label: 'KI Chat', icon: robotIcon, testId: 'ai-sidebar-tab-chat' },
+    { key: 'proactive', label: 'Proaktiv', icon: bulbIcon, testId: 'ai-sidebar-tab-proactive' },
+    { key: 'notifications', label: t('topbar.notifications'), icon: bellIcon, testId: 'ai-sidebar-tab-notifications' },
+  ];
+
+  const activeTab = tabs.find((tab) => tab.key === aiSidebarTab) || tabs[0];
+
  // Collapsed: narrow icon strip (desktop only, hidden on mobile)
  if (aiSidebarCollapsed) {
    return (
@@ -55,27 +76,23 @@ export function AISidebar() {
        className="hidden md:flex flex-shrink-0 w-12 flex-col items-center border-l border-secondary-200 bg-white py-3 gap-2"
        data-testid="ai-sidebar-collapsed"
      >
+        {tabs.map((tab) => (
          <button
-          onClick={() => { setAISidebarTab('chat'); toggleAISidebar(); }}
-          className="p-2 rounded-md hover:bg-secondary-100 min-h-touch min-w-touch flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
-          aria-label="KI Assistent öffnen"
-          title="KI Assistent"
-        >
-          {robotIcon('w-5 h-5 text-secondary-600')}
-        </button>
-        <button
-          onClick={() => { setAISidebarTab('notifications'); toggleAISidebar(); }}
+            key={tab.key}
+            onClick={() => { setAISidebarTab(tab.key); toggleAISidebar(); }}
            className="p-2 rounded-md hover:bg-secondary-100 min-h-touch min-w-touch flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 relative"
-          aria-label={t('topbar.notifications')}
-          title={t('topbar.notifications')}
+            aria-label={tab.label}
+            title={tab.label}
+            data-testid={tab.testId}
          >
-          {bellIcon('w-5 h-5 text-secondary-600')}
-          {notifications.length > 0 && (
+            {tab.icon('w-5 h-5 text-secondary-600')}
+            {tab.key === 'notifications' && notifications.length > 0 && (
              <span className="absolute -top-0.5 -right-0.5 w-4 h-4 bg-danger-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
                {notifications.length}
              </span>
            )}
          </button>
+        ))}
      </div>
    );
  }
@@ -125,60 +142,39 @@ export function AISidebar() {
    );
  };

-  const tabBar = (
-    <div className="flex border-b border-secondary-200" role="tablist">
+  const iconStrip = (
+    <div className="flex items-center gap-1 px-2 py-2 border-b border-secondary-200" role="tablist">
+      {tabs.map((tab) => (
        <button
-        onClick={() => setAISidebarTab('proactive')}
-        className={`px-3 py-2 text-sm font-medium flex items-center gap-1.5 border-b-2 transition-colors ${
-          aiSidebarTab === 'proactive'
-            ? 'text-primary-600 border-primary-500'
-            : 'text-secondary-500 hover:text-secondary-700 border-transparent'
+          key={tab.key}
+          onClick={() => setAISidebarTab(tab.key)}
+          className={`p-2 rounded-md min-h-touch min-w-touch flex items-center justify-center transition-colors relative ${
+            aiSidebarTab === tab.key
+              ? 'bg-primary-100 text-primary-600'
+              : 'text-secondary-500 hover:bg-secondary-100 hover:text-secondary-700'
          }`}
          role="tab"
-        aria-selected={aiSidebarTab === 'proactive'}
-        aria-label="Proaktiv"
-        data-testid="ai-sidebar-tab-proactive"
+          aria-selected={aiSidebarTab === tab.key}
+          aria-label={tab.label}
+          data-testid={tab.testId}
        >
-        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
-        </svg>
-        Proaktiv
-      </button>
-      <button
-        onClick={() => setAISidebarTab('chat')}
-        className={`px-3 py-2 text-sm font-medium flex items-center gap-1.5 border-b-2 transition-colors ${
-          aiSidebarTab === 'chat'
-            ? 'text-primary-600 border-primary-500'
-            : 'text-secondary-500 hover:text-secondary-700 border-transparent'
-        }`}
-        role="tab"
-        aria-selected={aiSidebarTab === 'chat'}
-        aria-label="KI Chat"
-        data-testid="ai-sidebar-tab-chat"
-      >
-        {robotIcon('w-4 h-4')}
-        KI Chat
-      </button>
-      <button
-        onClick={() => setAISidebarTab('notifications')}
-        className={`px-3 py-2 text-sm font-medium flex items-center gap-1.5 border-b-2 transition-colors ${
-          aiSidebarTab === 'notifications'
-            ? 'text-primary-600 border-primary-500'
-            : 'text-secondary-500 hover:text-secondary-700 border-transparent'
-        }`}
-        role="tab"
-        aria-selected={aiSidebarTab === 'notifications'}
-        aria-label={t('topbar.notifications')}
-        data-testid="ai-sidebar-tab-notifications"
-      >
-        {bellIcon('w-4 h-4')}
-        <span className="truncate">{t('topbar.notifications')}</span>
-        {notifications.length > 0 && (
-          <span className="ml-1 w-4 h-4 bg-danger-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center flex-shrink-0">
+          {tab.icon('w-5 h-5')}
+          {tab.key === 'notifications' && notifications.length > 0 && (
+            <span className="absolute -top-0.5 -right-0.5 w-4 h-4 bg-danger-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
              {notifications.length}
            </span>
          )}
        </button>
+      ))}
+      <div className="flex-1" />
+      <button
+        onClick={toggleAISidebar}
+        className="p-1.5 rounded-md text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100 min-h-touch min-w-touch flex items-center justify-center"
+        title="Einklappen"
+        aria-label="KI Assistent einklappen"
+      >
+        {chevronRightIcon}
+      </button>
    </div>
  );

@@ -202,9 +198,11 @@ export function AISidebar() {
            </svg>
            <span className="text-sm font-medium">Zurück</span>
          </button>
-          <span className="text-sm font-medium text-secondary-700 ml-2">KI Assistent</span>
        </div>
-        {tabBar}
+        {iconStrip}
+        <div className="px-3 py-2 border-b border-secondary-200">
+          <span className="text-sm font-medium text-secondary-700">{activeTab.label}</span>
+        </div>
        <div className="flex-1 overflow-hidden">
          {renderTabContent()}
        </div>
@@ -220,20 +218,10 @@ export function AISidebar() {
        data-testid="ai-sidebar-pane"
      >
        <div className="h-full flex flex-col">
-          <div className="h-12 flex items-center justify-between px-3 border-b border-secondary-200">
-            <span className="text-sm font-medium text-secondary-700">
-              {aiSidebarTab === 'notifications' ? t('topbar.notifications') : 'KI Assistent'}
-            </span>
-            <button
-              onClick={toggleAISidebar}
-              className="p-1 rounded text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100"
-              title="Einklappen"
-              aria-label="KI Assistent einklappen"
-            >
-              {chevronRightIcon}
-            </button>
+          {iconStrip}
+          <div className="px-3 py-2 border-b border-secondary-200">
+            <span className="text-sm font-medium text-secondary-700">{activeTab.label}</span>
          </div>
-          {tabBar}
          <div className="flex-1 overflow-hidden">
            {renderTabContent()}
          </div>