added account page view

webview-ui/src/App.tsx

@@ -5,7 +5,7 @@ import ChatView from "./components/chat/ChatView"
 import HistoryView from "./components/history/HistoryView"
 import SettingsView from "./components/settings/SettingsView"
 import WelcomeView from "./components/welcome/WelcomeView"
-import AccountOptions from "./components/account/AccountOptions"
+import AccountView from "./components/account/AccountView"
 import { ExtensionStateContextProvider, useExtensionState } from "./context/ExtensionStateContext"
 import { vscode } from "./utils/vscode"
 import McpView from "./components/mcp/McpView"
@@ -80,7 +80,7 @@ const AppContent = () => {
 					{showSettings && <SettingsView onDone={() => setShowSettings(false)} />}
 					{showHistory && <HistoryView onDone={() => setShowHistory(false)} />}
 					{showMcp && <McpView onDone={() => setShowMcp(false)} />}
-					{showAccount && <AccountOptions />}
+					{showAccount && <AccountView onDone={() => setShowAccount(false)} />}
 					{/* Do not conditionally load ChatView, it's expensive and there's state we don't want to lose (user input, disableInput, askResponse promise, etc.) */}
 					<ChatView
 						showHistoryView={() => {

webview-ui/src/components/account/AccountOptions.tsx

@@ -1,15 +0,0 @@
-import { memo } from "react"
-import { vscode } from "../../utils/vscode"
-
-const AccountOptions = () => {
-	const handleAccountClick = () => {
-		vscode.postMessage({ type: "accountButtonClicked" })
-	}
-
-	// Call handleAccountClick immediately when component mounts
-	handleAccountClick()
-
-	return null // This component doesn't render anything
-}
-
-export default memo(AccountOptions)

webview-ui/src/components/account/AccountView.tsx

@@ -0,0 +1,61 @@
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import { memo } from "react"
+import { useExtensionState } from "../../context/ExtensionStateContext"
+import { vscode } from "../../utils/vscode"
+
+type AccountViewProps = {
+	onDone: () => void
+}
+
+const AccountView = ({ onDone }: AccountViewProps) => {
+	const { isLoggedIn } = useExtensionState()
+
+	const handleLogin = () => {
+		vscode.postMessage({ type: "accountButtonClicked" })
+	}
+
+	return (
+		<div
+			style={{
+				position: "fixed",
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0,
+				padding: "10px 0px 0px 20px",
+				display: "flex",
+				flexDirection: "column",
+				overflow: "hidden",
+			}}>
+			<div
+				style={{
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "center",
+					marginBottom: "17px",
+					paddingRight: 17,
+				}}>
+				<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>Account</h3>
+				<VSCodeButton onClick={onDone}>Done</VSCodeButton>
+			</div>
+			<div
+				style={{
+					flexGrow: 1,
+					overflowY: "scroll",
+					paddingRight: 8,
+					display: "flex",
+					flexDirection: "column",
+				}}>
+				<div style={{ marginBottom: 5 }}>
+					{isLoggedIn ? (
+						<div style={{ fontSize: "14px" }}>You're logged in!</div>
+					) : (
+						<VSCodeButton onClick={handleLogin}>Log in to Cline</VSCodeButton>
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default memo(AccountView)