General fixes & improvements

app/assets/javascripts/notifications.js

@@ -1,28 +1,39 @@
 $(() => {
   /**
-   * @param {QPixelNotification} notification 
+   * @param {QPixelNotification} notification
    */
   const makeNotification = (notification) => {
     const template = `<div class="js-notification widget h-m-0 h-m-b-2 ${notification.is_read ? 'read' : 'is-teal'}">
         <div class="widget--body h-p-2">
             <div class="h-c-tertiary-600 h-fs-caption">
                 ${notification.community_name} &middot;
-                <span class="js-notif-state">${notification.is_read ? 'read' : `<strong>unread</strong>`}</span> &middot;
-                <span data-livestamp="${notification.created_at}">${notification.created_at}</span>
+                <span data-relstamp="${notification.created_at}"
+                      title="${notification.created_at}">
+                  ${QPixel.DOM.formatTimestamp(notification.created_at)}
+                </span>
             </div>
-            <p><a href="${notification.link}" data-id="${notification.id}"
-                  class="h-fw-bold is-not-underlined ${notification.is_read ? 'read' : ''} notification-link">${notification.content}</a></p>
-            <p class="has-font-size-caption"><a href="javascript:void(0)" data-notif-id="${notification.id}" class="js-notification-toggle">
+            <p>
+              <a href="${notification.link}"
+                 data-id="${notification.id}"
+                 class="h-fw-bold is-not-underlined ${notification.is_read ? 'read' : ''} notification-link">
+                 ${notification.content}
+              </a>
+            </p>
+            <p class="has-font-size-caption has-margin-bottom-0">
+              <a href="javascript:void(0)"
+                 data-notif-id="${notification.id}"
+                 class="js-notification-toggle">
                 <i class="fas fa-${notification.is_read ? 'envelope' : 'envelope-open'}"></i>
                 mark ${notification.is_read ? 'unread' : 'read'}
-            </a></p>
+              </a>
+            </p>
         </div>
     </div>`;
     return template;
   };
 
   /**
-   * @param {number} change 
+   * @param {number} change
    */
   const changeInboxCount = (change) => {
     const counter = $('.inbox-count');
@@ -51,20 +62,20 @@ $(() => {
   $('.inbox-toggle').on('click', async (ev) => {
     ev.preventDefault();
     const $inbox = $('.inbox');
-    if($inbox.hasClass("is-active")) {
+    if ($inbox.hasClass('is-active')) {
       const data = await QPixel.getNotifications();
 
-      const $inboxContainer = $inbox.find(".inbox--container");
+      const $inboxContainer = $inbox.find('.inbox--container');
       $inboxContainer.html('');
-  
+
       const unread = data.filter((n) => !n.is_read);
       const read = data.filter((n) => n.is_read);
-  
+
       unread.forEach((notification) => {
         const item = $(makeNotification(notification));
         $inboxContainer.append(item);
       });
-  
+
       $inboxContainer.append(`<div role="separator" class="header-slide--separator"></div>`);
       read.forEach((notification) => {
         const item = $(makeNotification(notification));
@@ -76,24 +87,31 @@ $(() => {
   $('.js-read-all-notifs').on('click', async (ev) => {
     ev.preventDefault();
 
-    await QPixel.fetchJSON('/notifications/read_all', {}, {
-      headers: { 'Accept': 'application/json' }
-    });
+    await QPixel.fetchJSON(
+      '/notifications/read_all',
+      {},
+      {
+        headers: { Accept: 'application/json' },
+      },
+    );
 
     $('.inbox-count').remove();
 
     $('.js-notification').removeClass('is-teal').addClass('read');
-    $('.js-notif-state').text('read');
     $('.js-notification-toggle').html(`<i class="fas fa-envelope"></i> mark unread`);
   });
 
   $(document).on('click', '.inbox a:not(.no-unread):not(.read):not(.js-notification-toggle)', async (evt) => {
     const $tgt = $(evt.target);
     const id = $tgt.data('id');
 
-    const resp = await QPixel.fetchJSON(`/notifications/${id}/read`, {}, {
-      headers: { 'Accept': 'application/json' }
-    });
+    const resp = await QPixel.fetchJSON(
+      `/notifications/${id}/read`,
+      {},
+      {
+        headers: { Accept: 'application/json' },
+      },
+    );
 
     const data = await resp.json();
     $tgt.parents('.js-notification')[0].outerHTML = makeNotification(data.notification);
@@ -106,9 +124,13 @@ $(() => {
     const $tgt = $(ev.target).is('a') ? $(ev.target) : $(ev.target).parents('a');
     const id = $tgt.attr('data-notif-id');
 
-    const resp = await QPixel.fetchJSON(`/notifications/${id}/read`, {}, {
-      headers: { 'Accept': 'application/json' }
-    });
+    const resp = await QPixel.fetchJSON(
+      `/notifications/${id}/read`,
+      {},
+      {
+        headers: { Accept: 'application/json' },
+      },
+    );
 
     const data = await resp.json();
     if (data.status !== 'success') {

app/assets/javascripts/posts.js

@@ -50,15 +50,19 @@ $(() => {
     const files = /** @type {HTMLInputElement} */ ($fileInput[0]).files;
     const form = /** @type {HTMLFormElement} */ ($tgt[0]);
 
-    // TODO: MaxUploadSize is a site setting and can be changed
-    if (files.length > 0 && files[0].size >= 2000000) {
+    const maxUploadSize = QPixel.MAX_UPLOAD_SIZE ?? 2 * 1024 * 1024;
+
+    if (files.length > 0 && files[0].size >= maxUploadSize) {
       const isUploadModalOpened = $('#markdown-image-upload').hasClass('is-active');
 
       const postField = $('.js-post-field');
       postField.val(postField.val()?.toString().replace(placeholder, ''));
 
       if (!isUploadModalOpened) {
-        QPixel.createNotification('danger', `Can't upload files with size more than 2MB`);
+        QPixel.createNotification(
+          'danger',
+          `Can't upload files with size more than ${QPixel.numberToHumanSize(maxUploadSize)}`,
+        );
       }
       else {
         $tgt.find('.js-max-size').addClass('has-color-red-700 error-shake');

app/assets/javascripts/profile.js

@@ -0,0 +1,32 @@
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelector('.js-submit-profile-edit')?.addEventListener('click', (ev) => {
+    const { target } = ev;
+
+    if (!QPixel.DOM?.isHTMLElement(target)) {
+      return;
+    }
+
+    const profileForm = target.closest('form');
+
+    profileForm?.querySelectorAll('input[type=file]').forEach((el) => {
+      const files = /** @type {HTMLInputElement} */ (el).files;
+
+      const maxUploadSize = QPixel.MAX_UPLOAD_SIZE ?? 2 * 1024 * 1024;
+
+      if (files.length > 0 && files[0].size >= maxUploadSize) {
+        if (!ev.defaultPrevented) {
+          ev.preventDefault();
+        }
+
+        const maxSizeCaption = profileForm?.querySelector(`.js-max-size[for='${el.id}']`);
+
+        if (!maxSizeCaption) {
+          return;
+        }
+
+        maxSizeCaption.classList.add('has-color-red-700', 'error-shake');
+        setTimeout(() => maxSizeCaption?.classList.remove('error-shake'), 1000);
+      }
+    });
+  });
+});

app/assets/javascripts/qpixel_api.js

@@ -52,6 +52,36 @@ window.QPixel = {
     popped_modals_ct += 1;
   },
 
+  supportedNumberLocales: () => {
+    try {
+      return Intl.NumberFormat.supportedLocalesOf(
+        Intl.getCanonicalLocales(QPixel.LOCALE ?? 'en')
+      );
+    } catch {
+      return ['en']
+    }
+  },
+
+  numberToHumanSize: (value) => {
+    /** @type {[number, string][]} */
+    const unitMap = [
+      [1024 ** 4, 'terabyte'],
+      [1024 ** 3, 'gigabyte'],
+      [1024 ** 2, 'megabyte'],
+      [1024 ** 1, 'kilobyte'],
+      [0, 'byte']
+    ];
+
+    const [size, unit] = unitMap.find(([size]) => value >= size) ?? [0, 'byte'];
+
+    return new Intl.NumberFormat(QPixel.supportedNumberLocales(), {
+      notation: 'compact',
+      style: 'unit',
+      unit,
+      unitDisplay: 'narrow',
+    }).format(size ? value / size : value).toUpperCase();
+  },
+
   offset: function (el) {
     const topLeft = $(el).offset();
     return {
@@ -99,7 +129,7 @@ window.QPixel = {
   },
 
   /**
-   * @type {QPixelFilter[]|null}
+   * @type {Record<string, QPixelFilter>|null}
    */
   _filters: null,
 
@@ -203,16 +233,16 @@ window.QPixel = {
   },
 
   filters: async () => {
-    if (this._filters == null) {
+    if (QPixel._filters == null) {
       // If they're still absent after loading from storage, load from the API.
       const resp = await QPixel.getJSON('/users/me/filters');
       const data = await resp.json();
 
       QPixel.Storage?.set('user_filters', data);
-      this._filters = data;
+      QPixel._filters = data;
     }
 
-    return this._filters;
+    return QPixel._filters;
   },
 
   defaultFilter: async (categoryId) => {
@@ -234,12 +264,12 @@ window.QPixel = {
         headers: { 'Accept': 'application/json' }
       });
 
-    /** @type {QPixelResponseJSON<{ filters: QPixelFilter[] }>} */
+    /** @type {QPixelResponseJSON<{ filters: Record<string, QPixelFilter> }>} */
     const data = await QPixel.parseJSONResponse(resp, 'Failed to save filter');
 
     QPixel.handleJSONResponse(data, (data) => {
-      this._filters = data.filters;
-      QPixel.Storage?.set('user_filters', this._filters);
+      QPixel._filters = data.filters;
+      QPixel.Storage?.set('user_filters', QPixel._filters);
     });
   },
 
@@ -249,12 +279,12 @@ window.QPixel = {
       method: 'DELETE'
     });
 
-    /** @type {QPixelResponseJSON<{ filters: QPixelFilter[] }>} */
+    /** @type {QPixelResponseJSON<{ filters: Record<string, QPixelFilter> }>} */
     const data = await QPixel.parseJSONResponse(resp, 'Failed to delete filter');
 
     QPixel.handleJSONResponse(data, (data) => {
-      this._filters = data.filters;
-      QPixel.Storage?.set('user_filters', this._filters);
+      QPixel._filters = data.filters;
+      QPixel.Storage?.set('user_filters', QPixel._filters);
     });
   },
 

app/assets/javascripts/qpixel_dom.js

@@ -56,6 +56,10 @@ window.QPixel ||= {};
       }, duration);
     },
 
+    formatTimestamp: (timestamp) => {
+     return moment(timestamp).format('YYYY-MM-DD hh:mm:ss UTC');
+    },
+
     getModifierState: (e) => {
       return !!e.altKey || !!e.ctrlKey || !!e.metaKey || !!e.shiftKey;
     },

app/assets/javascripts/relative_time.js

@@ -0,0 +1,47 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const updateInterval = 6e4; // updates relative time once a minute
+  let lastRunAt = -1;
+
+  /**
+   * @param {Node} el element to process
+   */
+  const processNode = (el) => {
+    if (!QPixel.DOM?.isHTMLElement(el)) {
+      return;
+    }
+
+    const { relstamp } = el.dataset;
+
+    if (!relstamp) {
+      return;
+    }
+
+    el.textContent = `${QPixel.DOM.formatTimestamp(relstamp)} (${moment(relstamp).fromNow()})`;
+  };
+
+  /**
+   * @type {FrameRequestCallback}
+   */
+  const updateRelativeTime = (timestamp) => {
+    const elapsed = timestamp - lastRunAt;
+
+    if (elapsed < updateInterval && lastRunAt !== -1) {
+      requestAnimationFrame(updateRelativeTime);
+      return;
+    }
+
+    document.querySelectorAll('[data-relstamp]').forEach(processNode);
+
+    lastRunAt = timestamp;
+    requestAnimationFrame(updateRelativeTime);
+  };
+
+  requestAnimationFrame(updateRelativeTime);
+
+  new MutationObserver(() => {
+    document.querySelectorAll('[data-relstamp]').forEach(processNode);
+  }).observe(document, {
+    attributes: true,
+    subtree: true,
+  });
+});

app/assets/stylesheets/search.scss

@@ -1,5 +1,28 @@
 @import 'variables';
 
+.search-widget {
+  gap: 0.5em;
+
+  .search-widget-input {
+    flex-grow: 1;
+    margin: 0;
+  }
+
+  @media screen and (max-width: $screen-md) {
+    flex-direction: row;
+  }
+
+  @media screen and (max-width: $screen-sm) {
+    align-items: start;
+    flex-direction: column;
+    gap: 0.15em;
+
+    .search-widget-input {
+      width: 100%;
+    }
+  }
+}
+
 .search-filters:not([open]) {
   border-top: 1px solid $muted-graphic;
 }

app/controllers/comments_controller.rb

@@ -323,7 +323,7 @@ def post
     @post = Post.find(params[:post_id])
     @comment_threads = CommentThread.accessible_to(current_user, @post)
                                     .where(post: @post)
-                                    .order(deleted: :asc, archived: :asc, reply_count: :desc)
+                                    .priority_order
     respond_to do |format|
       format.html { render layout: false }
       format.json { render json: @comment_threads }

app/helpers/site_settings_helper.rb

@@ -6,4 +6,10 @@ def rendered_description(setting)
     raw_description = setting.description || ''
     sanitize(render_markdown(raw_description))
   end
+
+  # Formats max upload size (in bytes) into a human-friendly representation
+  # @return [String] formatted value
+  def human_max_upload_size
+    number_to_human_size(SiteSetting['MaxRequestBodySize'])
+  end
 end