Update Beatmap info user tag style

resources/css/bem-index.less

@@ -425,6 +425,7 @@
 @import "bem/user-search-card";
 @import "bem/user-session-list";
 @import "bem/user-session-list-session";
+@import "bem/user-tag";
 @import "bem/user-verification";
 @import "bem/user-verification-popup";
 @import "bem/username-change";

resources/css/bem/beatmapset-info.less

@@ -18,7 +18,7 @@
 
   @media @desktop {
     padding: 15px @gutter-beatmapset-desktop 0;
-    grid-template-columns: 1fr 175px @beatmapset-float-box-width;
+    grid-template-columns: 1fr minmax(175px, min-content) @beatmapset-float-box-width;
   }
 
   &__box {
@@ -104,4 +104,10 @@
       pointer-events: none;
     }
   }
+
+  &__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+  }
 }

resources/css/bem/user-tag.less

@@ -0,0 +1,26 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+.user-tag {
+  .default-border-radius();
+  .link-plain();
+  display: flex;
+  overflow: hidden;
+  color: hsl(var(--hsl-c1));
+
+  &__item {
+    padding: 3px 6px;
+
+    &--category {
+      background: hsl(var(--hsl-b3));
+    }
+
+    &--count {
+      background: hsl(var(--hsl-b5));
+    }
+
+    &--name {
+      background: hsl(var(--hsl-b2));
+    }
+  }
+}

resources/js/beatmapsets-show/controller.ts

@@ -2,7 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 import { BeatmapsetJsonForShow } from 'interfaces/beatmapset-extended-json';
-import TagJson from 'interfaces/tag-json';
+import TagJson, { TagJsonWithCount } from 'interfaces/tag-json';
 import UserJson from 'interfaces/user-json';
 import { keyBy } from 'lodash';
 import { action, computed, makeObservable, observable, runInAction } from 'mobx';
@@ -25,8 +25,6 @@ interface State {
   showingNsfwWarning: boolean;
 }
 
-type TagJsonWithCount = TagJson & { count: number };
-
 export default class Controller {
   @observable hoveredBeatmap: null | BeatmapJsonForBeatmapsetShow = null;
   @observable state: State;

resources/js/beatmapsets-show/info.tsx

@@ -19,6 +19,7 @@ import { trans } from 'utils/lang';
 import { present } from 'utils/string';
 import Controller from './controller';
 import MetadataEditor from './metadata-editor';
+import UserTag from './user-tag';
 
 interface Props {
   controller: Controller;
@@ -192,17 +193,9 @@ export default class Info extends React.Component<Props> {
                 <h3 className='beatmapset-info__header beatmapset-info__header--sticky'>
                   {trans('beatmapsets.show.info.user_tags')}
                 </h3>
-                <div>
+                <div className='beatmapset-info__tags'>
                   {this.controller.tags.userTags.map((tag) => (
-                    <React.Fragment key={tag.name}>
-                      <a
-                        className='beatmapset-info__link'
-                        href={route('beatmapsets.index', { q: makeSearchQueryOption('tag', tag.name) })}
-                      >
-                        {tag.name}
-                      </a>
-                      {' '}
-                    </React.Fragment>
+                    <UserTag key={tag.name} tag={tag} />
                   ))}
                 </div>
               </div>

resources/js/beatmapsets-show/user-tag.tsx

@@ -0,0 +1,44 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import { TagJsonWithCount } from 'interfaces/tag-json';
+import { route } from 'laroute';
+import * as React from 'react';
+import { makeSearchQueryOption } from 'utils/beatmapset-helper';
+
+interface Props {
+  tag: TagJsonWithCount;
+}
+
+export default class UserTag extends React.PureComponent<Props> {
+  private readonly category;
+  private readonly name;
+
+  private get url() {
+    return route('beatmapsets.index', { q: makeSearchQueryOption('tag', this.props.tag.name) });
+  }
+
+  constructor(props: Props) {
+    super(props);
+
+    const split = props.tag.name.split('/');
+    this.category = split[0];
+    this.name = split[1];
+  }
+
+  render() {
+    return (
+      <a
+        className='user-tag'
+        href={this.url}
+        title={this.props.tag.description}
+      >
+        <span className='user-tag__item user-tag__item--category'>{this.category}</span>
+        <span className='user-tag__item user-tag__item--name'>{this.name}</span>
+        <span className='user-tag__item user-tag__item--count'>{this.props.tag.count}</span>
+      </a>
+    );
+  }
+}
+
+

resources/js/interfaces/tag-json.ts

@@ -6,3 +6,5 @@ export default interface TagJson {
   id: number;
   name: string;
 }
+
+export type TagJsonWithCount = TagJson & { count: number };