138: Image level tags

[lessej]

Context
Foundational implementation for #138

Creates UI for:

• Project tag CRUD using modal similar to labels
• Image tag create and delete through image tag toolbar in loupe

Creates API for:

• Project tag CRUD
• Image tag CRUD

TODO before merge

• - Catch and display errors in toast

Related PR

Animl API

[lessej]

@nathanielrindlaub Added the errors to the error toast so I believe this one is ready to review.

[nathanielrindlaub]

@JesseLeung97 this is looking great! Code is clean and easy on the eyes so no notes there. I have a handful of UX requests though:

1. Can we consolidate the manage tags and manage labels modals into a single modal? Perhaps using a tab at the top of the modal to separate them? I think the UIs and code are similar enough that it makes sense to combine them. I'd also like to provide some language that explains the difference between tags/labels to include but I can think on that and get it to you.
2. Some of the language in the DeleteTagAlert.jsx isn't relevant to tags because we don't support enabling/disabling them and it won't effect the reviewed-state. You can replace those 3 bullet points with these two: "- remove it as an option to apply to your images" and "- remove all instances of it from your existing images".
3. The adding/removing of tags feels a bit laggy because we're waiting on the response from the API before updating the frontend state. I think we should update frontend state immediately before getting a response, as we do with labels.
4. Instead of using the "Select..." placeholder in the Tag Selector, use "Add tag" or even better a (+) icon and "Tag" like the Status filter in this shadcn example.
5. Is there a way to make the width of the tag selection trigger narrower (doesn't need to be quite so wide), but keep the menu itself fairly wide? Also, ideally the menu would scale horizontally to fit longer tag names if necessary instead of wrapping the names, but that's more of a nice-to-have.
6. the tag selector z-index appears to be higher than the modal z-index (try opening a modal while the loupe is open)
7. can we try putting the ImageTagsToolbar below the ImageReviewToolbar? I think I would prefer the review tools closer to the image itself, but not entirely sure until I've played around with it more.

Let me know if that all makes sense and/or if you have other thoughts! Happy to discuss.

[lessej]

@nathanielrindlaub thanks for the feedback. I agree with these suggestions. I'll update the branch to have these changes

[lessej]

Working on the changes:

• Moved both tags and labels to a single 'parent' modal with tabs
• Fixed some incorrect working on delete tag modal
• Moved tags toolbar below review toolbar
• Fixed z index for selector
• Changing selector to be similar to Shadcn style
• Fixing width of sector dropdown
• Update UI first then update data in background

Remaining work is to update the UI separately from the state so that it appears instantaneous to the user.

Screen.Recording.2024-11-19.at.23.27.11.mov

[lessej]

@nathanielrindlaub Hey Natty, I believe I've made all the changes requested. For 4. I updated the 'image tags' to not wait on the API but left the 'project tags' as is with the spinner because it seems like that's the way labels work as well.

In playing around with it, the only thing I've run into is if you add and then very quickly try and delete the same tag or delete and very quickly try and re-add the same tag, the api sometimes throws an error because the first operation is not finished by the time the second is triggered. Unless we wait for the API, I don't think this is avoidable and it's not something I anticipate users running into unless they specifically try and make it happen.