Book dashboard image UI
Context
The Ketida 2 dashboard is currently a grid of books that each have a grey rectangle. The dashboard would be more visually appealing with book image thumbnails to identify the books. These images are distinct from the cover which might contain the spine and back cover as well. We should allow the user to upload a book thumbnail image from the dashboard.
Proposal
As shown on Figma here, when there is no book thumbnail image, show the missing image icon and text.
The 'Delete book' is now moved into a 'kebab' menu (3 vertical dots) along with the 'Upload dashboard image' action.
The 'Upload dashboard image' action should open the file browser on your machine, where you can pick an image which is automatically cropped and inserted as the dashboard image. It is up to the user to select an image that is a reasonable size.
If an image already exists, and the user clicks 'Upload dashboard image' again, the file browser opens and the selected image will replace the current one.
Design
As shown on Figma here
Implementation (if applicable)
If helpful, use dev mode on Figma and the missing image icon here