refactor(icons): replace 'Pen' icon with 'Pencil' across various components for consistency

This commit is contained in:
Anish Sarkar 2026-04-24 02:33:57 +05:30
parent 1e9db6f26f
commit 17f9ee4b59
30 changed files with 62 additions and 62 deletions

View file

@ -1,7 +1,7 @@
"use client";
import { useAtomValue } from "jotai";
import { ArrowUp, ChevronDown, ClipboardCopy, Download, Info, Pen } from "lucide-react";
import { ArrowUp, ChevronDown, ClipboardCopy, Download, Info, Pencil } from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react";
import { toast } from "sonner";
import { z } from "zod";
@ -241,7 +241,7 @@ export function MemoryContent() {
onClick={openInput}
className="absolute bottom-3 right-3 z-10 h-[54px] w-[54px] rounded-full border bg-muted/60 backdrop-blur-sm shadow-sm"
>
<Pen className="!h-5 !w-5" />
<Pencil className="!h-5 !w-5" />
</Button>
)}
</div>

View file

@ -1,7 +1,7 @@
"use client";
import { useAtomValue } from "jotai";
import { AlertTriangle, Globe, Lock, PenLine, Sparkles, Trash2 } from "lucide-react";
import { AlertTriangle, Globe, Lock, Pencil, Sparkles, Trash2 } from "lucide-react";
import { useCallback, useState } from "react";
import { toast } from "sonner";
import {
@ -308,7 +308,7 @@ export function PromptsContent() {
className="size-7"
onClick={() => handleEdit(prompt)}
>
<PenLine className="size-3.5" />
<Pencil className="size-3.5" />
</Button>
<Button
variant="ghost"

View file

@ -1,6 +1,6 @@
import { ActionBarPrimitive, AuiIf, MessagePrimitive, useAuiState } from "@assistant-ui/react";
import { useAtomValue } from "jotai";
import { CheckIcon, CopyIcon, FileText, Pen } from "lucide-react";
import { CheckIcon, CopyIcon, FileText, Pencil } from "lucide-react";
import Image from "next/image";
import { type FC, useState } from "react";
import { currentThreadAtom } from "@/atoms/chat/current-thread.atom";
@ -136,7 +136,7 @@ const UserActionBar: FC = () => {
{canEdit && (
<ActionBarPrimitive.Edit asChild>
<TooltipIconButton tooltip="Edit" className="aui-user-action-edit">
<Pen />
<Pencil />
</TooltipIconButton>
</ActionBarPrimitive.Edit>
)}

View file

@ -1,6 +1,6 @@
"use client";
import { MoreHorizontal, PenLine, Trash2 } from "lucide-react";
import { MoreHorizontal, Pencil, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
@ -29,7 +29,7 @@ export function CommentActions({ canEdit, canDelete, onEdit, onDelete }: Comment
<DropdownMenuContent align="end">
{canEdit && (
<DropdownMenuItem onClick={onEdit}>
<PenLine className="mr-2 size-4" />
<Pencil className="mr-2 size-4" />
Edit
</DropdownMenuItem>
)}

View file

@ -8,7 +8,7 @@ import {
History,
MoreHorizontal,
Move,
PenLine,
Pencil,
Trash2,
} from "lucide-react";
import React, { useCallback, useRef, useState } from "react";
@ -266,7 +266,7 @@ export const DocumentNode = React.memo(function DocumentNode({
</DropdownMenuItem>
{isEditable && (
<DropdownMenuItem onClick={() => onEdit(doc)}>
<PenLine className="mr-2 h-4 w-4" />
<Pencil className="mr-2 h-4 w-4" />
Edit
</DropdownMenuItem>
)}
@ -309,7 +309,7 @@ export const DocumentNode = React.memo(function DocumentNode({
</ContextMenuItem>
{isEditable && (
<ContextMenuItem onClick={() => onEdit(doc)}>
<PenLine className="mr-2 h-4 w-4" />
<Pencil className="mr-2 h-4 w-4" />
Edit
</ContextMenuItem>
)}

View file

@ -12,7 +12,7 @@ import {
FolderPlus,
MoreHorizontal,
Move,
PenLine,
Pencil,
RefreshCw,
Trash2,
} from "lucide-react";
@ -399,7 +399,7 @@ export const FolderNode = React.memo(function FolderNode({
startRename();
}}
>
<PenLine className="mr-2 h-4 w-4" />
<Pencil className="mr-2 h-4 w-4" />
Rename
</DropdownMenuItem>
<DropdownMenuItem
@ -456,7 +456,7 @@ export const FolderNode = React.memo(function FolderNode({
New subfolder
</ContextMenuItem>
<ContextMenuItem onClick={() => startRename()}>
<PenLine className="mr-2 h-4 w-4" />
<Pencil className="mr-2 h-4 w-4" />
Rename
</ContextMenuItem>
<ContextMenuItem onClick={() => onMove(folder)}>

View file

@ -8,7 +8,7 @@ import {
ChevronLeft,
MessageCircleMore,
MoreHorizontal,
PenLine,
Pencil,
RotateCcwIcon,
Search,
Trash2,
@ -429,7 +429,7 @@ export function AllPrivateChatsSidebarContent({
<DropdownMenuItem
onClick={() => handleStartRename(thread.id, thread.title || "New Chat")}
>
<PenLine className="mr-2 h-4 w-4" />
<Pencil className="mr-2 h-4 w-4" />
<span>{t("rename") || "Rename"}</span>
</DropdownMenuItem>
)}

View file

@ -8,7 +8,7 @@ import {
ChevronLeft,
MessageCircleMore,
MoreHorizontal,
PenLine,
Pencil,
RotateCcwIcon,
Search,
Trash2,
@ -428,7 +428,7 @@ export function AllSharedChatsSidebarContent({
<DropdownMenuItem
onClick={() => handleStartRename(thread.id, thread.title || "New Chat")}
>
<PenLine className="mr-2 h-4 w-4" />
<Pencil className="mr-2 h-4 w-4" />
<span>{t("rename") || "Rename"}</span>
</DropdownMenuItem>
)}

View file

@ -1,6 +1,6 @@
"use client";
import { ArchiveIcon, MoreHorizontal, PenLine, RotateCcwIcon, Trash2 } from "lucide-react";
import { ArchiveIcon, MoreHorizontal, Pencil, RotateCcwIcon, Trash2 } from "lucide-react";
import { useTranslations } from "next-intl";
import { useCallback, useState } from "react";
import { Button } from "@/components/ui/button";
@ -106,7 +106,7 @@ export function ChatListItem({
onRename();
}}
>
<PenLine className="mr-2 h-4 w-4" />
<Pencil className="mr-2 h-4 w-4" />
<span>{t("rename") || "Rename"}</span>
</DropdownMenuItem>
)}

View file

@ -1,6 +1,6 @@
"use client";
import { CreditCard, PenSquare, Zap } from "lucide-react";
import { CreditCard, SquarePen, Zap } from "lucide-react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { useTranslations } from "next-intl";
@ -139,7 +139,7 @@ export function Sidebar({
{/* New chat button */}
<div className={cn("flex flex-col gap-0.5 py-2", isCollapsed && "items-center")}>
<SidebarButton
icon={PenSquare}
icon={SquarePen}
label={t("new_chat")}
onClick={onNewChat}
isCollapsed={isCollapsed}

View file

@ -1,6 +1,6 @@
"use client";
import { Download, FileQuestionMark, FileText, Loader2, PenLine, RefreshCw } from "lucide-react";
import { Download, FileQuestionMark, FileText, Loader2, Pencil, RefreshCw } from "lucide-react";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, useRef, useState } from "react";
import { toast } from "sonner";
@ -258,7 +258,7 @@ export function DocumentTabContent({ documentId, searchSpaceId, title }: Documen
onClick={() => setIsEditing(true)}
className="gap-1.5"
>
<PenLine className="size-3.5" />
<Pencil className="size-3.5" />
Edit
</Button>
)}

View file

@ -2,7 +2,7 @@
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useAtomValue } from "jotai";
import { ArrowUp, ChevronDown, ClipboardCopy, Download, Info, Pen } from "lucide-react";
import { ArrowUp, ChevronDown, ClipboardCopy, Download, Info, Pencil } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { toast } from "sonner";
import { z } from "zod";
@ -247,7 +247,7 @@ export function TeamMemoryManager({ searchSpaceId }: TeamMemoryManagerProps) {
onClick={openInput}
className="absolute bottom-3 right-3 z-10 h-[54px] w-[54px] rounded-full border bg-muted/60 backdrop-blur-sm shadow-sm"
>
<Pen className="!h-5 !w-5" />
<Pencil className="!h-5 !w-5" />
</Button>
)}
</div>

View file

@ -2,7 +2,7 @@
import type { ToolCallMessagePartProps } from "@assistant-ui/react";
import { useSetAtom } from "jotai";
import { CornerDownLeftIcon, Pen } from "lucide-react";
import { CornerDownLeftIcon, Pencil } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
import { PlateEditor } from "@/components/editor/plate-editor";
@ -222,7 +222,7 @@ function ApprovalCard({
});
}}
>
<Pen className="size-3.5" />
<Pencil className="size-3.5" />
Edit
</Button>
)}

View file

@ -2,7 +2,7 @@
import type { ToolCallMessagePartProps } from "@assistant-ui/react";
import { useSetAtom } from "jotai";
import { CornerDownLeftIcon, Pen } from "lucide-react";
import { CornerDownLeftIcon, Pencil } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
import { PlateEditor } from "@/components/editor/plate-editor";
@ -241,7 +241,7 @@ function ApprovalCard({
});
}}
>
<Pen className="size-3.5" />
<Pencil className="size-3.5" />
Edit
</Button>
)}

View file

@ -2,7 +2,7 @@
import type { ToolCallMessagePartProps } from "@assistant-ui/react";
import { useSetAtom } from "jotai";
import { CornerDownLeftIcon, FileIcon, Pen } from "lucide-react";
import { CornerDownLeftIcon, FileIcon, Pencil } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
import { PlateEditor } from "@/components/editor/plate-editor";
@ -224,7 +224,7 @@ function ApprovalCard({
});
}}
>
<Pen className="size-3.5" />
<Pencil className="size-3.5" />
Edit
</Button>
)}

View file

@ -1,7 +1,7 @@
"use client";
import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
import { CornerDownLeftIcon, Pen } from "lucide-react";
import { CornerDownLeftIcon, Pencil } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { TextShimmerLoader } from "@/components/prompt-kit/loader";
import { Button } from "@/components/ui/button";
@ -167,7 +167,7 @@ function GenericApprovalCard({
className="rounded-lg text-muted-foreground -mt-1 -mr-2"
onClick={() => setIsEditing(true)}
>
<Pen className="size-3.5" />
<Pencil className="size-3.5" />
Edit
</Button>
)}

View file

@ -2,7 +2,7 @@
import type { ToolCallMessagePartProps } from "@assistant-ui/react";
import { useSetAtom } from "jotai";
import { CornerDownLeftIcon, Pen, UserIcon, UsersIcon } from "lucide-react";
import { CornerDownLeftIcon, Pencil, UserIcon, UsersIcon } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import type { ExtraField } from "@/atoms/chat/hitl-edit-panel.atom";
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
@ -251,7 +251,7 @@ function ApprovalCard({
});
}}
>
<Pen className="size-3.5" />
<Pencil className="size-3.5" />
Edit
</Button>
)}

View file

@ -2,7 +2,7 @@
import type { ToolCallMessagePartProps } from "@assistant-ui/react";
import { useSetAtom } from "jotai";
import { CornerDownLeftIcon, MailIcon, Pen, UserIcon, UsersIcon } from "lucide-react";
import { CornerDownLeftIcon, MailIcon, Pencil, UserIcon, UsersIcon } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import type { ExtraField } from "@/atoms/chat/hitl-edit-panel.atom";
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
@ -250,7 +250,7 @@ function ApprovalCard({
});
}}
>
<Pen className="size-3.5" />
<Pencil className="size-3.5" />
Edit
</Button>
)}

View file

@ -2,7 +2,7 @@
import type { ToolCallMessagePartProps } from "@assistant-ui/react";
import { useSetAtom } from "jotai";
import { CornerDownLeftIcon, MailIcon, Pen, UserIcon, UsersIcon } from "lucide-react";
import { CornerDownLeftIcon, MailIcon, Pencil, UserIcon, UsersIcon } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import type { ExtraField } from "@/atoms/chat/hitl-edit-panel.atom";
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
@ -283,7 +283,7 @@ function ApprovalCard({
});
}}
>
<Pen className="size-3.5" />
<Pencil className="size-3.5" />
Edit
</Button>
)}

View file

@ -2,7 +2,7 @@
import type { ToolCallMessagePartProps } from "@assistant-ui/react";
import { useSetAtom } from "jotai";
import { ClockIcon, CornerDownLeftIcon, GlobeIcon, MapPinIcon, Pen, UsersIcon } from "lucide-react";
import { ClockIcon, CornerDownLeftIcon, GlobeIcon, MapPinIcon, Pencil, UsersIcon } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import type { ExtraField } from "@/atoms/chat/hitl-edit-panel.atom";
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
@ -332,7 +332,7 @@ function ApprovalCard({
});
}}
>
<Pen className="size-3.5" />
<Pencil className="size-3.5" />
Edit
</Button>
)}

View file

@ -7,7 +7,7 @@ import {
ClockIcon,
CornerDownLeftIcon,
MapPinIcon,
Pen,
Pencil,
UsersIcon,
} from "lucide-react";
import { useCallback, useEffect, useState } from "react";
@ -415,7 +415,7 @@ function ApprovalCard({
});
}}
>
<Pen className="size-3.5" />
<Pencil className="size-3.5" />
Edit
</Button>
)}

View file

@ -2,7 +2,7 @@
import type { ToolCallMessagePartProps } from "@assistant-ui/react";
import { useSetAtom } from "jotai";
import { CornerDownLeftIcon, FileIcon, Pen } from "lucide-react";
import { CornerDownLeftIcon, FileIcon, Pencil } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
import { PlateEditor } from "@/components/editor/plate-editor";
@ -240,7 +240,7 @@ function ApprovalCard({
});
}}
>
<Pen className="size-3.5" />
<Pencil className="size-3.5" />
Edit
</Button>
)}

View file

@ -2,7 +2,7 @@
import type { ToolCallMessagePartProps } from "@assistant-ui/react";
import { useSetAtom } from "jotai";
import { CornerDownLeftIcon, Pen } from "lucide-react";
import { CornerDownLeftIcon, Pencil } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
import { PlateEditor } from "@/components/editor/plate-editor";
@ -257,7 +257,7 @@ function ApprovalCard({
});
}}
>
<Pen className="size-3.5" />
<Pencil className="size-3.5" />
Edit
</Button>
)}

View file

@ -2,7 +2,7 @@
import type { ToolCallMessagePartProps } from "@assistant-ui/react";
import { useSetAtom } from "jotai";
import { CornerDownLeftIcon, Pen } from "lucide-react";
import { CornerDownLeftIcon, Pencil } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
import { PlateEditor } from "@/components/editor/plate-editor";
@ -273,7 +273,7 @@ function ApprovalCard({
});
}}
>
<Pen className="size-3.5" />
<Pencil className="size-3.5" />
Edit
</Button>
)}

View file

@ -2,7 +2,7 @@
import type { ToolCallMessagePartProps } from "@assistant-ui/react";
import { useSetAtom } from "jotai";
import { CornerDownLeftIcon, Pen } from "lucide-react";
import { CornerDownLeftIcon, Pencil } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
import { PlateEditor } from "@/components/editor/plate-editor";
@ -269,7 +269,7 @@ function ApprovalCard({
});
}}
>
<Pen className="size-3.5" />
<Pencil className="size-3.5" />
Edit
</Button>
)}

View file

@ -2,7 +2,7 @@
import type { ToolCallMessagePartProps } from "@assistant-ui/react";
import { useSetAtom } from "jotai";
import { CornerDownLeftIcon, Pen } from "lucide-react";
import { CornerDownLeftIcon, Pencil } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
import { PlateEditor } from "@/components/editor/plate-editor";
@ -332,7 +332,7 @@ function ApprovalCard({
});
}}
>
<Pen className="size-3.5" />
<Pencil className="size-3.5" />
Edit
</Button>
)}

View file

@ -2,7 +2,7 @@
import type { ToolCallMessagePartProps } from "@assistant-ui/react";
import { useSetAtom } from "jotai";
import { CornerDownLeftIcon, Pen } from "lucide-react";
import { CornerDownLeftIcon, Pencil } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
import { PlateEditor } from "@/components/editor/plate-editor";
@ -219,7 +219,7 @@ function ApprovalCard({
});
}}
>
<Pen className="size-3.5" />
<Pencil className="size-3.5" />
Edit
</Button>
)}

View file

@ -2,7 +2,7 @@
import type { ToolCallMessagePartProps } from "@assistant-ui/react";
import { useSetAtom } from "jotai";
import { CornerDownLeftIcon, Pen } from "lucide-react";
import { CornerDownLeftIcon, Pencil } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
import { PlateEditor } from "@/components/editor/plate-editor";
@ -196,7 +196,7 @@ function ApprovalCard({
});
}}
>
<Pen className="size-3.5" />
<Pencil className="size-3.5" />
Edit
</Button>
)}

View file

@ -2,7 +2,7 @@
import type { ToolCallMessagePartProps } from "@assistant-ui/react";
import { useSetAtom } from "jotai";
import { CornerDownLeftIcon, FileIcon, Pen } from "lucide-react";
import { CornerDownLeftIcon, FileIcon, Pencil } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
import { PlateEditor } from "@/components/editor/plate-editor";
@ -209,7 +209,7 @@ function ApprovalCard({
});
}}
>
<Pen className="size-3.5" />
<Pencil className="size-3.5" />
Edit
</Button>
)}

View file

@ -1,6 +1,6 @@
"use client";
import { BookOpenIcon, PenLineIcon } from "lucide-react";
import { BookOpenIcon, Pencil } from "lucide-react";
import { usePlateState } from "platejs/react";
import { ToolbarButton } from "./toolbar";
@ -13,7 +13,7 @@ export function ModeToolbarButton() {
tooltip={readOnly ? "Click to edit" : "Click to view"}
onClick={() => setReadOnly(!readOnly)}
>
{readOnly ? <BookOpenIcon /> : <PenLineIcon />}
{readOnly ? <BookOpenIcon /> : <Pencil />}
</ToolbarButton>
);
}