chore: merge main into 8.0

src/components/Elements/MainModal/scss/settings/modules/tabs/_changelog.scss

@@ -12,4 +12,8 @@
       opacity: 0.8;
     }
   }
+
+  .changelogAt {
+    text-decoration: none;
+  }
 }

src/config/constants.js

@@ -26,4 +26,4 @@ export const TWITTER_HANDLE = 'getmue';
 export const DISCORD_SERVER = 'zv8C9F8';
 export const OPENCOLLECTIVE_USERNAME = 'mue';
 
-export const VERSION = '7.1.0';
+export const VERSION = '7.1.1';

src/features/marketplace/views/ItemPage.jsx

@@ -160,12 +160,15 @@ class ItemPage extends PureComponent {
       </div>
     );
 
-    const dateObj = new Date(this.props.data.data.updated_at);
-    const formattedDate = new Intl.DateTimeFormat(shortLocale, {
-      year: 'numeric',
-      month: 'long',
-      day: '2-digit',
-    }).format(dateObj);
+    let dateObj, formattedDate;
+    if (this.props.data.data.updated_at) {
+      dateObj = new Date(this.props.data.data.updated_at);
+      formattedDate = new Intl.DateTimeFormat(shortLocale, {
+        year: 'numeric',
+        month: 'long',
+        day: '2-digit',
+      }).format(dateObj);
+    }
 
     return (
       <>
@@ -291,11 +294,12 @@ class ItemPage extends PureComponent {
                 {variables.getMessage('modals.main.marketplace.product.details')}
               </span>
               <div className="moreInfo">
-                {moreInfoItem(
-                  <MdCalendarMonth />,
-                  variables.getMessage('modals.main.marketplace.product.updated_at'),
-                  formattedDate,
-                )}
+                {this.props.data.data.updated_at &&
+                  moreInfoItem(
+                    <MdCalendarMonth />,
+                    variables.getMessage('modals.main.marketplace.product.updated_at'),
+                    formattedDate,
+                  )}
                 {this.props.data.data.quotes &&
                   moreInfoItem(
                     <MdFormatQuote />,

src/features/misc/sections/Changelog.jsx

@@ -14,6 +14,34 @@ class Changelog extends PureComponent {
     this.changelog = createRef();
   }
 
+  parseMarkdown = (text) => {
+    if (typeof text !== 'string') {
+      throw new Error('Input must be a string');
+    }
+
+    // Replace markdown syntax
+    text = text
+      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      .replace(/^## (.*$)/gm, '<span class="title">$1</span>')
+      .replace(
+        /((http|https):\/\/[^\s]+)/g,
+        '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>',
+      )
+      // resolve @ to github user link
+      .replace(
+        /@([a-zA-Z0-9-_]+)/g,
+        '<a href="https://github.com/$1" target="_blank" class="changelogAt">@$1</a>',
+      );
+
+    // Replace list items
+    text = text.replace(/^\* (.*$)/gm, '<li>$1</li>');
+
+    // Wrap list items in <ul></ul>
+    text = text.replace(/((<li>.*<\/li>\s*)+)/g, '<ul>$1</ul>');
+
+    return text;
+  };
+
   async getUpdate() {
     const releases = await fetch(
       `https://api.github.com/repos/${variables.constants.ORG_NAME}/${variables.constants.REPO_NAME}/releases`,
@@ -22,14 +50,18 @@ class Changelog extends PureComponent {
       },
     );
 
-    // get the release which tag_name is the same as the current version
-    const data = await releases.json();
-    const release = data.find((release) => release.tag_name === variables.constants.VERSION);
-
     if (this.controller.signal.aborted === true) {
       return;
     }
 
+    // get the release which tag_name is the same as the current version
+    const data = await releases.json();
+    let release = data.find((release) => release.tag_name === variables.constants.VERSION);
+
+    if (!release) {
+      release = data[0];
+    }
+
     // request the changelog
     const res = await fetch(release.url, { signal: this.controller.signal });
 

src/features/navbar/options/AppsOptions.jsx

@@ -1,6 +1,6 @@
 import variables from 'config/variables';
 
-import { useState, memo } from 'react';
+import { useState } from 'react';
 
 import Modal from 'react-modal';
 import { MdAddLink } from 'react-icons/md';
@@ -11,9 +11,9 @@ import { Button } from 'components/Elements';
 import { Row, Content, Action } from 'components/Layout/Settings/Item';
 
 import { getTitleFromUrl, isValidUrl } from 'utils/links';
-import { QuickLinks } from 'features/quicklinks';
+import { QuickLink } from 'features/quicklinks/options/QuickLink';
 
-function AppsOptions(appsEnabled) {
+function AppsOptions({ appsEnabled }) {
   const [appsModalInfo, setAppsModalInfo] = useState({
     newLink: false,
     edit: false,
@@ -126,7 +126,7 @@ function AppsOptions(appsEnabled) {
 
       <div className="messagesContainer">
         {appsModalInfo.items.map((item, i) => (
-          <QuickLinks
+          <QuickLink
             key={i}
             item={item}
             startEditLink={() => startEditLink(item)}
@@ -160,5 +160,4 @@ function AppsOptions(appsEnabled) {
   );
 }
 
-const MemorizedAppsOptions = memo(AppsOptions);
-export { MemorizedAppsOptions as default, MemorizedAppsOptions as AppsOptions };
+export { AppsOptions as default, AppsOptions };

src/features/navbar/options/NavbarOptions.jsx

@@ -16,7 +16,7 @@ function NavbarOptions() {
   const [showRefreshOptions, setShowRefreshOptions] = useState(
     localStorage.getItem('refresh') === 'true',
   );
-  const [appsEnabled, setAppsEnabled] = useState(localStorage.getItem('appsEnabled') === 'true');
+  const [appsEnabled, setAppsEnabled] = useState(localStorage.getItem('appsEnabled') === 'true' || false);
 
   const NAVBAR_SECTION = 'modals.main.settings.sections.appearance.navbar';
 

src/scss/index.scss

@@ -151,9 +151,9 @@ body {
 
 /* light theme critical error */
 @media (prefers-color-scheme: dark) {
-  /** {
-    background-color: #000000 !important;
-  } */
+  body {
+    background-color: #000;
+  }
 
   .criticalError {
     .criticalError-message {
@@ -177,8 +177,8 @@ body {
 }
 
 @media (prefers-color-scheme: light) {
-  * {
-    background-color: #fff !important;
+  body {
+    background-color: #fff;
   }
 
   .criticalError {