Merge branch 'master' into wiki-page

resources/js/chat/chat-state-store.ts

@@ -13,9 +13,9 @@ import { clamp, maxBy } from 'lodash';
 import { action, autorun, computed, makeObservable, observable, observe, runInAction } from 'mobx';
 import Channel from 'models/chat/channel';
 import CreateAnnouncement from 'models/chat/create-announcement';
+import core from 'osu-core-singleton';
 import ChannelStore from 'stores/channel-store';
 import { onError } from 'utils/ajax';
-import { setBrowserTitle } from 'utils/html';
 import { trans } from 'utils/lang';
 import { updateQueryString } from 'utils/url';
 import ChannelJoinEvent from './channel-join-event';
@@ -184,7 +184,7 @@ export default class ChatStateStore implements DispatchListener {
 
       Turbolinks.controller[mode](updateQueryString(null, params, ''));
     }
-    setBrowserTitle(`${channel.name} · ${trans('page_title.main.chat_controller._')}`);
+    core.browserTitleWithNotificationCount.title = `${channel.name} · ${trans('page_title.main.chat_controller._')}`;
   }
 
   @action

resources/js/core/browser-title-with-notification-count.ts

@@ -0,0 +1,43 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import { action, autorun, makeObservable, observable, runInAction } from 'mobx';
+import OsuCore from 'osu-core';
+import { formatNumber } from 'utils/html';
+
+export default class BrowserTitleWithNotificationCount {
+  private disposer?: () => void;
+  @observable private origTitle = '';
+
+  set title(newTitle: string) {
+    runInAction(() => {
+      this.origTitle = `${newTitle} | osu!`;
+    });
+  }
+
+  constructor(private core: OsuCore) {
+    makeObservable(this);
+    document.addEventListener('turbolinks:load', this.setTitle);
+    document.addEventListener('turbolinks:before-cache', this.resetTitle);
+  }
+
+  @action
+  private readonly resetTitle = () => {
+    document.title = this.origTitle;
+    this.disposer?.();
+  };
+
+  @action
+  private readonly setTitle = () => {
+    this.origTitle = document.title;
+
+    this.disposer = autorun(() => {
+      const count = this.core.dataStore.notificationStore.unreadStacks.total;
+      const titlePrefix = count === 0
+        ? ''
+        : `(${formatNumber(count)}) `;
+
+      document.title = `${titlePrefix}${this.origTitle}`;
+    });
+  };
+}

resources/js/osu-core.ts

@@ -3,6 +3,7 @@
 
 import { BeatmapsetSearchController } from 'beatmaps/beatmapset-search-controller';
 import ChatWorker from 'chat/chat-worker';
+import BrowserTitleWithNotificationCount from 'core/browser-title-with-notification-count';
 import Captcha from 'core/captcha';
 import ClickMenu from 'core/click-menu';
 import Enchant from 'core/enchant';
@@ -36,6 +37,7 @@ import { parseJsonNullable } from 'utils/json';
 // will this replace main.coffee eventually?
 export default class OsuCore {
   readonly beatmapsetSearchController;
+  readonly browserTitleWithNotificationCount;
   readonly captcha;
   readonly chatWorker;
   readonly clickMenu;
@@ -94,6 +96,7 @@ export default class OsuCore {
     this.forumPostReport = new ForumPostReport();
     this.localtime = new Localtime();
     this.mobileToggle = new MobileToggle();
+    this.browserTitleWithNotificationCount = new BrowserTitleWithNotificationCount(this);
     this.referenceLinkTooltip = new ReferenceLinkTooltip();
     this.scorePins = new ScorePins();
     this.stickyHeader = new StickyHeader();

resources/js/utils/html.ts

@@ -136,10 +136,6 @@ export function make2x(url?: string) {
   return url.replace(/(\.[^.]+)$/, '@2x$1');
 }
 
-export function setBrowserTitle(title: string) {
-  document.title = `${title} | osu!`;
-}
-
 export function stripTags(str: string) {
   return str.replace(/<[^>]*>/g, '');
 }