[norendren]

Human Description

Being transparent about AI contributions, I like to hand-type descriptions at the top.

Unless I've missed something, it is at least a few clicks to get from the home page of the site to a particular game. The fastest path I'm aware of involved
Games -> Games List -> Small text box -> Type game

I figured a nice, top level magnifying search bar would be nice.

Problem

Getting to a specific game currently means opening the menu, going to Games, finding the filter box in the Games column and typing the name.

Change

Adds a magnifying glass to the navbar on desktop and mobile. Clicking it opens a search box, and choosing a result goes to /games/:metaGame.

• Reuses filterGameOptions, so it matches the same name, id and designer text as the game picker, over the same public catalog
• New rankGameSearchResults puts title matches first, so "go" lists Go before Cargo
• Reuses the notification bell's panel, icon button and mobile positioning
• Keyboard: up/down to move, Enter to open the highlighted result, Escape to close
• Results are real links, so opening in a new tab works
• Adds two English strings; other locales go through the usual translation flow

Docs and changelog are updated.

Layout changes

There are two small CSS changes to make room for the extra icon:

• The desktop search item has no .navbar-item padding
• Below 370px wide, the logo shrinks to 2rem tall. Without this, the logged-in bar scrolls sideways on phones narrower than about 370px. 375px and wider are unchanged

Demo

Desktop

Dark mode, keyboard only

Phone

Recorded on a local dev server, logged out, which is why the logo is replaced by development text and a Log In button shows. The red dot is a marker for the mouse pointer and isn't part of the UI.

Testing

• New GameSearch.test.js and rankGameSearchResults tests
• In headless Chrome against the local dev server: search, Enter, click, game-to-game navigation, and light and dark modes, with no page errors
• Checked for horizontal overflow from 320px to 1400px wide
• npm run lint has 0 errors and npm run docs:check passes
• vitest run: all 953 tests pass (1 skipped), on these branches merged together

Please check: I couldn't log in locally, so the logged-in navbar was simulated with placeholder elements. That simulation showed a 2px overflow at exactly 1220px in English, and it fits at 1240px. French already overflowed at this width before this change. It's worth a quick look while logged in, at around 1220px wide.

PR checks are skipped for fork PRs, so these results are from a local run.

[Perlkonig]

Did you mean to set these PRs as "draft"?

[norendren]

I did, yes! Especially with contributions largely made by AI I like to get them up in draft form and then review them and provide actual human descriptions. Was going to pop over to the discord after marking them ready

[Perlkonig]

Sounds good. I'll wait to hear from you.