fix: added thumbnail to bookmarked items

[Santirv17]

Fix bookmark folder cards so they display folder thumbnails and keep the same layout when entering manage mode.

Bookmarks now use the thumbnail URL provided on item.thumbnails?.medium.

• Added a BookmarkThumbnails file for BookmarkCard and BookmarkCardEdit
• Replaces ItemThumbnail import to CardThumbnail and moved it to BookmarkThumbnails

Before:

After:

The manage-mode bookmark cards were also adjusted so pressing 'Manage' does not change the card height or misalign the thumbnail/text layout.

• Modified 'BookmarkCardEdit' to maintain same visual property while in both modes

Before:

After:

[spaenleh]

First of all, thank you for your work on this. I really appreciate your effort of ensuring the layout stays the same between the edit and display state of the bookmark.
As a small note I was confused since the screenshots do not show the same padding on the side (I think you made that adjustment later and the screenshots were not updated, so I checked the code to be sure).

Overall changes look good. If I had to nitpick, I think it is not necessary to create the BookmarkThumbnail component just to set the height to a constant value. Another note is that most of the code inside the CardActionAreaLink and the CardContent for the edited and display versions is the same. Or at least they try to look the same but have small code inconsistencies. I would maybe make that part a common component instead and directly call the CardThumbnail in place of the BookmarkThumbnail an remove that extra component definition.

But again this is being a bit nitpicky. I would recommend looking at the code of both components side by side so you can see clearly the differences and the similarity. The paddingRight is set at different levels for example.

[Santirv17]

I have read and applied your recommendations on the code. I removed BookmarkThumbnail and moved it's logic to both BookmarkCard and BookmarkCardEdit. I also removed some unused paddingRight code and moved the correct one to match styles in both files.

As for the earlier screenshots, you were right, they were outdated in comparison to the final code as I made some layout changes/fixes after taking the screenshot.

[spaenleh]

Thank you very much for the changes. I have added 2 comments, but I will approve now and let you fix them before merging. 💯

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[spaenleh]

@allcontributors please add @Santirv17 for code

[allcontributors]

@spaenleh

I've put up a pull request to add @Santirv17! 🎉