Refactor code structure for improved readability and maintainability

[danielmarv]

Description

This pull request refactors the updates/changelog UI and translations to support a new "Monthly Updates" format, improves the structure and display of update items, and streamlines the code for maintainability. The main changes include updating translation files, redesigning the UpdatesClient component, and introducing a more flexible data model for update items.

UI/UX and Data Model Refactor:

• Refactored the UpdatesClient.tsx component to use a new data model (MonthlyUpdate, UpdateCategory, ItemType) with clearer separation of update categories and item types, enabling more granular display (e.g., Features, Bug Fixes, Improvements). Category sections now display item type badges and icons, and contributors are shown with avatars. [1] [2] [3]

Internationalization (i18n) Updates:

• Updated English (en.json) and German (de.json) translation files to reflect the new "Monthly Updates" terminology, revised section titles and descriptions, and removed unused keys related to the old changelog format. [1] [2]

Component and Code Simplification:

• Removed old section components (CollapsibleSection, TruncatedSection) and replaced them with new, streamlined implementations that better fit the new data structure and UX. [1] [2]

Visual and Thematic Improvements:

• Updated timeline visuals, color schemes, and badges to match the new update categories and to provide clearer differentiation between item types (e.g., green for Features, red for Bug Fixes).

Contributor Display Enhancements:

• Improved the contributor display to show GitHub avatars with links, making it easier to recognize and access contributor profiles.

These changes modernize the updates page, making it more user-friendly and maintainable, and set the foundation for future enhancements.

Type of Change

• 🐛 Bug fix
• ✨ New feature
• 📝 Documentation update
• 🎨 Style/formatting
• ♻️ Refactor
• 🔧 Configuration
• ⚡ Performance
• 🧪 Tests
• 🔐 Security

Related Issue(s)

Closes #ISSUE_NUMBER

Changes Made

• Change 1
• Change 2
• Change 3

How to Test

1. Step 1
2. Step 2
3. Verify the expected behavior

Checklist

• Code follows project style guidelines
• Self-review conducted
• Comments added for complex logic
• Documentation updated (if needed)
• No new warnings generated
• Tests added/updated (if applicable)
• All tests passing locally

[netlify]

✅ Deploy Preview for open-elements ready!

Name	Link
🔨 Latest commit	a9228d9
🔍 Latest deploy log	https://app.netlify.com/projects/open-elements/deploys/69fccb2f9da6d80008e197e7
😎 Deploy Preview	https://deploy-preview-352--open-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 67 Accessibility: 97 Best Practices: 92 SEO: 100 PWA: 60 View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.