Feature: Top bar new desing

[DiesselOne]

Resolves one part of #2260

Description:

This resolve part of new UI based on Figma. This PR focus on TOP bar only and make it similar as in Figma.
https://www.figma.com/design/vy0xBckx4cIMiA6iyJAV0z/Open-Front?node-id=122-20649&t=U4dADKuUFPRP5Ko1-0
It includes only postions styling and spacing. Color changes are not included because it will be better to do it in one PR.

Also fixed issue of leaderboard have inline styling > to classes. Fixed with on smaller devices.

Please complete the following:

• I have added screenshots for all UI updates
• I process any text displayed to the user through translateText() and I've added it to the en.json file
• I have added relevant tests to the test directory
• I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced

Please put your Discord username so you can be contacted if a bug or regression is found:

Diessel

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Walkthrough

Repositioned HUD and sidebars, consolidated the right-side UI into a single responsive fixed wrapper, adjusted sidebar paddings/offsets, and converted an inline leaderboard grid style to Tailwind utility classes.

Changes

Cohort / File(s)	Summary
HTML wrapper index.html	Raised heads-up top offset on small screens (20px → 55px); moved right-side UI from a separate fixed top-right container to a centered, responsive fixed wrapper (top-2 left-2 right-2 / breakpoint variants); consolidated game-right-sidebar and replay-panel into this wrapper.
Left sidebar src/client/graphics/layers/GameLeftSidebar.ts	Adjusted positioning and spacing: top-4 → top-14 (with lg:top-4), left-4 → left-2, replaced p-2 with py-2 px-3.
Right sidebar src/client/graphics/layers/GameRightSidebar.ts	Reworked layout into a full-width responsive container: left area shows player identity/flag, right area holds timer and action buttons; preserved timer and control behavior while changing structure and width utilities.
Heads-up message src/client/graphics/layers/HeadsUpMessage.ts	Removed md:top-[70px] and left-0 lg:left-4 classes — relies on parent/container positioning for medium screens.
Leaderboard src/client/graphics/layers/Leaderboard.ts	Replaced inline grid-template-columns with Tailwind grid-cols-[...] utilities; adjusted default and md breakpoint column widths.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~23 minutes

Possibly related PRs

• Update game timer UI #2577 — restructures the same right-side UI and consolidates game-right-sidebar with replay-panel.
• Consistent border radius and padding from edge of screen for in game UI #2576 — adjusts positioning and responsive classes in left/right sidebar files.
• * update leaderboard align #1189 — touches GameLeftSidebar.ts and Leaderboard.ts with overlapping layout changes.

Suggested labels

UI/UX

Suggested reviewers

• evanpelle

Poem

Sidebars slide and boxes meet,
A single wrapper holds the beat,
Offsets nudged and grids made neat,
The interface finds steadier feet. ✨

Pre-merge checks

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title references 'top bar new design' which aligns with the main changeset focus on repositioning and styling the top bar UI elements to match Figma design.
Description check	✅ Passed	The description clearly explains the PR resolves part of issue #2260 by updating the top bar UI to match Figma design, and also mentions fixing leaderboard inline styling and layout issues.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f039445 and 29aaf91.

📒 Files selected for processing (2)

• src/client/graphics/layers/GameRightSidebar.ts
• src/client/graphics/layers/Leaderboard.ts

🚧 Files skipped from review as they are similar to previous changes (2)

• src/client/graphics/layers/GameRightSidebar.ts
• src/client/graphics/layers/Leaderboard.ts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

src/client/graphics/layers/Leaderboard.ts (1)

185-185: Good refactor to Tailwind utilities.

Replacing inline styles with utility classes improves consistency. The last column width reduction (105px → 90px on smaller screens, preserved at 105px on md+) should accommodate mobile layouts better.

If the "maxtroops" column shows truncation on small screens, consider testing with various troop count values to ensure readability.

index.html (1)

344-344: Minor: Redundant responsive utility.

The md:top-[55px] utility is redundant since sm:top-[55px] already applies at the medium breakpoint (md is included in sm and above).

🔎 Simplification

-      class="fixed bottom-[30px] sm:bottom-auto sm:top-[55px] md:top-[55px] z-50 mx-auto max-w-max inset-x-0 items-center"
+      class="fixed bottom-[30px] sm:bottom-auto sm:top-[55px] z-50 mx-auto max-w-max inset-x-0 items-center"

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6d1e2f5 and f039445.

📒 Files selected for processing (5)

• index.html
• src/client/graphics/layers/GameLeftSidebar.ts
• src/client/graphics/layers/GameRightSidebar.ts
• src/client/graphics/layers/HeadsUpMessage.ts
• src/client/graphics/layers/Leaderboard.ts

🧰 Additional context used

🧠 Learnings (3)

📚 Learning: 2025-06-09T02:20:43.637Z

Learnt from: VariableVince
Repo: openfrontio/OpenFrontIO PR: 1110
File: src/client/Main.ts:293-295
Timestamp: 2025-06-09T02:20:43.637Z
Learning: In src/client/Main.ts, during game start in the handleJoinLobby callback, UI elements are hidden using direct DOM manipulation with classList.add("hidden") for consistency. This includes modals, buttons, and error divs. The codebase follows this pattern rather than using component APIs for hiding elements during game transitions.

Applied to files:

• src/client/graphics/layers/GameLeftSidebar.ts
• src/client/graphics/layers/Leaderboard.ts
• index.html
• src/client/graphics/layers/GameRightSidebar.ts

📚 Learning: 2025-12-29T23:33:17.920Z

Learnt from: wraith4081
Repo: openfrontio/OpenFrontIO PR: 2735
File: index.html:390-391
Timestamp: 2025-12-29T23:33:17.920Z
Learning: In Tailwind CSS v4, update blur-related utilities in HTML templates. The mappings are: backdrop-blur-sm (v3) -> backdrop-blur-xs (v4); backdrop-blur (bare) -> backdrop-blur-sm; blur-sm -> blur-xs. Apply these changes to all HTML files (e.g., index.html and other templates) to reflect the v4 naming. Consider updating a project-wide search/replace or using a codemod to ensure consistency across the codebase.

Applied to files:

• index.html

📚 Learning: 2025-08-12T00:31:50.144Z

Learnt from: scottanderson
Repo: openfrontio/OpenFrontIO PR: 1752
File: src/core/game/Game.ts:750-752
Timestamp: 2025-08-12T00:31:50.144Z
Learning: In the OpenFrontIO codebase, changes to the PlayerInteraction interface (like adding canDonateGold and canDonateTroops flags) do not require corresponding updates to src/core/Schemas.ts or server serialization code.

Applied to files:

• src/client/graphics/layers/GameRightSidebar.ts

🔇 Additional comments (4)

src/client/graphics/layers/GameLeftSidebar.ts (1)

90-90: Layout adjustments look good.

The positioning changes improve responsive behavior: more vertical clearance on small screens (top-14 vs top-4) while preserving the original offset on large screens (lg:top-4), reduced horizontal margin (left-2), and more explicit padding utilities (py-2 px-3).

src/client/graphics/layers/HeadsUpMessage.ts (1)

62-62: Positioning simplification approved.

Removing the medium and large breakpoint positioning utilities delegates layout control to the parent container (as updated in index.html), making the component more reusable and maintainable.

src/client/graphics/layers/GameRightSidebar.ts (1)

142-170: Layout restructure is well organized.

The two-column layout (left: territory button + player name; right: timer + actions) provides better visual hierarchy and responsive behavior. The full-width container with flexible gaps works well across breakpoints.

However, this approval is contingent on resolving the duplicate ID issue flagged above.

index.html (1)

447-452: Responsive wrapper structure approved.

The new container provides good responsive behavior: full-width on mobile/small screens (left-2 right-2), transitions to left-aligned on medium screens (md:right-auto), and right-aligned on large screens (lg:left-auto lg:right-2). The flex column with items-end ensures proper alignment of child components.

[FloPinguin]

Very very cool that someone works on the new design
Can you add margin right on the leaderbord here?

[DiesselOne]

Very very cool that someone works on the new design Can you add margin right on the leaderbord here?

adjust spacing of cols to match desing

[evanpelle]

looks like there are some merge conflicts after tailwind was updated to v4