Skip to content

Commit 501a48f

Browse files
antfuclaude
antfu
and
claude
committed
feat: add Advanced settings tab with reset shortcuts/docks/all
Move "Reset All Settings" out of Appearance tab into a new Advanced tab. Add granular reset buttons: Reset Shortcuts (clears shortcut overrides), Reset Docks (restores default visibility, order, pinning), and Reset All (resets everything including appearance, docks, and shortcuts). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent a55e4a5 commit 501a48f

3 files changed

Lines changed: 118 additions & 21 deletions

File tree

‎packages/core/src/client/webcomponents/components/views-builtin/SettingsAdvanced.vue‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<script setup lang="ts">
2+
import type { DevToolsCommandKeybinding } from '@vitejs/devtools-kit'
3+
import type { DocksContext } from '@vitejs/devtools-kit/client'
4+
import type { SharedState } from '@vitejs/devtools-kit/utils/shared-state'
5+
import type { DevToolsDocksUserSettings } from '../../state/dock-settings'
6+
import { DEFAULT_STATE_USER_SETTINGS } from '@vitejs/devtools-kit/constants'
7+
8+
const props = defineProps<{
9+
context: DocksContext
10+
settingsStore: SharedState<DevToolsDocksUserSettings>
11+
}>()
12+
13+
function resetAllSettings() {
14+
// eslint-disable-next-line no-alert
15+
if (confirm('Reset all settings to defaults? This includes appearance, docks, and shortcuts.')) {
16+
props.settingsStore.mutate(() => {
17+
return DEFAULT_STATE_USER_SETTINGS()
18+
})
19+
props.context.commands.shortcutOverrides.mutate((state: Record<string, DevToolsCommandKeybinding[]>) => {
20+
for (const key of Object.keys(state))
21+
delete state[key]
22+
})
23+
}
24+
}
25+
26+
function resetShortcuts() {
27+
// eslint-disable-next-line no-alert
28+
if (confirm('Reset all keyboard shortcuts to defaults?')) {
29+
props.context.commands.shortcutOverrides.mutate((state: Record<string, DevToolsCommandKeybinding[]>) => {
30+
for (const key of Object.keys(state))
31+
delete state[key]
32+
})
33+
}
34+
}
35+
36+
function resetDocks() {
37+
// eslint-disable-next-line no-alert
38+
if (confirm('Reset dock visibility, order, and pinning to defaults?')) {
39+
props.settingsStore.mutate((state) => {
40+
const defaults = DEFAULT_STATE_USER_SETTINGS()
41+
state.docksHidden = defaults.docksHidden
42+
state.docksCategoriesHidden = defaults.docksCategoriesHidden
43+
state.docksCustomOrder = defaults.docksCustomOrder
44+
state.docksPinned = defaults.docksPinned
45+
})
46+
}
47+
}
48+
</script>
49+
50+
<template>
51+
<div class="flex flex-col gap-6">
52+
<!-- Reset Shortcuts -->
53+
<div class="flex items-start gap-4">
54+
<div class="flex-1">
55+
<div class="text-sm">
56+
Reset Keyboard Shortcuts
57+
</div>
58+
<div class="text-xs op50 mt-0.5">
59+
Remove all custom shortcut overrides and restore default keybindings
60+
</div>
61+
</div>
62+
<button
63+
class="px-4 py-2 rounded bg-orange/10 text-orange hover:bg-orange/20 transition-colors flex items-center gap-2 text-sm shrink-0"
64+
@click="resetShortcuts"
65+
>
66+
<div class="i-ph-keyboard-duotone w-4 h-4" />
67+
Reset Shortcuts
68+
</button>
69+
</div>
70+
71+
<!-- Reset Docks -->
72+
<div class="flex items-start gap-4">
73+
<div class="flex-1">
74+
<div class="text-sm">
75+
Reset Dock Settings
76+
</div>
77+
<div class="text-xs op50 mt-0.5">
78+
Restore default dock visibility, order, and pinning
79+
</div>
80+
</div>
81+
<button
82+
class="px-4 py-2 rounded bg-orange/10 text-orange hover:bg-orange/20 transition-colors flex items-center gap-2 text-sm shrink-0"
83+
@click="resetDocks"
84+
>
85+
<div class="i-ph-layout-duotone w-4 h-4" />
86+
Reset Docks
87+
</button>
88+
</div>
89+
90+
<!-- Reset All -->
91+
<div class="border-t border-base pt-6">
92+
<div class="flex items-start gap-4">
93+
<div class="flex-1">
94+
<div class="text-sm">
95+
Reset All Settings
96+
</div>
97+
<div class="text-xs op50 mt-0.5">
98+
Reset everything to defaults including appearance, docks, and shortcuts
99+
</div>
100+
</div>
101+
<button
102+
class="px-4 py-2 rounded bg-red/10 text-red hover:bg-red/20 transition-colors flex items-center gap-2 text-sm shrink-0"
103+
@click="resetAllSettings"
104+
>
105+
<div class="i-ph-arrow-counter-clockwise w-4 h-4" />
106+
Reset All
107+
</button>
108+
</div>
109+
</div>
110+
</div>
111+
</template>

‎packages/core/src/client/webcomponents/components/views-builtin/SettingsAppearance.vue‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import type { DocksContext } from '@vitejs/devtools-kit/client'
33
import type { SharedState } from '@vitejs/devtools-kit/utils/shared-state'
44
import type { DevToolsDocksUserSettings } from '../../state/dock-settings'
5-
import { DEFAULT_STATE_USER_SETTINGS } from '@vitejs/devtools-kit/constants'
65
import { computed } from 'vue'
76
import { sharedStateToRef } from '../../state/docks'
87
import { isDockPopupSupported, requestDockPopupOpen, useIsDockPopupOpen } from '../../state/popup'
@@ -38,15 +37,6 @@ function setDockMode(mode: string) {
3837
panelStore.mode = mode as 'float' | 'edge'
3938
}
4039
}
41-
42-
function resetSettings() {
43-
// eslint-disable-next-line no-alert
44-
if (confirm('Reset all dock settings to defaults?')) {
45-
props.settingsStore.mutate(() => {
46-
return DEFAULT_STATE_USER_SETTINGS()
47-
})
48-
}
49-
}
5040
</script>
5141

5242
<template>
@@ -109,15 +99,4 @@ function resetSettings() {
10999
</div>
110100
</label>
111101
</div>
112-
113-
<!-- Reset -->
114-
<div class="border-t border-base mt-8 pt-6">
115-
<button
116-
class="px-4 py-2 rounded bg-red/10 text-red hover:bg-red/20 transition-colors flex items-center gap-2 text-sm"
117-
@click="resetSettings"
118-
>
119-
<div class="i-ph-arrow-counter-clockwise" />
120-
Reset All Settings
121-
</button>
122-
</div>
123102
</template>

‎packages/core/src/client/webcomponents/components/views-builtin/ViewBuiltinSettings.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import type { DevToolsViewBuiltin } from '@vitejs/devtools-kit'
33
import type { DocksContext } from '@vitejs/devtools-kit/client'
44
import { ref } from 'vue'
5+
import SettingsAdvanced from './SettingsAdvanced.vue'
56
import SettingsAppearance from './SettingsAppearance.vue'
67
import SettingsDocks from './SettingsDocks.vue'
78
import SettingsShortcuts from './SettingsShortcuts.vue'
@@ -15,6 +16,7 @@ const tabs = [
1516
{ id: 'appearance', label: 'Appearance', icon: 'i-ph-paint-brush-duotone' },
1617
{ id: 'shortcuts', label: 'Shortcuts', icon: 'i-ph-keyboard-duotone' },
1718
{ id: 'docks', label: 'Docks', icon: 'i-ph-layout-duotone' },
19+
{ id: 'advanced', label: 'Advanced', icon: 'i-ph-wrench-duotone' },
1820
] as const
1921
2022
type TabId = (typeof tabs)[number]['id']
@@ -62,6 +64,11 @@ const settingsStore = props.context.docks.settings
6264
:context="context"
6365
:settings-store="settingsStore"
6466
/>
67+
<SettingsAdvanced
68+
v-if="activeTab === 'advanced'"
69+
:context="context"
70+
:settings-store="settingsStore"
71+
/>
6572
</div>
6673
</div>
6774
</div>

0 commit comments

Comments
 (0)