feat: login page, 401 interceptor, nav sign-out

frontend/src/App.tsx

@@ -4,6 +4,8 @@ import Dashboard from './pages/Dashboard'
 import MealDetail from './pages/MealDetail'
 import Pantry from './pages/Pantry'
 import ShoppingList from './pages/ShoppingList'
+import Login from './pages/Login'
+import { mealPlannerApi } from './api'
 
 const queryClient = new QueryClient()
 
@@ -26,6 +28,17 @@ function App() {
                     Shopping List
                   </Link>
                 </div>
+                <div className="flex items-center">
+                  <button
+                    onClick={async () => {
+                      await mealPlannerApi.auth.logout().catch(() => {})
+                      window.location.href = '/login'
+                    }}
+                    className="text-sm text-gray-500 hover:text-gray-900"
+                  >
+                    Sign out
+                  </button>
+                </div>
               </div>
             </div>
           </nav>
@@ -35,6 +48,7 @@ function App() {
               <Route path="/meals/:id" element={<MealDetail />} />
               <Route path="/pantry" element={<Pantry />} />
               <Route path="/shopping-list" element={<ShoppingList />} />
+              <Route path="/login" element={<Login />} />
             </Routes>
           </main>
         </div>