From 1d7a7188bf4bcec6ff264c04473887ab480da0cd Mon Sep 17 00:00:00 2001
From: SnapOtter <snapotter.hq@gmail.com>
Date: Mon, 11 May 2026 17:20:14 +0800
Subject: [PATCH] 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.
---
 .../src/components/common/image-edit-icon.tsx | 22 +++++++++++++++++++
 apps/web/src/components/layout/app-layout.tsx | 13 +++--------
 apps/web/src/components/layout/sidebar.tsx    | 17 +++++---------
 3 files changed, 30 insertions(+), 22 deletions(-)
 create mode 100644 apps/web/src/components/common/image-edit-icon.tsx

diff --git a/apps/web/src/components/common/image-edit-icon.tsx b/apps/web/src/components/common/image-edit-icon.tsx
new file mode 100644
index 00000000..2237e44b
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/web/src/components/layout/app-layout.tsx b/apps/web/src/components/layout/app-layout.tsx
index e5d29851..c8d8020c 100644
--- a/apps/web/src/components/layout/app-layout.tsx
+++ b/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"
diff --git a/apps/web/src/components/layout/sidebar.tsx b/apps/web/src/components/layout/sidebar.tsx
index 32c03d79..33372168 100644
--- a/apps/web/src/components/layout/sidebar.tsx
+++ b/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" },
 ];