Search items on top of collections

[Jarsen136]

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 Search on top of collections v0.9 #5333
• 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 c1d6e3b

This pull request adds a new feature to enable searching for collections and within collections on the NFT gallery. It also refactors some utility functions and components, updates import paths, and adds new theme variables and styles for the UI. The main files affected are components/search/Search.vue, components/search/SearchBar.vue, components/search/SearchCollection.vue, components/shared/BreadcrumbsFilter.vue, components/shared/gallery/NeoTag.vue, locales/en.json, styles/abstracts/_theme.scss, styles/components/_search.scss, and components/search/utils/useCollectionSearch.ts. The rest of the files are mostly import path changes.

🤖 Generated by Copilot at c1d6e3b

Oh we're searching for collections on the web
We've moved the exist function to a better place
We've added a blue tag to toggle the mode
And we've styled it with variables for the theme

[kodabot]

SUCCESS @Jarsen136 PR for issue #5333 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	cecf4e2
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/645a5f8b73ecf90008c21fe9
😎 Deploy Preview	https://deploy-preview-5851--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 contains several changes in the codebase, summarized as follows:

1. Removal of unused components SearchCollection.vue and TypeTagInput.vue.
2. Refactoring of exist function import in various components.
3. Addition of search functionality in the collection page.
4. Addition of blue theme tag to search bar.
5. Update in the search process with collection ID.
6. Disabling of the collection search feature on mobile devices.

[daiagi]

@exezbcz
let's say i hit backspace, and then i want to resume collection search
right now i need to refresh the page

is it something we want to support?

[daiagi]

it doesn't respond to screen width change

got here by starting on a wide screen and then shrinking

[exezbcz]

@daiagi yes, Thank you for pointing that out. It's a first version, so there will be changes, and the search recommendations will need to be changed as well - I believe that once we finish this first version, we can move on to adding and refining it. So, right now there is not an option to resume collection search.

[Jarsen136]

it doesn't respond to screen width change
got here by starting on a wide screen and then shrinking

✅ Fixed.

[exezbcz]

Amazing!
some feedback:

• can you please remove the hover on text
  

let's say i hit backspace, and then i want to resume collection search right now i need to refresh the page

quick hack for this:

• if user deletes the tag but then does not search but click out of the search bar - the tag is added again, so that means the tag is always there unless you leave the collection

[Jarsen136]

Amazing! some feedback:

• can you please remove the hover on text
  

let's say i hit backspace, and then i want to resume collection search right now i need to refresh the page

quick hack for this:

• if user deletes the tag but then does not search but click out of the search bar - the tag is added again, so that means the tag is always there unless you leave the collection

✅Updated

[daiagi]

code lgtm ✔️

[yangwao]

@exezbcz let's drop visual-ok 👀

[yangwao]

Beautiful!

https://deploy-preview-5851--koda-canary.netlify.app/ksm/collection/e63e926f7db5997e5c-STGR?collectionId=e63e926f7db5997e5c-STGR&search=rodyt

[yangwao]

I would like to see some suggestions on writing as query on top of collection is much easier and less heavy to search.
So similar we are having on classic search showing items, but on top

Plus for next design can include wrapped name of collection for like 40 chars

We can do this as followup

[Jarsen136]

I would like to see some suggestions on writing as query on top of collection is much easier and less heavy to search. So similar we are having on classic search showing items, but on top

Plus for next design can include wrapped name of collection for like 40 chars

We can do this as followup

I would take a try after this PR merged

[codeclimate]

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

View more on Code Climate.

[vikiival]

pay 80 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $80 @ 25.81 USD/KSM ~ 3.1 $KSM
🧗 Caiv9TbPz68q5dC8EcHu5xKYPRnremimGzqmEejDFNpWWLG
🔗 0xa4fdca0fa6cfdc04bb2d893fa90acbfcb68509d43febb5b22e5af0b56f9f3b71

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