updated more simple modern layout

frontend/src/components/PillNav/PillNav.module.css

@@ -0,0 +1,88 @@
+/* frontend/src/components/PillNav/PillNav.module.css */
+.pillNavContainer {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding: 4px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.pillNavContainer::-webkit-scrollbar {
+  display: none;
+}
+
+.pill {
+  padding: 8px 16px;
+  border-radius: 9999px;
+  border: 1px solid;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  white-space: nowrap;
+  outline: none;
+}
+
+.pill:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+/* Solid Variant */
+.pillSolid {
+  background-color: transparent;
+  color: #6b7280;
+  border-color: #d1d5db;
+}
+
+.pillSolidActive {
+  background-color: #2563eb;
+  color: white;
+  border-color: #2563eb;
+}
+
+.pillSolid:hover:not(.pillSolidActive) {
+  background-color: #f3f4f6;
+  color: #374151;
+  border-color: #9ca3af;
+  transform: translateY(-1px);
+}
+
+/* Outline Variant */
+.pillOutline {
+  background-color: transparent;
+  color: #6b7280;
+  border-color: #d1d5db;
+}
+
+.pillOutlineActive {
+  color: #2563eb;
+  border-color: #2563eb;
+  font-weight: 600;
+}
+
+.pillOutline:hover:not(.pillOutlineActive) {
+  background-color: #f3f4f6;
+  color: #374151;
+  border-color: #9ca3af;
+  transform: translateY(-1px);
+}
+
+/* Ghost Variant */
+.pillGhost {
+  background-color: transparent;
+  color: #6b7280;
+  border-color: transparent;
+}
+
+.pillGhostActive {
+  background-color: #f3f4f6;
+  color: #111827;
+}
+
+.pillGhost:hover:not(.pillGhostActive) {
+  background-color: #f9fafb;
+  color: #374151;
+  transform: translateY(-1px);
+}

frontend/src/components/PillNav/PillNav.tsx

@@ -0,0 +1,181 @@
+// frontend/src/components/PillNav/PillNav.tsx - ELEGANT WHITE DESIGN
+import React, { useEffect, useRef } from 'react';
+
+export interface PillNavItem {
+  id: string;
+  label: string;
+}
+
+export interface PillNavProps {
+  items: PillNavItem[];
+  activeId: string;
+  onChange: (id: string) => void;
+  className?: string;
+  variant?: 'solid' | 'outline' | 'ghost';
+}
+
+const PillNav: React.FC<PillNavProps> = ({
+  items,
+  activeId,
+  onChange,
+  className = '',
+  variant = 'solid'
+}) => {
+  const pillRefs = useRef<Array<HTMLButtonElement | null>>([]);
+
+  const baseStyles = {
+    container: {
+      display: 'flex',
+      gap: '4px',
+      overflowX: 'auto' as const,
+      padding: '4px',
+      scrollbarWidth: 'none' as const,
+      msOverflowStyle: 'none' as const,
+      background: 'rgba(22, 23, 24, 0.02)',
+      borderRadius: '12px',
+      border: '1px solid rgba(22, 23, 24, 0.06)',
+    },
+    pill: {
+      padding: '10px 20px',
+      borderRadius: '8px',
+      border: 'none',
+      fontSize: '14px',
+      fontWeight: 500,
+      cursor: 'pointer',
+      transition: 'all 0.2s ease-in-out',
+      whiteSpace: 'nowrap' as const,
+      outline: 'none',
+      flexShrink: 0,
+    }
+  };
+
+  const getVariantStyles = (isActive: boolean) => {
+    const variants = {
+      solid: {
+        active: {
+          backgroundColor: '#51258f',
+          color: '#FBFAF6',
+          boxShadow: '0 2px 8px rgba(81, 37, 143, 0.2)',
+        },
+        inactive: {
+          backgroundColor: 'transparent',
+          color: '#666',
+        }
+      },
+      outline: {
+        active: {
+          backgroundColor: '#51258f',
+          color: '#FBFAF6',
+          boxShadow: '0 2px 8px rgba(81, 37, 143, 0.2)',
+        },
+        inactive: {
+          backgroundColor: 'transparent',
+          color: '#666',
+          border: '1px solid rgba(22, 23, 24, 0.2)',
+        }
+      },
+      ghost: {
+        active: {
+          backgroundColor: 'rgba(81, 37, 143, 0.1)',
+          color: '#51258f',
+          fontWeight: 600,
+        },
+        inactive: {
+          backgroundColor: 'transparent',
+          color: '#666',
+        }
+      }
+    };
+
+    return variants[variant][isActive ? 'active' : 'inactive'];
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent, index: number) => {
+    switch (event.key) {
+      case 'ArrowLeft': {
+        event.preventDefault();
+        const prevIndex = (index - 1 + items.length) % items.length;
+        onChange(items[prevIndex].id);
+        pillRefs.current[prevIndex]?.focus();
+        break;
+      }
+      case 'ArrowRight': {
+        event.preventDefault();
+        const nextIndex = (index + 1) % items.length;
+        onChange(items[nextIndex].id);
+        pillRefs.current[nextIndex]?.focus();
+        break;
+      }
+      case 'Home': {
+        event.preventDefault();
+        onChange(items[0].id);
+        pillRefs.current[0]?.focus();
+        break;
+      }
+      case 'End': {
+        event.preventDefault();
+        onChange(items[items.length - 1].id);
+        pillRefs.current[items.length - 1]?.focus();
+        break;
+      }
+    }
+  };
+
+  // Initialize refs array
+  useEffect(() => {
+    pillRefs.current = pillRefs.current.slice(0, items.length);
+  }, [items.length]);
+
+  const containerStyle = {
+    ...baseStyles.container,
+  };
+
+  return (
+    <div 
+      role="tablist" 
+      aria-label="Navigation tabs"
+      style={containerStyle}
+      className={className}
+    >
+      {items.map((item, index) => {
+        const isActive = item.id === activeId;
+        const pillStyle = {
+          ...baseStyles.pill,
+          ...getVariantStyles(isActive),
+        };
+
+        return (
+          <button
+            key={item.id}
+            ref={el => {
+              pillRefs.current[index] = el;
+            }}
+            role="tab"
+            aria-selected={isActive}
+            aria-controls={`tabpanel-${item.id}`}
+            tabIndex={isActive ? 0 : -1}
+            style={pillStyle}
+            onClick={() => onChange(item.id)}
+            onKeyDown={(e) => handleKeyDown(e, index)}
+            onMouseEnter={(e) => {
+              if (!isActive) {
+                e.currentTarget.style.backgroundColor = 'rgba(81, 37, 143, 0.08)';
+                e.currentTarget.style.color = '#51258f';
+                e.currentTarget.style.transform = 'translateY(-1px)';
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (!isActive) {
+                Object.assign(e.currentTarget.style, pillStyle);
+              }
+            }}
+          >
+            {item.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default PillNav;

frontend/src/components/PillNav/index.ts

@@ -0,0 +1,3 @@
+// frontend/src/components/PillNav/index.ts
+export { default } from './PillNav';
+export type { PillNavProps, PillNavItem } from './PillNav';