feat: modality-based URLs (/image/resize, /video/compress-video)

Tool routes now include the modality prefix: /image/crop, /video/trim-video,
/audio/convert-audio, /document/merge-pdf, /data/csv-json. Old URLs
(e.g. /resize) redirect to the new modality-prefixed path automatically.

Routes are computed by prepending MODALITY_URL_SLUG to each tool's route
in the TOOLS array at module init. The App.tsx route changed from
/:toolId to /:modality/:toolId, with a LegacyToolRedirect fallback.

apps/web/src/App.tsx

@@ -1,6 +1,6 @@
-import { APP_VERSION, en, shouldShowConsent } from "@snapotter/shared";
+import { APP_VERSION, TOOLS, en, shouldShowConsent } from "@snapotter/shared";
 import { Component, type ErrorInfo, lazy, type ReactNode, Suspense, useEffect } from "react";
-import { BrowserRouter, Navigate, Route, Routes, useLocation } from "react-router-dom";
+import { BrowserRouter, Navigate, Route, Routes, useLocation, useParams } from "react-router-dom";
 import { Toaster, toast } from "sonner";
 import { ConnectionMonitor } from "./components/common/connection-monitor";
 import { KeyboardShortcutProvider } from "./components/common/keyboard-shortcut-provider";
@@ -77,6 +77,13 @@ class ErrorBoundary extends Component<
   }
 }
 
+function LegacyToolRedirect() {
+  const { toolId } = useParams<{ toolId: string }>();
+  const tool = TOOLS.find((t) => t.id === toolId);
+  if (tool) return <Navigate to={tool.route} replace />;
+  return <Navigate to="/" replace />;
+}
+
 function AuthGuard({ children }: { children: React.ReactNode }) {
   const {
     loading,
@@ -239,17 +246,26 @@ export function App() {
                   {/* Redirects: old color tools consolidated into adjust-colors */}
                   <Route
                     path="/brightness-contrast"
-                    element={<Navigate to="/adjust-colors" replace />}
+                    element={<Navigate to="/image/adjust-colors" replace />}
+                  />
+                  <Route
+                    path="/saturation"
+                    element={<Navigate to="/image/adjust-colors" replace />}
                   />
-                  <Route path="/saturation" element={<Navigate to="/adjust-colors" replace />} />
                   <Route
                     path="/color-channels"
-                    element={<Navigate to="/adjust-colors" replace />}
+                    element={<Navigate to="/image/adjust-colors" replace />}
+                  />
+                  <Route
+                    path="/color-effects"
+                    element={<Navigate to="/image/adjust-colors" replace />}
                   />
-                  <Route path="/color-effects" element={<Navigate to="/adjust-colors" replace />} />
                   <Route path="/analytics-consent" element={<AnalyticsConsentPage />} />
                   <Route path="/editor" element={<EditorPage />} />
-                  <Route path="/:toolId" element={<ToolPage />} />
+                  {/* Modality-prefixed tool routes */}
+                  <Route path="/:modality/:toolId" element={<ToolPage />} />
+                  {/* Legacy: redirect old /:toolId URLs to /:modality/:toolId */}
+                  <Route path="/:toolId" element={<LegacyToolRedirect />} />
                   <Route path="/" element={<HomePage />} />
                 </Routes>
               </Suspense>