Skip to content

Add autocomplete search and improve navbar UI#153

Merged
LordSimal merged 2 commits intomasterfrom
feat/autocomplete-and-login-ui
Apr 7, 2026
Merged

Add autocomplete search and improve navbar UI#153
LordSimal merged 2 commits intomasterfrom
feat/autocomplete-and-login-ui

Conversation

@josbeir
Copy link
Copy Markdown
Contributor

@josbeir josbeir commented Apr 7, 2026

Adds an Alpine.js-powered autocomplete search dropdown and extracts layout components into reusable CakePHP elements with proper test coverage.

Changes

Autocomplete search

  • New /autocomplete JSON endpoint in PackagesController returning package name, description, stats, and version info
  • findAutocomplete() custom finder on PackagesTable using the existing FriendsOfCake/Search plugin with name-match relevance sorting (packages matching by name rank above description-only matches)
  • Alpine.js packageSearch component with debounced fetch, keyboard navigation (↑↓/Enter/Escape), and AbortController for cancelling stale requests
  • Responsive dropdown: fixed positioning on mobile, absolute on desktop; non-essential UI hidden on small screens

UI refactoring

  • Extracted search form into element/search.php and navbar into element/navbar.php, simplifying the default layout
  • New UserHelper with username(), displayName(), avatarUrl(), and avatar() methods — replaces inline identity logic in templates
  • Professional navbar with GitHub avatar dropdown for logged-in users and a compact sign-in button for guests

Tests

  • UserHelperTest — 12 tests covering all helper methods for logged-in/logged-out states
  • PackagesTableTest — 8 tests for the findAutocomplete finder (matching, limit, priority, ordering, tag containment)
  • PackagesControllerTest — 5 integration tests for the autocomplete endpoint (JSON structure, short/missing/no-match queries, result limit)
image image

Copilot AI review requested due to automatic review settings April 7, 2026 14:56
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds an autocomplete-powered global package search and refactors the navbar/search UI into reusable CakePHP elements, backed by new helper logic and test coverage.

Changes:

  • Added /autocomplete JSON endpoint plus PackagesTable::findAutocomplete() finder for ranked, limited search results with tag containment.
  • Introduced Alpine.js packageSearch component and extracted navbar/search markup into templates/element/* elements, with a new UserHelper for identity display.
  • Expanded fixtures and added/updated tests for the helper, finder, and controller endpoint.

Reviewed changes

Copilot reviewed 15 out of 17 changed files in this pull request and generated 8 comments.

Show a summary per file
File Description
tests/TestCase/View/Helper/UserHelperTest.php Adds unit tests for UserHelper helper methods.
tests/TestCase/Model/Table/PackagesTableTest.php Adds tests for the new findAutocomplete() finder and tag containment.
tests/TestCase/Controller/PackagesControllerTest.php Adds integration tests for /autocomplete JSON endpoint behavior.
tests/Fixture/PackagesFixture.php Extends fixture data to support autocomplete ranking tests.
templates/layout/default.php Replaces inline navbar/search markup with element('navbar').
templates/element/search.php Adds global search form element with Alpine-powered autocomplete dropdown.
templates/element/navbar.php Adds new navbar element incorporating the search element and user menu.
src/View/Helper/UserHelper.php Introduces helper for username/display name/avatar rendering.
src/View/AppView.php Loads the new User helper globally.
src/Model/Table/PackagesTable.php Implements findAutocomplete() finder with ranking + limits + tags.
src/Controller/PackagesController.php Adds autocomplete() action and allows unauthenticated access to it.
resources/js/app.js Adds Alpine.js autocomplete client logic and starts Alpine.
resources/css/style.css Adds [x-cloak] styling for Alpine templates.
package.json Adds Alpine.js dependency.
package-lock.json Locks Alpine.js and transitive dependencies (and updates package name field).
config/routes.php Enables JSON extension parsing and connects /autocomplete.
config/Migrations/schema-dump-default.lock Adds schema dump lock artifact.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@LordSimal LordSimal merged commit 4cbaeea into master Apr 7, 2026
2 checks passed
@LordSimal LordSimal deleted the feat/autocomplete-and-login-ui branch April 7, 2026 15:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants