feat: wire editor route, sidebar, mobile nav, and i18n

apps/web/src/App.tsx

@@ -28,6 +28,9 @@ const PrivacyPolicyPage = lazy(() =>
 const AnalyticsConsentPage = lazy(() =>
   import("./pages/analytics-consent-page").then((m) => ({ default: m.AnalyticsConsentPage })),
 );
+const EditorPage = lazy(() =>
+  import("./pages/editor-page").then((m) => ({ default: m.EditorPage })),
+);
 const ToolPage = lazy(() => import("./pages/tool-page").then((m) => ({ default: m.ToolPage })));
 
 class ErrorBoundary extends Component<
@@ -222,6 +225,7 @@ export function App() {
                 <Route path="/color-channels" element={<Navigate to="/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 />} />
                 <Route path="/" element={<HomePage />} />
               </Routes>

apps/web/src/components/layout/app-layout.tsx

@@ -1,4 +1,12 @@
-import { FolderOpen, LayoutGrid, Menu, Settings as SettingsIcon, Workflow, X } from "lucide-react";
+import {
+  FolderOpen,
+  LayoutGrid,
+  Menu,
+  PenTool,
+  Settings as SettingsIcon,
+  Workflow,
+  X,
+} from "lucide-react";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { useMobile } from "@/hooks/use-mobile";
@@ -153,6 +161,7 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
         <nav className="fixed bottom-0 left-0 right-0 z-30 bg-background/95 backdrop-blur-sm border-t border-border flex items-center justify-around px-2 py-1.5">
           <MobileNavItem icon={LayoutGrid} label="Tools" href="/" />
           <MobileNavItem icon={Workflow} label="Automate" href="/automate" />
+          <MobileNavItem icon={PenTool} label="Editor" href="/editor" />
           <MobileNavItem icon={FolderOpen} label="Files" href="/files" />
           <button
             type="button"

apps/web/src/components/layout/sidebar.tsx

@@ -1,5 +1,13 @@
 import type { LucideIcon } from "lucide-react";
-import { FolderOpen, Grid3x3, HelpCircle, LayoutGrid, Settings, Workflow } from "lucide-react";
+import {
+  FolderOpen,
+  Grid3x3,
+  HelpCircle,
+  LayoutGrid,
+  PenTool,
+  Settings,
+  Workflow,
+} from "lucide-react";
 import { Link, useLocation } from "react-router-dom";
 import { cn } from "@/lib/utils";
 import { OtterLogo } from "../common/otter-logo";
@@ -14,6 +22,7 @@ const topItems: SidebarItem[] = [
   { icon: LayoutGrid, label: "Tools", href: "/" },
   { icon: Grid3x3, label: "Grid", href: "/fullscreen" },
   { icon: Workflow, label: "Automate", href: "/automate" },
+  { icon: PenTool, label: "Editor", href: "/editor" },
   { icon: FolderOpen, label: "Files", href: "/files" },
 ];
 

packages/shared/src/i18n/en.ts

@@ -311,6 +311,7 @@ export const en = {
     tools: "Tools",
     reader: "Reader",
     automate: "Automate",
+    editor: "Editor",
     files: "Files",
     help: "Help",
     settings: "Settings",