feat: mass listing

[stephenjason89]

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 Mass listing v1  #6941
• 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

Did your issue had any of the "$" label on it?

• Fill up your DOT address: Payout

Community participation

• Are you at KodaDot Ecosystem Telegram?

Screenshot 📸

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

Copilot Summary

🤖 Generated by Copilot at 0c66f2c

This pull request implements a listing cart feature for NFT owners who want to sell their items. It adds a new stores/listingCart module that defines a Pinia store for managing the cart state and actions, and uses local storage for persistence. It also modifies the ItemsGridImage component to display a button for adding items to the cart.

🤖 Generated by Copilot at 0c66f2c

You have the power to sell your art
But beware of the listing cart
It will sync with your local storage
And unleash the Pinia carnage

[kodabot]

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

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	edd67df
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/64f73f81f7a26c0008189ef4
😎 Deploy Preview	https://deploy-preview-7076--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 configuration.

[reviewpad]

AI-Generated Summary: This pull request introduces the feature of listing items in a cart. Changes are made to the file ItemsGridImage.vue, which now includes new functionalities such as listing items for sale and checking if an item is already in the cart. This is possible through using the store listingCart.ts. This new file has been added to manage the listings in the cart. It includes definitions for different actions such as setting an item, updating an item, removing an item, and clearing the cart. These functionalities utilize local storage for persistence. A total of 92 lines have been added in this update spread across two files. The purpose of this update is to enhance the user’s shopping experience by keeping track of their potential purchases.

[yangwao]

Can we try to test it?

Interesting 🤔 progress of sizing
From small, through medium till largest

[stephenjason89]

@yangwao maybe in 3hours i'll be done
Just gonna save the transactions 😄

[exezbcz]

hello!

nice job, I will continuously check the pr:

First round

- select all should select the cards, giving them the added to list status - blue bg and stroke etc...

• this thing should be displayed after at least one item is added:

please check the styling : 

clicking floor in the modal does nothing even thought there is the collection floor price :

check dark mode input styling please:

smaller thrash icon here:

otherwise really solid! thank you @stephenjason89, next round soon :D

[stephenjason89]

hello!

nice job, I will continuously check the pr:

otherwise really solid! thank you @stephenjason89, next round soon :D

Thank you @exezbcz for pointing out the dark theme issue. I am glad you liked the layout and everything was good.

Yup all the other functionalities are not yet implemented but I am almost done with it.

Will push a PR in a while.

[stephenjason89]

@exezbcz Please check PR. This is almost final. Will just have to save this on the chain now and i will remove this from draft.

Thank you

[exezbcz]

• this thing should be displayed after at least one item is added

missing

styling:

left padding for the placeholder please

[stephenjason89]

• this thing should be displayed after at least one item is added

Oh okay, I thought it should always show so a user can do a Select All initially. But yes hiding it is good also, that's what i want to do initially.

missing

styling:

left padding for the placeholder please

noted on this.

[daiagi]

same issue as #7121

[stephenjason89]

@daiagi this is how it looks on my end on the latest deployment

How can i replicate that issue?
Have you tried clearing your cache?

[daiagi]

this is how it looks on my end on the latest deployment

don't worry about it, it is dealt with in #7121. I've just linked it here so prury or execbcz know that it isn't from this pr

[codeclimate]

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

View more on Code Climate.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
3 Code Smells

No Coverage information
0.0% Duplication

[yangwao]

I think it's time for merge, and we can do followups. 😄

[stephenjason89]

I think it's time for merge, and we can do followups. 😄

Yeah haha let's do this 😅
Most of the code changes were code style, syntax, global css helpers, and translations.

I think we've addressed everything already 😂

[daiagi]

Alright.
Thank you for your patience with the extended reviews
Let it roll

[yangwao]

pay 100 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $100 @ 4.23 USD/DOT ~ 23.641 $DOT
🧗 13rFRPVKjJzQXVC8ZqHZv5YMmwmk4MU7z4HeYk218hEMpQXH
🔗 0xe879ce52e338193cf5881d94ccab1c2a1201cdd790318ab3a6d74254a931eed8

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