Eemeli/enhancement/619 new header component implementation by EemeliJ · Pull Request #632 · Alt-Org/Altzone-WebPages

EemeliJ · 2026-03-06T11:21:56Z

📄 Pull Request Overview

Closes [619]

🔧 Changes Made

[Briefly describe changes you made]

Implemented new Header v2 component with separate Desktop and Mobile layouts.
Integrated shared UI components (Button, Paragraph, SocialSection).
Added i18n support using useClientTranslation and existing translation keys.
Implemented responsive styling and layout improvements.
Added CTA navigation buttons with language-prefixed routes.
Fixed UI alignment issues (social icons, button layout, feedback button overlap)

[Any refactoring or clean-up tasks]

Refactored the header implementation to use the v2 component structure, improved code organization, and reused existing shared components for consistency.

✅ 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: [Include any screenshots or videos if the changes affect the UI]

Dependencies: No new dependencies were added.
Known Issues: No known functional issues. Minor visual adjustments may be needed based on future design updates.

Dev & main merge

Tests were failing and therefore need to be removed to not block the builds

Dev main merge

Dev / testing the main ci pipe

…der/Footer structure

…mations and image still show up under the header

…s for the Header

Merge Dev To Main

… some tweaking and futureproofing

…9-New-Header-Component-Implementation

…button components

Skoivumaki · 2026-03-06T14:48:11Z

Switched base branch, may cause issues. "Pulled latest from main, and updated some styling" Main is not the latest, its our production branch.

Skoivumaki

Branch is failing to run currently due to: "Module not found: Can't resolve '@/shared/assets/images/mainpage/topimage.png" missing.
By your screenshots the new header looks solid 👍

I noticed you left a lot of comments that really don't add anything or feel like your personal notes. Please remove them to reduce bloat and make code more readable.

When you fix the build error, will review the visual side, but its probably fine 😄

Skoivumaki · 2026-03-06T15:00:55Z

frontend-next-migration/src/app/[lng]/_components/LayoutBackgroundController.tsx

This is cool, but why was it implemented and was its effects tested all around, since its handling root layout

LayoutBackgroundController was introduced during the header refactor when the image on the homepage (topimage) was moved into the new Header component. At that stage the image caused visual conflicts with the global background texture rendered by LayoutWithBackground, especially on the main page where the image overlaps the layout background.

The controller was added as a client-side wrapper so that background behavior could be adjusted based on the route without converting RootLayout into a client component. This allowed using client routing logic if needed.

The layout has been tested with this structure and it works correctly across the site. Currently the controller only passes children to LayoutWithBackground, so it does not actively change behavior anymore.

This can be removed if necessary, but it is functioning correctly in this state.

Skoivumaki · 2026-03-06T15:01:32Z

frontend-next-migration/src/app/[lng]/_components/LayoutBackgroundController.tsx

+ * LayoutBackgroundController is a client wrapper for LayoutWithBackground.
+ *
+ * Purpose:
+ * - Allows controlling background behavior in a Client Component without converting RootLayout into a client component.


Why do we need to control a background image?

Originally the goal was to allow conditional background rendering depending on the page. The homepage image (topimage) initially caused layout issues with the global background texture, so this was the solution at that point.

After further adjustments the layout now renders correctly with the background enabled everywhere. Because of that, the controller is no longer strictly required and can be removed if needed.

Skoivumaki · 2026-03-06T15:04:29Z

frontend-next-migration/src/app/[lng]/layout.tsx

            </head>
            <body>
-                <LayoutWithBackground>
+                <LayoutBackgroundController lng={lng}>


You are passing language parameters to a background controller? Do the tiles change color if in english? xd

It was originally passed so the controller could detect routes like /${lng} if we needed language aware background logic. This is not currently used and does not do anything, i will remove it as a small cleanup. Not sure why i thought this would be useful, i admit it is a bit odd :D

Skoivumaki · 2026-03-06T15:14:11Z

...nd-next-migration/src/preparedPages/Layouts/ui/LayoutWithBackground/LayoutWithBackground.tsx

- * @param imagePath - Path to the background image (defaults to main background)
- * @param alt - Alt text for the background image (for accessibility)
- * @param shouldBeLazyLoaded - Whether to lazy load the background image (not used with CSS background)
+ * Responsibilities:


Is this documentation too much? IMO good documentation should be kept brief enough to explain what each parameter or prop does. We don't need to tell the developer what the component should NOT be used for. Adding notes for developers is good too, but not when you are repeating what params do.

Noted, removed unnecessary comments from this file.

Skoivumaki · 2026-03-06T15:14:51Z

...nd-next-migration/src/preparedPages/Layouts/ui/LayoutWithBackground/LayoutWithBackground.tsx

+ * Notes:
+ * - Background visibility is controlled via `showBackground`.
+ * - This component is intended to be used at layout level.
+ * - Route-based background logic should be handled by a wrapper


Is it really route based though when the only route we are using is language? 🤔

Good point, this is some leftover documentation from the earlier implementation, and will be removed.

Skoivumaki · 2026-03-06T15:33:02Z

...ext-migration/src/shared/ui/v2/Feedback/ui/FeedbackSideButton/FeedbackSideButton.module.scss

Was fixing feedback button bug part of the issue? @Rutjake
"Implemented responsive styling and layout improvements." This is too broad to explain why this change was done. (we currently have an active bug fix issue, with similar z-index problems. The reason I'm mentioning this is, will this change affect those bug fixes too?)

The feedback button was rendered below the header in the stacking order when scrolling to the top, thus becoming unresponsive. The only changes i made was in the .SideButton (z-index: 1000 !important;) and the .FeedbackCardContainer (z-index: 1001;).

Skoivumaki · 2026-03-06T15:33:46Z

frontend-next-migration/src/shared/ui/v2/Footer/ui/FooterDesktop/FooterDesktop.module.scss

    padding-top: 1rem;
-    justify-content: center;
+
+    /* Footer controls layout now (was previously inside SocialSection component) */


This comment could have worked really well as a commit message instead.

True. I will try to write more specific commit messages in the future.

Skoivumaki · 2026-03-06T15:37:10Z

frontend-next-migration/src/shared/ui/v2/Header/ui/HeaderDesktop/HeaderDesktop.tsx

+    const { className = '', socialIconLinks } = props;
+
+    const params = useParams();
+    const lng = (params?.lng as string) ?? 'fi';


For the future: Page already defaults to finnish if no lng is provided, no need to add failsafes 👍

Skoivumaki · 2026-03-06T15:42:01Z

frontend-next-migration/src/shared/ui/v2/WallIntroAnimation/ui/WallIntroAnimation.module.scss

You removed WallIntroAnimation from mainpage but still made changes to the component? Feels like you were planning to use it, but for some reason didn't? Always explain your thought process in PR or by commits.

The changes to WallIntroAnimation were made earlier to fix a DOM race condition and to properly handle timeout cleanup and localStorage usage.

During the header refactor the animation was removed from the MainPage because the new header layout replaced its role. The fixes were kept since the component might still be reused later and they prevent the previous runtime errors.

The intention was also to improve stability and performance, but I forgot to document that in the PR. Thanks for pointing it out 👍

Skoivumaki · 2026-03-06T15:46:54Z

frontend-next-migration/src/widgets/Footer/ui/FooterDesktop/FooterDesktop.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs';
-import { socialIconLinks } from '../../model/data/socialSectionMenu';
+import { socialIconLinks } from '../../../../shared/const/socialSectionMenu';


Do @/shared/const/socialSectionMenu instead. (more readable and achieves the same thing)
Also apply the fix in other files.

Noted, fix applied 👍

…s with the path alias (SocialSectionMenu), removed unused lng props from LayoutBackgroundController, Clarified and cleaned up layout related code introduced during the header refactor, removed unnecessary comments, cleaned up the header wrapper from the widgets folder (no header implementation needed here).

…age wrong

Skoivumaki

Looks good 👍

Rutjake

Great job! The component looks exactly as it should. However, when you remove components like Button or ExternalLinks, remember to also remove the unused imports. If you’re using VS Code, the ESLint extension is really helpful for catching these.

Rutjake · 2026-03-18T07:28:04Z

frontend-next-migration/src/preparedPages/MainPage/ui/MainPage.tsx


    return (
        <div className={cls.MainPage}>
-            <WallIntroAnimation renderOnce={true} />


Removing WallIntroAnimation was not part of the issue, but its position in the code needs to be adjusted to ensure it functions as expected. @EemeliJ It should work if you add it below the Header component?

…pletely, should work now with the new header. Also removed some unused imports.

…SessionStorage, also refactored timing logic removing a redundant timeout that set the rendered state too early.

Rutjake

Good Work!

Rutjake and others added 17 commits October 4, 2025 19:43

Merge pull request #567 from Alt-Org/dev

d5a3287

Dev & main merge

remove tests stage from CI

5c081b7

Tests were failing and therefore need to be removed to not block the builds

Merge pull request #568 from Alt-Org/dev

2adba75

Dev main merge

Merge pull request #605 from Alt-Org/dev

655402d

Dev / testing the main ci pipe

Remove @kaisahakola from CODEOWNERS

bb89f83

Header setup, Refactor: centralize shared data types and simplify Hea…

ae354aa

…der/Footer structure

Got the Header to show up, need to fix some styling, old mainpage ani…

3c9cc6a

…mations and image still show up under the header

Some refactoring, fixed topimage rendering twice, some placeholder cs…

b61dce8

…s for the Header

Merge pull request #621 from Alt-Org/dev

ceed52d

Merge Dev To Main

Moved Header rendering and styling under shared/v2 alongside Footer +…

a882804

… some tweaking and futureproofing

Merge remote-tracking branch 'origin/main' into eemeli/enhancement/61…

788f607

…9-New-Header-Component-Implementation

Pulled latest from main, and updated some styling

5e5d083

Resolution changes, bug fixes and functions for the buttons

0ad9cb2

Added Mobile version, not yet final

b0f666b

Switched hardcoded description to existing json, and reused existing …

9927ca5

…button components

Cleaning up scss styling

15cb0a4

fixed commit without env

122d4c9

EemeliJ requested review from Rutjake, Skoivumaki, leolabdev and patinen as code owners March 6, 2026 11:21

Skoivumaki changed the base branch from main to dev March 6, 2026 14:46

Skoivumaki requested changes Mar 6, 2026

View reviewed changes

EemeliJ added 6 commits March 11, 2026 13:05

Does this fix the CI errors now?

bda025b

Fixed more typos

3e0a083

And some more typos fixed

19d249e

The issue was in the projectdescription, the import from images/mainp…

2fdf894

…age wrong

fix: normalize topimage filename casing for CI

ef99cba

fix: update socialSectionMenu mock path in FooterMain tests

31008ae

EemeliJ requested a review from Skoivumaki March 11, 2026 13:00

Skoivumaki approved these changes Mar 16, 2026

View reviewed changes

Rutjake requested changes Mar 18, 2026

View reviewed changes

Brought back the wallintroanimation, it did not plan to remove it com…

8b40fa6

…pletely, should work now with the new header. Also removed some unused imports.

EemeliJ requested a review from Rutjake March 18, 2026 10:34

Updated WallIntroAnimation so it renders only once per session using …

7eab610

…SessionStorage, also refactored timing logic removing a redundant timeout that set the rendered state too early.

Rutjake approved these changes Mar 18, 2026

View reviewed changes

Rutjake merged commit 3453a19 into dev Mar 18, 2026
3 checks passed

Conversation

EemeliJ commented Mar 6, 2026

📄 Pull Request Overview

🔧 Changes Made

✅ Checklist Before Submission

📝 Additional Information

Uh oh!

Skoivumaki commented Mar 6, 2026

Uh oh!

Skoivumaki left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Skoivumaki left a comment

Choose a reason for hiding this comment

Uh oh!

Rutjake left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Rutjake left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants