Command palette no ticket

app/components/satis/navigation/component.css

@@ -0,0 +1,31 @@
+.navigation-form {
+    @apply flex bg-white w-2/6 rounded-md dark:bg-gray-800 shadow place-self-center border-2;
+}
+
+form {
+    @apply w-full;
+}
+
+.navigation-input input[type="search"] {
+    @apply rounded-md bg-white dark:bg-gray-800 w-full dark:text-gray-300 text-gray-700 border-gray-300 dark:border-gray-500 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none;
+}
+
+ul#results-container {
+    @apply mt-2 space-y-1 bg-white border border-gray-300 rounded-md shadow-md dark:bg-gray-800 dark:border-gray-600;
+}
+
+.result-item {
+    @apply py-2 px-3 text-gray-700 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600 cursor-pointer;
+}
+
+.result-item:hover {
+    @apply bg-gray-100 dark:bg-gray-700;
+}
+
+.noResults {
+    @apply text-sm text-gray-500 dark:text-gray-400 mt-2 hidden;
+}
+
+.noResults.hidden {
+    @apply block;
+}

app/components/satis/navigation/component.html.slim

@@ -0,0 +1,6 @@
+.navigation-form
+  = form_with url: '#', method: :get, remote: true, id: 'search-form' do
+    .navigation-input
+      input type="search" data-action="input->satis-navigation#search" id="search-input" placeholder="Search..."
+    ul#results-container
+    p.noResults.hidden No results found

app/components/satis/navigation/component.rb

@@ -0,0 +1,37 @@
+module Satis
+  module Navigation
+    class Component < Satis::ApplicationComponent
+      # before_action :needed_objects, :extra_tables
+
+      def search(term = nil)
+        queries = []
+        values = []
+
+        queries << "name LIKE ?"
+        values << "%#{term}%"
+
+        needed_tables&.each do |table|
+          queries << "#{table} LIKE ?"
+          values << "%#{term}%"
+        end
+
+        query = queries.join(" OR ")
+
+        needed_objects.where(query, *values)
+      end
+
+      private
+
+      def needed_tables
+        # Define any tables that should be included in the search
+        [brands, users, projects]
+      end
+
+      def needed_objects(objects)
+        # Define the objects that should be included in the search
+        objects
+      end
+
+    end
+  end
+end

app/components/satis/navigation/component_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["input", "results"];
+
+  connect() {}
+
+  search(event) {
+    const query = this.inputTarget.value.trim();
+
+    if (query.length === 0) {
+      this.displayResults([]);
+      return;
+    }
+
+    fetch(`/satis/navigation/search?query=${encodeURIComponent(query)}`)
+      .then(response => response.json())
+      .then(data => this.displayResults(data))
+      .catch(error => console.error("Error fetching results:", error));
+  }
+
+  displayResults(results) {
+    const resultsContainer = this.resultsTarget;
+    resultsContainer.innerHTML = ""; 
+
+    if (results.length > 0) {
+      this.resultsTarget.nextElementSibling.classList.add("hidden");
+
+      results.slice(0, 10).forEach(result => {
+        const item = document.createElement("li");
+        item.textContent = result.name;
+        item.className = "result-item p-2 hover:bg-gray-100 cursor-pointer"; 
+        resultsContainer.appendChild(item);
+      });
+      } 
+    else {
+      this.resultsTarget.nextElementSibling.classList.remove("hidden"); 
+    }
+  }
+}

app/controllers/satis/navigation_controller.rb

@@ -0,0 +1,11 @@
+module Satis
+  class NavigationController < ApplicationController
+    def search
+      term = params[:query]
+      component = Satis::Navigation::Component.new
+      results = component.search(term)
+
+      render json: results.map { |result| { name: result.name } }
+    end
+  end
+end

config/routes.rb

@@ -14,4 +14,8 @@
     end
     resources :documentation
   end
+
+  namespace :satis do
+    get 'navigation/search', to: 'navigation#search'
+  end
 end