Skip to content

Commit 83133c6

Browse files
sachasayanhannesrudolph
sachasayan
and
hannesrudolph
authored
UI top down homescreen (RooCodeInc#2951)
* isotrUpdate welcome screen UI components and fix unused variable * Save collapsibility. * Add persistence, locales. * Top layout, expanded tips. * Minimal 'tasks' language. * Adjust announcement positioning/dimensions. * Fix tests, defaults. * Fix translations. * Compromise-compromise. * Final tweaks. * More tweaks. * More tweaks. * Issues fix. * Update translations, remove debug. * Fix transparency issue. --------- Co-authored-by: hannesrudolph <hrudolph@gmail.com>
1 parent de22566 commit 83133c6

50 files changed

Lines changed: 632 additions & 301 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/core/config/ContextProxy.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export class ContextProxy {
5353
public async initialize() {
5454
for (const key of GLOBAL_STATE_KEYS) {
5555
try {
56+
// Revert to original assignment
5657
this.stateCache[key] = this.originalContext.globalState.get(key)
5758
} catch (error) {
5859
logger.error(`Error loading global ${key}: ${error instanceof Error ? error.message : String(error)}`)

‎src/core/webview/ClineProvider.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1213,6 +1213,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
12131213
language,
12141214
maxReadFileLine,
12151215
terminalCompressProgressBar,
1216+
historyPreviewCollapsed,
12161217
} = await this.getState()
12171218

12181219
const telemetryKey = process.env.POSTHOG_API_KEY
@@ -1298,6 +1299,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
12981299
settingsImportedAt: this.settingsImportedAt,
12991300
terminalCompressProgressBar: terminalCompressProgressBar ?? true,
13001301
hasSystemPromptOverride,
1302+
historyPreviewCollapsed: historyPreviewCollapsed ?? false,
13011303
}
13021304
}
13031305

@@ -1386,6 +1388,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
13861388
telemetrySetting: stateValues.telemetrySetting || "unset",
13871389
showRooIgnoredFiles: stateValues.showRooIgnoredFiles ?? true,
13881390
maxReadFileLine: stateValues.maxReadFileLine ?? 500,
1391+
historyPreviewCollapsed: stateValues.historyPreviewCollapsed ?? false,
13891392
}
13901393
}
13911394

‎src/core/webview/webviewMessageHandler.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -843,6 +843,10 @@ export const webviewMessageHandler = async (provider: ClineProvider, message: We
843843
await updateGlobalState("maxReadFileLine", message.value)
844844
await provider.postStateToWebview()
845845
break
846+
case "setHistoryPreviewCollapsed": // Add the new case handler
847+
await updateGlobalState("historyPreviewCollapsed", message.bool ?? false)
848+
// No need to call postStateToWebview here as the UI already updated optimistically
849+
break
846850
case "toggleApiConfigPin":
847851
if (message.text) {
848852
const currentPinned = getGlobalState("pinnedApiConfigs") ?? {}

‎src/exports/roo-code.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -287,6 +287,7 @@ type GlobalSettings = {
287287
}
288288
| undefined
289289
enhancementApiConfigId?: string | undefined
290+
historyPreviewCollapsed?: boolean | undefined
290291
}
291292

292293
type ClineMessage = {

‎src/exports/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,7 @@ type GlobalSettings = {
290290
}
291291
| undefined
292292
enhancementApiConfigId?: string | undefined
293+
historyPreviewCollapsed?: boolean | undefined
293294
}
294295

295296
export type { GlobalSettings }

‎src/schemas/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -573,6 +573,7 @@ export const globalSettingsSchema = z.object({
573573
customModePrompts: customModePromptsSchema.optional(),
574574
customSupportPrompts: customSupportPromptsSchema.optional(),
575575
enhancementApiConfigId: z.string().optional(),
576+
historyPreviewCollapsed: z.boolean().optional(),
576577
})
577578

578579
export type GlobalSettings = z.infer<typeof globalSettingsSchema>
@@ -650,6 +651,7 @@ const globalSettingsRecord: GlobalSettingsRecord = {
650651
customSupportPrompts: undefined,
651652
enhancementApiConfigId: undefined,
652653
cachedChromeHostUrl: undefined,
654+
historyPreviewCollapsed: undefined,
653655
}
654656

655657
export const GLOBAL_SETTINGS_KEYS = Object.keys(globalSettingsRecord) as Keys<GlobalSettings>[]

‎src/shared/ExtensionMessage.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export interface ExtensionMessage {
6666
| "fileSearchResults"
6767
| "toggleApiConfigPin"
6868
| "acceptInput"
69+
| "setHistoryPreviewCollapsed"
6970
text?: string
7071
action?:
7172
| "chatButtonClicked"
@@ -197,6 +198,7 @@ export type ExtensionState = Pick<
197198

198199
renderContext: "sidebar" | "editor"
199200
settingsImportedAt?: number
201+
historyPreviewCollapsed?: boolean
200202
}
201203

202204
export type { ClineMessage, ClineAsk, ClineSay }

‎src/shared/WebviewMessage.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ export interface WebviewMessage {
124124
| "maxReadFileLine"
125125
| "searchFiles"
126126
| "toggleApiConfigPin"
127+
| "setHistoryPreviewCollapsed"
127128
text?: string
128129
disabled?: boolean
129130
askResponse?: ClineAskResponse
@@ -150,6 +151,7 @@ export interface WebviewMessage {
150151
requestId?: string
151152
ids?: string[]
152153
hasSystemPromptOverride?: boolean
154+
historyPreviewCollapsed?: boolean
153155
}
154156

155157
export const checkoutDiffPayloadSchema = z.object({

‎webview-ui/src/App.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,6 @@ const App = () => {
123123
isHidden={tab !== "chat"}
124124
showAnnouncement={showAnnouncement}
125125
hideAnnouncement={() => setShowAnnouncement(false)}
126-
showHistoryView={() => switchTab("history")}
127126
/>
128127
<HumanRelayDialog
129128
isOpen={humanRelayDialogState.isOpen}

‎webview-ui/src/components/chat/Announcement.tsx‎

Lines changed: 60 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,12 @@ import { useAppTranslation } from "@/i18n/TranslationContext"
44
import { Trans } from "react-i18next"
55

66
interface AnnouncementProps {
7-
version: string
87
hideAnnouncement: () => void
98
}
109
/*
1110
You must update the latestAnnouncementId in ClineProvider for new announcements to show to users. This new id will be compared with whats in state for the 'last announcement shown', and if it's different then the announcement will render. As soon as an announcement is shown, the id will be updated in state. This ensures that announcements are not shown more than once, even if the user doesn't close it themselves.
1211
*/
13-
const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
12+
const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
1413
const { t } = useAppTranslation()
1514

1615
const discordLink = (
@@ -42,69 +41,71 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
4241
)
4342

4443
return (
45-
<div
46-
style={{
47-
backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
48-
borderRadius: "3px",
49-
padding: "12px 16px",
50-
margin: "5px 15px 5px 15px",
51-
position: "relative",
52-
flexShrink: 0,
53-
}}>
54-
<VSCodeButton
55-
appearance="icon"
56-
onClick={hideAnnouncement}
57-
title={t("chat:announcement.hideButton")}
58-
style={{ position: "absolute", top: "8px", right: "8px" }}>
59-
<span className="codicon codicon-close"></span>
60-
</VSCodeButton>
61-
<h2 style={{ margin: "0 0 8px" }}>{t("chat:announcement.title")}</h2>
44+
<div className="flex flex-col justify-center absolute top-0 bottom-0 left-0 right-0 z-50 p-10 bg-black/50">
45+
<div
46+
style={{
47+
backgroundColor: "var(--vscode-editor-background)",
48+
borderRadius: "3px",
49+
padding: "12px 16px",
50+
margin: "5px 15px 5px 15px",
51+
position: "relative",
52+
flexShrink: 0,
53+
}}>
54+
<VSCodeButton
55+
appearance="icon"
56+
onClick={hideAnnouncement}
57+
title={t("chat:announcement.hideButton")}
58+
style={{ position: "absolute", top: "8px", right: "8px" }}>
59+
<span className="codicon codicon-close"></span>
60+
</VSCodeButton>
61+
<h2 style={{ margin: "0 0 8px" }}>{t("chat:announcement.title")}</h2>
6262

63-
<p style={{ margin: "5px 0px" }}>{t("chat:announcement.description")}</p>
63+
<p style={{ margin: "5px 0px" }}>{t("chat:announcement.description")}</p>
6464

65-
<h3 style={{ margin: "12px 0 5px", fontSize: "14px" }}>{t("chat:announcement.whatsNew")}</h3>
66-
<ul style={{ margin: "5px 0" }}>
67-
<li>
68-
•{" "}
69-
<Trans
70-
i18nKey="chat:announcement.feature1"
71-
components={{
72-
bold: <b />,
73-
code: <code />,
74-
}}
75-
/>
76-
</li>
77-
<li>
78-
•{" "}
79-
<Trans
80-
i18nKey="chat:announcement.feature2"
81-
components={{
82-
bold: <b />,
83-
code: <code />,
84-
}}
85-
/>
86-
</li>
87-
<li>
88-
•{" "}
65+
<h3 style={{ margin: "12px 0 5px", fontSize: "14px" }}>{t("chat:announcement.whatsNew")}</h3>
66+
<ul style={{ margin: "5px 0" }}>
67+
<li>
68+
•{" "}
69+
<Trans
70+
i18nKey="chat:announcement.feature1"
71+
components={{
72+
bold: <b />,
73+
code: <code />,
74+
}}
75+
/>
76+
</li>
77+
<li>
78+
•{" "}
79+
<Trans
80+
i18nKey="chat:announcement.feature2"
81+
components={{
82+
bold: <b />,
83+
code: <code />,
84+
}}
85+
/>
86+
</li>
87+
<li>
88+
•{" "}
89+
<Trans
90+
i18nKey="chat:announcement.feature3"
91+
components={{
92+
bold: <b />,
93+
code: <code />,
94+
}}
95+
/>
96+
</li>
97+
</ul>
98+
99+
<p style={{ margin: "10px 0px 0px" }}>
89100
<Trans
90-
i18nKey="chat:announcement.feature3"
101+
i18nKey="chat:announcement.detailsDiscussLinks"
91102
components={{
92-
bold: <b />,
93-
code: <code />,
103+
discordLink: discordLink,
104+
redditLink: redditLink,
94105
}}
95106
/>
96-
</li>
97-
</ul>
98-
99-
<p style={{ margin: "10px 0px 0px" }}>
100-
<Trans
101-
i18nKey="chat:announcement.detailsDiscussLinks"
102-
components={{
103-
discordLink: discordLink,
104-
redditLink: redditLink,
105-
}}
106-
/>
107-
</p>
107+
</p>
108+
</div>
108109
</div>
109110
)
110111
}

0 commit comments

Comments
 (0)