refactor(icons): migrate workspace to Icones

packages/i18n/package.json

@@ -26,9 +26,9 @@
     "@lingui/core": "^6",
     "@lingui/react": "^6",
     "@vitejs/plugin-react": "^6",
+    "@workspace/ui": "workspace:*",
     "ansi-to-react": "^6.2.6",
     "cac": "^7.0.0",
-    "lucide-react": "^1.27.0",
     "open": "^11.0.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
@@ -43,4 +43,4 @@
     "typescript": "~6",
     "vitest": "^4"
   }
-}
+}

packages/i18n/src/devtool/devtool-action-output.tsx

@@ -3,7 +3,7 @@ import {
   ChevronUpIcon,
   TerminalIcon,
   XIcon,
-} from "lucide-react"
+} from "@workspace/ui/components/icon"
 
 import { AnsiText } from "./ansi-text"
 import { useDevtoolLocalization } from "./devtool-localization"

packages/i18n/src/devtool/devtool-settings.tsx

@@ -4,7 +4,7 @@ import {
   AlignLeftIcon,
   AlignRightIcon,
   SettingsIcon,
-} from "lucide-react"
+} from "@workspace/ui/components/icon"
 
 import type {
   I18nDevtoolPanelPlacement,
@@ -35,14 +35,8 @@ const panelPlacements = [
 ] as const
 
 const interfaceLocaleLabels: Record<I18nDevtoolLocale, string> = {
-  de: "Deutsch",
-  en: "English",
-  es: "Español",
-  fr: "Français",
-  ja: "日本語",
-  ko: "한국어",
+  "en-US": "English",
   "zh-Hans": "简体中文",
-  "zh-Hant": "繁體中文",
 }
 
 export function DevtoolSettings({

packages/i18n/src/devtool/devtool-theme-switcher.tsx

@@ -1,4 +1,4 @@
-import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react"
+import { MonitorIcon, MoonIcon, SunIcon } from "@workspace/ui/components/icon"
 
 import type { I18nDevtoolTheme } from "./devtool-preferences"
 import { useDevtoolLocalization } from "./devtool-localization"

packages/i18n/src/devtool/i18n-devtool-trigger.tsx

@@ -1,4 +1,4 @@
-import { LanguagesIcon } from "lucide-react"
+import { LanguagesIcon } from "@workspace/ui/components/icon"
 
 import { useDevtoolLocalization } from "./devtool-localization"
 import { useFloatingTrigger } from "./use-floating-trigger"

packages/i18n/src/devtool/i18n-devtool.tsx

@@ -1,5 +1,9 @@
 import * as React from "react"
-import { Maximize2Icon, Minimize2Icon, XIcon } from "lucide-react"
+import {
+  Maximize2Icon,
+  Minimize2Icon,
+  XIcon,
+} from "@workspace/ui/components/icon"
 import { createPortal } from "react-dom"
 
 import { useLocale, useLocales } from "../runtime"
@@ -25,6 +29,7 @@ import { DevtoolSettings } from "./devtool-settings"
 import { I18nDevtoolTrigger } from "./i18n-devtool-trigger"
 import { MessagePanel } from "./message-panel"
 import { MessageRepositoryProvider } from "./message-repository"
+// oxlint-disable-next-line import/no-unassigned-import -- Loads the Devtool stylesheet.
 import "./i18n-devtool.css"
 
 export interface I18nDevtoolProps {

packages/i18n/src/devtool/message-copy-menu.tsx

@@ -4,7 +4,7 @@ import {
   ChevronDownIcon,
   CopyIcon,
   TriangleAlertIcon,
-} from "lucide-react"
+} from "@workspace/ui/components/icon"
 
 import { useDevtoolLocalization } from "./devtool-localization"
 import type { DevtoolMessage, MessageOrigin } from "./types"
@@ -53,6 +53,35 @@ async function writeClipboard(value: string) {
   }
 }
 
+function handleMenuKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+  if (!["ArrowDown", "ArrowUp", "End", "Home"].includes(event.key)) {
+    return
+  }
+
+  event.preventDefault()
+  const items = Array.from(
+    event.currentTarget.querySelectorAll<HTMLButtonElement>(
+      '[role="menuitem"]:not(:disabled)'
+    )
+  )
+
+  if (items.length === 0) return
+
+  const currentIndex = items.indexOf(
+    document.activeElement as HTMLButtonElement
+  )
+  const nextIndex =
+    event.key === "Home"
+      ? 0
+      : event.key === "End"
+        ? items.length - 1
+        : event.key === "ArrowUp"
+          ? (currentIndex - 1 + items.length) % items.length
+          : (currentIndex + 1) % items.length
+
+  items[nextIndex]?.focus()
+}
+
 export function MessageCopyMenu({
   message,
   translation,
@@ -132,37 +161,6 @@ export function MessageCopyMenu({
     }
   }
 
-  const handleMenuKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (!["ArrowDown", "ArrowUp", "End", "Home"].includes(event.key)) {
-      return
-    }
-
-    event.preventDefault()
-    const items = Array.from(
-      event.currentTarget.querySelectorAll<HTMLButtonElement>(
-        '[role="menuitem"]:not(:disabled)'
-      )
-    )
-
-    if (items.length === 0) {
-      return
-    }
-
-    const currentIndex = items.indexOf(
-      document.activeElement as HTMLButtonElement
-    )
-    const nextIndex =
-      event.key === "Home"
-        ? 0
-        : event.key === "End"
-          ? items.length - 1
-          : event.key === "ArrowUp"
-            ? (currentIndex - 1 + items.length) % items.length
-            : (currentIndex + 1) % items.length
-
-    items[nextIndex]?.focus()
-  }
-
   return (
     <div className="i18n-message-copy" ref={rootRef}>
       <button
@@ -236,10 +234,10 @@ export function MessageCopyMenu({
               <span className="i18n-message-copy__label">
                 {messages.messagePanel.sourceLocations}
               </span>
-              {message.origins.map((origin, index) => (
+              {message.origins.map((origin) => (
                 <button
                   type="button"
-                  key={`${getOriginLocation(origin)}:${index}`}
+                  key={getOriginLocation(origin)}
                   role="menuitem"
                   title={getOriginLocation(origin)}
                   onClick={() => void copy(getOriginLocation(origin))}

packages/i18n/src/devtool/message-navigation.tsx

@@ -1,5 +1,9 @@
 import * as React from "react"
-import { ChevronDownIcon, FolderIcon, PackageIcon } from "lucide-react"
+import {
+  ChevronDownIcon,
+  FolderIcon,
+  PackageIcon,
+} from "@workspace/ui/components/icon"
 
 import { useDevtoolLocalization } from "./devtool-localization"
 import type { DevtoolMessage, DevtoolMessagePackage } from "./types"
@@ -137,19 +141,20 @@ function NamespaceBranch({
   packageName: string
   selectedKey?: string
 }) {
+  const sortedNodes = Array.from(nodes.values())
+  sortedNodes.sort((left, right) => left.segment.localeCompare(right.segment))
+
   return (
     <ul className="i18n-message-tree__branch">
-      {Array.from(nodes.values())
-        .sort((left, right) => left.segment.localeCompare(right.segment))
-        .map((node) => (
-          <NamespaceNode
-            key={node.path}
-            node={node}
-            packageName={packageName}
-            selectedKey={selectedKey}
-            onSelect={onSelect}
-          />
-        ))}
+      {sortedNodes.map((node) => (
+        <NamespaceNode
+          key={node.path}
+          node={node}
+          packageName={packageName}
+          selectedKey={selectedKey}
+          onSelect={onSelect}
+        />
+      ))}
     </ul>
   )
 }

packages/i18n/src/devtool/message-panel.tsx

@@ -6,7 +6,7 @@ import {
   RotateCcwIcon,
   SaveIcon,
   SearchIcon,
-} from "lucide-react"
+} from "@workspace/ui/components/icon"
 
 import { useDevtoolLocalization } from "./devtool-localization"
 import { formatMessageOrigin, MessageCopyMenu } from "./message-copy-menu"
@@ -20,6 +20,7 @@ import type {
   DevtoolMessagePackage,
   MessageRepository,
 } from "./types"
+// oxlint-disable-next-line import/no-unassigned-import -- Loads the message panel stylesheet.
 import "./message-panel.css"
 
 type LoadState =
@@ -392,17 +393,19 @@ export function MessagePanel({
       }
     }
 
-    return Array.from(groups, ([packageName, group]) => ({
+    const packageGroups = Array.from(groups, ([packageName, group]) => ({
       kind: group.kind,
       messages: group.messages,
       missingCount: group.messages.filter((message) => message.missing).length,
       packageName,
-    })).sort(
+    }))
+    packageGroups.sort(
       (left, right) =>
         Number(right.kind === "application") -
           Number(left.kind === "application") ||
         left.packageName.localeCompare(right.packageName)
     )
+    return packageGroups
   }, [missingOnly, query, state, visibleMessages])
   const navigationModel = React.useMemo(
     () => createMessageNavigationModel(visiblePackageGroups),