Add storage shopping cart, loan form and various improvements

[ZeroWave022]

This PR improves the storage page by adding the following features:

• Buttons to each ItemCard at the Storage page to add to or remove from cart
• Adds a shopping cart which saves info about your selected items to LocalStorage
• An overview of your shopping cart - meaning a list of items you've selected
• Refactoring of the storage page into multiple components for easier development, debugging and code maintainability
• Add a form to request loans
• Add loading skeletons

[michaelbrusegard]

Remember to move stuff to layout.tsx, and use route groups as discussed. Also create loading.tsx for all the pages

[ZeroWave022]

Resolved almost all conversations by applying fixes, but please see the comment about skeletons.

Please make sure to review the route group solution in 34e9820978a751dd125147a99cd739b16d5a027 - this required changing the location of search params, but otherwise, it went quite smoothly.

Let me know if you've got any more feedback!

[michaelbrusegard]

The check fails because you dont have updated dependencies. You need to run bun install and commit the lockfile, I can do it

[michaelbrusegard]

It does not get to run the lighthouse checks because it fails the build, you can check why it fails the build in the GitHub action or you can try building it locally using bun run build and then bun start. I want to merge it too, but can not merge when it fails building

[michaelbrusegard]

We should implement this so search params are cleared on default instead of setting the default value to an empty string which does not represent a value.

Edit: You would just add a snippet like this .withOptions({ shallow: false, clearOnDefault: true }) and set a default value to the actual default value and not an empty string. See here: https://nuqs.47ng.com/docs/options#clear-on-default

Edit2: The SortSelector and CategorySelector should be combined to a single component where you use useQueryStates instead to keep track of both of them. See here: https://nuqs.47ng.com/docs/batching#usequerystates

[michaelbrusegard]

The search bar component should include the icon inside the input, this can be achieved by setting the wrapper div to position relative and absolutely position the search icon in the input. then add some padding on the left side of the input.

[michaelbrusegard]

The title text is cutoff at the bottom for the items see the y in the screenshot

[michaelbrusegard]

The scaling transition on the images scales it outside of its container. An easy way to see this is to look at the corners who stop being rounded when it scales

[michaelbrusegard]

Also most of the lighthouse warnings have to be addressed. If some of them are unnecessary we should remove them, but most of them look appropriate

[michaelbrusegard]

The skeletons do not match what is loaded. Also the main skeleton can be simplified by just showing the cards and not the content inside the cards. The skeleton for the pagination is missing also we can use the same paginationskeleton as the one from news

[michaelbrusegard]

The shopping-cart page should have a layout. There are a lot of things that can be loaded immediately and does not need to be in the suspense

[michaelbrusegard]

Also we should have the ability to select how many items to borrow of each on the shopping cart page

[ZeroWave022]

The default value for the sorting is now popularity instead of an empty string. The default value for the category stays as the empty string, as that represents any category.

The CategorySelector and SortSelector components have not been combined into one, as it's not guaranteed we will not use them separately in the future. It's reasonable that they manage their own state.

Thanks for improving the search bar!

Line height of item names in the cards has been fixed.

Images in item cards scale properly.

The skeleton on /storage has been improved. The skeleton on /storage/shopping-cart is difficult to improve, because it's impossible for us to know how many items we have, or if we have any items in the cart at all. Therefore I'll just leave it to be a few rows of items as default.

Lighthouse fixes applied:

• Priority set to true for images in storage page (not loading={'eager'}, see recommendation in the docs)
• ARIA labels for buttons

Lighthouse is still complaining, but everything seems to be fine (at least better than before).

There is currently (as far as I know) no easy way to give the shopping cart page a good layout. The only things that can be preloaded are the title and the buttons. However, the page is set up like this:

Title Items table Action buttons Loan form

As far as I know, you can't "split" children in the layout in a way that would make it possible to create a layout for this, assuming only the title and action buttons can be preloaded.

Added the ability to select how many items you'd like to loan!

[michaelbrusegard]

• The bug with images scaling is still there. When the image scales, the corners become squared off instead of rounded.
• All images do not have to be eagerly loaded, only the ones visible on FCP. Maybe set it so only the first 4 are eagerly loaded using the index.
• Move the back to cart button up on the same line as the shopping cart title and make it a ghost variant instead of primary (primary just for CTA stuff) see photo below.
• Remove the borrow now section and create a button on the opposite side of the title at the top (see photo). This should be primary colored and maybe an icon. This button should open a modal. You do not need to put anything in this modal, but maybe we will have a phone input there. We fix this when we setup the backend later.
• The empty cart button can remain, but remove it when the cart is empty. This or we disable the shopping cart page by marking the link to it as disabled when the cart is empty. Whatever you think is best. Comment: The layout can only be the title but with the changes I proposed above this, I think you are right and a layout will be hard so lets not do that.
• Shopping cart page does not work on mobile. It is fine that you have to scroll on the table (I dont see a way around that), but shadcn handles it in a good way and creates a local scroll instead of a global, if you understand what I mean.

Lighthouse stuff We should get a more detailed report so I think something is wrong with the configuration. It should link to a webpage with more details. I will take a look at this tomorrow. The fixes below I think are fixable

• There is a button somewhere with an icon that doesnt have text or an aria label.
• There is some code that will never run somewhere.

Extras (Should probably be new PRs, but can be nice to discuss):

• If you want to begin validation, validation must be the same for frontend and backend using zod, It should not be allowed to select more units than that is available.
• A way to add a new item or edit an item, should this be a button on the page called new item that is only visible to labops and edit item on the individual items that opens a modal or should it be an "admin page".

Suspense

• So the skeletons look great alone, and you made it extra hard since you created it for the contents of the card instead of the card themselves. I think it still is easier to swap them out with square card but it doesnt matter much. As you can see in the clips below they dont match when I toggle suspense. The reason it is important that they match is to avoid content shift. They will load very briefly and shortly. Also there is a lot of static content you can include in the shopping cart skeleton. The shopping cart title, we already know and it can be shown in the skeleton. the same goes for all the labels in the table. Maybe even duplicating the table and fill its content with skeletons is a better and easier way to do it.
• In the clip from the suspense on the news side you can see how the title and button remain.
• For suspense you are using a larger border radius for text skeletons than we are on the News page. Either change it on the news page or change the storage suspense to match the same border radius. Suspense clips: https://github.com/user-attachments/assets/06d47eb8-caf6-4e68-9045-34475fd5b803 https://github.com/user-attachments/assets/4880b370-0448-4ee0-b31d-1eb13072d8d1 https://github.com/user-attachments/assets/0d2ad584-c3c9-4803-ab6b-e56c89ebe6c6

[michaelbrusegard]

Can we merge now?

[michaelbrusegard]

On iphone se2 the back to storage page button comes too close to the title. Either we have to make the title right aligned or smaller

[ZeroWave022]

The issue described in the last comment is now fixed by making the title smaller om smaller screens.

Lighthouse was complaining about layout shifts on the storage page. When this was investigated locally, it pointed at the Hackerspace logo. Please see the before and after the fix for layout shifts.

Also, the lighthouse warning will be ignored when #55 goes through. The unused javascript warning is triggered by react-daypicker for some reason, even though isn't not used on the storage page.

All in all, seems ready to be merged

[michaelbrusegard]

Should we merge this now? Maybe we merge with dev to get the lighthouse changes and make sure it approves the changes (if not we add them to the ignore list)

[ZeroWave022]

Yeah, merging