Add image viewer rework

[Septicity]

Description

I've fixed many issues with the image viewer, while also adding some intuitive functionality.

Fixes:

• Inline styles that aren't changed dynamically have been moved to the CSS.
• The Zoom % pill no longer changes size except for manual zoom over 500%. This prevents the +/- buttons from moving as they are being clicked.
• Transitions are now disabled for manual panning to improve responsiveness.
• Images are now scaled independently of browser dimensions. This means that 100% zoom will always refer to the image's native size, and zoomed images will be rendered at full quality. (Previously, a small browser window would shrink the base image such that zooming in would make it visibly blurry.)
• Pinch gestures generally did not work before (as their detection was usually overridden by the double tap detection, since pinching inherently involves using two fingers); This should be fixed. (Waiting for a deployment to test properly!)
• The double tap gesture will no longer be triggered by extremely fast double taps, to prevent accidental triggers.

Changes:

• The Zoom % pill now allows entering a custom zoom value, rather than resetting to 100% zoom on click.
• Related to the previous change, there is now a View Original Size button (with a photo icon) that only appears when you aren't already at 100% zoom.
• With the image scaling changes, I have reasonably kept the original behavior, with alterations to stay intuitive: Until an image being viewed is manually panned or zoomed (or the view is reset), it is automatically scaled to fit the container it's in.
• Related to the previous change, there is a Reset View button (with a refresh icon) that only appears when you have manually panned or zoomed away from the initial rendered position.
• The default rendering style for images is now pixelated; this preserves detail for smaller images, especially pixel art, and shouldn't be relevant for larger images, but it's a change I'm willing to revert.

Known issues:

• The Reset View button doesn't animate the transition back to the original view, but the View Original Size button does. I could not figure out how to get this to work properly.
• Some functionalities/changes I'd make aren't possible without project-wide reworks:
  • Some of the buttons' functionalities would be much clearer with tooltips, but no components use browser-level tooltips and I don't feel confident adding the pop-up tooltips used in the sidebar.
  • I would add a border to the Download button for better contrast, but the only "Primary"-colored button I've seen with borders is the Mark All As Read button, so changing that would require a broader scope.
  • Some of these changes may need to be put into the PDF viewer as well, or perhaps we should combine those two things at some point?
• It feels disingenuous for me to bundle a bug fix with added functionality, but the process of fixing these bugs led to gaps that needed to be filled; If necessary, we can try to separate this into two PRs, but I assume the functionality will be appreciated already.
• This needs a changeset, but I'm not sure exactly how much of this will make sense to put into it, since it's a fairly big change.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

AI disclosure:

• Partially AI assisted (clarify which code was AI assisted and briefly explain what it does).
• Fully AI generated (explain what all the generated code does in moderate detail).

I used AI to help wire gestures correctly and deal with correctly selectively disabling animation transitions.

[nushea]

Some functionalities/changes I'd make aren't possible without project-wide reworks:

• Some of the buttons' functionalities would be much clearer with tooltips, but no components use browser-level tooltips and I don't feel confident adding the pop-up tooltips used in the sidebar.

There are many buttons that have 'title's, and it is useful to have them

• I would add a border to the Download button for better contrast, but the only "Primary"-colored button I've seen with borders is the Mark All As Read button, so changing that would require a broader scope.

At least the send button does aswell and it does help with clarity

I am mentioning this as the reason why i added them

[nushea]

Compiled on my device and uploaded it to https://sable.she-a.eu if anyone wants to test it on their phone, this is a clean build of it but probably best idea to use test accounts since you cannot verify the authenticity of this site