Add 'delete scratch' button to user profile page

[MatBourgon]

These changes add a 'delete scratch' button to the user's profile, only viewable and usable by themselves and admins.
The button starts white and prompts for confirmation before deletion, but can be bypassed by holding shift (which also turns the button red).

[mkst]

I'm wondering if the delete button should be a filled red pill that's like [🗑️ delete] to match the 100% pill.. perhaps the pressing shift doesnt need to change the visualisation, just suppresses the prompt?

[MatBourgon]

I've gone ahead and done that, so it no longer reacts to pressing shift, but the confirmation still gets skipped. I've also resized the button to match the pill's size a bit better:

Unless I misunderstood the comment and by 'filled' you meant red bg with white text, in which case I can quickly fix as well.

[mkst]

Yeh I mean so it looks like it belongs next to the 100% pill 😎

[MatBourgon]

Sounds good 😎
Here's how it looks like now:

[mkst]

Nice!

Could you remove the translate y that i added to the progress pill css... When i was looking on my phone i needed to shift the text down, but now every time i look at it, its definitely wrong to have done so...

decomp.me/frontend/src/components/ScratchItem.module.scss

Line 53 in 2d0becd

transform: translate(-2px, 1px);

This ^^ just change the 1px to 0, and/or make it translateX instead

[mkst]

What would actually be pretty cool, is to hide the "Delete" word on mobile, so its just the trash can icon on small screens.

You can do something similar to this code :

decomp.me/frontend/src/components/Scratch/ScratchToolbar.tsx

Line 175 in 2d0becd

<span className="hidden md:inline">{text}</span>

[MatBourgon]

I've handled the fix to the translation, but I'm not too sure about the mobile styling. It doesn't quite look right.

Unless you're fine with this.

[mkst]

ah no i meant to shrink the width to be more like a square ignore my poor paint skills but like this (but with the trash icon):

[MatBourgon]

Oh gotcha. I'm not too sure how to apply custom stylings specifically for mobile so I can't quite get it to be square shaped, but I've got it like this now:

[mkst]

it might be worth trying to use tailwind for styling .. we're slowly moving away from the explicit (s)css to using tailwind. might help with all the !importants

[mkst]

maybe we should disable the delete (have some const [isDeleting, setIsDeleting] = useState(false) and then set isDeleting before the delete (and disable the button to avoid users double-clicking?