Merge pull request #128 from RivianTrackr/claude/redesign-search-bar-6XsOg

Redesign search bar with explicit Search and AI buttons

Author: RivianTrackr

frontend/css/rivian-tires.css

@@ -60,52 +60,80 @@
   }
 }
 
-/* === AI Tire Advisor (inside filter panel) === */
-.rtg-ai-section {
+/* === Search Row (input + Search button + optional AI button) === */
+.rtg-search-section {
   margin-bottom: 20px;
 }
 
-/* Flex row: [ search-container ] [ submit button ] */
-.rtg-ai-row {
+.rtg-search-row {
   display: flex !important;
   align-items: center !important;
   gap: 8px !important;
 }
 
-/* The search-container fills remaining space; button sits outside */
-.rtg-ai-row .search-container {
+.rtg-search-row .search-container {
   flex: 1 !important;
   min-width: 0 !important;
 }
 
-/* Accent-colored wand icon (uses standard .search-icon absolute positioning) */
-.rtg-ai-icon {
-  color: var(--rtg-accent) !important;
+/* Search button */
+.rtg-search-btn {
+  flex-shrink: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 6px !important;
+  height: 44px !important;
+  min-width: 44px !important;
+  padding: 0 14px !important;
+  margin: 0 !important;
+  background: var(--rtg-bg-input) !important;
+  color: var(--rtg-text-primary) !important;
+  border: 2px solid transparent !important;
+  border-radius: 8px !important;
+  cursor: pointer !important;
+  font-size: 14px !important;
+  font-weight: 600 !important;
+  line-height: 1 !important;
+  white-space: nowrap !important;
+  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
+  position: static !important;
+  transform: none !important;
 }
 
-/* Keep input border-radius rounded on focus */
-.rtg-ai-input:focus {
-  border-radius: 8px !important;
+.rtg-search-btn i {
+  font-size: 14px !important;
 }
 
-/* Submit button outside the bar */
+.rtg-search-btn:hover {
+  background: var(--rtg-accent) !important;
+  color: #fff !important;
+}
+
+.rtg-search-btn:active {
+  transform: scale(0.93) !important;
+}
+
+/* AI submit button */
 .rtg-ai-submit {
   flex-shrink: 0 !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  width: 44px !important;
+  gap: 6px !important;
   height: 44px !important;
   min-width: 44px !important;
-  padding: 0 !important;
+  padding: 0 14px !important;
   margin: 0 !important;
   background: var(--rtg-accent) !important;
   color: #fff !important;
   border: none !important;
   border-radius: 8px !important;
   cursor: pointer !important;
-  font-size: 16px !important;
+  font-size: 14px !important;
+  font-weight: 600 !important;
   line-height: 1 !important;
+  white-space: nowrap !important;
   transition: background-color 0.2s ease, transform 0.1s ease;
   position: static !important;
   transform: none !important;
@@ -240,11 +268,6 @@
   }
 }
 
-/* === Ask AI suggestion in search dropdown === */
-.search-suggestion-ai {
-  border-top: 1px solid var(--rtg-border) !important;
-}
-
 /* === Filter Section — Card style matching compare page === */
 .filter-wrapper {
   background: var(--rtg-bg-card);
@@ -278,18 +301,14 @@
 }
 
 /* === Search === */
-.filter-search {
-  margin-bottom: 20px;
-  width: 100%;
-}
 .search-container {
   position: relative !important;
   width: 100%;
   z-index: 10;
 }
 .search-input {
   width: 100% !important;
-  padding: 12px 16px 12px 40px !important;
+  padding: 12px 16px !important;
   border-radius: 8px !important;
   border: 2px solid transparent !important;
   background-color: var(--rtg-bg-input) !important;
@@ -301,25 +320,12 @@
 .search-input::placeholder {
   color: #9ca3af !important;
 }
-.search-icon {
-  position: absolute;
-  top: 50%;
-  left: 14px;
-  transform: translateY(-50%);
-  color: #9ca3af;
-  font-size: 16px;
-  pointer-events: none;
-  transition: color .15s;
-}
 .search-input:focus {
   outline: none !important;
   background-color: #1f2937 !important;
   box-shadow: 0 0 0 2px var(--rtg-accent) !important;
   border-color: var(--rtg-accent) !important;
-  border-radius: 8px 8px 0 0 !important;
-}
-.search-input:focus + .search-icon {
-  color: var(--rtg-accent) !important;
+  border-radius: 8px !important;
 }
 
 /* === Filter Controls === */
@@ -1935,137 +1941,6 @@ a.rtg-review-card-title-link:hover {
   }
 }
 
-/* === Smart Search Auto-Complete === */
-.search-suggestions-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: var(--rtg-bg-primary);
-  border: 2px solid var(--rtg-accent);
-  border-radius: 0 0 8px 8px;
-  border-top: none;
-  max-height: 320px;
-  overflow-y: auto;
-  z-index: 1000;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
-  animation: slideDown 0.2s ease;
-  backdrop-filter: blur(8px);
-}
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-    max-height: 0;
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-    max-height: 320px;
-  }
-}
-.search-suggestion-item {
-  padding: 14px 16px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  transition: all 0.15s;
-  border-bottom: 1px solid var(--rtg-border);
-  position: relative;
-  background: transparent;
-  color: var(--rtg-text-light);
-}
-.search-suggestion-item:last-child {
-  border-bottom: none;
-  border-radius: 0 0 6px 6px;
-}
-.search-suggestion-item:hover,
-.search-suggestion-item.active {
-  background: linear-gradient(135deg, var(--rtg-accent), var(--rtg-accent-hover)) !important;
-  color: #1a1a1a !important;
-  transform: translateX(2px);
-}
-.search-suggestion-item:hover .suggestion-icon,
-.search-suggestion-item.active .suggestion-icon {
-  color: #1a1a1a !important;
-}
-.search-suggestion-item:hover .suggestion-meta,
-.search-suggestion-item.active .suggestion-meta {
-  color: #1a1a1a !important;
-}
-.search-suggestion-item:hover .suggestion-type-badge,
-.search-suggestion-item.active .suggestion-type-badge {
-  background: rgba(26, 26, 26, 0.2) !important;
-  color: #1a1a1a !important;
-}
-.suggestion-content {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex: 1;
-  min-width: 0;
-}
-.suggestion-icon {
-  color: var(--rtg-text-muted);
-  font-size: 14px;
-  width: 18px;
-  text-align: center;
-  flex-shrink: 0;
-  transition: color 0.15s;
-}
-.suggestion-text {
-  color: var(--rtg-text-light);
-  font-weight: 500;
-  font-size: 14px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-  transition: color 0.15s;
-}
-.suggestion-meta {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-  transition: color 0.15s;
-}
-.suggestion-type-badge {
-  background: var(--rtg-bg-input);
-  color: #9ca3af;
-  font-size: 10px;
-  padding: 3px 6px;
-  border-radius: 4px;
-  text-transform: uppercase;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-  transition: all 0.15s;
-}
-.suggestion-count {
-  color: #6b7280;
-  font-size: 11px;
-  font-weight: 500;
-  transition: color 0.15s;
-}
-.search-suggestions-dropdown::-webkit-scrollbar {
-  width: 6px;
-}
-.search-suggestions-dropdown::-webkit-scrollbar-track {
-  background: var(--rtg-border);
-  border-radius: 0 0 6px 0;
-}
-.search-suggestions-dropdown::-webkit-scrollbar-thumb {
-  background: var(--rtg-accent);
-  border-radius: 3px;
-}
-.search-suggestions-dropdown::-webkit-scrollbar-thumb:hover {
-  background: var(--rtg-accent-hover);
-}
-.suggestion-type-brand .suggestion-icon { color: #fbbf24; }
-.suggestion-type-model .suggestion-icon { color: #60a5fa; }
-.suggestion-type-category .suggestion-icon { color: #a78bfa; }
-.suggestion-type-size .suggestion-icon { color: #34d399; }
 
 /* === Animations === */
 @keyframes fadeIn {
@@ -2137,25 +2012,6 @@ a.rtg-review-card-title-link:hover {
     font-size: 15px;
     line-height: 1.7;
   }
-  .search-suggestions-dropdown {
-    max-height: 250px;
-  }
-  .search-suggestion-item {
-    padding: 12px 14px;
-  }
-  .suggestion-text {
-    font-size: 13px;
-  }
-  .suggestion-meta {
-    gap: 6px;
-  }
-  .suggestion-type-badge {
-    font-size: 9px;
-    padding: 2px 5px;
-  }
-  .suggestion-count {
-    font-size: 10px;
-  }
   #compareBar {
     flex-wrap: wrap;
     justify-content: space-between;
@@ -2277,15 +2133,6 @@ a.rtg-review-card-title-link:hover {
 
 /* === Reduced Motion === */
 @media (prefers-reduced-motion: reduce) {
-  .search-suggestions-dropdown {
-    animation: none;
-  }
-  .search-suggestion-item {
-    transition: none;
-  }
-  .search-suggestion-item:hover {
-    transform: none;
-  }
   .tire-card {
     transition: none;
   }

frontend/css/rivian-tires.min.css

@@ -10,7 +10,7 @@ import { VALIDATION_PATTERNS, NUMERIC_BOUNDS, ALLOWED_SORT_OPTIONS, sanitizeInpu
 import { RTG_ANALYTICS } from './analytics.js';
 import { renderCards, preloadNextPageImages } from './cards.js';
 import { loadTireRatings } from './ratings.js';
-import { isPreciseMatch, hideSearchSuggestions } from './search.js';
+import { isPreciseMatch } from './search.js';
 import { isServerSide, serverSideFilterAndRender } from './server.js';
 
 export function buildFilterIndexes() {
@@ -523,7 +523,6 @@ export function resetFilters() {
     if (slider) updateSliderBackground(slider);
   });
 
-  hideSearchSuggestions();
   delete state.domCache["searchInput"];
   state.lastFilterState = null;