LabelingSystem/web/apps/lq_label/src/app/app.tsx

import { Route, Routes } from 'react-router-dom';
import { Layout } from '../components/layout';
import { ThemeProvider } from '../components/theme-provider';
import {
  HomeView,
  NotFoundView,
  ProjectsView,
  ProjectEditView,
  TasksView,
  AnnotationsView,
  AnnotationView,
} from '../views';
import { EditorTest } from '../views/editor-test';
import { ToastContainer } from '../components/toast-container';
import { ErrorBoundary } from '../components/error-boundary';

/**
 * Annotation Platform Application
 * 
 * This is the main application component for the annotation platform.
 * It provides routing and integrates with Layout component for
 * backend management UI style.
 * 
 * Requirements: 4.1, 4.2, 4.8, 7.3, 7.6, 10.1, 10.3, 10.5, 10.7
 */
export function App() {
  return (
    <ThemeProvider>
      <ErrorBoundary>
        <Layout>
          <Routes>
            {/* Home Route */}
            <Route path="/" element={<HomeView />} />

            {/* Editor Test Route */}
            <Route path="/editor-test" element={<EditorTest />} />

            {/* Projects Routes */}
            <Route path="/projects" element={<ProjectsView />} />
            <Route path="/projects/:id/edit" element={<ProjectEditView />} />

            {/* Tasks Routes */}
            <Route path="/tasks" element={<TasksView />} />
            <Route path="/tasks/:id/annotate" element={<AnnotationView />} />

            {/* Annotations Routes */}
            <Route path="/annotations" element={<AnnotationsView />} />

            {/* 404 Not Found */}
            <Route path="*" element={<NotFoundView />} />
          </Routes>
        </Layout>
        
        {/* Global Toast Container */}
        <ToastContainer />
      </ErrorBoundary>
    </ThemeProvider>
  );
}

export default App;