added togle feature, and fix text

[DinaLaptii]

No description provided.

[greptile-apps]

Greptile Summary

This PR adds a "New UI" feature toggle to the settings panel. When enabled, the welcome screen in ChatArea displays richer copy highlighting Deep Research capabilities; when disabled (the default), the original copy is shown unchanged. The implementation follows the established Zustand store pattern used by the existing theme setting — adding state, an action, type definitions, and tests at every layer.

• types.ts / store.ts: newUiEnabled: boolean and setNewUiEnabled are cleanly added to LayoutState/LayoutActions and wired up in the store, consistent with how setTheme is implemented.
• SettingsPanel.tsx: A Switch toggle (already exported from @/adapters/ui) and its label are placed inside the existing settings <Flex> container. The file-level JSDoc comment on line 8 ("Currently only contains appearance/theme settings.") is now stale and should be updated. The newly added elements also have slightly inconsistent indentation relative to their siblings.
• ChatArea.tsx: WelcomeState now reads newUiEnabled via a Zustand selector and conditionally renders the new copy — original copy is preserved as the false branch.
• Tests: All three spec files are well-updated; the selector-based mock pattern in ChatArea.spec.tsx correctly matches how WelcomeState consumes the store.

Confidence Score: 5/5

Safe to merge — no functional defects introduced; only minor style issues remain.

All findings are P2 (stale JSDoc comment and indentation inconsistency in SettingsPanel.tsx). The core logic, store integration, and test coverage are all correct and consistent with existing patterns.

frontends/ui/src/features/layout/components/SettingsPanel.tsx — stale comment and indentation nit worth cleaning up before merge.

Important Files Changed

Filename	Overview
frontends/ui/src/features/layout/types.ts	Adds newUiEnabled: boolean to LayoutState and setNewUiEnabled action to LayoutActions — clean, well-documented additions consistent with existing patterns.
frontends/ui/src/features/layout/store.ts	Adds newUiEnabled: false to initial state and setNewUiEnabled action following the same devtools-backed pattern as setTheme.
frontends/ui/src/features/layout/components/SettingsPanel.tsx	Adds Switch toggle for new UI to the settings panel; has a stale module-level JSDoc comment and slightly inconsistent indentation for the newly added label/switch elements.
frontends/ui/src/features/layout/components/ChatArea.tsx	Conditionally renders a richer welcome message when newUiEnabled is true via a Zustand selector in WelcomeState; logic is correct and the original copy is preserved as the default.
frontends/ui/src/features/layout/store.spec.ts	Adds newUiEnabled to initial-state reset and two tests for setNewUiEnabled; coverage mirrors the existing setTheme test pattern exactly.
frontends/ui/src/features/layout/components/SettingsPanel.spec.tsx	Plumbs newUiEnabled/setNewUiEnabled into all existing mock payloads and adds a toggle interaction test; consistent with the existing spec structure.
frontends/ui/src/features/layout/components/ChatArea.spec.tsx	Adds a module-level useLayoutStore mock using the selector pattern, resets it in beforeEach, and covers the newUiEnabled: true welcome-copy branch with a new test.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User opens Settings Panel] --> B[Clicks New UI Switch]
    B --> C[setNewUiEnabled called\nLayoutStore updated]
    C --> D{newUiEnabled?}
    D -- true --> E[WelcomeState renders\nDeep Research copy\ntext-primary style]
    D -- false --> F[WelcomeState renders\noriginal research copy\ntext-subtle style]

Loading

Comments Outside Diff (1)

1. frontends/ui/src/features/layout/components/SettingsPanel.tsx, line 8 (link)

   Stale module-level comment

   The file-level JSDoc still says "Currently only contains appearance/theme settings." after this PR adds the New UI toggle. This will mislead future readers.

_{Reviews (1): Last reviewed commit: "added togle feature, and fix text" | Re-trigger Greptile}

[greptile-apps]

Inconsistent indentation and missing section wrapper

The <Text> and <Switch> elements are indented with 10 spaces while their siblings (<Text kind="label/semibold/xs"> for "UI Theme Options" and <Select>) use 8 spaces. More importantly, wrapping the "New UI" label and switch in their own <Flex> would give the toggle a visually distinct section matching the theme section above it, and make future additions easier.

Suggested change

	<Text kind="label/semibold/xs" className="text-subtle uppercase">
	New UI
	</Text>
	<Switch
	size="small"
	checked={newUiEnabled}
	onCheckedChange={setNewUiEnabled}
	attributes={{
	SwitchTrack: { 'aria-label': 'Enable new UI' },
	}}
	/>
	<Flex direction="col" gap="3">
	<Text kind="label/semibold/xs" className="text-subtle uppercase">
	New UI
	</Text>
	<Switch
	size="small"
	checked={newUiEnabled}
	onCheckedChange={setNewUiEnabled}
	attributes={{
	SwitchTrack: { 'aria-label': 'Enable new UI' },
	}}
	/>
	</Flex>

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}