UX: Add preview image to the labels tab in the photo edit dialog

[reubendowle]

This pull requests adds an image preview when editing labels.

This is to address this issue: #628

The issue points out that there is limited space for thumbnails on mobile devices, so it will be hidden on mobile devices.

Acceptance Criteria:

• Features and enhancements must be fully implemented so that they can be released at any time without additional work
• Automated unit and/or acceptance tests are mandatory to ensure the changes work as expected and to reduce repetitive manual work
• Frontend components must be responsive to work and look properly on phones, tablets, and desktop computers; you must have tested them on all major browsers and different devices
• Documentation and translation updates should be provided if needed
• In case you submit database-related changes, they must be tested and compatible with SQLite 3 and MariaDB 10.5.12+

[CLAassistant]

All committers have signed the CLA.

[lastzero]

Thanks! We'll provide more feedback when we are back in our office.

[lastzero]

@reubendowle I'll merge this, but need to refactor it as $isMobile only indicates if it's a mobile browser e.g. with touch event support, so doesn't depend on the size of the browser window, which is the actual concern:

photoprism/frontend/src/app.js

Lines 64 to 66 in 84a4c3c

	const isMobile =
	/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
	(navigator.maxTouchPoints && navigator.maxTouchPoints > 2);

[graciousgrey]

Ideally we can also add a thumbnail to the ⚙️ tab.

[lastzero]

@graciousgrey I'll check if that's possible. It might be good to add a component for this so we don't have to copy and paste the code into each tab....

[lastzero]

Updated our release notes and the preview build, so you can test this:

• https://docs.photoprism.app/release-notes/#development-preview

[reubendowle]

@reubendowle I'll merge this, but need to refactor it as $isMobile only indicates if it's a mobile browser e.g. with touch event support, so doesn't depend on the size of the browser window, which is the actual concern:

@lastzero personally this looks fine for me at most sizes of the browser window on PC. I guess when the width gets too narrow triggers a scrollbar:

But this is the same behavior as the details tab. So maybe it can just be left like that, and maybe remove the isMobile condition completely?

[lastzero]

I've already merged and refactored it yesterday. It's now deployed on our demo and available with our preview build.

[loulou91]

Useful feature, but (for me) the most useful would be to have it on "people" tab...

[lastzero]

@loulou91 Instead of rendering the image on each tab and thus reducing the space available for the actual content, I was thinking about a statically positioned preview e.g. in the lower left corner. However, we just merged a lot of PR and are still busy making them releasable, so this will have to wait a bit.