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.