Add autocomplete search and improve navbar UI

config/routes.php

@@ -50,12 +50,14 @@
     $routes->setRouteClass(DashedRoute::class);
 
     $routes->scope('/', function (RouteBuilder $builder): void {
+        $builder->setExtensions(['json']);
         /*
          * Here, we are connecting '/' (base path) to a controller called 'Pages',
          * its action called 'display', and we pass a param to select the view file
          * to use (in this case, templates/Pages/home.php)...
          */
         $builder->connect('/', ['controller' => 'Packages', 'action' => 'index']);
+        $builder->connect('/autocomplete', ['controller' => 'Packages', 'action' => 'autocomplete']);
         $builder->connect('/requirements', ['controller' => 'Pages', 'action' => 'display', 'requirements']);
 
         /*

package.json

@@ -11,6 +11,7 @@
         "build": "vite build"
     },
     "dependencies": {
+        "alpinejs": "^3.15.11",
         "htmx.org": "^2.0.8",
         "slim-select": "^3.4.3",
         "swiper": "^12.1.3"

resources/css/style.css

@@ -51,6 +51,10 @@
     --color-cake-blue: #2F85AE;
 }
 
+[x-cloak] {
+    display: none !important;
+}
+
 /* Styling for default app homepage */
 
 .bullet:before {

resources/js/app.js

@@ -2,9 +2,136 @@ import Swiper from 'swiper'
 import { Autoplay, Navigation, Pagination } from 'swiper/modules'
 import htmx from 'htmx.org'
 import SlimSelect from 'slim-select'
+import Alpine from 'alpinejs'
 
 window.htmx = htmx
 
+Alpine.data('packageSearch', () => ({
+    query: '',
+    results: [],
+    open: false,
+    loading: false,
+    selectedIndex: -1,
+    abortController: null,
+    debounceTimer: null,
+
+    init() {
+        // Sync initial value from the input
+        this.query = this.$refs.input?.value || ''
+
+        this.$watch('query', (value) => {
+            this.debouncedFetch(value)
+        })
+    },
+
+    debouncedFetch(value) {
+        clearTimeout(this.debounceTimer)
+
+        if (this.abortController) {
+            this.abortController.abort()
+            this.abortController = null
+        }
+
+        if (value.trim().length < 2) {
+            this.results = []
+            this.open = false
+            this.loading = false
+            return
+        }
+
+        this.loading = true
+
+        this.debounceTimer = setTimeout(() => {
+            this.fetchResults(value.trim())
+        }, 250)
+    },
+
+    async fetchResults(q) {
+        if (this.abortController) {
+            this.abortController.abort()
+        }
+
+        this.abortController = new AbortController()
+
+        try {
+            const response = await fetch(`/autocomplete?q=${encodeURIComponent(q)}`, {
+                signal: this.abortController.signal,
+                headers: { 'Accept': 'application/json' },
+            })
+
+            const data = await response.json()
+            this.results = data
+            this.open = data.length > 0
+            this.selectedIndex = -1
+        } catch (e) {
+            if (e.name !== 'AbortError') {
+                this.results = []
+                this.open = false
+            }
+        } finally {
+            this.loading = false
+        }
+    },
+
+    close() {
+        this.open = false
+        this.selectedIndex = -1
+    },
+
+    onKeydown(e) {
+        if (!this.open) return
+
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault()
+                this.selectedIndex = Math.min(this.selectedIndex + 1, this.results.length - 1)
+                this.scrollToSelected()
+                break
+            case 'ArrowUp':
+                e.preventDefault()
+                this.selectedIndex = Math.max(this.selectedIndex - 1, -1)
+                this.scrollToSelected()
+                break
+            case 'Enter':
+                if (this.selectedIndex >= 0) {
+                    e.preventDefault()
+                    this.selectResult(this.results[this.selectedIndex])
+                }
+                break
+            case 'Escape':
+                this.close()
+                break
+        }
+    },
+
+    scrollToSelected() {
+        this.$nextTick(() => {
+            const el = this.$refs.listbox?.querySelector('[aria-selected="true"]')
+            el?.scrollIntoView({ block: 'nearest' })
+        })
+    },
+
+    selectResult(result) {
+        try {
+            const url = new URL(result.repo_url)
+            if (url.protocol === 'https:') {
+                window.open(url.toString(), '_blank', 'noopener,noreferrer')
+            }
+        } catch {
+            // Invalid URL, ignore
+        }
+        this.close()
+    },
+
+
+
+    formatNumber(num) {
+        if (num >= 1000000) return (num / 1000000).toFixed(1).replace(/\.0$/, '') + 'M'
+        if (num >= 1000) return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'k'
+        return String(num)
+    },
+}))
+
 const initializeSelects = (root = document) => {
     const selects = document.querySelectorAll('select')
 
@@ -78,6 +205,8 @@ document.addEventListener('DOMContentLoaded', () => {
     initializeSelects()
 })
 
+Alpine.start()
+
 if (typeof window.htmx !== 'undefined') {
     const reinitializeDynamicUi = () => {
         initializeFeaturedPackagesSlider(document)

src/Controller/PackagesController.php

@@ -4,6 +4,7 @@
 namespace App\Controller;
 
 use Cake\Core\Configure;
+use Cake\Http\Response;
 use Cake\ORM\Query\SelectQuery;
 
 /**
@@ -20,7 +21,7 @@ public function initialize(): void
     {
         parent::initialize();
 
-        $this->Authentication->allowUnauthenticated(['index']);
+        $this->Authentication->allowUnauthenticated(['index', 'autocomplete']);
     }
 
     /**
@@ -98,6 +99,53 @@ public function index()
         $this->set(compact('featuredPackages', 'packages', 'cakephpTags', 'phpTags'));
     }
 
+    /**
+     * Autocomplete endpoint for package search.
+     *
+     * @return \Cake\Http\Response
+     */
+    public function autocomplete(): Response
+    {
+        $q = trim((string)$this->request->getQuery('q'));
+        if (mb_strlen($q) < 2) {
+            return $this->response
+                ->withType('application/json')
+                ->withStringBody(json_encode([], JSON_THROW_ON_ERROR));
+        }
+
+        $packages = $this->Packages
+            ->find('autocomplete', search: $q)
+            ->all();
+
+        $results = [];
+        foreach ($packages as $package) {
+            $cakeVersions = [];
+            foreach ($package->cake_php_tag_groups as $major => $tags) {
+                $cakeVersions[] = $major . '.x';
+            }
+
+            $phpVersions = [];
+            foreach ($package->php_tag_groups as $major => $tags) {
+                $phpVersions[] = $major . '.x';
+            }
+
+            $results[] = [
+                'package' => $package->package,
+                'description' => $package->description,
+                'repo_url' => $package->repo_url,
+                'downloads' => $package->downloads,
+                'stars' => $package->stars,
+                'latest_version' => $package->latest_stable_version,
+                'cakephp_versions' => $cakeVersions,
+                'php_versions' => $phpVersions,
+            ];
+        }
+
+        return $this->response
+            ->withType('application/json')
+            ->withStringBody(json_encode($results, JSON_THROW_ON_ERROR));
+    }
+
     /**
      * @param mixed $value
      * @return bool

src/Model/Table/PackagesTable.php

@@ -4,6 +4,7 @@
 namespace App\Model\Table;
 
 use App\Model\Filter\PackagesCollection;
+use Cake\ORM\Query\SelectQuery;
 use Cake\ORM\Table;
 use Cake\Validation\Validator;
 
@@ -93,4 +94,33 @@ public function validationDefault(Validator $validator): Validator
 
         return $validator;
     }
+
+    /**
+     * Finder for autocomplete search results.
+     *
+     * @param \Cake\ORM\Query\SelectQuery $query Query instance.
+     * @param string $search Search term.
+     * @param int $maxResults Maximum number of results.
+     * @return \Cake\ORM\Query\SelectQuery
+     */
+    public function findAutocomplete(SelectQuery $query, string $search, int $maxResults = 8): SelectQuery
+    {
+        $escapedSearch = str_replace(['%', '_'], ['\%', '\_'], $search);
+
+        return $query
+            ->find('search', search: ['search' => $search])
+            ->contain(['Tags' => function (SelectQuery $q) {
+                return $q->orderByDesc('Tags.label');
+            }])
+            ->selectAlso([
+                'name_match' => $query->expr()
+                    ->case()
+                    ->when(['Packages.package LIKE' => '%' . $escapedSearch . '%'])
+                    ->then(1, 'integer')
+                    ->else(0, 'integer'),
+            ])
+            ->orderByDesc('name_match')
+            ->orderByDesc('Packages.downloads')
+            ->limit($maxResults);
+    }
 }

src/View/AppView.php

@@ -41,5 +41,6 @@ public function initialize(): void
         $this->loadHelper('Form', ['templates' => 'form-templates']);
         $this->loadHelper('Html', ['templates' => 'html-templates']);
         $this->loadHelper('Authentication.Identity');
+        $this->loadHelper('User');
     }
 }