feat: gallery item page view counter

[newraina]

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

• Parts of Bookmarks/Watchlist and Views in gallery item and collection #5547
• 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

🤖[deprecated] Generated by Copilot at 4df3a8c

Added a page view count feature to the gallery item component using a new composable function and a counter API. Updated the icons plugin and the utils file with the necessary dependencies and constants.

🤖[deprecated] Generated by Copilot at 4df3a8c

usePageViews sends
route path to counter API
shows eye icon, count

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	922c2c9
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/65705f288772cf00082a0ad1
😎 Deploy Preview	https://deploy-preview-8417--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 a page view counter for items in the gallery. A new file usePageViews.ts is created and utilized in GalleryItem.vue to maintain count of page views. The display of the page view count is integrated with the existing layout of the gallery item, and styling configurations have been updated to accommodate this new feature. Additionally, new constants and icons have been added for support. Page view count requests are made to a new counter URL added in utils/constants.ts.

[reviewpad]

Reviewpad Report

⚠️ Warnings

• Please link an issue to the pull request

[roiLeo]

every refresh counter is increased maybe it need to check User Agent on worker side

otherwise lgtm ✅

[exezbcz]

it does not include retrospective views right

otherwise works nicely

• could you please match the color in light mode to neutral-7, which is the same in dark mode

[codeclimate]

Code Climate has analyzed commit 922c2c9 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
0 Code Smells

No Coverage information
0.6% Duplication

[newraina]

@exezbcz

it does not include retrospective views right

Yes.

could you please match the color in light mode to neutral-7

Done.

To achieve the above, I have updated the neutral color palette in the tailwind config as mentioned in #8137. @roiLeo you may want to review it again. Since the neutral colors stay the same in both light and dark modes, I didn't use CSS variables in the tailwind config.

[yangwao]

Thanks!
pay 30 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $30 @ 6 USD/DOT ~ 5 $DOT
🧗 1CAv6Zq3yVxL3eKhC94GWTWVwp1w4jZbqeZ6wXx1rPAhrce
🔗 0x9280524f78cc308a4aa009040fadbf1af6c70de5879cafa354b1ef620af44201

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