refactor: implement proper Atomic Design component architecture

[phrazzld]

Description

Components in the codebase do not follow the mandated Atomic Design methodology, with inline SVG icons and mixed component responsibilities that violate the systematic UI composition approach.

Philosophy Violation

Core Principle: Atomic Design is Mandatory - Structure components following the Atomic Design methodology to enable systematic UI composition and reuse.

Reference: DEVELOPMENT_PHILOSOPHY_APPENDIX_FRONTEND.md Section 1: "Component Architecture (Atomic Design)"

Issues Found

1. src/app/components/DarkModeToggle.tsx

Problems:

• Contains inline SVG icons (should be extracted to atoms)
• Mixes multiple atomic levels within one component
• String concatenation for CSS classes instead of proper composition

Current Structure:

// Mixed responsibilities - contains both molecule logic AND atom-level SVG icons
<button className={`${baseClasses} ${buttonPadding} ${className}`}>
  {isDarkMode ? (
    <svg xmlns="http://www.w3.org/2000/svg" className={iconSize}>
      {/* Inline SVG content */}
    </svg>
  ) : (
    <svg xmlns="http://www.w3.org/2000/svg" className={iconSize}>
      {/* Different inline SVG content */}
    </svg>
  )}
</button>

Required Atomic Design Structure

Atoms Layer

// src/app/components/atoms/icons/SunIcon.tsx
export function SunIcon({ size = 'medium', className }: IconProps) {
  return <svg className={getIconSizeClass(size, className)}>...</svg>
}

// src/app/components/atoms/icons/MoonIcon.tsx  
export function MoonIcon({ size = 'medium', className }: IconProps) {
  return <svg className={getIconSizeClass(size, className)}>...</svg>
}

// src/app/components/atoms/Button.tsx
export function Button({ variant, size, children, ...props }: ButtonProps) {
  return <button className={getButtonClasses(variant, size)} {...props}>{children}</button>
}

Molecules Layer

// src/app/components/molecules/DarkModeToggle.tsx
export function DarkModeToggle({ size, className, onClick }: DarkModeToggleProps) {
  const { isDarkMode, toggleDarkMode } = useTheme();
  
  return (
    <Button
      variant="ghost" 
      size={size}
      className={className}
      onClick={onClick || toggleDarkMode}
      aria-label={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
    >
      {isDarkMode ? <SunIcon size={size} /> : <MoonIcon size={size} />}
    </Button>
  );
}

Proposed Folder Structure

src/app/components/
├── atoms/
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.stories.tsx
│   │   └── __tests__/Button.test.tsx
│   └── icons/
│       ├── SunIcon.tsx
│       ├── MoonIcon.tsx
│       └── index.ts
├── molecules/
│   ├── DarkModeToggle/
│   │   ├── DarkModeToggle.tsx
│   │   ├── DarkModeToggle.stories.tsx
│   │   └── __tests__/DarkModeToggle.test.tsx
│   └── SearchBar/
└── organisms/
    └── NavigationBar/

Acceptance Criteria

• Extract all inline SVG icons into atomic Icon components
• Create reusable Button atom component with proper variants
• Refactor DarkModeToggle to use Button and Icon atoms
• Implement proper folder structure by atomic design levels
• Each atom should be completely self-contained and reusable
• Update all Storybook stories to reflect atomic design structure
• Ensure all existing functionality is preserved
• Add comprehensive stories for each atomic component
• Update component tests to match new structure

Benefits

• Reusability: Icon and Button atoms can be used across components
• Consistency: Systematic approach to UI composition
• Maintainability: Clear separation of responsibilities
• Testability: Easier to test individual atomic components
• Design System: Foundation for a cohesive design system

Implementation Priority

1. Phase 1: Extract Icon atoms (SunIcon, MoonIcon)
2. Phase 2: Create Button atom component
3. Phase 3: Refactor DarkModeToggle to use atoms
4. Phase 4: Apply pattern to other components (SearchBar, etc.)

Priority

Medium - Architectural improvement that will benefit component reusability and design system consistency.