feat: add device search

[alectimison-maker]

Description

Adds search to the device-selection modal so users can filter the hardware catalogue by display name, PlatformIO target, hardware slug, architecture, variant, or vendor tag.

The search field uses the existing translated device-selection label and theme tokens, so this change does not touch the protected Crowdin locale files.

Closes #309

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature
• Documentation update
• Other (please describe):

Testing

• I have tested these changes locally
• I have added/updated tests as appropriate
• All existing tests pass

Validation performed:

• pnpm test:run — 14 files, 166 tests passed
• pnpm build — passed
• pnpm eslint components/DeviceSearch.vue utils/deviceSearch.ts utils/deviceSearch.test.ts — passed
• Playwright browser checks — verified 4631, Seeed, and no-match filtering, a 44px input target, and no unhandled page errors

components/Device.vue has 158 pre-existing lint findings on main; the modified file reports the same count.

---

Hardware Model Acceptance Policy

No hardware models or protected files are changed by this PR.

Summary by CodeRabbit

• New Features

  • Added device search with an accessible, localized search field.
  • Device results now filter by identifiers, metadata, and tags.
  • Search is case-insensitive and ignores leading or trailing whitespace.
  • Empty searches continue to display all available devices.

• Tests

  • Added coverage for matching, normalization, empty queries, and unmatched devices.

[vercel]

@alectimison-maker is attempting to deploy a commit to the Meshtastic Team on Vercel.

A member of the Team first needs to authorize it.

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

📝 Walkthrough

Walkthrough

The change adds a localized DeviceSearch input, a normalized matchesDeviceSearch utility, device-list filtering, and tests for query matching behavior.

Changes

Device search

Layer / File(s)	Summary
Device matching contract and tests utils/deviceSearch.ts, utils/deviceSearch.test.ts	matchesDeviceSearch normalizes queries, searches device fields and tags, matches blank queries, and rejects unmatched devices. Tests cover these cases.
Search input and device filtering components/DeviceSearch.vue, components/Device.vue	DeviceSearch provides a localized input with v-model. Device.vue filters devices with matchesDeviceSearch before deduplication.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  actor User
  participant DeviceSearch
  participant Device
  participant matchesDeviceSearch
  User->>DeviceSearch: Enter search query
  DeviceSearch->>Device: Update searchQuery through v-model
  Device->>matchesDeviceSearch: Match query against each device
  matchesDeviceSearch-->>Device: Return matching devices
  Device-->>User: Render filtered device list

Loading

Poem

A rabbit types “Seeed” with care,
Devices matching hop from there.
Tags and names are checked in line,
Blank searches show the full design.
The search bar helps the list stay bright.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the added device search feature.
Description check	✅ Passed	The description covers the change, feature classification, testing, protected-file policy, and linked issue.
Linked Issues check	✅ Passed	The implementation adds device search by name, manufacturer-related metadata, and identifiers, including the issue examples Seeed and 4631 [#309].
Out of Scope Changes check	✅ Passed	All changed files support device search, filtering behavior, or its tests; no unrelated or protected-file changes are identified.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

components/Device.vue

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

components/DeviceSearch.vue

ESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.

utils/deviceSearch.test.ts

ESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.

• 1 others

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

utils/deviceSearch.test.ts (1)

18-26: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Test each searchable field independently.

The fixture uses RAK4631 for both hwModelSlug and platformioTarget. It does not define key or variant. The current cases cannot detect removal of these fields from searchableValues.

Add distinct cases for hwModelSlug, platformioTarget, key, and variant.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@utils/deviceSearch.test.ts` around lines 18 - 26, Update the parameterized
test around matchesDeviceSearch to use distinct query values that independently
match hwModelSlug, platformioTarget, key, and variant. Extend the fixture with
unique key and variant values if needed, ensuring each searchable field is
covered without reusing RAK4631 for multiple fields.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@utils/deviceSearch.test.ts`:
- Around line 18-26: Update the parameterized test around matchesDeviceSearch to
use distinct query values that independently match hwModelSlug,
platformioTarget, key, and variant. Extend the fixture with unique key and
variant values if needed, ensuring each searchable field is covered without
reusing RAK4631 for multiple fields.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 6bd299b1-d71c-46dd-897a-6820e69ee7fe

📥 Commits

Reviewing files that changed from the base of the PR and between 9d03e59 and a10f472.

📒 Files selected for processing (4)

• components/Device.vue
• components/DeviceSearch.vue
• utils/deviceSearch.test.ts
• utils/deviceSearch.ts