UX: restyling for 2025

app/controllers/discourse_rewind/rewinds_controller.rb

@@ -10,10 +10,7 @@ def show
       DiscourseRewind::FetchReports.call(service_params) do
         on_model_not_found(:year) { raise Discourse::NotFound }
         on_model_not_found(:user) { raise Discourse::NotFound }
-        on_success do |reports:|
-          @reports = reports
-          render json: MultiJson.dump(reports), status: :ok
-        end
+        on_success { |reports:| render json: MultiJson.dump(reports), status: :ok }
       end
     end
   end

app/services/discourse_rewind/action/invites.rb

@@ -13,7 +13,7 @@ def call
         return if total_invites == 0
 
         # Redeemed invites (users who actually joined)
-        redeemed_count = invites.where.not(redeemed_at: nil).count
+        redeemed_count = invites.where("redemption_count > 0").count
 
         # Get the users who were invited (via InvitedUser or redeemed invites)
         invited_user_ids = InvitedUser.where(invite: invites).pluck(:user_id).compact
@@ -22,11 +22,7 @@ def call
 
         # Calculate impact of invitees
         invitee_post_count =
-          Post
-            .where(user_id: invited_user_ids)
-            .where(created_at: date)
-            .where(deleted_at: nil)
-            .count
+          Post.where(user_id: invited_user_ids).where(created_at: date).where(deleted_at: nil).count
 
         invitee_topic_count =
           Topic

app/services/discourse_rewind/action/most_viewed_categories.rb

@@ -10,7 +10,6 @@ class MostViewedCategories < BaseReport
           { category_id: 2, name: "dogs" },
           { category_id: 3, name: "countries" },
           { category_id: 4, name: "management" },
-          { category_id: 5, name: "things" },
         ],
         identifier: "most-viewed-categories",
       }
@@ -26,7 +25,7 @@ def call
             .where(categories: { id: user.guardian.allowed_category_ids })
             .group("categories.id, categories.name")
             .order("COUNT(*) DESC")
-            .limit(5)
+            .limit(4)
             .pluck("categories.id, categories.name")
             .map { |category_id, name| { category_id: category_id, name: name } }
 

app/services/discourse_rewind/action/most_viewed_tags.rb

@@ -10,7 +10,6 @@ class MostViewedTags < BaseReport
           { tag_id: 2, name: "dogs" },
           { tag_id: 3, name: "countries" },
           { tag_id: 4, name: "management" },
-          { tag_id: 5, name: "things" },
         ],
         identifier: "most-viewed-tags",
       }
@@ -28,7 +27,7 @@ def call
             .where(tags: { id: Tag.visible(user.guardian).pluck(:id) })
             .group("tags.id, tags.name")
             .order("COUNT(DISTINCT topic_views.topic_id) DESC")
-            .limit(5)
+            .limit(4)
             .pluck("tags.id, tags.name")
             .map { |tag_id, name| { tag_id: tag_id, name: name } }
 

app/services/discourse_rewind/fetch_reports.rb

@@ -81,7 +81,7 @@ def fetch_reports(date:, user:, guardian:, year:)
       reports = Discourse.redis.get(key)
 
       if !reports
-        reports = REPORTS.map { |report| report.call(date:, user:, guardian:) }
+        reports = REPORTS.map { |report| report.call(date:, user:, guardian:) }.compact
         Discourse.redis.setex(key, CACHE_DURATION, MultiJson.dump(reports))
       else
         reports = MultiJson.load(reports, symbolize_keys: true)

assets/javascripts/discourse/components/reports/header.gjs

@@ -1,13 +1,41 @@
+import { i18n } from "discourse-i18n";
+
 const RewindHeader = <template>
   <div class="rewind__header">
-    <img
-      class="rewind-logo -light"
-      src="/plugins/discourse-rewind/images/discourse-rewind-logo.png"
-    />
-    <img
-      class="rewind-logo -dark"
-      src="/plugins/discourse-rewind/images/discourse-rewind-logo-dark.png"
-    />
+    <div class="rewind__header-logo">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -1 104 106">
+        <path
+          fill="#231f20"
+          d="M51.87 0C23.71 0 0 22.83 0 51v52.81l51.86-.05c28.16 0 51-23.71 51-51.87S80 0 51.87 0Z"
+        />
+        <path
+          fill="#fff9ae"
+          d="M52.37 19.74a31.62 31.62 0 0 0-27.79 46.67l-5.72 18.4 20.54-4.64a31.61 31.61 0 1 0 13-60.43Z"
+        />
+        <path
+          fill="#00aeef"
+          d="M77.45 32.12a31.6 31.6 0 0 1-38.05 48l-20.54 4.7 20.91-2.47a31.6 31.6 0 0 0 37.68-50.23Z"
+        />
+        <path
+          fill="#00a94f"
+          d="M71.63 26.29A31.6 31.6 0 0 1 38.8 78l-19.94 6.82 20.54-4.65a31.6 31.6 0 0 0 32.23-53.88Z"
+        />
+        <path
+          fill="#f15d22"
+          d="M26.47 67.11a31.61 31.61 0 0 1 51-35 31.61 31.61 0 0 0-52.89 34.3l-5.72 18.4Z"
+        />
+        <path
+          fill="#e31b23"
+          d="M24.58 66.41a31.61 31.61 0 0 1 47.05-40.12 31.61 31.61 0 0 0-49 39.63l-3.76 18.9Z"
+        />
+      </svg>
+      <div class="rewind__header-title">
+        {{i18n "discourse_rewind.title"}}
+      </div>
+      <div class="rewind__header-year">
+        {{i18n "discourse_rewind.year"}}
+      </div>
+    </div>
   </div>
 </template>;
 

assets/javascripts/discourse/components/reports/most-viewed-categories.gjs

@@ -10,11 +10,12 @@ const MostViewedCategories = <template>
         }}</h2>
       <div class="rewind-report-container">
         {{#each @report.data as |data|}}
-          <a href={{concat "/c/-/" data.category_id}} class="rewind-card">
-            <p
-              class="most-viewed-categories__category"
-              href={{concat "/c/-/" data.category_id}}
-            >{{data.name}}</p>
+          <a class="folder-wrapper" href={{concat "/c/-/" data.category_id}}>
+            <span class="folder-tab"></span>
+            <div class="rewind-card">
+              <p class="most-viewed-categories__category">{{data.name}}</p>
+            </div>
+            <span class="folder-bg"></span>
           </a>
         {{/each}}
       </div>

assets/javascripts/discourse/components/reports/most-viewed-tags.gjs

@@ -10,11 +10,17 @@ const MostViewedTags = <template>
         }}</h2>
       <div class="rewind-report-container">
         {{#each @report.data as |data|}}
-          <a class="rewind-card" href={{concat "/tag/" data.name}}>
-            <p
-              class="most-viewed-tags__tag"
-              href={{concat "/tag/" data.name}}
-            >#{{data.name}}</p>
+          <a class="folder-wrapper" href={{concat "/tag/" data.name}}>
+            <span class="folder-tab"></span>
+            <div class="rewind-card">
+              <p
+                class="most-viewed-tags__tag"
+                href={{concat "/tag/" data.name}}
+              >
+                #{{data.name}}
+              </p>
+            </div>
+            <span class="folder-bg"></span>
           </a>
         {{/each}}
       </div>

assets/javascripts/discourse/components/reports/top-words/word-card.gjs

@@ -4,7 +4,6 @@ import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import { htmlSafe } from "@ember/template";
 import concatClass from "discourse/helpers/concat-class";
-import emoji from "discourse/helpers/emoji";
 import discourseLater from "discourse/lib/later";
 
 const MYSTERY_EMOJIS = [
@@ -81,21 +80,12 @@ export default class WordCard extends Component {
         "rewind-card__wrapper"
         (if this.longWord "-long-word")
       }}
-      style={{this.cardStyle}}
       {{didInsert this.registerCardContainer}}
       role="button"
     >
       <div class="rewind-card__inner">
         <div class="rewind-card -front">
-          <span class="rewind-card__image tl">{{emoji
-              this.mysteryData.emoji
-            }}</span>
-          <span class="rewind-card__image cr">{{emoji
-              this.mysteryData.emoji
-            }}</span>
-          <span class="rewind-card__image br">{{emoji
-              this.mysteryData.emoji
-            }}</span>
+
         </div>
         <div class="rewind-card -back">
           <span class="rewind-card__title">{{@word}}</span>

assets/javascripts/discourse/components/rewind.gjs

@@ -3,11 +3,12 @@ import { tracked } from "@glimmer/tracking";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
-import { eq } from "truth-helpers";
 import DButton from "discourse/components/d-button";
 import concatClass from "discourse/helpers/concat-class";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import { eq } from "discourse/truth-helpers";
+import { i18n } from "discourse-i18n";
 import ActivityCalendar from "discourse/plugins/discourse-rewind/discourse/components/reports/activity-calendar";
 import BestPosts from "discourse/plugins/discourse-rewind/discourse/components/reports/best-posts";
 import BestTopics from "discourse/plugins/discourse-rewind/discourse/components/reports/best-topics";
@@ -54,13 +55,9 @@ export default class Rewind extends Component {
   }
 
   @action
-  handleScroll({ target }) {
-    let children = this.rewindContainer.getElementsByClassName("parallax-bg");
-
-    for (let i = 0; i < children.length; i++) {
-      children[i].style.transform = `translateY(-${
-        (target.scrollTop * (i + 1)) / 5
-      }px)`;
+  handleBackdropClick(event) {
+    if (this.fullScreen && event.target === event.currentTarget) {
+      this.fullScreen = false;
     }
   }
 
@@ -77,27 +74,28 @@ export default class Rewind extends Component {
       }}
       {{didInsert this.loadRewind}}
       {{on "keydown" this.handleEscape}}
+      {{on "click" this.handleBackdropClick}}
       {{didInsert this.registerRewindContainer}}
       tabindex="0"
     >
       <div class="rewind">
         <RewindHeader />
-        <div class="background-1 parallax-bg"></div>
         {{#if this.loadingRewind}}
           <div class="rewind-loader">
             <div class="spinner small"></div>
-            <div class="rewind-loader__text">Crunching your data...</div>
+            <div class="rewind-loader__text">
+              {{i18n "discourse_rewind.loading"}}
+            </div>
           </div>
         {{else}}
           <DButton
-            class="rewind__exit-fullscreen-btn"
+            class="btn-default rewind__exit-fullscreen-btn --special-kbd"
             @icon={{if this.fullScreen "discourse-compress" "discourse-expand"}}
             @action={{this.toggleFullScreen}}
           />
           <div
             class="rewind__scroll-wrapper"
             {{didInsert this.registerScrollWrapper}}
-            {{on "scroll" this.handleScroll}}
           >
 
             {{#each this.rewind as |report|}}

assets/javascripts/discourse/connectors/after-header-panel/rewind-decoration.gjs

@@ -28,7 +28,10 @@ export default class AvatarDecorator extends Component {
   }
 
   get showDecorator() {
-    return this.currentUser?.is_rewind_active && !this.dismissed;
+    return (
+      this.currentUser?.is_development_env ||
+      (this.currentUser?.is_rewind_active && !this.dismissed)
+    );
   }
 
   <template>

assets/javascripts/discourse/connectors/before-panel-body/rewind-callout.gjs

@@ -4,6 +4,7 @@ import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
 import icon from "discourse/helpers/d-icon";
 import KeyValueStore from "discourse/lib/key-value-store";
+import { i18n } from "discourse-i18n";
 
 export default class RewindCallout extends Component {
   @service router;
@@ -12,7 +13,10 @@ export default class RewindCallout extends Component {
   store = new KeyValueStore("discourse_rewind_" + this.fetchYear);
 
   get showCallout() {
-    return this.currentUser?.is_rewind_active && !this.dismissed;
+    return (
+      this.currentUser?.is_rewind_active &&
+      (this.currentUser?.is_development_env || !this.dismissed)
+    );
   }
 
   // We want to show the previous year's rewind in January
@@ -47,16 +51,71 @@ export default class RewindCallout extends Component {
           @action={{this.openRewind}}
           class="rewind-callout btn-transparent"
         >
-          <img
-            class="rewind-logo -light"
-            src="/plugins/discourse-rewind/images/discourse-rewind-logo.png"
-          />
-          <img
-            class="rewind-logo -dark"
-            src="/plugins/discourse-rewind/images/discourse-rewind-logo-dark.png"
-          />
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 515.48 76.72">
+            <path d="M0 0h515.48v76.72H0z" style="fill:#faf7e4" />
+            <path
+              d="M42.27 12.67c-12.8 0-23.58 10.38-23.58 23.18v24l23.57-.02c12.8 0 23.18-10.78 23.18-23.58S55.05 12.67 42.26 12.67z"
+              style="fill:#010101"
+            />
+            <path
+              d="M42.51 21.64c-7.94 0-14.37 6.44-14.36 14.38 0 2.39.6 4.73 1.73 6.83l-2.6 8.36 9.34-2.11a14.36 14.36 0 0 0 15.85-2.73 14.371 14.371 0 0 0-9.94-24.74h-.02Z"
+              style="fill:#fcf6b2"
+            />
+            <path
+              d="M53.75 44.9a14.356 14.356 0 0 1-17.13 4.18l-9.34 2.14 9.5-1.12c6.3 3.69 14.37 2.07 18.75-3.77s3.68-14.04-1.62-19.06c3.98 5.22 3.92 12.49-.16 17.63"
+              style="fill:#29abe2"
+            />
+            <path
+              d="M52.94 42.17c-3.52 5.55-10.35 7.99-16.6 5.95l-9.06 3.1 9.34-2.11c6.65 3 14.49.54 18.24-5.72s2.2-14.34-3.59-18.77c4.51 4.78 5.2 12.01 1.68 17.55Z"
+              style="fill:#10a94d"
+            />
+            <path
+              d="M30.74 43.17c-2.6-6.27-.46-13.51 5.14-17.35S49 22.58 53.92 27.26c-4.55-5.98-12.94-7.44-19.24-3.35s-8.39 12.34-4.8 18.93l-2.6 8.36 3.46-8.04Z"
+              style="fill:#f15f25"
+            />
+            <path
+              d="M29.88 42.85a14.36 14.36 0 0 1 3.31-17.77 14.35 14.35 0 0 1 18.07-.46c-5.16-5.43-13.63-5.99-19.45-1.28-5.83 4.71-7.05 13.11-2.82 19.29l-1.71 8.59zM181.65 0l71.41 76.72h34.22L215.88 0z"
+              style="fill:#d0222b"
+            />
+            <path
+              d="m215.88 0 71.4 76.72h34.23L250.11 0z"
+              style="fill:#f15f25"
+            />
+            <path
+              d="m250.11 0 71.4 76.72h34.23L284.33 0z"
+              style="fill:#fcf6b2"
+            />
+            <path
+              d="m284.33 0 71.41 76.72h34.22L318.56 0z"
+              style="fill:#10a94d"
+            />
+            <path
+              d="m318.56 0 71.4 76.72h34.23L352.79 0z"
+              style="fill:#29abe2"
+            />
+
+            <text
+              x="108"
+              y="22"
+              text-anchor="middle"
+              dominant-baseline="middle"
+              style="font-size: 20px; transform: skewX(15deg); fill: #010101; letter-spacing: .025em;"
+            >{{i18n "discourse_rewind.title"}}</text>
+
+            <text
+              x="115"
+              y="50"
+              text-anchor="middle"
+              dominant-baseline="middle"
+              style="font-size: 32px; font-weight: bold; fill: #010101;"
+            >{{i18n "discourse_rewind.year"}}</text>
+
+          </svg>
+
+          <span class="btn no-text --special-kbd">
+            {{icon "play"}}
+          </span>
 
-          {{icon "arrow-right" class="rewind-callaout__arrow"}}
         </DButton>
       </div>
     {{/if}}

assets/stylesheets/common/_index.scss

@@ -15,3 +15,4 @@
 @import "fbff";
 @import "rewind-header";
 @import "rewind-callout";
+@import "folder-styles";