Redesign search UX: Make main box trigger traditional search with AI option

- Convert home page main search box to trigger traditional search modal instead of chat
- Remove confusing duplicate magnifying glass icons (reduced from 3 to 1 on page)
- Add AI Copilot toggle button within search modal for users who want AI assistance
- Main search box now shows 'Search Redis documentation...' placeholder
- AI Copilot becomes secondary option accessible via 🤖 AI button in search modal
- Clicking AI button transfers current query to chat interface
- Maintains all existing keyboard shortcuts and functionality
- Improves UX by making traditional search the primary action
- Reduces cognitive load by consolidating search interfaces

This addresses feedback about confusing multiple search icons and better prioritizes traditional documentation search while keeping AI copilot easily accessible.

Author: mich-elle-luna

layouts/home.html

@@ -16,20 +16,14 @@ <h1 class="text-5xl font-medium">{{ .Title }}</h1>
       {{ with .Params.description }}
       <p class="text-xl md:text-2xl">{{ . | markdownify }}</p>
       {{ end }}
-      <div class="flex flex-row items-center gap-4 w-full md:w-4/5">
-        <form class="flex flex-row items-center border border-white rounded-md px-6 gap-6 w-full bg-redis-ink-900" action="/chat">
-          <label class="" for="search-home" id="search-label-home">
-            {{ partial "icons/search.html" }}
-          </label>
-          <input id="seach-home" name="q" class="appearance-none bg-transparent text-base sm:text-lg text-white placeholder-white w-full h-16 focus:outline-none"
-                 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-                 placeholder="Ask our AI-powered Redis copilot a question…" maxlength="500" type="text" value="" tabindex=""/>
-          <!--<input type="submit" class="hover:text-redis-pen-300" value="&#x23CE;"/>-->
-          <input class="invisible" type="submit" class="hover:text-redis-pen-300" value=""/>
-        </form>
-        <button id="search-button-home" type="button" class="flex-shrink-0 p-3 border border-white rounded-md bg-redis-ink-900 hover:bg-white hover:text-redis-ink-900 transition-colors" title="Search documentation (Ctrl+K)">
+      <div class="flex flex-row items-center border border-white rounded-md px-6 gap-6 w-full md:w-4/5 bg-redis-ink-900 cursor-pointer" id="search-trigger-home">
+        <label class="" for="search-home" id="search-label-home">
           {{ partial "icons/search.html" }}
-        </button>
+        </label>
+        <div class="appearance-none bg-transparent text-base sm:text-lg text-white placeholder-white w-full h-16 flex items-center"
+             autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+          Search Redis documentation…
+        </div>
       </div>
     </div>
   </header>

layouts/partials/search-modal.html

@@ -23,6 +23,9 @@
           <path d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" />
         </svg>
       </button>
+      <button id="ai-copilot-toggle" type="button" style="height: calc(3rem - 2px);" class="px-3 border border-redis-pen-800 rounded-md bg-white hover:bg-redis-yellow-100 transition-colors flex items-center gap-2" title="Switch to AI Copilot">
+        <span class="text-sm">🤖 AI</span>
+      </button>
       <select id="search-select" style="height: calc(3rem - 2px);" class="w-2/5 pl-3 grow-0 border border-redis-pen-800 rounded-md search-filter bg-white text-left pr-8 appearance-none hidden md:block" autocomplete="off">
         <option value="all" selected>All products</option>
         <option value="rs">Redis Enterprise</option>
@@ -369,10 +372,19 @@
 
     // Click handler function
     function clickHandler(event) {
-      if (event.target.closest('#search-button') || event.target.closest('#search-button-home')) {
+      if (event.target.closest('#search-button') || event.target.closest('#search-trigger-home')) {
         startSearch()
       } else if (event.target.closest('#search-cancel') || event.target.matches('#search-container')) {
         stopSearch()
+      } else if (event.target.closest('#ai-copilot-toggle')) {
+        // Get the current search query
+        const searchQuery = searchInput.value.trim()
+        // Redirect to chat with the query
+        if (searchQuery) {
+          window.location.href = `/chat?q=${encodeURIComponent(searchQuery)}`
+        } else {
+          window.location.href = '/chat'
+        }
       }
     }