[doc] Add Ctrl+K keyboard shortcut to focus search input

[Copilot]

Implements keyboard shortcut functionality for the search component in the Documentation site, allowing users to quickly focus the search input using Ctrl+K (Windows/Linux) or ⌘K (Mac).

Changes Made

Visual Enhancement

• Added a subtle keyboard shortcut hint displayed inside the search input
• Automatically shows the appropriate shortcut based on platform detection:
  • Ctrl+K on Windows/Linux systems
  • ⌘K on Mac systems
• Positioned to not interfere with user input and styled to be unobtrusive

JavaScript Integration

• Created Search.razor.js module that handles global keyboard event listening
• Supports both Ctrl+K and Meta+K (Cmd+K) key combinations
• Prevents default browser behavior when shortcut is activated
• Properly integrates with Blazor component lifecycle

Component Updates

• Enhanced Search.razor.cs with JavaScript interop functionality
• Added platform detection to determine Mac vs non-Mac systems
• Implemented proper disposal pattern to prevent memory leaks
• Added [JSInvokable] method to handle focus requests from JavaScript

Implementation Details

The implementation follows established patterns in the codebase:

• Uses ES6 module exports for JavaScript functionality
• Follows Blazor component lifecycle with OnAfterRenderAsync and DisposeAsync
• Maintains backward compatibility with existing search functionality
• Uses Bootstrap positioning classes for consistent styling

Testing

• ✅ Verified keyboard shortcut works on both Windows and Mac key combinations
• ✅ Confirmed visual hint displays correctly for both platforms
• ✅ Tested proper disposal of event listeners
• ✅ Build verification passed with no compilation errors

This enhancement improves the user experience by providing a familiar keyboard shortcut pattern commonly used in modern web applications and documentation sites.

Fixes #[issue-number]

[!WARNING]

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• huggingface.co
  • Triggering command: /usr/share/dotnet/dotnet /usr/share/dotnet/sdk/9.0.305/MSBuild.dll /noautoresponse /nologo /nodemode:1 /nodeReuse:true /low:false (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[doc] Search - focus with Ctrl+K keyboard shortcut</issue_title> <issue_description>This is not meant as new HxSearchBox feature, but rather a local change in Havit.Blazor.Documentation site.

Inspiration

    const handleCk = (event: KeyboardEvent) => {
      if (event.ctrlKey || event.metaKey) {
        if (event.key?.toLowerCase() === "k") {
          event.preventDefault();
          inputRef.current.focus();
        }
      }
    };

    window.addEventListener("keydown", handleCk);

    return () => {
      window.removeEventListener("keydown", handleCk);
    };

We should add some UX hint, such as

(Might be customized to Cmd+K on MacOS.)

We might consider adding support for keyboard shortcut to HxSearchBox (search in doc might be ported to HxSearchBox instead of current HxAutosuggest implementation).</issue_description>

<agent_instructions>Try a new PR.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

Fixes havit/Havit.Blazor#933

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.