feat: display collection profile in search result

[floyd-li]

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

👇 __ Let's make a quick check before the contribution.

PR Type

• Bugfix
• Feature
• Refactoring

Context

• Closes Collection preview doesn't show in searchbar #5500
• Requires deployment <snek/rubick/worker>

Before submitting pull request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality

Optional

• I've tested it at </ksm/collection>
• I've tested PR on mobile
• I've written unit tests 🧪
• I've found edge cases

Had issue bounty label?

• Fill up your KSM address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot 📸

• My fix has changed something on UI; a screenshot is best to understand changes for others.

Copilot Summary

🤖 Generated by Copilot at 120792d

Improved the appearance and functionality of the search result components, showing larger and better-styled NFT thumbnails and displaying the floor price and the number of units for collections and series. Modified SearchResultItem.vue and SearchSuggestion.vue files.

🤖 Generated by Copilot at 120792d

NFT thumbnails
bigger, styled, informative
showing floor price - spring

[kodabot]

WARNING @floyd-li PR for issue #5500 which isn't assigned to you. Please be warned that this PR may get rejected if there's another assignee for issue #5500

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	b0118c9
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/64401218e25cc3000772dd69
😎 Deploy Preview	https://deploy-preview-5723--koda-canary.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 site settings.

[reviewpad]

AI-Generated Summary: This pull request includes the following changes:

1. Updates the image size in SearchResultItem.vue by changing the width and height from 48px to 64px.
2. Adds collection information to the search result in SearchSuggestion.vue. This information includes the activity floor price and the number of units in the collection.
3. Fixes the image max height issue in SearchResultItem.vue by adding a scoped style to override the max height property of the img element.

[yangwao]

Sometimes doesn't work hmm

I don't see any related errors

[daiagi]

small thing
otherewise code lgtm ✔️

[Jarsen136]

• floor price should be greater than zero.
• ksm/bsx unit

[yangwao]

Any idea why it doesn't work for me? I don't see any error console nor pending network request in console.

[yangwao]

@floyd-li it actually returns in network well, yet it doesn't shows?

My thesis is that.. if resources comes later than in some "first batch", we don't swap the new resource, is that possible?

[floyd-li]

@floyd-li it actually returns in network well, yet it doesn't shows?

My thesis is that.. if resources comes later than in some "first batch", we don't swap the new resource, is that possible?

working on this

[yangwao]

working on this

looks like it's working! 😍

[Jarsen136]

Pls hide floor: 0 KSM where the collection has no item having a price.

Here is what opensea does in this case.

[floyd-li]

is it okay?

[codeclimate]

Code Climate has analyzed commit b0118c9 and detected 0 issues on this pull request.

View more on Code Climate.

[Jarsen136]

is it okay?

Yes, it looks good.

[yangwao]

this was quick @floyd-li , love it!

pay 40 usd

let's look maybe on this one

• Square icons for results in searchbar  #5725

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $40 @ 34.26 USD/KSM ~ 1.168 $KSM
🧗 EZiu1PjV2j2JHKxY6mHnFwwCRCoV27uHKQSkKXATSh1srJT
🔗 0x1ddbf6b06f6204ae1a2992bca766f4183d73b8e1fdf23815a1b3cbb29fcde35c

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues