Auto complete enhancements

[bastien-phi]

This pull request primarily focuses on improving the autocomplete functionality across multiple components and removing the cmdk dependency. The changes include replacing the cmdk-based Command component with a custom Autocomplete implementation, introducing a new MultiAutocomplete component, and enhancing the MultiSuggest component with better dropdown handling and focus management.

Removal of cmdk dependency:

• package.json: Removed the cmdk package from dependencies. ([package.jsonL53](https://github.com/bastien-phi/scoutly/pull/38/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L53))
• pnpm-lock.yaml: Removed all references to cmdk in importers, packages, and snapshots sections. ([[1]](https://github.com/bastien-phi/scoutly/pull/38/files#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbL83-L85), [[2]](https://github.com/bastien-phi/scoutly/pull/38/files#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbL1612-L1617), [[3]](https://github.com/bastien-phi/scoutly/pull/38/files#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbL4413-L4424))
• resources/js/components/ui/command.tsx: Deleted the Command component and its related subcomponents, which were built using cmdk. ([resources/js/components/ui/command.tsxL1-L175](https://github.com/bastien-phi/scoutly/pull/38/files#diff-aa1c9f9b3d9b9bb0fbb6ea1050914e87088640e8f2a6ae3fb4184f42e9c8b1beL1-L175))

New Autocomplete implementation:

• resources/js/components/ui/autocomplete.tsx: Added a new Autocomplete component with dropdown functionality, keyboard navigation, and custom filtering logic. ([resources/js/components/ui/autocomplete.tsxR1-R155](https://github.com/bastien-phi/scoutly/pull/38/files#diff-26b5da1af0cbaa910d436b207255a44991f2828a244db5b7612e59344ef7ac10R1-R155))

Introduction of MultiAutocomplete:

• resources/js/components/ui/multi-autocomplete.tsx: Introduced a new MultiAutocomplete component that builds on the Autocomplete component to handle multiple selected values. ([resources/js/components/ui/multi-autocomplete.tsxR1-R24](https://github.com/bastien-phi/scoutly/pull/38/files#diff-9f113ffdeb72825df811c50b435f3bdb108c115f93d75b29e67ce11a2f8351a4R1-R24))

Enhancements to MultiSuggest:

• resources/js/components/ui/multi-suggest.tsx: Improved dropdown handling by introducing focus management (hasFocus state) and better filtering logic. Added a chevron icon for visual indication of dropdown functionality. ([[1]](https://github.com/bastien-phi/scoutly/pull/38/files#diff-4937868a550e0ff54a6aa47c9f28c21b2c14cf7b8f84f0242cb4fa1e088af757R6), [[2]](https://github.com/bastien-phi/scoutly/pull/38/files#diff-4937868a550e0ff54a6aa47c9f28c21b2c14cf7b8f84f0242cb4fa1e088af757R18-R52), [[3]](https://github.com/bastien-phi/scoutly/pull/38/files#diff-4937868a550e0ff54a6aa47c9f28c21b2c14cf7b8f84f0242cb4fa1e088af757R117-R137))

[Copilot]

Pull Request Overview

This PR removes the cmdk-based command palette in favor of custom autocomplete components (both single- and multi-select) and adds remote-fetching variants. It also standardizes focus and dropdown behavior across suggest/autocomplete UIs and extends the debounce utility with cancellation support.

• Swap out old Command popovers for Autocomplete, MultiAutocomplete, RemoteAutocomplete, and RemoteMultiAutocomplete.
• Enhance Suggest and MultiSuggest components with consistent focus management and chevron indicators.
• Update debounce to return a cancelable function and remove the cmdk dependency.

Reviewed Changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
resources/js/pages/links/index.tsx	Replaced cmdk selects with Autocomplete/MultiAutocomplete and consolidated fetch logic
resources/js/pages/community-links/index.tsx	Swapped popup selects for RemoteAutocomplete/RemoteMultiAutocomplete with fetch hooks
resources/js/lib/utils.ts	Extended debounce to include a .cancel() method
resources/js/components/ui/command.tsx	Deleted the old cmdk-based Command component and related subcomponents
resources/js/components/ui/autocomplete.tsx	Added single-value Autocomplete with keyboard navigation and filtering
resources/js/components/ui/multi-autocomplete.tsx	Introduced MultiAutocomplete that filters out already selected values
resources/js/components/ui/remote-autocomplete.tsx	New async-fetching RemoteAutocomplete
resources/js/components/ui/remote-multi-autocomplete.tsx	Wrapper RemoteMultiAutocomplete for async multi-select
resources/js/components/ui/suggest.tsx	Updated Suggest with focus state and chevron icon
resources/js/components/ui/multi-suggest.tsx	Updated MultiSuggest to mirror Suggest enhancements
package.json	Removed the cmdk dependency

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (5)

resources/js/components/ui/remote-autocomplete.tsx:154

• The async dropdown is missing ARIA roles (listbox / option). Consider adding them to improve accessibility for users relying on assistive technology.

            <Input

resources/js/components/ui/remote-multi-autocomplete.tsx:1

• The new RemoteMultiAutocomplete component is introduced without unit or integration tests. Consider adding tests for its fetching, filtering, and selection behavior.

import RemoteAutocomplete from '@/components/ui/remote-autocomplete';

resources/js/components/ui/remote-autocomplete.tsx:10

• The new RemoteAutocomplete component lacks tests covering its debounced fetch, keyboard navigation, focus management, and selection. Adding tests will ensure its behavior is reliable.

export default function RemoteAutocomplete<T>({className, value, fetchOptionsUsing, onValueChanged, showUsing, getValueUsing, resetOnSelected, ...props }: React.ComponentProps<"input"> & {

resources/js/components/ui/autocomplete.tsx:9

• The new Autocomplete component has no associated tests. Consider writing tests for filtering logic, keyboard interactions, and reset-on-select functionality.

export default function Autocomplete<T>({className, value, options, onValueChanged, showUsing, getValueUsing, resetOnSelected, ...props }: React.ComponentProps<"input"> & {

resources/js/components/ui/multi-autocomplete.tsx:3

• The new MultiAutocomplete component is not covered by tests. Adding tests for multi-selection and filtering out already selected items will help prevent regressions.

export default function MultiAutocomplete<T>({className, selectedValues, options, onValueAdded, showUsing, getValueUsing, ...props }: React.ComponentProps<"input"> & {