small improvement, nice for power users

There is currently an issue with remix local server crashing on any syntax error. More details here: remix-run/remix#5631

To go around this I have locked the versions of remix packages to 1.13. We need to keep an eye on the issue so once its resolved we update our remix versions.

We have a component called Toast that shows notifications.
On mobile it is not placed in the correct place. @hunar1312 could you please solve it?

Can we find a way to support HEIC? Perhaps we can change its file type to JPG or something pre-upload?

We need to implement it Error and Catch boundaries for the whole app.

https://remix.run/docs/en/1.14.3/route/error-boundary
https://remix.run/docs/en/1.14.3/route/catch-boundary

Right now the UX is good. But I think that what Clockify does with a modal is way better.

As we used supa-fly-stack as a staring point, the license is still not updated. @carlosvirreira could you please look into it so we can make sure its up to date. Here is the file: https://github.com/Shelf-nu/shelf.nu/blob/main/LICENCE

• On /items/new > Cateogry should be changed to Category
• [ ]

Capture from my phone > Safari > Incognito

You have to scroll down and get some Jank before you get to see the icon to log out.

The main-navigation sidebar is already developed for desktop. Needs to be responsive for all screens.

Design to be implemented: https://www.figma.com/file/2XkiKJ4II7Mux6JJL9hYTm/Shelf-App-%7C-Production-Ready?node-id=5534-343707&t=BbNGgKv7oDqD9Cpt-4

I had issue with the @apply from tailwind when updating. Apparently the config needs to be changed from manual to automatic.
Markdalgleish from the remix team made a post on how to do it.
https://github.com/remix-run/remix/releases/tag/remix%401.16.0

hey @carlosvirreira & @jurrejansen .

I have made a v1 of the forgot & reset pwd functionality. Its quite basic but it will do the job for now.
We also have the existing standard auth views.

Would be great to design some kind of layout for the logged out views(only auth for now).
We have the following views:

• Login (incl. Magic link)
• Signup (incl. Magic link)
• Forgot password - where the user fills in their email
• Reset password - where the user fills in their new password and confirms it.

Of course this should also include error states.

From doing social listening and talking with potential customers. It seems like serial numbers are important for assets. This is not a required field at all, but an optional field which is very beneficial for asset database export and insurance purposes.

@jurrejansen can you please add it to our create page and let me know. Then I can add it to the MVP checklist.

At the moment, let us make it into a simple text field. Later we can consider making it even more easy/powerful.

To buy stickers (concierge service) and to either buy subscription or credits.

We should implement prefetch in the <Button/> component so all our links are pre-feteching data.
https://remix.run/docs/en/1.14.3/components/link#prefetch

Some pending stuff:

• shortcut to focus on field
• Next button is not working when on page 0/1
• add current items found vs total items in DB

UI of Map component for individual item is needed to be developed.
Design:

1. The search field
2. The category filter field
3. Each row needs update (you can see label is below it and there is an icon on the right side
4. Pagination - i would say dont worry for it for now, we leave it as it is
   Extra note: the labels () you can see that look different on mobile. You can ignore that, it should stay the same as on desktop
   i will add all of this to an issue

Hi @carlosvirreira you added this task to task list sheet. Could you give a general indication on what should be improved? Thanks

UI development of new functionality Checklist to be completed. All the screens of control flow in checklist feature are given in design.

Design: https://www.figma.com/file/2XkiKJ4II7Mux6JJL9hYTm/Shelf-App-%7C-Production-Ready?type=design&node-id=6112-324613&t=9GXhekvVQ1WxbU0V-0

Adding the category filtering to the index. Its basically working but we still have quite some things to handle:

• Search is somehow broken right now. If you try to search it refreshes the page
• Empty state for categories filter(if no categories)
• Merge params of prev,next,search and page numbers with categories params(maybe make it so that categories filter and search are part of the same form.
• Double check for hydration issues due to client side only components
• Clear categories filter ( Dont have design for this so I will wing it)
• Fallback states for clientOnly components(category select and categories filter dropdown)

We sent a passowrd reset link to EMAIL.

it should be "password"

Amount is unknown but it would be cool to look already at making a plan of approach for this.

Item page is already developed for desktop, needs to be all screens responsive.

Design to be implemented: https://www.figma.com/file/2XkiKJ4II7Mux6JJL9hYTm/Shelf-App-%7C-Production-Ready?node-id=5499-339309&t=vDHoTduTkb8IZHDn-4

Hi @carlosvirreira @DonKoko

As suggested by @DonKoko I'm moving this discussion to a separate issue. Would be nice to update the production ready designs to the definitive branding.

ORIGINALS

Based on our discussion last week I think we compromised on a few things.

• We use all lowercase type for the logo
• We stick to the original (S-shaped) icon

UPDATED ORIGINALS

To be discussed:

• Color composition of logo
• Color composition of dashboard UI

To launch v1 we need to get the app production ready. Here is a list we need to go through.

Server

• setup production server
• Setup production DB
• Setup mail verification for users registering
• Emails adjustments
• Setup DB backups
• Custom smtp on supabase

App

• Error handling - #37
• Rename 'items' to 'assets'
• add clarity
• add metronome.sh

Functionality for creating an item.
Tasklist:

• Basic create
• Title
• Asset main image
  • Add timestamp to main image filename
  • Delete asset when deleting item
  • Change expiration time to 24h
  • Implement automatic re-signing of image when its expired
• Implement Markdown for description
• Adding category

Some tests that were postponed for after mvp

E2E

• Assets index
• Creating asset with location, category, tags
• Tags functionality
• Locations functionality
• Viewing QR within Asset page
• QR scanning workflow
• Editing user profile
• Adding team members

https://testapp.shelf.nu/items/new

Okey, so I am having this thing, that I feel like we are having too many buttons here

My suggestion would be to just leave the QR button visible and put the edit/delete in a dropdown. What do you think?

• As a mobile user (safari) - when I log in from mobile, I get sent to a view with the menu open. I would like to go to index.
• Clearing search on Category page with the X button takes me to index. I would expect this to keep me in the same view.
• Category creation: the fields are not rendering properly. Even if the create dialog/box becomes large. Make it so that you can create a good name and description, as well as hex color for it.
• Delete dialog on mobile needs to be adjusted, everything can be aligned in a centered position
• On index: Toggling a category filter results in page layout shifting and a different position of the filter category widget
• The 'no notes' text on mobile is a bit too tight, it can be a bit broader.
• If we will not support markdown on the asset description field, let us please not promote it (as in, maybe you can add it and preview it, however, it will not be reflected on the front end. So I would prefer if we take it off)
• Via the menu, opening the 'settings' tab does not do a full page load, but it loads in the background and you are stuck in the menu.

See recording / Safari

Is there a way to make an 'enter' on the editor? I really miss it and it makes my notes ugly.

This is one of the most complex parts we have of MVP and the last thing we need to complete in terms of features before preparing the app for production.

Flow

We created a flowchart to visualize the whole flow of the process:

Views

@hunar1312, I would like you to help me with some of the views we have to design.

Views that need front-end dev:

• QR not found - https://www.figma.com/file/2XkiKJ4II7Mux6JJL9hYTm/Shelf-App-%7C-Production-Ready?node-id=6276-340367&t=t2Ff3H4Te9yhR6fM-0 - Route: https://github.com/Shelf-nu/shelf.nu/blob/100-qr-scanning/app/routes/qr%2B/not-found.tsx

• Item scanned | Not logged in - https://www.figma.com/file/2XkiKJ4II7Mux6JJL9hYTm/Shelf-App-%7C-Production-Ready?node-id=6277-344806&t=t2Ff3H4Te9yhR6fM-0 - Route: https://github.com/Shelf-nu/shelf.nu/blob/100-qr-scanning/app/routes/qr%2B/not-logged-in.tsx
• Item scanned | Logged In | NOT owner of asset - https://www.figma.com/file/2XkiKJ4II7Mux6JJL9hYTm/Shelf-App-%7C-Production-Ready?node-id=6288-355531&t=t2Ff3H4Te9yhR6fM-0 - Route: https://github.com/Shelf-nu/shelf.nu/blob/100-qr-scanning/app/routes/qr%2B/logged-in-not-owner.tsx
• Contact owner - https://www.figma.com/file/2XkiKJ4II7Mux6JJL9hYTm/Shelf-App-%7C-Production-Ready?node-id=6277-344844&t=Yfl1XZNTY96G2gI0-0 + success note (https://www.figma.com/file/2XkiKJ4II7Mux6JJL9hYTm/Shelf-App-%7C-Production-Ready?node-id=6277-344859&t=Yfl1XZNTY96G2gI0-0) - Route: https://github.com/Shelf-nu/shelf.nu/blob/100-qr-scanning/app/routes/qr%2B/contact-owner.tsx

• Unlinked QR | Linked to user | Belongs to user- https://www.figma.com/file/2XkiKJ4II7Mux6JJL9hYTm/Shelf-App-%7C-Production-Ready?node-id=6288-355382&t=t2Ff3H4Te9yhR6fM-0 - Route: https://github.com/Shelf-nu/shelf.nu/blob/100-qr-scanning/app/routes/qr%2B/unlinked-qr-belongs-to-user.tsx
• Unlinked QR | Doesn't belong to any user - https://www.figma.com/file/2XkiKJ4II7Mux6JJL9hYTm/Shelf-App-%7C-Production-Ready?node-id=6291-343760&t=t2Ff3H4Te9yhR6fM-0 - Route: https://github.com/Shelf-nu/shelf.nu/blob/100-qr-scanning/app/routes/qr%2B/unlinked-qr-orphaned.tsx

@hunar They are all very simple views, mobile first. What I will do is create a branch where I will create all the files for each view and I will update this description so you know in which file to work.

We need to implement the functionality to make the sidebar foldable.

Design

Open state:

Closed state:

@jurrejansen @carlosvirreira
We are missing some designs related to this, or at least I cannot find them

• How does the user open the folded sidebar?
• How does the user log-out when sidebar is folded?

Functionality

1. The sidebar closes when clicking the icon on the right of the logo
   
2. The sidebar opens ( we are still waiting for designs for that)
3. The sidebar opening/closing should be animated. I guess we can just do it with css, however we use Framer motion(https://www.framer.com/motion/) maybe that's easier?
4. We should implement a cookie that remembers the user's last state of the sidebar, as we don't want them to have to close it every time. This can also be saved in the DB but for now a cookie is fine.

We are currently hosting on fly.io with the stack based on supa-fly.

As I quite used to vercel and I love their per-branch links and deployment, I am considering hosting the live app on vercel.
Found this repo: https://github.com/vercel-labs/remix-on-the-edge
Could be an interesting this to consider.

Related to #79 we need to also do the ui for Download QR tag.

Works with a sidebar that opens when you click the "Download QR tag" button.
Needs to be animated with framer-motion.
Here is just a quick and dirty example of how it would work via chat gpt:

import React, { useState } from "react";
import { motion } from "framer-motion";

const Sidebar = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleSidebar = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <button onClick={toggleSidebar}>Toggle Sidebar</button>
      <motion.div
        initial={{ x: "-100%" }}
        animate={{ x: isOpen ? 0 : "-100%" }}
        transition={{ duration: 0.5 }}
        style={{
          width: "300px",
          height: "100%",
          backgroundColor: "#333",
          position: "fixed",
          top: 0,
          left: 0,
          zIndex: 999,
          padding: "20px",
          boxSizing: "border-box",
        }}
      >
        <h2 style={{ color: "#fff" }}>Sidebar Content</h2>
        <p style={{ color: "#fff" }}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor
          felis at mauris vehicula eleifend. Sed vitae dapibus arcu. Praesent
          ut ipsum et velit faucibus dapibus a at risus. Nulla facilisi.
        </p>
      </motion.div>
    </div>
  );
};

export default Sidebar;

Needs to of course be improved to use atom's and to also render the overlay that shows on the side of the QR code thingy.
Let me know if you have any questions. Should be a pretty easy and straightforward thing to build.

Once #83 is finished, please create a new branch as copy of 79-view-item and work on it there.

or is just not clickable (safari)

@carlosvirreira how do you imagine this? Will a lil chat open up in bottom right corner like on marketing site, or will a new tab open in Crisp environment. Got a few options:

OPTION I

OPTION II

OPTION III
We could also just go with the Crisp icon in bottom right corner. Instead of the designs above.

• Find a better image

To ensure a consistent style around the website, we need to implement a out tailwind theming based on the figma designs.
We will start with some basic elements that are required for building the UI and build on top of that.

• Colors - including all variations. Follow untitled UI
• Buttons
• Spacing
• Typography
• Shadows

Took me just a few hours of using Jotai to fall in love with it. So many advantages from using just default useState and useContext.
Now that the app is small, we can use the opportunity to refactor to use jotai instead of native react state.

Items will be organized by category. To be able to add this feature to items we first need to create the categories model with all of its features.

DB

DB model needs the following fields:

• Title
• Description
• Color
• Relationship to items - 1 to many
  • 1 Category can have many items
  • 1 Item can have 1 category

UI

• Index page
  • use the list component
  • Delete action directly there in the index
  • Create action/form is also directly in the index
  • Pagination

This issue covers the "show" view for the items.
File location: https://github.com/Shelf-nu/shelf.nu/blob/dev/app/routes/_layout%2B/items.%24itemId.tsx
Figma link to this view: https://www.figma.com/file/2XkiKJ4II7Mux6JJL9hYTm/Shelf-App-%7C-Production-Ready?node-id=5340%3A287414&t=rINYxi14vcHB3vyF-1

Most of the content/data you need is already returned by the loader.
The idea is to create the general layout and mostly focus on the information we already have.
Things to skip for now:

• map
• notes backend

For the notes part you can just hardcode some content to make the ui look as in the design and I will do the backend part after.
Also what will need to be taken care of is the mobile view. Lets start with desktop first as we need to still figure out some details related to mobile.

We currently have a delete action for multiple objects:

• Items
• Categories

We dont have any verification so when the user clicks delete, they will basically insta delete the item or category which is not good. We need to implement the functionality where they have to confirm deleting.

We need to add a user picture upload functionality to the profile. For now we will be using the storage service of Supabase.

Checklist

This has multiple aspects related to it that we need to consider:

1. Bucket config

• Create bucket - based on the recommendations of supabase, I have decided we will have different buckets for different files. This is also related to policies as something like profile pictures for example might need public SELECT but auth is required for INSERT, UPDATE, DELETE
• Setup policy - just starting with something basic like in the example on supabase docs

3. Back-end implementation (CRUD)

• Create an api endpoint for it as it can be called from different places and I don't want to just put it in the edit user route
• Create some re-usable functions and logic to be able to handle uploads of different assets(MVP please)
• Upload the file to the correct bucket and folder
• If there is already a profile picture, remove it after the upload has finished (Here we have to think about filenames and so on, how do we transition from old to new)
• Update the user after the file upload has finished
• Currently we have the whole bucket private but I think I will make it so that SELECT(viewing pictures) is public.
• Optimize the file - we can of course do some front-end validations for file size, but users will still be dropping huge images. We need to optimize them somehow. Maybe use imagemagick or maybe Supabase has something for optimizing but I doubt it. Will look further into it.
• Can we implement some profanity filters? Just an idea we have to look into it.

4. Front-end implementation

• Choose a package(ship fast) to implement drag/drop uploading. So far react-dropzone looks like it.
• Implement front-end ux for drag/drop
• Implement UX for click to select file and upload
• Implement a preview of the image that the user has added.
• Implement different states based on fetcher(uploading, uploaded, error)
• Implement disabled state for the Dropzone while an upload is happening
• Use some type of clean animation for showing the status message. Will make the layout shift a bit smoother

Design

@jurrejansen based on our discussion on discord, when the user drops the file it uploads immediately but there are a few more things that need to be clarified:

• Positioning - currently the profile picture is positioned within the user details form, however technically they are different and considering that it needs to be uploaded immediately and not when clicking save, it could be confusing for the user. I see 2 soltutions now, please feel free to give suggestions

  • Change the logic so the image gets uploaded as part of the user details save action. This will require some more info messages to be designed such as "Dont forget to save your profile"
  • Think about positioning of the element, maybe below the form.

• Success message - where and how do we show the success messages

• Error messages - where and how we show the error messages

• Preview - in the design there is a preview of the current user image. Do we just replace it at the moment that the drop has completed? What if the upload fails, we can revert it quite easily i think using the Optimistic UI strategy

Need to update the readme to include what buckets are required for storing files on supabase storage

Hi,

I have cloned and run a local instance of Shelf.nu. Congratulations on the effort you have put into it so far.

While testing, I noticed that there are some features described on your website that are not available in the open-source version. Am I missing something?

Missing features:

• Adding tags
• Assigning depreciation
• Assigning owners
• Assigning location
• Archiving assets
• Sorting filters

Furthermore, I would like to make the following feature requests in order of importance:

• Allowing the creation of customizable fields, such as purchase date, serial numbers, warranty information, etc.
• Enabling the creation of associations between assets, for example: server_03 > rack_01, disk_01 > server_03, etc.
• Allowing the selection of fields to display in the "home > items" list. Currently, only the item name, ID, and category are shown.
• Providing the option to define rules for asset IDs instead of assigning them automatically.
• Supporting the creation of hierarchical categories and locations.
• Allowing the export of the asset database in .csv format.
• Providing customization options for QR codes, including images, margins, dots, corners, background, etc.

Thank you for your attention to these matters.

Create a model for storing notes related to the item as well as build the ui for submitting new notes to an item.

Edit UI for items.