| author |  shivam <91240327+shivamhwp@users.noreply.github.com> 2026-05-01 04:03:06+05:30 |
| committer |  GitHub <noreply@github.com> 2026-04-30 15:33:06-07:00 |
| log | f54f4385e518504f87001afef51bdf3b0be2a5be |
| tree | 6a14ec3ccd8ec07a39f6b7400ceadcff3d65825c |
| parent | e25ce07cc2501e317be78ff2690569734c224b0e |
| signature | Signed by PGP key B5690EEEBB952194 |
Narrow the right sidebar and update task panel and diff panel (#2409)
3 files changed, 11 insertions(+), 9 deletions(-)
apps
web
src
components
settings
- rightPanelLayout.ts
apps/web/src/components/settings/SettingsPanels.tsx+5-5
| ... | @@ -434,7 +434,7 @@ export function useSettingsRestore(onRestored?: () => void) { | ... | @@ -434,7 +434,7 @@ export function useSettingsRestore(onRestored?: () => void) { |
| 434 | ? ["Diff line wrapping"] | 434 | ? ["Diff line wrapping"] |
| 435 | : []), | 435 | : []), |
| 436 | ...(settings.autoOpenPlanSidebar !== DEFAULT_UNIFIED_SETTINGS.autoOpenPlanSidebar | 436 | ...(settings.autoOpenPlanSidebar !== DEFAULT_UNIFIED_SETTINGS.autoOpenPlanSidebar |
| 437 | ? ["Task sidebar"] | 437 | ? ["Auto-open task panel"] |
| 438 | : []), | 438 | : []), |
| 439 | ...(settings.enableAssistantStreaming !== DEFAULT_UNIFIED_SETTINGS.enableAssistantStreaming | 439 | ...(settings.enableAssistantStreaming !== DEFAULT_UNIFIED_SETTINGS.enableAssistantStreaming |
| 440 | ? ["Assistant output"] | 440 | ? ["Assistant output"] |
| ... | @@ -964,12 +964,12 @@ export function GeneralSettingsPanel() { | ... | @@ -964,12 +964,12 @@ export function GeneralSettingsPanel() { |
| 964 | /> | 964 | /> |
| 965 | 965 | ||
| 966 | <SettingsRow | 966 | <SettingsRow |
| 967 | title="Task sidebar" | 967 | title="Auto-open task panel" |
| 968 | description="Open the plan and task sidebar automatically when steps appear." | 968 | description="Open the right-side plan and task panel automatically when steps appear." |
| 969 | resetAction={ | 969 | resetAction={ |
| 970 | settings.autoOpenPlanSidebar !== DEFAULT_UNIFIED_SETTINGS.autoOpenPlanSidebar ? ( | 970 | settings.autoOpenPlanSidebar !== DEFAULT_UNIFIED_SETTINGS.autoOpenPlanSidebar ? ( |
| 971 | <SettingResetButton | 971 | <SettingResetButton |
| 972 | label="task sidebar" | 972 | label="auto-open task panel" |
| 973 | onClick={() => | 973 | onClick={() => |
| 974 | updateSettings({ | 974 | updateSettings({ |
| 975 | autoOpenPlanSidebar: DEFAULT_UNIFIED_SETTINGS.autoOpenPlanSidebar, | 975 | autoOpenPlanSidebar: DEFAULT_UNIFIED_SETTINGS.autoOpenPlanSidebar, |
| ... | @@ -984,7 +984,7 @@ export function GeneralSettingsPanel() { | ... | @@ -984,7 +984,7 @@ export function GeneralSettingsPanel() { |
| 984 | onCheckedChange={(checked) => | 984 | onCheckedChange={(checked) => |
| 985 | updateSettings({ autoOpenPlanSidebar: Boolean(checked) }) | 985 | updateSettings({ autoOpenPlanSidebar: Boolean(checked) }) |
| 986 | } | 986 | } |
| 987 | aria-label="Open the task sidebar automatically" | 987 | aria-label="Open the task panel automatically" |
| 988 | /> | 988 | /> |
| 989 | } | 989 | } |
| 990 | /> | 990 | /> |
apps/web/src/rightPanelLayout.ts+2-2
| ... | @@ -1,3 +1,3 @@ | ... | @@ -1,3 +1,3 @@ |
| 1 | export const RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY = "(max-width: 1180px)"; | 1 | export const RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY = "(max-width: 980px)"; |
| 2 | export const RIGHT_PANEL_SHEET_CLASS_NAME = | 2 | export const RIGHT_PANEL_SHEET_CLASS_NAME = |
| 3 | "w-[min(88vw,820px)] max-w-[820px] p-0 wco:mt-[env(titlebar-area-height)] wco:h-[calc(100%-env(titlebar-area-height))] wco:max-h-[calc(100%-env(titlebar-area-height))]"; | 3 | "w-[min(42vw,28rem)] min-w-80 max-w-[28rem] p-0 max-[760px]:w-[min(88vw,24rem)] max-[760px]:min-w-0 wco:mt-[env(titlebar-area-height)] wco:h-[calc(100%-env(titlebar-area-height))] wco:max-h-[calc(100%-env(titlebar-area-height))]"; |
apps/web/src/routes/_chat.$environmentId.$threadId.tsx+4-2
| ... | @@ -26,8 +26,9 @@ import { Sidebar, SidebarInset, SidebarProvider, SidebarRail } from "~/component | ... | @@ -26,8 +26,9 @@ import { Sidebar, SidebarInset, SidebarProvider, SidebarRail } from "~/component |
| 26 | 26 | ||
| 27 | const DiffPanel = lazy(() => import("../components/DiffPanel")); | 27 | const DiffPanel = lazy(() => import("../components/DiffPanel")); |
| 28 | const DIFF_INLINE_SIDEBAR_WIDTH_STORAGE_KEY = "chat_diff_sidebar_width"; | 28 | const DIFF_INLINE_SIDEBAR_WIDTH_STORAGE_KEY = "chat_diff_sidebar_width"; |
| 29 | const DIFF_INLINE_DEFAULT_WIDTH = "clamp(28rem,48vw,44rem)"; | 29 | const DIFF_INLINE_DEFAULT_WIDTH = "clamp(24rem,34vw,36rem)"; |
| 30 | const DIFF_INLINE_SIDEBAR_MIN_WIDTH = 26 * 16; | 30 | const DIFF_INLINE_SIDEBAR_MIN_WIDTH = 22 * 16; |
| 31 | const DIFF_INLINE_SIDEBAR_MAX_WIDTH = 36 * 16; | ||
| 31 | const COMPOSER_COMPACT_MIN_LEFT_CONTROLS_WIDTH_PX = 208; | 32 | const COMPOSER_COMPACT_MIN_LEFT_CONTROLS_WIDTH_PX = 208; |
| 32 | 33 | ||
| 33 | const DiffLoadingFallback = (props: { mode: DiffPanelMode }) => { | 34 | const DiffLoadingFallback = (props: { mode: DiffPanelMode }) => { |
| ... | @@ -124,6 +125,7 @@ const DiffPanelInlineSidebar = (props: { | ... | @@ -124,6 +125,7 @@ const DiffPanelInlineSidebar = (props: { |
| 124 | collapsible="offcanvas" | 125 | collapsible="offcanvas" |
| 125 | className="border-l border-border bg-card text-foreground" | 126 | className="border-l border-border bg-card text-foreground" |
| 126 | resizable={{ | 127 | resizable={{ |
| 128 | maxWidth: DIFF_INLINE_SIDEBAR_MAX_WIDTH, | ||
| 127 | minWidth: DIFF_INLINE_SIDEBAR_MIN_WIDTH, | 129 | minWidth: DIFF_INLINE_SIDEBAR_MIN_WIDTH, |
| 128 | shouldAcceptWidth: shouldAcceptInlineSidebarWidth, | 130 | shouldAcceptWidth: shouldAcceptInlineSidebarWidth, |
| 129 | storageKey: DIFF_INLINE_SIDEBAR_WIDTH_STORAGE_KEY, | 131 | storageKey: DIFF_INLINE_SIDEBAR_WIDTH_STORAGE_KEY, |