feat: New MusicBrainz Homepage #3669

anshg1214 · 2025-11-10T18:07:37Z

Problem

🔰 Reference related tickets with MBS-XXX at least.

Solution

🔰 If you have a lot to say, be more detailed in this section.

Testing

🔰 If you tested anything on specific pages, mention them here, such as:
Tested something on /release/mbid using a sample/full database

Documenting

🔰 If you updated documentation pages, mention them here, such as:
Updated WikiDocs page

Draft progress

🔰 If you draft a pull request, mention missing tasks as items:
- 🔰 And even subtasks as indented/nested items!

Further action

🔰 If any action is needed on merge or deployment, list it such as:
1. Make updated WikiDocs pages visible on MusicBrainz website

welcome · 2025-11-10T18:07:39Z

Thanks for opening your first pull request for MusicBrainz Server, and welcome to our community! 🎉
If you haven’t yet, please check out our contributing guidelines.
Someone will be reviewing your PR soon; just hang in there!
In the meantime, if you’re wondering what to do next, you can have a look at our issue tracker.

reosarevok

I haven't gotten to the scripts folder yet, so more coming tomorrow probably for that, but putting up the comments I have for now since there's... a fair bunch. A lot are just trivial indent fixes though :)

lib/MusicBrainz/Server/Controller/Root.pm

reosarevok · 2025-12-02T14:02:16Z

lib/MusicBrainz/Server/Data/Event.pm

+      WHERE event_art_type.type_id = ?
+        AND event_art.ordering = 1
+        AND edit.type = ?
+        AND event_art.date_uploaded < NOW() - INTERVAL '10 minutes'


Why limit (this much, at least) the art upload date if what we care is to see the most current events? Wouldn't it be better to just show the ones for the recent past and maybe the upcoming week that have artwork if any? Same for fresh releases.

It looks like this line is just ensuring the uploads are at least 10 minutes old, which was copied from 6add14f.

Oh. Duh. I should read properly.

A small issue I do see with this query is that events displayed here seem guaranteed to be the same for quite a while if someone adds a tour a few months in the future. So I still think (even if it's unrelated to this specific line) having some sort of "max X days in the future" makes sense to show stuff here too. What do you feel?

That makes sense to me. I'd probably keep it short, like max 3 days into the future.

root/layout/components/NewFooter.js

root/main/index.js

reosarevok

I haven't gotten to the scripts folder yet, so more coming tomorrow probably for that, but putting up the comments I have for now since there's... a fair bunch. A lot are just trivial indent fixes though :)

mwiencek · 2025-12-02T16:35:04Z

The browser console is being spammed with some swiper-related warning. Can you look into that too? :)

"Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled or not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters"

mwiencek · 2025-12-02T17:01:53Z

root/static/scripts/homepage/editor-tools.js

+  const [isHydrated, setIsHydrated] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsHydrated(true);


If we plan to show the "Editor tools" dropdown on every page in the future, it seems like the toggled state would make more sense as a cookie setting. Otherwise someone who wants it collapsed has to manually collapse it on every page load. You can also read the cookie on the server and client, so don't need the isHydrated hack.

If we have a cookie, do we even need the isMobile / useMediaQuery bits? I'm not quite sure why we would hide them by default on mobile, I think it seems useful to show them to users once at least even if they are mobile users. I guess the main point is they would get in the way if open all the time, which a cookie would hopefully solve.

Here's what it looks like on my iPhone with the editor tools menu closed and then open (ignore the battery percentage 💀).

So it looks like it would make sense to keep it initially collapsed on mobile since it takes up the entire screen. At the same time, the button is blocking part of the "Welcome back" text. :)

Fair enough I guess - arguably we could have it initially collapsed everywhere though and just trust the cookie :)

mwiencek · 2025-12-02T19:08:56Z

package.json

    "punycode": "2.3.1",
    "react": "18.3.1",
    "react-dom": "18.3.1",
+    "react-lazy-load-image-component": "^1.6.3",


I'd prefer to just use https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#lazy rather than bringing in a new dependency. We use it in root/static/scripts/common/components/Artwork2.js already and perhaps this component can be used by the homepage too.

reosarevok

I just noticed this change is entirely dropping the admin menu. Please make sure it's available somewhere, either on the top as now or (since I guess it doesn't fit well there) at the very least on the "Editor tools" section.

Most if not all the /homepage files seem like they should be named in UpperCamelCase, since they are components (MobileSearchPopup and whatnot).

reosarevok · 2025-12-03T10:46:52Z

root/static/scripts/homepage/editor-tools.js

+                role="button"
+              >
+                <FontAwesomeIcon icon={faPlusCircle} />
+                {l('Add new...')}


Another dropdown menu like this should probably be added for the Admin menu. Right now, you seem to be dropping it entirely (no longer on the header, not in here either), which is obviously not ideal :)

Ohh yes, I missed this. I've added the admin dropdown now.

root/static/scripts/homepage/language.js

root/static/scripts/homepage/stats.js

root/static/scripts/homepage/navbar.js

root/static/scripts/homepage/stats.js

reosarevok

Last few comments (I did not check the less files nor the tests at the moment).

Sorry about some duplicate comments being sent, I thought I lost them at first because of github hiding comments for huge PRs.

root/static/scripts/homepage/editor-tools.js

root/static/scripts/homepage/stats.js

root/static/scripts/homepage/timeline-carousel.js

root/static/scripts/homepage/artwork-carousel.js

reosarevok · 2025-12-03T15:07:30Z

root/static/scripts/homepage/user-menu.js

+            <h2>{l('Welcome back')}</h2>
+            <a className="username-link" href={`/user/${user?.name}`}>
+              <h2 className="username">
+                {user?.name}
+              </h2>


These two should probably be combined using exp.l() (the order won't be the same for all languages, some will need the name to go first or in between). I understand this might not be entirely trivial since you probably want them in two lines, but still. @mwiencek might have some ideas?

Yeah, something like Welcome back {username} would make more sense to me. You can pass the whole <a> section in for username and use CSS to add a line break.

I'm not sure it makes sense to use h2 either, because it's not a semantic heading (doesn't describe the section at all).

root/static/scripts/homepage/user-menu.js

String locations are needed when building translations for the client-side JS (which uses msggrep). This should prevent, e.g., hydration errors in cases where a string has been moved.

…cessibility

…omponent type definitions

`l` was being incorrectly used on dynamic strings that weren't previously marked with `N_l` within the same file.

* `lp` is unused. * `l` is auto-imported by the ProvidePlugin.

`l` was being incorrectly used on dynamic strings that weren't previously marked with `N_l` within the same file.

Co-authored-by: Nicolás Tamargo <reosarevok@metabrainz.org>

…tatistics

…itor tools with cookie-based state management

…rver into ansh/new-homepage

anshg1214 requested review from mwiencek and reosarevok November 23, 2025 10:59

reosarevok reviewed Dec 2, 2025

View reviewed changes

mwiencek reviewed Dec 2, 2025

View reviewed changes

reosarevok requested changes Dec 3, 2025

View reviewed changes

reosarevok reviewed Dec 3, 2025

View reviewed changes

anshg1214 force-pushed the ansh/new-homepage branch from ddbbfe4 to 375f7ce Compare January 5, 2026 16:05

mwiencek force-pushed the ansh/new-homepage branch 2 times, most recently from ad843a4 to 4f8c861 Compare January 8, 2026 18:52

mwiencek and others added 17 commits January 8, 2026 13:17

Run msgmerge on .po files in initialize_tests_image.sh

9356aab

String locations are needed when building translations for the client-side JS (which uses msggrep). This should prevent, e.g., hydration errors in cases where a string has been moved.

feat: install bootstrap and fontawesome

519b7ac

feat: init homepage

ee95e98

chore: add swiperjs

4e08b4e

feat: add stats carousel

23f79f2

feat: add new statistics and remove hardcoded data

b0b73f8

refactor: improve stats component layout and styles

79380a7

fix: responsiveness and overflowing

6b34734

feat: add sidebar

0eeace3

feat: add user menu

f7460c3

feat: localize homepage links and text for better accessibility

eafd472

feat: set max width for whole page

7ffe821

feat: add editor tools

7817229

feat: show stats on search bar

267995d

feat: implement mobile search popup and update navbar for improved ac…

6d3b050

…cessibility

feat: add auth buttons

6046a0a

feat: minor improvements

b0e7b71

anshg1214 and others added 25 commits January 8, 2026 13:17

feat: implement language selection in mobile sidebar

99dda65

refactor: toggling language sidebar in navbar

8c6677c

ci: bump test image tag

b2a2804

fix: eslint errors

2db6a82

fix: eslint

7ee2243

fix: eslint

6aee3d7

feat: add flow type definitions for react-lazy-load-image-component

dc61aa6

chore: update eslint configuration to exclude react-lazy-load-image-c…

eabb74a

…omponent type definitions

fix: selenium tests

cb90d4e

fix: Perl::Critic errors

d48474c

fix: remove unused aria-labelledby attribute and add id to search input

f9ba1d8

fix: add missing newline at file end

82340d4

fix: remove title attributes from navbar and sidebar links

38d5fe6

Fix i18n in root/static/scripts/homepage/navbar.js

1c35659

`l` was being incorrectly used on dynamic strings that weren't previously marked with `N_l` within the same file.

Remove unneeded import

a0d854b

* `lp` is unused. * `l` is auto-imported by the ProvidePlugin.

Fix i18n in root/static/scripts/homepage/editor-tools.js

ddbbeec

`l` was being incorrectly used on dynamic strings that weren't previously marked with `N_l` within the same file.

fixup: drop new double newlines

1b75a8c

Apply suggestions from code review

431878a

Co-authored-by: Nicolás Tamargo <reosarevok@metabrainz.org>

refactor: homepage components and improve i18n

1137b9c

format: format code for consistency

0ae59d3

feat: add Admin Tools dropdown for admin users and enhance homepage s…

ab86b35

…tatistics

fix: tests

33f5b64

refactor: move AdminTools

318227d

refactor: reorder AdminToolsDropdown import for clarity

e6b8a68

Update mb_server.pot

a62f676

mwiencek force-pushed the ansh/new-homepage branch from 4f8c861 to a62f676 Compare January 8, 2026 19:21

anshg1214 added 4 commits January 9, 2026 18:35

feat: Add Banners to homepage

6dd8355

fix: decode latest blog post title to prevent HTML entity issues

1b9523c

feat: update footer links to include Mastodon and Bluesky; enhance ed…

38d971c

…itor tools with cookie-based state management

Merge branch 'master' of https://github.com/metabrainz/musicbrainz-se…

737dca0

…rver into ansh/new-homepage

Uh oh!

feat: New MusicBrainz Homepage #3669

Are you sure you want to change the base?

feat: New MusicBrainz Homepage #3669

Uh oh!

Conversation

anshg1214 commented Nov 10, 2025

Problem

Solution

Testing

Documenting

Draft progress

Further action

Uh oh!

welcome bot commented Nov 10, 2025

Uh oh!

reosarevok left a comment

Choose a reason for hiding this comment

Uh oh!

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

reosarevok left a comment

Choose a reason for hiding this comment

Uh oh!

mwiencek commented Dec 2, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mwiencek Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

reosarevok 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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

reosarevok left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mwiencek Dec 3, 2025 •

edited

Loading