Nikolas/enhancement/564 update clan page

[NikolasKataja]

📄 Pull Request Overview

Closes #564

🔧 Changes Made

New Clan cards for both desktop and mobile, modernizes the Clans page layout using LayoutWithSidebars and a unified SearchBar.

UI

ModularCard: new theme

src/shared/ui/v2/ModularCard/ui/ModularCard.tsx

• Added ModularCardTheme.CLANCARD = 'ClanCard'
• Responsive desktop layout (label row with wrapping, info row, logo lane)
• Scoped CSS vars (--label-*, --info-*, --logo-*)
• Shows up to 4 clan labels
• Label pills use a flex-wrap layout so shorter labels don’t reserve extra horizontal space
• Renders: clan.name, clan.playerCount, clan.gameCoins, clan.labels
• Other images are currently hardcoded

MobileCard: new theme

src/shared/ui/v2/MobileCard/ui/MobileCard.tsx

• Added MobileCardTheme.CLAN = 'ClanCard'
• Structured sections (title, image, info/members)
• Optimized scaling for small screens
• Renders: clan.name, clan.gameCoins, clan.playerCount
• Images are currently hardcoded

Clan label icons

src/entities/Clan/config/clanLabelIcons.ts

• New helper that maps ClanLabel enum values to their icon assets
• Exposes getClanLabelIcon(label: ClanLabel | string) used by ClanAllSubPage
• Only 3 labels have dedicated icons right now, labels without a specific icon use a placeholder icon
• Future icons can be added by simply extending the mapping in this file (no changes needed in the Clan cards themselves)

Clans Page

src/preparedPages/ClanPages/ui/ClanLayout/ClanLayout.tsx

• Rebuilt with LayoutWithSidebars for consistency with other pages
• Added responsive SearchBar (icon + input)
• Simplified ClanLayout.module.scss

/src/preparedPages/ClanPages/ui/ClanAllSubPage/ClanAllSubPage.tsx

• Rewritten structure: PageTitle, SearchBar, and new card grid (desktop/mobile)
• Removed old table markup and pagination logic

Assets & i18n

• Added new label and logo images
• Added "clans" key to en and fi locale files for page title

---

✅ 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

• Screenshots:

Desktop:

Mobile:

[Skoivumaki]

Clear/concise PR documentation and the same goes for your commit practices. Good work 👍

Stuff todo:

1. The ClanCards arent usable on Mobile in this state. When comparing the look to Figma Design, the flex gap is larger, the parent element has too much padding and the clanName doesnt overflow wrap. Fix these issues and the mobile version should be much more readable.

2. Make sure the logo actually fills all the available space on tablet dimensions. (currently it looks odd when all the space is not utilized)

3. Fix following eslint errors: ./src/preparedPages/ClanPages/ui/ClanAllSubPage/ClanAllSubPage.tsx
   219:55 Warning: Identifier name 'l' is too short (< 2). id-length
   ./src/preparedPages/ClanPages/ui/ClanLayout/ClanLayout.tsx
   43:28 Warning: Identifier name 'e' is too short (< 2). id-length

4. See comments.

To issue creator:
@Rutjake How is pagination handled then? IMO infinite scroll would be the best solution for this.

Removed old table markup and pagination logic

[Skoivumaki]

Remember to use font

[Skoivumaki]

Clan Labels do exist as seen in IClan in GetClansResponse:

What doesn't exist, is all the icons for each label, but you can simply use the ones that you currently set here as placeholders.
When you need type-safety, see src/entities/Clan/enum/clanLabel.enum.ts
Ask @Rutjake if this label problem should be handled in this issue or as its own.

[Skoivumaki]

Perfect! Only one issue and after that PR is ready for merge.
See comment:

[Skoivumaki]

Text can now overflow past the label area. Keep ellipsis.

[Skoivumaki]

Fix overflow issues on :hover
The logo currently pushes the surrounding text downward in the flex layout when hovered. To prevent this, lower the logo’s z-index so the title text stays on top, and adjust the logo’s positioning to ensure it doesn’t shift or affect layout flow during hover.

2025-11-29.06-13-13.mp4

[Rutjake]

Good job. I saw a hydration warning, but it originates from unchanged component code, so it's not related to this issue.