DEV: Clean up mobileView/desktopView uses (#26229)

Inspired by a piece of "do not do x if it's not a mobile view" code 🙃

app/assets/javascripts/discourse/app/components/basic-topic-list.js

@@ -81,7 +81,7 @@ export default Component.extend({
   click(e) {
     // Mobile basic-topic-list doesn't use the `topic-list-item` view so
     // the event for the topic entrance is never wired up.
-    if (!this.site.mobileView) {
+    if (this.site.desktopView) {
       return;
     }
 

app/assets/javascripts/discourse/app/components/bookmark-list.hbs

@@ -5,7 +5,7 @@
   >
     <table class="topic-list bookmark-list">
       <thead class="topic-list-header">
-        {{#unless this.site.mobileView}}
+        {{#if this.site.desktopView}}
           <PluginOutlet @name="bookmark-list-table-header">
             <th class="topic-list-data">{{i18n "topic.title"}}</th>
             <th class="topic-list-data">&nbsp;</th>
@@ -15,7 +15,7 @@
             <th class="post-metadata topic-list-data">{{i18n "activity"}}</th>
             <th>&nbsp;</th>
           </PluginOutlet>
-        {{/unless}}
+        {{/if}}
       </thead>
       <tbody class="topic-list-body">
         {{#each this.content as |bookmark|}}
@@ -98,7 +98,7 @@
                 {{on "click" this.screenExcerptForExternalLink}}
               >{{html-safe bookmark.excerpt}}</p>
             </th>
-            {{#unless this.site.mobileView}}
+            {{#if this.site.desktopView}}
               <td class="author-avatar topic-list-data">
                 {{#if bookmark.user.avatar_template}}
                   <a
@@ -126,7 +126,7 @@
                 class="num post-metadata"
                 tagName="td"
               }}
-            {{/unless}}
+            {{/if}}
             <td class="topic-list-data">
               <BookmarkActionsDropdown
                 @bookmark={{bookmark}}

app/assets/javascripts/discourse/app/components/composer-container.hbs

@@ -58,7 +58,7 @@
                 @outletArgs={{hash model=this.composer.model}}
               />
 
-              {{#unless this.composer.site.mobileView}}
+              {{#if this.site.desktopView}}
                 {{#if this.composer.model.unlistTopic}}
                   <span class="unlist">({{i18n "composer.unlist"}})</span>
                 {{/if}}
@@ -67,7 +67,7 @@
                     <span class="no-bump">{{d-icon "anchor"}}</span>
                   {{/if}}
                 {{/if}}
-              {{/unless}}
+              {{/if}}
 
               {{#if this.composer.canEdit}}
                 <LinkToInput
@@ -264,7 +264,7 @@
               @disableSubmit={{this.composer.disableSubmit}}
             />
 
-            {{#if this.composer.site.mobileView}}
+            {{#if this.site.mobileView}}
               <a
                 href
                 {{on "click" this.composer.cancel}}
@@ -286,7 +286,7 @@
               >{{i18n "close"}}</a>
             {{/if}}
 
-            {{#if this.composer.site.mobileView}}
+            {{#if this.site.mobileView}}
               {{#if this.composer.whisperOrUnlistTopic}}
                 <span class="whisper">
                   {{d-icon "far-eye-slash"}}
@@ -306,7 +306,7 @@
             </span>
           </div>
 
-          {{#if this.composer.site.mobileView}}
+          {{#if this.site.mobileView}}
             <span>
               <PluginOutlet
                 @name="composer-mobile-buttons-bottom"
@@ -388,14 +388,14 @@
                 {{else}}
                   {{d-icon "exclamation-triangle"}}
                 {{/if}}
-                {{#unless this.composer.site.mobileView}}
+                {{#if this.site.desktopView}}
                   {{this.composer.model.draftStatus}}
-                {{/unless}}
+                {{/if}}
               </span>
             {{/if}}
           </div>
 
-          {{#unless this.site.mobileView}}
+          {{#if this.site.desktopView}}
             <DButton
               @action={{this.composer.togglePreview}}
               @translatedTitle={{this.composer.toggleText}}
@@ -405,7 +405,7 @@
                 (unless this.composer.showPreview "active")
               }}
             />
-          {{/unless}}
+          {{/if}}
         </div>
       </div>
     {{else}}

app/assets/javascripts/discourse/app/components/composer-editor.js

@@ -899,7 +899,7 @@ export default Component.extend(ComposerUploadUppy, {
         unshift: true,
       });
 
-      if (this.allowUpload && this.uploadIcon && !this.site.mobileView) {
+      if (this.allowUpload && this.uploadIcon && this.site.desktopView) {
         toolbar.addButton({
           id: "upload",
           group: "insertions",

app/assets/javascripts/discourse/app/components/discourse-banner.hbs

@@ -5,9 +5,9 @@
         {{#if this.currentUser.staff}}
           <a href={{this.banner.url}} class="btn btn-transparent edit-banner">
             {{d-icon "pencil-alt"}}
-            {{#unless this.site.mobileView}}
+            {{#if this.site.desktopView}}
               {{html-safe (i18n "banner.edit")}}
-            {{/unless}}
+            {{/if}}
           </a>
         {{/if}}
 

app/assets/javascripts/discourse/app/components/discourse-topic.js

@@ -153,7 +153,7 @@ export default Component.extend(Scrolling, MobileScrollDirection, {
     // On desktop the user only needs to scroll past the topic title.
     return (
       offset > this.dockAt &&
-      (!this.site.mobileView || this.mobileScrollDirection === "down")
+      (this.site.desktopView || this.mobileScrollDirection === "down")
     );
   },
 

app/assets/javascripts/discourse/app/components/glimmer-header.gjs

@@ -161,10 +161,9 @@ export default class GlimmerHeader extends Component {
 
   @action
   toggleBodyScrolling(bool) {
-    if (!this.site.mobileView) {
+    if (this.site.mobileView) {
-      return;
+      scrollLock(bool);
     }
-    scrollLock(bool);
   }
 
   @action
@@ -180,7 +179,6 @@ export default class GlimmerHeader extends Component {
           @toggleHamburger={{this.toggleHamburger}}
           @showSidebar={{@showSidebar}}
         >
-
           <span class="header-buttons">
             {{#each (headerButtons.resolve) as |entry|}}
               {{#if (and (eq entry.key "auth") (not this.currentUser))}}

app/assets/javascripts/discourse/app/components/glimmer-header/topic/info.gjs

@@ -129,7 +129,7 @@ export default class Info extends Component {
                   {{#if
                     (and
                       @topic.category.parentCategory.parentCategory
-                      (not this.site.mobileView)
+                      this.site.desktopView
                     )
                   }}
                     {{categoryLink

app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs

@@ -432,7 +432,7 @@ export default class GlimmerSiteHeader extends Component {
   <template>
     <div
       class={{concatClass
-        (unless this.site.mobileView "drop-down-mode")
+        (if this.site.desktopView "drop-down-mode")
         "d-header-wrap"
       }}
       {{didInsert this.setupHeader}}

app/assets/javascripts/discourse/app/components/mobile-nav.js

@@ -8,7 +8,7 @@ import { on } from "discourse-common/utils/decorators";
 export default Component.extend({
   @on("init")
   _init() {
-    if (!this.get("site.mobileView")) {
+    if (this.site.desktopView) {
       let classes = this.desktopClass;
       if (classes) {
         classes = classes.split(" ");

app/assets/javascripts/discourse/app/components/modal/history.hbs

@@ -7,7 +7,6 @@
     <ConditionalLoadingSpinner @condition={{this.initialLoad}}>
       <Modal::History::Revision
         @model={{this.postRevision}}
-        @mobileView={{this.site.mobileView}}
         @wikiDisabled={{this.wikiDisabled}}
         @previousCategory={{this.previousCategory}}
         @currentCategory={{this.currentCategory}}

app/assets/javascripts/discourse/app/components/modal/history/revision.hbs

@@ -17,10 +17,10 @@
     {{#if @model.edit_reason}}
       <span class="edit-reason">{{@model.edit_reason}}</span>
     {{/if}}
-    {{#unless @mobileView}}
+
+    {{#if this.site.desktopView}}
       <span>
         {{#if @model.user_changes}}
-
           {{bound-avatar-template
             @model.user_changes.previous.avatar_template
             "small"
@@ -33,24 +33,25 @@
           }}
           {{@model.user_changes.current.username}}
         {{/if}}
-        {{#if @model.wiki_changes}}
 
+        {{#if @model.wiki_changes}}
           <DisabledIcon @icon="far-edit" @disabled={{@wikiDisabled}} />
         {{/if}}
-        {{#if @model.post_type_changes}}
 
+        {{#if @model.post_type_changes}}
           <DisabledIcon @icon="shield-alt" @disabled={{@postTypeDisabled}} />
         {{/if}}
-        {{#if @model.category_id_changes}}
 
+        {{#if @model.category_id_changes}}
           {{html-safe @previousCategory}}
           &rarr;
           {{html-safe @currentCategory}}
         {{/if}}
       </span>
-    {{/unless}}
+    {{/if}}
   </div>
-  {{#unless @mobileView}}
+
+  {{#if this.site.desktopView}}
     <div id="display-modes">
       <ul class="nav nav-pills">
         <li>
@@ -102,5 +103,5 @@
         </li>
       </ul>
     </div>
-  {{/unless}}
+  {{/if}}
 </div>

app/assets/javascripts/discourse/app/components/modal/history/revision.js

@@ -0,0 +1,6 @@
+import Component from "@glimmer/component";
+import { service } from "@ember/service";
+
+export default class Revision extends Component {
+  @service site;
+}

app/assets/javascripts/discourse/app/components/modal/share-topic.js

@@ -49,7 +49,7 @@ const ShareTopicModal = Component.extend(bufferedProperty("invite"), {
   @afterRender
   _selectUrl() {
     const input = document.querySelector("input.invite-link");
-    if (input && !this.site.mobileView) {
+    if (input && this.site.desktopView) {
       // if the input is auto-focused on mobile, iOS requires two taps of the copy button
       input.setSelectionRange(0, this.url.length);
       input.focus();

app/assets/javascripts/discourse/app/components/sidebar/section-form-link.hbs

@@ -14,11 +14,11 @@
   role="row"
   data-row-id={{@link.objectId}}
 >
-  {{#unless this.site.mobileView}}
+  {{#if this.site.desktopView}}
     <div class="draggable" data-link-name={{@link.name}}>
       {{d-icon "grip-lines"}}
     </div>
-  {{/unless}}
+  {{/if}}
   <div class="input-group" role="cell">
     <IconPicker
       @name="icon"

app/assets/javascripts/discourse/app/components/topic-list-item.js

@@ -379,7 +379,7 @@ export default Component.extend({
   },
 
   _shouldFocusLastVisited() {
-    return !this.site.mobileView && this.focusLastVisitedTopic;
+    return this.site.desktopView && this.focusLastVisitedTopic;
   },
 
   _mainLinkElement() {

app/assets/javascripts/discourse/app/components/topic-progress.js

@@ -23,7 +23,7 @@ export default Component.extend({
     "postStream.filteredPostsCount"
   )
   hideProgress(loaded, currentPost, filteredPostsCount) {
-    const hideOnShortStream = !this.site.mobileView && filteredPostsCount < 2;
+    const hideOnShortStream = this.site.desktopView && filteredPostsCount < 2;
     return !loaded || !currentPost || hideOnShortStream;
   },
 
@@ -141,7 +141,7 @@ export default Component.extend({
     // on desktop, pin this element to the composer
     // otherwise the grid layout will change too much when toggling the composer
     // and jitter when the viewport is near the topic bottom
-    if (!this.site.mobileView && composerH) {
+    if (this.site.desktopView && composerH) {
       this.set("docked", false);
       this.element.style.setProperty("bottom", `${composerH}px`);
       return;

app/assets/javascripts/discourse/app/controllers/edit-category-tabs.js

@@ -1,5 +1,5 @@
 import Controller from "@ember/controller";
-import { and, readOnly } from "@ember/object/computed";
+import { and } from "@ember/object/computed";
 import { service } from "@ember/service";
 import { underscore } from "@ember/string";
 import { popupAjaxError } from "discourse/lib/ajax-error";
@@ -22,7 +22,6 @@ export default Controller.extend({
   showTooltip: false,
   createdCategory: false,
   expandedMenu: false,
-  mobileView: readOnly("site.mobileView"),
   parentParams: null,
   showDeleteReason: and("showTooltip", "model.cannot_delete_reason"),
 

app/assets/javascripts/discourse/app/controllers/review-index.js

@@ -36,7 +36,7 @@ export default Controller.extend({
   init(...args) {
     this._super(...args);
     this.set("priority", this.siteSettings.reviewable_default_visibility);
-    this.set("filtersExpanded", !this.site.mobileView);
+    this.set("filtersExpanded", this.site.desktopView);
   },
 
   @discourseComputed("reviewableTypes")

app/assets/javascripts/discourse/app/instance-initializers/mobile-keyboard.js

@@ -7,7 +7,7 @@ export default {
     const site = owner.lookup("service:site");
     this.capabilities = owner.lookup("service:capabilities");
 
-    if (!this.capabilities.isIpadOS && !site.mobileView) {
+    if (!this.capabilities.isIpadOS && site.desktopView) {
       return;
     }
 

app/assets/javascripts/discourse/app/models/composer.js

@@ -410,7 +410,7 @@ export default class Composer extends RestModel {
       options.label = I18n.t(`post.${action}`);
       options.userAvatar = tinyAvatar(post.avatar_template);
 
-      if (!this.site.mobileView) {
+      if (this.site.desktopView) {
         const originalUserName = post.get("reply_to_user.username");
         const originalUserAvatar = post.get("reply_to_user.avatar_template");
         if (originalUserName && originalUserAvatar && isEdit(action)) {

app/assets/javascripts/discourse/app/models/nav-item.js

@@ -250,7 +250,7 @@ export default class NavItem extends EmberObject {
 
     if (
       this.name === "latest" &&
-      (!Site.currentProp("mobileView") || this.tagId !== undefined)
+      (Site.currentProp("desktopView") || this.tagId !== undefined)
     ) {
       count = 0;
     }

app/assets/javascripts/discourse/app/models/topic-tracking-state.js

@@ -310,7 +310,7 @@ export default class TopicTrackingState extends EmberObject {
     if (
       filter === "categories" &&
       data.message_type === "latest" &&
-      !Site.current().mobileView &&
+      Site.current().desktopView &&
       (this.siteSettings.desktop_category_page_style ===
         "categories_and_latest_topics" ||
         this.siteSettings.desktop_category_page_style ===

app/assets/javascripts/discourse/app/routes/discovery-categories.js

@@ -19,7 +19,7 @@ export default class DiscoveryCategoriesRoute extends DiscourseRoute {
 
   findCategories() {
     let style =
-      !this.site.mobileView && this.siteSettings.desktop_category_page_style;
+      this.site.desktopView && this.siteSettings.desktop_category_page_style;
 
     if (
       style === "categories_and_latest_topics" ||

app/assets/javascripts/discourse/app/services/composer.js

@@ -206,7 +206,7 @@ export default class ComposerService extends Service {
 
   @observes("showPreview")
   showPreviewChanged() {
-    if (!this.site.mobileView) {
+    if (this.site.desktopView) {
       this.keyValueStore.set({
         key: "composer.showPreview",
         value: this.showPreview,

app/assets/javascripts/discourse/app/services/navigation-menu.js

@@ -10,6 +10,6 @@ export default class NavigationMenu extends Service {
     const headerDropdownMode =
       this.siteSettings.navigation_menu === "header dropdown";
 
-    return !this.site.mobileView && headerDropdownMode;
+    return this.site.desktopView && headerDropdownMode;
   }
 }

app/assets/javascripts/discourse/app/templates/edit-category-tabs.hbs

@@ -12,16 +12,14 @@
         />
       {{/if}}
     </div>
-    {{#unless this.mobileView}}
+    {{#if (and this.site.desktopView this.model.id)}}
-      {{#if this.model.id}}
+      <DButton
-        <DButton
+        @action={{action "goBack"}}
-          @action={{action "goBack"}}
+        @label="category.back"
-          @label="category.back"
+        @icon="caret-left"
-          @icon="caret-left"
+        class="category-back"
-          class="category-back"
+      />
-        />
+    {{/if}}
-      {{/if}}
-    {{/unless}}
   </div>
 
   <div class="edit-category-nav">

app/assets/javascripts/discourse/app/templates/user-invited-show.hbs

@@ -25,14 +25,14 @@
         />
         {{#if this.canBulkInvite}}
           {{#if this.siteSettings.allow_bulk_invite}}
-            {{#unless this.site.mobileView}}
+            {{#if this.site.desktopView}}
               <DButton
                 @icon="upload"
                 @action={{this.createInviteCsv}}
                 @label="user.invited.bulk_invite.text"
                 class="btn-default"
               />
-            {{/unless}}
+            {{/if}}
           {{/if}}
         {{/if}}
         {{#if this.showBulkActionButtons}}

app/assets/javascripts/discourse/app/widgets/header-topic-info.js

@@ -142,7 +142,7 @@ export default createWidget("header-topic-info", {
         if (parentCategory) {
           if (
             this.siteSettings.max_category_nesting > 2 &&
-            !this.site.mobileView
+            this.site.desktopView
           ) {
             const grandParentCategory = parentCategory.get("parentCategory");
             if (grandParentCategory) {

app/assets/javascripts/discourse/app/widgets/header.js

@@ -674,10 +674,9 @@ export default createWidget("header", {
   },
 
   toggleBodyScrolling(bool) {
-    if (!this.site.mobileView) {
+    if (this.site.mobileView) {
-      return;
+      scrollLock(bool);
     }
-    scrollLock(bool);
   },
 
   togglePageSearch() {

app/assets/javascripts/discourse/app/widgets/topic-admin-menu.js

@@ -42,7 +42,7 @@ createWidget("topic-admin-menu-button", {
       position: state.position,
       topic: attrs.topic,
       openUpwards: attrs.openUpwards,
-      rightSide: !this.site.mobileView && attrs.rightSide,
+      rightSide: this.site.desktopView && attrs.rightSide,
       actionButtons: [],
     });
 

app/assets/javascripts/select-kit/addon/components/select-kit.js

@@ -905,8 +905,8 @@ export default Component.extend(
             {
               name: "eventListeners",
               options: {
-                resize: !this.site.mobileView,
+                resize: this.site.desktopView,
-                scroll: !this.site.mobileView,
+                scroll: this.site.desktopView,
               },
             },
             {

app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.js

@@ -38,7 +38,7 @@ export default Component.extend(UtilsMixin, {
   didInsertElement() {
     this._super(...arguments);
 
-    if (!this.site.mobileView) {
+    if (this.site.desktopView) {
       this.element.addEventListener("mouseenter", this.handleMouseEnter);
       this.element.addEventListener("focus", this.handleMouseEnter);
     }
@@ -47,7 +47,7 @@ export default Component.extend(UtilsMixin, {
   willDestroyElement() {
     this._super(...arguments);
 
-    if (!this.site.mobileView) {
+    if (this.site.desktopView) {
       this.element.removeEventListener("mouseenter", this.handleMouseEnter);
       this.element.removeEventListener("focus", this.handleMouseEnter);
     }

plugins/chat/assets/javascripts/discourse/components/chat-channel-leave-btn.gjs

@@ -2,12 +2,13 @@ import Component from "@glimmer/component";
 import { service } from "@ember/service";
 import { isPresent } from "@ember/utils";
 import DButton from "discourse/components/d-button";
+
 export default class ChatChannelLeaveBtn extends Component {
   @service chat;
   @service site;
 
   get shouldRender() {
-    return !this.site.mobileView && isPresent(this.args.channel);
+    return this.site.desktopView && isPresent(this.args.channel);
   }
 
   get leaveChatTitleKey() {

plugins/chat/assets/javascripts/discourse/components/chat/header/icon.gjs

@@ -40,7 +40,7 @@ export default class ChatHeaderIcon extends Component {
     if (
       this.chatStateManager.isFullPageActive &&
       !this.chatSeparateSidebarMode.never &&
-      !this.site.mobileView
+      this.site.desktopView
     ) {
       return I18n.t("sidebar.panels.forum.label");
     }
@@ -52,7 +52,7 @@ export default class ChatHeaderIcon extends Component {
     if (
       this.chatStateManager.isFullPageActive &&
       !this.chatSeparateSidebarMode.never &&
-      !this.site.mobileView
+      this.site.desktopView
     ) {
       return "random";
     }

plugins/chat/assets/javascripts/discourse/components/chat/thread/header.gjs

@@ -20,7 +20,7 @@ export default class ChatThreadHeader extends Component {
       route = "chat.channel.threads";
       title = I18n.t("chat.return_to_threads_list");
       models = this.channel?.routeModels;
-    } else if (prevPage === "chat.channel.index" && !this.site.mobileView) {
+    } else if (prevPage === "chat.channel.index" && this.site.desktopView) {
       route = "chat.channel.threads";
       title = I18n.t("chat.return_to_threads_list");
       models = this.channel?.routeModels;

plugins/chat/assets/javascripts/discourse/services/chat-state-manager.js

@@ -4,7 +4,6 @@ import KeyValueStore from "discourse/lib/key-value-store";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { MAIN_PANEL } from "discourse/lib/sidebar/panels";
 import { defaultHomepage } from "discourse/lib/utilities";
-import Site from "discourse/models/site";
 import getURL from "discourse-common/lib/get-url";
 import { getUserChatSeparateSidebarMode } from "discourse/plugins/chat/discourse/lib/get-user-chat-separate-sidebar-mode";
 
@@ -22,10 +21,12 @@ export function addChatDrawerStateCallback(callback) {
 export function resetChatDrawerStateCallbacks() {
   chatDrawerStateCallbacks = [];
 }
+
 export default class ChatStateManager extends Service {
   @service chat;
   @service chatHistory;
   @service router;
+  @service site;
 
   @tracked isSidePanelExpanded = false;
   @tracked isDrawerExpanded = false;
@@ -126,7 +127,7 @@ export default class ChatStateManager extends Service {
 
   get isFullPagePreferred() {
     return !!(
-      Site.currentProp("mobileView") ||
+      this.site.mobileView ||
       this._store.getObject(PREFERRED_MODE_KEY) === FULL_PAGE_CHAT
     );
   }
@@ -134,7 +135,7 @@ export default class ChatStateManager extends Service {
   get isDrawerPreferred() {
     return !!(
       !this.isFullPagePreferred ||
-      (!Site.currentProp("mobileView") &&
+      (this.site.desktopView &&
         (!this._store.getObject(PREFERRED_MODE_KEY) ||
           this._store.getObject(PREFERRED_MODE_KEY) === DRAWER_CHAT))
     );

plugins/chat/test/javascripts/components/chat-channel-leave-btn-test.js

@@ -3,7 +3,7 @@ import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import pretender from "discourse/tests/helpers/create-pretender";
-import { exists, query } from "discourse/tests/helpers/qunit-helpers";
+import { query } from "discourse/tests/helpers/qunit-helpers";
 import I18n from "discourse-i18n";
 import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
@@ -47,11 +47,11 @@ module("Discourse Chat | Component | chat-channel-leave-btn", function (hooks) {
   });
 
   test("is not visible on mobile", async function (assert) {
-    this.site.mobileView = true;
+    this.site.desktopView = false;
     this.channel = fabricators.channel();
 
     await render(hbs`<ChatChannelLeaveBtn @channel={{this.channel}} />`);
 
-    assert.false(exists(".chat-channel-leave-btn"));
+    assert.dom(".chat-channel-leave-btn").doesNotExist();
   });
 });

plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.hbs

@@ -57,13 +57,13 @@
             {{/if}}
           </div>
 
-          {{#unless this.site.mobileView}}
+          {{#if this.site.desktopView}}
             <TimezoneInput
               @options={{hash icon="globe"}}
               @value={{this.timezone}}
               @onChange={{fn (mut this.timezone)}}
             />
-          {{/unless}}
+          {{/if}}
         </div>
 
         <div class="picker-panel">