fix: minor UI adjustments

src/components/Toolbar.test.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import Toolbar from './Toolbar';
+
+const storeState = {
+  projectName: 'Test Project',
+  setProjectName: vi.fn(),
+  savedProjectName: 'Test Project',
+  setSavedProjectName: vi.fn(),
+  bpm: 120,
+  timeSignature: { numerator: 4, denominator: 4 },
+  keySignature: 'C major',
+  setStatus: vi.fn(),
+  isPlaying: false,
+  isPreparingPlayback: false,
+  startPlaying: vi.fn(),
+  stopTransport: vi.fn(),
+  setPlayheadPosition: vi.fn(),
+  currentTime: '0:00',
+  setBpm: vi.fn(),
+  setTimeSignature: vi.fn(),
+  setKeySignature: vi.fn(),
+  maxBars: 32,
+  setMaxBars: vi.fn(),
+  barWidthMultiplier: 1,
+  setBarWidthMultiplier: vi.fn(),
+  isLooping: false,
+  toggleLoop: vi.fn(),
+  canUndo: false,
+  canRedo: false,
+  undoDescription: null,
+  redoDescription: null,
+  undo: vi.fn(),
+  redo: vi.fn(),
+  toggleChatBox: vi.fn(),
+  toggleSettings: vi.fn(),
+  toggleKGOnePanel: vi.fn(),
+  toggleEventListPanel: vi.fn(),
+  activateSidePanel: vi.fn(),
+  showKGOnePanel: true,
+  showEventListPanel: false,
+  showChatBox: true,
+  showSettings: true,
+  cleanupProjectState: vi.fn(),
+  toggleMetronome: vi.fn(),
+  isMetronomeEnabled: false,
+  isRecording: false,
+  startRecording: vi.fn(),
+  stopRecording: vi.fn(),
+  showPianoRoll: false,
+  setShowPianoRoll: vi.fn(),
+  activeRegionId: null,
+  setActiveRegionId: vi.fn(),
+  selectedRegionIds: [],
+  selectedTrackId: null,
+  playheadPosition: 0,
+  refreshProjectState: vi.fn(),
+  requestMainContentScroll: vi.fn(),
+  requestPianoRollScroll: vi.fn(),
+  tracks: [],
+};
+
+type StoreState = typeof storeState;
+type StoreSelector = (state: StoreState) => unknown;
+
+vi.mock('../stores/projectStore', () => ({
+  useProjectStore: Object.assign(
+    (selector?: StoreSelector) => (selector ? selector(storeState) : storeState),
+    { getState: () => storeState }
+  ),
+}));
+
+vi.mock('../constants/uiConstants', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../constants/uiConstants')>();
+  return {
+    ...actual,
+    DEBUG_MODE: { ...actual.DEBUG_MODE, TOOLBAR: false },
+  };
+});
+
+vi.mock('../constants/coreConstants', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../constants/coreConstants')>();
+  return {
+    ...actual,
+    KEY_SIGNATURE_MAP: { ...actual.KEY_SIGNATURE_MAP, 'C major': [] },
+  };
+});
+
+vi.mock('../util/saveUtil', () => ({ saveProject: vi.fn() }));
+vi.mock('../core/io/KGProjectStorage', () => ({ KGProjectStorage: { getInstance: vi.fn() } }));
+vi.mock('../util/projectNameUtil', () => ({
+  isValidProjectName: vi.fn(() => true),
+  isReservedProjectName: vi.fn(() => false),
+  RESERVED_PROJECT_NAME: 'Untitled Project',
+}));
+vi.mock('../core/KGCore', () => ({ KGCore: { instance: vi.fn(() => ({ getCurrentProject: vi.fn(() => ({ getTracks: () => [] })) })) } }));
+vi.mock('../core/midi-input/KGMidiInput', () => ({ KGMidiInput: { instance: vi.fn(() => ({ getConnectedInputCount: () => 0 })) } }));
+vi.mock('../core/region/KGMidiRegion', () => ({ KGMidiRegion: class {} }));
+vi.mock('../core/track/KGAudioTrack', () => ({ KGAudioTrack: class {} }));
+vi.mock('class-transformer', () => ({
+  plainToInstance: vi.fn(),
+  Expose: () => () => undefined,
+  Type: () => () => undefined,
+  Transform: () => () => undefined,
+}));
+vi.mock('../core/state/KGMainContentState', () => ({ KGMainContentState: {} }));
+vi.mock('../util/regionDeleteUtil', () => ({ regionDeleteManager: { deleteSelectedRegions: vi.fn(() => false) } }));
+vi.mock('../core/commands/region/SplitRegionCommand', () => ({ SplitRegionCommand: class {} }));
+vi.mock('../core/commands/region/MergeMidiRegionsCommand', () => ({ MergeMidiRegionsCommand: class {} }));
+vi.mock('../util/copyPasteUtil', () => ({
+  handleCopyOperation: vi.fn(() => false),
+  handlePasteOperation: vi.fn(() => false),
+}));
+vi.mock('../util/midiUtil', () => ({
+  convertProjectToMidi: vi.fn(),
+  convertMidiToProject: vi.fn(),
+}));
+vi.mock('../core/audio-interface/KGOfflineRenderer', () => ({ KGOfflineRenderer: { instance: vi.fn(() => ({})) } }));
+vi.mock('./common/KGDropdown', () => ({ default: () => null }));
+vi.mock('./common/FileImportModal', () => ({ default: () => null }));
+vi.mock('./common/LoadingOverlay', () => ({ default: () => null }));
+vi.mock('./common/OpenProjectModal', () => ({ default: () => null }));
+vi.mock('../util/chatUtil', () => ({ clearChatHistoryAndUI: vi.fn() }));
+vi.mock('./common/icons/PianoIcon', () => ({ default: () => <span>piano</span> }));
+vi.mock('./common/icons/MetronomeIcon', () => ({ default: () => <span>metro</span> }));
+vi.mock('../core/config/ConfigManager', () => ({ ConfigManager: { instance: vi.fn(() => ({})) } }));
+vi.mock('../util/dialogUtil', () => ({
+  showAlert: vi.fn(),
+  showChoice: vi.fn(),
+  showConfirm: vi.fn(),
+  showPrompt: vi.fn(),
+  showTimeSigPrompt: vi.fn(),
+}));
+
+describe('Toolbar settings side-panel behavior', () => {
+  beforeEach(() => {
+    storeState.toggleChatBox.mockClear();
+    storeState.toggleKGOnePanel.mockClear();
+    storeState.toggleEventListPanel.mockClear();
+    storeState.activateSidePanel.mockClear();
+    storeState.setStatus.mockClear();
+    storeState.showSettings = true;
+    storeState.showChatBox = true;
+    storeState.showKGOnePanel = true;
+    storeState.showEventListPanel = false;
+  });
+
+  it('suppresses active styling for side-panel buttons while Settings is visible', () => {
+    render(<Toolbar />);
+
+    expect(screen.getByTitle('K.G.One Music Generator')).not.toHaveClass('active');
+    expect(screen.getByTitle('Chat')).not.toHaveClass('active');
+    expect(screen.getByTitle('Event List Editor')).not.toHaveClass('active');
+  });
+
+  it('activates Event List directly instead of toggling when clicked during Settings', () => {
+    render(<Toolbar />);
+
+    fireEvent.click(screen.getByTitle('Event List Editor'));
+
+    expect(storeState.activateSidePanel).toHaveBeenCalledWith('eventList');
+    expect(storeState.toggleEventListPanel).not.toHaveBeenCalled();
+  });
+});