New beatmapset info page

app/Http/Controllers/AccountController.php

@@ -218,6 +218,7 @@ public function updateOptions()
             'audio_muted:bool',
             'audio_volume:float',
             'beatmapset_card_size:string',
+            'beatmapset_cover_expanded:bool',
             'beatmapset_download:string',
             'beatmapset_show_nsfw:bool',
             'beatmapset_title_show_original:bool',

app/Models/UserProfileCustomization.php

@@ -124,6 +124,16 @@ public function setBeatmapsetCardSizeAttribute($value)
         $this->setOption('beatmapset_card_size', $value);
     }
 
+    public function getBeatmapsetCoverExpandedAttribute()
+    {
+        return $this->options['beatmapset_cover_expanded'] ?? true;
+    }
+
+    public function setBeatmapsetCoverExpandedAttribute($value)
+    {
+        $this->setOption('beatmapset_cover_expanded', $value);
+    }
+
     public function getBeatmapsetDownloadAttribute()
     {
         return $this->options['beatmapset_download'] ?? static::BEATMAPSET_DOWNLOAD[0];

app/Transformers/UserCompactTransformer.php

@@ -425,6 +425,7 @@ public function includeUserPreferences(User $user)
             'audio_muted',
             'audio_volume',
             'beatmapset_card_size',
+            'beatmapset_cover_expanded',
             'beatmapset_download',
             'beatmapset_show_nsfw',
             'beatmapset_title_show_original',

resources/assets/less/bem-index.less

@@ -73,22 +73,28 @@
 @import "bem/beatmapset-activities";
 @import "bem/beatmapset-badge";
 @import "bem/beatmapset-beatmap-picker";
+@import "bem/beatmapset-beatmap-selection";
+@import "bem/beatmapset-count-badge";
 @import "bem/beatmapset-cover";
 @import "bem/beatmapset-cover-admin";
 @import "bem/beatmapset-discussion-message";
 @import "bem/beatmapset-discussions-chart";
 @import "bem/beatmapset-event";
 @import "bem/beatmapset-events";
+@import "bem/beatmapset-extra";
 @import "bem/beatmapset-header";
 @import "bem/beatmapset-hype";
 @import "bem/beatmapset-info";
 @import "bem/beatmapset-list-view";
 @import "bem/beatmapset-mapping";
+@import "bem/beatmapset-metadata";
+@import "bem/beatmapset-page-cover";
 @import "bem/beatmapset-panel";
 @import "bem/beatmapset-scoreboard";
 @import "bem/beatmapset-search-card";
 @import "bem/beatmapset-stats";
 @import "bem/beatmapset-status";
+@import "bem/beatmapset-toolbar";
 @import "bem/beatmapset-watches";
 @import "bem/beatmapsets";
 @import "bem/beatmapsets-search";

resources/assets/less/bem/bar.less

@@ -15,7 +15,8 @@
   }
 
   &--beatmap-stats {
-    height: 5px;
+    .default-border-radius();
+    height: 4px;
     background-color: @osu-colour-b6;
   }
 
@@ -25,6 +26,12 @@
     margin-top: 5px;
   }
 
+  &--beatmapset-extra {
+    .default-border-radius();
+    height: 4px;
+    background-color: @osu-colour-red-3;
+  }
+
   &--beatmapset-off {
     background-color: @osu-colour-b6;
     color: @osu-colour-f1;
@@ -79,18 +86,25 @@
 
     .@{_top}--beatmap-stats & {
       .default-bar-transition();
-      background-color: #fff;
-    }
-
-    .@{_top}--beatmap-stats-stars & {
-      background-color: @yellow;
+      .default-border-radius();
+      background-color: @osu-colour-h1;
     }
 
     .@{_top}--beatmap-success-rate & {
       .default-bar-transition();
       background-color: @green;
     }
 
+    .@{_top}--beatmapset-extra & {
+      .default-bar-transition();
+      .default-border-radius();
+      background-color: @osu-colour-lime-1;
+    }
+
+    .@{_top}--beatmapset-extra-rating & {
+      margin-left: auto;
+    }
+
     .@{_top}--forum-poll & {
       background-color: @osu-colour-h1;
       border-radius: 10000px;

resources/assets/less/bem/bbcode-editor.less

@@ -21,14 +21,6 @@
     background-color: @osu-colour-b2;
   }
 
-  &--beatmapset-description-editor {
-    .default-gutter-v2();
-    padding-top: @editor-padding;
-    padding-bottom: $padding-top;
-    background-color: hsl(var(--hsl-b2));
-    border-radius: @border-radius-large;
-  }
-
   &--profile-page {
     padding-right: var(--inner-gutter);
   }
@@ -59,11 +51,6 @@
       opacity: 0.5;
       pointer-events: none;
     }
-
-    .@{_top}--beatmapset-description-editor & {
-      // approximation of 80vh - 3 lines of button bars and editor padding
-      max-height: calc(80vh - 2 * @editor-padding - 2 * @content-padding - 3 * (1em + 2 * @buttons-margin));
-    }
   }
 
   &__button {

resources/assets/less/bem/beatmap-icon.less

@@ -7,7 +7,7 @@
   color: var(--diff);
 
   &--beatmapset {
-    font-size: 24px; // icon size
+    font-size: 20px; // icon size
     position: relative;
   }
 }

resources/assets/less/bem/beatmap-list.less

@@ -6,43 +6,18 @@
   color: #fff;
   min-width: 0;
   position: relative;
+  --icons-bg-opacity: 0;
 
   &--selecting {
     z-index: @z-index--blackout-visible;
+    --icons-bg-opacity: 1;
   }
 
   &__body {
     height: var(--box-height);
     min-width: 0;
   }
 
-  &__selector {
-    .default-box-shadow();
-
-    position: absolute;
-    width: 100%;
-    top: 100%;
-    left: 0;
-    margin-top: 5px;
-    background-color: @osu-colour-b5;
-
-    flex-direction: column;
-
-
-    display: none;
-    .@{top}--selecting & {
-      display: flex;
-    }
-
-    &--submenu {
-      top: 0;
-      left: 100%;
-      margin-left: 5px;
-      margin-top: 0;
-      padding: 10px 0;
-    }
-  }
-
   &__item {
     .link-plain();
     .link-white();
@@ -51,6 +26,7 @@
     align-items: center;
     text-align: left;
     padding: 5px 10px;
+    cursor: pointer;
     gap: 10px;
     font-size: @font-size--title-small;
 
@@ -72,6 +48,15 @@
       &:hover {
         background-color: @osu-colour-b6;
       }
+
+      .@{top}--beatmapset-show & {
+        box-shadow: none;
+
+        @media @desktop {
+          background-color: transparent;
+          padding: 0;
+        }
+      }
     }
 
     &--current {
@@ -89,7 +74,98 @@
     color: hsl(var(--hsl-b5));
   }
 
+
+  &__item-mapper {
+    color: hsl(var(--hsl-c2));
+    font-weight: normal;
+  }
+
   &__item-selector-button {
     margin-left: auto;
   }
+
+  &__selected {
+    &--icons {
+      display: none;
+
+      .@{top}--beatmapset-show & {
+        @media @desktop {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          font-size: 9px;
+          gap: 2px;
+          position: relative;
+
+          &::before {
+            .default-border-radius();
+            --padding: 4px;
+            --offset: calc(-1 * var(--padding));
+            --size: calc(100% + 2 * var(--padding));
+            content: '';
+            position: absolute;
+            top: var(--offset);
+            left: var(--offset);
+            width: var(--size);
+            height: var(--size);
+            background-color: hsl(var(--hsl-b5));
+            pointer-events: none;
+            opacity: var(--icons-bg-opacity);
+          }
+        }
+      }
+    }
+
+    &--list {
+      display: flex;
+      flex: 1;
+
+      .@{top}--beatmapset-show & {
+        @media @desktop {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &__selector {
+    .default-border-radius();
+    .default-box-shadow();
+
+    position: absolute;
+    width: 100%;
+    top: 100%;
+    left: 0;
+    margin-top: 5px;
+    background-color: @osu-colour-b5;
+
+    flex-direction: column;
+    max-height: 300px;
+    overflow-y: auto;
+
+
+    display: none;
+    .@{top}--selecting & {
+      display: flex;
+    }
+
+    &--submenu {
+      top: 0;
+      left: 100%;
+      margin-left: 5px;
+      margin-top: 0;
+      padding: 10px 0;
+    }
+
+    .@{top}--beatmapset-show & {
+      @media @desktop {
+        width: max-content;
+        max-width: 50vw;
+        top: 50%;
+        left: 100%;
+        margin-top: 0;
+        margin-left: 5px;
+        transform: translateY(-50%);
+      }
+    }
+  }
 }

resources/assets/less/bem/beatmapset-badge.less

@@ -29,6 +29,22 @@
     --colour: hsl(var(--hsl-orange-2));
   }
 
+  &--cover {
+    .center-content();
+    background-color: hsla(var(--hsl-b5), 0.8);
+    font-size: inherit;
+    font-weight: 800;
+    padding: 0 15px;
+    margin: 0;
+  }
+
+  &--header {
+    font-weight: 800;
+    font-size: inherit;
+    padding: 0 10px;
+    margin: 0;
+  }
+
   &--panel {
     margin-left: 5px;
   }