refactor: cleanup and remove unused stuff

.stylelintrc.json

@@ -1,6 +1,3 @@
 {
-    "extends": [
+  "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"]
-      "stylelint-config-standard-scss",
-      "stylelint-config-prettier-scss"
-    ]
 }

manifest/chrome.json

@@ -4,7 +4,7 @@
   "default_locale": "en",
   "name": "__MSG_name__",
   "description": "__MSG_description__",
-  "version": "6.0.5",
+  "version": "7.0.0",
   "homepage_url": "https://muetab.com",
   "browser_action": {
     "default_icon": "icons/128x128.png"

manifest/firefox.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Mue",
   "description": "Fast, open and free-to-use new tab page for modern browsers.",
-  "version": "6.0.5",
+  "version": "7.0.0",
   "homepage_url": "https://muetab.com",
   "browser_action": {
     "default_icon": "icons/128x128.png"

package.json

@@ -9,7 +9,7 @@
   "homepage": "https://muetab.com",
   "bugs": "https://github.com/mue/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D",
   "license": "BSD-3-Clause",
-  "version": "6.0.5",
+  "version": "7.0.0",
   "dependencies": {
     "@eartharoid/i18n": "1.0.2",
     "@emotion/react": "^11.9.0",

src/App.jsx

@@ -1,52 +1,52 @@
-import variables from 'modules/variables';
+import variables from 'modules/variables';
-import { PureComponent } from 'react';
+import { PureComponent } from 'react';
-import { ToastContainer } from 'react-toastify';
+import { ToastContainer } from 'react-toastify';
-
+
-import Background from 'components/widgets/background/Background';
+import Background from 'components/widgets/background/Background';
-import Widgets from 'components/widgets/Widgets';
+import Widgets from 'components/widgets/Widgets';
-import Modals from 'components/modals/Modals';
+import Modals from 'components/modals/Modals';
-
+
-import { loadSettings, moveSettings } from 'modules/helpers/settings';
+import { loadSettings, moveSettings } from 'modules/helpers/settings';
-
+
-import EventBus from 'modules/helpers/eventbus';
+import EventBus from 'modules/helpers/eventbus';
-
+
-export default class App extends PureComponent {
+export default class App extends PureComponent {
-  componentDidMount() {
+  componentDidMount() {
-    // 4.0 -> 5.0 (the key below is only on 5.0)
+    // 4.0 -> 5.0 (the key below is only on 5.0)
-    // now featuring 5.0 -> 5.1
+    // now featuring 5.0 -> 5.1
-    // the firstRun check was moved here because the old function was useless
+    // the firstRun check was moved here because the old function was useless
-    if (!localStorage.getItem('firstRun') || !localStorage.getItem('stats')) {
+    if (!localStorage.getItem('firstRun') || !localStorage.getItem('stats')) {
-      moveSettings();
+      moveSettings();
-      window.location.reload();
+      window.location.reload();
-    }
+    }
-
+
-    loadSettings();
+    loadSettings();
-
+
-    EventBus.on('refresh', (data) => {
+    EventBus.on('refresh', (data) => {
-      if (data === 'other') {
+      if (data === 'other') {
-        loadSettings(true);
+        loadSettings(true);
-      }
+      }
-    });
+    });
-
+
-    variables.stats.tabLoad();
+    variables.stats.tabLoad();
-  }
+  }
-
+
-  render() {
+  render() {
-    return (
+    return (
-      <>
+      <>
-        {localStorage.getItem('background') === 'true' ? <Background /> : null}
+        {localStorage.getItem('background') === 'true' ? <Background /> : null}
-        <ToastContainer
+        <ToastContainer
-          position="bottom-right"
+          position="bottom-right"
-          autoClose={localStorage.getItem('toastDisplayTime') || 2500}
+          autoClose={localStorage.getItem('toastDisplayTime') || 2500}
-          newestOnTop={true}
+          newestOnTop={true}
-          closeOnClick
+          closeOnClick
-          pauseOnFocusLoss
+          pauseOnFocusLoss
-        />
+        />
-        <div id="center">
+        <div id="center">
-          <Widgets />
+          <Widgets />
-          <Modals />
+          <Modals />
-        </div>
+        </div>
-      </>
+      </>
-    );
+    );
-  }
+  }
-}
+}

src/components/helpers/autocomplete/Autocomplete.jsx

@@ -1,7 +1,5 @@
 import { PureComponent } from 'react';
 
-import { InputBase } from '@mui/material';
-
 import EventBus from 'modules/helpers/eventbus';
 
 import './autocomplete.scss';

src/components/helpers/autocomplete/autocomplete.scss

@@ -40,5 +40,5 @@
 }
 
 .micActive {
-  box-shadow: 0px 0px 50px 9px #E74C3C !important;
+  box-shadow: 0px 0px 50px 9px #e74c3c !important;
-}
+}

src/components/helpers/preview/Preview.jsx

@@ -1,5 +1,4 @@
 import variables from 'modules/variables';
-import { MdArrowForwardIos } from 'react-icons/md';
 import './preview.scss';
 
 export default function Preview(props) {

src/components/helpers/sharemodal/ShareModal.jsx

@@ -68,6 +68,9 @@ export default function ShareModal({ modalClose, data }) {
             <MdEmail />
           </button>
         </Tooltip>
+        {/* i think that wechat has no actual share function outside of qrcodes, as the only example of a share to wechat button i've seen used this api
+          * this requires some investigating before we deploy to production
+        */ }
         <Tooltip title="WeChat">
           <button
             onClick={() =>

src/components/modals/main/marketplace/Collection.jsx

@@ -1,43 +0,0 @@
-import variables from 'modules/variables';
-
-export default function Collection({ items, toggleFunction }) {
-  return [
-    <div className="collection starWars">
-      <div className="content">
-        <div className="tags">
-          <div className="tag">
-            <span>Star Wars</span>
-          </div>
-        </div>
-        <span className="title">Star Wars Collection</span>
-        <span className="subtitle">
-          A Collection of stuff inspired by the film franchise star wars..
-        </span>
-        <button>Explore Collection</button>
-      </div>
-    </div>,
-    <div className="items">
-      {items.map((item) => (
-        <div className="item" onClick={() => toggleFunction(item)} key={item.name}>
-          <img
-            alt="icon"
-            draggable="false"
-            src={variables.constants.DDG_IMAGE_PROXY + item.icon_url}
-          />
-          <div className="card-details">
-            <span className="card-title">{item.display_name || item.name}</span>
-            <span className="card-subtitle">{item.author}</span>
-            <div className="tags">
-              <div className="tag">
-                <span>{item.author}</span>
-              </div>
-              <div className="moreTag">
-                <span>1</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>,
-  ];
-}

src/components/modals/main/marketplace/Item.jsx

@@ -4,7 +4,6 @@ import Tooltip from '../../../helpers/tooltip/Tooltip';
 import { toast } from 'react-toastify';
 import {
   MdArrowBack,
-  MdFavoriteBorder,
   MdIosShare,
   MdFlag,
   MdWarning,
@@ -20,7 +19,6 @@ import Modal from 'react-modal';
 
 import { install, uninstall } from 'modules/helpers/marketplace';
 
-import Lightbox from './Lightbox';
 import ShareModal from '../../../helpers/sharemodal/ShareModal';
 
 export default class Item extends PureComponent {
@@ -111,7 +109,7 @@ export default class Item extends PureComponent {
         </Modal>
         <div className="flexTopMarketplace">
           <div className="returnButton">
-            <Tooltip title="back" key="cheese">
+            <Tooltip title="back" key="backArrow">
               <MdArrowBack className="backArrow" onClick={this.props.toggleFunction} />
             </Tooltip>
           </div>
@@ -197,7 +195,7 @@ export default class Item extends PureComponent {
                   <MdTranslate />
                   <div className="text">
                     <span className="header">Language</span>
-                    <span>English</span>
+                    <span>{this.props.data.data.language}</span>
                   </div>
                 </div>
               ) : null}
@@ -218,10 +216,10 @@ export default class Item extends PureComponent {
             />
             {this.props.button}
             <div className="iconButtons">
-              <Tooltip title="Share" key="cheese">
+              <Tooltip title="Share" key="share">
                 <MdIosShare onClick={() => this.setState({ shareModal: true })} />
               </Tooltip>
-              <Tooltip title="Report" key="cheese">
+              <Tooltip title="Report" key="report">
                 <MdFlag
                   onClick={() =>
                     window.open(

src/components/modals/main/marketplace/sections/Added.jsx

@@ -89,7 +89,7 @@ export default class Added extends PureComponent {
     }
 
     this.setState({
-      installed: installed,
+      installed,
     });
 
     if (sendEvent) {

src/components/modals/main/marketplace/sections/Create.jsx

@@ -1,3 +1,7 @@
+// warning: this file is even worse than Background.jsx
+// if anyone wants to rewrite it to be actually decent, feel free
+// otherwise it will be cleaned up probably when alex asks me to add something here :(
+// - david
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import {
@@ -303,7 +307,10 @@ export default class Create extends PureComponent {
             onInput={(e) => setMetadata(e.target.value, 'screenshot_url')}
           />
         </SettingsItem>
-        <SettingsItem title={getMessage('modals.main.addons.create.metadata.description')} final={true}>
+        <SettingsItem
+          title={getMessage('modals.main.addons.create.metadata.description')}
+          final={true}
+        >
           <TextField
             label={getMessage('modals.main.addons.create.metadata.description')}
             varient="outlined"

src/components/modals/main/scss/index.scss

@@ -7,7 +7,6 @@
 @import 'modules/scrollbars';
 
 @import 'settings/main';
-@import 'settings/buttons';
 
 @import 'marketplace/main';
 

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

@@ -1,8 +1,9 @@
+// this file is too long
 @import 'modules/item';
 @import 'modules/buttons';
 @import 'modules/featured';
 @import 'modules/lightbox';
-@import '../../../../../scss/variables';
+@import 'scss/variables';
 
 .items {
   display: flex;
@@ -188,11 +189,13 @@
   align-items: center;
   gap: 15px;
   min-width: 100px;
+
   @include themed() {
     padding: 45px;
     border-radius: t($borderRadius);
     background: t($modal-sidebar);
     box-shadow: 0 0 0 4px t($modal-sidebarActive);
+
     svg {
       font-size: 50px;
       color: t($subColor);
@@ -288,6 +291,7 @@ p.author {
   }
 }
 
+// reminder to remove this url
 .collection {
   display: flex;
   justify-content: space-between;
@@ -296,22 +300,27 @@ p.author {
   background-image: linear-gradient(to left, transparent, #000),
     url('https://www.gonefullgeek.com/wp-content/uploads/2017/09/RDR2-Banner.jpg');
   align-items: center;
+
   @include themed() {
     box-shadow: 0 0 0 4px t($modal-sidebarActive);
     border-radius: t($borderRadius);
   }
+
   .content {
     display: flex;
     flex-flow: column;
     gap: 15px;
     max-width: 250px;
+
     .title {
       color: #fff !important;
     }
+
     .subtitle {
       color: #ccc !important;
     }
   }
+
   .items {
     justify-content: center;
   }
@@ -321,16 +330,19 @@ p.author {
   button {
     padding: 0 15px 0 15px;
   }
+
   display: flex;
   justify-content: space-between;
   padding: 15px;
   margin-top: 15px;
   align-items: center;
+
   @include themed() {
     box-shadow: 0 0 0 4px t($modal-sidebarActive);
     border-radius: t($borderRadius);
     background: t($modal-sidebar);
   }
+
   .content {
     display: flex;
     flex-flow: column;
@@ -346,16 +358,10 @@ p.author {
   flex-flow: column;
   gap: 15px;
   padding: 15px;
+
   @include themed() {
     box-shadow: 0 0 0 4px t($modal-sidebarActive);
     border-radius: t($borderRadius);
   }
 }
 
-.starWars {
-  background-image: linear-gradient(to left, transparent, #000),
-    url(https://www.broadway.org.uk/sites/default/files/styles/banner_crop/public/2019-10/star-wars-the-rise-of-skywalker-banner-min.jpg?h=639d4ef1&itok=z4KZ-3Tt);
-  background-size: cover !important;
-  background-repeat: no-repeat !important;
-  background-position: center !important;
-}

src/components/modals/main/scss/marketplace/modules/_item.scss

@@ -19,36 +19,44 @@ p.description {
   flex-wrap: wrap;
   width: calc(100% - 30px);
   gap: 15px;
+
   .items {
     margin-top: 0 !important;
   }
+
   .item {
     flex: 1 0 40% !important;
   }
+
   @include themed() {
     background: t($modal-sidebar);
     box-shadow: 0 0 0 4px t($modal-sidebarActive);
     border-radius: t($borderRadius);
     padding: 15px;
+
     .infoItem {
       display: flex;
       flex-flow: row;
       align-items: center;
       gap: 15px;
       flex: 1 0 44%;
+
       svg {
         font-size: 25px;
         color: t($subColor);
       }
+
       .text {
         display: flex;
         flex-flow: column;
       }
     }
+
     .header {
       text-transform: uppercase;
       color: t($subColor);
     }
+
     span {
       color: t($color);
     }
@@ -58,6 +66,7 @@ p.description {
 .itemTitle {
   font-size: 38px;
   font-weight: 600;
+
   @include themed() {
     color: t($color);
   }
@@ -75,6 +84,7 @@ p.description {
   gap: 5px;
   transition: 0.5s;
   cursor: pointer;
+
   @include themed() {
     &:hover {
       color: t($subColor);

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

@@ -1 +0,0 @@
-@import 'scss/modules/buttons';

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

@@ -7,8 +7,6 @@ import { BiDonateHeart } from 'react-icons/bi';
 
 import Tooltip from 'components/helpers/tooltip/Tooltip';
 
-import SettingsItem from '../SettingsItem';
-
 import other_contributors from 'modules/other_contributors.json';
 
 export default class About extends PureComponent {

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

@@ -10,7 +10,6 @@ import {
 
 import { exportSettings, importSettings } from 'modules/helpers/settings/modals';
 
-import Checkbox from '../Checkbox';
 import FileUpload from '../FileUpload';
 import Text from '../Text';
 import Switch from '../Switch';
@@ -69,12 +68,11 @@ export default class AdvancedSettings extends PureComponent {
             </div>
           </div>
         ) : null}
-        <SettingsItem title={getMessage('modals.main.settings.sections.advanced.timezone.title')} subtitle='Choose a timezone from a list of hundreds instead of the automatic default.'>
+        <SettingsItem
-          <Dropdown
+          title={getMessage('modals.main.settings.sections.advanced.timezone.title')}
-            name="timezone"
+          subtitle="Choose a timezone from a list of hundreds instead of the automatic default."
-            category="timezone"
+        >
-            manual={true}
+          <Dropdown name="timezone" category="timezone" manual={true}>
-          >
             <MenuItem value="auto">
               {getMessage('modals.main.settings.sections.advanced.timezone.automatic')}
             </MenuItem>
@@ -86,11 +84,7 @@ export default class AdvancedSettings extends PureComponent {
           </Dropdown>
         </SettingsItem>
         <SettingsItem title={getMessage('modals.main.settings.sections.advanced.tab_name')}>
-          <Text
+          <Text name="tabName" default={getMessage('tabname')} category="other" />
-            name="tabName"
-            default={getMessage('tabname')}
-            category="other"
-          />
         </SettingsItem>
         <FileUpload
           id="file-input"

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

@@ -12,32 +12,6 @@ import { values } from 'modules/helpers/settings/modals';
 export default function AppearanceSettings() {
   const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
-  const themeOptions = [
-    {
-      name: getMessage('modals.main.settings.sections.appearance.theme.auto'),
-      value: 'auto',
-    },
-    {
-      name: getMessage('modals.main.settings.sections.appearance.theme.light'),
-      value: 'light',
-    },
-    {
-      name: getMessage('modals.main.settings.sections.appearance.theme.dark'),
-      value: 'dark',
-    },
-  ];
-
-  const styleOptions = [
-    {
-      name: 'Legacy',
-      value: 'legacy',
-    },
-    {
-      name: 'New',
-      value: 'new',
-    },
-  ];
-
   return (
     <>
       <span className="mainTitle">
@@ -51,7 +25,24 @@ export default function AppearanceSettings() {
           <span className="subtitle">subtitle</span>
         </div>
         <div className="action">
-          <Radio name="theme" options={themeOptions} category="other" />
+          <Radio
+            name="theme"
+            options={[
+              {
+                name: getMessage('modals.main.settings.sections.appearance.theme.auto'),
+                value: 'auto',
+              },
+              {
+                name: getMessage('modals.main.settings.sections.appearance.theme.light'),
+                value: 'light',
+              },
+              {
+                name: getMessage('modals.main.settings.sections.appearance.theme.dark'),
+                value: 'dark',
+              },
+            ]}
+            category="other"
+          />
         </div>
       </div>
       <div className="settingsRow">
@@ -125,7 +116,20 @@ export default function AppearanceSettings() {
         title="Widget Style"
         subtitle="Choose between the two styles, legacy (enabled for pre 7.0 users) and our slick modern styling."
       >
-        <Radio name="widgetStyle" options={styleOptions} category="widgets" />
+        <Radio
+          name="widgetStyle"
+          options={[
+            {
+              name: 'Legacy',
+              value: 'legacy',
+            },
+            {
+              name: 'New',
+              value: 'new',
+            },
+          ]}
+          category="widgets"
+        />
       </SettingsItem>
 
       {/*<h3>{getMessage('modals.main.settings.sections.appearance.accessibility.title')}</h3>

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

@@ -2,7 +2,7 @@ import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { MdCancel, MdAdd } from 'react-icons/md';
 import { toast } from 'react-toastify';
-import { TextField, TextareaAutosize } from '@mui/material';
+import { TextareaAutosize } from '@mui/material';
 import SettingsItem from '../SettingsItem';
 
 import Header from '../Header';

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

@@ -50,13 +50,10 @@ export default function Navbar() {
       {showRefreshOptions ? (
         <SettingsItem
           title={getMessage('modals.main.settings.sections.appearance.navbar.refresh')}
-          subtitle='Choose what is refreshed when you click the refresh button'
+          subtitle="Choose what is refreshed when you click the refresh button"
           final={true}
         >
-          <Dropdown
+          <Dropdown name="refreshOption" category="navbar">
-            name="refreshOption"
-            category="navbar"
-          >
             <option value="page">
               {getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.page')}
             </option>

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

@@ -1,7 +1,6 @@
 import variables from 'modules/variables';
 import React, { PureComponent } from 'react';
 import { MdCancel, MdAdd } from 'react-icons/md';
-import { TextField } from '@mui/material';
 import TextareaAutosize from '@mui/material/TextareaAutosize';
 
 import Header from '../Header';

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

@@ -1,7 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import Header from '../Header';
-import Text from '../Text';
 import { MdRemoveCircleOutline } from 'react-icons/md';
 import SettingsItem from '../SettingsItem';
 export default class ReminderSettings extends PureComponent {
@@ -45,45 +44,35 @@ export default class ReminderSettings extends PureComponent {
           zoomSetting="zoomReminder"
           switch={true}
         />
-        {/*<input
-          type="color"
-          name="colour"
-          className="colour"
-          onChange={(event) => this.updateColour(event)}
-          value={this.state.colour}
-        ></input>
-        <label htmlFor={'colour'} className="customBackgroundHex">
-          {this.state.colour}
-    </label>*/}
         <SettingsItem final={true} title="Add reminder" subtitle="Add reminder">
           <button onClick={() => this.addReminder()}>Add reminder</button>
         </SettingsItem>
         <div className="reminderSettingsHolder">
-            <div className="reminderSetting">
+          <div className="reminderSetting">
-              <div>
+            <div>
-                <div className="colorPicker">
+              <div className="colorPicker">
-                  <input
+                <input
-                    type="color"
+                  type="color"
-                    name="colour"
+                  name="colour"
-                    className="colour"
+                  className="colour"
-                    onChange={(event) => this.updateColour(event)}
+                  onChange={(event) => this.updateColour(event)}
-                    value={this.state.colour}
+                  value={this.state.colour}
-                  ></input>
+                ></input>
-                  <label htmlFor={'colour'} className="customBackgroundHex">
+                <label htmlFor={'colour'} className="customBackgroundHex">
-                    {this.state.colour}
+                  {this.state.colour}
-                  </label>
+                </label>
-                </div>
-                <span className="link">
-                  <MdRemoveCircleOutline /> Remove
-                </span>
-              </div>
-              <div>
-                <span className="title">
-                  <input type="text" id="lname" placeholder="Name" />
-                </span>
-                <input type="date" required />
               </div>
+              <span className="link">
+                <MdRemoveCircleOutline /> Remove
+              </span>
             </div>
+            <div>
+              <span className="title">
+                <input type="text" id="lname" placeholder="Name" />
+              </span>
+              <input type="date" required />
+            </div>
+          </div>
         </div>
       </>
     );

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

@@ -123,7 +123,7 @@ export default class SearchSettings extends PureComponent {
         </SettingsItem>
         <SettingsItem
           title={this.getMessage('modals.main.settings.sections.search.search_engine')}
-          subtitle="cheese is gucci tbf"
+          subtitle="Choose search engine to use in the search bar"
         >
           <Dropdown
             label={this.getMessage('modals.main.settings.sections.search.search_engine')}

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

@@ -25,23 +25,26 @@ export default class TimeSettings extends PureComponent {
 
     let timeSettings = null;
 
-    const digitalOptions = [
-      {
-        name: getMessage('modals.main.settings.sections.time.digital.twentyfourhour'),
-        value: 'twentyfourhour',
-      },
-      {
-        name: getMessage('modals.main.settings.sections.time.digital.twelvehour'),
-        value: 'twelvehour',
-      },
-    ];
-
     const digitalSettings = (
       <SettingsItem
         title={getMessage('modals.main.settings.sections.time.digital.title')}
         subtitle={getMessage('modals.main.settings.sections.time.format')}
       >
-        <Radio name="timeformat" options={digitalOptions} smallTitle={true} category="clock" />
+        <Radio
+          name="timeformat"
+          options={[
+            {
+              name: getMessage('modals.main.settings.sections.time.digital.twentyfourhour'),
+              value: 'twentyfourhour',
+            },
+            {
+              name: getMessage('modals.main.settings.sections.time.digital.twelvehour'),
+              value: 'twelvehour',
+            },
+          ]}
+          smallTitle={true}
+          category="clock"
+        />
         <Checkbox
           name="seconds"
           text={getMessage('modals.main.settings.sections.time.digital.seconds')}
@@ -132,10 +135,10 @@ export default class TimeSettings extends PureComponent {
           final={true}
         >
           <Switch
-            name='Pomodoro'
+            name="Pomodoro"
             text={getMessage('modals.main.settings.enabled')}
-            category='Pomodoro'
+            category="Pomodoro"
-            element='Pomodoro'
+            element="Pomodoro"
           />
           <Slider
             title="Work Length"
@@ -145,7 +148,7 @@ export default class TimeSettings extends PureComponent {
             min="5"
             max="60"
             marks={values('pomodoroWork')}
-            display={' ' + 'ms'}
+            display={' ms'}
           />
           <Slider
             title="Break Length"
@@ -155,7 +158,7 @@ export default class TimeSettings extends PureComponent {
             min="1"
             max="45"
             marks={values('pomodoroBreak')}
-            display={' ' + 'ms'}
+            display={' ms'}
           />
         </SettingsItem>
       </>

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

@@ -61,21 +61,6 @@ export default class TimeSettings extends PureComponent {
   render() {
     const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
-    const tempFormat = [
-      {
-        name: getMessage('modals.main.settings.sections.weather.temp_format.celsius') + ' (°C)',
-        value: 'celsius',
-      },
-      {
-        name: getMessage('modals.main.settings.sections.weather.temp_format.fahrenheit') + ' (°F)',
-        value: 'fahrenheit',
-      },
-      {
-        name: getMessage('modals.main.settings.sections.weather.temp_format.kelvin') + ' (K)',
-        value: 'kelvin',
-      },
-    ];
-
     return (
       <>
         <Header
@@ -107,7 +92,28 @@ export default class TimeSettings extends PureComponent {
           </span>
         </SettingsItem>
         <SettingsItem title={getMessage('modals.main.settings.sections.weather.temp_format.title')}>
-          <Radio name="tempformat" options={tempFormat} category="weather" />
+          <Radio
+            name="tempformat"
+            options={[
+              {
+                name:
+                  getMessage('modals.main.settings.sections.weather.temp_format.celsius') + ' (°C)',
+                value: 'celsius',
+              },
+              {
+                name:
+                  getMessage('modals.main.settings.sections.weather.temp_format.fahrenheit') +
+                  ' (°F)',
+                value: 'fahrenheit',
+              },
+              {
+                name:
+                  getMessage('modals.main.settings.sections.weather.temp_format.kelvin') + ' (K)',
+                value: 'kelvin',
+              },
+            ]}
+            category="weather"
+          />
         </SettingsItem>
         {localStorage.getItem('weatherType') > 1 && (
           <SettingsItem title="Active bit" subtitle="idk a better word for it sorry">
@@ -203,21 +209,13 @@ export default class TimeSettings extends PureComponent {
           text={getMessage('modals.main.settings.sections.weather.extra_info.max_temp')}
           category="weather"
         />
-        <Checkbox 
+        <Checkbox name="feelsliketemp" text={'Feels like temperature'} category="weather" />
-          name="feelsliketemp" 
-          text={'Feels like temperature'} 
-          category="weather" 
-        />
         <Checkbox
           name="atmosphericpressure"
           text={getMessage('modals.main.settings.sections.weather.extra_info.atmospheric_pressure')}
           category="weather"
         />
-        <Checkbox
+        <Checkbox name="upcomingForecast" text="Upcoming Forecast" category="weather" />
-          name="upcomingForecast"
-          text="Upcoming Forecast"
-          category="weather"
-        />
       </>
     );
   }

src/components/modals/main/settings/sections/background/Custom.jsx

@@ -6,7 +6,6 @@ import EventBus from 'modules/helpers/eventbus';
 
 import Checkbox from '../../Checkbox';
 import FileUpload from '../../FileUpload';
-import SettingsItem from '../../SettingsItem';
 
 import Modal from 'react-modal';
 

src/components/modals/welcome/welcome.scss

@@ -277,12 +277,12 @@ a.privacy {
 }
 
 @keyframes float-in {
-  0% { 
+  0% {
-    transform: translate(0,  30px); 
+    transform: translate(0, 30px);
     opacity: 0;
   }
-  100%   { 
+  100% {
-    transform: translate(0, 0px); 
+    transform: translate(0, 0px);
     opacity: 1;
-  }   
+  }
-}
+}

src/components/widgets/Widgets.jsx

@@ -11,6 +11,10 @@ import Reminder from './reminder/Reminder';
 
 import EventBus from 'modules/helpers/eventbus';
 
+// weather is lazy loaded due to the size of the weather icons module
+// since we're using react-icons this might not be accurate,
+// however, when we used the original module https://bundlephobia.com/package/weather-icons-react@1.2.0 
+// as seen here it is ridiculously large
 const Weather = lazy(() => import('./weather/Weather'));
 const renderLoader = () => <></>;
 
@@ -68,27 +72,26 @@ export default class Widgets extends PureComponent {
   render() {
     // don't show when welcome is there
     if (this.state.welcome !== 'false') {
-      return <div id="widgets"></div>;
+      return <div id="widgets" />;
     }
 
     // allow for re-ordering widgets
-    let elements = [];
+    // we have a default to prevent errors
+    let elements = [
+      <Greeting />,
+      <Clock />,
+      <QuickLinks />,
+      <Quote />,
+      <Date />,
+      <Message />,
+      <Reminder />,
+    ];
 
     if (this.state.order) {
+      elements = [];
       this.state.order.forEach((element) => {
         elements.push(<Fragment key={element}>{this.widgets[element]}</Fragment>);
       });
-    } else {
-      // prevent error
-      elements = [
-        <Greeting />,
-        <Clock />,
-        <QuickLinks />,
-        <Quote />,
-        <Date />,
-        <Message />,
-        <Reminder />,
-      ];
     }
 
     return (

src/components/widgets/background/Favourite.jsx

@@ -27,6 +27,7 @@ export default class Favourite extends PureComponent {
       variables.stats.postEvent('feature', 'Background favourite');
     } else {
       const type = localStorage.getItem('backgroundType');
+
       switch (type) {
         case 'colour':
           return;
@@ -86,8 +87,7 @@ export default class Favourite extends PureComponent {
   }
 
   render() {
-    const backgroundType = localStorage.getItem('backgroundType');
+    if (localStorage.getItem('backgroundType') === 'colour') {
-    if (backgroundType === 'colour') {
       return null;
     }
 

src/components/widgets/background/PhotoInformation.jsx

@@ -35,8 +35,6 @@ const downloadImage = async (info) => {
   variables.stats.postEvent('feature', 'Background download');
 };
 
-
-
 // todo: copy link to unsplash/pexels page not image url
 const copyImage = (info) => {
   variables.stats.postEvent('feature', 'Background copied');
@@ -136,7 +134,6 @@ export default function PhotoInformation({ info, url, api }) {
     );
   }
 
-
   const downloadEnabled =
     localStorage.getItem('downloadbtn') === 'true' && !info.offline && !info.photographerURL && api;
   const downloadBackground = () => {
@@ -282,7 +279,9 @@ export default function PhotoInformation({ info, url, api }) {
                   <Download onClick={() => downloadImage(info)} />
                 </Tooltip>
               </div>
-              <span className='subtitle' style={{marginBottom: '20px'}}>Description</span>
+              <span className="subtitle" style={{ marginBottom: '20px' }}>
+                Description
+              </span>
               <div className="extra-content">
                 <span className="subtitle">
                   {variables.language.getMessage(

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

@@ -197,7 +197,7 @@
       color: t($link);
     }
     &:hover {
-      opacity: 0.8;    
+      opacity: 0.8;
     }
   }
   &:hover {

src/components/widgets/navbar/Navbar.jsx

@@ -1,17 +1,15 @@
 import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
-import { MdRefresh, MdSettings, MdAssignment } from 'react-icons/md';
+import { MdRefresh, MdSettings } from 'react-icons/md';
 
 import Notes from './Notes';
 import Todo from './Todo';
 import Maximise from '../background/Maximise';
 import Tooltip from 'components/helpers/tooltip/Tooltip';
-import InfoTooltip from 'components/helpers/tooltip/infoTooltip';
 
 import EventBus from 'modules/helpers/eventbus';
 
 import './scss/index.scss';
-import { FaThemeisle } from 'react-icons/fa';
 
 export default class Navbar extends PureComponent {
   constructor() {

src/components/widgets/navbar/Notes.jsx

@@ -1,10 +1,11 @@
 import variables from 'modules/variables';
-import { PureComponent, useRef } from 'react';
+import { PureComponent } from 'react';
 import { MdContentCopy, MdAssignment, MdPushPin, MdDownload } from 'react-icons/md';
 import { useFloating, shift } from '@floating-ui/react-dom';
 import TextareaAutosize from '@mui/material/TextareaAutosize';
 import { toast } from 'react-toastify';
-import Tooltip from '../../helpers/tooltip/Tooltip'; //import Hotkeys from 'react-hot-keys';
+import Tooltip from '../../helpers/tooltip/Tooltip'; 
+//import Hotkeys from 'react-hot-keys';
 import { saveFile } from 'modules/helpers/settings/modals';
 
 class Notes extends PureComponent {

src/components/widgets/navbar/Todo.jsx

@@ -41,7 +41,37 @@ class Todo extends PureComponent {
     }
   }
 
-  updateTodoState(todoContent) {
+  updateTodo(action, index, data) {
+    let todoContent = this.state.todo;
+    switch (action) {
+      case 'add':
+        todoContent.push({
+          value: '',
+          done: false,
+        });
+        break;
+      case 'remove':
+        todoContent.splice(index, 1);
+        if (todoContent.length === 0) {
+          todoContent.push({
+            value: '',
+            done: false,
+          });
+        }
+        break;
+      case 'set':
+        todoContent[index] = {
+          value: data.target.value,
+          done: todoContent[index].done,
+        };
+        break;
+      case 'done':
+        todoContent[index].done = !todoContent[index].done;
+        break;
+      default:
+        break;
+    }
+
     localStorage.setItem('todoContent', JSON.stringify(todoContent));
     this.setState({
       todo: todoContent,
@@ -49,42 +79,6 @@ class Todo extends PureComponent {
     this.forceUpdate();
   }
 
-  setTodo(index, data) {
-    let todoContent = this.state.todo;
-    todoContent[index] = {
-      value: data.target.value,
-      done: todoContent[index].done,
-    };
-    this.updateTodoState(todoContent);
-  }
-
-  addTodo() {
-    let todoContent = this.state.todo;
-    todoContent.push({
-      value: '',
-      done: false,
-    });
-    this.updateTodoState(todoContent);
-  }
-
-  removeTodo(index) {
-    let todoContent = this.state.todo;
-    todoContent.splice(index, 1);
-    if (todoContent.length === 0) {
-      todoContent.push({
-        value: '',
-        done: false,
-      });
-    }
-    this.updateTodoState(todoContent);
-  }
-
-  doneTodo(index) {
-    let todoContent = this.state.todo;
-    todoContent[index].done = !todoContent[index].done;
-    this.updateTodoState(todoContent);
-  }
-
   pin() {
     variables.stats.postEvent('feature', 'Todo pin');
     if (localStorage.getItem('todoPinned') === 'true') {
@@ -134,20 +128,20 @@ class Todo extends PureComponent {
                   </button>
                 </Tooltip>
                 <Tooltip title={'Add'}>
-                  <button onClick={() => this.addTodo()}>
+                  <button onClick={() => this.updateTodo('add')}>
                     <MdPlaylistAdd />
                   </button>
                 </Tooltip>
               </div>
               <div className={'todoRows'}>
-                {this.state.todo.map((value, index) => (
+                {this.state.todo.map((_value, index) => (
                   <div
                     className={'todoRow' + (this.state.todo[index].done ? ' done' : '')}
                     key={index}
                   >
                     <Checkbox
                       checked={this.state.todo[index].done}
-                      onClick={() => this.doneTodo(index)}
+                      onClick={() => this.updateTodo('done', index)}
                     />
                     <TextareaAutosize
                       placeholder={variables.language.getMessage(
@@ -155,10 +149,10 @@ class Todo extends PureComponent {
                         'widgets.navbar.notes.placeholder',
                       )}
                       value={this.state.todo[index].value}
-                      onChange={(data) => this.setTodo(index, data)}
+                      onChange={(data) => this.updateTodo('set', index, data)}
                       readOnly={this.state.todo[index].done}
                     />
-                    <MdDelete onClick={() => this.removeTodo(index)} />
+                    <MdDelete onClick={() => this.updateTodo('remove', index)} />
                   </div>
                 ))}
               </div>
@@ -169,6 +163,7 @@ class Todo extends PureComponent {
     );
   }
 }
+
 export default function TodoWrapper() {
   const { x, y, reference, floating, strategy } = useFloating({
     placement: 'bottom',

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -68,7 +68,7 @@ export default class QuickLinks extends PureComponent {
 
     data.push({
       name: this.state.name || url,
-      url: url,
+      url,
       icon: this.state.icon || '',
       key: Math.random().toString(36).substring(7) + 1,
     });

src/components/widgets/quote/Quote.jsx

@@ -398,7 +398,7 @@ export default class Quote extends PureComponent {
         <span className="quote" ref={this.quote}>
           {this.state.quote}
         </span>
-        {(localStorage.getItem('widgetStyle') === 'legacy') ? (
+        {localStorage.getItem('widgetStyle') === 'legacy' ? (
           <>
             <div>
               <h1 className="quoteauthor" ref={this.quoteauthor}>
@@ -418,7 +418,7 @@ export default class Quote extends PureComponent {
           </>
         ) : (
           <>
-          {this.state.author !== '' ? (
+            {this.state.author !== '' ? (
               <div className="author-holder">
                 <div className="author">
                   <div
@@ -451,7 +451,9 @@ export default class Quote extends PureComponent {
                   </div>
                 </div>
               </div>
-          ) : <div ref={this.quoteauthor}></div> }
+            ) : (
+              <div ref={this.quoteauthor}></div>
+            )}
           </>
         )}
         {/*variables.keybinds.favouriteQuote && variables.keybinds.favouriteQuote !== '' ? <Hotkeys keyName={variables.keybinds.favouriteQuote} onKeyDown={() => this.favourite()} /> : null*/}

src/components/widgets/reminder/Reminder.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import './reminder.scss';
-import Tooltip from '../../helpers/tooltip/Tooltip'
+import Tooltip from '../../helpers/tooltip/Tooltip';
 import { MdClose, MdSnooze, MdWork } from 'react-icons/md';
 
 export default class Reminder extends React.PureComponent {
@@ -21,8 +21,12 @@ export default class Reminder extends React.PureComponent {
           <span className="subtitle">Time</span>
         </div>
         <div className="icons">
-          <Tooltip title='Remove'><MdClose /></Tooltip>
+          <Tooltip title="Remove">
-          <Tooltip title='Snooze'><MdSnooze /></Tooltip>
+            <MdClose />
+          </Tooltip>
+          <Tooltip title="Snooze">
+            <MdSnooze />
+          </Tooltip>
         </div>
       </div>
     );

src/components/widgets/reminder/reminder.scss

@@ -8,6 +8,7 @@
   gap: 10px;
   height: 60px;
   text-align: left;
+
   .identifier {
     color: #fff;
     height: 60px;
@@ -17,15 +18,18 @@
     justify-content: center;
     align-items: center;
   }
+
   .content {
     display: flex;
     flex-flow: column;
     padding: 10px;
   }
+
   .icons {
     display: flex;
     gap: 10px;
     padding: 10px;
+
     svg {
       @include basicIconButton(10px, 0.9rem, ui);
     }

src/components/widgets/search/Search.jsx

@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
 import { MdSearch, MdMic, MdSettings } from 'react-icons/md';
 import Tooltip from 'components/helpers/tooltip/Tooltip';
 //import Hotkeys from 'react-hot-keys';
@@ -106,7 +106,7 @@ export default class Search extends PureComponent {
 
     if (localStorage.getItem('voiceSearch') === 'true') {
       microphone = (
-        <button onClick={this.startSpeechRecognition} id='micBtn'>
+        <button onClick={this.startSpeechRecognition} id="micBtn">
           <MdMic className="micIcon" />
         </button>
       );

src/components/widgets/search/search.scss

@@ -5,12 +5,14 @@
   border-radius: 12px;
   justify-content: flex-start;
   flex-direction: row;
+
   input[type='text'] {
     @extend %basic;
     outline: none;
     border: none;
     font-size: 20px;
     padding: 10px 0 10px 20px;
+
     &::placeholder {
       @include themed() {
         color: t($color);
@@ -24,6 +26,7 @@
   gap: 10px;
   margin-top: 1px;
   margin-right: 10px;
+
   .tooltip {
     max-height: 44px;
   }
@@ -35,6 +38,7 @@
   left: 1rem;
   display: flex;
   flex-flow: column;
+
   button {
     @include basicIconButton(12px, 20px, ui);
   }
@@ -50,10 +54,12 @@
   font-size: 0.6em;
   width: 200px;
   transition: 0.5s;
+
   span {
     padding: 0.5rem;
     cursor: pointer;
     border-radius: 12px;
+
     &:hover {
       @include themed() {
         background: t($btn-backgroundHover);

src/components/widgets/time/Clock.jsx

@@ -2,8 +2,6 @@ import { PureComponent, Suspense, lazy } from 'react';
 
 import { convertTimezone } from 'modules/helpers/date';
 import EventBus from 'modules/helpers/eventbus';
-import { MdSkipNext, MdOutlineRestartAlt, MdPlayArrow } from 'react-icons/md';
-import Tooltip from '../../helpers/tooltip/Tooltip';
 
 import './clock.scss';
 import Pomodoro from './Pomodoro';
@@ -142,7 +140,10 @@ export default class Clock extends PureComponent {
           <span className="ampm">{this.state.ampm}</span>
         </span>
         {localStorage.getItem('Pomodoro') === 'true' ? (
-          <Pomodoro hours={this.state.nowGlobal.getHours} minutes={this.state.nowGlobal.getMinutes} />
+          <Pomodoro
+            hours={this.state.nowGlobal.getHours}
+            minutes={this.state.nowGlobal.getMinutes}
+          />
         ) : null}
       </>
     );

src/components/widgets/time/clock.scss

@@ -19,9 +19,11 @@
   border-radius: 100%;
   /*box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);*/
   border: none !important;
+
   @include themed() {
     border: 1px solid t($color) !important;
   }
+
   cursor: initial;
   user-select: none;
 }
@@ -39,23 +41,27 @@
   padding: 1rem;
 }
 
+// ok so if pomodoro is a separate component, why is this in clock?
+// ^ above note is for alex
 .pomodoro {
   margin-top: -20px;
-  @extend %basic; 
+  @extend %basic;
   padding: 5px 15px 5px 15px;
   font-size: 12px;
   display: flex;
   flex-flow: row;
   gap: 10px;
   align-items: center;
+
   .pomodoroTime {
     display: flex;
     flex-flow: row;
     align-items: center;
     gap: 5px;
+
     .timeRemaining {
-      
     }
+
     .type {
       color: #ccc;
       font-weight: bold;
@@ -63,13 +69,15 @@
       display: grid;
     }
   }
+
   .pomodoroControls {
     display: flex;
     flex-flow: row;
     justify-content: space-evenly;
     gap: 5px;
   }
+
   button {
     @include basicIconButton(5px, 11px, ui);
   }
-}
+}

src/components/widgets/weather/Weather.jsx

@@ -203,27 +203,27 @@ export default class Weather extends PureComponent {
             {enabled('showlocation') ? <span className="loc">{this.state.location}</span> : null}
           </div>
           <div className="expanded-info">
-          {enabled('upcomingForecast') ? (
+            {enabled('upcomingForecast') ? (
-            <>
+              <>
-            <span className="subtitle">Upcoming Forecast</span>
+                <span className="subtitle">Upcoming Forecast</span>
-            <div className="upcomingForecast">
+                <div className="upcomingForecast">
-              <div>
+                  <div>
-                <WeatherIcon name={this.state.icon} />
+                    <WeatherIcon name={this.state.icon} />
-                <span className="period">15:00</span>
+                    <span className="period">15:00</span>
-                <span className="minmax">{minmax()}</span>
+                    <span className="minmax">{minmax()}</span>
-              </div>
+                  </div>
-              <div>
+                  <div>
-                <WeatherIcon name={this.state.icon} />
+                    <WeatherIcon name={this.state.icon} />
-                <span className="period">16:00</span>
+                    <span className="period">16:00</span>
-                <span className="minmax">{minmax()}</span>
+                    <span className="minmax">{minmax()}</span>
-              </div>
+                  </div>
-              <div>
+                  <div>
-                <WeatherIcon name={this.state.icon} />
+                    <WeatherIcon name={this.state.icon} />
-                <span className="period">17:00</span>
+                    <span className="period">17:00</span>
-                <span className="minmax">{minmax()}</span>
+                    <span className="minmax">{minmax()}</span>
-              </div>
+                  </div>
-            </div>
+                </div>
-            </>
+              </>
             ) : null}
 
             <span className="subtitle">Extra Information</span>

src/components/widgets/weather/weather.scss

@@ -12,6 +12,7 @@
   width: auto;
   display: grid;
   place-items: center;
+
   &:hover {
     height: auto;
     transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
@@ -26,6 +27,7 @@
   .extra-info {
     font-size: 18px;
     gap: 40px;
+
     @include themed() {
       color: t($weather);
     }
@@ -39,6 +41,7 @@
     display: flex;
     flex-flow: row;
     justify-content: space-evenly;
+
     span {
       display: flex;
       align-items: center;
@@ -50,16 +53,20 @@
   display: flex;
   justify-content: space-between;
   gap: 25px;
+
   div {
     align-items: center;
     display: flex;
+
     svg {
       font-size: 2em !important;
     }
+
     span {
       font-size: 34px;
     }
   }
+
   .minmax {
     display: flex;
     flex-flow: column;
@@ -79,10 +86,12 @@
     align-items: center;
     gap: 20px;
   }
+
   @include themed() {
     svg {
       color: t($subColor);
     }
+
     .weatherIcon {
       font-size: 1.4em;
       display: grid;
@@ -96,22 +105,27 @@
   width: 100%;
   justify-content: space-between;
   gap: 10px;
+
   div {
     @include themed() {
       border-radius: t($borderRadius);
       border: 1px solid t($btn-backgroundHover);
       padding: 5px;
       flex: 1;
+      
       svg {
         font-size: 36px;
       }
+
       span {
         justify-content: center;
       }
+
       .period {
         color: t($color);
         font-size: 15px;
       }
+      
       .minmax {
         margin-top: 5px;
         flex-flow: column;

src/index.jsx

@@ -13,6 +13,7 @@ import Stats from 'modules/helpers/stats';
 // language
 import I18n from '@eartharoid/i18n';
 
+// this is because of vite
 import * as de_DE from './translations/de_DE.json';
 import * as en_GB from './translations/en_GB.json';
 import * as en_US from './translations/en_US.json';

src/modules/constants.js

@@ -11,7 +11,7 @@ export const OPENSTREETMAP_URL = 'https://www.openstreetmap.org';
 // Mue URLs
 export const WEBSITE_URL = 'https://muetab.com';
 export const PRIVACY_URL = 'https://muetab.com/privacy';
-export const BLOG_POST = 'https://blog.muetab.com/posts/version-6-0';
+export const BLOG_POST = 'https://blog.muetab.com/posts/version-7-0';
 export const TRANSLATIONS_URL = 'https://docs.muetab.com/translations/';
 export const REPORT_ITEM =
   'https://github.com/mue/marketplace/issues/new?assignees=&labels=item+report&template=item-report.md&title=%5BItem+Report%5D+';
@@ -28,8 +28,8 @@ export const DISCORD_SERVER = 'zv8C9F8';
 export const COPYRIGHT_NAME = 'The Mue Authors';
 export const COPYRIGHT_YEAR = '2018';
 export const COPYRIGHT_LICENSE = 'BSD-3-Clause License';
-export const SPONSORS_USERNAME = 'davidcralph';
 export const LIBERAPAY_USERNAME = 'mue';
+export const SPONSORS_USERNAME = 'davidcralph';
 export const KOFI_USERNAME = 'davidcralph';
 export const PATREON_USERNAME = 'davidcralph';
 

src/modules/helpers/eventbus.js

@@ -1,3 +1,5 @@
+// one day it might be a good idea to replace all this with redux, but it'd take
+// a lot of rewriting
 export default class EventBus {
   static on(event, callback) {
     document.addEventListener(event, (e) => {

src/modules/helpers/experimental.js

@@ -1,4 +1,4 @@
-// todo: add more
+// mainly this is just to make life easier when debugging stuff like hover
 export default function ExperimentalInit() {
   if (localStorage.getItem('debug') === 'true') {
     document.onkeydown = (e) => {

src/modules/helpers/interval.js

@@ -1,4 +1,8 @@
 // based on https://stackoverflow.com/a/47009962
+// it has been brought to my attention (many) times that this is horribly broken if the time
+// on the "Change every" setting is longer than 1 minute. I wasn't going to wait days to see
+// if the function worked, so i just assumed it did. i apologise. this function will be 
+// replaced entirely in the future probably
 export default function interval(callback, interval, name) {
   const key = name + 'interval';
   const ms = localStorage.getItem(key);

src/modules/helpers/settings/index.js

@@ -29,7 +29,7 @@ export function setDefaultSettings(reset) {
     localStorage.setItem('showWelcome', false);
   }
 
-  // Finally we set this to true so it doesn't run the function on every load
+  // finally we set this to true so it doesn't run the function on every load
   localStorage.setItem('firstRun', true);
 }
 

src/modules/helpers/settings/modals.js

@@ -17,6 +17,7 @@ export function saveFile(data, filename = 'file', type = 'text/json') {
   a.download = filename;
   a.dataset.downloadurl = [type, a.download, a.href].join(':');
 
+  // i need to see what all this actually does, i think wessel wrote this function
   event.initMouseEvent(
     'click',
     true,
@@ -39,9 +40,13 @@ export function saveFile(data, filename = 'file', type = 'text/json') {
 
 export function exportSettings() {
   const settings = {};
+
   Object.keys(localStorage).forEach((key) => {
     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
+  // otherwise you'll end up with mue-settings (6000).json and have absolutely no idea what any of them are for
   saveFile(settings, 'mue-settings.json');
   variables.stats.postEvent('tab', 'Settings exported');
 }

src/modules/variables.js

@@ -1,4 +1,4 @@
-import * as Constants from 'modules/constants';
+import * as constants from 'modules/constants';
 
 const variables = {
   language: {},
@@ -8,7 +8,7 @@ const variables = {
     postEvent: () => '',
   },
   //keybinds: {},
-  constants: Constants,
+  constants,
 };
 
 export default variables;

src/scss/_toast.scss

@@ -1,4 +1,4 @@
-@import '../variables';
+@import 'variables';
 
 .Toastify__toast-body {
   font-size: 16px !important;

src/scss/_variables.scss

@@ -1,3 +1,5 @@
+// since alex will no doubtedly be looking at this file often
+// here's a reminder: please add a new line when doing nested scss, otherwise it is messy!
 @use 'sass:map';
 @import 'mixins';
 
@@ -93,15 +95,20 @@ $themes: (
     color: t($color);
     box-shadow: t($boxShadow);
   }
+
   backdrop-filter: blur(map.get($ui-elements, 'backgroundBlur'));
+
   .title {
     font-size: 18px;
+
     @include themed() {
       color: t($color);
     }
   }
+
   .subtitle {
     font-size: 14px;
+  
     @include themed() {
       color: t($subColor);
     }
@@ -113,32 +120,40 @@ $themes: (
     font-size: 38px;
     font-weight: 600;
     margin-bottom: 15px;
+
     @include themed() {
       color: t($color);
     }
   }
+
   .title {
     font-size: 24px;
     font-weight: 600;
+
     @include themed() {
       color: t($color);
     }
   }
+
   .subtitle {
     font-size: 16px;
+
     @include themed() {
       color: t($subColor);
     }
   }
+
   .link {
     font-size: 16px;
     text-decoration: none;
     cursor: pointer;
+
     @include themed() {
       color: t($link);
     }
+
     &:hover {
-      opacity: 0.8;    
+      opacity: 0.8;
     }
   }
 }
@@ -149,10 +164,12 @@ $themes: (
       background: t($modal-sidebar);
       border: 3px solid t($modal-sidebarActive);
       color: t($color);
+
       &:hover {
         background: t($modal-sidebarActive);
       }
     }
+
     border-radius: 12px;
     height: 40px;
     font-size: 1rem;
@@ -163,17 +180,21 @@ $themes: (
     gap: 20px;
     transition: 0.5s;
     cursor: pointer;
+
     &:hover {
       background: t($modal-sidebarActive);
     }
+
     &:active {
       background: t($modal-sidebarActive);
       box-shadow: 0 0 0 1px t($color);
     }
+
     &:focus {
       background: t($modal-sidebarActive);
       box-shadow: 0 0 0 1px t($color);
     }
+
     &:disabled {
       background: t($modal-sidebarActive);
       cursor: not-allowed;
@@ -188,56 +209,69 @@ $themes: (
       color: t($color);
       box-shadow: t($boxShadow);
       border-radius: t($borderRadius);
+
       &:hover {
         background: t($btn-backgroundHover);
       }
+
       &:active {
         background: t($btn-backgroundHover);
         box-shadow: 0 0 0 1px t($color);
       }
+
       &:focus {
         background: t($btn-backgroundHover);
         box-shadow: 0 0 0 1px t($color);
       }
     }
+
     @if $type == 'modal-text' {
       color: t($color);
       background: none;
       border-radius: t($borderRadius);
+
       &:hover {
         background: t($modal-sidebarActive);
         box-shadow: 3px solid t($modal-sidebarActive);
       }
     }
+
     @if $type == 'modal' {
       background: t($modal-sidebar);
       border: 3px solid t($modal-sidebarActive);
       color: t($color);
       border-radius: t($borderRadius);
+
       &:hover {
         background: t($modal-sidebarActive);
       }
+
       &:active {
         background: t($modal-sidebarActive);
         box-shadow: 0 0 0 1px t($color);
       }
+
       &:focus {
         background: t($modal-sidebarActive);
         box-shadow: 0 0 0 1px t($color);
       }
     }
+
     @if $type == 'legacy' {
       background: none;
       color: #fff;
       border-radius: t($borderRadius);
       box-shadow: 0 0 0 0 !important;
+
       &:hover {
         background-color: rgb(66 66 66 / 23%);
       }
+
       &:active {
         background-color: rgb(66 66 66 / 23%);
         box-shadow: 0 0 0 1px t($color);
       }
+
       &:focus {
         background-color: rgb(66 66 66 / 23%);
         box-shadow: 0 0 0 1px t($color);
@@ -245,6 +279,7 @@ $themes: (
     }
   }
 
+  // this needs to be moved up!
   padding: $padding;
   font-size: $font-size;
   cursor: pointer;
@@ -259,6 +294,7 @@ $themes: (
   @include themed() {
     color: t($color);
   }
+
   &:hover {
     @include themed() {
       background: t($btn-background);

src/scss/index.scss

@@ -1,7 +1,5 @@
 @import 'variables';
-
+@import 'toast';
-@import 'modules/toast';
-@import 'modules/buttons';
 
 body {
   background: #000;
@@ -86,6 +84,8 @@ body {
 }
 
 /* fonts (imported from fontsource) */
+// i don't even know what the unicode-range is for, but we're keeping it so that nothing breaks
+// same reason as why fontsource is never updated, it broke font loading last time so it flashed
 @font-face {
   font-family: 'Lexend Deca';
   font-style: normal;

src/scss/modules/_buttons.scss

@@ -1,113 +0,0 @@
-/*%settingsButton {
-  transition: ease 0.33s;
-  color: map-get($theme-colours, 'main');
-  cursor: pointer;
-  padding: 10px 30px;
-  font-size: 20px;
-  border-radius: 24px;
-  box-shadow: 0 5px 15px rgba(128, 161, 144, 0.4);
-
-  &:hover,
-  &:active {
-    outline: none;
-    background: none;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    color: grey !important;
-    background: none;
-    border: 2px solid grey !important;
-  }
-}
-
-.dark %settingsButton {
-  box-shadow: none;
-}
-
-.pinNote {
-  @extend %settingsButton;
-
-  background-color: map-get($button-colours, 'confirm');
-  border: 2px solid map-get($button-colours, 'confirm');
-  color: map-get($theme-colours, 'main');
-  transition: 0s;
-
-  &:hover {
-    color: map-get($button-colours, 'confirm');
-  }
-
-  svg {
-    fill: currentColor;
-    width: 1em;
-    height: 1em;
-    display: inline-block;
-    font-size: 1.5rem;
-    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    flex-shrink: 0;
-    user-select: none;
-  }
-}
-
-.copyNote {
-  @extend %settingsButton;
-
-  background-color: map-get($button-colours, 'other');
-  border: 2px solid map-get($button-colours, 'other');
-  color: map-get($theme-colours, 'main');
-  transition: 0s;
-  display: inline;
-  margin: 5px;
-
-  &:hover {
-    color: map-get($button-colours, 'other');
-  }
-}
-
-.upload {
-  width: 100%;
-  height: 100%;
-  border-radius: 20px;
-  border: none;
-  outline: none;
-  padding: 50px;
-  background: var(--sidebar);
-  color: var(--modal-text);
-  cursor: pointer;
-
-  &:hover {
-    background: var(--tab-active);
-  }
-
-  svg {
-    font-size: 4em;
-  }
-
-  span {
-    font-size: 2em;
-  }
-}
-
-.cleanButton {
-  background: none;
-  border: none;
-  vertical-align: middle;
-
-  svg {
-    fill: #ff4757;
-    border-radius: 100%;
-    background-color: var(--background);
-    height: 1.2em;
-    width: 1.2em;
-    cursor: pointer;
-    transition: ease 0.5s;
-
-    &:hover {
-      border-radius: 100%;
-      background: #ff4757;
-      fill: var(--background);
-      transition: ease 0.5s;
-    }
-  }
-}
-*/

vite.config.js

@@ -4,14 +4,13 @@ import path from 'path';
 
 const isProd = process.env.NODE_ENV === 'production';
 
-
 export default defineConfig({
   plugins: [react()],
   server: {
     hmr: {
       protocol: 'ws',
       host: 'localhost',
-    }
+    },
   },
   build: {
     minify: isProd,
@@ -22,7 +21,7 @@ export default defineConfig({
       components: path.resolve(__dirname, './src/components'),
       modules: path.resolve(__dirname, './src/modules'),
       translations: path.resolve(__dirname, './src/translations'),
-      scss: path.resolve(__dirname, './src/scss')
+      scss: path.resolve(__dirname, './src/scss'),
-    }
+    },
-  }
+  },
 });