Skip to content
This repository was archived by the owner on Feb 25, 2026. It is now read-only.

fix(vscode): add back button to profile view header #599

Closed
Olusammytee wants to merge 2 commits into from
+56 −55
Closed

fix(vscode): add back button to profile view header #599

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4971c4e
fix(vscode): add back navigation in profile view
Olusammytee Feb 22, 2026
bd5b340
style(vscode): align ProfileView indentation
Olusammytee Feb 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/kilo-vscode/webview-ui/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,7 @@ const AppContent: Component = () => {
profileData={server.profileData()}
deviceAuth={server.deviceAuth()}
onLogin={server.startLogin}
onBack={() => setCurrentView("newTask")}
/>
</Match>
<Match when={currentView() === "settings"}>
Expand Down
110 changes: 55 additions & 55 deletions packages/kilo-vscode/webview-ui/src/components/ProfileView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Component, Show, createSignal, createMemo, createEffect, onMount } from "solid-js"
import { Button } from "@kilocode/kilo-ui/button"
import { Card } from "@kilocode/kilo-ui/card"
import { Icon } from "@kilocode/kilo-ui/icon"
import { Select } from "@kilocode/kilo-ui/select"
import { Tooltip } from "@kilocode/kilo-ui/tooltip"
import { useVSCode } from "../context/vscode"
Expand All @@ -14,6 +15,7 @@ export interface ProfileViewProps {
profileData: ProfileData | null | undefined
deviceAuth: DeviceAuthState
onLogin: () => void
onBack?: () => void
}

const formatBalance = (amount: number): string => {
Expand Down Expand Up @@ -97,64 +99,61 @@ const ProfileView: Component<ProfileViewProps> = (props) => {
}

return (
<div style={{ padding: "16px" }}>
<h2
style={{
"font-size": "16px",
"font-weight": "600",
"margin-top": "0",
"margin-bottom": "12px",
color: "var(--vscode-foreground)",
}}
>
{language.t("profile.title")}
</h2>

<div style={{ display: "flex", "flex-direction": "column", height: "100%" }}>
<div
style={{
height: "1px",
background: "var(--vscode-panel-border)",
"margin-bottom": "16px",
padding: "12px 16px",
"border-bottom": "1px solid var(--border-weak-base)",
display: "flex",
"align-items": "center",
gap: "8px",
}}
/>

<Show
when={props.profileData}
fallback={
<div style={{ display: "flex", "flex-direction": "column", gap: "12px" }}>
<Show
when={props.deviceAuth.status !== "idle"}
fallback={
<>
<p
style={{
"font-size": "13px",
color: "var(--vscode-descriptionForeground)",
margin: "0 0 8px 0",
}}
>
{language.t("profile.notLoggedIn")}
</p>
<Button variant="primary" onClick={handleLogin}>
{language.t("profile.action.login")}
</Button>
</>
}
>
<DeviceAuthCard
status={props.deviceAuth.status}
code={props.deviceAuth.code}
verificationUrl={props.deviceAuth.verificationUrl}
expiresIn={props.deviceAuth.expiresIn}
error={props.deviceAuth.error}
onCancel={handleCancelLogin}
onRetry={handleLogin}
/>
</Show>
</div>
}
>
{(data) => (
<Tooltip value={language.t("common.goBack")} placement="bottom">
<Button variant="ghost" size="small" onClick={() => props.onBack?.()}>
<Icon name="arrow-left" />
</Button>
</Tooltip>
<h2 style={{ "font-size": "16px", "font-weight": "600", margin: 0 }}>{language.t("profile.title")}</h2>
</div>
<div style={{ padding: "16px" }}>
Copy link

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the root is a fixed-height flex column (height: "100%") and the webview .container uses overflow: hidden, the content wrapper needs to participate in flex layout (and typically scroll) or long profile content can be clipped with no way to scroll. Consider giving the content <div> flex: 1, min-height: 0, and overflow-y: auto (or similar), matching how other full-height views manage overflow.

Suggested change
<div style={{ padding: "16px" }}>
<div
style={{
padding: "16px",
display: "flex",
"flex-direction": "column",
flex: 1,
"min-height": 0,
"overflow-y": "auto",
}}
>

Copilot uses AI. Check for mistakes.
<Show
when={props.profileData}
fallback={
<div style={{ display: "flex", "flex-direction": "column", gap: "12px" }}>
<Show
when={props.deviceAuth.status !== "idle"}
fallback={
<>
<p
style={{
"font-size": "13px",
color: "var(--vscode-descriptionForeground)",
margin: "0 0 8px 0",
}}
>
{language.t("profile.notLoggedIn")}
</p>
<Button variant="primary" onClick={handleLogin}>
{language.t("profile.action.login")}
</Button>
</>
}
>
<DeviceAuthCard
status={props.deviceAuth.status}
code={props.deviceAuth.code}
verificationUrl={props.deviceAuth.verificationUrl}
expiresIn={props.deviceAuth.expiresIn}
error={props.deviceAuth.error}
onCancel={handleCancelLogin}
onRetry={handleLogin}
/>
</Show>
</div>
}
>
{(data) => (
<div style={{ display: "flex", "flex-direction": "column", gap: "12px" }}>
{/* User header */}
<Card>
Expand Down Expand Up @@ -264,7 +263,8 @@ const ProfileView: Component<ProfileViewProps> = (props) => {
</div>
</div>
)}
</Show>
</Show>
</div>
</div>
)
}
Expand Down
Loading