feat: Phase 7 - Router & App Shell Integration

- Wire up react-router-dom v6 Routes in App.tsx
- / redirects to /news/1
- /news/:page, /newest/:page, /show/:page, /ask/:page, /jobs/:page → FeedPage with feedType prop
- /item/:id → ItemDetailsPage, /user/:id → UserPage
- Theme class on root div from SettingsContext (dynamic: default/night/amoledblack)
- SettingsProvider wraps entire app
- GA tracking via useLocation hook on route changes
- Header + Routes (Outlet equivalent) + Footer layout

Co-Authored-By: Vibha  Seshadri <vibha.seshadri@cognition.ai>

Author: devin-ai-integration[bot]

src/App.tsx

@@ -1,23 +1,57 @@
-import { BrowserRouter } from 'react-router-dom';
+import { useEffect } from 'react';
+import { BrowserRouter, Routes, Route, Navigate, useLocation } from 'react-router-dom';
+import { SettingsProvider, useSettings } from './contexts/SettingsContext';
+import Header from './components/layout/Header';
+import Footer from './components/layout/Footer';
+import FeedPage from './pages/FeedPage';
+import ItemDetailsPage from './pages/ItemDetailsPage';
+import UserPage from './pages/UserPage';
 import './App.scss';
 
+declare function ga(...args: unknown[]): void;
+
+function GATracker() {
+    const location = useLocation();
+    useEffect(() => {
+        if (typeof ga !== 'undefined') {
+            ga('set', 'page', location.pathname);
+            ga('send', 'pageview');
+        }
+    }, [location]);
+    return null;
+}
+
+function AppShell() {
+    const { settings } = useSettings();
+
+    return (
+        <div className={settings.theme}>
+            <div className="body-cover"></div>
+            <div className="wrapper">
+                <Header />
+                <Routes>
+                    <Route path="/" element={<Navigate to="/news/1" replace />} />
+                    <Route path="/news/:page" element={<FeedPage feedType="news" />} />
+                    <Route path="/newest/:page" element={<FeedPage feedType="newest" />} />
+                    <Route path="/show/:page" element={<FeedPage feedType="show" />} />
+                    <Route path="/ask/:page" element={<FeedPage feedType="ask" />} />
+                    <Route path="/jobs/:page" element={<FeedPage feedType="jobs" />} />
+                    <Route path="/item/:id" element={<ItemDetailsPage />} />
+                    <Route path="/user/:id" element={<UserPage />} />
+                </Routes>
+                <Footer />
+            </div>
+        </div>
+    );
+}
+
 function App() {
     return (
         <BrowserRouter>
-            <div className="default">
-                <div className="body-cover"></div>
-                <div className="wrapper">
-                    <header id="header">
-                        <h1>Hacker News</h1>
-                    </header>
-                    <main>
-                        <p>React 18 + Vite app shell loaded successfully.</p>
-                    </main>
-                    <footer id="footer">
-                        <p>Built with React</p>
-                    </footer>
-                </div>
-            </div>
+            <SettingsProvider>
+                <GATracker />
+                <AppShell />
+            </SettingsProvider>
         </BrowserRouter>
     );
 }