Eleino/refactor/615 refactor gallery unified schema for multiple images animation and optional links

[eleino]

📄 Pull Request Overview

Closes #615

🔧 Changes Made

1. Created PhotoObjectV2 on Directus, based on the data needed for displaying Gallery items.

2. Implemented code for fetching the new PhotoObjectV2 data from Directus and mapping it to useful format for displaying the data on the Gallery page.

• changes from issue:
  • animation is now separate from image frames
  • links are now social media icons
• the mapper maps translations directly to photo object fields, sanitizes links, maps images to a frames array with their Directus url, and maps author's name to an url-safe anchor id with 'åäöé' being replaced by 'aaoe' etc, and non-alphanumeric characters being replaced by '-'. For example, 'Matti Meikäläinen' becomes 'matti-meikalainen'.
• also implemented smooth scrolling to the item with the anchor id if a hashtag is present in the url (e.g. /picture-galleries#matti-meikalainen).

3. Updated the Gallery page to match the latest Figma designs on both desktop and mobile.

• images and animation are only displayed if present
• social media links are displayed as icons and only shown if present
• each photo object entry is displayed as its own card
• implemented tab navigation between different categories, with the tab colors and view section's background color changing based on which tab is active as shown in Figma
• implemented selection dropdowns for filters
• implemented a 'no results' view if a category is empty or no matches found for the filters (inlcuding search)

4. Removed unused gallery items and types.

---

✅ Checklist Before Submission

• Functionality: I have tested my code, and it works as expected.
• JSDoc: I have added or updated JSDoc comments for all relevant code.
• Debugging: No console.log() or other debugging statements are left.
• Clean Code: Removed commented-out or unnecessary code.
• Tests: Added new tests or updated existing ones for the changes made.
• Documentation: Documentation has been updated (if applicable).

---

📝 Additional Information

Provide any additional context or information that reviewers may need to know:

• Screenshots:

Scrollbar example:

• Known Issues: There are some differences from the Figma design:
• The tab names and number are different because they depend on category definitions in Directus.
• 'Sort by' dropdown uses radio buttons instead of checkboxes because they are mutually exclusive.
• The scrollbar for the author selection dropdown doesn't match Figma, because the only universally-available styling options are width and primary colors.

[Rutjake]

Great work overall! Just a small nitpick on type safety, left a comment inline below.

[Skoivumaki]

Massive issue, very good work. Directus schema is as issue required. There was no mention of i18n/translations for the object in the issue, but its nice to see you thought of it and implemented it + the social links should suffice👍
Thanks for cleaning up the unused files. I trust you actually checked that they weren't referenced in anything.
One small thing:

• Categories text disappears and component enters "desktop variant" after 770px when mobile is still relevant. Personally I think the desktop variant of tabs/categories should only render when they all fit on one row (unlike in example):
  Obviously Figma example didnt take that many category tabs into account, but I think we'll manage.
  So to clarify:
  Keep TabNavigation in mobile variant (one with categories text) until all tabs fit on 1 row.

[eleino]

Massive issue, very good work. Directus schema is as issue required. There was no mention of i18n/translations for the object in the issue, but its nice to see you thought of it and implemented it + the social links should suffice👍 Thanks for cleaning up the unused files. I trust you actually checked that they weren't referenced in anything. One small thing:

* Categories text disappears and component enters "desktop variant" after 770px when mobile is still relevant. Personally I think the desktop variant of tabs/categories should only render when they all fit on one row (unlike in example):
  <img alt="Image" width="1728" height="838" src="https://private-user-images.githubusercontent.com/123396118/628409964-1aad7683-1bb7-45c9-9ce6-c851f277e839.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODUzMzQ4OTMsIm5iZiI6MTc4NTMzNDU5MywicGF0aCI6Ii8xMjMzOTYxMTgvNjI4NDA5OTY0LTFhYWQ3NjgzLTFiYjctNDVjOS05Y2U2LWM4NTFmMjc3ZTgzOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwNzI5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDcyOVQxNDE2MzNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xOWY0MjI1NDFmN2ZiMjZhYjJkNmU3N2VkODM3M2QyMzMyYTA5MmI0YTUzZTE5NDdlYTJhYzk5MjRhOTgzNjgyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZyZXNwb25zZS1jb250ZW50LXR5cGU9aW1hZ2UlMkZwbmcifQ.5HMGOLoky40qYkk_rAlnFtx7pqNnfAC9c_yG05Md8m0"> Obviously Figma example didnt take that many category tabs into account, but I think we'll manage.
  So to clarify:
  Keep `TabNavigation` in mobile variant (one with categories text) until all tabs fit on 1 row.

Thanks, I've updated tabs now, and yes, I checked that none of them were in use, there were some being used by the Comics page so I left those alone.