From 481ea1f94a9c8234bb4e342bdd12f0168f278a81 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 1 Apr 2026 01:22:12 +0000
Subject: [PATCH 1/3] Initial plan
From f209535c909eafde14d6db55ece78ce574969546 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 1 Apr 2026 01:30:43 +0000
Subject: [PATCH 2/3] Migrate icons.svg to Lucide icons in extension package
Agent-Logs-Url: https://github.com/ujiro99/selection-command/sessions/8575431a-a019-4e20-8fbb-62bdb9bfef05
Co-authored-by: ujiro99 <677231+ujiro99@users.noreply.github.com>
---
packages/extension/src/components/Icon.tsx | 19 --
.../extension/src/components/OpenInTab.css | 6 +-
.../extension/src/components/OpenInTab.tsx | 4 +-
.../src/components/menu/InvisibleItem.tsx | 9 +-
.../src/components/menu/Menu.module.css | 10 +-
.../extension/src/components/menu/Menu.tsx | 4 +-
.../src/components/menu/MenuItem.tsx | 9 +-
.../components/result/ResultPopup.module.css | 5 +-
.../src/components/result/ResultPopup.tsx | 4 +-
.../src/components/result/TextStyle.tsx | 6 +-
packages/extension/src/content_script.tsx | 3 -
packages/extension/src/icons.svg | 180 ------------------
packages/extension/src/options_page.tsx | 2 -
13 files changed, 26 insertions(+), 235 deletions(-)
delete mode 100644 packages/extension/src/components/Icon.tsx
delete mode 100644 packages/extension/src/icons.svg
diff --git a/packages/extension/src/components/Icon.tsx b/packages/extension/src/components/Icon.tsx
deleted file mode 100644
index 239538d0..00000000
--- a/packages/extension/src/components/Icon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react"
-
-type Props = {
- name: string
- className?: string
- style?: React.CSSProperties
-}
-
-export function Icon(props: Props): JSX.Element {
- const href = `#icon-${props.name}`
-
- const className = props.className ?? "h-full w-full"
-
- return (
-
- )
-}
diff --git a/packages/extension/src/components/OpenInTab.css b/packages/extension/src/components/OpenInTab.css
index d58a048b..37c84661 100644
--- a/packages/extension/src/components/OpenInTab.css
+++ b/packages/extension/src/components/OpenInTab.css
@@ -32,9 +32,9 @@
height: 20px;
margin-right: 4px;
padding-bottom: 2px;
- fill: var(--gray-400);
- transition: fill 250ms;
+ color: var(--gray-400);
+ transition: color 250ms;
}
.OpenInTab__icon:hover {
- fill: var(--gray-700);
+ color: var(--gray-700);
}
diff --git a/packages/extension/src/components/OpenInTab.tsx b/packages/extension/src/components/OpenInTab.tsx
index 045faf5b..1685291a 100644
--- a/packages/extension/src/components/OpenInTab.tsx
+++ b/packages/extension/src/components/OpenInTab.tsx
@@ -1,6 +1,6 @@
import { useEffect, useState } from "react"
import { Ipc, BgCommand } from "@/services/ipc"
-import { Icon } from "../components/Icon"
+import { ExternalLink } from "lucide-react"
import "./OpenInTab.css"
let isPageUnloading = false
@@ -50,7 +50,7 @@ export function OpenInTab(): JSX.Element {
className="OpenInTab__button"
onClick={onClickOpenTab}
>
-
+
Open in Tab
diff --git a/packages/extension/src/components/menu/InvisibleItem.tsx b/packages/extension/src/components/menu/InvisibleItem.tsx
index ba3b74ca..84a783ce 100644
--- a/packages/extension/src/components/menu/InvisibleItem.tsx
+++ b/packages/extension/src/components/menu/InvisibleItem.tsx
@@ -2,7 +2,7 @@ import React, { useRef, useEffect, useMemo } from "react"
import { cn } from "@/lib/utils"
import { ResultPopup } from "@/components/result/ResultPopup"
-import { Icon } from "@/components/Icon"
+import { RefreshCw, Check, AlertCircle } from "lucide-react"
import { useContextMenu } from "@/hooks/useContextMenu"
import { useSelectContext } from "@/hooks/useSelectContext"
import { useCommandExecutor } from "@/hooks/useCommandExecutor"
@@ -108,16 +108,15 @@ function IconWithState(props: ImageProps): JSX.Element {
)}
>
{status === ExecState.EXECUTING && (
-
)}
{status === ExecState.SUCCESS && (
-
+
)}
{status === ExecState.FAIL && (
-
+
)}
)
diff --git a/packages/extension/src/components/menu/Menu.module.css b/packages/extension/src/components/menu/Menu.module.css
index 90ae93d6..826f57a3 100644
--- a/packages/extension/src/components/menu/Menu.module.css
+++ b/packages/extension/src/components/menu/Menu.module.css
@@ -59,16 +59,16 @@
}
.apiIconLoading {
- fill: #666;
+ color: #666;
cursor: wait;
}
.apiIconSuccess {
- fill: var(--blue-500);
+ color: var(--blue-500);
}
.apiIconError {
- fill: rgb(220 38 38);
+ color: rgb(220 38 38);
}
.iconWithState {
@@ -100,8 +100,8 @@
.icon {
width: 1.4em;
height: 1.4em;
- fill: var(--sc-font-color);
- transition: fill 250ms;
+ color: var(--sc-font-color);
+ transition: color 250ms;
}
.menuImage svg {
diff --git a/packages/extension/src/components/menu/Menu.tsx b/packages/extension/src/components/menu/Menu.tsx
index b2270d87..2f63d035 100644
--- a/packages/extension/src/components/menu/Menu.tsx
+++ b/packages/extension/src/components/menu/Menu.tsx
@@ -10,7 +10,7 @@ import { ScrollAreaConditional } from "@/components/ui/scroll-area"
import { STYLE, SIDE } from "@/const"
import { TEST_IDS } from "@/testIds"
import { MenuItem } from "./MenuItem"
-import { Icon } from "@/components/Icon"
+import { ChevronRight } from "lucide-react"
import { HoverArea } from "@/components/menu/HoverArea"
import { MenuImage } from "@/components/menu/MenuImage"
import { popupContext } from "@/components/Popup"
@@ -226,7 +226,7 @@ const MenuFolder = (props: {
{!(folder.onlyIcon && isHorizontal) && (
{folder.title}
)}
- {!isHorizontal && }
+ {!isHorizontal && }
)}
{status === ExecState.EXECUTING && (
-
)}
{status === ExecState.SUCCESS && (
-
+
)}
{status === ExecState.FAIL && (
-
+
)}
)
diff --git a/packages/extension/src/components/result/ResultPopup.module.css b/packages/extension/src/components/result/ResultPopup.module.css
index e07aee36..c41d3db1 100644
--- a/packages/extension/src/components/result/ResultPopup.module.css
+++ b/packages/extension/src/components/result/ResultPopup.module.css
@@ -14,7 +14,6 @@
cursor: pointer;
transition:
color,
- fill,
background ease-out 0.2s;
border: none;
border-radius: 6px;
@@ -29,7 +28,6 @@
width: var(--icon-size);
height: var(--icon-size);
color: var(--gray-400);
- fill: var(--gray-400);
}
&:hover {
@@ -38,11 +36,10 @@
svg {
color: var(--gray-600);
- fill: var(--gray-600);
}
svg.buttonSuccess {
- fill: var(--blue-500);
+ color: var(--blue-500);
}
}
}
diff --git a/packages/extension/src/components/result/ResultPopup.tsx b/packages/extension/src/components/result/ResultPopup.tsx
index 01fa2bca..93fa3417 100644
--- a/packages/extension/src/components/result/ResultPopup.tsx
+++ b/packages/extension/src/components/result/ResultPopup.tsx
@@ -3,7 +3,7 @@ import { cn } from "@/lib/utils"
import { Popover, PopoverContent, PopoverAnchor } from "@/components/ui/popover"
import { useUserSettings } from "@/hooks/useSettings"
-import { Icon } from "@/components/Icon"
+import { X } from "lucide-react"
import popupCss from "@/components/Popup.module.css"
import { SIDE } from "@/const"
import css from "./ResultPopup.module.css"
@@ -40,7 +40,7 @@ export function ResultPopup(props: PopupProps) {
className={cn(css.closeButton, css.resultPopupButton)}
onClick={props.onClose}
>
-
+
)}
diff --git a/packages/extension/src/components/result/TextStyle.tsx b/packages/extension/src/components/result/TextStyle.tsx
index b1c3378f..8752754d 100644
--- a/packages/extension/src/components/result/TextStyle.tsx
+++ b/packages/extension/src/components/result/TextStyle.tsx
@@ -2,7 +2,7 @@ import { useState } from "react"
import { sleep } from "@/lib/utils"
import { ExecState } from "@/const"
import css from "@/components/result/ResultPopup.module.css"
-import { Icon } from "@/components/Icon"
+import { Copy, Check } from "lucide-react"
import { Tooltip } from "@/components/Tooltip"
const toName = (str: string) => {
@@ -45,9 +45,9 @@ export function TextStyle({ styles }: Props) {
disabled={status === ExecState.SUCCESS}
ref={setButtonElm}
>
- {status === ExecState.NONE && }
+ {status === ExecState.NONE && }
{status === ExecState.SUCCESS && (
-
+
)}
diff --git a/packages/extension/src/content_script.tsx b/packages/extension/src/content_script.tsx
index 112dfcdb..70ddd7a6 100644
--- a/packages/extension/src/content_script.tsx
+++ b/packages/extension/src/content_script.tsx
@@ -1,7 +1,6 @@
import { createRoot } from "react-dom/client"
import { APP_ID, isDebug, isE2E } from "./const"
import { App } from "./components/App"
-import icons from "./icons.svg?raw"
import { initSentry, Sentry, ErrorBoundary } from "@/lib/sentry"
import "@/services/connection"
@@ -16,7 +15,6 @@ try {
document.body.insertAdjacentElement("afterend", rootDom)
const mode = isDebug || isE2E ? "open" : "closed" // 'open' for debugging and e2e
const shadow = rootDom.attachShadow({ mode })
- shadow.innerHTML = icons
const root = createRoot(shadow)
root.render(
@@ -41,7 +39,6 @@ try {
if (!isDebug) {
// Putting styles into ShadowDom
- insertCss(shadow, "/assets/icons.css")
insertCss(shadow, "/assets/content_script.css")
}
diff --git a/packages/extension/src/icons.svg b/packages/extension/src/icons.svg
deleted file mode 100644
index 0bd6342e..00000000
--- a/packages/extension/src/icons.svg
+++ /dev/null
@@ -1,180 +0,0 @@
-
diff --git a/packages/extension/src/options_page.tsx b/packages/extension/src/options_page.tsx
index ce943198..6ca8cdba 100644
--- a/packages/extension/src/options_page.tsx
+++ b/packages/extension/src/options_page.tsx
@@ -1,7 +1,6 @@
import React from "react"
import ReactDOM from "react-dom/client"
import { Option } from "@/components/option/Option"
-import icons from "./icons.svg?raw"
import { getCurrentLocale } from "@/services/i18n"
import { initSentry, Sentry, ErrorBoundary } from "@/lib/sentry"
@@ -19,7 +18,6 @@ document.documentElement.lang = getCurrentLocale()
const root = document.getElementById("root")
if (root) {
try {
- root.insertAdjacentHTML("afterend", icons)
ReactDOM.createRoot(root).render(
From 476e5c88d4d3b0f6423666bf2169bc7f87b5d7fc Mon Sep 17 00:00:00 2001
From: ujiro99
Date: Wed, 1 Apr 2026 11:17:43 +0900
Subject: [PATCH 3/3] Update: Fix style specification method.
---
packages/extension/src/components/OpenInTab.css | 15 ++-------------
packages/extension/src/components/OpenInTab.tsx | 4 ++--
2 files changed, 4 insertions(+), 15 deletions(-)
diff --git a/packages/extension/src/components/OpenInTab.css b/packages/extension/src/components/OpenInTab.css
index 37c84661..e82904cc 100644
--- a/packages/extension/src/components/OpenInTab.css
+++ b/packages/extension/src/components/OpenInTab.css
@@ -10,31 +10,20 @@
background: #f9f9f9;
border-radius: 6px;
border: none;
- filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07))
- drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+ filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
display: flex;
align-items: center;
padding: 4px 8px;
cursor: pointer;
- color: var(--gray-400);
- font-size: 12px;
transition:
color 250ms,
background-color 250ms;
}
+
.OpenInTab__button:hover {
- color: var(--gray-700);
background: #fff;
}
.OpenInTab__icon {
- width: 20px;
- height: 20px;
- margin-right: 4px;
- padding-bottom: 2px;
- color: var(--gray-400);
transition: color 250ms;
}
-.OpenInTab__icon:hover {
- color: var(--gray-700);
-}
diff --git a/packages/extension/src/components/OpenInTab.tsx b/packages/extension/src/components/OpenInTab.tsx
index 1685291a..7abc2ef3 100644
--- a/packages/extension/src/components/OpenInTab.tsx
+++ b/packages/extension/src/components/OpenInTab.tsx
@@ -47,10 +47,10 @@ export function OpenInTab(): JSX.Element {