Always focus the panel when clicked to ensure menu buttons are visible

[hassoncs]

Related GitHub Issue

Kilo-Org/kilocode#619

Description

This fixes an issue where sometimes the menu options do not appear because the panel is not in focus: Kilo-Org/kilocode#619

Adds a new focusPanel command and utility function to allow focusing the active webview panel (tab or sidebar). This command is now triggered when a user clicks on any non-interactive content within the webview, improving user experience by automatically bringing the panel into focus.

Previously clicking the panel would sometimes focus it, sometimes not:

Details

• New Command: Introduced focusPanel command to programmatically focus the webview panel.
• Utility Function: Created src/utils/focusPanel.ts to encapsulate the logic for revealing tab panels or focusing sidebar panels.
• Webview Integration: Added a focusPanelRequest message type to WebviewMessage and implemented a handler in webviewMessageHandler to execute the new focusPanel command.
• User Experience: Implemented a useAddNonInteractiveClickListener hook in webview-ui that sends a focusPanelRequest message to the extension when a click occurs on non-interactive elements, ensuring the webview gains focus.
• Refactor: Modified the focusInput command to utilize the new focusPanel utility, reducing code duplication and centralizing panel focus logic.

Test Procedure

For both the sidebar and popped-out sidebar, I verified clicking now always focused the panel. Also verified the focusInput functionality is still working properly

Type of Change

• 🐛 Bug Fix: Non-breaking change that fixes an issue.
• ✨ New Feature: Non-breaking change that adds functionality.
• 💥 Breaking Change: Fix or feature that would cause existing functionality to not work as expected.
• ♻️ Refactor: Code change that neither fixes a bug nor adds a feature.
• 💅 Style: Changes that do not affect the meaning of the code (white-space, formatting, etc.).
• 📚 Documentation: Updates to documentation files.
• ⚙️ Build/CI: Changes to the build process or CI configuration.
• 🧹 Chore: Other changes that don't modify src or test files.

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Code Quality:
  • My code adheres to the project's style guidelines.
  • There are no new linting errors or warnings (npm run lint).
  • All debug code (e.g., console.log) has been removed.
• Testing:
  • New and/or updated tests have been added to cover my changes.
  • All tests pass locally (npm test).
  • The application builds successfully with my changes.
• Branch Hygiene: My branch is up-to-date (rebased) with the main branch.
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Changeset: A changeset has been created using npm run changeset if this PR includes user-facing changes or dependency updates.
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

---

Important

Adds focusPanel command and utility to ensure webview panel focus on click, with supporting changes in message handling and UI hooks.

• Behavior:
  • Adds focusPanel command to focus webview panel when clicked.
  • Implements focusPanelRequest message in webviewMessageHandler.ts to trigger focusPanel command.
  • Introduces useAddNonInteractiveClickListener hook in App.tsx to send focusPanelRequest on non-interactive clicks.
• Utility:
  • Creates focusPanel.ts to centralize panel focusing logic.
  • Refactors focusInput command in registerCommands.ts to use focusPanel utility.
• Types:
  • Adds focusPanelRequest to WebviewMessage type in WebviewMessage.ts.

^{This description was created by for 99bd5b1ee8ac221c4acce5863983e728dff47ae6. You can customize this summary. It will automatically update as commits are pushed.}

[daniel-lxs]

Hey @hassoncs, Thank you for your contribution!

I tested it and it works pretty well.

[hassoncs]

@daniel-lxs, thank you for the quick review! I made one small change to add a useCallback here:

useAddNonInteractiveClickListener(
		useCallback(() => {
			vscode.postMessage({ type: "focusPanelRequest" })
		}, []),
	)

could you re-approve when you get a chance? I accidentally force-pushed, sorry about that!

[daniel-lxs]

Thank you again!

[mrubens]

@daniel-lxs were you able to repro this issue? I don't believe I've seen it before, but maybe I just didn't notice...

[hassoncs]

Note the the bug was only reproducible in the popped-out version of the Sidebar. The buttons are always visible in the main version.

[mrubens]

Note the the bug was only reproducible in the popped-out version of the Sidebar. The buttons are always visible in the main version.

Ahh got it. I don't usually run it popped out so makes sense that I haven't seen it.

[daniel-lxs]

@mrubens
Yes, I was able to reproduce it, also it feels intuitive to have the tab gain focus when clicking anywhere on it since that's how the code ones behave.