Change omnibar icon based on input suffix

[noisysocks]

Asana Task/Github Issue: https://app.asana.com/1/137249556945/project/1209121419454298/task/1210867372767327

Description

This PR updates the omnibar widget in the new tab page to change the icon on the left of the SearchForm's input. The icon will now display a globe (🌐) instead of a search icon (🔍) when the input suffix has kind = "visit".

This provides a clearer visual indicator to users that their input will result in navigating to a website (e.g., typing a URL, selecting a website suggestion) rather than performing a search.

Testing Steps

https://deploy-preview-1844--content-scope-scripts.netlify.app/build/pages/new-tab/?omnibar=true

• Open the New Tab Page.
• To see the globe icon:
  • Type a URL-like string (e.g., example.com, https://duckduckgo.com).
  • Select a suggestion that leads to a website visit (e.g., a "website" suggestion, a bookmark, or history entry).
• To see the search icon:
  • Type a regular search query (e.g., weather, how to bake a cake).

Checklist

Please tick all that apply:

• I have tested this change locally
• I have tested this change locally in all supported browsers
• This change will be visible to users
• I have added automated tests that cover this change
• I have ensured the change is gated by config
• This change was covered by a ship review
• This change was covered by a tech design
• Any dependent config has been merged

---

Open in Web • Open in Cursor

[github-actions]

Temporary Branch Update

The temporary branch has been updated with the latest changes. Below are the details:

• Branch Name: pr-releases/pr-1844
• Commit Hash: 34475a8d725ca08f419bb3dace1b232ee8ce85cc
• Last Updated: July 24, 2025 at 8:32:43 AM UTC
• Install Command: npm i github:duckduckgo/content-scope-scripts#34475a8d725ca08f419bb3dace1b232ee8ce85cc

Please use the above install command to update to the latest version.

[github-actions]

[Beta] Generated file diff

Time updated: Thu, 24 Jul 2025 08:33:00 GMT

Integration

    - integration/pages/new-tab/dist/index.js

File has changed

Windows

    - windows/pages/new-tab/dist/index.js

File has changed

Apple

    - dist/pages/new-tab/dist/index.js

File has changed

[netlify]

✅ Deploy Preview for content-scope-scripts ready!

Name	Link
🔨 Latest commit	f0487cf
🔍 Latest deploy log	https://app.netlify.com/projects/content-scope-scripts/deploys/6881ef844c69af0008fee899
😎 Deploy Preview	https://deploy-preview-1844--content-scope-scripts.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[noisysocks]

Code looks right but the icon wiggles around when it changes. Will do this manually tomorrow.

[noisysocks]

Merging main fixed it. Testing well now 👍