Refactor web components

webview-ui/src/App.tsx

@@ -3,7 +3,7 @@ import { useEvent } from "react-use"
 import { ExtensionMessage } from "../../src/shared/ExtensionMessage"
 import ChatView from "./components/ChatView"
 import HistoryView from "./components/HistoryView"
-import SettingsView from "./components/SettingsView"
+import SettingsView from "./components/settings/SettingsView"
 import WelcomeView from "./components/WelcomeView"
 import { ExtensionStateContextProvider, useExtensionState } from "./context/ExtensionStateContext"
 import { vscode } from "./utils/vscode"

webview-ui/src/components/chat/ChatRow.tsx

@@ -2,13 +2,13 @@ import { VSCodeBadge, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/reac
 import deepEqual from "fast-deep-equal"
 import React, { memo, useMemo } from "react"
 import ReactMarkdown from "react-markdown"
-import { ClaudeMessage, ClaudeSayTool } from "../../../src/shared/ExtensionMessage"
-import { COMMAND_OUTPUT_STRING } from "../../../src/shared/combineCommandSequences"
-import { vscode } from "../utils/vscode"
-import CodeAccordian, { removeLeadingNonAlphanumeric } from "./CodeAccordian"
-import CodeBlock, { CODE_BLOCK_BG_COLOR } from "./CodeBlock"
+import { ClaudeMessage, ClaudeSayTool } from "../../../../src/shared/ExtensionMessage"
+import { COMMAND_OUTPUT_STRING } from "../../../../src/shared/combineCommandSequences"
+import { vscode } from "../../utils/vscode"
+import CodeAccordian, { removeLeadingNonAlphanumeric } from "../common/CodeAccordian"
+import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
 import { highlightMentions } from "./TaskHeader"
-import Thumbnails from "./Thumbnails"
+import Thumbnails from "../common/Thumbnails"
 
 interface ChatRowProps {
 	message: ClaudeMessage

webview-ui/src/components/chat/TaskHeader.tsx

@@ -1,11 +1,11 @@
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
 import React, { memo, useEffect, useMemo, useRef, useState } from "react"
 import { useWindowSize } from "react-use"
-import { ClaudeMessage } from "../../../src/shared/ExtensionMessage"
-import { useExtensionState } from "../context/ExtensionStateContext"
-import { vscode } from "../utils/vscode"
-import Thumbnails from "./Thumbnails"
-import { mentionRegexGlobal } from "../../../src/shared/context-mentions"
+import { ClaudeMessage } from "../../../../src/shared/ExtensionMessage"
+import { useExtensionState } from "../../context/ExtensionStateContext"
+import { vscode } from "../../utils/vscode"
+import Thumbnails from "../common/Thumbnails"
+import { mentionRegexGlobal } from "../../../../src/shared/context-mentions"
 
 interface TaskHeaderProps {
 	task: ClaudeMessage

webview-ui/src/components/common/CodeAccordian.tsx

@@ -1,5 +1,5 @@
 import { memo, useMemo } from "react"
-import { getLanguageFromPath } from "../utils/getLanguageFromPath"
+import { getLanguageFromPath } from "../../utils/getLanguageFromPath"
 import CodeBlock, { CODE_BLOCK_BG_COLOR } from "./CodeBlock"
 
 interface CodeAccordianProps {

webview-ui/src/components/history/HistoryPreview.tsx

@@ -1,6 +1,6 @@
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
-import { useExtensionState } from "../context/ExtensionStateContext"
-import { vscode } from "../utils/vscode"
+import { useExtensionState } from "../../context/ExtensionStateContext"
+import { vscode } from "../../utils/vscode"
 import { memo } from "react"
 
 type HistoryPreviewProps = {

webview-ui/src/components/settings/ApiOptions.tsx

@@ -25,11 +25,11 @@ import {
 	openRouterModels,
 	vertexDefaultModelId,
 	vertexModels,
-} from "../../../src/shared/api"
-import { ExtensionMessage } from "../../../src/shared/ExtensionMessage"
-import { useExtensionState } from "../context/ExtensionStateContext"
-import { vscode } from "../utils/vscode"
-import VSCodeButtonLink from "./VSCodeButtonLink"
+} from "../../../../src/shared/api"
+import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
+import { useExtensionState } from "../../context/ExtensionStateContext"
+import { vscode } from "../../utils/vscode"
+import VSCodeButtonLink from "../VSCodeButtonLink"
 
 interface ApiOptionsProps {
 	showModelOptions: boolean

webview-ui/src/components/settings/SettingsView.tsx

@@ -1,8 +1,8 @@
 import { VSCodeButton, VSCodeCheckbox, VSCodeLink, VSCodeTextArea } from "@vscode/webview-ui-toolkit/react"
 import { memo, useEffect, useState } from "react"
-import { useExtensionState } from "../context/ExtensionStateContext"
-import { validateApiConfiguration } from "../utils/validate"
-import { vscode } from "../utils/vscode"
+import { useExtensionState } from "../../context/ExtensionStateContext"
+import { validateApiConfiguration } from "../../utils/validate"
+import { vscode } from "../../utils/vscode"
 import ApiOptions from "./ApiOptions"
 
 const IS_DEV = false // FIXME: use flags when packaging

webview-ui/src/components/welcome/WelcomeView.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react"
 import { useExtensionState } from "../context/ExtensionStateContext"
 import { validateApiConfiguration } from "../utils/validate"
 import { vscode } from "../utils/vscode"
-import ApiOptions from "./ApiOptions"
+import ApiOptions from "./settings/ApiOptions"
 
 const WelcomeView = () => {
 	const { apiConfiguration } = useExtensionState()