[Feat] Issue-1095 Display logo file extension in search results

[infit007]

Description

Closes #1095

This PR adds support for displaying the logo file extension in search results.

Changes

• Adds the extension field to the backend search response.
• Displays the logo format (e.g. PNG, SVG) as a badge in the search result card.
• Adds/updates tests for the extension field and UI display.

What type of PR is this? (Check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📄 Documentation Update
• 👨‍💻 Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🛠️ CI/CD

Screenshots (if applicable)

Before:

After:

Checklist

• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have added tests that prove my feature works
• New and existing unit tests pass locally with my changes

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
openlogo-prod-web	Ready	Preview	Aug 21, 2026 2:19pm
openlogo-staging-web	Ready	Preview	Aug 21, 2026 2:19pm

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[devin-ai-integration]

Code review

Clean, well-scoped change. fetchCompanyList returns full Mongoose docs and extension is required in packages/app/models/images.js, so no projection change is needed and the field is populated for every stored logo. A few edge cases and test-quality notes:

Edge cases

1. extension can be "unknown". packages/app/utils/webLogoSearch.js sets extension = "unknown" when it can't determine the type, and scraped logos can be persisted. The badge would then render UNKNOWN. Suggest normalizing in the UI (skip the badge for unknown/empty, map jpeg → JPG) so the badge is always meaningful.
2. Public API contract change. /logo/search (documented, API-key endpoint) now returns an extra extension field. Additive so it's safe, but it should be documented in DOCUMENTATION / Constants.js alongside the other response fields.
3. Layout. flex: 1 moved from .resultHeader h3 to .brandInfo; add min-width: 0 to .brandInfo so a long company name can still shrink instead of pushing the copy button out of the card at narrow widths.
4. A11y. A bare SVG/PNG badge is ambiguous to screen readers — add aria-label={Format: ${company.extension.toUpperCase()}} or a title.
5. Minor: text-transform: uppercase in .formatBadge plus .toUpperCase() in JSX is redundant — keep one.

Tests

• expect(screen.getAllByText("SVG")).toHaveLength(2) is brittle (any other element rendering "SVG" breaks it). Prefer scoping per card with within(...).
• The company.extension && ... branch is untested — add a fixture without extension asserting no badge renders.
• Test fixture smell: { companyName: "Aareon", image: "aareon-logo.svg", extension: "png" } mismatches the image name; makes the test data confusing to read.

None of these are blocking; (1) is the one I'd fix before merge.

Written by Devin