feat: cleanup, settings UI improvements

Co-authored-by: David Ralph <ohlookitsderpy@protonmail.com>

qodana.yaml

@@ -0,0 +1,29 @@
+#-------------------------------------------------------------------------------#
+#               Qodana analysis is configured by qodana.yaml file               #
+#             https://www.jetbrains.com/help/qodana/qodana-yaml.html            #
+#-------------------------------------------------------------------------------#
+version: "1.0"
+
+#Specify inspection profile for code analysis
+profile:
+  name: qodana.starter
+
+#Enable inspections
+#include:
+#  - name: <SomeEnabledInspectionId>
+
+#Disable inspections
+#exclude:
+#  - name: <SomeDisabledInspectionId>
+#    paths:
+#      - <path/where/not/run/inspection>
+
+#Execute shell command before Qodana execution (Applied in CI/CD pipeline)
+#bootstrap: sh ./prepare-qodana.sh
+
+#Install IDE plugins before Qodana execution (Applied in CI/CD pipeline)
+#plugins:
+#  - id: <plugin.id> #(plugin id can be found at https://plugins.jetbrains.com)
+
+#Specify Qodana linter for analysis (Applied in CI/CD pipeline)
+linter: jetbrains/qodana-js:latest

src/components/helpers/carousel/carousel.scss

@@ -10,7 +10,6 @@
 
   &.is-draggable {
     cursor: move;
-    cursor: grab;
   }
 
   &.is-dragging {

src/components/helpers/sharemodal/ShareModal.jsx

@@ -103,7 +103,7 @@ function ShareModal({ modalClose, data }) {
           <button
             onClick={() =>
               window
-                .open(`http://connect.qq.com/widget/shareqq/index.html?url=${data.url}`, '_blank')
+                .open(`https://connect.qq.com/widget/shareqq/index.html?url=${data.url}`, '_blank')
                 .focus()
             }
           >

src/components/modals/apps/Apps.jsx

@@ -1,7 +1,10 @@
-import Tooltip from 'components/helpers/tooltip/Tooltip';
+import variables from 'modules/variables';
-import './scss/index.scss';
 import { MdLinkOff } from 'react-icons/md';
 
+import Tooltip from 'components/helpers/tooltip/Tooltip';
+
+import './scss/index.scss';
+
 const Apps = ({ appsInfo }) => {
   return (
     <div className="appsShortcutContainer">
@@ -29,10 +32,12 @@ const Apps = ({ appsInfo }) => {
         ))
       ) : (
         <div className="noAppsContainer">
-          <h3>
+          <div className="emptyNewMessage">
-            No app links found
             <MdLinkOff />
-          </h3>
+            <span className="title">
+              {variables.language.getMessage(variables.languagecode, 'widgets.navbar.apps.no_apps')}
+            </span>
+          </div>
         </div>
       )}
     </div>

src/components/modals/apps/scss/index.scss

@@ -3,75 +3,75 @@
 $appsWidth: 21rem;
 
 .appsShortcutContainer {
-	max-height: 35rem;
+  max-height: 35rem;
-	overflow-y: auto;
+  overflow-y: auto;
-	// scrollbar-width: thin;
+  // scrollbar-width: thin;
-	border-radius: 0.8em;
+  border-radius: 0.8em;
-	padding: 1.2em;
+  padding: 1.2em;
-	display: grid;
+  display: grid;
-	grid-template-columns: repeat(3, auto);
+  grid-template-columns: repeat(3, auto);
-	grid-auto-rows: 100px;
+  grid-auto-rows: 100px;
-	gap: 10px;
+  gap: 10px;
-	place-items: center;
+  place-items: center;
 
-	@include themed {
+  @include themed {
-		background: t($modal-secondaryColour);
+    background: t($modal-secondaryColour);
-	}
+  }
 
-	.noAppsContainer {
+  .noAppsContainer {
-		h3 {
+    h3 {
-			margin: 0;
+      margin: 0;
-			display: flex;
+      display: flex;
-			align-items: center;
+      align-items: center;
-		}
+    }
-		
+
-		svg {
+    svg {
-			font-size: 30px;
+      font-size: 30px;
-			margin-left: 10px;
+      margin-left: 10px;
-		}
+    }
-	}
+  }
 }
 
 .appsIcon {
-	display: inline-flex;
+  display: inline-flex;
-	align-items: center;
+  align-items: center;
-	justify-content: center;
+  justify-content: center;
-	flex-direction: column;
+  flex-direction: column;
-	text-decoration: none;
+  text-decoration: none;
-	padding: 10px;
+  padding: 10px;
-	border-radius: 0.8em;
+  border-radius: 0.8em;
-	cursor: pointer;
+  cursor: pointer;
-	width: 5rem;
+  width: 5rem;
-	height: 4.7rem;
+  height: 4.7rem;
-	transition: 0.5s;
+  transition: 0.5s;
 
-	img {
+  img {
-		border-radius: 0.6rem;
+    border-radius: 0.6rem;
-	}
+  }
-	
-	span {
-		display: inline-block;
-		width: 100%;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-		text-align: center;
-		margin-top: 10px;
-	}
 
-	&:hover {
+  span {
-		span {
+    display: inline-block;
-			white-space: initial;
+    width: 100%;
-		}
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: center;
+    margin-top: 10px;
+  }
 
-		height: max-content;
+  &:hover {
-	}
+    span {
+      white-space: initial;
+    }
 
-	@include themed {
+    height: max-content;
-		color: t($color);
+  }
 
-		&:hover {
+  @include themed {
-			background: t($modal-sidebarActive);
+    color: t($color);
-		}
+
-	}
+    &:hover {
+      background: t($modal-sidebarActive);
+    }
+  }
 }

src/components/modals/main/scss/settings/_main.scss

@@ -42,10 +42,6 @@ input {
     vertical-align: middle;
     background: none;
 
-    &::-moz-color-swatch-wrapper {
-      padding: 0;
-    }
-
     &::-moz-color-swatch {
       border: none;
       border-radius: 100%;

src/components/modals/main/scss/settings/modules/tabs/_about.scss

@@ -47,3 +47,9 @@
     }
   }
 }
+
+.aboutText {
+  text-align: center;
+  display: flex;
+  flex-flow: column;
+}

src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss

@@ -22,7 +22,6 @@ div.color-preview-area > div > div:nth-child(5) {
 }
 
 .input-field .label {
-  color: inherit;
   color: var(--modal-text) !important;
 }
 

src/components/modals/main/settings/ChipSelect.jsx

@@ -8,7 +8,7 @@ import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';
 import Chip from '@mui/material/Chip';
 
-function ChipSelect({ label, options, name }) {
+function ChipSelect({ label, options }) {
   let start = (localStorage.getItem('apiCategories') || '').split(',');
   if (start[0] === '') {
     start = [];

src/components/modals/main/settings/sections/About.jsx

@@ -20,8 +20,8 @@ export default class About extends PureComponent {
       update: variables.getMessage('modals.main.settings.sections.about.version.checking_update'),
       loading: variables.getMessage('modals.main.loading'),
       image: document.body.classList.contains('dark')
-        ? 'icons/mue_dark.png'
+        ? 'icons/mue_about.png'
-        : 'icons/mue_light.png',
+        : 'icons/mue_about.png',
     };
     this.controller = new AbortController();
   }
@@ -128,36 +128,51 @@ export default class About extends PureComponent {
   render() {
     return (
       <>
-        <span className="mainTitle">
-          {variables.getMessage('modals.main.settings.sections.about.title')}
-        </span>
         <div className="settingsRow" style={{ justifyContent: 'center' }}>
           <div style={{ display: 'flex', flexFlow: 'column', gap: '5px' }}>
             <img draggable={false} className="aboutLogo" src={this.state.image} alt="Logo" />
-            <span className="title">
+            <div className="aboutText">
-              {variables.getMessage('modals.main.settings.sections.about.version.title')}{' '}
+              <span className="title">Mue, By Kaiso</span>
-              {variables.constants.VERSION}
+              <span className="subtitle">
-            </span>
+                {variables.getMessage('modals.main.settings.sections.about.version.title')}{' '}
-            <span className="subtitle">({this.state.update})</span>
+                {variables.constants.VERSION}
-            <span className="subtitle">
+              </span>
-              {variables.getMessage('modals.main.settings.sections.about.copyright')}{' '}
+              <span className="subtitle">({this.state.update})</span>
-              {variables.constants.COPYRIGHT_YEAR}-{new Date().getFullYear()}{' '}
+            </div>
-              <a
+            <div>
-                className="link"
+              <span className="subtitle">
-                href={
+                Copyright 2018-
-                  'https://github.com/' +
+                {new Date().getFullYear()}{' '}
-                  variables.constants.ORG_NAME +
+                <a
-                  '/' +
+                  className="link"
-                  variables.constants.REPO_NAME +
+                  href={
-                  '/graphs/contributors'
+                    'https://github.com/' +
-                }
+                    variables.constants.ORG_NAME +
-                target="_blank"
+                    '/' +
-                rel="noopener noreferrer"
+                    variables.constants.REPO_NAME +
-              >
+                    '/graphs/contributors'
-                {variables.constants.COPYRIGHT_NAME}
+                  }
-              </a>{' '}
+                  target="_blank"
-              ({variables.constants.COPYRIGHT_LICENSE})
+                  rel="noopener noreferrer"
-            </span>
+                >
+                  The Mue Authors
+                </a>
+                ,{' '}
+              </span>
+              <span className="subtitle">
+                Copyright 2023-2024{' '}
+                <a
+                  className="link"
+                  href="https://kaiso.one"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {' '}
+                  Kaiso One Ltd
+                </a>
+              </span>
+            </div>
+            <span className="subtitle">Licensed under the BSD-3-Clause License</span>
             <span className="subtitle">
               <a
                 href={variables.constants.PRIVACY_URL}

src/components/modals/main/settings/sections/Greeting.jsx

@@ -77,7 +77,7 @@ export default class GreetingSettings extends PureComponent {
           <input
             type="date"
             onChange={this.changeDate}
-            value={this.state.birthday.toISOString().substr(0, 10)}
+            value={this.state.birthday.toISOString().substring(0, 10)}
             required
           />
         </SettingsItem>

src/components/modals/main/settings/sections/Stats.jsx

@@ -1,10 +1,12 @@
 /* eslint-disable array-callback-return */
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { MdShowChart, MdRestartAlt } from 'react-icons/md';
+import { MdShowChart, MdRestartAlt, MdDownload } from 'react-icons/md';
 import { FaTrophy } from 'react-icons/fa';
 import { toast } from 'react-toastify';
 
+import { saveFile } from 'modules/helpers/settings/modals';
+
 import achievementsData from 'modules/helpers/settings/achievements.json';
 import translations from 'modules/helpers/settings/achievement_translations/index';
 
@@ -21,6 +23,7 @@ const achievementLanguage = {
   id_ID: translations.id_ID,
   tr_TR: translations.tr_TR,
   bn: translations.bn,
+  pt_BR: translations.pt_BR,
 };
 
 export default class Stats extends PureComponent {
@@ -78,6 +81,14 @@ export default class Stats extends PureComponent {
     this.forceUpdate();
   }
 
+  downloadStats() {
+    let date = new Date();
+    // Format the date as YYYY-MM-DD_HH-MM-SS
+    let formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}_${date.getHours().toString().padStart(2, '0')}-${date.getMinutes().toString().padStart(2, '0')}-${date.getSeconds().toString().padStart(2, '0')}`;
+    let filename = `mue_stats_${formattedDate}.json`;
+    saveFile(JSON.stringify(this.state.stats, null, 2), filename);
+  }
+
   componentDidMount() {
     this.getAchievements();
     this.forceUpdate();
@@ -102,7 +113,10 @@ export default class Stats extends PureComponent {
           <span className="mainTitle">
             {variables.getMessage('modals.main.settings.sections.stats.title')}
           </span>
-          <div className="statsReset">
+          <div className="headerActions">
+            <button onClick={() => this.downloadStats()}>
+              <MdDownload /> {variables.getMessage('widgets.background.download')}
+            </button>
             <button onClick={() => this.resetStats()}>
               <MdRestartAlt /> {variables.getMessage('modals.main.settings.buttons.reset')}
             </button>

src/components/modals/main/settings/sections/quicklinks/AddModal.jsx

@@ -11,7 +11,7 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
   const [icon, setIcon] = useState(edit ? editData.icon : '');
 
   return (
-    <div className="smallModal" style={{ width: '260px' }}>
+    <div className="addLinkModal">
       <div className="shareHeader">
         <span className="title">
           {edit
@@ -30,15 +30,14 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
           placeholder={variables.getMessage('widgets.quicklinks.name')}
           value={name}
           onChange={(e) => setName(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
+          style={{ gridColumn: 'span 2' }}
         />
-        <span className="dropdown-error" />
         <TextareaAutosize
           maxRows={10}
           placeholder={variables.getMessage('widgets.quicklinks.url')}
           value={url}
           onChange={(e) => setUrl(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
         />
-        <span className="dropdown-error">{urlError}</span>
         <TextareaAutosize
           maxRows={10}
           maxLines={1}
@@ -46,7 +45,11 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
           value={icon}
           onChange={(e) => setIcon(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
         />
-        <span className="dropdown-error">{iconError}</span>
+      </div>
+      <div className="addFooter">
+        <span className="dropdown-error">
+          {iconError} {urlError}
+        </span>
         {edit ? (
           <button
             style={{
@@ -63,6 +66,7 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
               height: '16px',
               fontSize: '15px',
             }}
+            className="sideload"
             onClick={() => addLink(name, url, icon)}
           >
             <MdAddLink /> {variables.getMessage('widgets.quicklinks.add')}

src/components/modals/welcome/welcome.scss

@@ -72,7 +72,7 @@
     margin: 5px;
     transition: 0.2s ease-in-out;
     cursor: pointer;
-    border-radius: 10px 10px 0x 0;
+    border-radius: 10px 10px 0 0;
     &:hover {
       background: #dd4038;
       border-radius: 10px;
@@ -202,13 +202,13 @@ a.privacy {
   }
   img {
     max-width: 60%;
-    border-radius: 10px 10px 10px 0px;
+    border-radius: 10px 10px 10px 0;
   }
 }
 
 .shareYourMue {
   padding: 8px 20px 8px 20px;
-  border-radius: 0px 0px 10px 10px;
+  border-radius: 0 0 10px 10px;
   letter-spacing: 2px;
   @include themed {
     background-color: t($modal-sidebarActive);

src/components/widgets/background/scss/_photoinformation.scss

@@ -62,8 +62,7 @@
       }
 
       .photoInformation-content {
-        padding: 20px;
+        padding: 20px 20px 20px 0;
-        padding-left: 0;
       }
 
       .map-concept {

src/components/widgets/quicklinks/quicklinks.scss

@@ -149,10 +149,40 @@ button.quicklinks {
   bottom: 515px;
 }
 
+.addLinkModal {
+  @extend %tabText;
+  padding: 15px;
+
+  @include themed {
+    background: t($modal-secondaryColour);
+  }
+
+  button {
+    @include modal-button(standard);
+    padding: 10px 30px 10px 30px;
+    float: right;
+  }
+
+  .addFooter {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .dropdown-error {
+    font-size: 16px;
+    padding-left: 5px;
+    color: #e74c3c;
+  }
+}
+
 .quicklinkModalTextbox {
-  display: flex;
+  display: grid;
-  flex-flow: column;
+  grid-template-rows: auto 1fr; /* Two rows: first auto-sized, second filling remaining space */
-  gap: 5px;
+  grid-template-columns: repeat(2, 1fr); /* Two equal-width columns for the first row */
+  grid-gap: 10px; /* Optional gap between items */
+  padding: 15px 0 15px 0;
 
   button {
     display: flex;
@@ -162,7 +192,7 @@ button.quicklinks {
   }
 
   .dropdown-error {
-    font-size: 13px;
+    font-size: 30px;
     padding-left: 5px;
     color: #e74c3c;
   }

src/components/widgets/time/clock.scss

@@ -54,6 +54,6 @@
 
   .seconds {
     font-size: 0.2em;
-    line-height: 0%;
+    line-height: 0;
   }
 }

src/components/widgets/weather/weather.scss

@@ -1,3 +1,4 @@
+//noinspection CssUnknownTarget
 @import 'scss/variables';
 
 .weather {

src/modules/constants.js

@@ -26,9 +26,6 @@ export const REPO_NAME = 'mue';
 export const EMAIL = 'hello@muetab.com';
 export const TWITTER_HANDLE = 'getmue';
 export const DISCORD_SERVER = 'zv8C9F8';
-export const COPYRIGHT_NAME = 'The Mue Authors & Kaiso One Ltd';
-export const COPYRIGHT_YEAR = '2018';
-export const COPYRIGHT_LICENSE = 'BSD-3-Clause License';
 export const OPENCOLLECTIVE_USERNAME = 'mue';
 
 export const OFFLINE_IMAGES = 20;

src/modules/helpers/settings/achievement_translations/index.js

@@ -10,6 +10,7 @@ import zh_CN from './zh_CN.json';
 import id_ID from './id_ID.json';
 import tr_TR from './tr_TR.json';
 import bn from './bn.json';
+import pt_BR from './pt_BR.json';
 
 const translations = {
   de_DE,
@@ -24,6 +25,7 @@ const translations = {
   id_ID,
   tr_TR,
   bn,
+  pt_BR,
 };
 
 export default translations;

src/modules/helpers/settings/achievement_translations/pt_BR.json

@@ -0,0 +1,8 @@
+[
+  "Opened 10 tabs",
+  "Opened 39 tabs",
+  "Opened 100 tabs",
+  "Opened 305 tabs",
+  "Installed an add-on",
+  "Installed 5 add-ons"
+]

src/modules/helpers/settings/modals.js

@@ -52,9 +52,11 @@ export function exportSettings() {
     settings[key] = localStorage.getItem(key);
   });
 
-  // i think a good improvement would be to make the file names more descriptive, or allow for saving as custom
+  let date = new Date();
-  // otherwise you'll end up with mue-settings (6000).json and have absolutely no idea what any of them are for
+  // Format the date as YYYY-MM-DD_HH-MM-SS
-  saveFile(settings, 'mue-settings.json');
+  let formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}_${date.getHours().toString().padStart(2, '0')}-${date.getMinutes().toString().padStart(2, '0')}-${date.getSeconds().toString().padStart(2, '0')}`;
+  let filename = `mue_settings_backup_${formattedDate}.json`;
+  saveFile(settings, filename);
   variables.stats.postEvent('tab', 'Settings exported');
 }
 

src/translations/bn.json

@@ -459,7 +459,6 @@
           },
           "about": {
             "title": "About",
-            "copyright": "Copyright",
             "version": {
               "title": "Version",
               "checking_update": "Checking for update",

src/translations/de_DE.json

@@ -459,7 +459,6 @@
           },
           "about": {
             "title": "Über",
-            "copyright": "Urheberrechte",
             "version": {
               "title": "Version",
               "checking_update": "Auf Update prüfen",

src/translations/en_GB.json

@@ -464,7 +464,6 @@
           },
           "about": {
             "title": "About",
-            "copyright": "Copyright",
             "version": {
               "title": "Version",
               "checking_update": "Checking for update",

src/translations/en_US.json

@@ -464,7 +464,6 @@
           },
           "about": {
             "title": "About",
-            "copyright": "Copyright",
             "version": {
               "title": "Version",
               "checking_update": "Checking for update",

src/translations/es_419.json

@@ -459,7 +459,6 @@
           },
           "about": {
             "title": "Acerca de",
-            "copyright": "Copyright",
             "version": {
               "title": "Versión",
               "checking_update": "Comprobando actualizaciones",

src/translations/fr.json

@@ -459,7 +459,6 @@
           },
           "about": {
             "title": "à propos de",
-            "copyright": "Droits d'auteur",
             "version": {
               "title": "Version",
               "checking_update": "Vérification de la mise à jour",

src/translations/id_ID.json

@@ -459,7 +459,6 @@
           },
           "about": {
             "title": "Tentang Mue",
-            "copyright": "Hak Cipta",
             "version": {
               "title": "Versi",
               "checking_update": "Periksa pembaruan",

src/translations/nl.json

@@ -113,7 +113,6 @@
           "about": {
             "contact_us": "Contact Us",
             "contributors": "Contributors",
-            "copyright": "Copyright",
             "form_button": "Forum",
             "no_supporters": "There are currently no Mue supporters",
             "photographers": "Photographers",

src/translations/no.json

@@ -459,7 +459,6 @@
           },
           "about": {
             "title": "About",
-            "copyright": "Copyright",
             "version": {
               "title": "Version",
               "checking_update": "Checking for update",

src/translations/pt.json

@@ -459,7 +459,6 @@
           },
           "about": {
             "title": "Sobre",
-            "copyright": "Direito autoral",
             "version": {
               "title": "Versão",
               "checking_update": "Verificando atualização",

src/translations/pt_BR.json

@@ -43,9 +43,9 @@
     },
     "weather": {
       "not_found": "Não encontrado",
-      "meters": "{quantidade} metros",
+      "meters": "{amount} metros",
       "extra_information": "Informação extra",
-      "feels_like": "Parece {quantia}"
+      "feels_like": "Parece {amount}"
     },
     "quote": {
       "link_tooltip": "Abrir na Wikipédia",
@@ -459,7 +459,6 @@
           },
           "about": {
             "title": "Sobre",
-            "copyright": "Direito autoral",
             "version": {
               "title": "Versão",
               "checking_update": "Verificando atualização",

src/translations/ru.json

@@ -459,7 +459,6 @@
           },
           "about": {
             "title": "О программе",
-            "copyright": "Copyright",
             "version": {
               "title": "Version",
               "checking_update": "Проверка обновлений",

src/translations/zh_CN.json

@@ -459,7 +459,6 @@
           },
           "about": {
             "title": "关于",
-            "copyright": "版权",
             "version": {
               "title": "版本",
               "checking_update": "正在检查更新……",