WIP [Improvement request]: Revamped asset page

[jurrejansen]

Contact Details

[email protected]

Is your feature request related to a problem? Please describe?

The current asset page is outdated, has too little space to accommodate UI elements related to currently existing and/or upcoming features and too focused on the Notes / Activity log.

Describe the solution you'd like

A new layout that uses tabs in order to categorize the different the information shown on the asset page.

Describe alternatives you've considered

No response

Additional context

No response

[DonKoko]

@jurrejansen A few points to improve in the design so we can pass it on for dev. We need to make it based on feature we have currently not based on what we want to have so the developer knows what to work on.

• [x] Leave only the relevant tabs. I would say Overview and Activity. Once we have those we can considering adding the other tabs.

• [x] QR area - please add only the settings and options we currently have. So remove the color, size file and the 2 switches

• [x] Same for the map/scan info. We are currently showing more info that is all relevant.

• [ ] I am wondering about the asset image. If I want to see the image in bigger size, how can I do it?

• [x] For the activity tab, do we have some big structural changes? I would say we can just display them the same way we have them now, and simply update the cards for each note/update in the future.

[jurrejansen]

@DonKoko alrighty clear, I planned to provide some proper scenarios hence the issue is still WIP. It needs a bit more thought because the design was done a while back.

[DonKoko]

@jurrejansen agree, thats why I wanted to give some pointers to make it easier on you. Give me a call on discord if you want to discuss this further.

[DonKoko]

Hey @Bhavyajain21. I have taken the time to update the asset page design to simplify it and make it easier for you to understand. I have also updated the original issue description, including the link and added some important points. Please take a look.

[DonKoko]

/bounty 30

[algora-pbc[bot]]

💎 $30 bounty • Shelf

Steps to solve:

1. Start working: Comment /attempt #972 with your implementation plan
2. Submit work: Create a pull request including /claim #972 in the PR body to claim the bounty
3. Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

Thank you for contributing to Shelf-nu/shelf.nu!

Add a bounty • Share on socials

Attempt	Started (GMT+0)	Solution
🟢 @Bhavyajain21	May 23, 2024, 12:51:51 PM	#996

[Bhavyajain21]

/attempt

Algora profile	Completed bounties	Tech	Active attempts	Options
@Bhavyajain21	2 Shelf-nu bounties + 6 bounties from 2 projects	TypeScript, Rust, JavaScript & more		Cancel attempt

[algora-pbc[bot]]

💡 @Bhavyajain21 submitted a pull request that claims the bounty. You can visit your bounty board to reward.

[jurrejansen]

@DonKoko @Bhavyajain21 here's a scenario related to viewing the asset image.

https://www.figma.com/design/ykvc0MhPeNLsrJ4tJsKosQ/Shelf-%7C-UX-Scenarios?node-id=1529-216039

[DonKoko]

@Bhavyajain21 can you do the image thing as well? I can give you a small bonus to the bounty for adding it.

To make it work you will need to do a few things:

• [x] Update the dialog component we have. Currently its made to work only with routes. What we can do is move the current code of dialog inside contextual-modal.tsx as this is the only place its used and then in rework the dialog component to not work based on routes but just as a standalone component we can use for example to show an image
• [x] then you can implement that dialog on the asset page, when clicking the image
• [x] Style it to look like in the screenshot

[Bhavyajain21]

Sure @DonKoko , will do!

[jurrejansen]

@DonKoko @carlosvirreira Adding a few scenarios hoping to clear certain things up.

 ↳ Creating a new asset

https://www.figma.com/design/ykvc0MhPeNLsrJ4tJsKosQ/Shelf-%7C-UX-Scenarios?node-id=5575-446834

 ↳ Filling fields of an asset that has nothing filled

https://www.figma.com/design/ykvc0MhPeNLsrJ4tJsKosQ/Shelf-%7C-UX-Scenarios?node-id=5563-91754

 ↳ Viewing attached image(s)

https://www.figma.com/design/ykvc0MhPeNLsrJ4tJsKosQ/Shelf-%7C-UX-Scenarios?node-id=1529-216039

Adding this one to show where all elements will go and in what order. ↳ Asset has all field filled, awaiting signature and is part of kit https://www.figma.com/design/ykvc0MhPeNLsrJ4tJsKosQ/Shelf-%7C-UX-Scenarios?node-id=5757-56173

[algora-pbc[bot]]

🎉🎈 @Bhavyajain21 has been awarded $36! 🎈🎊

• Share on socials
• Give feedback