feat(ui): add set indicator toggle with consolidated options menu

Add configurable toggle for button set indicator visibility in the status bar.

Evolved ImportExportMenu (backup-only) into OptionsMenu, consolidating Display settings and Backup sections into a single utility menu.
Designed as an extensible structure to accommodate future display settings like refresh button visibility.

- Backend: setIndicator config schema, adapter, StatusBarManager visibility control, webview message handler
- Frontend: new OptionsMenu (⋮ icon), toggle via DropdownMenuCheckboxItem
- ButtonSetSelector remains dedicated to set selection/management (separation of concerns)

Author: kubrickcode

package.json

@@ -345,6 +345,20 @@
             }
           },
           "type": "object"
+        },
+        "quickCommandButtons.setIndicator": {
+          "default": {
+            "enabled": true
+          },
+          "description": "%config.setIndicator.description%",
+          "properties": {
+            "enabled": {
+              "default": true,
+              "description": "%config.setIndicator.enabled.description%",
+              "type": "boolean"
+            }
+          },
+          "type": "object"
         }
       }
     }

package.nls.json

@@ -34,6 +34,8 @@
   "config.refreshButton.description": "Configuration for the refresh button",
   "config.refreshButton.enabled.description": "Enable/disable the refresh button",
   "config.refreshButton.icon.description": "Icon for the refresh button (supports $(icon-name) syntax)",
+  "config.setIndicator.description": "Configuration for the set indicator button",
+  "config.setIndicator.enabled.description": "Enable/disable the set indicator button in the status bar",
   "config.title": "Quick Command Buttons",
   "view.commands": "Commands",
   "viewsContainer.title": "Quick Commands"

package.nls.ko.json

@@ -34,6 +34,8 @@
   "config.refreshButton.description": "새로고침 버튼 구성",
   "config.refreshButton.enabled.description": "새로고침 버튼 활성화/비활성화",
   "config.refreshButton.icon.description": "새로고침 버튼 아이콘 ($(icon-name) 구문 지원)",
+  "config.setIndicator.description": "세트 표시 버튼 구성",
+  "config.setIndicator.enabled.description": "상태 표시줄에서 세트 표시 버튼 활성화/비활성화",
   "config.title": "Quick Command Buttons",
   "view.commands": "Commands",
   "viewsContainer.title": "Quick Command Buttons"

src/internal/adapters.spec.ts

@@ -234,6 +234,35 @@ describe("adapters", () => {
     });
   });
 
+  describe("getSetIndicatorConfig", () => {
+    it("should return set indicator config from workspace configuration", () => {
+      const mockConfig = {
+        get: vi.fn((key: string) => (key === "setIndicator" ? { enabled: false } : undefined)),
+      };
+
+      (vscode.workspace.getConfiguration as vi.Mock).mockReturnValue(mockConfig);
+
+      const configReader = createVSCodeConfigReader();
+      const result = configReader.getSetIndicatorConfig();
+
+      expect(result).toEqual({ enabled: false });
+      expect(mockConfig.get).toHaveBeenCalledWith("setIndicator");
+    });
+
+    it("should return default config when no set indicator config exists", () => {
+      const mockConfig = {
+        get: vi.fn(() => undefined),
+      };
+
+      (vscode.workspace.getConfiguration as vi.Mock).mockReturnValue(mockConfig);
+
+      const configReader = createVSCodeConfigReader();
+      const result = configReader.getSetIndicatorConfig();
+
+      expect(result).toEqual({ enabled: true });
+    });
+  });
+
   describe("createProjectLocalStorage", () => {
     it("should return empty array when no buttons are stored", () => {
       const mockContext = {

src/internal/adapters.ts

@@ -1,6 +1,6 @@
 import * as vscode from "vscode";
 import { CONFIG_SECTION } from "../pkg/config-constants";
-import { ButtonConfig, RefreshButtonConfig } from "../pkg/types";
+import { ButtonConfig, RefreshButtonConfig, SetIndicatorConfig } from "../pkg/types";
 import { ButtonConfigWithOptionalId, ensureIdsInArray, stripIdsInArray } from "./utils/ensure-id";
 import { validateButtonConfigs, ValidationResult } from "./utils/validate-button-config";
 
@@ -10,6 +10,10 @@ const DEFAULT_REFRESH_CONFIG: RefreshButtonConfig = {
   icon: "$(refresh)",
 };
 
+const DEFAULT_SET_INDICATOR_CONFIG: SetIndicatorConfig = {
+  enabled: true,
+};
+
 export const LOCAL_BUTTONS_STORAGE_KEY = "quickCommandButtons.localButtons";
 
 export type TerminalExecutor = (
@@ -26,6 +30,7 @@ export type ConfigReader = {
   getButtonsFromScope: (target: vscode.ConfigurationTarget) => ButtonConfig[];
   getRawButtonsFromScope: (target: vscode.ConfigurationTarget) => ButtonConfigWithOptionalId[];
   getRefreshConfig: () => RefreshButtonConfig;
+  getSetIndicatorConfig: () => SetIndicatorConfig;
   onConfigChange: (listener: () => void) => vscode.Disposable;
   validateButtons: () => ValidationResult;
 };
@@ -40,6 +45,7 @@ export type QuickPickCreator = <T extends vscode.QuickPickItem>() => vscode.Quic
 export type ConfigWriter = {
   writeButtons: (buttons: ButtonConfig[], target: vscode.ConfigurationTarget) => Promise<void>;
   writeConfigurationTarget: (target: string) => Promise<void>;
+  writeSetIndicatorConfig: (config: SetIndicatorConfig) => Promise<void>;
 };
 
 export type ProjectLocalStorage = {
@@ -54,6 +60,10 @@ const getButtonsFromConfig = (
 const getRefreshConfigFromConfig = (config: vscode.WorkspaceConfiguration): RefreshButtonConfig =>
   config.get("refreshButton") || DEFAULT_REFRESH_CONFIG;
 
+const getSetIndicatorConfigFromConfig = (
+  config: vscode.WorkspaceConfiguration
+): SetIndicatorConfig => config.get("setIndicator") || DEFAULT_SET_INDICATOR_CONFIG;
+
 const isQuickCommandButtonsConfigChange = (event: vscode.ConfigurationChangeEvent): boolean =>
   event.affectsConfiguration(CONFIG_SECTION);
 
@@ -92,6 +102,10 @@ export const createVSCodeConfigReader = (): ConfigReader => ({
     const config = vscode.workspace.getConfiguration(CONFIG_SECTION);
     return getRefreshConfigFromConfig(config);
   },
+  getSetIndicatorConfig: () => {
+    const config = vscode.workspace.getConfiguration(CONFIG_SECTION);
+    return getSetIndicatorConfigFromConfig(config);
+  },
   onConfigChange: (listener: () => void) =>
     vscode.workspace.onDidChangeConfiguration((event) => {
       if (!isQuickCommandButtonsConfigChange(event)) return;
@@ -122,6 +136,11 @@ export const createVSCodeConfigWriter = (): ConfigWriter => ({
     const config = vscode.workspace.getConfiguration(CONFIG_SECTION);
     await config.update("configurationTarget", target, vscode.ConfigurationTarget.Global);
   },
+  // Global scope: set indicator is a user-level display preference, not project-scoped
+  writeSetIndicatorConfig: async (indicatorConfig: SetIndicatorConfig) => {
+    const config = vscode.workspace.getConfiguration(CONFIG_SECTION);
+    await config.update("setIndicator", indicatorConfig, vscode.ConfigurationTarget.Global);
+  },
 });
 
 export const createProjectLocalStorage = (

src/internal/managers/button-set-manager.spec.ts

@@ -28,6 +28,7 @@ describe("ButtonSetManager", () => {
     const mockConfigWriter = {
       writeButtons: vi.fn(),
       writeConfigurationTarget: vi.fn(),
+      writeSetIndicatorConfig: vi.fn(),
     };
     return ConfigManager.create({ configWriter: mockConfigWriter });
   };
@@ -39,6 +40,7 @@ describe("ButtonSetManager", () => {
     getRefreshConfig: vi
       .fn()
       .mockReturnValue({ color: "#00BCD4", enabled: true, icon: "$(refresh)" }),
+    getSetIndicatorConfig: vi.fn().mockReturnValue({ enabled: true }),
     onConfigChange: vi.fn().mockReturnValue({ dispose: vi.fn() }),
     validateButtons: vi.fn().mockReturnValue({ errors: [], hasErrors: false }),
   });

src/internal/managers/config-manager.spec.ts

@@ -1,6 +1,7 @@
 import * as vscode from "vscode";
 import { CONFIGURATION_TARGETS } from "../../pkg/config-constants";
 import { ConfigWriter, ProjectLocalStorage } from "../adapters";
+import { EventBus } from "../event-bus";
 import { ConfigManager } from "./config-manager";
 
 describe("ConfigManager", () => {
@@ -12,6 +13,7 @@ describe("ConfigManager", () => {
   const createMockConfigWriter = (): ConfigWriter => ({
     writeButtons: vi.fn(),
     writeConfigurationTarget: vi.fn(),
+    writeSetIndicatorConfig: vi.fn(),
   });
 
   const createMockLocalStorage = (): ProjectLocalStorage => ({
@@ -229,6 +231,28 @@ describe("ConfigManager", () => {
     });
   });
 
+  describe("updateSetIndicatorConfig", () => {
+    it("should delegate to configWriter.writeSetIndicatorConfig", async () => {
+      const mockConfigWriter = createMockConfigWriter();
+      const configManager = ConfigManager.create({ configWriter: mockConfigWriter });
+      await configManager.updateSetIndicatorConfig({ enabled: false });
+
+      expect(mockConfigWriter.writeSetIndicatorConfig).toHaveBeenCalledWith({ enabled: false });
+    });
+
+    it("should emit config:changed event via EventBus", async () => {
+      const mockConfigWriter = createMockConfigWriter();
+      const eventBus = new EventBus();
+      const listener = vi.fn();
+      eventBus.on("config:changed", listener);
+
+      const configManager = ConfigManager.create({ configWriter: mockConfigWriter, eventBus });
+      await configManager.updateSetIndicatorConfig({ enabled: true });
+
+      expect(listener).toHaveBeenCalledWith({ scope: "global" });
+    });
+  });
+
   describe("getButtonsWithFallback", () => {
     it("should return local buttons when local scope is selected and has buttons", () => {
       const localButtons = [{ command: "echo local", id: "local-btn", name: "Local Command" }];

src/internal/managers/config-manager.ts

@@ -6,7 +6,7 @@ import {
   VS_CODE_CONFIGURATION_TARGETS,
   ConfigurationTargetType,
 } from "../../pkg/config-constants";
-import { ButtonConfig } from "../../pkg/types";
+import { ButtonConfig, SetIndicatorConfig } from "../../pkg/types";
 import { ButtonConfigWithOptionalId, ValidationError } from "../../shared/types";
 import { ConfigWriter, ProjectLocalStorage } from "../adapters";
 import { EventBus } from "../event-bus";
@@ -137,4 +137,9 @@ export class ConfigManager {
     await this.configWriter.writeConfigurationTarget(target);
     this.eventBus?.emit("configTarget:changed", { target });
   }
+
+  async updateSetIndicatorConfig(indicatorConfig: SetIndicatorConfig): Promise<void> {
+    await this.configWriter.writeSetIndicatorConfig(indicatorConfig);
+    this.eventBus?.emit("config:changed", { scope: CONFIGURATION_TARGETS.GLOBAL });
+  }
 }

src/internal/managers/import-export-manager.spec.ts

@@ -62,13 +62,15 @@ describe("ImportExportManager", () => {
       getButtonsFromScope: vi.fn(),
       getRawButtonsFromScope: vi.fn().mockReturnValue([]),
       getRefreshConfig: vi.fn(),
+      getSetIndicatorConfig: vi.fn().mockReturnValue({ enabled: true }),
       onConfigChange: vi.fn(),
       validateButtons: vi.fn().mockReturnValue({ errors: [], hasErrors: false }),
     };
 
     mockConfigWriter = {
       writeButtons: vi.fn().mockResolvedValue(undefined),
       writeConfigurationTarget: vi.fn().mockResolvedValue(undefined),
+      writeSetIndicatorConfig: vi.fn().mockResolvedValue(undefined),
     };
 
     mockLocalStorage = {

src/internal/managers/status-bar-manager.spec.ts

@@ -365,6 +365,9 @@ describe("status-bar-manager", () => {
           enabled: false, // Disable refresh button to simplify tests
           icon: "🔄",
         }),
+        getSetIndicatorConfig: vi.fn().mockReturnValue({
+          enabled: true,
+        }),
       };
 
       mockStatusBarCreator = vi.fn().mockImplementation(() => ({
@@ -570,5 +573,91 @@ describe("status-bar-manager", () => {
         consoleSpy.mockRestore();
       });
     });
+
+    describe("set indicator visibility", () => {
+      type MockStatusBarItem = {
+        color: string | null;
+        command: string;
+        dispose: ReturnType<typeof vi.fn>;
+        show: ReturnType<typeof vi.fn>;
+        text: string;
+        tooltip: string;
+      };
+
+      const getCreatedItems = (): MockStatusBarItem[] =>
+        mockStatusBarCreator.mock.results.map(
+          (r: { value: MockStatusBarItem }) => r.value
+        );
+
+      it("should not create set indicator when enabled is false", () => {
+        mockConfigReader.getSetIndicatorConfig.mockReturnValue({ enabled: false });
+
+        statusBarManager = StatusBarManager.create({
+          configReader: mockConfigReader,
+          statusBarCreator: mockStatusBarCreator,
+          store: mockStore,
+        });
+
+        mockStatusBarCreator.mockClear();
+        statusBarManager.refreshButtons();
+
+        const setIndicator = getCreatedItems().find((item) =>
+          item.text.startsWith("$(layers)")
+        );
+        expect(setIndicator).toBeUndefined();
+      });
+
+      it("should create set indicator when enabled is true", () => {
+        mockConfigReader.getSetIndicatorConfig.mockReturnValue({ enabled: true });
+
+        statusBarManager = StatusBarManager.create({
+          configReader: mockConfigReader,
+          statusBarCreator: mockStatusBarCreator,
+          store: mockStore,
+        });
+
+        mockStatusBarCreator.mockClear();
+        statusBarManager.refreshButtons();
+
+        const setIndicator = getCreatedItems().find((item) =>
+          item.text.startsWith("$(layers)")
+        );
+        expect(setIndicator).toBeDefined();
+      });
+
+      it("should create set indicator by default", () => {
+        statusBarManager = StatusBarManager.create({
+          configReader: mockConfigReader,
+          statusBarCreator: mockStatusBarCreator,
+          store: mockStore,
+        });
+
+        mockStatusBarCreator.mockClear();
+        statusBarManager.refreshButtons();
+
+        const setIndicator = getCreatedItems().find((item) =>
+          item.text.startsWith("$(layers)")
+        );
+        expect(setIndicator).toBeDefined();
+      });
+
+      it("should still create command buttons when set indicator is disabled", () => {
+        mockConfigReader.getSetIndicatorConfig.mockReturnValue({ enabled: false });
+
+        statusBarManager = StatusBarManager.create({
+          configReader: mockConfigReader,
+          statusBarCreator: mockStatusBarCreator,
+          store: mockStore,
+        });
+
+        mockStatusBarCreator.mockClear();
+        statusBarManager.refreshButtons();
+
+        const commandButton = getCreatedItems().find(
+          (item) => item.text === "Test Button 1"
+        );
+        expect(commandButton).toBeDefined();
+      });
+    });
   });
 });