refactor: new settings page design and new pill component

src/components/main-content/view/subcomponents/MainContentHeader.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useRef, useState, useEffect } from 'react';
 import type { MainContentHeaderProps } from '../../types/types';
 import MobileMenuButton from './MobileMenuButton';
 import MainContentTabSwitcher from './MainContentTabSwitcher';
@@ -12,6 +13,26 @@ export default function MainContentHeader({
   isMobile,
   onMenuClick,
 }: MainContentHeaderProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const updateScrollState = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 2);
+    setCanScrollRight(el.scrollLeft < el.scrollWidth - el.clientWidth - 2);
+  }, []);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    updateScrollState();
+    const observer = new ResizeObserver(updateScrollState);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [updateScrollState]);
+
   return (
     <div className="pwa-header-safe flex-shrink-0 border-b border-border/60 bg-background px-3 py-1.5 sm:px-4 sm:py-2">
       <div className="flex items-center justify-between gap-3">
@@ -25,12 +46,24 @@ export default function MainContentHeader({
           />
         </div>
 
-        <div className="hidden flex-shrink-0 sm:block">
-          <MainContentTabSwitcher
-            activeTab={activeTab}
-            setActiveTab={setActiveTab}
-            shouldShowTasksTab={shouldShowTasksTab}
-          />
+        <div className="relative min-w-0 flex-shrink overflow-hidden sm:flex-shrink-0">
+          {canScrollLeft && (
+            <div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-6 bg-gradient-to-r from-background to-transparent" />
+          )}
+          <div
+            ref={scrollRef}
+            onScroll={updateScrollState}
+            className="scrollbar-hide overflow-x-auto"
+          >
+            <MainContentTabSwitcher
+              activeTab={activeTab}
+              setActiveTab={setActiveTab}
+              shouldShowTasksTab={shouldShowTasksTab}
+            />
+          </div>
+          {canScrollRight && (
+            <div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-6 bg-gradient-to-l from-background to-transparent" />
+          )}
         </div>
       </div>
     </div>

src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx

@@ -1,7 +1,7 @@
 import { MessageSquare, Terminal, Folder, GitBranch, ClipboardCheck, type LucideIcon } from 'lucide-react';
 import type { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Tooltip } from '../../../../shared/view/ui';
+import { Tooltip, PillBar, Pill } from '../../../../shared/view/ui';
 import type { AppTab } from '../../../../types/app';
 import { usePlugins } from '../../../../contexts/PluginsContext';
 import PluginIcon from '../../../plugins/view/PluginIcon';
@@ -66,20 +66,17 @@ export default function MainContentTabSwitcher({
   const tabs: TabDefinition[] = [...builtInTabs, ...pluginTabs];
 
   return (
-    <div className="inline-flex items-center gap-[2px] rounded-lg bg-muted/60 p-[3px]">
+    <PillBar>
       {tabs.map((tab) => {
         const isActive = tab.id === activeTab;
         const displayLabel = tab.kind === 'builtin' ? t(tab.labelKey) : tab.label;
 
         return (
           <Tooltip key={tab.id} content={displayLabel} position="bottom">
-            <button
+            <Pill
+              isActive={isActive}
               onClick={() => setActiveTab(tab.id)}
-              className={`relative flex items-center gap-1.5 rounded-md px-2.5 py-[5px] text-sm font-medium transition-all duration-150 ${
-                isActive
-                  ? 'bg-background text-foreground shadow-sm'
-                  : 'text-muted-foreground hover:text-foreground'
-              }`}
+              className="px-2.5 py-[5px]"
             >
               {tab.kind === 'builtin' ? (
                 <tab.icon className="h-3.5 w-3.5" strokeWidth={isActive ? 2.2 : 1.8} />
@@ -91,10 +88,10 @@ export default function MainContentTabSwitcher({
                 />
               )}
               <span className="hidden lg:inline">{displayLabel}</span>
-            </button>
+            </Pill>
           </Tooltip>
         );
       })}
-    </div>
+    </PillBar>
   );
 }