fix: replace editor PenTool icon with image-edit icon

Custom SVG showing a landscape image frame with a pencil overlay,
clearly communicating "edit image" instead of the vector pen tool
which read more as Illustrator than Photoshop.

apps/web/src/components/common/image-edit-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+
+export function ImageEditIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M12 20H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7" />
+      <circle cx="9" cy="9" r="2" />
+      <path d="m3 16 4-4 3 3 4-4" />
+      <path d="M17 22l-2.5-2.5L20 14l2.5 2.5z" />
+      <path d="m22 16.5-2.5-2.5" />
+    </svg>
+  );
+}

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

@@ -1,18 +1,11 @@
-import {
-  FolderOpen,
-  LayoutGrid,
-  Menu,
-  PenTool,
-  Settings as SettingsIcon,
-  Workflow,
-  X,
-} from "lucide-react";
+import { FolderOpen, LayoutGrid, Menu, Settings as SettingsIcon, Workflow, X } from "lucide-react";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import { useMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
 import { useConnectionStore } from "@/stores/connection-store";
 import { Dropzone } from "../common/dropzone";
+import { ImageEditIcon } from "../common/image-edit-icon";
 import { OtterLogo } from "../common/otter-logo";
 import { HelpDialog } from "../help/help-dialog";
 import { SettingsDialog } from "../settings/settings-dialog";
@@ -136,7 +129,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={ImageEditIcon} label="Editor" href="/editor" />
           <MobileNavItem icon={FolderOpen} label="Files" href="/files" />
           <button
             type="button"

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

@@ -1,19 +1,12 @@
-import type { LucideIcon } from "lucide-react";
-import {
-  FolderOpen,
-  Grid3x3,
-  HelpCircle,
-  LayoutGrid,
-  PenTool,
-  Settings,
-  Workflow,
-} from "lucide-react";
+import { FolderOpen, Grid3x3, HelpCircle, LayoutGrid, Settings, Workflow } from "lucide-react";
+import type { ComponentType, SVGProps } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { cn } from "@/lib/utils";
+import { ImageEditIcon } from "../common/image-edit-icon";
 import { OtterLogo } from "../common/otter-logo";
 
 interface SidebarItem {
-  icon: LucideIcon;
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
   label: string;
   href?: string;
 }
@@ -22,7 +15,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: ImageEditIcon, label: "Editor", href: "/editor" },
   { icon: FolderOpen, label: "Files", href: "/files" },
 ];