Merge branch 'master' into old-link

.eslintrc.js

···
   rules: {
     'arrow-body-style': 'error',
     'arrow-parens': 'error',
+    'arrow-spacing': 'error',
     'brace-style': 'error',
     'comma-dangle': ['error', 'always-multiline'],
     complexity: 'off',

.github/workflows/lint.yml

···
       - name: Install js dependencies
         run: yarn --frozen-lockfile
 
-      - run: 'yarn lint --max-warnings 130 > /dev/null'
+      - run: 'yarn lint --max-warnings 123 > /dev/null'
 
       - run: ./bin/update_licence.sh -nf
 

SETUP.md

···
 $ php artisan migrate:fresh --seed
 ```
 
-Run the above command to rebuild the database and seed with sample data. In order for the seeder to seed beatmaps, you must enter a valid osu! API key as the value of the `OSU_API_KEY` property in the `.env` configuration file, as the seeder obtains beatmap data from the osu! API. The key can be obtained at [the "osu! API Access" page](https://old.ppy.sh/p/api), which is currently only available on the old site.
+Run the above command to rebuild the database and seed with sample data. In order for the seeder to seed beatmaps, you must enter a valid osu! API key as the value of the `OSU_API_KEY` property in the `.env` configuration file, as the seeder obtains beatmap data from the osu! API. The key can be obtained from [the "Legacy API" section of your account settings page](https://osu.ppy.sh/home/account/edit#legacy-api).
 
 ## Continuous asset generation while developing
 

app/Console/Commands/NotificationsSendMail.php

···
         foreach ($userIds->chunk($chunkSize) as $chunk) {
             $users = User::whereIn('user_id', $chunk)->get();
             foreach ($users as $user) {
-                dispatch(new UserNotificationDigest($user, $fromId, $toId));
+                $job = new UserNotificationDigest($user, $fromId, $toId);
+                try {
+                    $job->handle();
+                } catch (\Exception $e) {
+                    // catch exception and queue job to be rerun to avoid job exploding and preventing other notifications from being processed.
+                    log_error($e);
+                    dispatch($job);
+                }
             }
         }
 

app/Http/Controllers/AccountController.php

···
 use App\Models\UserAccountHistory;
 use App\Models\UserNotificationOption;
 use App\Transformers\CurrentUserTransformer;
+use App\Transformers\LegacyApiKeyTransformer;
+use App\Transformers\LegacyIrcKeyTransformer;
 use Auth;
 use DB;
 use Mail;
···
         $authorizedClients = json_collection(Client::forUser($user), 'OAuth\Client', 'user');
         $ownClients = json_collection($user->oauthClients()->where('revoked', false)->get(), 'OAuth\Client', ['redirect', 'secret']);
 
+        $legacyApiKey = $user->apiKeys()->available()->first();
+        $legacyApiKeyJson = $legacyApiKey === null ? null : json_item($legacyApiKey, new LegacyApiKeyTransformer());
+
+        $legacyIrcKey = $user->legacyIrcKey;
+        $legacyIrcKeyJson = $legacyIrcKey === null ? null : json_item($legacyIrcKey, new LegacyIrcKeyTransformer());
+
         $notificationOptions = $user->notificationOptions->keyBy('name');
 
         return ext_view('accounts.edit', compact(
             'authorizedClients',
             'blocks',
             'currentSessionId',
+            'legacyApiKeyJson',
+            'legacyIrcKeyJson',
             'notificationOptions',
             'ownClients',
             'sessions'
···
         $previousEmail = $user->user_email;
 
         if ($user->update($params) === true) {
-            $addresses = [$user->user_email];
-            if (present($previousEmail)) {
-                $addresses[] = $previousEmail;
-            }
-            foreach ($addresses as $address) {
-                Mail::to($address)->locale($user->preferredLocale())->send(new UserEmailUpdated($user));
+            foreach ([$previousEmail, $user->user_email] as $address) {
+                if (is_valid_email_format($address)) {
+                    Mail::to($address)->locale($user->preferredLocale())->send(new UserEmailUpdated($user));
+                }
             }
 
             UserAccountHistory::logUserUpdateEmail($user, $previousEmail);
···
         $user = Auth::user()->validateCurrentPassword()->validatePasswordConfirmation();
 
         if ($user->update($params) === true) {
-            if (present($user->user_email)) {
+            if (is_valid_email_format($user->user_email)) {
                 Mail::to($user)->send(new UserPasswordUpdated($user));
             }
 

app/Http/Controllers/BeatmapsetsController.php

···
             'genre_id:int',
             'language_id:int',
             'nsfw:bool',
-            'tags:string',
         ]);
 
-        $offsetParams = get_params($params, 'beatmapset', [
-            'offset:int',
-        ]);
-
-        $updateParams = array_merge($metadataParams, $offsetParams);
-
         if (count($metadataParams) > 0) {
             priv_check('BeatmapsetMetadataEdit', $beatmapset)->ensureCan();
         }
 
-        if (count($offsetParams) > 0) {
+        $updateParams = [
+            ...$metadataParams,
+            ...get_params($params, 'beatmapset', [
+                'offset:int',
+                'tags:string',
+            ]),
+        ];
+
+        if (array_key_exists('offset', $updateParams)) {
             priv_check('BeatmapsetOffsetEdit')->ensureCan();
+        }
+
+        if (array_key_exists('tags', $updateParams)) {
+            priv_check('BeatmapsetTagsEdit')->ensureCan();
         }
 
         if (count($updateParams) > 0) {

app/Http/Controllers/CommentsController.php

···
         $comment = new Comment($params);
         $comment->setCommentable();
 
+        if ($comment->commentable === null) {
+            abort(422, 'invalid commentable specified');
+        }
+
         priv_check('CommentStore', $comment->commentable)->ensureCan();
 
         try {

app/Http/Controllers/PasswordResetController.php

···
             return osu_trans('password_reset.error.user_not_found');
         }
 
-        if (!present($user->user_email)) {
+        if (!is_valid_email_format($user->user_email)) {
             return osu_trans('password_reset.error.contact_support');
         }
 

app/Http/Controllers/ReportsController.php

···
             'reason',
             'reportable_id:int',
             'reportable_type',
-        ]);
+        ], ['null_missing' => true]);
 
         $class = MorphMap::getClass($params['reportable_type']);
         if ($class === null) {

app/Http/Controllers/UsersController.php

···
             abort(404);
         }
 
-        $this->offset = get_int(Request::input('offset')) ?? 0;
+        $this->offset = max(0, get_int(Request::input('offset')) ?? 0);
 
         if ($this->offset >= $this->maxResults) {
             $this->perPage = 0;

app/Jobs/NotifyForumUpdateMail.php

···
-<?php
-
-// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
-// See the LICENCE file in the repository root for full licence text.
-
-namespace App\Jobs;
-
-use App\Mail\ForumNewReply;
-use App\Models\UserNotificationOption;
-use Illuminate\Bus\Queueable;
-use Illuminate\Contracts\Queue\ShouldQueue;
-use Illuminate\Queue\SerializesModels;
-use Mail;
-
-class NotifyForumUpdateMail implements ShouldQueue
-{
-    use Queueable, SerializesModels;
-
-    public $topic;
-    public $user;
-
-    public function __construct($data)
-    {
-        $this->topic = $data['topic'];
-        $this->user = $data['user'];
-    }
-
-    public function handle()
-    {
-        if ($this->topic === null) {
-            return;
-        }
-
-        $watches = $this->topic->watches()
-            ->where('mail', '=', true)
-            ->where('notify_status', '=', false)
-            ->has('user')
-            ->with('user', 'topic')
-            ->get();
-
-        $options = UserNotificationOption
-            ::whereIn('user_id', $watches->pluck('user_id'))
-            ->where(['name' => UserNotificationOption::FORUM_TOPIC_REPLY])
-            ->get()
-            ->keyBy('user_id');
-
-        foreach ($watches as $watch) {
-            $user = $watch->user;
-
-            if (!present($user->user_email)) {
-                continue;
-            }
-
-            if (($options[$user->getKey()]->details['mail'] ?? true) !== true) {
-                continue;
-            }
-
-            if ($this->user !== null && $this->user->getKey() === $user->getKey()) {
-                continue;
-            }
-
-            if ($user->getKey() === $this->topic->topic_last_poster_id) {
-                continue;
-            }
-
-            if (!priv_check_user($user, 'ForumTopicWatch', $this->topic)->can()) {
-                continue;
-            }
-
-            Mail::to($user)->queue(new ForumNewReply([
-                'topic' => $this->topic,
-                'user' => $user,
-            ]));
-
-            $watch->update(['notify_status' => true]);
-        }
-    }
-}

app/Jobs/UserNotificationDigest.php

···
 use App\Models\Notification;
 use App\Models\User;
 use App\Models\UserNotification;
+use Datadog;
 use DB;
 use Illuminate\Bus\Queueable;
 use Illuminate\Contracts\Queue\ShouldQueue;
···
 
     public function handle()
     {
-        if (!present($this->user->email)) {
+        if (!is_valid_email_format($this->user->user_email)) {
             return;
         }
 
···
 
         // TODO: catch and log errors?
         Mail::to($this->user)->send(new UserNotificationDigestMail($notifications, $this->user));
+
+        Datadog::increment(config('datadog-helper.prefix_web').'.user_notification_digest.mail', 1);
     }
 
     private function filterNotifications(Collection $notifications)

app/Libraries/Fulfillments/SupporterTagFulfillment.php

···
             );
         }
 
-        if (present($donor->user_email)) {
+        if (is_valid_email_format($donor->user_email)) {
             $donationTotal = $items->sum('cost');
             $totalDuration = $isGift ? null : $items->sum('extra_data.duration'); // duration is not relevant for gift.
 
···
 
             Event::generate('userSupportGift', ['user' => $giftee, 'date' => $this->order->paid_at]);
 
-            if (present($giftee->user_email)) {
+            if (is_valid_email_format($giftee->user_email)) {
                 $duration = 0;
                 $messages = [];
 

app/Libraries/OsuAuthorize.php

···
         return 'unauthorized';
     }
 
+    public function checkBeatmapsetTagsEdit(?User $user): string
+    {
+        $this->ensureLoggedIn($user);
+
+        if ($user->isModerator()) {
+            return 'ok';
+        }
+
+        return 'unauthorized';
+    }
+
     /**
      * @param User|null $user
      * @return string
···
         $this->ensureLoggedIn($user);
         $this->ensureCleanRecord($user);
 
-        $plays = $user->playCount();
-        $posts = $user->user_posts;
-        $forInitialHelpForum = in_array($forum->forum_id, config('osu.forum.initial_help_forum_ids'), true);
+        if (!$user->isBot()) {
+            $plays = $user->playCount();
+            $posts = $user->user_posts;
+            $forInitialHelpForum = in_array($forum->forum_id, config('osu.forum.initial_help_forum_ids'), true);
 
-        if ($forInitialHelpForum) {
-            if ($plays < 10 && $posts > 10) {
-                return $prefix.'too_many_help_posts';
-            }
-        } else {
-            if ($plays < config('osu.forum.minimum_plays') && $plays < $posts + 1) {
-                return $prefix.'play_more';
-            }
+            if ($forInitialHelpForum) {
+                if ($plays < 10 && $posts > 10) {
+                    return $prefix.'too_many_help_posts';
+                }
+            } else {
+                if ($plays < config('osu.forum.minimum_plays') && $plays < $posts + 1) {
+                    return $prefix.'play_more';
+                }
 
-            $this->ensureHasPlayed($user);
+                $this->ensureHasPlayed($user);
+            }
         }
 
         return 'ok';

app/Libraries/User/ForceReactivation.php

···
         LegacySession::where('session_user_id', $userId)->delete();
         UserClient::where('user_id', $userId)->update(['verified' => false]);
 
-        if (!$waitingActivation && present($this->user->user_email)) {
+        if (!$waitingActivation && is_valid_email_format($this->user->user_email)) {
             Mail::to($this->user)->send(new UserForceReactivation([
                 'user' => $this->user,
                 'reason' => $this->reason,

app/Libraries/UserVerification.php

···
     {
         $user = $this->user;
 
-        if (!present($user->user_email)) {
+        if (!is_valid_email_format($user->user_email)) {
             return;
         }
 

app/Listeners/Fulfillments/PaymentSubscribers.php

···
             return;
         }
 
-        Mail::to($order->user)->queue(new StorePaymentCompleted($order));
+        $user = $order->user;
+        if (is_valid_email_format($user->user_email)) {
+            Mail::to($user)->queue(new StorePaymentCompleted($order));
+        }
     }
 }

app/Models/ApiKey.php

···
         }
 
         if (!filter_var($this->app_url ?? '', FILTER_VALIDATE_URL)) {
-            $this->validationErrors()->add($field, 'url');
+            $this->validationErrors()->add('app_url', 'url');
         }
 
         if (!$this->exists && static::where(['user_id' => $this->user_id])->available()->exists()) {

app/Models/BeatmapPack.php

···
         'standard' => 'S',
         'featured' => 'F',
         'tournament' => 'P', // since 'T' is taken and 'P' goes for 'pool'
+        'loved' => 'L',
         'chart' => 'R',
         'theme' => 'T',
         'artist' => 'A',

app/Models/Beatmapset.php

···
             return false;
         }
 
-        $contents = file_get_contents($url);
-        if ($contents === false) {
-            throw new BeatmapProcessorException('Error retrieving beatmap');
-        }
+        $curl = curl_init($url);
+        curl_setopt($curl, CURLOPT_FILE, $oszFile);
+        curl_exec($curl);
 
-        $bytesWritten = fwrite($oszFile, $contents);
+        if (curl_errno($curl) > 0) {
+            throw new BeatmapProcessorException('Failed downloading osz: '.curl_error($curl));
+        }
 
-        if ($bytesWritten === false) {
-            throw new BeatmapProcessorException('Failed writing stream');
+        $statusCode = curl_getinfo($curl, CURLINFO_HTTP_CODE);
+        if ($statusCode !== 200) {
+            throw new BeatmapProcessorException('Failed downloading osz: HTTP Error '.$statusCode);
         }
 
         return new BeatmapsetArchive(get_stream_filename($oszFile));

app/Models/Chat/Message.php

···
         };
     }
 
+    public function reportableAdditionalInfo(): ?string
+    {
+        $history = static
+            ::where('message_id', '<=', $this->getKey())
+            ->whereHas('channel', fn ($ch) => $ch->where('type', '<>', Channel::TYPES['pm']))
+            ->where('user_id', $this->user_id)
+            ->orderBy('timestamp', 'DESC')
+            ->with('channel')
+            ->limit(5)
+            ->get()
+            ->map(fn ($m) => "**{$m->timestamp_json} {$m->channel->name}:**\n{$m->content}\n")
+            ->reverse()
+            ->join("\n");
+
+        $channel = $this->channel;
+        $header = 'Reported in: '.($channel->isPM() ? 'pm' : '**'.$channel->name.'** ('.strtolower($channel->type).')');
+
+        return "{$header}\n\n{$history}";
+    }
+
     public function trashed(): bool
     {
         return false;

app/Models/Forum/Post.php

···
 
         // record edit history
         if ($this->exists && $this->isDirty('post_text')) {
-            $this->fill([
-                'post_edit_time' => Carbon::now(),
-                'post_edit_count' => DB::raw('post_edit_count + 1'),
-            ]);
+            $this->post_edit_time = Carbon::now();
+            if ($this->post_edit_count < 64000) {
+                $this->post_edit_count = DB::raw('post_edit_count + 1');
+            }
         }
 
         return parent::save($options);

app/Models/Forum/TopicPoll.php

···
 
     private $topic;
     private $validated = false;
-    private $params;
+    private $params = [
+        'hide_results' => false,
+        'length_days' => 0,
+        'max_options' => 1,
+        'options' => [],
+        'title' => null,
+        'vote_change' => false,
+    ];
     private $votedBy = [];
 
     public function __get(string $field)
···
 
     public function fill($params)
     {
-        $this->params = array_merge([
-            'hide_results' => false,
-            'length_days' => 0,
-            'max_options' => 1,
-            'vote_change' => false,
-        ], $params);
+        $this->params = [
+            ...$this->params,
+            ...$params,
+        ];
         $this->validated = false;
 
         return $this;
···
             $this->validated = true;
             $this->validationErrors()->reset();
 
-            if (!isset($this->params['title']) || !present($this->params['title'])) {
+            if (!present($this->params['title'])) {
                 $this->validationErrors()->add('title', 'required');
             }
 

app/Models/OAuth/Client.php

···
 use App\Exceptions\InvariantException;
 use App\Models\User;
 use App\Traits\Validatable;
+use Carbon\Carbon;
 use DB;
 use Laravel\Passport\Client as PassportClient;
 use Laravel\Passport\RefreshToken;
 
+/**
+ * @property Carbon|null $created_at
+ * @property int $id
+ * @property string $name
+ * @property bool $password_client
+ * @property bool $personal_access_client
+ * @property string $provider
+ * @property string $redirect
+ * @property-read Collection<RefreshToken> refreshTokens
+ * @property bool $revoked
+ * @property string $secret
+ * @property-read Collection<Token> tokens
+ * @property Carbon|null $updated_at
+ * @property-read User|null $user
+ * @property int|null $user_id
+ */
 class Client extends PassportClient
 {
     use Validatable;
···
         );
     }
 
+    public function setRedirectAttribute(string $value)
+    {
+        $this->attributes['redirect'] = implode(',', array_unique(preg_split('/[\s,]+/', $value, 0, PREG_SPLIT_NO_EMPTY)));
+    }
+
     public function isValid()
     {
         $this->validationErrors()->reset();
···
             $this->validationErrors()->add('name', 'required');
         }
 
-        $redirect = trim($this->redirect);
-        // TODO: this url validation is not very good.
-        if (present($redirect) && !filter_var($redirect, FILTER_VALIDATE_URL)) {
-            $this->validationErrors()->add('redirect', '.url');
+        $redirects = explode(',', $this->redirect ?? '');
+        foreach ($redirects as $redirect) {
+            // TODO: this url validation is not very good.
+            if (present($redirect) && !filter_var($redirect, FILTER_VALIDATE_URL)) {
+                $this->validationErrors()->add('redirect', '.url');
+                break;
+            }
         }
 
         return $this->validationErrors()->isEmpty();

app/Models/Traits/Reportable.php

···
 {
     abstract protected function newReportableExtraParams(): array;
 
+    public function reportableAdditionalInfo(): ?string
+    {
+        return null;
+    }
+
     public function reportedIn()
     {
         return $this->morphMany(UserReport::class, 'reportable');
···
             $attributes['comments'] = $params['comments'] ?? '';
             $attributes['reporter_id'] = $reporter->getKey();
 
-            if (array_key_exists('reason', $params)) {
+            if (present($params['reason'] ?? null)) {
                 $attributes['reason'] = $params['reason'];
             }
 

app/Models/Traits/ReportableInterface.php

···
 
 interface ReportableInterface
 {
+    public function reportableAdditionalInfo(): ?string;
     public function reportBy(User $reporter, array $params): ?UserReport;
     public function trashed();
 }

app/Models/User.php

···
 use Carbon\Carbon;
 use DB;
 use Ds\Set;
-use Egulias\EmailValidator\EmailValidator;
-use Egulias\EmailValidator\Validation\NoRFCWarningsValidation;
 use Exception;
 use Hash;
 use Illuminate\Auth\Authenticatable;
···
         $this->currentPassword = $value;
     }
 
+    /**
+     * Enables email presence and confirmation field equality check.
+     */
     public function validateEmailConfirmation()
     {
         $this->validateEmailConfirmation = true;
···
         }
 
         if ($this->validateEmailConfirmation) {
+            if ($this->user_email === null) {
+                $this->validationErrors()->add('user_email', '.required');
+            }
+
             if ($this->user_email !== $this->emailConfirmation) {
                 $this->validationErrors()->add('user_email_confirmation', '.wrong_email_confirmation');
             }
···
 
     public function isValidEmail()
     {
-        $emailValidator = new EmailValidator();
-        if (!$emailValidator->isValid($this->user_email, new NoRFCWarningsValidation())) {
+        if (!is_valid_email_format($this->user_email)) {
             $this->validationErrors()->add('user_email', '.invalid_email');
 
             // no point validating further if address isn't valid.

app/Models/UserReport.php

···
 
 use App\Exceptions\ValidationException;
 use App\Libraries\MorphMap;
+use App\Models\Chat\Message;
 use App\Models\Score\Best;
 use App\Models\Score\Best\Model as BestModel;
 use App\Traits\Validatable;
···
             $this->validationErrors()->add(
                 'reason',
                 '.no_ranked_beatmapset'
+            );
+        }
+
+        if (
+            $this->reportable instanceof Message
+            && $this->reportable->channel->isHideable()
+            && !$this->reportable->channel->hasUser($this->reporter)
+        ) {
+            $this->validationErrors()->add(
+                'reportable',
+                '.not_in_channel'
             );
         }
 

app/Notifications/UserReportNotification.php

···
                     ? "<{$reportableUrl}|{$notifiable->reportable_type} {$notifiable->reportable_id}>"
                     : "{$notifiable->reportable_type} {$notifiable->reportable_id}";
 
+                $fields = [
+                    'Reporter' => $this->discordMarkdownLink($this->reporter->url(), $this->reporter->username),
+                    'Reported' => $reportedText,
+                    'User' => $this->discordMarkdownLink($userUrl, $user),
+                    'Reason' => $notifiable->reason,
+                ];
+
+                $additionalInfo = $reportable->reportableAdditionalInfo();
+                if ($additionalInfo !== null) {
+                    $fields['Additional Info'] = $additionalInfo;
+                }
+
                 $attachment
                     ->color('warning')
                     ->content($notifiable->comments)
-                    ->fields([
-                        'Reporter' => $this->discordMarkdownLink($this->reporter->url(), $this->reporter->username),
-                        'Reported' => $reportedText,
-                        'User' => $this->discordMarkdownLink($userUrl, $user),
-                        'Reason' => $notifiable->reason,
-                    ]);
+                    ->fields($fields);
             });
     }
 

app/Transformers/BeatmapsetCompactTransformer.php

···
     {
         $currentUser = Auth::user();
 
-        if ($currentUser === null) {
-            return;
-        }
-
         $hypeValidation = $beatmapset->validateHypeBy($currentUser);
 
         return $this->primitive([
···
             'can_delete' => !$beatmapset->isScoreable() && priv_check('BeatmapsetDelete', $beatmapset)->can(),
             'can_edit_metadata' => priv_check('BeatmapsetMetadataEdit', $beatmapset)->can(),
             'can_edit_offset' => priv_check('BeatmapsetOffsetEdit')->can(),
+            'can_edit_tags' => priv_check('BeatmapsetTagsEdit')->can(),
             'can_hype' => $hypeValidation['result'],
             'can_hype_reason' => $hypeValidation['message'] ?? null,
             'can_love' => $beatmapset->isLoveable() && priv_check('BeatmapsetLove')->can(),
             'can_remove_from_loved' => $beatmapset->isLoved() && priv_check('BeatmapsetRemoveFromLoved')->can(),
             'is_watching' => BeatmapsetWatch::check($beatmapset, Auth::user()),
-            'new_hype_time' => json_time($currentUser->newHypeTime()),
-            'nomination_modes' => $currentUser->nominationModes(),
-            'remaining_hype' => $currentUser->remainingHype(),
+            'new_hype_time' => json_time($currentUser?->newHypeTime()),
+            'nomination_modes' => $currentUser?->nominationModes(),
+            'remaining_hype' => $currentUser?->remainingHype() ?? 0,
         ]);
     }
 

app/helpers.php

···
 
 use App\Libraries\LocaleMeta;
 use App\Models\LoginAttempt;
+use Egulias\EmailValidator\EmailValidator;
+use Egulias\EmailValidator\Validation\NoRFCWarningsValidation;
 use Illuminate\Support\Arr;
 use Illuminate\Support\HtmlString;
 
···
     return is_api_request() || request()->expectsJson();
 }
 
+function is_valid_email_format(?string $email): bool
+{
+    if ($email === null) {
+        return false;
+    }
+
+    static $validator;
+    $validator ??= new EmailValidator();
+    static $lexer;
+    $lexer ??= new NoRFCWarningsValidation();
+
+    return $validator->isValid($email, $lexer);
+}
+
 function is_sql_unique_exception($ex)
 {
     return starts_with(
···
             CURLOPT_MAXREDIRS => 5,
         ]);
         $data = curl_exec($curl);
-        curl_close($curl);
 
         $result = read_image_properties_from_string($data);
 
···
     ]);
     curl_exec($ch);
 
-    $errored = curl_errno($ch) > 0 || curl_getinfo($ch, CURLINFO_HTTP_CODE) !== 200;
-    curl_close($ch);
-
-    return !$errored;
+    return curl_errno($ch) === 0 && curl_getinfo($ch, CURLINFO_HTTP_CODE) === 200;
 }
 
 function mini_asset(string $url): string

database/mods.json

···
             "Type": "string"
           }
         ],
-        "IncompatibleMods": [],
+        "IncompatibleMods": [
+          "BU"
+        ],
         "RequiresConfiguration": false,
         "UserPlayable": true,
         "ValidForMultiplayer": true,
···
           "AP",
           "TR",
           "WG",
-          "RP"
+          "RP",
+          "BU"
         ],
         "RequiresConfiguration": false,
         "UserPlayable": true,
···
           "AP",
           "TR",
           "WG",
-          "MG"
+          "MG",
+          "BU"
         ],
         "RequiresConfiguration": false,
         "UserPlayable": true,
···
         "Settings": [],
         "IncompatibleMods": [
           "AD"
+        ],
+        "RequiresConfiguration": false,
+        "UserPlayable": true,
+        "ValidForMultiplayer": true,
+        "ValidForMultiplayerAsFreeMod": true
+      },
+      {
+        "Acronym": "BU",
+        "Name": "Bubbles",
+        "Description": "Don't let their popping distract you!",
+        "Type": "Fun",
+        "Settings": [],
+        "IncompatibleMods": [
+          "BR",
+          "MG",
+          "RP"
         ],
         "RequiresConfiguration": false,
         "UserPlayable": true,

resources/css/bem-index.less

···
 @import "bem/landing-news";
 @import "bem/landing-sitemap";
 @import "bem/lazy-load";
+@import "bem/legacy-api-details";
 @import "bem/line-chart";
 @import "bem/link";
 @import "bem/livestream-featured";

resources/css/bem/comments.less

···
     padding-bottom: @_header-spacing;
   }
 
-  &__text {
-    .default-gutter-v2();
-  }
-
   &__title {
     .default-gutter-v2();
     padding-top: @_header-spacing;

resources/css/bem/legacy-api-details.less

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+.legacy-api-details {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 10px;
+
+  &__actions {
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+
+    @media @desktop {
+      flex-direction: row;
+      align-items: baseline;
+    }
+  }
+
+  &__content {
+    overflow-wrap: anywhere;
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+  }
+
+  &__entry {
+    overflow-wrap: anywhere;
+  }
+
+  &__label {
+    color: hsl(var(--hsl-c2));
+    font-size: @font-size--normal;
+  }
+
+  &__value {
+    font-size: @font-size--title-small;
+  }
+}

resources/css/bem/love-beatmap-modal.less

···
   }
 
   &__diff-mode-title {
-    font-size: @font-size--title-small;
     padding-bottom: 5px;
     margin-bottom: 5px;
     border-bottom: 1px solid #fff;
     position: sticky;
     top: 0;
     background-color: hsl(var(--hsl-b5));
+  }
+
+  &__diff-mode-title-label {
+    font-size: @font-size--title-small;
   }
 
   &__row {
···
     font-size: inherit;
     font-weight: normal;
     cursor: pointer;
+    margin: 0;
   }
 }

resources/css/bem/oauth-client-details.less

···
   }
 
   &__group {
+    .fancy-scrollbar();
     display: inline-flex;
     flex-direction: column;
     margin: 10px 0;
···
     .reset-input();
     .default-border-radius();
 
-    flex: 1;
-    align-self: stretch;
     background-color: @osu-colour-b3;
     border: 2px solid transparent;
     padding: 5px;
···
 
     &--has-error {
       border-color: @osu-colour-red-1;
+    }
+
+    &--textarea {
+      min-height: 5em;
+      max-height: 50vh;
+      resize: none;
     }
   }
 

resources/css/bem/play-detail.less

···
   }
 
   &__beatmap {
+    .u-ellipsis-overflow();
     color: @yellow-dark;
   }
 
   &__beatmap-and-time {
     margin-top: 2px;
+    white-space: nowrap;
+    display: flex;
+    gap: 15px;
   }
 
   &__detail {
···
 
   &__time {
     color: @osu-colour-f1;
-    margin-left: 15px;
+    flex: none;
   }
 
   &__title {

resources/js/beatmap-discussions/beatmap-owner-editor.tsx

···
 type BeatmapsetWithDiscussionJson = BeatmapsetExtendedJson;
 
 interface XhrCollection {
-  updateOwner?: JQuery.jqXHR<BeatmapsetWithDiscussionJson>;
-  userLookup?: JQuery.jqXHR<UserJson>;
+  updateOwner: JQuery.jqXHR<BeatmapsetWithDiscussionJson>;
+  userLookup: JQuery.jqXHR<UserJson>;
 }
 
 interface Props {
···
   private shouldFocusInputOnNextRender = false;
   @observable private updatingOwner = false;
   private userLookupTimeout?: number;
-  private xhr: XhrCollection = {};
+  private xhr: Partial<XhrCollection> = {};
 
   @computed
   private get inputUser() {

resources/js/beatmap-discussions/discussions.tsx

···
 import BeatmapExtendedJson from 'interfaces/beatmap-extended-json';
 import BeatmapsetDiscussionJson, { BeatmapsetDiscussionJsonForShow } from 'interfaces/beatmapset-discussion-json';
 import BeatmapsetExtendedJson from 'interfaces/beatmapset-extended-json';
-import { BeatmapsetWithDiscussionsJson } from 'interfaces/beatmapset-json';
+import BeatmapsetWithDiscussionsJson from 'interfaces/beatmapset-with-discussions-json';
 import UserJson from 'interfaces/user-json';
 import { size } from 'lodash';
 import { action, computed, makeObservable, observable } from 'mobx';

resources/js/beatmap-discussions/love-beatmap-modal.tsx

···
 
 import BeatmapJson from 'interfaces/beatmap-json';
 import BeatmapsetExtendedJson from 'interfaces/beatmapset-extended-json';
+import BeatmapsetWithDiscussionsJson from 'interfaces/beatmapset-with-discussions-json';
 import GameMode from 'interfaces/game-mode';
 import { route } from 'laroute';
-import { computed, makeObservable, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { onError } from 'utils/ajax';
 import { group as groupBeatmaps } from 'utils/beatmap-helper';
 import { trans } from 'utils/lang';
-import { hideLoadingOverlay, showLoadingOverlay } from 'utils/loading-overlay';
+import { hideLoadingOverlay, showImmediateLoadingOverlay } from 'utils/loading-overlay';
 
 interface Props {
-  beatmapset: BeatmapsetExtendedJson;
+  beatmapset: BeatmapsetExtendedJson & Required<Pick<BeatmapsetExtendedJson, 'beatmaps'>>;
   onClose: () => void;
 }
 
 @observer
 export default class LoveConfirmation extends React.Component<Props> {
   @observable private selectedBeatmapIds: Set<number>;
+  @observable private xhr: JQuery.jqXHR<BeatmapsetWithDiscussionsJson> | null = null;
+
+  @computed
+  private get beatmaps() {
+    return this.props.beatmapset.beatmaps.filter((beatmap) => beatmap.deleted_at == null);
+  }
+
+  @computed
+  private get groupedBeatmaps() {
+    return groupBeatmaps(this.beatmaps);
+  }
 
   constructor(props: Props) {
     super(props);
···
     makeObservable(this);
   }
 
-  @computed
-  private get beatmaps() {
-    return this.props.beatmapset.beatmaps?.filter((beatmap) => beatmap.deleted_at === null) ?? [];
-  }
-
-  @computed
-  private get groupedBeatmaps() {
-    return groupBeatmaps(this.beatmaps);
+  componentWillUnmount() {
+    this.xhr?.abort();
   }
 
   render() {
···
 
           <button
             className='btn-osu-big btn-osu-big--rounded-thin'
-            disabled={this.selectedBeatmapIds.size === 0}
+            disabled={this.xhr != null || this.selectedBeatmapIds.size === 0}
             onClick={this.handleSubmit}
             type='button'
           >
···
     return isAllSelected;
   };
 
+  @action
   private handleCheckboxDifficulty = (e: React.ChangeEvent<HTMLInputElement>) => {
     const beatmapId = parseInt(e.target.value, 10);
 
···
     const mode = e.target.value as GameMode;
     const modeBeatmaps = this.groupedBeatmaps.get(mode) ?? [];
 
-    const action = this.checkIsModeSelected(mode) ? 'delete' : 'add';
-    modeBeatmaps.forEach((beatmap) => this.selectedBeatmapIds[action](beatmap.id));
+    const op = this.checkIsModeSelected(mode) ? 'delete' : 'add';
+    modeBeatmaps.forEach((beatmap) => this.selectedBeatmapIds[op](beatmap.id));
   };
 
+  @action
   private handleSubmit = () => {
-    if (!confirm(trans('beatmaps.nominations.love_confirm'))) {
-      return;
-    }
-
-    if (this.selectedBeatmapIds.size === 0) {
+    if (this.xhr != null
+      || this.selectedBeatmapIds.size === 0
+      || !confirm(trans('beatmaps.nominations.love_confirm'))) {
       return;
     }
 
-    showLoadingOverlay();
+    showImmediateLoadingOverlay();
 
     const url = route('beatmapsets.love', { beatmapset: this.props.beatmapset.id });
     const params = {
···
       method: 'PUT',
     };
 
-    $.ajax(url, params).done((response) => {
-      $.publish('beatmapsetDiscussions:update', { beatmapset: response });
+    this.xhr = $.ajax(url, params);
+    this.xhr.done((beatmapset) => {
+      $.publish('beatmapsetDiscussions:update', { beatmapset });
       this.props.onClose();
     }).fail(onError)
-      .always(hideLoadingOverlay);
+      .always(action(() => {
+        this.xhr = null;
+        hideLoadingOverlay();
+      }));
   };
 
   private renderDiffMode(mode: GameMode, beatmaps: BeatmapJson[]) {
···
               <input
                 checked={isModeSelected !== false}
                 className='osu-switch-v2__input'
-                data-indeterminate={isModeSelected === null}
+                data-indeterminate={isModeSelected == null}
                 onChange={this.handleCheckboxMode}
                 type='checkbox'
                 value={mode}
               />
               <span className='osu-switch-v2__content' />
             </div>
-            {trans(`beatmaps.mode.${mode}`)}
+            <span className='love-beatmap-modal__diff-mode-title-label'>
+              {trans(`beatmaps.mode.${mode}`)}
+            </span>
           </label>
         </div>
         <ul className='love-beatmap-modal__diff-list'>

resources/js/beatmap-discussions/new-discussion.tsx

···
 import BeatmapsetDiscussionJson from 'interfaces/beatmapset-discussion-json';
 import { BeatmapsetDiscussionPostStoreResponseJson } from 'interfaces/beatmapset-discussion-post-responses';
 import BeatmapsetExtendedJson from 'interfaces/beatmapset-extended-json';
-import { BeatmapsetWithDiscussionsJson } from 'interfaces/beatmapset-json';
+import BeatmapsetWithDiscussionsJson from 'interfaces/beatmapset-with-discussions-json';
 import { route } from 'laroute';
 import { action, computed, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';

resources/js/beatmap-discussions/nominator.tsx

···
 import BigButton from 'components/big-button';
 import Modal from 'components/modal';
 import BeatmapsetEventJson from 'interfaces/beatmapset-event-json';
-import BeatmapsetExtendedJson from 'interfaces/beatmapset-extended-json';
+import BeatmapsetWithDiscussionsJson from 'interfaces/beatmapset-with-discussions-json';
 import GameMode from 'interfaces/game-mode';
-import UserExtendedJson from 'interfaces/user-extended-json';
 import UserJson from 'interfaces/user-json';
 import { route } from 'laroute';
-import * as _ from 'lodash';
+import { forEachRight, map, uniq } from 'lodash';
+import { action, computed, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import core from 'osu-core-singleton';
 import * as React from 'react';
 import { onError } from 'utils/ajax';
+import { isUserFullNominator } from 'utils/beatmapset-discussion-helper';
 import { classWithModifiers } from 'utils/css';
 import { trans } from 'utils/lang';
 
 interface Props {
-  beatmapset: BeatmapsetExtendedJson;
+  beatmapset: BeatmapsetWithDiscussionsJson;
   currentHype: number;
-  currentUser: UserExtendedJson;
   unresolvedIssues: number;
-  users: UserJson[];
+  users: Partial<Record<number, UserJson>>;
 }
 
-interface State {
-  loading: boolean;
-  selectedModes: GameMode[];
-  visible: boolean;
-}
+const bn = 'nomination-dialog';
 
-export class Nominator extends React.PureComponent<Props, State> {
-  private bn = 'nomination-dialog';
+@observer
+export class Nominator extends React.Component<Props> {
   private checkboxContainerRef = React.createRef<HTMLDivElement>();
-  private xhr?: JQuery.jqXHR;
+  @observable private loading = false;
+  @observable private selectedModes: GameMode[] = [];
+  @observable private visible = false;
+  private xhr?: JQuery.jqXHR<BeatmapsetWithDiscussionsJson>;
 
-  constructor(props: Props) {
-    super(props);
+  private get mapCanBeNominated() {
+    if (this.props.beatmapset.hype == null) {
+      return false;
+    }
 
-    this.state = {
-      loading: false,
-      selectedModes: this.hybridMode() ? [] : [_.keys(this.props.beatmapset.nominations?.required)[0] as GameMode],
-      visible: false,
-    };
+    return this.props.beatmapset.status === 'pending' && this.props.currentHype >= this.props.beatmapset.hype.required;
   }
 
-  componentWillUnmount() {
-    this.xhr?.abort();
-  }
+  private get nominationEvents() {
+    const nominations: BeatmapsetEventJson[] = [];
 
-  hasFullNomination = (mode: GameMode) => {
-    const eventUserIsFullNominator = (event: BeatmapsetEventJson, gameMode?: GameMode) => {
-      if (!event.user_id) {
+    forEachRight(this.props.beatmapset.events, (event) => {
+      if (event.type === 'nomination_reset') {
         return false;
       }
 
-      return _.some(this.props.users[event.user_id].groups, (group) => {
-        if (gameMode !== undefined) {
-          return (group.identifier === 'bng' || group.identifier === 'nat') && group.playmodes?.includes(gameMode);
-        } else {
-          return (group.identifier === 'bng' || group.identifier === 'nat');
-        }
-      });
-    };
-
-    return _.some(this.nominationEvents(), (event) => {
-      if (event.type === 'nominate' && event.comment != null) {
-        return event.comment.modes.includes(mode) && eventUserIsFullNominator(event, mode);
-      } else {
-        return eventUserIsFullNominator(event);
+      if (event.type === 'nominate') {
+        nominations.push(event);
       }
     });
-  };
 
-  hideNominationModal = () => {
-    this.setState({
-      loading: false,
-      selectedModes: this.hybridMode() ? [] : this.state.selectedModes,
-      visible: false,
-    });
-  };
+    return nominations;
+  }
 
-  hybridMode = () => _.keys(this.props.beatmapset.nominations?.required).length > 1;
+  @computed
+  private get playmodes() {
+    return this.props.beatmapset.nominations.legacy_mode
+      ? null
+      : Object.keys(this.props.beatmapset.nominations.required) as GameMode[];
+  }
 
-  legacyMode = () => this.props.beatmapset.nominations?.legacy_mode;
-
-  mapCanBeNominated = () => {
-    if (this.props.beatmapset.hype == null) {
+  private get userCanNominate() {
+    if (!this.userHasNominatePermission) {
       return false;
     }
 
-    return this.props.beatmapset.status === 'pending' && this.props.currentHype >= this.props.beatmapset.hype.required;
-  };
+    const nominationModes = this.playmodes ?? uniq(this.props.beatmapset.beatmaps.map((bm) => bm.mode));
 
-  nominate = () => {
-    this.xhr?.abort();
+    return nominationModes.some((mode) => this.userCanNominateMode(mode));
+  }
 
-    this.setState({ loading: true }, () => {
-      const url = route('beatmapsets.nominate', { beatmapset: this.props.beatmapset.id });
-      const params = {
-        data: {
-          playmodes: this.state.selectedModes,
-        },
-        method: 'PUT',
-      };
+  private get userHasNominatePermission() {
+    const currentUser = core.currentUserOrFail;
+    return currentUser.is_admin || (!this.userIsOwner && (currentUser.is_bng || currentUser.is_nat));
+  }
 
-      this.xhr = $.ajax(url, params)
-        .done((response) => {
-          $.publish('beatmapsetDiscussions:update', { beatmapset: response });
-        })
-        .fail(onError)
-        .always(this.hideNominationModal);
-    });
-  };
+  private get userIsOwner() {
+    const userId = core.currentUserOrFail.id;
 
-  nominationCountMet = (mode: GameMode) => {
-    if (
-      this.props.beatmapset.nominations?.legacy_mode ||
-      !this.props.beatmapset.nominations?.required[mode]
-    ) {
-      return false;
-    }
-
-    const req = this.props.beatmapset.nominations.required[mode];
-    const curr = this.props.beatmapset.nominations.current[mode] || 0;
+    return userId === this.props.beatmapset.user_id
+      || this.props.beatmapset.beatmaps.some((beatmap) => beatmap.deleted_at == null && userId === beatmap.user_id);
+  }
 
-    if (!req) {
-      return false;
+  private get userNominatableModes() {
+    if (!this.mapCanBeNominated || !this.userHasNominatePermission) {
+      return {};
     }
 
-    return curr >= req;
-  };
+    return this.props.beatmapset.current_user_attributes.nomination_modes ?? {};
+  }
 
-  nominationEvents = () => {
-    const nominations: BeatmapsetEventJson[] = [];
+  constructor(props: Props) {
+    super(props);
 
-    _.forEachRight(this.props.beatmapset.events ?? [], (event) => {
-      if (event.type === 'nomination_reset') {
-        return false;
-      }
+    makeObservable(this);
+  }
 
-      if (event.type === 'nominate') {
-        nominations.push(event);
-      }
-    });
+  componentWillUnmount() {
+    this.xhr?.abort();
+  }
 
-    return nominations;
-  };
+  render() {
+    if (core.currentUser == null) return null;
 
-  render(): React.ReactNode {
     return (
       <>
         {this.renderButton()}
-        {this.state.visible && this.renderModal()}
+        {this.visible && this.renderModal()}
       </>
     );
   }
 
-  renderButton = () => {
-    if (!this.mapCanBeNominated() || !this.userHasNominatePermission()) {
-      return;
+  private hasFullNomination(mode: GameMode) {
+    return this.nominationEvents.some((event) => {
+      const user = event.user_id != null ? this.props.users[event.user_id] : null;
+
+      return event.type === 'nominate' && event.comment != null
+        ? event.comment.modes.includes(mode) && isUserFullNominator(user, mode)
+        : isUserFullNominator(user);
+    });
+  }
+
+  @action
+  private readonly hideNominationModal = () => {
+    this.visible = false;
+  };
+
+  @action
+  private readonly nominate = () => {
+    if (this.loading) return;
+
+    this.loading = true;
+
+    const url = route('beatmapsets.nominate', { beatmapset: this.props.beatmapset.id });
+    const params = {
+      data: {
+        playmodes: this.playmodes != null && this.playmodes.length === 1 ? this.playmodes : this.selectedModes,
+      },
+      method: 'PUT',
+    };
+
+    this.xhr = $.ajax(url, params);
+    this.xhr.done((response) => {
+      $.publish('beatmapsetDiscussions:update', { beatmapset: response });
+      this.hideNominationModal();
+    })
+      .fail(onError)
+      .always(action(() => this.loading = false));
+  };
+
+  private nominationCountMet(mode: GameMode) {
+    if (this.props.beatmapset.nominations.legacy_mode || this.props.beatmapset.nominations.required[mode] === 0) {
+      return false;
     }
 
-    const button = (disabled = false) => (
-      <BigButton
-        disabled={disabled}
-        icon='fas fa-thumbs-up'
-        props={{
-          onClick: this.showNominationModal,
-        }}
-        text={trans('beatmaps.nominations.nominate')}
-      />
-    );
+    const req = this.props.beatmapset.nominations.required[mode];
+    const curr = this.props.beatmapset.nominations.current[mode] ?? 0;
 
+    if (!req) {
+      return false;
+    }
+
+    return curr >= req;
+  }
+
+  private renderButton() {
+    if (!this.mapCanBeNominated || !this.userHasNominatePermission) {
+      return;
+    }
+
+    let tooltipText: string | undefined;
     if (this.props.unresolvedIssues > 0) {
-      // add a wrapper for the tooltip (because titles on a disabled button don't show)
-      return (
-        <div title={trans('beatmaps.nominations.unresolved_issues')}>
-          {button(true)}
-        </div>
-      );
-    } else {
-      return button(this.props.beatmapset.nominations?.nominated || !this.userCanNominate());
+      tooltipText = trans('beatmaps.nominations.unresolved_issues');
+    } else if (this.props.beatmapset.nominations.nominated) {
+      tooltipText = trans('beatmaps.nominations.already_nominated');
+    } else if (!this.userCanNominate) {
+      tooltipText = trans('beatmaps.nominations.cannot_nominate');
     }
-  };
 
-  renderModal = () => {
-    const content = this.hybridMode() ? this.modalContentHybrid() : this.modalContentNormal();
+    return (
+      <div title={tooltipText}>
+        <BigButton
+          disabled={tooltipText != null}
+          icon='fas fa-thumbs-up'
+          props={{
+            onClick: this.showNominationModal,
+          }}
+          text={trans('beatmaps.nominations.nominate')}
+        />
+      </div>
+    );
+  }
+
+  private renderModal() {
+    const isHybrid = this.playmodes != null && this.playmodes.length > 1;
 
     return (
       <Modal onClose={this.hideNominationModal}>
-        <div className={this.bn}>
-          <div className={`${this.bn}__header`}>{trans('beatmapsets.nominate.dialog.header')}</div>
-          {content}
-          <div className={`${this.bn}__buttons`}>
+        <div className={bn}>
+          <div className={`${bn}__header`}>{trans('beatmapsets.nominate.dialog.header')}</div>
+          {isHybrid ? this.renderModalContentHybrid() : this.renderModalContentNormal()}
+          <div className={`${bn}__buttons`}>
             <BigButton
-              disabled={(this.hybridMode() && this.state.selectedModes.length < 1) || this.state.loading}
+              disabled={isHybrid && this.selectedModes.length < 1}
               icon='fas fa-thumbs-up'
-              isBusy={this.state.loading}
+              isBusy={this.loading}
               props={{
                 onClick: this.nominate,
               }}
               text={trans('beatmaps.nominations.nominate')}
             />
             <BigButton
-              disabled={this.state.loading}
+              disabled={this.loading}
               icon='fas fa-times'
               props={{
                 onClick: this.hideNominationModal,
···
         </div>
       </Modal>
     );
-  };
+  }
 
-  requiresFullNomination = (mode: GameMode) => {
-    let req;
-    let curr;
+  private renderModalContentHybrid() {
+    return (
+      <>
+        {trans('beatmapsets.nominate.dialog.which_modes')}
+        <div ref={this.checkboxContainerRef} className={`${bn}__checkboxes`}>
+          {this.playmodes?.map((mode: GameMode) => {
+            const disabled = !this.userCanNominateMode(mode);
+            return (
+              <label
+                key={mode}
+                className={classWithModifiers('osu-switch-v2', { disabled })}
+              >
+                <input
+                  checked={this.selectedModes.includes(mode)}
+                  className='osu-switch-v2__input'
+                  disabled={disabled}
+                  name='nomination_modes'
+                  onChange={this.updateCheckboxes}
+                  type='checkbox'
+                  value={mode}
+                />
+                <span className='osu-switch-v2__content' />
+                <div
+                  className={classWithModifiers(`${bn}__label`, { disabled })}
+                >
+                  <i className={`fal fa-extra-mode-${mode}`} /> {trans(`beatmaps.mode.${mode}`)}
+                </div>
+              </label>
+            );
+          })}
+        </div>
+        <div className={`${bn}__warn`}>
+          {trans('beatmapsets.nominate.dialog.hybrid_warning')}
+        </div>
+      </>
+    );
+  }
 
-    if (this.props.beatmapset.nominations?.legacy_mode) {
-      req = this.props.beatmapset.nominations?.required;
-      curr = this.props.beatmapset.nominations?.current;
-    } else {
-      req = this.props.beatmapset.nominations?.required[mode];
-      curr = this.props.beatmapset.nominations?.current[mode];
-    }
+  private renderModalContentNormal() {
+    return trans('beatmapsets.nominate.dialog.confirmation');
+  }
 
-    return (curr === (req ?? 0) - 1) && !this.hasFullNomination(mode);
-  };
-
-  showNominationModal = () => this.setState({ visible: true });
-
-  updateCheckboxes = () => {
-    const checkedBoxes = _.map(this.checkboxContainerRef.current?.querySelectorAll<HTMLInputElement>('input[type=checkbox]:checked'), (node) => node.value);
-    this.setState({ selectedModes: checkedBoxes as GameMode[] });
-  };
-
-  userCanNominate = () => {
-    if (!this.userHasNominatePermission()) {
-      return false;
-    }
+  private requiresFullNomination(mode: GameMode) {
+    let req: number;
+    let curr: number;
 
-    let nominationModes;
-    if (this.legacyMode()) {
-      nominationModes = _.uniq(this.props.beatmapset.beatmaps?.map((bm) => bm.mode));
+    if (this.props.beatmapset.nominations.legacy_mode) {
+      req = this.props.beatmapset.nominations.required;
+      curr = this.props.beatmapset.nominations.current;
     } else {
-      nominationModes = Object.keys(this.props.beatmapset.nominations!.required) as GameMode[];
+      req = this.props.beatmapset.nominations.required[mode] ?? 0;
+      curr = this.props.beatmapset.nominations.current[mode] ?? 0;
     }
 
-    return _.some(nominationModes, (mode) => this.userCanNominateMode(mode));
-  };
-
-  userCanNominateMode = (mode: GameMode) => {
-    if (!this.userHasNominatePermission() || this.nominationCountMet(mode)) {
-      return false;
-    }
+    return (curr === req - 1) && !this.hasFullNomination(mode);
+  }
 
-    const userNominatable = this.userNominatableModes();
+  @action
+  private readonly showNominationModal = () => this.visible = true;
 
-    return userNominatable[mode] === 'full' ||
-      (userNominatable[mode] === 'limited' && !this.requiresFullNomination(mode));
-  };
-
-  userHasNominatePermission = () => this.props.currentUser.is_admin || (!this.userIsOwner() && (this.props.currentUser.is_bng || this.props.currentUser.is_nat));
-
-  userIsOwner = () => {
-    const userId = this.props.currentUser?.id;
-
-    return (userId != null && (
-      userId === this.props.beatmapset.user_id
-      || (this.props.beatmapset.beatmaps ?? []).some((beatmap) => beatmap.deleted_at == null && userId === beatmap.user_id)
-    ));
+  @action
+  private readonly updateCheckboxes = () => {
+    const checkedBoxes = map(this.checkboxContainerRef.current?.querySelectorAll<HTMLInputElement>('input[type=checkbox]:checked'), (node) => node.value);
+    this.selectedModes = checkedBoxes as GameMode[];
   };
 
-  userNominatableModes = () => {
-    if (!this.mapCanBeNominated() || !this.userHasNominatePermission()) {
-      return {};
+  private userCanNominateMode(mode: GameMode) {
+    if (!this.userHasNominatePermission || this.nominationCountMet(mode)) {
+      return false;
     }
 
-    return this.props.beatmapset.current_user_attributes?.nomination_modes ?? {};
-  };
+    const userNominatable = this.userNominatableModes;
 
-  private modalContentHybrid = () => {
-    const playmodes = _.keys(this.props.beatmapset.nominations?.required);
-
-    const renderPlaymodes = _.map(playmodes, (mode: GameMode) => {
-      const disabled = !this.userCanNominateMode(mode);
-      return (
-        <label
-          key={mode}
-          className={classWithModifiers('osu-switch-v2', { disabled })}
-        >
-          <input
-            checked={this.state.selectedModes.includes(mode)}
-            className='osu-switch-v2__input'
-            disabled={disabled}
-            name='nomination_modes'
-            onChange={this.updateCheckboxes}
-            type='checkbox'
-            value={mode}
-          />
-          <span className='osu-switch-v2__content' />
-          <div
-            className={classWithModifiers(`${this.bn}__label`, { disabled })}
-          >
-            <i className={`fal fa-extra-mode-${mode}`} /> {trans(`beatmaps.mode.${mode}`)}
-          </div>
-        </label>
-      );
-    });
-
-    return (
-      <>
-        {trans('beatmapsets.nominate.dialog.which_modes')}
-        <div ref={this.checkboxContainerRef} className={`${this.bn}__checkboxes`}>
-          {renderPlaymodes}
-        </div>
-        <div className={`${this.bn}__warn`}>
-          {trans('beatmapsets.nominate.dialog.hybrid_warning')}
-        </div>
-      </>
-    );
-  };
-
-  private modalContentNormal() {
-    return trans('beatmapsets.nominate.dialog.confirmation');
+    return userNominatable[mode] === 'full'
+      || (userNominatable[mode] === 'limited' && !this.requiresFullNomination(mode));
   }
 }

resources/js/beatmap-discussions/post.tsx

···
 import BeatmapsetDiscussionJson from 'interfaces/beatmapset-discussion-json';
 import { BeatmapsetDiscussionMessagePostJson } from 'interfaces/beatmapset-discussion-post-json';
 import BeatmapsetExtendedJson from 'interfaces/beatmapset-extended-json';
-import { BeatmapsetWithDiscussionsJson } from 'interfaces/beatmapset-json';
+import BeatmapsetWithDiscussionsJson from 'interfaces/beatmapset-with-discussions-json';
 import UserJson from 'interfaces/user-json';
 import { route } from 'laroute';
 import { isEqual } from 'lodash';

resources/js/beatmap-discussions/renderers.tsx

···
 import * as React from 'react';
 import { uriTransformer } from 'react-markdown';
 import { propsFromHref, timestampRegexGlobal } from 'utils/beatmapset-discussion-helper';
-import { openBeatmapEditor } from 'utils/url';
+import { openBeatmapEditor, safeReactMarkdownUrl } from 'utils/url';
 
 export const LinkContext = React.createContext({ inLink: false });
 
···
 
 export function linkRenderer(astProps: JSX.IntrinsicElements['a']) {
   const props = propsFromHref(astProps.href);
+  const href = safeReactMarkdownUrl(props.href);
 
   return (
     <>
       <LinkContext.Provider value={{ inLink: true }}>
-        <a {...props}>{props.children ?? astProps.children}</a>
+        <a {...props} href={href}>{props.children ?? astProps.children}</a>
       </LinkContext.Provider>
     </>
   );

resources/js/beatmap-discussions/subscribe.tsx

···
   render() {
     return (
       <BigButton
-        disabled={this.busy}
         icon={this.isWatching ? 'fas fa-eye-slash' : 'fas fa-eye'}
         isBusy={this.busy}
         modifiers='full'

resources/js/beatmapsets-show/main.tsx

···
 // Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
-import { Comments } from 'components/comments';
+import Comments from 'components/comments';
 import { CommentsManager } from 'components/comments-manager';
 import HeaderV4 from 'components/header-v4';
 import NotificationBanner from 'components/notification-banner';

resources/js/beatmapsets-show/metadata-editor.tsx

···
     return this.controller.beatmapset.current_user_attributes.can_edit_offset;
   }
 
+  private get canEditTags() {
+    return this.controller.beatmapset.current_user_attributes.can_edit_tags;
+  }
+
   constructor(props: Props) {
     super(props);
 
···
           </div>
         </label>
 
-        <label className='simple-form__row'>
-          <div className='simple-form__label'>
-            {trans('beatmapsets.show.info.tags')}
-          </div>
+        {this.canEditTags &&
+          <label className='simple-form__row'>
+            <div className='simple-form__label'>
+              {trans('beatmapsets.show.info.tags')}
+            </div>
 
-          <textarea
-            className='simple-form__input'
-            maxLength={1000}
-            name='beatmapset[tags]'
-            onChange={this.setTags}
-            value={this.tags}
-          />
-        </label>
+            <textarea
+              className='simple-form__input'
+              maxLength={1000}
+              name='beatmapset[tags]'
+              onChange={this.setTags}
+              value={this.tags}
+            />
+          </label>
+        }
 
         {this.canEditOffset &&
           <label className='simple-form__row'>
···
         language_id: this.languageId,
         nsfw: this.nsfw,
         offset: this.canEditOffset ? getInt(this.offset) : undefined,
-        tags: this.tags,
+        tags: this.canEditTags ? this.tags : undefined,
       } },
       method: 'PATCH',
     });

resources/js/changelog-build/main.coffee

···
 
 import { Build } from 'components/build'
 import { ChangelogHeaderStreams } from 'components/changelog-header-streams'
-import { Comments } from 'components/comments'
+import Comments from 'components/comments'
 import { CommentsManager } from 'components/comments-manager'
 import HeaderV4 from 'components/header-v4'
 import { route } from 'laroute'

resources/js/chat/message-item.tsx

···
 import oldLink from 'remark-plugins/old-link';
 import wikiLink, { RemarkWikiLinkPlugin } from 'remark-wiki-link';
 import { classWithModifiers } from 'utils/css';
-import { wikiUrl } from 'utils/url';
+import { safeReactMarkdownUrl, wikiUrl } from 'utils/url';
 
 interface Props {
   message: Message;
···
 
 function linkRenderer(astProps: JSX.IntrinsicElements['a']) {
   return (
-    <a href={astProps.href} rel='nofollow noreferrer' target='_blank'>
+    <a href={safeReactMarkdownUrl(astProps.href)} rel='nofollow noreferrer' target='_blank'>
       {astProps.children}
     </a>
   );

resources/js/coffee-modules.d.ts

···
   }
 }
 
-declare module 'components/comments' {
-  class Comments extends React.PureComponent<any> {}
-}
-
 declare module 'components/comments-manager' {
   interface Props {
     commentableId?: number;

resources/js/comments-index/index.tsx

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import Comment from 'components/comment';
+import { computed, makeObservable } from 'mobx';
+import { observer } from 'mobx-react';
+import core from 'osu-core-singleton';
+import * as React from 'react';
+import { trans } from 'utils/lang';
+
+const store = core.dataStore.commentStore;
+const uiState = core.dataStore.uiState;
+
+@observer
+export default class CommentsIndex extends React.Component {
+  @computed
+  private get comments() {
+    const ret = [];
+
+    for (const id of uiState.comments.topLevelCommentIds) {
+      const comment = store.comments.get(id);
+
+      if (comment != null) {
+        ret.push(comment);
+      }
+    }
+
+    return ret;
+  }
+
+  constructor(props: Record<string, never>) {
+    super(props);
+
+    makeObservable(this);
+  }
+
+  render() {
+    const comments = this.comments;
+
+    return comments.length === 0
+      ? (
+        <div className='comments'>
+          <div className='comments__items comments__items--empty'>
+            {trans('comments.index.no_comments')}
+          </div>
+        </div>
+      ) : comments.map((comment) => (
+        <Comment
+          key={comment.id}
+          comment={comment}
+          depth={0}
+          expandReplies={false}
+          linkParent
+          modifiers='dark'
+          showCommentableMeta
+        />
+      ));
+  }
+}

resources/js/comments-index/main.coffee

···
-# Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
-# See the LICENCE file in the repository root for full licence text.
-
-import { Comment } from 'components/comment'
-import HeaderV4 from 'components/header-v4'
-import { route } from 'laroute'
-import { Observer } from 'mobx-react'
-import core from 'osu-core-singleton'
-import * as React from 'react'
-import { a, button, div, h1, p, span } from 'react-dom-factories'
-import { trans } from 'utils/lang'
-
-el = React.createElement
-
-store = core.dataStore.commentStore
-uiState = core.dataStore.uiState
-
-export class Main extends React.Component
-  constructor: (props) ->
-    super props
-
-    @pagination = React.createRef()
-
-
-  componentDidMount: =>
-    pagination = newBody.querySelector('.js-comments-pagination').cloneNode(true)
-    @pagination.current.innerHTML = ''
-    @pagination.current.appendChild pagination
-
-
-  render: =>
-    el React.Fragment, null,
-      el HeaderV4,
-        links: @headerLinks()
-        linksBreadcrumb: true
-        theme: 'comments'
-
-      el Observer, null, () =>
-        comments = uiState.comments.topLevelCommentIds.map (id) -> store.comments.get(id)
-        div className: 'osu-page osu-page--comments',
-
-          if comments.length < 1
-            div className: 'comments__text',
-              trans 'comments.index.no_comments'
-          else
-            for comment in comments
-              el Comment,
-                key: comment.id
-                comment: comment
-                expandReplies: false
-                showCommentableMeta: true
-                linkParent: true
-                depth: 0
-                modifiers: ['dark']
-
-          div ref: @pagination
-
-
-  headerLinks: =>
-    links = [
-      {
-        title: trans 'comments.index.nav_title'
-        url: route('comments.index')
-      }
-    ]
-
-    if @props.user?
-      links.push(
-        {
-          title: @props.user.username
-          url: route('users.show', user: @props.user.id)
-        },
-        {
-          title: trans 'comments.index.nav_comments'
-          url: route('comments.index', user_id: @props.user.id)
-        }
-      )
-
-    return links

resources/js/comments-show/index.tsx

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import Comment from 'components/comment';
+import { observer } from 'mobx-react';
+import core from 'osu-core-singleton';
+import * as React from 'react';
+
+const store = core.dataStore.commentStore;
+const uiState = core.dataStore.uiState;
+
+@observer
+export default class CommentsShow extends React.Component {
+  render() {
+    const comment = store.comments.get(uiState.comments.topLevelCommentIds[0]);
+
+    if (comment == null) {
+      throw new Error('missing comment');
+    }
+
+    return (
+      <Comment
+        comment={comment}
+        depth={0}
+        linkParent
+        modifiers={['dark', 'single']}
+        showCommentableMeta
+        showToolbar
+      />
+    );
+  }
+}

resources/js/comments-show/main.coffee

···
-# Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
-# See the LICENCE file in the repository root for full licence text.
-
-import { Comment } from 'components/comment'
-import HeaderV4 from 'components/header-v4'
-import { route } from 'laroute'
-import { Observer } from 'mobx-react'
-import core from 'osu-core-singleton'
-import * as React from 'react'
-import { a, button, div, h1, li, ol, p, span } from 'react-dom-factories'
-import { trans } from 'utils/lang'
-
-el = React.createElement
-
-store = core.dataStore.commentStore
-uiState = core.dataStore.uiState
-
-export class Main extends React.PureComponent
-  render: =>
-    el Observer, null, () =>
-      @comment = store.comments.get(uiState.comments.topLevelCommentIds[0])
-
-      el React.Fragment, null,
-        el HeaderV4,
-          links: @headerLinks()
-          linksBreadcrumb: true
-          theme: 'comments'
-
-        div className: 'osu-page osu-page--comment',
-          el Comment,
-            comment: @comment
-            showCommentableMeta: true
-            showToolbar: true
-            depth: 0
-            linkParent: true
-            modifiers: ['dark', 'single']
-
-
-  headerLinks: =>
-    [
-        {
-          title: trans 'comments.index.nav_title'
-          url: route('comments.index')
-        }
-        {
-          title: trans 'comments.show.nav_title'
-          url: route('comments.show', @comment)
-        }
-    ]

resources/js/components/big-button.tsx

···
   extraClasses: string[];
   href?: string;
   icon?: string;
+  /**
+   * Changes icon to spinner and disables the button (implies `disabled`).
+   */
   isBusy: boolean;
   isSubmit: boolean;
   modifiers?: Modifiers;
···
     isSubmit: false,
     props: {},
   };
+
+  get disabled() {
+    return this.props.disabled || this.props.isBusy;
+  }
 
   get text() {
     if (this.props.text == null) {
···
   }
 
   render() {
-    let blockClass = classWithModifiers('btn-osu-big', this.props.modifiers, { disabled: this.props.disabled });
+    let blockClass = classWithModifiers('btn-osu-big', this.props.modifiers, { disabled: this.disabled });
     if (this.props.extraClasses != null) {
       blockClass += ` ${this.props.extraClasses.join(' ')}`;
     }
 
     if (present(this.props.href)) {
-      if (this.props.disabled) {
+      if (this.disabled) {
         return (
           <span className={blockClass} {...this.props.props}>
             {this.renderChildren()}
···
     return (
       <button
         className={blockClass}
-        disabled={this.props.disabled}
+        disabled={this.disabled}
         type={this.props.isSubmit ? 'submit' : 'button'}
         {...this.props.props}
       >

resources/js/components/comment-editor.tsx

···
 import { Spinner } from './spinner';
 import UserAvatar from './user-avatar';
 
-type Mode = 'edit' | 'new' | 'reply';
+export type CommentEditMode = 'edit' | 'new' | 'reply';
 
 interface CommentPostParams {
   comment: {
···
   id?: number;
   message?: string;
   modifiers?: Modifiers;
-  onPosted?: (mode: Mode) => void;
+  onPosted?: (mode: CommentEditMode) => void;
   parent?: Comment;
 }
 
 const bn = 'comment-editor';
 
-const buttonTextKey: Record<Mode, string> = {
+const buttonTextKey: Record<CommentEditMode, string> = {
   edit: 'save',
   new: 'post',
   reply: 'reply',
···
             ? (
               <div className={`${bn}__footer-item`}>
                 <BigButton
-                  disabled={this.posting || !this.isValid}
+                  disabled={!this.isValid}
                   isBusy={this.posting}
                   modifiers='comment-editor'
                   props={{ onClick: this.post }}
···
     this.message = e.currentTarget.value;
   };
 
+  @action
   private readonly post = () => {
     if (this.posting) return;
 

resources/js/components/comment-show-more.tsx

···
     this.xhr?.abort();
   }
 
-  render() {
-    if (this.props.comments.length >= this.props.total) {
-      return null;
-    }
-    if (!this.hasMoreComments) {
-      return null;
-    }
-
-    return this.props.top ?? false
-      ? (
-        <ShowMoreLink
-          callback={this.load}
-          hasMore
-          loading={this.loading}
-          modifiers='comments'
-          remaining={this.props.total - this.props.comments.length}
-        />
-      ) : (
-        <div className={classWithModifiers(bn, this.props.modifiers)}>
-          {this.loading ?
-            <Spinner />
-            :
-            <button className={`${bn}__link`} onClick={this.load}>
-              {this.props.label ?? trans('common.buttons.show_more')}
-            </button>
-          }
-        </div>
-      );
-  }
-
   @action
-  private readonly load = () => {
+  readonly load = () => {
     if (this.loading) return;
 
     this.loading = true;
···
       this.loading = false;
     }));
   };
+
+  render() {
+    if (this.props.comments.length >= this.props.total) {
+      return null;
+    }
+    if (!this.hasMoreComments) {
+      return null;
+    }
+
+    return this.props.top ?? false
+      ? (
+        <ShowMoreLink
+          callback={this.load}
+          hasMore
+          loading={this.loading}
+          modifiers='comments'
+          remaining={this.props.total - this.props.comments.length}
+        />
+      ) : (
+        <div className={classWithModifiers(bn, this.props.modifiers)}>
+          {this.loading ?
+            <Spinner />
+            :
+            <button className={`${bn}__link`} onClick={this.load}>
+              {this.props.label ?? trans('common.buttons.show_more')}
+            </button>
+          }
+        </div>
+      );
+  }
 }

resources/js/components/comment.coffee

···
-# Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
-# See the LICENCE file in the repository root for full licence text.
-
-import { route } from 'laroute'
-import { Observer } from 'mobx-react'
-import core from 'osu-core-singleton'
-import * as React from 'react'
-import { a, button, div, span, textarea, p } from 'react-dom-factories'
-import { onError } from 'utils/ajax'
-import { classWithModifiers } from 'utils/css'
-import { estimateMinLines } from 'utils/estimate-min-lines'
-import { createClickCallback, formatNumberSuffixed } from 'utils/html'
-import { trans, transChoice } from 'utils/lang'
-import ClickToCopy from './click-to-copy'
-import CommentEditor from './comment-editor'
-import CommentShowMore from './comment-show-more'
-import DeletedCommentsCount from './deleted-comments-count'
-import { ReportReportable } from './report-reportable'
-import ShowMoreLink from './show-more-link'
-import { Spinner } from './spinner'
-import StringWithComponent from './string-with-component'
-import TimeWithTooltip from './time-with-tooltip'
-import UserAvatar from './user-avatar'
-import UserLink from './user-link'
-
-el = React.createElement
-
-deletedUser = username: trans('users.deleted')
-commentableMetaStore = core.dataStore.commentableMetaStore
-store = core.dataStore.commentStore
-userStore = core.dataStore.userStore
-
-uiState = core.dataStore.uiState
-
-export class Comment extends React.PureComponent
-  CLIP_LINES = 7
-  MAX_DEPTH = 6
-
-  makePreviewElement = document.createElement('div')
-
-  makePreview = (comment, user) ->
-    if comment.isDeleted
-      trans('comments.deleted')
-    else if isBlocked(user)
-      trans('users.blocks.comment_text')
-    else
-      makePreviewElement.innerHTML = comment.messageHtml
-      _.truncate makePreviewElement.textContent, length: 100
-
-
-  isBlocked = (user) ->
-    return core.currentUserModel.blocks.has(user.id)
-
-
-  constructor: (props) ->
-    super props
-
-    @xhr = {}
-    @loadMoreRef = React.createRef()
-
-    if osuCore.windowSize.isMobile
-      # There's no indentation on mobile so don't expand by default otherwise it will be confusing.
-      expandReplies = false
-    else if @props.comment.isDeleted
-      expandReplies = false
-    else if @props.expandReplies?
-      expandReplies = @props.expandReplies
-    else
-      children = uiState.getOrderedCommentsByParentId(@props.comment.id)
-      # Collapse if either no children is loaded, current level doesn't add indentation, or this comment is blocked.
-      expandReplies = children?.length > 0 && @props.depth < MAX_DEPTH && !isBlocked(@userFor(@props.comment))
-
-    @state =
-      clipped: true
-      postingVote: false
-      editing: false
-      showNewReply: false
-      expandReplies: expandReplies
-      lines: null
-      forceShow: false
-
-
-  componentWillUnmount: =>
-    xhr?.abort() for own _name, xhr of @xhr
-
-
-  componentDidMount: =>
-    @setState lines: estimateMinLines(@props.comment.messageHtml ? '')
-
-
-  componentDidUpdate: (prevProps) =>
-    if prevProps.comment.messageHtml != @props.comment.messageHtml
-      @setState lines: estimateMinLines(@props.comment.messageHtml ? '')
-
-
-  render: =>
-    el Observer, null, () =>
-      @children = uiState.getOrderedCommentsByParentId(@props.comment.id) ? []
-      parent = store.comments.get(@props.comment.parentId)
-      user = @userFor(@props.comment)
-      meta = commentableMetaStore.get(@props.comment.commentableType, @props.comment.commentableId)
-      @isBlocked = isBlocked(user)
-
-      # Only clip if there are at least CLIP_LINES + 2 lines to ensure there are enough contents
-      # being clipped instead of just single lone line (or worse no more lines because of rounding up).
-      longContent = @state.lines? && @state.lines.count >= CLIP_LINES + 2
-
-      blockClass = classWithModifiers 'comment', @props.modifiers, top: @props.depth == 0
-
-      mainClass = classWithModifiers 'comment__main',
-        deleted: @props.comment.isDeleted || @isBlocked
-        clip: @state.clipped && longContent
-
-      repliesClass = classWithModifiers 'comment__replies',
-        indented: @props.depth < MAX_DEPTH
-        hidden: !@state.expandReplies
-
-      if !@props.comment.isDeleted && @isBlocked && !@state.forceShow
-        return @renderBlocked(blockClass, mainClass)
-
-      div
-        className: blockClass
-
-        @renderRepliesToggle()
-        @renderCommentableMeta(meta)
-        @renderToolbar()
-
-        div
-          className: mainClass
-          style:
-            '--line-height': if @state.lines? then "#{@state.lines.lineHeight}px" else undefined
-            '--clip-lines': CLIP_LINES
-          if @props.comment.canHaveVote
-            div className: 'comment__float-container comment__float-container--left hidden-xs',
-              @renderVoteButton()
-
-          @renderUserAvatar user
-
-          div className: 'comment__container',
-            div className: 'comment__row comment__row--header',
-              @renderUsername user
-              @renderOwnerBadge(meta)
-
-              if @props.comment.pinned
-                span
-                  className: 'comment__row-item  comment__row-item--pinned'
-                  span className: 'fa fa-thumbtack'
-                  ' '
-                  trans 'comments.pinned'
-
-              if parent?
-                span
-                  className: 'comment__row-item comment__row-item--parent'
-                  @parentLink(parent)
-
-              if @props.comment.isDeleted
-                span
-                  className: 'comment__row-item comment__row-item--deleted'
-                  trans('comments.deleted')
-
-            if @state.editing
-              div className: 'comment__editor',
-                el CommentEditor,
-                  id: @props.comment.id
-                  message: @props.comment.message
-                  modifiers: @props.modifiers
-                  close: @closeEdit
-            else if @props.comment.messageHtml?
-              el React.Fragment, null,
-                div
-                  className: 'comment__message',
-                  dangerouslySetInnerHTML:
-                    __html: @props.comment.messageHtml
-                @renderToggleClipButton() if longContent
-
-            div className: 'comment__row comment__row--footer',
-              if @props.comment.canHaveVote
-                div
-                  className: 'comment__row-item visible-xs'
-                  @renderVoteButton(true)
-
-              div
-                className: 'comment__row-item comment__row-item--info'
-                el TimeWithTooltip, dateTime: @props.comment.createdAt, relative: true
-
-              @renderPermalink()
-              @renderReplyButton()
-              @renderEdit()
-              @renderRestore()
-              @renderDelete()
-              @renderPin()
-              @renderReport()
-              @renderEditedBy()
-              @renderDeletedBy()
-              @renderForceShow()
-              @renderRepliesText()
-
-            @renderReplyBox(meta)
-
-        if @props.comment.repliesCount > 0
-          div
-            className: repliesClass
-            @children.map @renderComment
-
-            el DeletedCommentsCount, { comments: @children }
-
-            el CommentShowMore,
-              parent: @props.comment
-              comments: @children
-              total: @props.comment.repliesCount
-              modifiers: @props.modifiers
-              label: trans('comments.load_replies') if @children.length == 0
-              ref: @loadMoreRef
-
-
-  renderBlocked: (blockClass, mainClass) =>
-    div className: blockClass,
-      div className: mainClass,
-        span
-          className: if @props.depth > 0 then 'comment__avatar' else ''
-          style:
-            height: 'auto'
-
-        div className: 'comment__container',
-          div className: 'comment__message',
-            p className: 'osu-md osu-md--comment osu-md__paragraph',
-              trans('users.blocks.comment_text')
-              ' '
-              @renderForceShowButton()
-
-
-  renderComment: (comment) =>
-    comment = store.comments.get(comment.id)
-    return null if comment.isDeleted && !core.userPreferences.get('comments_show_deleted')
-
-    el Comment,
-      key: comment.id
-      comment: comment
-      depth: @props.depth + 1
-      parent: @props.comment
-      modifiers: @props.modifiers
-      expandReplies: @props.expandReplies
-
-
-  renderDelete: =>
-    if !@props.comment.isDeleted && @props.comment.canDelete
-      div className: 'comment__row-item',
-        button
-          type: 'button'
-          className: 'comment__action'
-          onClick: @delete
-          trans('common.buttons.delete')
-
-
-  renderDeletedBy: =>
-    if @props.comment.isDeleted && @props.comment.canModerate
-      div className: 'comment__row-item comment__row-item--info',
-        el StringWithComponent,
-          mappings:
-            timeago:
-              el TimeWithTooltip,
-                dateTime: @props.comment.deletedAt
-                relative: true
-            user:
-              if @props.comment.deletedById?
-                el UserLink, user: (userStore.get(@props.comment.deletedById) ? deletedUser)
-              else
-                trans('comments.deleted_by_system')
-          pattern: trans('comments.deleted_by')
-
-
-  renderPin: =>
-    if @props.comment.canPin
-      div className: 'comment__row-item',
-        button
-          type: 'button'
-          className: 'comment__action'
-          onClick: @togglePinned
-          trans 'common.buttons.' + if @props.comment.pinned then 'unpin' else 'pin'
-
-
-  renderEdit: =>
-    if @props.comment.canEdit
-      div className: 'comment__row-item',
-        button
-          type: 'button'
-          className: "comment__action #{if @state.editing then 'comment__action--active' else ''}"
-          onClick: @toggleEdit
-          trans('common.buttons.edit')
-
-
-  renderEditedBy: =>
-    if !@props.comment.isDeleted && @props.comment.isEdited
-      editor = userStore.get(@props.comment.editedById)
-      div
-        className: 'comment__row-item comment__row-item--info'
-        el StringWithComponent,
-          mappings:
-            timeago: el(TimeWithTooltip, dateTime: @props.comment.editedAt, relative: true)
-            user: el UserLink, user: editor
-          pattern: trans('comments.edited')
-
-
-  renderOwnerBadge: (meta) =>
-    return null unless meta.owner_id? && @props.comment.userId == meta.owner_id
-
-    div className: 'comment__row-item',
-      div className: 'comment__owner-badge', meta.owner_title
-
-
-  renderPermalink: =>
-    div className: 'comment__row-item',
-      span
-        className: 'comment__action comment__action--permalink'
-        el ClickToCopy,
-          value: route('comments.show', comment: @props.comment.id)
-          label: trans 'common.buttons.permalink'
-          valueAsUrl: true
-
-
-  renderRepliesText: =>
-    return if @props.comment.repliesCount == 0
-
-    if !@state.expandReplies && @children.length == 0
-      callback = @loadReplies
-      label = trans('comments.load_replies')
-    else
-      callback = @toggleReplies
-      label = transChoice('comments.replies_count', @props.comment.repliesCount)
-
-    div className: 'comment__row-item comment__row-item--replies',
-      el ShowMoreLink,
-        direction: if @state.expandReplies then 'up' else 'down'
-        hasMore: true
-        label: label
-        callback: callback
-        modifiers: ['comment-replies']
-
-
-  renderRepliesToggle: =>
-    if @props.depth == 0 && @children.length > 0
-      div className: 'comment__float-container comment__float-container--right',
-        button
-          className: 'comment__top-show-replies'
-          type: 'button'
-          onClick: @toggleReplies
-          span className: "fas #{if @state.expandReplies then 'fa-angle-up' else 'fa-angle-down'}"
-
-
-  renderReplyBox: (commentableMeta) =>
-    if @state.showNewReply
-      div className: 'comment__reply-box',
-        el CommentEditor,
-          close: @closeNewReply
-          commentableMeta: commentableMeta
-          modifiers: @props.modifiers
-          onPosted: @handleReplyPosted
-          parent: @props.comment
-
-
-  renderReplyButton: =>
-    if !@props.comment.isDeleted
-      div className: 'comment__row-item',
-        button
-          type: 'button'
-          className: "comment__action #{if @state.showNewReply then 'comment__action--active' else ''}"
-          onClick: @toggleNewReply
-          trans('common.buttons.reply')
-
-
-  renderReport: =>
-    if @props.comment.canReport
-      div className: 'comment__row-item',
-        el ReportReportable,
-          className: 'comment__action'
-          reportableId: @props.comment.id
-          reportableType: 'comment'
-          user: @userFor(@props.comment)
-
-
-  renderRestore: =>
-    if @props.comment.isDeleted && @props.comment.canRestore
-      div className: 'comment__row-item',
-        button
-          type: 'button'
-          className: 'comment__action'
-          onClick: @restore
-          trans('common.buttons.restore')
-
-
-  renderToggleClipButton: =>
-    button
-      type: 'button'
-      className: 'comment__toggle-clip'
-      onClick: @toggleClip
-      if @state.clipped
-        trans('common.buttons.read_more')
-      else
-        trans('common.buttons.show_less')
-
-
-  renderUserAvatar: (user) =>
-    if user.id?
-      a
-        className: 'comment__avatar js-usercard'
-        'data-user-id': user.id
-        href: route('users.show', user: user.id)
-        el UserAvatar, user: user, modifiers: ['full-circle']
-    else
-      span
-        className: 'comment__avatar'
-        el UserAvatar, user: user, modifiers: ['full-circle']
-
-
-  renderUsername: (user) =>
-    if user.id?
-      a
-        'data-user-id': user.id
-        href: route('users.show', user: user.id)
-        className: 'js-usercard comment__row-item'
-        user.username
-    else
-      span
-        className: 'comment__row-item'
-        user.username
-
-
-  renderVoteButton: (inline = false) =>
-    hasVoted = @hasVoted()
-
-    className = classWithModifiers 'comment-vote',
-      @props.modifiers
-      disabled: !@props.comment.canVote
-      inline: inline
-      on: hasVoted
-      posting: @state.postingVote
-
-    hover = div className: 'comment-vote__hover', '+1' if !inline && !hasVoted
-
-    button
-      className: className
-      type: 'button'
-      onClick: @voteToggle
-      disabled: @state.postingVote || !@props.comment.canVote
-      span className: 'comment-vote__text',
-        "+#{formatNumberSuffixed(@props.comment.votesCount)}"
-      if @state.postingVote
-        span className: 'comment-vote__spinner', el Spinner
-      hover
-
-
-  renderCommentableMeta: (meta) =>
-    return unless @props.showCommentableMeta
-
-    if meta.url
-      component = a
-      params =
-        href: meta.url
-        className: 'comment__link'
-    else
-      component = span
-      params = null
-
-    div className: 'comment__commentable-meta',
-      if @props.comment.commentableType?
-        span className: 'comment__commentable-meta-type',
-          span className: 'comment__commentable-meta-icon fas fa-comment'
-          ' '
-          trans("comments.commentable_name.#{@props.comment.commentableType}")
-      component params,
-        meta.title
-
-
-  renderToolbar: =>
-    return unless @props.showToolbar
-
-    div className: 'comment__toolbar',
-      div className: 'sort',
-        div className: 'sort__items',
-          button
-            type: 'button'
-            className: 'sort__item sort__item--button'
-            onClick: @onShowDeletedToggleClick
-            span className: 'sort__item-icon',
-              span className: if core.userPreferences.get('comments_show_deleted') then 'fas fa-check-square' else 'far fa-square'
-            trans('common.buttons.show_deleted')
-
-
-  renderForceShowButton: =>
-    button
-      type: 'button'
-      className: 'comment__action'
-      onClick: @toggleForceShow
-      if !@state.forceShow then trans('users.blocks.show_comment') else trans('users.blocks.hide_comment')
-
-
-  renderForceShow: =>
-    if !@props.comment.isDeleted && @isBlocked
-      div className: 'comment__row-item',
-        @renderForceShowButton()
-
-
-  hasVoted: =>
-    store.userVotes.has(@props.comment.id)
-
-
-  delete: =>
-    return unless confirm(trans('common.confirmation'))
-
-    @xhr.delete?.abort()
-    @xhr.delete = $.ajax route('comments.destroy', comment: @props.comment.id),
-      method: 'DELETE'
-    .done (data) =>
-      $.publish 'comment:updated', data
-    .fail (xhr, status) =>
-      return if status == 'abort'
-
-      onError xhr
-
-
-  togglePinned: =>
-    return unless @props.comment.canPin
-
-    @xhr.pin?.abort()
-    @xhr.pin = $.ajax route('comments.pin', comment: @props.comment.id),
-      method: if @props.comment.pinned then 'DELETE' else 'POST'
-    .done (data) =>
-      $.publish 'comment:updated', data
-    .fail (xhr, status) =>
-      return if status == 'abort'
-
-      onError xhr
-
-
-  handleReplyPosted: (type) =>
-    @setState expandReplies: true if type == 'reply'
-
-
-  toggleEdit: =>
-    @setState editing: !@state.editing
-
-
-  closeEdit: =>
-    @setState editing: false
-
-
-  loadReplies: =>
-    @loadMoreRef.current?.load()
-    @toggleReplies()
-
-
-  onShowDeletedToggleClick: ->
-    core.userPreferences.set('comments_show_deleted', !core.userPreferences.get('comments_show_deleted'))
-
-
-  parentLink: (parent) =>
-    parentUser = @userFor(parent)
-    props = title: makePreview(parent, parentUser)
-
-    if @props.linkParent
-      component = a
-      props.href = route('comments.show', comment: parent.id)
-      props.className = 'comment__link'
-    else
-      component = span
-
-    component props,
-      span className: 'fas fa-reply'
-      ' '
-      parentUser.username
-
-
-  userFor: (comment) =>
-    user = userStore.get(comment.userId)?.toJson()
-
-    if user?
-      user
-    else if comment.legacyName?
-      username: comment.legacyName
-    else
-      deletedUser
-
-
-  restore: =>
-    @xhr.restore?.abort()
-    @xhr.restore = $.ajax route('comments.restore', comment: @props.comment.id),
-      method: 'POST'
-    .done (data) =>
-      $.publish 'comment:updated', data
-    .fail (xhr, status) =>
-      return if status == 'abort'
-
-      onError xhr
-
-
-  toggleNewReply: =>
-    @setState showNewReply: !@state.showNewReply
-
-
-  voteToggle: (e) =>
-    target = e.target
-
-    return if core.userLogin.showIfGuest(createClickCallback(target))
-
-    @setState postingVote: true
-
-    if @hasVoted()
-      method = 'DELETE'
-      storeMethod = 'removeUserVote'
-    else
-      method = 'POST'
-      storeMethod = 'addUserVote'
-
-    @xhr.vote?.abort()
-    @xhr.vote = $.ajax route('comments.vote', comment: @props.comment.id),
-      method: method
-    .always =>
-      @setState postingVote: false
-    .done (data) =>
-      $.publish 'comment:updated', data
-      store[storeMethod](@props.comment)
-
-    .fail (xhr, status) =>
-      return if status == 'abort'
-      return $(target).trigger('ajax:error', [xhr, status]) if xhr.status == 401
-
-      onError xhr
-
-
-  closeNewReply: =>
-    @setState showNewReply: false
-
-
-  toggleReplies: =>
-    @setState expandReplies: !@state.expandReplies
-
-
-  toggleClip: =>
-    @setState clipped: !@state.clipped
-
-
-  toggleForceShow: =>
-    @setState forceShow: !@state.forceShow

resources/js/components/comment.tsx

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import UserJson from 'interfaces/user-json';
+import { route } from 'laroute';
+import { truncate } from 'lodash';
+import { action, computed, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { Comment as CommentModel } from 'models/comment';
+import core from 'osu-core-singleton';
+import * as React from 'react';
+import { onError } from 'utils/ajax';
+import { classWithModifiers, Modifiers } from 'utils/css';
+import { estimateMinLines } from 'utils/estimate-min-lines';
+import { createClickCallback, formatNumberSuffixed, stripTags } from 'utils/html';
+import { trans, transChoice } from 'utils/lang';
+import ClickToCopy from './click-to-copy';
+import CommentEditor, { CommentEditMode } from './comment-editor';
+import CommentShowMore from './comment-show-more';
+import DeletedCommentsCount from './deleted-comments-count';
+import { ReportReportable } from './report-reportable';
+import ShowMoreLink from './show-more-link';
+import { Spinner } from './spinner';
+import StringWithComponent from './string-with-component';
+import TimeWithTooltip from './time-with-tooltip';
+import UserAvatar from './user-avatar';
+import UserLink from './user-link';
+
+const deletedUser = { username: trans('users.deleted') };
+const commentableMetaStore = core.dataStore.commentableMetaStore;
+const store = core.dataStore.commentStore;
+const userStore = core.dataStore.userStore;
+
+const uiState = core.dataStore.uiState;
+
+const clipLines = 7;
+const maxDepth = 6;
+
+interface Props {
+  comment: CommentModel;
+  depth: number;
+  expandReplies?: boolean;
+  linkParent: boolean;
+  modifiers: Modifiers;
+  showCommentableMeta: boolean;
+  showToolbar: boolean;
+}
+
+interface XhrCollection {
+  delete: JQuery.jqXHR<unknown>;
+  pin: JQuery.jqXHR<unknown>;
+  restore: JQuery.jqXHR<unknown>;
+  vote: JQuery.jqXHR<unknown>;
+}
+
+@observer
+export default class Comment extends React.Component<Props> {
+  static readonly defaultProps = {
+    linkParent: false,
+    showCommentableMeta: false,
+    showToolbar: false,
+  };
+
+  @observable private clipped = true;
+  @observable private editing = false;
+  @observable private expandReplies: boolean;
+  @observable private forceShow = false;
+  private readonly showMoreRef = React.createRef<CommentShowMore>();
+  @observable private showNewReply = false;
+  @observable private xhr: Partial<XhrCollection> = {};
+
+  private get hasVoted() {
+    return store.userVotes.has(this.props.comment.id);
+  }
+
+  @computed
+  private get isBlocked() {
+    return this.props.comment.userId != null && core.currentUserModel.blocks.has(this.props.comment.userId);
+  }
+
+  private get isLongContent() {
+    // Only clip if there are at least clipLines + 2 lines to ensure there are enough contents
+    // being clipped instead of just single lone line (or worse no more lines because of rounding up).
+    return this.lines != null && this.lines.count >= clipLines + 2;
+  }
+
+  @computed
+  private get lines() {
+    return estimateMinLines(this.props.comment.messageHtml ?? '');
+  }
+
+  @computed
+  private get meta() {
+    return commentableMetaStore.get(this.props.comment.commentableType, this.props.comment.commentableId);
+  }
+
+  @computed
+  private get parentComment() {
+    return this.props.comment.parentId == null
+      ? undefined
+      : store.comments.get(this.props.comment.parentId);
+  }
+
+  @computed
+  private get parentPreview() {
+    const comment = this.parentComment;
+
+    if (comment == null) {
+      throw new Error('trying to render parent preview without parent');
+    }
+
+    return comment.isDeleted
+      ? trans('comments.deleted')
+      : comment.userId != null && core.currentUserModel.blocks.has(comment.userId)
+        ? trans('users.blocks.comment_text')
+        : truncate(stripTags(comment.messageHtml ?? ''), { length: 100 });
+  }
+
+  private get postingVote() {
+    return this.xhr.vote != null;
+  }
+
+  @computed
+  private get replies() {
+    return uiState.getOrderedCommentsByParentId(this.props.comment.id) ?? [];
+  }
+
+  @computed
+  private get user() {
+    return this.getUser(this.props.comment.userId);
+  }
+
+  constructor(props: Props) {
+    super(props);
+
+    makeObservable(this);
+
+    if (core.windowSize.isMobile) {
+      // There's no indentation on mobile so don't expand by default otherwise it will be confusing.
+      this.expandReplies = false;
+    } else if (this.props.comment.isDeleted) {
+      this.expandReplies = false;
+    } else if (this.props.expandReplies != null) {
+      this.expandReplies = this.props.expandReplies;
+    } else {
+      const children = this.replies;
+      // Collapse if either no children is loaded, current level doesn't add indentation, or this comment is blocked.
+      this.expandReplies = children?.length > 0 && this.props.depth < maxDepth && !this.isBlocked;
+    }
+  }
+
+  componentWillUnmount() {
+    Object.values(this.xhr).forEach((xhr) => xhr?.abort());
+  }
+
+  render() {
+    return (
+      <div className={classWithModifiers(
+        'comment',
+        this.props.modifiers,
+        { top: this.props.depth === 0 },
+      )}>
+        {!this.props.comment.isDeleted && this.isBlocked && !this.forceShow
+          ? this.renderBlocked()
+          : this.renderMain()
+        }
+      </div>
+    );
+  }
+
+  private getUser(id: number | null | undefined): UserJson | { username: string } {
+    const user = id == null ? null : userStore.get(id)?.toJson();
+
+    return user == null
+      ? this.props.comment.legacyName == null
+        ? deletedUser
+        : { username: this.props.comment.legacyName }
+      : user;
+  }
+
+  @action
+  private readonly onCloseEdit = () => {
+    this.editing = false;
+  };
+
+  @action
+  private readonly onCloseReplyBox = () => {
+    this.showNewReply = false;
+  };
+
+  @action
+  private readonly onDelete = () => {
+    if (this.xhr.delete != null || !confirm(trans('common.confirmation'))) {
+      return;
+    }
+
+    this.xhr.delete = $.ajax(route('comments.destroy', { comment: this.props.comment.id }), { method: 'DELETE' });
+    this.xhr.delete.done((data) => {
+      $.publish('comment:updated', data);
+    })
+      .fail(onError)
+      .always(action(() => {
+        this.xhr.delete = undefined;
+      }));
+  };
+
+  private readonly onLoadReplies = () => {
+    this.showMoreRef.current?.load();
+    this.onToggleReplies();
+  };
+
+  @action
+  private readonly onReplyPosted = (type: CommentEditMode) => {
+    this.expandReplies = type === 'reply';
+  };
+
+  private readonly onRestore = () => {
+    if (this.xhr.restore != null) return;
+
+    this.xhr.restore = $.ajax(route('comments.restore', { comment: this.props.comment.id }), {
+      method: 'POST',
+    });
+    this.xhr.restore.done((data) => {
+      $.publish('comment:updated', data);
+    })
+      .fail(onError)
+      .always(action(() => {
+        this.xhr.restore = undefined;
+      }));
+  };
+
+  private readonly onShowDeletedToggleClick = () => {
+    core.userPreferences.set('comments_show_deleted', !core.userPreferences.get('comments_show_deleted'));
+  };
+
+  @action
+  private readonly onToggleClip = () => {
+    this.clipped = !this.clipped;
+  };
+
+  @action
+  private readonly onToggleEdit = () => {
+    this.editing = !this.editing;
+  };
+
+  @action
+  private readonly onToggleForceShow = () => {
+    this.forceShow = !this.forceShow;
+  };
+
+  @action
+  private readonly onToggleNewReply = () => {
+    this.showNewReply = !this.showNewReply;
+  };
+
+  @action
+  private readonly onTogglePinned = () => {
+    if (this.xhr.pin != null || !this.props.comment.canPin) {
+      return;
+    }
+
+    this.xhr.pin = $.ajax(route('comments.pin', { comment: this.props.comment.id }), {
+      method: this.props.comment.pinned ? 'DELETE' : 'POST',
+    });
+    this.xhr.pin.done((data) => {
+      $.publish('comment:updated', data);
+    })
+      .fail(onError)
+      .always(action(() => {
+        this.xhr.pin = undefined;
+      }));
+  };
+
+  @action
+  private readonly onToggleReplies = () => {
+    this.expandReplies = !this.expandReplies;
+  };
+
+  @action
+  private readonly onToggleVote = (e: React.MouseEvent<HTMLElement>) => {
+    const target = e.currentTarget;
+
+    if (this.postingVote || core.userLogin.showIfGuest(createClickCallback(target))) {
+      return;
+    }
+
+    let method: string;
+    let storeMethod: 'addUserVote' | 'removeUserVote';
+
+    if (this.hasVoted) {
+      method = 'DELETE';
+      storeMethod = 'removeUserVote';
+    } else {
+      method = 'POST';
+      storeMethod = 'addUserVote';
+    }
+
+    this.xhr.vote = $.ajax(route('comments.vote', { comment: this.props.comment.id }), { method });
+    this.xhr.vote
+      .done((data) => {
+        $.publish('comment:updated', data);
+        store[storeMethod](this.props.comment);
+      })
+      .fail(onError)
+      .always(action(() => {
+        this.xhr.vote = undefined;
+      }));
+  };
+
+  private renderBlocked() {
+    return (
+      <div className={classWithModifiers('comment__main', 'deleted')}>
+        <span
+          className={this.props.depth > 0 ? 'comment__avatar' : undefined}
+          style={{ height: 'auto' }}
+        />
+
+        <div className='comment__container'>
+          <div className='comment__message'>
+            <p className='osu-md osu-md--comment osu-md__paragraph'>
+              {trans('users.blocks.comment_text')}
+              {' '}
+              {this.renderForceShowButton()}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  private readonly renderComment = (sourceComment: CommentModel) => {
+    const comment = store.comments.get(sourceComment.id);
+
+    if (comment == null || (comment.isDeleted && !core.userPreferences.get('comments_show_deleted'))) {
+      return;
+    }
+
+    return (
+      <Comment
+        key={comment.id}
+        comment={comment}
+        depth={this.props.depth + 1}
+        expandReplies={this.props.expandReplies}
+        modifiers={this.props.modifiers}
+      />
+    );
+  };
+
+  private renderCommentableMeta() {
+    if (!this.props.showCommentableMeta) return;
+
+    const meta = this.meta;
+
+    if (meta == null) return;
+
+    return (
+      <div className='comment__commentable-meta'>
+        {this.props.comment.commentableType != null && (
+          <span className='comment__commentable-meta-type'>
+            <span className='comment__commentable-meta-icon fas fa-comment' />
+            {' '}
+            {trans(`comments.commentable_name.${this.props.comment.commentableType}`)}
+          </span>
+        )}
+        {'url' in meta
+          ? <a className='comment__link' href={meta.url}>{meta.title}</a>
+          : <span>{meta.title}</span>
+        }
+      </div>
+    );
+  }
+
+  private renderDelete() {
+    if (this.props.comment.isDeleted || !this.props.comment.canDelete) return;
+
+    return (
+      <div className='comment__row-item'>
+        <button
+          className='comment__action'
+          onClick={this.onDelete}
+          type='button'
+        >
+          {trans('common.buttons.delete')}
+        </button>
+      </div>
+    );
+  }
+
+  private renderDeletedBy() {
+    if (this.props.comment.deletedAt == null || !this.props.comment.canModerate) return;
+
+    return (
+      <div className='comment__row-item comment__row-item--info'>
+        <StringWithComponent
+          mappings={{
+            timeago: (
+              <TimeWithTooltip
+                dateTime={this.props.comment.deletedAt}
+                relative
+              />
+            ),
+            user: (
+              this.props.comment.deletedById == null
+                ? trans('comments.deleted_by_system')
+                : <UserLink user={userStore.get(this.props.comment.deletedById) ?? deletedUser} />
+            ),
+          }}
+          pattern={trans('comments.deleted_by')}
+        />
+      </div>
+    );
+  }
+
+  private renderEdit() {
+    if (!this.props.comment.canEdit) return;
+
+    return (
+      <div className='comment__row-item'>
+        <button
+          className={classWithModifiers('comment__action', { active: this.editing })}
+          onClick={this.onToggleEdit}
+          type='button'
+        >
+          {trans('common.buttons.edit')}
+        </button>
+      </div>
+    );
+  }
+
+  private renderEditedBy() {
+    if (this.props.comment.editedAt == null || this.props.comment.isDeleted) {
+      return;
+    }
+
+    return (
+      <div className='comment__row-item comment__row-item--info'>
+        <StringWithComponent
+          mappings={{
+            timeago: <TimeWithTooltip dateTime={this.props.comment.editedAt} relative />,
+            user: <UserLink user={this.getUser(this.props.comment.editedById)} />,
+          }}
+          pattern={trans('comments.edited')}
+        />
+      </div>
+    );
+  }
+
+  private renderFooter() {
+    return (
+      <div className='comment__row comment__row--footer'>
+        {this.props.comment.canHaveVote &&
+          <div className='comment__row-item visible-xs'>
+            {this.renderVoteButton(true)}
+          </div>
+        }
+
+        <div className='comment__row-item comment__row-item--info'>
+          <TimeWithTooltip dateTime={this.props.comment.createdAt} relative />
+        </div>
+
+        {this.renderPermalink()}
+        {this.renderReplyButton()}
+        {this.renderEdit()}
+        {this.renderRestore()}
+        {this.renderDelete()}
+        {this.renderPin()}
+        {this.renderReport()}
+        {this.renderEditedBy()}
+        {this.renderDeletedBy()}
+        {this.renderForceShow()}
+        {this.renderRepliesText()}
+      </div>
+    );
+  }
+
+  private renderForceShow() {
+    if (!this.isBlocked || this.props.comment.isDeleted) return;
+
+    return (
+      <div className='comment__row-item'>
+        {this.renderForceShowButton()}
+      </div>
+    );
+  }
+
+  private renderForceShowButton() {
+    return (
+      <button
+        className='comment__action'
+        onClick={this.onToggleForceShow}
+        type='button'
+      >
+        {this.forceShow
+          ? trans('users.blocks.hide_comment')
+          : trans('users.blocks.show_comment')
+        }
+      </button>
+    );
+  }
+
+  private renderMain() {
+    return (
+      <>
+        {this.renderRepliesToggle()}
+        {this.renderCommentableMeta()}
+        {this.renderToolbar()}
+
+        <div
+          className={classWithModifiers('comment__main', {
+            clip: this.clipped && this.isLongContent,
+            deleted: this.props.comment.isDeleted || this.isBlocked,
+          })}
+          style={{
+            '--clip-lines': clipLines,
+            '--line-height': this.lines == null ? undefined : `${this.lines.lineHeight}px`,
+          } as React.CSSProperties}
+        >
+          {this.props.comment.canHaveVote &&
+            <div className='comment__float-container comment__float-container--left hidden-xs'>
+              {this.renderVoteButton(false)}
+            </div>
+          }
+
+          {this.renderUserAvatar()}
+
+          <div className='comment__container'>
+            <div className='comment__row comment__row--header'>
+              {<UserLink className='comment__row-item' user={this.user} />}
+              {this.renderOwnerBadge()}
+
+              {this.props.comment.pinned &&
+                <span className='comment__row-item  comment__row-item--pinned'>
+                  <span className='fa fa-thumbtack' />
+                  {' '}
+                  {trans('comments.pinned')}
+                </span>
+              }
+
+              {this.renderParentLink()}
+
+              {this.props.comment.isDeleted &&
+                <span className='comment__row-item comment__row-item--deleted'>
+                  {trans('comments.deleted')}
+                </span>
+              }
+            </div>
+
+            {this.editing
+              ? <div className='comment__editor'>
+                <CommentEditor
+                  close={this.onCloseEdit}
+                  id={this.props.comment.id}
+                  message={this.props.comment.message}
+                  modifiers={this.props.modifiers}
+                />
+              </div>
+              : this.props.comment.messageHtml != null &&
+              <>
+                <div
+                  className='comment__message'
+                  dangerouslySetInnerHTML={{
+                    __html: this.props.comment.messageHtml,
+                  }}
+                />
+                {this.isLongContent && this.renderToggleClipButton()}
+              </>
+            }
+
+            {this.renderFooter()}
+
+            {this.renderReplyBox()}
+          </div>
+        </div>
+
+        {this.props.comment.repliesCount > 0 &&
+          <div className={classWithModifiers('comment__replies', {
+            hidden: !this.expandReplies,
+            indented: this.props.depth < maxDepth,
+          })}>
+            {this.replies.map(this.renderComment)}
+
+            <DeletedCommentsCount comments={this.replies} />
+
+            <CommentShowMore
+              ref={this.showMoreRef}
+              comments={this.replies}
+              label={this.replies.length === 0 ? trans('comments.load_replies') : undefined}
+              modifiers={this.props.modifiers}
+              parent={this.props.comment}
+              total={this.props.comment.repliesCount}
+            />
+          </div>
+        }
+      </>
+    );
+  }
+
+  private renderOwnerBadge() {
+    const meta = this.meta;
+
+    if (meta == null || !('owner_id' in meta) || meta.owner_id == null || this.props.comment.userId !== meta.owner_id) {
+      return;
+    }
+
+    return (
+      <div className='comment__row-item'>
+        <div className='comment__owner-badge'>{meta.owner_title}</div>
+      </div>
+    );
+  }
+
+  private renderParentLink() {
+    const parent = this.parentComment;
+
+    if (parent == null) return;
+
+    const parentUser = this.getUser(parent.userId);
+
+    const content = (
+      <>
+        <span className='fas fa-reply' />
+        {` ${parentUser.username}`}
+      </>
+    );
+
+    return (
+      <span className='comment__row-item comment__row-item--parent'>
+        {this.props.linkParent
+          ? (
+            <a
+              className='comment__link'
+              href={route('comments.show', { comment: parent.id })}
+              title={this.parentPreview}
+            >
+              {content}
+            </a>
+          ) : (
+            <span title={this.parentPreview}>{content}</span>
+          )}
+      </span>
+    );
+  }
+
+  private renderPermalink() {
+    return (
+      <div className='comment__row-item'>
+        <span className='comment__action comment__action--permalink'>
+          <ClickToCopy
+            label={trans('common.buttons.permalink')}
+            value={route('comments.show', { comment: this.props.comment.id })}
+            valueAsUrl
+          />
+        </span>
+      </div>
+    );
+  }
+
+  private renderPin() {
+    if (!this.props.comment.canPin) return;
+
+    return (
+      <div className='comment__row-item'>
+        <button
+          className='comment__action'
+          onClick={this.onTogglePinned}
+          type='button'
+        >
+          {trans(`common.buttons.${this.props.comment.pinned ? 'unpin' : 'pin'}`)}
+        </button>
+      </div>
+    );
+  }
+
+  private renderRepliesText() {
+    if (this.props.comment.repliesCount === 0) return;
+
+    let label: string;
+    let callback: () => void;
+
+    if (!this.expandReplies && this.replies.length === 0) {
+      callback = this.onLoadReplies;
+      label = trans('comments.load_replies');
+    } else {
+      callback = this.onToggleReplies;
+      label = transChoice('comments.replies_count', this.props.comment.repliesCount);
+    }
+
+    return (
+      <div className='comment__row-item comment__row-item--replies'>
+        <ShowMoreLink
+          callback={callback}
+          direction={this.expandReplies ? 'up' : 'down'}
+          hasMore
+          label={label}
+          modifiers='comment-replies'
+        />
+      </div>
+    );
+  }
+
+  private renderRepliesToggle() {
+    if (this.props.depth > 0 || this.replies.length === 0) return;
+
+    return (
+      <div className='comment__float-container comment__float-container--right'>
+        <button
+          className='comment__top-show-replies'
+          onClick={this.onToggleReplies}
+          type='button'
+        >
+          <span className={`fas ${this.expandReplies ? 'fa-angle-up' : 'fa-angle-down'}`} />
+        </button>
+      </div>
+    );
+  }
+
+  private renderReplyBox() {
+    if (!this.showNewReply) return;
+
+    return (
+      <div className='comment__reply-box'>
+        <CommentEditor
+          close={this.onCloseReplyBox}
+          commentableMeta={this.meta}
+          modifiers={this.props.modifiers}
+          onPosted={this.onReplyPosted}
+          parent={this.props.comment}
+        />
+      </div>
+    );
+  }
+
+  private renderReplyButton() {
+    if (this.props.comment.isDeleted) return;
+
+    return (
+      <div className='comment__row-item'>
+        <button
+          className={classWithModifiers('comment__action', { active: this.showNewReply })}
+          onClick={this.onToggleNewReply}
+          type='button'
+        >
+          {trans('common.buttons.reply')}
+        </button>
+      </div>
+    );
+  }
+
+  private renderReport() {
+    if (!this.props.comment.canReport) return;
+
+    return (
+      <div className='comment__row-item'>
+        <ReportReportable
+          className='comment__action'
+          reportableId={this.props.comment.id.toString()}
+          reportableType='comment'
+          user={this.user}
+        />
+      </div>
+    );
+  }
+
+  private renderRestore() {
+    if (!this.props.comment.isDeleted || !this.props.comment.canRestore) return;
+
+    return (
+      <div className='comment__row-item'>
+        <button
+          className='comment__action'
+          onClick={this.onRestore}
+          type='button'
+        >
+          {trans('common.buttons.restore')}
+        </button>
+      </div>
+    );
+  }
+
+  private renderToggleClipButton() {
+    return (
+      <button
+        className='comment__toggle-clip'
+        onClick={this.onToggleClip}
+        type='button'
+      >
+        {trans(`common.buttons.${this.clipped ? 'read_more' : 'show_less'}`)}
+      </button>
+    );
+  }
+
+  private renderToolbar() {
+    if (!this.props.showToolbar) return;
+
+    return (
+      <div className='comment__toolbar'>
+        <div className='sort'>
+          <div className='sort__items'>
+            <button
+              className='sort__item sort__item--button'
+              onClick={this.onShowDeletedToggleClick}
+              type='button'
+            >
+              <span className='sort__item-icon'>
+                <span className={core.userPreferences.get('comments_show_deleted')
+                  ?'fas fa-check-square'
+                  : 'far fa-square'
+                } />
+              </span>
+              {trans('common.buttons.show_deleted')}
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  private renderUserAvatar() {
+    const user = this.user;
+
+    return ('id' in user)
+      ? (
+        <a
+          className='comment__avatar js-usercard'
+          data-user-id={user.id}
+          href={route('users.show', { user: user.id })}
+        >
+          <UserAvatar modifiers='full-circle' user={user} />
+        </a>
+      ) : (
+        <span className='comment__avatar'>
+          <UserAvatar modifiers='full-circle' user={{ avatar_url: undefined, ...user }} />
+        </span>
+      );
+  }
+
+  private renderVoteButton(inline: boolean) {
+    const hasVoted = this.hasVoted;
+
+    const className = classWithModifiers('comment-vote',
+      this.props.modifiers,
+      {
+        disabled: !this.props.comment.canVote,
+        inline,
+        on: hasVoted,
+        posting: this.postingVote,
+      },
+    );
+
+    const hover = !inline && !hasVoted
+      ? <div className='comment-vote__hover'>+1</div>
+      : null;
+
+    return (
+      <button
+        className={className}
+        disabled={this.postingVote || !this.props.comment.canVote}
+        onClick={this.onToggleVote}
+        type='button'
+      >
+        <span className='comment-vote__text'>
+          +{formatNumberSuffixed(this.props.comment.votesCount)}
+        </span>
+        {this.postingVote &&
+          <span className='comment-vote__spinner'>
+            <Spinner />
+          </span>
+        }
+        {hover}
+      </button>
+    );
+  }
+}

resources/js/components/comments-manager.coffee

···
 
     return if uiState.comments.loadingFollow
 
-    uiState.comments.loadingFollow = true
+    runInAction ->
+      uiState.comments.loadingFollow = !uiState.comments.userFollow
 
     $.ajax route('follows.store'),
       data: params
       dataType: 'json'
       method: if uiState.comments.userFollow then 'DELETE' else 'POST'
     .always =>
-      uiState.comments.loadingFollow = false
+      runInAction ->
+        uiState.comments.loadingFollow = null
     .done =>
       uiState.comments.userFollow = !uiState.comments.userFollow
     .fail (xhr, status) =>

resources/js/components/comments-sort.coffee

···
-# Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
-# See the LICENCE file in the repository root for full licence text.
-
-import { Observer } from 'mobx-react'
-import core from 'osu-core-singleton'
-import * as React from 'react'
-import { button, div } from 'react-dom-factories'
-import { Sort } from './sort'
-
-el = React.createElement
-
-uiState = core.dataStore.uiState
-
-export class CommentsSort extends React.PureComponent
-  handleChange: (e) =>
-    $.publish 'comments:sort', sort: e.target.dataset.value
-
-
-  render: =>
-    el Observer, null, () =>
-      el Sort,
-        currentValue: uiState.comments.loadingSort ? uiState.comments.currentSort
-        modifiers: @props.modifiers
-        onChange: @handleChange
-        values: ['new', 'old', 'top']

resources/js/components/comments-sort.tsx

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import { observer } from 'mobx-react';
+import core from 'osu-core-singleton';
+import * as React from 'react';
+import type { Modifiers } from 'utils/css';
+import { Sort } from './sort';
+
+const uiState = core.dataStore.uiState;
+
+interface Props {
+  modifiers?: Modifiers;
+}
+
+@observer
+export default class CommentsSort extends React.Component<Props> {
+  render() {
+    return (
+      <Sort
+        currentValue={uiState.comments.loadingSort ?? uiState.comments.currentSort}
+        modifiers={this.props.modifiers}
+        onChange={this.handleChange}
+        values={['new', 'old', 'top']}
+      />
+    );
+  }
+
+  private handleChange(this: void, e: React.MouseEvent<HTMLButtonElement>) {
+    $.publish('comments:sort', { sort: e.currentTarget.dataset.value });
+  }
+}

resources/js/components/comments.coffee

···
-# Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
-# See the LICENCE file in the repository root for full licence text.
-
-import { Observer } from 'mobx-react'
-import core from 'osu-core-singleton'
-import * as React from 'react'
-import { button, div, h2, span } from 'react-dom-factories'
-import { classWithModifiers, mergeModifiers } from 'utils/css'
-import { formatNumber } from 'utils/html'
-import { trans } from 'utils/lang'
-import { Comment } from './comment'
-import CommentEditor from './comment-editor'
-import CommentShowMore from './comment-show-more'
-import { CommentsSort } from './comments-sort'
-import DeletedCommentsCount from './deleted-comments-count'
-import { Spinner } from './spinner'
-
-el = React.createElement
-
-store = core.dataStore.commentStore
-uiState = core.dataStore.uiState
-
-export class Comments extends React.PureComponent
-  render: =>
-    el Observer, null, () =>
-      # TODO: comments should be passed in as props?
-      comments = uiState.comments.topLevelCommentIds.map (id) -> store.comments.get(id)
-      pinnedComments = uiState.comments.pinnedCommentIds.map (id) -> store.comments.get(id)
-
-      div className: classWithModifiers('comments', @props.modifiers), id: 'comments',
-        h2 className: 'comments__title',
-          trans('comments.title')
-          span className: 'comments__count', formatNumber(uiState.comments.total)
-
-        if pinnedComments.length > 0
-          div className: "comments__items comments__items--pinned",
-            @renderComments pinnedComments, true
-
-        div className: 'comments__new',
-          el CommentEditor,
-            commentableMeta: @props.commentableMeta
-            focus: false
-            modifiers: @props.modifiers
-
-        div className: 'comments__items comments__items--toolbar',
-          el CommentsSort,
-            modifiers: @props.modifiers
-          div className: classWithModifiers('sort', @props.modifiers),
-            div className: 'sort__items',
-              @renderFollowToggle()
-              @renderShowDeletedToggle()
-
-        if comments.length > 0
-          div className: "comments__items #{if uiState.comments.loadingSort? then 'comments__items--loading' else ''}",
-            @renderComments comments, false
-
-            el DeletedCommentsCount, { comments, modifiers: 'top' }
-
-            el CommentShowMore,
-              commentableMeta: @props.commentableMeta
-              comments: comments
-              modifiers: mergeModifiers 'top', @props.modifiers
-              sort: uiState.comments.currentSort
-              top: true
-              total: uiState.comments.topLevelCount
-        else
-          div
-            className: 'comments__items comments__items--empty'
-            trans('comments.empty')
-
-
-  renderComment: (comment, pinned = false) =>
-    return null if comment.isDeleted && !core.userPreferences.get('comments_show_deleted')
-
-    el Comment,
-      key: comment.id
-      comment: comment
-      depth: 0
-      modifiers: @props.modifiers
-      expandReplies: if pinned then false else null
-
-
-  renderComments: (comments, pinned) =>
-    @renderComment(comment, pinned) for comment in comments when comment.pinned == pinned
-
-
-  renderShowDeletedToggle: =>
-    button
-      type: 'button'
-      className: 'sort__item sort__item--button'
-      onClick: @toggleShowDeleted
-      span className: 'sort__item-icon',
-        span className: if core.userPreferences.get('comments_show_deleted') then 'fas fa-check-square' else 'far fa-square'
-      trans('common.buttons.show_deleted')
-
-
-  renderFollowToggle: =>
-    if uiState.comments.userFollow
-      icon = 'fas fa-eye-slash'
-      label = trans('common.buttons.watch.to_0')
-    else
-      icon = 'fas fa-eye'
-      label = trans('common.buttons.watch.to_1')
-
-    iconEl =
-      if @props.loadingFollow
-        el Spinner, modifiers: ['center-inline']
-      else
-        span className: icon
-
-    button
-      type: 'button'
-      className: 'sort__item sort__item--button'
-      onClick: @toggleFollow
-      disabled: @props.loadingFollow
-      span className: 'sort__item-icon', iconEl
-      label
-
-
-  toggleShowDeleted: ->
-    core.userPreferences.set('comments_show_deleted', !core.userPreferences.get('comments_show_deleted'))
-
-
-  toggleFollow: ->
-    $.publish 'comments:toggle-follow'

resources/js/components/comments.tsx

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import { CommentableMetaJson } from 'interfaces/comment-json';
+import { computed, makeObservable } from 'mobx';
+import { observer } from 'mobx-react';
+import { Comment as CommentModel } from 'models/comment';
+import core from 'osu-core-singleton';
+import * as React from 'react';
+import { classWithModifiers, mergeModifiers, Modifiers } from 'utils/css';
+import { formatNumber } from 'utils/html';
+import { trans } from 'utils/lang';
+import Comment from './comment';
+import CommentEditor from './comment-editor';
+import CommentShowMore from './comment-show-more';
+import CommentsSort from './comments-sort';
+import DeletedCommentsCount from './deleted-comments-count';
+import { Spinner } from './spinner';
+
+const store = core.dataStore.commentStore;
+const uiState = core.dataStore.uiState;
+
+interface Props {
+  commentableMeta: CommentableMetaJson;
+  modifiers?: Modifiers;
+}
+
+@observer
+export default class Comments extends React.Component<Props> {
+  @computed
+  private get comments() {
+    const ret = [];
+    for (const id of uiState.comments.topLevelCommentIds) {
+      const comment = store.comments.get(id);
+
+      if (comment != null && !comment.pinned) {
+        ret.push(comment);
+      }
+    }
+
+    return ret;
+  }
+
+  @computed
+  private get pinnedComments() {
+    const ret = [];
+    for (const id of uiState.comments.pinnedCommentIds) {
+      const comment = store.comments.get(id);
+
+      if (comment != null) {
+        ret.push(comment);
+      }
+    }
+
+    return ret;
+  }
+
+  constructor(props: Props) {
+    super(props);
+
+    makeObservable(this);
+  }
+
+  render() {
+    const comments = this.comments;
+    const pinnedComments = this.pinnedComments;
+
+    return (
+      <div
+        className={classWithModifiers('comments', this.props.modifiers)}
+        id='comments'
+      >
+        <h2 className='comments__title'>
+          {trans('comments.title')}
+          <span className='comments__count'>{formatNumber(uiState.comments.total)}</span>
+        </h2>
+
+        {pinnedComments.length > 0 &&
+          <div className='comments__items comments__items--pinned'>
+            {this.renderComments(pinnedComments, true)}
+          </div>
+        }
+
+        <div className='comments__new'>
+          <CommentEditor
+            commentableMeta={this.props.commentableMeta}
+            focus={false}
+            modifiers={this.props.modifiers}
+          />
+        </div>
+
+        <div className='comments__items comments__items--toolbar'>
+          <CommentsSort modifiers={this.props.modifiers} />
+          <div className={classWithModifiers('sort', this.props.modifiers)}>
+            <div className='sort__items'>
+              {this.renderFollowToggle()}
+              {this.renderShowDeletedToggle()}
+            </div>
+          </div>
+        </div>
+
+        {comments.length === 0
+          ? (
+            <div className='comments__items comments__items--empty'>
+              {pinnedComments.length === 0 ? trans('comments.empty') : trans('comments.empty_other')}
+            </div>
+          ) : (
+            <div className={classWithModifiers('comments__items', { loading: uiState.comments.loadingSort != null })}>
+              {this.renderComments(comments, false)}
+
+              <DeletedCommentsCount comments={comments} modifiers='top' />
+
+              <CommentShowMore
+                commentableMeta={this.props.commentableMeta}
+                comments={comments}
+                modifiers={mergeModifiers('top', this.props.modifiers)}
+                top
+                total={uiState.comments.topLevelCount}
+              />
+            </div>
+          )}
+      </div>
+    );
+  }
+
+  private onToggleFollow(this: void) {
+    $.publish('comments:toggle-follow');
+  }
+
+  private onToggleShowDeleted(this: void) {
+    core.userPreferences.set('comments_show_deleted', !core.userPreferences.get('comments_show_deleted'));
+  }
+
+  private renderComment(comment: CommentModel, expandReplies?: boolean) {
+    if (comment.isDeleted && !core.userPreferences.get('comments_show_deleted')) {
+      return;
+    }
+
+    return (
+      <Comment
+        key={comment.id}
+        comment={comment}
+        depth={0}
+        expandReplies={expandReplies}
+        modifiers={this.props.modifiers}
+      />
+    );
+  }
+
+  private renderComments(comments: CommentModel[], pinned: boolean) {
+    const expandReplies = pinned ? false : undefined;
+
+    return comments.map((comment) => this.renderComment(comment, expandReplies));
+  }
+
+  private renderFollowToggle() {
+    let icon: React.ReactNode;
+    let label: string;
+
+    if (uiState.comments.loadingFollow != null) {
+      icon = <Spinner modifiers='center-inline' />;
+    }
+
+    if (uiState.comments.userFollow) {
+      icon ??= <span className='fas fa-eye-slash' />;
+      label = trans('common.buttons.watch.to_0');
+    } else {
+      icon ??= <span className='fas fa-eye' />;
+      label = trans('common.buttons.watch.to_1');
+    }
+
+    return (
+      <button
+        className='sort__item sort__item--button'
+        disabled={uiState.comments.loadingFollow != null}
+        onClick={this.onToggleFollow}
+        type='button'
+      >
+        <span className='sort__item-icon'>{icon}</span>
+        {label}
+      </button>
+    );
+  }
+
+  private renderShowDeletedToggle() {
+    const iconClass = core.userPreferences.get('comments_show_deleted')
+      ? 'fas fa-check-square'
+      : 'far fa-square';
+
+    return (
+      <button
+        className='sort__item sort__item--button'
+        onClick={this.onToggleShowDeleted}
+        type='button'
+      >
+        <span className='sort__item-icon'>
+          <span className={iconClass} />
+        </span>
+        {trans('common.buttons.show_deleted')}
+      </button>
+    );
+  }
+}

resources/js/components/deleted-comments-count.tsx

···
 
 import { Comment } from 'models/comment';
 import * as React from 'react';
-import { classWithModifiers } from 'utils/css';
+import { classWithModifiers, Modifiers } from 'utils/css';
 import { transChoice } from 'utils/lang';
 
 interface Props {
   comments: Comment[];
-  modifiers: string[] | undefined;
+  modifiers?: Modifiers;
 }
 
 export default class DeletedCommentsCount extends React.Component<Props> {

resources/js/components/sort.tsx

···
 
 import core from 'osu-core-singleton';
 import * as React from 'react';
-import { classWithModifiers } from 'utils/css';
+import { classWithModifiers, Modifiers } from 'utils/css';
 import { trans } from 'utils/lang';
 
 interface Props {
   currentValue: string;
-  modifiers?: string[];
+  modifiers?: Modifiers;
   onChange(event: React.MouseEvent<HTMLButtonElement>): void;
   showTitle?: boolean;
   title?: string;

resources/js/contest-voting/art-entry-list.coffee

···
 
     selected = new Set(@state.selected)
 
-    entries = @state.contest.entries.map (entry, index) =>
+    displayIndex = -1
+    entries = @state.contest.entries.map (entry) =>
       isSelected = selected.has(entry.id)
 
       return null if @state.showVotedOnly && !isSelected
 
       el ArtEntry,
-        key: index,
+        key: entry.id,
         contest: @state.contest,
-        displayIndex: index,
+        displayIndex: ++displayIndex,
         entry: entry,
         isSelected: isSelected
         options: @state.options,

resources/js/core/react-turbolinks.ts

···
 import { removeLeftoverPortalContainers } from 'components/portal';
 import TurbolinksReload from 'core/turbolinks-reload';
 import { runInAction } from 'mobx';
+import OsuCore from 'osu-core';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { currentUrl } from 'utils/turbolinks';
···
   private scrolled = false;
   private timeoutScroll?: number;
 
-  constructor(private turbolinksReload: TurbolinksReload) {
+  constructor(private core: OsuCore, private turbolinksReload: TurbolinksReload) {
     $(document).on('turbolinks:before-cache', this.handleBeforeCache);
     $(document).on('turbolinks:before-visit', this.handleBeforeVisit);
     $(document).on('turbolinks:load', this.handleLoad);
···
     this.setNewUrl();
     this.pageReady = true;
     removeLeftoverPortalContainers();
+    this.core.updateCurrentUser();
     this.loadScripts(false);
     this.boot();
   };

resources/js/entrypoints/account-edit.tsx

···
 
 import { ClientJson } from 'interfaces/client-json';
 import { OwnClientJson } from 'interfaces/own-client-json';
+import LegacyApiKey from 'legacy-api-key';
+import LegacyIrcKey from 'legacy-irc-key';
 import { AuthorizedClients } from 'oauth/authorized-clients';
 import { OwnClients } from 'oauth/own-clients';
 import core from 'osu-core-singleton';
···
 
   return <AuthorizedClients />;
 });
+
+core.reactTurbolinks.register('legacy-api-key', (container: HTMLElement) => (
+  <LegacyApiKey container={container} />
+));
+
+core.reactTurbolinks.register('legacy-irc-key', (container: HTMLElement) => (
+  <LegacyIrcKey container={container} />
+));
 
 core.reactTurbolinks.register('own-clients', () => {
   const json = parseJsonNullable<OwnClientJson[]>('json-own-clients', true);

resources/js/entrypoints/comments-index.coffee

···
 # Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
 # See the LICENCE file in the repository root for full licence text.
 
-import { Main } from 'comments-index/main'
+import CommentsIndex from 'comments-index'
 import { CommentsManager } from 'components/comments-manager'
 import core from 'osu-core-singleton'
 import { createElement } from 'react'
···
   core.dataStore.uiState.initializeWithCommentBundleJson(commentBundle)
 
   createElement CommentsManager,
-    component: Main
+    component: CommentsIndex
     user: commentBundle.user

resources/js/entrypoints/comments-show.coffee

···
 # Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
 # See the LICENCE file in the repository root for full licence text.
 
-import { Main } from 'comments-show/main'
+import CommentsShow from 'comments-show'
 import { CommentsManager } from 'components/comments-manager'
 import core from 'osu-core-singleton'
 import { createElement } from 'react'
···
   core.dataStore.uiState.initializeWithCommentBundleJson(commentBundle)
 
   createElement CommentsManager,
-    component: Main
+    component: CommentsShow

resources/js/interfaces/beatmapset-discussion-post-responses.ts

···
 // Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
-import { BeatmapsetWithDiscussionsJson } from './beatmapset-json';
+import BeatmapsetWithDiscussionsJson from 'interfaces/beatmapset-with-discussions-json';
 
 export interface BeatmapsetDiscussionPostStoreResponseJson {
   beatmap_discussion_id: number;

resources/js/interfaces/beatmapset-json.ts

···
   can_delete: boolean;
   can_edit_metadata: boolean;
   can_edit_offset: boolean;
+  can_edit_tags: boolean;
   can_hype: boolean;
   can_hype_reason: string;
   can_love: boolean;
   can_remove_from_loved: boolean;
   is_watching: boolean;
-  new_hype_time: string;
+  new_hype_time: string | null;
   nomination_modes: Partial<Record<GameMode, 'full' | 'limited'>>;
   remaining_hype: number;
 }
···
 
 type BeatmapsetJson = BeatmapsetJsonDefaultAttributes & Partial<BeatmapsetJsonAvailableIncludes>;
 export default BeatmapsetJson;
-
-type DiscussionsRequiredAttributes = 'beatmaps' | 'current_user_attributes' | 'discussions' | 'events' | 'nominations' | 'related_users';
-export type BeatmapsetWithDiscussionsJson = BeatmapsetJson & Required<Pick<BeatmapsetJson, DiscussionsRequiredAttributes>>;

resources/js/interfaces/beatmapset-with-discussions-json.ts

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import BeatmapsetExtendedJson from './beatmapset-extended-json';
+
+type DiscussionsRequiredAttributes = 'beatmaps' | 'current_user_attributes' | 'discussions' | 'events' | 'nominations' | 'related_users';
+type BeatmapsetWithDiscussionsJson = BeatmapsetExtendedJson & Required<Pick<BeatmapsetExtendedJson, DiscussionsRequiredAttributes>>;
+
+export default BeatmapsetWithDiscussionsJson;

resources/js/interfaces/legacy-api-key-json.ts

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+export default interface LegacyApiKeyJson {
+  api_key: string;
+  app_name: string;
+  app_url: string;
+}

resources/js/interfaces/legacy-irc-key-json.ts

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+export default interface LegacyIrcKeyJson {
+  token: string;
+}

resources/js/legacy-api-key/controller.ts

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import LegacyApiKeyJson from 'interfaces/legacy-api-key-json';
+import { route } from 'laroute';
+import { action, makeObservable, observable, reaction, runInAction } from 'mobx';
+import { onError } from 'utils/ajax';
+
+interface State {
+  legacy_api_key: LegacyApiKeyJson | null;
+  showing_form: boolean;
+}
+
+type DatasetState = Partial<State> & Required<Pick<State, 'legacy_api_key'>>;
+
+export default class Controller {
+  @observable state;
+  private stateSyncDisposer;
+  @observable private xhrCreate?: JQuery.jqXHR<LegacyApiKeyJson>;
+  @observable private xhrDelete?: JQuery.jqXHR<void>;
+
+  get isCreating() {
+    return this.xhrCreate != null;
+  }
+
+  get isDeleting() {
+    return this.xhrDelete != null;
+  }
+
+  get key() {
+    return this.state.legacy_api_key;
+  }
+
+  constructor(private container: HTMLElement) {
+    this.state = {
+      ...JSON.parse(container.dataset.state ?? '') as DatasetState,
+      showing_form: false,
+    };
+
+    makeObservable(this);
+
+    this.stateSyncDisposer = reaction(
+      () => JSON.stringify(this.state),
+      (stateString) => this.container.dataset.state = stateString,
+    );
+  }
+
+  @action
+  createKey(appName: string, appUrl: string) {
+    this.xhrCreate = $.ajax(route('legacy-api-key.store'), {
+      data: {
+        legacy_api_key: {
+          app_name: appName,
+          app_url: appUrl,
+        },
+      },
+      method: 'POST',
+    });
+    this.xhrCreate
+      .done((json) => runInAction(() => {
+        this.state.legacy_api_key = json;
+      })).always(action(() => {
+        this.xhrCreate = undefined;
+      }));
+
+    return this.xhrCreate;
+  }
+
+  @action
+  deleteKey() {
+    this.xhrDelete = $.ajax(route('legacy-api-key.destroy'), { method: 'DELETE' })
+      .fail(onError)
+      .done(action(() => {
+        this.state.legacy_api_key = null;
+      })).always(action(() => {
+        this.xhrDelete = undefined;
+      }));
+  }
+
+  destroy() {
+    this.xhrCreate?.abort();
+    this.xhrDelete?.abort();
+    this.stateSyncDisposer();
+  }
+}

resources/js/legacy-api-key/details.tsx

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import BigButton from 'components/big-button';
+import StringWithComponent from 'components/string-with-component';
+import { action, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { trans } from 'utils/lang';
+import Controller from './controller';
+
+const docsUrl = 'https://github.com/ppy/osu-api/wiki';
+
+interface Props {
+  controller: Controller;
+}
+
+@observer
+export default class Details extends React.Component<Props> {
+  @observable private keyVisible = false;
+
+  constructor(props: Props) {
+    super(props);
+
+    makeObservable(this);
+  }
+
+  render() {
+    const key = this.props.controller.key;
+
+    if (key == null) {
+      throw new Error('rendering Key component with no key available');
+    }
+
+    return (
+      <div className='legacy-api-details'>
+        <div className='legacy-api-details__content'>
+          <div className='legacy-api-details__entry'>
+            <div className='legacy-api-details__label'>
+              {trans('model_validation.legacy_api_key.attributes.app_name')}
+            </div>
+            <div className='legacy-api-details__value'>
+              {key.app_name}
+            </div>
+          </div>
+          <div className='legacy-api-details__entry'>
+            <div className='legacy-api-details__label'>
+              {trans('model_validation.legacy_api_key.attributes.app_url')}
+            </div>
+            <div className='legacy-api-details__value'>
+              {key.app_url}
+            </div>
+          </div>
+          <div className='legacy-api-details__entry'>
+            <div className='legacy-api-details__label'>
+              {trans('model_validation.legacy_api_key.attributes.api_key')}
+            </div>
+            <div className='legacy-api-details__value'>
+              {this.keyVisible ? key.api_key : '***'}
+            </div>
+          </div>
+          <div className='legacy-api-details__entry'>
+            <div className='legacy-api-details__value'>
+              <div>
+                {trans('legacy_api_key.warning.line1')}<br />
+                {trans('legacy_api_key.warning.line2')}<br />
+                {trans('legacy_api_key.warning.line3')}
+              </div>
+            </div>
+          </div>
+          <div className='legacy-api-details__entry'>
+            <div className='legacy-api-details__value'>
+              <StringWithComponent
+                mappings={{ github: (
+                  <a href={docsUrl}>
+                    {trans('legacy_api_key.docs.github')}
+                  </a>
+                ) }}
+                pattern={trans('legacy_api_key.docs._')}
+              />
+            </div>
+          </div>
+        </div>
+        <div className='legacy-api-details__actions'>
+          <BigButton
+            icon={this.keyVisible ? 'fas fa-eye-slash' : 'fas fa-eye'}
+            modifiers={['account-edit', 'settings-oauth']}
+            props={{
+              onClick: this.onClickToggleKeyVisibility,
+            }}
+            text={trans(`legacy_api_key.view.${this.keyVisible ? 'hide' : 'show'}`)}
+          />
+          <BigButton
+            icon='fas fa-trash'
+            isBusy={this.props.controller.isDeleting}
+            modifiers={['account-edit', 'danger', 'settings-oauth']}
+            props={{
+              onClick: this.deleteClicked,
+            }}
+            text={trans('legacy_api_key.view.delete')}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  private readonly deleteClicked = () => {
+    if (!confirm(trans('common.confirmation'))) return;
+
+    this.props.controller.deleteKey();
+  };
+
+  @action
+  private readonly onClickToggleKeyVisibility = () => {
+    this.keyVisible = !this.keyVisible;
+  };
+}

resources/js/legacy-api-key/form.tsx

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import { Spinner } from 'components/spinner';
+import StringWithComponent from 'components/string-with-component';
+import { ValidatingInput } from 'components/validating-input';
+import { FormErrors } from 'form-errors';
+import { action, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { trans } from 'utils/lang';
+import Controller from './controller';
+
+interface Props {
+  controller: Controller;
+}
+
+@observer
+export default class Form extends React.Component<Props> {
+  @observable private appName = '';
+  @observable private appUrl = '';
+  private errors = new FormErrors();
+
+  constructor(props: Props) {
+    super(props);
+
+    makeObservable(this);
+  }
+
+  @action
+  readonly onCancelClick = () => {
+    if (this.appUrl !== '' || this.appName !== '') {
+      if (!confirm(trans('common.confirmation'))) return;
+    }
+
+    this.props.controller.state.showing_form = false;
+  };
+
+  render() {
+    return (
+      <div className='oauth-client-details'>
+        <div className='oauth-client-details__header'>
+          {trans('legacy_api_key.new')}
+        </div>
+
+        <form className='oauth-client-details__content'>
+          <label className='oauth-client-details__group'>
+            <div className='oauth-client-details__label'>{trans('model_validation.legacy_api_key.attributes.app_name')}</div>
+            <ValidatingInput
+              blockName='oauth-client-details'
+              errors={this.errors}
+              name='legacy_api_key[app_name]'
+              onInput={this.onAppNameInput}
+              required
+              value={this.appName}
+            />
+          </label>
+
+          <label className='oauth-client-details__group'>
+            <div className='oauth-client-details__label'>{trans('model_validation.legacy_api_key.attributes.app_url')}</div>
+            <ValidatingInput
+              blockName='oauth-client-details'
+              errors={this.errors}
+              name='legacy_api_key[app_url]'
+              onInput={this.onAppUrlInput}
+              required
+              type='url'
+              value={this.appUrl}
+            />
+          </label>
+
+          <div>
+            <StringWithComponent
+              mappings={{ link: (
+                <a href={`${process.env.DOCS_URL}#terms-of-use`}>
+                  {trans('oauth.new_client.terms_of_use.link')}
+                </a>
+              ) }}
+              pattern={trans('oauth.new_client.terms_of_use._')}
+            />
+          </div>
+
+          <div className='oauth-client-details__buttons'>
+            <button className='btn-osu-big' onClick={this.onSubmit}>
+              {this.props.controller.isCreating ? <Spinner /> : trans('legacy_api_key.form.create')}
+            </button>
+            <button className='btn-osu-big' onClick={this.onCancelClick} type='button'>{trans('common.buttons.cancel')}</button>
+          </div>
+        </form>
+      </div>
+    );
+  }
+
+  @action
+  private readonly onAppNameInput = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    this.appName = e.currentTarget.value;
+  };
+
+  @action
+  private readonly onAppUrlInput = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    this.appUrl = e.currentTarget.value;
+  };
+
+  @action
+  private readonly onSubmit = (e: React.SyntheticEvent) => {
+    e.preventDefault();
+
+    if (this.props.controller.isCreating) {
+      return;
+    }
+
+    this.props.controller.createKey(this.appName, this.appUrl)
+      .fail(this.errors.handleResponse)
+      .done(action(() => {
+        this.props.controller.state.showing_form = false;
+      }));
+  };
+}

resources/js/legacy-api-key/index.tsx

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import BigButton from 'components/big-button';
+import Modal from 'components/modal';
+import { action, makeObservable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { trans } from 'utils/lang';
+import Controller from './controller';
+import Details from './details';
+import Form from './form';
+
+interface Props {
+  container: HTMLElement;
+}
+
+@observer
+export default class LegacyApiKey extends React.Component<Props> {
+  private controller;
+  private readonly formRef = React.createRef<Form>();
+
+  constructor(props: Props) {
+    super(props);
+
+    this.controller = new Controller(this.props.container);
+
+    makeObservable(this);
+  }
+
+  componentWillUnmount() {
+    this.controller.destroy();
+  }
+
+  render() {
+    return this.controller.key == null ? this.renderEmpty() : this.renderDetails();
+  }
+
+  private readonly onModalClose = () => {
+    this.formRef.current?.onCancelClick();
+  };
+
+  @action
+  private readonly onNewKeyClick = () => {
+    this.controller.state.showing_form = true;
+  };
+
+  private renderDetails() {
+    return <Details controller={this.controller} />;
+  }
+
+  private renderEmpty() {
+    return (
+      <>
+        <p>
+          {trans('legacy_api_key.none')}
+        </p>
+        <div>
+          <BigButton
+            icon='fas fa-plus'
+            props={{
+              onClick: this.onNewKeyClick,
+            }}
+            text={trans('legacy_api_key.new')}
+          />
+        </div>
+        {this.renderForm()}
+      </>
+    );
+  }
+
+  private renderForm() {
+    if (!this.controller.state.showing_form) {
+      return null;
+    }
+
+    return (
+      <Modal onClose={this.onModalClose}>
+        <Form ref={this.formRef} controller={this.controller} />
+      </Modal>
+    );
+  }
+}

resources/js/legacy-irc-key/controller.ts

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import LegacyIrcKeyJson from 'interfaces/legacy-irc-key-json';
+import { route } from 'laroute';
+import { action, makeObservable, observable, reaction, runInAction } from 'mobx';
+import { onError } from 'utils/ajax';
+
+interface State {
+  legacy_irc_key: LegacyIrcKeyJson | null;
+}
+
+export default class Controller {
+  @observable state;
+  private stateSyncDisposer;
+  @observable private xhrCreate?: JQuery.jqXHR<LegacyIrcKeyJson>;
+  @observable private xhrDelete?: JQuery.jqXHR<void>;
+
+  get isCreating() {
+    return this.xhrCreate != null;
+  }
+
+  get isDeleting() {
+    return this.xhrDelete != null;
+  }
+
+  get key() {
+    return this.state.legacy_irc_key;
+  }
+
+  constructor(private container: HTMLElement) {
+    this.state = JSON.parse(container.dataset.state ?? '') as State;
+
+    makeObservable(this);
+
+    this.stateSyncDisposer = reaction(
+      () => JSON.stringify(this.state),
+      (stateString) => this.container.dataset.state = stateString,
+    );
+  }
+
+  @action
+  createKey() {
+    this.xhrCreate = $.ajax(route('legacy-irc-key.store'), {
+      method: 'POST',
+    });
+    this.xhrCreate
+      .done((json) => runInAction(() => {
+        this.state.legacy_irc_key = json;
+      })).always(action(() => {
+        this.xhrCreate = undefined;
+      }));
+
+    return this.xhrCreate;
+  }
+
+  @action
+  deleteKey() {
+    this.xhrDelete = $.ajax(route('legacy-irc-key.destroy'), { method: 'DELETE' })
+      .fail(onError)
+      .done(action(() => {
+        this.state.legacy_irc_key = null;
+      })).always(action(() => {
+        this.xhrDelete = undefined;
+      }));
+  }
+
+  destroy() {
+    this.xhrCreate?.abort();
+    this.xhrDelete?.abort();
+    this.stateSyncDisposer();
+  }
+}

resources/js/legacy-irc-key/details.tsx

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import BigButton from 'components/big-button';
+import { action, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import core from 'osu-core-singleton';
+import * as React from 'react';
+import { trans } from 'utils/lang';
+import Controller from './controller';
+
+const serverHost = 'irc.ppy.sh';
+const serverPort = '6667';
+
+interface Props {
+  controller: Controller;
+}
+
+@observer
+export default class Details extends React.Component<Props> {
+  @observable private keyVisible = false;
+
+  constructor(props: Props) {
+    super(props);
+
+    makeObservable(this);
+  }
+
+  render() {
+    const key = this.props.controller.key;
+
+    if (key == null) {
+      throw new Error('rendering Details component with no key available');
+    }
+
+    const user = core.currentUser;
+
+    if (user == null) {
+      throw new Error('rendering Details component with no current user available');
+    }
+
+    return (
+      <div className='legacy-api-details'>
+        <div className='legacy-api-details__content'>
+          <div className='legacy-api-details__entry'>
+            <div className='legacy-api-details__label'>
+              {trans('legacy_irc_key.form.server_host')}
+            </div>
+            <div className='legacy-api-details__value'>
+              {serverHost}
+            </div>
+          </div>
+          <div className='legacy-api-details__entry'>
+            <div className='legacy-api-details__label'>
+              {trans('legacy_irc_key.form.server_port')}
+            </div>
+            <div className='legacy-api-details__value'>
+              {serverPort}
+            </div>
+          </div>
+          <div className='legacy-api-details__entry'>
+            <div className='legacy-api-details__label'>
+              {trans('legacy_irc_key.form.username')}
+            </div>
+            <div className='legacy-api-details__value'>
+              {user.username}
+            </div>
+          </div>
+          <div className='legacy-api-details__entry'>
+            <div className='legacy-api-details__label'>
+              {trans('legacy_irc_key.form.token')}
+            </div>
+            <div className='legacy-api-details__value'>
+              {this.keyVisible ? key.token : '***'}
+            </div>
+          </div>
+        </div>
+        <div className='legacy-api-details__actions'>
+          <BigButton
+            icon={this.keyVisible ? 'fas fa-eye-slash' : 'fas fa-eye'}
+            modifiers={['account-edit', 'settings-oauth']}
+            props={{
+              onClick: this.onClickToggleKeyVisibility,
+            }}
+            text={trans(`legacy_irc_key.view.${this.keyVisible ? 'hide' : 'show'}`)}
+          />
+          <BigButton
+            icon='fas fa-trash'
+            isBusy={this.props.controller.isDeleting}
+            modifiers={['account-edit', 'danger', 'settings-oauth']}
+            props={{
+              onClick: this.deleteClicked,
+            }}
+            text={trans('legacy_irc_key.view.delete')}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  private readonly deleteClicked = () => {
+    if (!confirm(trans('common.confirmation'))) return;
+
+    this.props.controller.deleteKey();
+  };
+
+  @action
+  private readonly onClickToggleKeyVisibility = () => {
+    this.keyVisible = !this.keyVisible;
+  };
+}

resources/js/legacy-irc-key/index.tsx

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import BigButton from 'components/big-button';
+import { action, makeObservable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { trans } from 'utils/lang';
+import Controller from './controller';
+import Details from './details';
+
+interface Props {
+  container: HTMLElement;
+}
+
+@observer
+export default class LegacyIrcKey extends React.Component<Props> {
+  private controller;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.controller = new Controller(this.props.container);
+
+    makeObservable(this);
+  }
+
+  componentWillUnmount() {
+    this.controller.destroy();
+  }
+
+  render() {
+    return this.controller.key == null ? this.renderEmpty() : this.renderDetails();
+  }
+
+  @action
+  private readonly onNewKeyClick = () => {
+    if (!confirm(trans('legacy_irc_key.confirm_new'))) return;
+
+    this.controller.createKey();
+  };
+
+  private renderDetails() {
+    return <Details controller={this.controller} />;
+  }
+
+  private renderEmpty() {
+    return (
+      <>
+        <p>
+          {trans('legacy_irc_key.none')}
+        </p>
+        <div>
+          <BigButton
+            icon='fas fa-plus'
+            props={{
+              onClick: this.onNewKeyClick,
+            }}
+            text={trans('legacy_irc_key.new')}
+          />
+        </div>
+      </>
+    );
+  }
+}

resources/js/models/oauth/own-client.ts

···
 
 import { OwnClientJson } from 'interfaces/own-client-json';
 import { route } from 'laroute';
-import { action, makeObservable, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { Client } from 'models/oauth/client';
 
 export class OwnClient extends Client {
   @observable isResetting = false;
   @observable isUpdating = false;
-  @observable redirect: string;
   secret: string;
 
+  @observable private redirectOrig: string;
+
+  @computed
+  get redirect() {
+    return this.redirectOrig.replace(/,/g, '\r\n');
+  }
+
   constructor(client: OwnClientJson) {
     super(client);
 
-    this.redirect = client.redirect;
+    this.redirectOrig = client.redirect;
     this.secret = client.secret;
 
     makeObservable(this);
···
     this.scopes = new Set(json.scopes);
     this.userId = json.user_id;
     this.user = json.user;
-    this.redirect = json.redirect;
+    this.redirectOrig = json.redirect;
     this.secret = json.secret;
   }
 
   @action
-  updateWith(partial: Partial<OwnClient>) {
+  updateWith(partial: Partial<OwnClientJson>) {
     const { redirect } = partial;
     this.isUpdating = true;
 

resources/js/news-show/main.tsx

···
 // See the LICENCE file in the repository root for full licence text.
 
 import AdminMenu from 'components/admin-menu';
-import { Comments } from 'components/comments';
+import Comments from 'components/comments';
 import { CommentsManager } from 'components/comments-manager';
 import NewsHeader from 'components/news-header';
 import StringWithComponent from 'components/string-with-component';

resources/js/oauth/authorized-client.tsx

···
         </div>
         <div>
           <BigButton
-            disabled={client.isRevoking || client.revoked}
+            disabled={client.revoked}
             icon={client.revoked ? 'fas fa-ban' : 'fas fa-trash'}
             isBusy={client.isRevoking}
             modifiers={['account-edit', 'danger', 'settings-oauth']}

resources/js/oauth/client-details.tsx

···
 // See the LICENCE file in the repository root for full licence text.
 
 import { Spinner } from 'components/spinner';
-import { ValidatingInput } from 'components/validating-input';
 import { FormErrors } from 'form-errors';
-import { action, makeObservable } from 'mobx';
+import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { OwnClient as Client } from 'models/oauth/own-client';
 import core from 'osu-core-singleton';
 import * as React from 'react';
+import TextareaAutosize from 'react-autosize-textarea';
 import { onError } from 'utils/ajax';
+import { classWithModifiers } from 'utils/css';
 import { trans } from 'utils/lang';
 
 const uiState = core.dataStore.uiState;
···
 
 @observer
 export class ClientDetails extends React.Component<Props, State> {
-  state: Readonly<State> = {
-    isSecretVisible: false,
-    redirect: this.props.client.redirect,
-  };
-
-  private errors = new FormErrors();
+  private readonly errors = new FormErrors();
+  @observable private isSecretVisible = false;
+  @observable private redirect = this.props.client.redirect.replace(/,/g, '\r\n');
 
   constructor(props: Props) {
     super(props);
···
     makeObservable(this);
   }
 
-  @action
-  handleClose = () => {
-    uiState.account.client = null;
-  };
-
-  @action
-  handleDelete = () => {
-    if (this.props.client.isRevoking) return;
-    if (!confirm(trans('oauth.own_clients.confirm_delete'))) return;
-
-    this.props.client.delete().then(action(() => {
-      uiState.account.client = null;
-    }));
-  };
-
-  @action
-  handleInputChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
-    const target = event.target as HTMLInputElement;
-    const { name, value } = target;
-
-    this.setState({
-      [name]: value,
-    });
-  };
-
-  @action
-  handleReset = () => {
-    if (!confirm(trans('oauth.own_clients.confirm_reset'))) return;
-    if (this.props.client.isResetting) return;
-
-    this.props.client.resetSecret()
-      .done(() => this.setState({ isSecretVisible: true }))
-      .fail(onError);
-  };
-
-  @action
-  handleToggleSecret = () => {
-    this.setState({ isSecretVisible: !this.state.isSecretVisible });
-  };
-
-  @action
-  handleUpdate = () => {
-    if (this.props.client.isUpdating) return;
-    this.props.client.updateWith(this.state).then(() => {
-      this.errors.clear();
-    }).catch(this.errors.handleResponse);
-  };
-
   render() {
     return (
       <div className='oauth-client-details'>
···
           <div className='oauth-client-details__label'>{trans('oauth.client.secret')}</div>
           <div>
             {
-              this.state.isSecretVisible
+              this.isSecretVisible
                 ? this.props.client.secret
                 : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
             }
···
               onClick={this.handleToggleSecret}
               type='button'
             >
-              {trans(`oauth.client.secret_visible.${this.state.isSecretVisible}`)}
+              {trans(`oauth.client.secret_visible.${this.isSecretVisible}`)}
             </button>
             <button
               className='btn-osu-big btn-osu-big--danger'
···
         </div>
 
         <label className='oauth-client-details__group'>
-          <div className='oauth-client-details__label'>{trans('oauth.client.redirect')}</div>
-          <ValidatingInput
-            blockName='oauth-client-details'
-            errors={this.errors}
+          <div className='oauth-client-details__label'>
+            {trans('oauth.client.redirect')}
+          </div>
+          <TextareaAutosize
+            async
+            className={classWithModifiers(
+              'oauth-client-details__input',
+              'textarea',
+              { 'has-error': (this.errors.get('redirect') ?? []).length > 0 },
+            )}
             name='redirect'
-            onChange={this.handleInputChange}
-            type='text'
-            value={this.state.redirect}
+            onChange={this.handleOnChangeRedirect}
+            value={this.redirect}
           />
+          {(this.errors.get('redirect') ?? []).map((message, index) => (
+            <div key={index} className='oauth-client-details__error'>
+              {message}
+            </div>
+          ))}
         </label>
 
         <div className='oauth-client-details__buttons'>
···
       </div>
     );
   }
+
+  @action
+  private readonly handleClose = () => {
+    uiState.account.client = null;
+  };
+
+  @action
+  private readonly handleDelete = () => {
+    if (this.props.client.isRevoking) return;
+    if (!confirm(trans('oauth.own_clients.confirm_delete'))) return;
+
+    this.props.client.delete().then(action(() => {
+      uiState.account.client = null;
+    }));
+  };
+
+  @action
+  private readonly handleOnChangeRedirect = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    this.redirect = event.currentTarget.value;
+  };
+
+  @action
+  private readonly handleReset = () => {
+    if (!confirm(trans('oauth.own_clients.confirm_reset'))) return;
+    if (this.props.client.isResetting) return;
+
+    this.props.client.resetSecret()
+      .done(action(() => {
+        this.isSecretVisible = true;
+      }))
+      .fail(onError);
+  };
+
+  @action
+  private readonly handleToggleSecret = () => {
+    this.isSecretVisible = !this.isSecretVisible;
+  };
+
+  @action
+  private readonly handleUpdate = () => {
+    if (this.props.client.isUpdating) return;
+    this.props.client.updateWith({ redirect: this.redirect }).then(() => {
+      this.errors.clear();
+    }).catch(this.errors.handleResponse);
+  };
 }

resources/js/oauth/new-client.tsx

···
 import { observer } from 'mobx-react';
 import core from 'osu-core-singleton';
 import * as React from 'react';
+import TextareaAutosize from 'react-autosize-textarea';
+import { classWithModifiers } from 'utils/css';
 import { trans } from 'utils/lang';
 
 const store = core.dataStore.ownClientStore;
···
         <form autoComplete='off' className='oauth-client-details__content'>
           {this.renderRemainingErrors()}
 
-          {NewClient.inputFields.map((name) => (
-            <label key={name} className='oauth-client-details__group'>
-              <div className='oauth-client-details__label'>{trans(`oauth.client.${name}`)}</div>
-              <ValidatingInput
-                blockName='oauth-client-details'
-                errors={this.errors}
-                name={name}
-                onInput={this.handleInput}
-                type='text'
-                value={this.params[name]}
-              />
-            </label>
-          ))}
+          <label className='oauth-client-details__group'>
+            <div className='oauth-client-details__label'>
+              {trans('oauth.client.name')}
+            </div>
+            <ValidatingInput
+              blockName='oauth-client-details'
+              errors={this.errors}
+              name='name'
+              onChange={this.handleOnChangeName}
+              type='text'
+              value={this.params.name}
+            />
+          </label>
+
+          <label className='oauth-client-details__group'>
+            <div className='oauth-client-details__label'>
+              {trans('oauth.client.redirect')}
+            </div>
+            <TextareaAutosize
+              async
+              className={classWithModifiers(
+                'oauth-client-details__input',
+                'textarea',
+                { 'has-error': (this.errors.get('redirect') ?? []).length > 0 },
+              )}
+              name='redirect'
+              onChange={this.handleOnChangeRedirect}
+              value={this.params.redirect}
+            />
+            {(this.errors.get('redirect') ?? []).map((message, index) => (
+              <div key={index} className='oauth-client-details__error'>
+                {message}
+              </div>
+            ))}
+          </label>
 
           <div>
             <StringWithComponent
···
   };
 
   @action
-  private readonly handleInput = (event: React.SyntheticEvent<HTMLInputElement>) => {
-    const target = event.currentTarget;
-    const { name, value } = target;
+  private readonly handleOnChangeName = (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.params.name = event.currentTarget.value;
+  };
 
-    if (name === 'name' || name === 'redirect') {
-      this.params[name] = value;
-    }
+  @action
+  private readonly handleOnChangeRedirect = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    this.params.redirect = event.currentTarget.value;
   };
 
   @action

resources/js/oauth/own-client.tsx

···
 import core from 'osu-core-singleton';
 import * as React from 'react';
 import { onError } from 'utils/ajax';
+import { formatNumber } from 'utils/html';
 import { trans } from 'utils/lang';
 
 const uiState = core.dataStore.uiState;
···
 
   render() {
     const client = this.props.client;
+    const redirects = client.redirect.split('\r\n');
 
     return (
       <div className='oauth-client'>
         <button className='oauth-client__details oauth-client__details--button' onClick={this.showClientDetails}>
           <div className='oauth-client__name'>{client.name}</div>
-          <div className='oauth-client__redirect'>{client.redirect}</div>
+          <div className='oauth-client__redirect'>
+            {redirects[0]}
+            {' '}
+            {redirects.length > 1 ? <small>(+{formatNumber(redirects.length - 1)})</small> : null}
+          </div>
         </button>
         <div className='oauth-client__actions'>
           <BigButton
···
             text={trans('common.buttons.edit')}
           />
           <BigButton
-            disabled={client.isRevoking || client.revoked}
+            disabled={client.revoked}
             icon={client.revoked ? 'fas fa-ban' : 'fas fa-trash'}
             isBusy={client.isRevoking}
             modifiers={['account-edit', 'danger', 'settings-oauth']}

resources/js/osu-core.ts

···
 import NotificationsWorker from 'notifications/worker';
 import SocketWorker from 'socket-worker';
 import RootDataStore from 'stores/root-data-store';
+import { parseJsonNullable } from 'utils/json';
 
 // will this replace main.coffee eventually?
 export default class OsuCore {
-  beatmapsetSearchController: BeatmapsetSearchController;
-  readonly captcha = new Captcha();
-  readonly chatWorker = new ChatWorker();
-  readonly clickMenu = new ClickMenu();
+  readonly beatmapsetSearchController;
+  readonly captcha;
+  readonly chatWorker;
+  readonly clickMenu;
   @observable currentUser?: CurrentUserJson;
-  readonly currentUserModel = new UserModel(this);
-  dataStore: RootDataStore;
-  readonly enchant: Enchant;
-  readonly forumPoll = new ForumPoll();
-  readonly forumPostEdit = new ForumPostEdit();
-  readonly forumPostInput = new ForumPostInput();
-  readonly forumPostReport = new ForumPostReport();
-  readonly localtime = new Localtime();
-  readonly mobileToggle = new MobileToggle();
-  notificationsWorker: NotificationsWorker;
-  readonly osuAudio: OsuAudio;
-  readonly reactTurbolinks: ReactTurbolinks;
-  readonly referenceLinkTooltip = new ReferenceLinkTooltip();
-  readonly scorePins = new ScorePins();
-  @observable scrolling = false;
-  socketWorker: SocketWorker;
-  readonly stickyHeader = new StickyHeader();
-  readonly timeago = new Timeago();
-  readonly turbolinksReload = new TurbolinksReload();
-  readonly userLogin: UserLogin;
-  userLoginObserver: UserLoginObserver;
-  readonly userPreferences = new UserPreferences();
-  readonly userVerification = new UserVerification();
-  windowFocusObserver: WindowFocusObserver;
-  readonly windowSize = new WindowSize();
+  readonly currentUserModel;
+  readonly dataStore;
+  readonly enchant;
+  readonly forumPoll;
+  readonly forumPostEdit;
+  readonly forumPostInput;
+  readonly forumPostReport;
+  readonly localtime;
+  readonly mobileToggle;
+  readonly notificationsWorker;
+  readonly osuAudio;
+  readonly reactTurbolinks;
+  readonly referenceLinkTooltip;
+  readonly scorePins;
+  readonly socketWorker;
+  readonly stickyHeader;
+  readonly timeago;
+  readonly turbolinksReload;
+  readonly userLogin;
+  readonly userLoginObserver;
+  readonly userPreferences;
+  readonly userVerification;
+  readonly windowFocusObserver;
+  readonly windowSize;
 
   @computed
   get currentUserOrFail() {
···
   }
 
   constructor() {
-    // refresh current user on page reload (and initial page load)
-    $(document).on('turbolinks:load.osu-core', this.onPageLoad);
+    // Set current user on first page load. Further updates are done in
+    // reactTurbolinks before the new page is rendered.
+    // This needs to be fired before everything else (turbolinks:load etc).
+    const isLoading = document.readyState === 'loading';
+    if (isLoading) {
+      document.addEventListener('DOMContentLoaded', this.updateCurrentUser);
+    }
     $.subscribe('user:update', this.onCurrentUserUpdate);
 
+    this.captcha = new Captcha();
+    this.chatWorker = new ChatWorker();
+    this.clickMenu = new ClickMenu();
+    this.currentUserModel = new UserModel(this);
+    this.forumPoll = new ForumPoll();
+    this.forumPostEdit = new ForumPostEdit();
+    this.forumPostInput = new ForumPostInput();
+    this.forumPostReport = new ForumPostReport();
+    this.localtime = new Localtime();
+    this.mobileToggle = new MobileToggle();
+    this.referenceLinkTooltip = new ReferenceLinkTooltip();
+    this.scorePins = new ScorePins();
+    this.stickyHeader = new StickyHeader();
+    this.timeago = new Timeago();
+    this.turbolinksReload = new TurbolinksReload();
+    this.userPreferences = new UserPreferences();
+    this.userVerification = new UserVerification();
+    this.windowSize = new WindowSize();
+
     this.enchant = new Enchant(this.turbolinksReload);
     this.osuAudio = new OsuAudio(this.userPreferences);
-    this.reactTurbolinks = new ReactTurbolinks(this.turbolinksReload);
+    this.reactTurbolinks = new ReactTurbolinks(this, this.turbolinksReload);
     this.userLogin = new UserLogin(this.captcha);
     // should probably figure how to conditionally or lazy initialize these so they don't all init when not needed.
     // TODO: requires dynamic imports to lazy load modules.
···
     this.notificationsWorker = new NotificationsWorker(this.socketWorker);
 
     makeObservable(this);
+
+    if (!isLoading) {
+      this.updateCurrentUser();
+    }
   }
 
-  private onCurrentUserUpdate = (event: unknown, user: CurrentUserJson) => {
-    this.setCurrentUser(user);
+  readonly updateCurrentUser = () => {
+    // Remove from DOM so only new data is parsed on navigation.
+    const currentUser = parseJsonNullable<typeof window.currentUser>('json-current-user', true);
+
+    if (currentUser != null) {
+      window.currentUser = currentUser;
+      this.setCurrentUser(window.currentUser);
+    }
   };
 
-  private onPageLoad = () => {
-    this.setCurrentUser(window.currentUser);
+  private readonly onCurrentUserUpdate = (event: unknown, user: CurrentUserJson) => {
+    this.setCurrentUser(user);
   };
 
   @action
-  private setCurrentUser = (userOrEmpty: typeof window.currentUser) => {
+  private readonly setCurrentUser = (userOrEmpty: typeof window.currentUser) => {
     const user = userOrEmpty.id == null ? undefined : userOrEmpty;
 
     if (user != null) {

resources/js/register-components.tsx

···
 import BeatmapsetEvents, { Props as BeatmapsetEventsProps } from 'components/beatmapset-events';
 import BlockButton from 'components/block-button';
 import ChatIcon from 'components/chat-icon';
-import { Comments } from 'components/comments';
+import Comments from 'components/comments';
 import { CommentsManager, Props as CommentsManagerProps } from 'components/comments-manager';
 import CountdownTimer from 'components/countdown-timer';
 import { LandingNews } from 'components/landing-news';

resources/js/utils/ajax.ts

···
 };
 
 export const fileuploadFailCallback = (event: unknown, data: JQueryFileUploadDone) => {
-  error(data.jqXHR, data.textStatus, () => data.submit?.());
+  error(data.jqXHR, data.textStatus, () => {
+    data.submit?.();
+  });
 };
 
 export function isJqXHR(obj: unknown): obj is JQuery.jqXHR {

resources/js/utils/beatmapset-discussion-helper.ts

···
 import BeatmapsetDiscussionJson, { BeatmapsetDiscussionJsonForBundle, BeatmapsetDiscussionJsonForShow } from 'interfaces/beatmapset-discussion-json';
 import BeatmapsetDiscussionPostJson from 'interfaces/beatmapset-discussion-post-json';
 import BeatmapsetJson from 'interfaces/beatmapset-json';
+import GameMode from 'interfaces/game-mode';
 import UserJson from 'interfaces/user-json';
 import { route } from 'laroute';
 import { assign, padStart, sortBy } from 'lodash';
···
     && discussion.timestamp != null
     && nearbyDiscussionsMessageTypes.has(discussion.message_type)
     && (discussion.user_id !== core.currentUserOrFail.id || moment(discussion.updated_at).diff(moment(), 'hour') <= -24);
+}
+
+export function isUserFullNominator(user?: UserJson | null, gameMode?: GameMode) {
+  return user != null && user.groups != null && user.groups.some((group) => {
+    if (gameMode != null) {
+      return (group.identifier === 'bng' || group.identifier === 'nat') && group.playmodes?.includes(gameMode);
+    } else {
+      return (group.identifier === 'bng' || group.identifier === 'nat');
+    }
+  });
 }
 
 export function linkTimestamp(text: string, classNames: string[] = []) {

resources/js/utils/json.ts

···
  * @param remove true to remove the element after parsing; false, otherwise.
  */
 export function parseJsonNullable<T>(id: string, remove = false): T | undefined {
-  const element = window.newBody?.querySelector(`#${id}`);
+  const element = (window.newBody ?? document.body).querySelector(`#${id}`);
   if (!(element instanceof HTMLScriptElement)) return undefined;
   const json = JSON.parse(element.text) as T;
 

resources/js/utils/url.ts

···
   return el.outerHTML;
 }
 
+// Default url transformer changes non-conforming url to javascript:void(0)
+// which causes warning from React.
+export function safeReactMarkdownUrl(url: string | undefined) {
+  if (url !== 'javascript:void(0)') {
+    return url;
+  }
+}
+
 export function updateQueryString(url: string | null, params: Record<string, string | null | undefined>, hash?: string) {
   const docUrl = currentUrl();
   const urlObj = new URL(url ?? docUrl.href, docUrl.origin);

resources/lang/en/accounts.php

···
             'title' => 'Email',
         ],
 
+        'legacy_api' => [
+            'api' => 'api',
+            'irc' => 'irc',
+            'title' => 'Legacy API',
+        ],
+
         'password' => [
             'current' => 'current password',
             'new' => 'new password',

resources/lang/en/beatmappacks.php

···
         'artist' => 'Artist/Album',
         'chart' => 'Spotlights',
         'featured' => 'Featured Artist',
+        'loved' => 'Project Loved',
         'standard' => 'Standard',
         'theme' => 'Theme',
         'tournament' => 'Tournament',

resources/lang/en/beatmaps.php

···
     ],
 
     'nominations' => [
+        'already_nominated' => 'You\'ve already nominated this beatmap.',
+        'cannot_nominate' => 'You cannot nominate this beatmap game mode.',
         'delete' => 'Delete',
         'delete_own_confirm' => 'Are you sure? The beatmap will be deleted and you will be redirected back to your profile.',
         'delete_other_confirm' => 'Are you sure? The beatmap will be deleted and you will be redirected back to the user\'s profile.',

resources/lang/en/comments.php

···
     'edited' => 'edited :timeago by :user',
     'pinned' => 'pinned',
     'empty' => 'No comments yet.',
+    'empty_other' => 'No other comments yet.',
     'load_replies' => 'load replies',
     'replies_count' => ':count_delimited reply|:count_delimited replies',
     'title' => 'Comments',

resources/lang/en/legacy_api_key.php

···
+<?php
+
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+return [
+    'new' => 'New Legacy API Key',
+    'none' => 'No key.',
+
+    'docs' => [
+        '_' => 'Documentation is available at :github.',
+        'github' => 'GitHub',
+    ],
+
+    'form' => [
+        'create' => 'Create Key',
+    ],
+
+    'view' => [
+        'hide' => 'Hide Key',
+        'show' => 'Show Key',
+        'delete' => 'Delete',
+    ],
+
+    'warning' => [
+        'line1' => 'Do not give this out to others.',
+        'line2' => "It's equivalent to giving out your password.",
+        'line3' => 'Your account may be compromised.',
+    ],
+];

resources/lang/en/legacy_irc_key.php

···
+<?php
+
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+return [
+    'confirm_new' => 'Create new IRC password?',
+    'new' => 'New Legacy IRC Password',
+    'none' => 'IRC Password not set.',
+
+    'form' => [
+        'server_host' => 'server',
+        'server_port' => 'port',
+        'token' => 'server password',
+        'username' => 'username',
+    ],
+
+    'view' => [
+        'hide' => 'Hide Password',
+        'show' => 'Show Password',
+        'delete' => 'Delete',
+    ],
+];

resources/lang/en/model_validation.php

···
 
     'legacy_api_key' => [
         'exists' => 'Only one API key is provided per user for the moment.',
+
+        'attributes' => [
+            'api_key' => 'api key',
+            'app_name' => 'application name',
+            'app_url' => 'application url',
+        ],
     ],
 
     'oauth' => [
         'client' => [
             'too_many' => 'Exceeded maximum number of allowed OAuth applications.',
-            'url' => 'Please enter a valid URL.',
+            'url' => 'Please enter valid URLs.',
 
             'attributes' => [
                 'name' => 'Application Name',
···
 
     'user_report' => [
         'no_ranked_beatmapset' => 'Ranked beatmaps cannot be reported',
+        'not_in_channel' => 'You\'re not in this channel.',
         'reason_not_valid' => ':reason is not valid for this report type.',
         'self' => "You can't report yourself!",
     ],

resources/lang/en/oauth.php

···
     'client' => [
         'id' => 'Client ID',
         'name' => 'Application Name',
-        'redirect' => 'Application Callback URL',
+        'redirect' => 'Application Callback URLs',
         'reset' => 'Reset client secret',
         'reset_failed' => 'Failed to reset client secret',
         'secret' => 'Client Secret',

resources/views/accounts/_edit_legacy_api.blade.php

···
+{{--
+    Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+    See the LICENCE file in the repository root for full licence text.
+--}}
+<div class="account-edit">
+    <div class="account-edit__section">
+        <h2 class="account-edit__section-title">
+            {{ osu_trans('accounts.edit.legacy_api.title') }}
+        </h2>
+    </div>
+
+    <div class="account-edit__input-groups">
+        <div class="account-edit__input-group">
+            <div class="account-edit-entry">
+                <div class="account-edit-entry__label account-edit-entry__label--top-pinned">{{ osu_trans('accounts.edit.legacy_api.api') }}</div>
+                <div class="account-edit__input-groups">
+                    <div
+                        class="js-react--legacy-api-key"
+                        data-state="{{ json_encode(['legacy_api_key' => $legacyApiKeyJson]) }}"
+                    ></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="account-edit__input-group">
+            <div class="account-edit-entry">
+                <div class="account-edit-entry__label account-edit-entry__label--top-pinned">{{ osu_trans('accounts.edit.legacy_api.irc') }}</div>
+                <div class="account-edit__input-groups">
+                    <div
+                        class="js-react--legacy-irc-key"
+                        data-state="{{ json_encode(['legacy_irc_key' => $legacyIrcKeyJson]) }}"
+                    ></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

resources/views/accounts/edit.blade.php

···
     <div class="osu-page" id="oauth">
         @include('accounts._edit_oauth')
     </div>
+
+    <div class="osu-page" id="legacy-api">
+        @include('accounts._edit_legacy_api')
+    </div>
 @endsection
 
 @section("script")

resources/views/comments/index.blade.php

···
 --}}
 @extends('master')
 
+@php
+    $commentBundleJson = $commentBundle->toArray();
+
+    $links = [
+        [
+            'title' => osu_trans('comments.index.nav_title'),
+            'url' => route('comments.index'),
+        ],
+    ];
+
+    $userJson = $commentBundleJson['user'] ?? null;
+    if ($userJson !== null) {
+        $links[] = [
+            'title' => $userJson['username'],
+            'url' => route('users.show', ['user' => $userJson['id']]),
+        ];
+        $links[] = [
+            'title' => osu_trans('comments.index.nav_comments'),
+            'url' => route('comments.index', ['user_id' => $userJson['id']]),
+        ];
+    }
+@endphp
+
 @section('content')
-    <div class="js-react--comments-index osu-layout osu-layout--full"></div>
+    @include('layout._page_header_v4', ['params' => [
+        'links' => $links,
+        'linksBreadcrumb' => true,
+        'theme' => 'comments',
+    ]])
+    <div class="osu-page osu-page--comments">
+        <div class="js-react--comments-index u-contents"></div>
 
-    {{-- temporary pagination to be used by react component above --}}
-    <div class="hidden">
-        <div class="js-comments-pagination">
-            @include('objects._pagination_v2', ['object' => $commentPagination])
-        </div>
+        @include('objects._pagination_v2', ['object' => $commentPagination])
     </div>
 
     <script id="json-index" type="application/json">
-        {!! json_encode($commentBundle->toArray()) !!}
+        {!! json_encode($commentBundleJson) !!}
     </script>
     @include('layout._react_js', ['src' => 'js/comments-index.js'])
 @endsection

resources/views/comments/show.blade.php

···
 --}}
 @extends('master')
 
+@php
+    $json = $commentBundle->toArray();
+    $commentJson = $json['comments'][0];
+@endphp
+
 @section('content')
-    <div class="js-react--comments-show osu-layout osu-layout--full"></div>
+    @include('layout._page_header_v4', ['params' => [
+        'links' => [
+            [
+                'title' => trans('comments.index.nav_title'),
+                'url' => route('comments.index'),
+            ],
+            [
+                'title' => trans('comments.show.nav_title'),
+                'url' => route('comments.show', ['comment' => $commentJson['id']]),
+            ],
+        ],
+        'linksBreadcrumb' => true,
+        'theme' => 'comments',
+    ]])
+
+    <div class="osu-page osu-page--comment">
+        <div class="js-react--comments-show u-contents"></div>
+    </div>
 
     <script id="json-show" type="application/json">
-        {!! json_encode($commentBundle->toArray()) !!}
+        {!! json_encode($json) !!}
     </script>
 
     @include('layout._react_js', ['src' => 'js/comments-show.js'])

resources/views/layout/_current_user.blade.php

···
         ? '{}'
         : json_encode(json_item($user, new App\Transformers\CurrentUserTransformer()));
 @endphp
-<script class="js-current-user">
-    var currentUser = {!! $userJson !!};
-    // self-destruct to avoid rerun by turbolinks
-    $('.js-current-user').remove();
+<script id="json-current-user" type="application/json">
+    {!! $userJson !!}
 </script>

tests/Browser/SanityTest.php

···
                         continue;
                     }
                 }
+            } elseif ($line['message'] === "security - Error with Permissions-Policy header: Unrecognized feature: 'ch-ua-form-factor'.") {
+                // we don't use ch-ua-* crap and this error is thrown by youtube.com as of 2023-05-16
+                continue;
             }
 
             $return[] = $line;

tests/Controllers/BeatmapsetsControllerTest.php

···
      */
     public function testBeatmapsetUpdateMetadataAsProjectLoved(string $state): void
     {
-        $owner = User::factory()->create();
         $beatmapset = Beatmapset::factory()->create([
             'approved' => Beatmapset::STATES[$state],
-            'user_id' => $owner,
+            'user_id' => User::factory(),
         ]);
+        $owner = $beatmapset->user;
         $newGenre = Genre::factory()->create();
         $newLanguage = Language::factory()->create();
 
···
     {
         $beatmapset = Beatmapset::factory()->create([
             'approved' => Beatmapset::STATES['ranked'],
+            'user_id' => User::factory(),
         ]);
 
         $user = $userGroupOrOwner === 'owner'
···
         $this->assertSame($expectedOffset, $beatmapset->offset);
     }
 
+    /**
+     * @dataProvider dataProviderForTestBeatmapsetUpdateTags
+     */
+    public function testBeatmapsetUpdateTags(string $userGroupOrOwner, bool $ok): void
+    {
+        $beatmapset = Beatmapset::factory()->create([
+            'approved' => Beatmapset::STATES['ranked'],
+            'user_id' => User::factory(),
+        ]);
+
+        $user = $userGroupOrOwner === 'owner'
+            ? $beatmapset->user
+            : User::factory()->withGroup($userGroupOrOwner)->create();
+
+        $newTags = "{$beatmapset->tags} more_tag";
+        $expectedTags = $ok ? $newTags : $beatmapset->tags;
+
+        $this->expectCountChange(fn () => BeatmapsetEvent::count(), $ok ? 1 : 0);
+
+        $this->actingAsVerified($user)
+            ->put(route('beatmapsets.update', ['beatmapset' => $beatmapset->getKey()]), [
+                'beatmapset' => [
+                    'tags' => $newTags,
+                ],
+            ])->assertStatus($ok ? 200 : 403);
+
+        $this->assertSame($expectedTags, $beatmapset->fresh()->tags);
+    }
+
     public function beatmapsetStatesDataProvider()
     {
         return array_map(function ($state) {
···
             ['default', false],
             ['gmt', false],
             ['nat', false],
+            ['owner', false],
+        ];
+    }
+
+    public function dataProviderForTestBeatmapsetUpdateTags(): array
+    {
+        return [
+            ['admin', true],
+            ['bng', false],
+            ['default', false],
+            ['gmt', true],
+            ['nat', true],
             ['owner', false],
         ];
     }

tests/Controllers/Chat/ChannelsControllerTest.php

···
 use App\Models\Chat\Message;
 use App\Models\Multiplayer\Score;
 use App\Models\User;
-use Faker;
 use Illuminate\Testing\AssertableJsonString;
 use Illuminate\Testing\Fluent\AssertableJson;
 use Tests\TestCase;
 
 class ChannelsControllerTest extends TestCase
 {
-    protected static $faker;
-
     private User $user;
     private User $anotherUser;
     private Channel $pmChannel;
     private Channel $privateChannel;
     private Channel $publicChannel;
     private Message $publicMessage;
-
-    public static function setUpBeforeClass(): void
-    {
-        self::$faker = Faker\Factory::create();
-    }
 
     //region GET /chat/channels - Get Channel List
     public function testChannelIndexWhenGuest()

tests/Models/UserReportTest.php

···
 use App\Models\BeatmapDiscussion;
 use App\Models\BeatmapDiscussionPost;
 use App\Models\Beatmapset;
+use App\Models\Chat\Channel;
 use App\Models\Chat\Message;
 use App\Models\Forum;
 use App\Models\Traits\ReportableInterface;
···
             $userColumn = 'poster_id';
         }
 
+        if ($class === Message::class) {
+            $modelFactory = $modelFactory->state([
+                'channel_id' => Channel::factory()->type('public'),
+            ]);
+        }
+
         return $class === User::class
             ? $modelFactory->create()
             : $modelFactory->create([$userColumn => User::factory()]);
···
         $beatmapset->reportBy($reporter, static::reportParams());
     }
 
+    public function testCannotReportIfNotInChannel()
+    {
+        $channel = Channel::factory()->type('pm')->create();
+        $message = Message::factory()->create(['channel_id' => $channel, 'user_id' => $channel->users()->first()]);
+        $reporter = User::factory()->create();
+
+        $this->expectException(ValidationException::class);
+        $message->reportBy($reporter, static::reportParams());
+    }
+
     /**
      * @dataProvider reportableClasses
      */
···
     {
         $reportable = static::makeReportable($class);
         $reporter = User::factory()->create();
+
         $report = $reportable->reportBy($reporter, static::reportParams());
 
         $report->routeNotificationForSlack(null);

tests/karma/utils/beatmapset-discussion-helper.spec.ts

···
 // See the LICENCE file in the repository root for full licence text.
 
 import BeatmapsetDiscussionJson from 'interfaces/beatmapset-discussion-json';
+import GameMode from 'interfaces/game-mode';
+import UserGroupJson from 'interfaces/user-group-json';
+import UserJson from 'interfaces/user-json';
 import User from 'models/user';
 import * as moment from 'moment';
-import { discussionMode, maxLengthTimeline, nearbyDiscussions, validMessageLength } from 'utils/beatmapset-discussion-helper';
+import { discussionMode, isUserFullNominator, maxLengthTimeline, nearbyDiscussions, validMessageLength } from 'utils/beatmapset-discussion-helper';
+
+interface TestCase<T> {
+  description: string;
+  expected: T;
+}
 
 const template: BeatmapsetDiscussionJson = Object.freeze({
   beatmap_id: 1,
···
     cases.forEach((test) => {
       it(test.description, () => {
         expect(discussionMode(test.json)).toBe(test.expected);
+      });
+    });
+  });
+
+  describe('.isUserFullNominator', () => {
+    const userTemplate = currentUser.toJson();
+    const groupsTemplate: UserGroupJson = {
+      colour: null,
+      has_listing: true,
+      has_playmodes: true,
+      id: 1,
+      identifier: 'placeholder',
+      is_probationary: false,
+      name: 'test',
+      short_name: 'test',
+    };
+
+    const allowedGroups = ['bng', 'nat'];
+    const unallowedGroups = ['admin', 'bng_limited', 'bot', 'dev', 'loved'];
+
+    describe('with no gameMode', () => {
+      const cases = [];
+      for (const identifier of allowedGroups) {
+        cases.push({
+          description: `${identifier} is full nominator`,
+          expected: true,
+          user: { ...userTemplate, groups: [{ ...groupsTemplate, identifier }] },
+        });
+      }
+
+      for (const identifier of unallowedGroups) {
+        cases.push({
+          description: `${identifier} is not full nominator`,
+          expected: false,
+          user: { ...userTemplate, groups: [{ ...groupsTemplate, identifier }] },
+        });
+      }
+
+      cases.push({
+        description: 'groupless is not full nominator',
+        expected: false,
+        user: { ...userTemplate },
+      });
+
+      cases.forEach((test) => {
+        it(test.description, () => {
+          expect(isUserFullNominator(test.user)).toBe(test.expected);
+        });
+      });
+    });
+
+    describe('with gameMode', () => {
+      const cases: (TestCase<boolean> & { gameMode: GameMode; user: UserJson })[] = [];
+      for (const identifier of allowedGroups) {
+        cases.push({
+          description: `${identifier} with matching playmode is full nominator`,
+          expected: true,
+          gameMode: 'osu',
+          user: { ...userTemplate, groups: [{ ...groupsTemplate, identifier, playmodes: ['osu'] }] },
+        });
+
+        cases.push({
+          description: `${identifier} without matching playmode is not full nominator`,
+          expected: false,
+          gameMode: 'osu',
+          user: { ...userTemplate, groups: [{ ...groupsTemplate, identifier, playmodes: ['taiko'] }] },
+        });
+
+        cases.push({
+          description: `${identifier} without playmodes is not full nominator`,
+          expected: false,
+          gameMode: 'osu',
+          user: { ...userTemplate, groups: [{ ...groupsTemplate, identifier }] },
+        });
+      }
+
+      cases.forEach((test) => {
+        it(test.description, () => {
+          expect(isUserFullNominator(test.user, test.gameMode)).toBe(test.expected);
+        });
       });
     });
   });

yarn.lock

···
   integrity sha512-W4N+o69rkMEGVuk2D/cvca3uYsvGlMwsySWV447y99gUPghxq42BxqLNMndb+a1mm/5/7NeXVQS7RLa2XyXvYg==
 
 socket.io-parser@~4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.1.tgz#01c96efa11ded938dcb21cbe590c26af5eff65e5"
-  integrity sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.3.tgz#926bcc6658e2ae0883dc9dee69acbdc76e4e3667"
+  integrity sha512-JMafRntWVO2DCJimKsRTh/wnqVvO4hrfwOqtO7f+uzwsQMuxO6VwImtYxaQ+ieoyshWOTJyV0fA21lccEXRPpQ==
   dependencies:
     "@socket.io/component-emitter" "~3.1.0"
     debug "~4.3.1"