Skip to content

Commit c436c2e

Browse files
emir-karabegemir-karabeg
authored
feat(settings): collapse by default (#714)
* feat: collapse settings added for console * ran migrations * fix: added back debug to store
1 parent 60e905c commit c436c2e

File tree

9 files changed

+5714
-111
lines changed

9 files changed

+5714
-111
lines changed

‎apps/sim/app/api/users/me/settings/route.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ const logger = createLogger('UserSettingsAPI')
1111

1212
const SettingsSchema = z.object({
1313
theme: z.enum(['system', 'light', 'dark']).optional(),
14-
debugMode: z.boolean().optional(),
1514
autoConnect: z.boolean().optional(),
1615
autoFillEnvVars: z.boolean().optional(),
1716
autoPan: z.boolean().optional(),
17+
consoleExpandedByDefault: z.boolean().optional(),
1818
telemetryEnabled: z.boolean().optional(),
1919
telemetryNotifiedUser: z.boolean().optional(),
2020
emailPreferences: z
@@ -30,10 +30,10 @@ const SettingsSchema = z.object({
3030
// Default settings values
3131
const defaultSettings = {
3232
theme: 'system',
33-
debugMode: false,
3433
autoConnect: true,
3534
autoFillEnvVars: true,
3635
autoPan: true,
36+
consoleExpandedByDefault: true,
3737
telemetryEnabled: true,
3838
telemetryNotifiedUser: false,
3939
emailPreferences: {},
@@ -64,10 +64,10 @@ export async function GET() {
6464
{
6565
data: {
6666
theme: userSettings.theme,
67-
debugMode: userSettings.debugMode,
6867
autoConnect: userSettings.autoConnect,
6968
autoFillEnvVars: userSettings.autoFillEnvVars,
7069
autoPan: userSettings.autoPan,
70+
consoleExpandedByDefault: userSettings.consoleExpandedByDefault,
7171
telemetryEnabled: userSettings.telemetryEnabled,
7272
telemetryNotifiedUser: userSettings.telemetryNotifiedUser,
7373
emailPreferences: userSettings.emailPreferences ?? {},

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/console/components/console-entry/console-entry.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { Button } from '@/components/ui/button'
1515
import { createLogger } from '@/lib/logs/console-logger'
1616
import { getBlock } from '@/blocks'
1717
import type { ConsoleEntry as ConsoleEntryType } from '@/stores/panel/console/types'
18+
import { useGeneralStore } from '@/stores/settings/general/store'
1819
import { CodeDisplay } from '../code-display/code-display'
1920
import { JSONView } from '../json-view/json-view'
2021

@@ -164,7 +165,8 @@ const ImagePreview = ({
164165
}
165166

166167
export function ConsoleEntry({ entry, consoleWidth }: ConsoleEntryProps) {
167-
const [isExpanded, setIsExpanded] = useState(true) // Default expanded
168+
const isConsoleExpandedByDefault = useGeneralStore((state) => state.isConsoleExpandedByDefault)
169+
const [isExpanded, setIsExpanded] = useState(isConsoleExpandedByDefault)
168170
const [showCopySuccess, setShowCopySuccess] = useState(false)
169171
const [showInput, setShowInput] = useState(false) // State for input/output toggle
170172
const [isPlaying, setIsPlaying] = useState(false)

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx‎

Lines changed: 49 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,11 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
1616
import { useGeneralStore } from '@/stores/settings/general/store'
1717

1818
const TOOLTIPS = {
19-
debugMode: 'Enable visual debugging information during execution.',
2019
autoConnect: 'Automatically connect nodes.',
2120
autoFillEnvVars: 'Automatically fill API keys.',
2221
autoPan: 'Automatically pan to active blocks during workflow execution.',
22+
consoleExpandedByDefault:
23+
'Show console entries expanded by default. When disabled, entries will be collapsed by default.',
2324
}
2425

2526
export function General() {
@@ -29,15 +30,26 @@ export function General() {
2930
const error = useGeneralStore((state) => state.error)
3031
const theme = useGeneralStore((state) => state.theme)
3132
const isAutoConnectEnabled = useGeneralStore((state) => state.isAutoConnectEnabled)
32-
const isDebugModeEnabled = useGeneralStore((state) => state.isDebugModeEnabled)
3333
const isAutoFillEnvVarsEnabled = useGeneralStore((state) => state.isAutoFillEnvVarsEnabled)
3434
const isAutoPanEnabled = useGeneralStore((state) => state.isAutoPanEnabled)
35+
const isConsoleExpandedByDefault = useGeneralStore((state) => state.isConsoleExpandedByDefault)
36+
37+
// Loading states
38+
const isAutoConnectLoading = useGeneralStore((state) => state.isAutoConnectLoading)
39+
const isAutoFillEnvVarsLoading = useGeneralStore((state) => state.isAutoFillEnvVarsLoading)
40+
const isAutoPanLoading = useGeneralStore((state) => state.isAutoPanLoading)
41+
const isConsoleExpandedByDefaultLoading = useGeneralStore(
42+
(state) => state.isConsoleExpandedByDefaultLoading
43+
)
44+
const isThemeLoading = useGeneralStore((state) => state.isThemeLoading)
3545

3646
const setTheme = useGeneralStore((state) => state.setTheme)
3747
const toggleAutoConnect = useGeneralStore((state) => state.toggleAutoConnect)
38-
const toggleDebugMode = useGeneralStore((state) => state.toggleDebugMode)
3948
const toggleAutoFillEnvVars = useGeneralStore((state) => state.toggleAutoFillEnvVars)
4049
const toggleAutoPan = useGeneralStore((state) => state.toggleAutoPan)
50+
const toggleConsoleExpandedByDefault = useGeneralStore(
51+
(state) => state.toggleConsoleExpandedByDefault
52+
)
4153
const loadSettings = useGeneralStore((state) => state.loadSettings)
4254

4355
useEffect(() => {
@@ -47,31 +59,31 @@ export function General() {
4759
loadData()
4860
}, [loadSettings, retryCount])
4961

50-
const handleThemeChange = (value: 'system' | 'light' | 'dark') => {
51-
setTheme(value)
62+
const handleThemeChange = async (value: 'system' | 'light' | 'dark') => {
63+
await setTheme(value)
5264
}
5365

54-
const handleDebugModeChange = (checked: boolean) => {
55-
if (checked !== isDebugModeEnabled) {
56-
toggleDebugMode()
66+
const handleAutoConnectChange = async (checked: boolean) => {
67+
if (checked !== isAutoConnectEnabled && !isAutoConnectLoading) {
68+
await toggleAutoConnect()
5769
}
5870
}
5971

60-
const handleAutoConnectChange = (checked: boolean) => {
61-
if (checked !== isAutoConnectEnabled) {
62-
toggleAutoConnect()
72+
const handleAutoFillEnvVarsChange = async (checked: boolean) => {
73+
if (checked !== isAutoFillEnvVarsEnabled && !isAutoFillEnvVarsLoading) {
74+
await toggleAutoFillEnvVars()
6375
}
6476
}
6577

66-
const handleAutoFillEnvVarsChange = (checked: boolean) => {
67-
if (checked !== isAutoFillEnvVarsEnabled) {
68-
toggleAutoFillEnvVars()
78+
const handleAutoPanChange = async (checked: boolean) => {
79+
if (checked !== isAutoPanEnabled && !isAutoPanLoading) {
80+
await toggleAutoPan()
6981
}
7082
}
7183

72-
const handleAutoPanChange = (checked: boolean) => {
73-
if (checked !== isAutoPanEnabled) {
74-
toggleAutoPan()
84+
const handleConsoleExpandedByDefaultChange = async (checked: boolean) => {
85+
if (checked !== isConsoleExpandedByDefault && !isConsoleExpandedByDefaultLoading) {
86+
await toggleConsoleExpandedByDefault()
7587
}
7688
}
7789

@@ -111,7 +123,11 @@ export function General() {
111123
Theme
112124
</Label>
113125
</div>
114-
<Select value={theme} onValueChange={handleThemeChange} disabled={isLoading}>
126+
<Select
127+
value={theme}
128+
onValueChange={handleThemeChange}
129+
disabled={isLoading || isThemeLoading}
130+
>
115131
<SelectTrigger id='theme-select' className='w-[180px]'>
116132
<SelectValue placeholder='Select theme' />
117133
</SelectTrigger>
@@ -122,35 +138,6 @@ export function General() {
122138
</SelectContent>
123139
</Select>
124140
</div>
125-
<div className='flex items-center justify-between py-1'>
126-
<div className='flex items-center gap-2'>
127-
<Label htmlFor='debug-mode' className='font-medium'>
128-
Debug mode
129-
</Label>
130-
<Tooltip>
131-
<TooltipTrigger asChild>
132-
<Button
133-
variant='ghost'
134-
size='sm'
135-
className='h-7 p-1 text-gray-500'
136-
aria-label='Learn more about debug mode'
137-
disabled={isLoading}
138-
>
139-
<Info className='h-5 w-5' />
140-
</Button>
141-
</TooltipTrigger>
142-
<TooltipContent side='top' className='max-w-[300px] p-3'>
143-
<p className='text-sm'>{TOOLTIPS.debugMode}</p>
144-
</TooltipContent>
145-
</Tooltip>
146-
</div>
147-
<Switch
148-
id='debug-mode'
149-
checked={isDebugModeEnabled}
150-
onCheckedChange={handleDebugModeChange}
151-
disabled={isLoading}
152-
/>
153-
</div>
154141
<div className='flex items-center justify-between py-1'>
155142
<div className='flex items-center gap-2'>
156143
<Label htmlFor='auto-connect' className='font-medium'>
@@ -163,7 +150,7 @@ export function General() {
163150
size='sm'
164151
className='h-7 p-1 text-gray-500'
165152
aria-label='Learn more about auto-connect feature'
166-
disabled={isLoading}
153+
disabled={isLoading || isAutoConnectLoading}
167154
>
168155
<Info className='h-5 w-5' />
169156
</Button>
@@ -177,7 +164,7 @@ export function General() {
177164
id='auto-connect'
178165
checked={isAutoConnectEnabled}
179166
onCheckedChange={handleAutoConnectChange}
180-
disabled={isLoading}
167+
disabled={isLoading || isAutoConnectLoading}
181168
/>
182169
</div>
183170
<div className='flex items-center justify-between py-1'>
@@ -192,7 +179,7 @@ export function General() {
192179
size='sm'
193180
className='h-7 p-1 text-gray-500'
194181
aria-label='Learn more about auto-fill environment variables'
195-
disabled={isLoading}
182+
disabled={isLoading || isAutoFillEnvVarsLoading}
196183
>
197184
<Info className='h-5 w-5' />
198185
</Button>
@@ -206,38 +193,38 @@ export function General() {
206193
id='auto-fill-env-vars'
207194
checked={isAutoFillEnvVarsEnabled}
208195
onCheckedChange={handleAutoFillEnvVarsChange}
209-
disabled={isLoading}
196+
disabled={isLoading || isAutoFillEnvVarsLoading}
210197
/>
211198
</div>
212-
{/* <div className='flex items-center justify-between py-1'>
199+
<div className='flex items-center justify-between py-1'>
213200
<div className='flex items-center gap-2'>
214-
<Label htmlFor='auto-pan' className='font-medium'>
215-
Auto-pan during execution
201+
<Label htmlFor='console-expanded-by-default' className='font-medium'>
202+
Console expanded by default
216203
</Label>
217204
<Tooltip>
218205
<TooltipTrigger asChild>
219206
<Button
220207
variant='ghost'
221208
size='sm'
222209
className='h-7 p-1 text-gray-500'
223-
aria-label='Learn more about auto-pan feature'
224-
disabled={isLoading}
210+
aria-label='Learn more about console expanded by default'
211+
disabled={isLoading || isConsoleExpandedByDefaultLoading}
225212
>
226213
<Info className='h-5 w-5' />
227214
</Button>
228215
</TooltipTrigger>
229216
<TooltipContent side='top' className='max-w-[300px] p-3'>
230-
<p className='text-sm'>{TOOLTIPS.autoPan}</p>
217+
<p className='text-sm'>{TOOLTIPS.consoleExpandedByDefault}</p>
231218
</TooltipContent>
232219
</Tooltip>
233220
</div>
234221
<Switch
235-
id='auto-pan'
236-
checked={isAutoPanEnabled}
237-
onCheckedChange={handleAutoPanChange}
238-
disabled={isLoading}
222+
id='console-expanded-by-default'
223+
checked={isConsoleExpandedByDefault}
224+
onCheckedChange={handleConsoleExpandedByDefaultChange}
225+
disabled={isLoading || isConsoleExpandedByDefaultLoading}
239226
/>
240-
</div> */}
227+
</div>
241228
</>
242229
)}
243230
</div>

‎apps/sim/db/migrations/0055_amused_ender_wiggin.sql‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
ALTER TABLE "settings" ADD COLUMN "console_expanded_by_default" boolean DEFAULT true NOT NULL;--> statement-breakpoint
2+
ALTER TABLE "settings" DROP COLUMN "debug_mode";

0 commit comments

Comments
 (0)