Show category in the autocomplete

[onmax]

Summary

Search autocomplete entries only show the location name (and address as a subline), so users have no quick way to distinguish between different venue types or see when a venue matches more than one category. This leads to confusion when a query (e.g. “restaurant”) returns locations with very different offerings.

Why this matters

• Categories are a primary filter in the rest of the UI; hiding them in the autocomplete results breaks consistency.
• Some venues are tagged with multiple categories (restaurant + chinese + vegetarian). Without surfacing them the user cannot tell that the result matches their specific cuisine or service.
• The API already returns categories for each autocomplete entry, so the data exists but is unused in the UI.

Implementation Plan

1. Backend formatting – Update searchLocationsByText in server/utils/search.ts to return categories in a deterministic order (primary category first, others alphabetical) by adding an explicit ORDER BY inside the json_agg/STRING_AGG. This avoids shuffled pills on repeated searches.
2. API response contract – Confirm shared/types/SearchLocationResponse exposes categories (id, name, icon) for the autocomplete endpoint and ensure server/api/search/autocomplete.get.ts forwards them unchanged. Add a lightweight mapper if we need to derive human-friendly labels once.
3. Composable + typing – Update useSearchAutocomplete to surface the categories array to the component (and adjust its local typings) so that Vue templates can consume it directly.
4. UI rendering – In app/components/Search.vue, render category pills (or a comma-separated line) underneath each location name. Reuse UnoCSS / Nimiq token classes so the pills follow the existing design system and still show the location address when available.
5. Accessibility + overflow – Ensure pill layout handles long category names and works on mobile. Fall back to a truncated, comma-separated string when there is not enough horizontal space.
6. Regression coverage – Add a component test (e.g. using Vitest + Vue Test Utils) that stubs useSearchAutocomplete and asserts categories appear for single and multi-category results. Optionally add a screenshot test in Playwright once E2E runs are available.

Acceptance Criteria

• Each autocomplete result displays at least the primary category label; entries with multiple categories expose them in a readable way without breaking the layout.
• Locations tagged with multiple categories (e.g. restaurant + chinese + mexican) show all relevant categories in the autocomplete.
• Keyboard navigation and screen readers announce the category information along with the location name.
• No regressions in existing autocomplete behaviour (highlighting, click-through to locations, query history).

[onmax]

Status Check

Backend: ✅ Complete

• Autocomplete API returns \ array and \ (server/api/search/autocomplete.get.ts)
• Categories are ordered with primary category identified via
  Frontend: ❌ Not implemented
• Search.vue line 289 only destructures \
• Categories data exists but is not rendered in the UI
• Need to display categories/primaryCategory in autocomplete results

This issue remains valid - backend is ready, frontend implementation needed.