FIX: Wizard improvements post-merge part 1 (#30612)

* FIX: Wizard improvements post-merge part 1

Followup 3135f472e2

Fixes the following:

* On mobile, the Styling step was very narrow
* When clicking Next on the Styling step after previously
  selecting Hot, we got an error

Also makes the following UX improvements for the preview:

* Use different topic titles for Latest and Hot
* Also make Hot view and reply numbers higher

This helps differentiate the two previews.

* DEV: Review fixes

app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js

@@ -28,7 +28,14 @@ export default class HomepagePreview extends PreviewBaseComponent {
 
     if (homepageStyle === "latest" || homepageStyle === "hot") {
       this.drawPills(colors, font, height * 0.15, { homepageStyle });
-      this.renderNonCategoryHomepage(ctx, colors, font, width, height);
+      this.renderNonCategoryHomepage(
+        ctx,
+        colors,
+        font,
+        width,
+        height,
+        homepageStyle
+      );
     } else if (
       ["categories_only", "categories_with_featured_topics"].includes(
         homepageStyle
@@ -352,6 +359,15 @@ export default class HomepagePreview extends PreviewBaseComponent {
     ];
   }
 
+  getHotTitles() {
+    return [
+      i18n("wizard.homepage_preview.topic_titles.what_hobbies"),
+      i18n("wizard.homepage_preview.topic_titles.what_music"),
+      i18n("wizard.homepage_preview.topic_titles.funniest_thing"),
+      i18n("wizard.homepage_preview.topic_titles.share_art"),
+    ];
+  }
+
   getDescriptions() {
     return [
       i18n("wizard.homepage_preview.category_descriptions.icebreakers"),
@@ -360,7 +376,7 @@ export default class HomepagePreview extends PreviewBaseComponent {
     ];
   }
 
-  renderNonCategoryHomepage(ctx, colors, font, width, height) {
+  renderNonCategoryHomepage(ctx, colors, font, width, height, homepageStyle) {
     const rowHeight = height / 6.6;
     // accounts for hard-set color variables in solarized themes
     const textColor =
@@ -418,7 +434,10 @@ export default class HomepagePreview extends PreviewBaseComponent {
 
     ctx.font = `${bodyFontSize}em '${font}'`;
     ctx.lineWidth = 1;
-    this.getTitles().forEach((title) => {
+
+    const titles =
+      homepageStyle === "hot" ? this.getHotTitles() : this.getTitles();
+    titles.forEach((title) => {
       const textPos = y + rowHeight * 0.4;
       ctx.fillStyle = colors.primary;
       ctx.fillText(title, cols[0], textPos);
@@ -448,10 +467,18 @@ export default class HomepagePreview extends PreviewBaseComponent {
 
       ctx.fillStyle = textColor;
       ctx.font = `${bodyFontSize}em '${font}'`;
-      for (let j = 2; j <= 4; j++) {
+      for (let colIndex = 2; colIndex <= 4; colIndex++) {
+        // Give Hot a higher range of random values to make it look like
+        // more activity is happening.
+        const randomValue =
+          homepageStyle === "hot"
+            ? Math.floor(Math.random() * (660 - 220) + 220) + 10
+            : Math.floor(Math.random() * 90) + 10;
+
         ctx.fillText(
-          j === 4 ? "1h" : Math.floor(Math.random() * 90) + 10,
+          // Last column is relative activity time, others are random numbers.
-          cols[j] + margin,
+          colIndex === 4 ? "1h" : randomValue,
+          cols[colIndex] + margin,
           y + rowHeight * 0.6
         );
       }

app/assets/stylesheets/wizard.scss

@@ -109,6 +109,10 @@ body.wizard {
     &.styling {
       max-width: 100%;
       width: auto;
+
+      @include breakpoint("mobile-extra-large") {
+        width: 95%;
+      }
     }
   }
 
@@ -201,7 +205,7 @@ body.wizard {
     margin-right: 1em;
 
     @media only screen and (max-width: 925px) {
-      width: 80%;
+      width: 100%;
       margin-left: auto;
       margin-right: auto;
     }
@@ -297,6 +301,10 @@ body.wizard {
   &__step-contents {
     min-height: 37em;
     margin-bottom: 2em;
+
+    @include breakpoint("mobile-extra-large") {
+      min-height: 30em;
+    }
   }
 
   &__step-form {

config/locales/client.en.yml

@@ -7515,6 +7515,10 @@ en:
           what_movies: "What movies have you seen recently?"
           random_fact: "Random fact of the day"
           tv_show: "Recommend a TV show"
+          what_hobbies: "What are your hobbies?"
+          what_music: "What are you listening to right now?"
+          funniest_thing: "Funniest thing you've seen today"
+          share_art: "Share your art!"
         topic_ops:
           what_books: |
             We all love to read, let's use this topic to share our

lib/wizard/builder.rb

@@ -219,10 +219,11 @@ class Wizard
           updater.update_setting(:heading_font, updater.fields[:heading_font])
 
           top_menu = SiteSetting.top_menu_map
-          if %w[latest hot].include?(updater.fields[:homepage_style]) &&
+          if %w[latest hot].include?(updater.fields[:homepage_style])
-               top_menu.first != updater.fields[:homepage_style]
+            if top_menu.first != updater.fields[:homepage_style]
-            top_menu.delete(updater.fields[:homepage_style])
+              top_menu.delete(updater.fields[:homepage_style])
-            top_menu.insert(0, updater.fields[:homepage_style])
+              top_menu.insert(0, updater.fields[:homepage_style])
+            end
           elsif updater.fields[:homepage_style] != "latest"
             top_menu.delete("categories")
             top_menu.insert(0, "categories")

spec/lib/wizard/step_updater_spec.rb

@@ -299,6 +299,43 @@ RSpec.describe Wizard::StepUpdater do
         expect(SiteSetting.desktop_category_page_style).to eq("subcategories_with_featured_topics")
       end
 
+      it "updates top_menu if it doesn't match the new homepage_style and does nothing if it matches" do
+        SiteSetting.top_menu = "categories|new|latest"
+
+        updater =
+          wizard.create_updater(
+            "styling",
+            body_font: "arial",
+            heading_font: "arial",
+            homepage_style: "hot",
+          )
+        updater.update
+        expect(updater).to be_success
+        expect(SiteSetting.top_menu).to eq("hot|categories|new|latest")
+
+        updater =
+          wizard.create_updater(
+            "styling",
+            body_font: "arial",
+            heading_font: "arial",
+            homepage_style: "hot",
+          )
+        updater.update
+        expect(updater).to be_success
+        expect(SiteSetting.top_menu).to eq("hot|categories|new|latest")
+
+        updater =
+          wizard.create_updater(
+            "styling",
+            body_font: "arial",
+            heading_font: "arial",
+            homepage_style: "latest",
+          )
+        updater.update
+        expect(updater).to be_success
+        expect(SiteSetting.top_menu).to eq("latest|hot|categories|new")
+      end
+
       it "does not overwrite top_menu site setting" do
         SiteSetting.top_menu = "latest|unread|unseen|categories"
         updater =