refactor(app): split components/ into layouts/ and feature sections/

app/src/components/index.ts

@@ -0,0 +1,7 @@
+export * from 'src/components/CodeHighlighter';
+export * from 'src/components/ErrorBoundary';
+export * from 'src/components/FeedbackWidget';
+export * from 'src/components/LoaderSpinner';
+export * from 'src/components/RouteErrorBoundary';
+export * from 'src/components/SectionHeader';
+export * from 'src/components/ThemeToggle';

app/src/hooks/index.ts

@@ -15,3 +15,6 @@ export type {
 } from 'src/hooks/useLayoutContext';
 export { useThemeMode } from 'src/hooks/useThemeMode';
 export { useLatestRelease } from 'src/hooks/useLatestRelease';
+export * from 'src/hooks/useFeaturedSpecs';
+export * from 'src/hooks/usePlotOfTheDay';
+export * from 'src/hooks/useTypewriter';

app/src/components/Footer.test.tsx → app/src/layouts/Footer.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { Footer } from 'src/components/Footer';
+import { Footer } from 'src/layouts/Footer';
 import { render, screen, userEvent } from 'src/test-utils';
 
 describe('Footer', () => {

app/src/components/Layout.test.tsx → app/src/layouts/Layout.test.tsx

@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { AppDataProvider } from 'src/components/Layout';
 import { useAppData } from 'src/hooks/useLayoutContext';
+import { AppDataProvider } from 'src/layouts/Layout';
 import { render, screen, waitFor } from 'src/test-utils';
 
 // Helper component that reads the context and renders the four counts

app/src/components/MastheadRule.test.tsx → app/src/layouts/MastheadRule.test.tsx

@@ -22,7 +22,7 @@ vi.mock('src/hooks', async () => {
   };
 });
 
-import { MastheadRule } from 'src/components/MastheadRule';
+import { MastheadRule } from 'src/layouts/MastheadRule';
 
 function renderAt(initialEntry: string, ui: ReactElement) {
   const theme = createTheme();

app/src/components/NavBar.test.tsx → app/src/layouts/NavBar.test.tsx

@@ -21,7 +21,7 @@ vi.mock('react-router-dom', async () => {
   };
 });
 
-import { NavBar } from 'src/components/NavBar';
+import { NavBar } from 'src/layouts/NavBar';
 
 describe('NavBar', () => {
   beforeEach(() => {

app/src/components/RootLayout.test.tsx → app/src/layouts/RootLayout.test.tsx

@@ -38,13 +38,13 @@ vi.mock('src/hooks/useLayoutContext', async () => {
   };
 });
 
-vi.mock('src/components/MastheadRule', () => ({
+vi.mock('src/layouts/MastheadRule', () => ({
   MastheadRule: () => <div data-testid="masthead" />,
 }));
-vi.mock('src/components/NavBar', () => ({ NavBar: () => <div data-testid="navbar" /> }));
-vi.mock('src/components/Footer', () => ({ Footer: () => <div data-testid="footer" /> }));
+vi.mock('src/layouts/NavBar', () => ({ NavBar: () => <div data-testid="navbar" /> }));
+vi.mock('src/layouts/Footer', () => ({ Footer: () => <div data-testid="footer" /> }));
 
-import { RootLayout } from 'src/components/RootLayout';
+import { RootLayout } from 'src/layouts/RootLayout';
 
 const theme = createTheme();
 

app/src/components/RootLayout.tsx → app/src/layouts/RootLayout.tsx

@@ -6,12 +6,12 @@ import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 
 import { FeedbackWidget } from 'src/components/FeedbackWidget';
-import { Footer } from 'src/components/Footer';
-import { MastheadRule } from 'src/components/MastheadRule';
-import { NavBar } from 'src/components/NavBar';
 import { useAnalytics } from 'src/hooks';
 import { setAnalyticsAmbientProps } from 'src/hooks/useAnalytics';
 import { useTheme } from 'src/hooks/useLayoutContext';
+import { Footer } from 'src/layouts/Footer';
+import { MastheadRule } from 'src/layouts/MastheadRule';
+import { NavBar } from 'src/layouts/NavBar';
 import { paths } from 'src/routes/paths';
 
 const containerSx = {

app/src/layouts/index.ts

@@ -0,0 +1,6 @@
+export * from 'src/layouts/BareLayout';
+export * from 'src/layouts/Footer';
+export * from 'src/layouts/Layout';
+export * from 'src/layouts/MastheadRule';
+export * from 'src/layouts/NavBar';
+export * from 'src/layouts/RootLayout';

app/src/pages/LandingPage.test.tsx

@@ -49,11 +49,11 @@ vi.mock('react-router-dom', async () => {
   return { ...actual, useNavigate: () => navigate };
 });
 
-vi.mock('src/components/HeroSection', () => ({
+vi.mock('src/sections/landing/HeroSection', () => ({
   HeroSection: () => <div data-testid="hero" />,
 }));
 
-vi.mock('src/components/NumbersStrip', () => ({
+vi.mock('src/sections/landing/NumbersStrip', () => ({
   NumbersStrip: () => <div data-testid="numbers" />,
 }));
 

app/src/pages/LandingPage.tsx

@@ -5,16 +5,16 @@ import { Link as RouterLink, useNavigate } from 'react-router-dom';
 
 import Box from '@mui/material/Box';
 
-import { HeroSection } from 'src/components/HeroSection';
-import { LibrariesSection } from 'src/components/LibrariesSection';
-import { NumbersStrip } from 'src/components/NumbersStrip';
 import { SectionHeader } from 'src/components/SectionHeader';
 import { GITHUB_URL } from 'src/constants';
 import { useAnalytics, useAppData } from 'src/hooks';
 import { type FeaturedImpl, useFeaturedSpecs } from 'src/hooks/useFeaturedSpecs';
 import { useTheme } from 'src/hooks/useLayoutContext';
 import { usePlotOfTheDay } from 'src/hooks/usePlotOfTheDay';
 import { paths, specPath } from 'src/routes/paths';
+import { HeroSection } from 'src/sections/landing/HeroSection';
+import { LibrariesSection } from 'src/sections/landing/LibrariesSection';
+import { NumbersStrip } from 'src/sections/landing/NumbersStrip';
 import { colors, semanticColors, typography } from 'src/theme';
 import { buildSrcSet, getFallbackSrc } from 'src/utils/responsiveImage';
 import { selectPreviewUrl } from 'src/utils/themedPreview';

app/src/pages/LibrariesPage.tsx

@@ -6,11 +6,11 @@ import { useNavigate } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 
-import { LibraryCard } from 'src/components/LibraryCard';
 import { SectionHeader } from 'src/components/SectionHeader';
 import { LIB_TO_FRAMEWORK, LIBRARIES } from 'src/constants';
 import { useAnalytics, useAppData } from 'src/hooks';
 import { paths } from 'src/routes/paths';
+import { LibraryCard } from 'src/sections/libraries/LibraryCard';
 import { colors, textStyle, typography } from 'src/theme';
 
 // Framework filter (per library-expansion.md §6: "all JavaScript libs" vs

app/src/pages/PlotsPage.test.tsx

@@ -42,15 +42,15 @@ vi.mock('react-helmet-async', () => ({
   ),
 }));
 
-vi.mock('src/components/FilterBar', () => ({
+vi.mock('src/sections/plots-gallery/FilterBar', () => ({
   FilterBar: () => <div data-testid="filterbar">FilterBar</div>,
 }));
 
-vi.mock('src/components/ImagesGrid', () => ({
+vi.mock('src/sections/plots-gallery/ImagesGrid', () => ({
   ImagesGrid: () => <div data-testid="images-grid">ImagesGrid</div>,
 }));
 
-vi.mock('src/components/Footer', () => ({
+vi.mock('src/layouts/Footer', () => ({
   Footer: () => <div data-testid="footer">Footer</div>,
 }));
 

app/src/pages/PlotsPage.tsx

@@ -8,12 +8,12 @@ import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Fab from '@mui/material/Fab';
 
-import { FilterBar } from 'src/components/FilterBar';
-import { ImagesGrid } from 'src/components/ImagesGrid';
 import type { ImageSize } from 'src/constants';
 import { isFiltersEmpty, useAnalytics, useFilterState, useInfiniteScroll } from 'src/hooks';
 import { useAppData, useHomeState } from 'src/hooks';
 import { specPath } from 'src/routes/paths';
+import { FilterBar } from 'src/sections/plots-gallery/FilterBar';
+import { ImagesGrid } from 'src/sections/plots-gallery/ImagesGrid';
 import { colors } from 'src/theme';
 import type { PlotImage } from 'src/types';
 

app/src/pages/SpecPage.test.tsx

@@ -41,15 +41,15 @@ vi.mock('src/hooks', () => ({
 }));
 
 // Mock lazy-loaded components as simple divs
-vi.mock('src/components/SpecTabs', () => ({
+vi.mock('src/sections/spec-detail/SpecTabs', () => ({
   SpecTabs: () => <div data-testid="spec-tabs">SpecTabs</div>,
 }));
 
-vi.mock('src/components/SpecOverview', () => ({
+vi.mock('src/sections/spec-detail/SpecOverview', () => ({
   SpecOverview: () => <div data-testid="spec-overview">SpecOverview</div>,
 }));
 
-vi.mock('src/components/SpecDetailView', () => ({
+vi.mock('src/sections/spec-detail/SpecDetailView', () => ({
   SpecDetailView: () => <div data-testid="spec-detail-view">SpecDetailView</div>,
 }));
 

app/src/pages/SpecPage.tsx

@@ -9,22 +9,24 @@ import Button from '@mui/material/Button';
 import Skeleton from '@mui/material/Skeleton';
 import Typography from '@mui/material/Typography';
 
-import { LibraryPills } from 'src/components/LibraryPills';
-import { RelatedSpecs } from 'src/components/RelatedSpecs';
 import { GITHUB_URL, LANG_DISPLAY } from 'src/constants';
 import { useAnalytics, useCodeFetch } from 'src/hooks';
 import { useAppData } from 'src/hooks';
 import { ApiError, apiGet, apiUrl, endpoints } from 'src/lib/api';
 import { NotFoundPage } from 'src/pages/NotFoundPage';
 import { paths, specPath } from 'src/routes/paths';
+import { LibraryPills } from 'src/sections/spec-detail/LibraryPills';
+import { RelatedSpecs } from 'src/sections/spec-detail/RelatedSpecs';
 import { colors, fontSize, semanticColors, typography } from 'src/theme';
 
-const SpecTabs = lazy(() => import('src/components/SpecTabs').then(m => ({ default: m.SpecTabs })));
+const SpecTabs = lazy(() =>
+  import('src/sections/spec-detail/SpecTabs').then(m => ({ default: m.SpecTabs }))
+);
 const SpecOverview = lazy(() =>
-  import('src/components/SpecOverview').then(m => ({ default: m.SpecOverview }))
+  import('src/sections/spec-detail/SpecOverview').then(m => ({ default: m.SpecOverview }))
 );
 const SpecDetailView = lazy(() =>
-  import('src/components/SpecDetailView').then(m => ({ default: m.SpecDetailView }))
+  import('src/sections/spec-detail/SpecDetailView').then(m => ({ default: m.SpecDetailView }))
 );
 import type { Implementation } from 'src/types';
 

app/src/routes/index.tsx

@@ -5,9 +5,9 @@ import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 
 import { ErrorBoundary } from 'src/components/ErrorBoundary';
-import { AppDataProvider } from 'src/components/Layout';
-import { RootLayout } from 'src/components/RootLayout';
 import { RouteErrorBoundary } from 'src/components/RouteErrorBoundary';
+import { AppDataProvider } from 'src/layouts/Layout';
+import { RootLayout } from 'src/layouts/RootLayout';
 import { NotFoundPage } from 'src/pages/NotFoundPage';
 
 const LazyFallback = () => (

app/src/components/HeroSection.test.tsx → app/src/sections/landing/HeroSection.test.tsx

@@ -12,15 +12,15 @@ vi.mock('src/hooks', async () => {
   };
 });
 
-vi.mock('src/components/PlotOfTheDayTerminal', () => ({
+vi.mock('src/sections/landing/PlotOfTheDayTerminal', () => ({
   PlotOfTheDayTerminal: () => <div data-testid="potd-terminal" />,
 }));
 
-vi.mock('src/components/TypewriterText', () => ({
+vi.mock('src/sections/landing/TypewriterText', () => ({
   TypewriterText: () => <div data-testid="typewriter" />,
 }));
 
-import { HeroSection } from 'src/components/HeroSection';
+import { HeroSection } from 'src/sections/landing/HeroSection';
 
 describe('HeroSection', () => {
   beforeEach(() => {

app/src/components/HeroSection.tsx → app/src/sections/landing/HeroSection.tsx

@@ -2,11 +2,11 @@ import { Link as RouterLink } from 'react-router-dom';
 
 import Box from '@mui/material/Box';
 
-import { PlotOfTheDayTerminal } from 'src/components/PlotOfTheDayTerminal';
-import { TypewriterText } from 'src/components/TypewriterText';
 import { useAnalytics } from 'src/hooks';
 import type { PlotOfTheDayData } from 'src/hooks/usePlotOfTheDay';
 import { paths } from 'src/routes/paths';
+import { PlotOfTheDayTerminal } from 'src/sections/landing/PlotOfTheDayTerminal';
+import { TypewriterText } from 'src/sections/landing/TypewriterText';
 import { colors, typography } from 'src/theme';
 
 interface HeroSectionProps {

app/src/components/LibrariesSection.tsx → app/src/sections/landing/LibrariesSection.tsx

@@ -1,8 +1,8 @@
 import Box from '@mui/material/Box';
 
-import { LibraryCard } from 'src/components/LibraryCard';
 import { SectionHeader } from 'src/components/SectionHeader';
 import { LIBRARIES } from 'src/constants';
+import { LibraryCard } from 'src/sections/libraries/LibraryCard';
 import type { LibraryInfo } from 'src/types';
 
 interface LibrariesSectionProps {

app/src/components/PlotOfTheDay.test.tsx → app/src/sections/landing/PlotOfTheDay.test.tsx

@@ -12,7 +12,7 @@ vi.mock('src/hooks', async () => {
   };
 });
 
-import { PlotOfTheDay } from 'src/components/PlotOfTheDay';
+import { PlotOfTheDay } from 'src/sections/landing/PlotOfTheDay';
 
 // Mock sessionStorage
 const sessionStorageMock: Record<string, string> = {};

app/src/components/PlotOfTheDayTerminal.test.tsx → app/src/sections/landing/PlotOfTheDayTerminal.test.tsx

@@ -19,7 +19,7 @@ vi.mock('src/hooks/useLayoutContext', async () => {
   return { ...actual, useTheme: () => ({ isDark: false, toggle: vi.fn() }) };
 });
 
-import { PlotOfTheDayTerminal } from 'src/components/PlotOfTheDayTerminal';
+import { PlotOfTheDayTerminal } from 'src/sections/landing/PlotOfTheDayTerminal';
 
 const potd = {
   spec_id: 'scatter-basic',

app/src/components/ScienceNote.tsx → app/src/sections/landing/ScienceNote.tsx

@@ -2,8 +2,8 @@ import { Link as RouterLink } from 'react-router-dom';
 
 import Box from '@mui/material/Box';
 
-import { PaletteStrip } from 'src/components/PaletteStrip';
 import { paths } from 'src/routes/paths';
+import { PaletteStrip } from 'src/sections/landing/PaletteStrip';
 import { colors, typography } from 'src/theme';
 
 export function ScienceNote() {

app/src/sections/landing/index.ts

@@ -0,0 +1,8 @@
+export * from 'src/sections/landing/HeroSection';
+export * from 'src/sections/landing/LibrariesSection';
+export * from 'src/sections/landing/NumbersStrip';
+export * from 'src/sections/landing/PaletteStrip';
+export * from 'src/sections/landing/PlotOfTheDay';
+export * from 'src/sections/landing/PlotOfTheDayTerminal';
+export * from 'src/sections/landing/ScienceNote';
+export * from 'src/sections/landing/TypewriterText';

app/src/components/LibraryCard.test.tsx → app/src/sections/libraries/LibraryCard.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { LibraryCard } from 'src/components/LibraryCard';
+import { LibraryCard } from 'src/sections/libraries/LibraryCard';
 import { render, screen, userEvent } from 'src/test-utils';
 
 describe('LibraryCard', () => {

app/src/sections/libraries/index.ts

@@ -0,0 +1 @@
+export * from 'src/sections/libraries/LibraryCard';

app/src/components/FilterBar.test.tsx → app/src/sections/plots-gallery/FilterBar.test.tsx

@@ -12,7 +12,7 @@ vi.mock('src/utils', () => ({
   getSearchResults: vi.fn(() => []),
 }));
 
-import { FilterBar } from 'src/components/FilterBar';
+import { FilterBar } from 'src/sections/plots-gallery/FilterBar';
 
 // ResizeObserver polyfill
 class MockResizeObserver {

app/src/components/FilterBar.tsx → app/src/sections/plots-gallery/FilterBar.tsx

@@ -15,8 +15,8 @@ import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
-import { ToolbarActions } from 'src/components/ToolbarActions';
 import type { ImageSize } from 'src/constants';
+import { ToolbarActions } from 'src/sections/plots-gallery/ToolbarActions';
 import { colors, fontSize, semanticColors, typography } from 'src/theme';
 import type { ActiveFilters, FilterCategory, FilterCounts } from 'src/types';
 import { FILTER_CATEGORIES, FILTER_LABELS, FILTER_TOOLTIPS } from 'src/types';

app/src/components/ImageCard.test.tsx → app/src/sections/plots-gallery/ImageCard.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { ImageCard } from 'src/components/ImageCard';
+import { ImageCard } from 'src/sections/plots-gallery/ImageCard';
 import { render, screen } from 'src/test-utils';
 import type { PlotImage } from 'src/types';
 

app/src/components/ImagesGrid.test.tsx → app/src/sections/plots-gallery/ImagesGrid.test.tsx

@@ -2,13 +2,13 @@ import { createRef } from 'react';
 
 import { describe, expect, it, type Mock, vi } from 'vitest';
 
-import { ImagesGrid } from 'src/components/ImagesGrid';
 import type { ImageSize } from 'src/constants';
+import { ImagesGrid } from 'src/sections/plots-gallery/ImagesGrid';
 import { render, screen } from 'src/test-utils';
 import type { LibraryInfo, PlotImage, SpecInfo } from 'src/types';
 
 // Mock child components to isolate ImagesGrid
-vi.mock('src/components/ImageCard', () => ({
+vi.mock('src/sections/plots-gallery/ImageCard', () => ({
   ImageCard: ({ image, index }: { image: PlotImage; index: number }) => (
     <div data-testid={`image-card-${index}`}>{image.library}</div>
   ),

app/src/components/ImagesGrid.tsx → app/src/sections/plots-gallery/ImagesGrid.tsx

@@ -4,9 +4,9 @@ import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 
-import { ImageCard } from 'src/components/ImageCard';
 import { LoaderSpinner } from 'src/components/LoaderSpinner';
 import type { ImageSize } from 'src/constants';
+import { ImageCard } from 'src/sections/plots-gallery/ImageCard';
 import type { LanguageInfo, LibraryInfo, PlotImage, SpecInfo } from 'src/types';
 
 interface ImagesGridProps {

app/src/components/ToolbarActions.test.tsx → app/src/sections/plots-gallery/ToolbarActions.test.tsx

@@ -1,6 +1,10 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { GridSizeToggle, PlotsLink, ToolbarActions } from 'src/components/ToolbarActions';
+import {
+  GridSizeToggle,
+  PlotsLink,
+  ToolbarActions,
+} from 'src/sections/plots-gallery/ToolbarActions';
 import { render, screen, userEvent } from 'src/test-utils';
 
 describe('PlotsLink', () => {

app/src/sections/plots-gallery/index.ts

@@ -0,0 +1,4 @@
+export * from 'src/sections/plots-gallery/FilterBar';
+export * from 'src/sections/plots-gallery/ImageCard';
+export * from 'src/sections/plots-gallery/ImagesGrid';
+export * from 'src/sections/plots-gallery/ToolbarActions';