feat(comparison): add 1-click preset chips to home page empty state

[1-DARK]

Summary

Adds clickable example-comparison chips under the compare form so first-time visitors can see the product in action with one click and zero typing.

Closes #220

Changes

• config/comparison-presets.ts: new curated list of well-known open-source developer pairs (username pair + translation key per preset),
  plus an exported ComparisonPreset type.
• components/preset-pills.tsx: new accessible chip list component (native <button> elements, labelled section, aria-busy while loading).
• components/home-page-client.tsx : renders the chips directly under CompareForm while no comparison result is shown. Clicking a chip fills username1/username2 and calls handleCompare with the preset values directly (not via state, to avoid stale values), respecting the currently selected languages.
• locales/en.json, locales/ar.json: added presets.title and a label key for each preset.

Behavior

• Chips are shown under the form when there is no result (!displayData), including after an error so users can recover with one click.
• Clicking a chip fills both inputs and runs the same comparison flow as the form submit, including the URL sync.
• While loading, chips are disabled and the clicked chip shows a spinner.
• Chips disappear once results are displayed.

Accessibility

• Native <button type="button">: Tab to focus, Enter/Space to activate.
• Visible focus-visible ring using theme tokens.
• Section labelled via aria-labelledby; list marked aria-busy during load.
• Transitions respect prefers-reduced-motion (motion-reduce).

i18n

• New keys added to both en.json and ar.json.
• Verified RTL layout in Arabic (flex wrapping flips correctly).

Testing

• ✅ pnpm validate-locales
• ✅ pnpm test
• ✅ npx tsc --noEmit
• ✅ pnpm lint / pnpm format:check
• ✅ pnpm build
• ✅ Manual: clicking each chip fills both inputs and loads the comparison
• ✅ Manual: URL updates and only one /api/compare request is made per click
• ✅ Manual: keyboard-only flow (Tab to chip, Enter and Space both work)
• ✅ Manual: chips disabled with spinner during loading; hidden after results
• ✅ Manual: works in light/dark theme and in EN/AR

Screenshots

State	English (LTR)	Arabic (RTL)
Empty state with preset chips
Results shown (chips hidden)

Light / dark

Light	Dark

[vercel]

@1-DARK is attempting to deploy a commit to the osama's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for the pull request! ✅

A maintainer will review this soon. Please be patient while we take a look. 🙌

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
dev-impact	Ready	Preview	Oct 8, 2026 7:19pm UTC

[O2sa]

One change I'd request before merging: this PR currently includes commit 3bd5737 (feat(profile): add Get README Badge dialog...), which belongs to PR #223. GitHub shows both commits as part of this PR, and user-profile-client.tsx is therefore included in the changed files.

Please rebase/clean up the branch against main so PR #224 contains only the comparison preset changes. This will keep the PR isolated and prevent the changes from #223 from being merged through this PR.

The preset implementation itself looks good to me.

[O2sa]

✨ Thank you, @1-DARK! Another great contribution merged! 🚀

We truly appreciate your continued support! If you find this tool useful, please consider giving us a ⭐ star on GitHub—it helps more developers find our work and motivates us to keep improving!