chore: run prettier, lint, make it so i can run mue

2026-07-22 08:17:28 +02:00 · 2024-08-24 00:27:59 +01:00
parent 030c056aed
commit 67649d1985
61 changed files with 153 additions and 352 deletions
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -41,7 +41,8 @@ const App = () => {
  const [showBackground, setShowBackground] = useState(false);

  useEffect(() => {
-    const storedToastDisplayTime = localStorage.getItem('toastDisplayTime') || defaults.toastDisplayTime;
+    const storedToastDisplayTime =
+      localStorage.getItem('toastDisplayTime') || defaults.toastDisplayTime;
    const storedBackground = localStorage.getItem('background') || BackgroundDefaults.background;

    if (storedToastDisplayTime) {
--- a/src/components/Elements/MainModal/backend/Tab.jsx
+++ b/src/components/Elements/MainModal/backend/Tab.jsx
@@ -72,10 +72,7 @@ function Tab({ label, currentTab, onClick, navbarTab }) {

  const icon = iconMapping[label];

-  if (
-    label === variables.getMessage('settings:sections.experimental.title') &&
-    !isExperimental
-  ) {
+  if (label === variables.getMessage('settings:sections.experimental.title') && !isExperimental) {
    return null;
  }

--- a/src/components/Elements/MainModal/backend/TabContext.jsx
+++ b/src/components/Elements/MainModal/backend/TabContext.jsx
@@ -9,9 +9,7 @@ export const useTab = () => {

 export const TabProvider = ({ children }) => {
  const [activeTab, setActiveTab] = useState('settings');
-  const [subTab, setSubTab] = useState(
-    variables.getMessage('marketplace:product.overview'),
-  );
+  const [subTab, setSubTab] = useState(variables.getMessage('marketplace:product.overview'));
  const [subSection, setSubSection] = useState('');
  const [direction, setDirection] = useState(1);

--- a/src/components/Elements/ResetModal/ResetModal.jsx
+++ b/src/components/Elements/ResetModal/ResetModal.jsx
@@ -17,9 +17,7 @@ function ResetModal({ modalClose }) {
        <span className="title">
          {variables.getMessage('settings:sections.advanced.reset_modal.title')}
        </span>
-        <Tooltip
-          title={variables.getMessage('settings:sections.advanced.reset_modal.cancel')}
-        >
+        <Tooltip title={variables.getMessage('settings:sections.advanced.reset_modal.cancel')}>
          <div className="close" onClick={modalClose}>
            <MdClose />
          </div>
--- a/src/components/Elements/Tooltip/Tooltip.jsx
+++ b/src/components/Elements/Tooltip/Tooltip.jsx
@@ -61,4 +61,4 @@ function Tooltip({ children, title, style, placement, subtitle }) {

 const MemoizedTooltip = memo(Tooltip);

-export { MemoizedTooltip as default, MemoizedTooltip as Tooltip };
+export { MemoizedTooltip as default, MemoizedTooltip as Tooltip };
--- a/src/components/Form/Settings/Dropdown/Dropdown.jsx
+++ b/src/components/Form/Settings/Dropdown/Dropdown.jsx
@@ -49,8 +49,22 @@ const Dropdown = (props) => {

  return (
    <div className="w-[100%] max-w-md">
-      <Field id={props.name} value={value} label={label} onChange={onChange} ref={dropdown} key={id}>
-        <Label id={props.name} value={value} label={label} onChange={onChange} ref={dropdown} key={id}>
+      <Field
+        id={props.name}
+        value={value}
+        label={label}
+        onChange={onChange}
+        ref={dropdown}
+        key={id}
+      >
+        <Label
+          id={props.name}
+          value={value}
+          label={label}
+          onChange={onChange}
+          ref={dropdown}
+          key={id}
+        >
          {label}
        </Label>
        <div className="relative">
@@ -78,4 +92,4 @@ const Dropdown = (props) => {
  );
 };

-export { Dropdown as default, Dropdown };
+export { Dropdown as default, Dropdown };
--- a/src/config/default.js
+++ b/src/config/default.js
@@ -4,7 +4,7 @@ const DefaultOptions = {
  toastDisplayTime: 2500,
  fontstyle: 'normal',
  fontweight: 400,
-  order: ["greeting", "time", "quicklinks", "quote", "date", "message"],
+  order: ['greeting', 'time', 'quicklinks', 'quote', 'date', 'message'],
  theme: 'auto',
  experimental: false,
  debugtimeout: 0,
@@ -12,7 +12,7 @@ const DefaultOptions = {
  animations: true,
  textBorder: 'new',
  widgetStyle: 'new',
-  showWelcome: true
+  showWelcome: true,
 };

 export default DefaultOptions;
--- a/src/features/background/components/ExcludeModal.jsx
+++ b/src/features/background/components/ExcludeModal.jsx
@@ -8,7 +8,8 @@ import defaults from '../options/default';

 function ExcludeModal({ modalClose, info }) {
  const excludeImage = async () => {
-    let backgroundExclude = JSON.parse(localStorage.getItem('backgroundExclude')) || defaults.backgroundExclude;
+    let backgroundExclude =
+      JSON.parse(localStorage.getItem('backgroundExclude')) || defaults.backgroundExclude;
    backgroundExclude.push(info.pun);
    backgroundExclude = JSON.stringify(backgroundExclude);
    localStorage.setItem('backgroundExclude', backgroundExclude);
@@ -22,9 +23,7 @@ function ExcludeModal({ modalClose, info }) {
        <span className="title">
          {variables.getMessage('settings:sections.advanced.reset_modal.title')}
        </span>
-        <Tooltip
-          title={variables.getMessage('settings:sections.advanced.reset_modal.cancel')}
-        >
+        <Tooltip title={variables.getMessage('settings:sections.advanced.reset_modal.cancel')}>
          <div className="close" onClick={modalClose}>
            <MdClose />
          </div>
--- a/src/features/background/options/Colour.jsx
+++ b/src/features/background/options/Colour.jsx
@@ -36,11 +36,7 @@ const ColourOptions = () => {

  return (
    <Row final={true}>
-      <Content
-        title={variables.getMessage(
-          'settings:sections.background.source.custom_colour',
-        )}
-      />
+      <Content title={variables.getMessage('settings:sections.background.source.custom_colour')} />
      <Action>
        <ColorPicker
          value={colour}
--- a/src/features/background/options/Custom.jsx
+++ b/src/features/background/options/Custom.jsx
@@ -85,15 +85,11 @@ export default class CustomSettings extends PureComponent {
        <>
          <Checkbox
            name="backgroundVideoLoop"
-            text={variables.getMessage(
-              'settings:sections.background.source.loop_video',
-            )}
+            text={variables.getMessage('settings:sections.background.source.loop_video')}
          />
          <Checkbox
            name="backgroundVideoMute"
-            text={variables.getMessage(
-              'settings:sections.background.source.mute_video',
-            )}
+            text={variables.getMessage('settings:sections.background.source.mute_video')}
          />
        </>
      );
@@ -108,7 +104,7 @@ export default class CustomSettings extends PureComponent {
      data = JSON.parse(localStorage.getItem('customBackground'));
    } catch (e) {
      const custom = localStorage.getItem('customBackground');
-      data = custom ? [custom] : defaults.customBackground
+      data = custom ? [custom] : defaults.customBackground;
    }

    return data;
@@ -174,11 +170,14 @@ export default class CustomSettings extends PureComponent {
          return toast(variables.getMessage('toasts.no_storage'));
        }

-        this.customBackground({
-          target: {
-            result: await filetoDataURL(res),
-          }
-        }, this.state.currentBackgroundIndex);
+        this.customBackground(
+          {
+            target: {
+              result: await filetoDataURL(res),
+            },
+          },
+          this.state.currentBackgroundIndex,
+        );
      });
      e.preventDefault();
    };
@@ -193,14 +192,10 @@ export default class CustomSettings extends PureComponent {
              <MdAddPhotoAlternate />
              <div>
                <span className="title">
-                  {variables.getMessage(
-                    'settings:sections.background.source.custom_title',
-                  )}
+                  {variables.getMessage('settings:sections.background.source.custom_title')}
                </span>
                <span className="subtitle">
-                  {variables.getMessage(
-                    'settings:sections.background.source.custom_description',
-                  )}
+                  {variables.getMessage('settings:sections.background.source.custom_description')}
                </span>
              </div>
            </div>
@@ -209,17 +204,13 @@ export default class CustomSettings extends PureComponent {
                type="settings"
                onClick={() => this.uploadCustomBackground()}
                icon={<MdOutlineFileUpload />}
-                label={variables.getMessage(
-                  'settings:sections.background.source.upload',
-                )}
+                label={variables.getMessage('settings:sections.background.source.upload')}
              />
              <Button
                type="settings"
                onClick={() => this.setState({ customURLModal: true })}
                icon={<MdAddLink />}
-                label={variables.getMessage(
-                  'settings:sections.background.source.add_url',
-                )}
+                label={variables.getMessage('settings:sections.background.source.add_url')}
              />
            </div>
          </div>
@@ -235,9 +226,7 @@ export default class CustomSettings extends PureComponent {
                    {videoCheck(url) && <MdPersonalVideo className="customvideoicon" />}
                    {this.state.customBackground.length > 0 && (
                      <Tooltip
-                        title={variables.getMessage(
-                          'settings:sections.background.source.remove',
-                        )}
+                        title={variables.getMessage('settings:sections.background.source.remove')}
                      >
                        <Button
                          type="settings"
@@ -254,25 +243,18 @@ export default class CustomSettings extends PureComponent {
                <div className="emptyNewMessage">
                  <MdAddPhotoAlternate />
                  <span className="title">
-                    {variables.getMessage(
-                      'settings:sections.background.source.drop_to_upload',
-                    )}
+                    {variables.getMessage('settings:sections.background.source.drop_to_upload')}
                  </span>
                  <span className="subtitle">
-                    {variables.getMessage(
-                      'settings:sections.background.source.formats',
-                      {
-                        list: 'jpeg, png, webp, webm, gif, mp4, webm, ogg',
-                      },
-                    )}
+                    {variables.getMessage('settings:sections.background.source.formats', {
+                      list: 'jpeg, png, webp, webm, gif, mp4, webm, ogg',
+                    })}
                  </span>
                  <Button
                    type="settings"
                    onClick={() => this.uploadCustomBackground()}
                    icon={<MdFolder />}
-                    label={variables.getMessage(
-                      'settings:sections.background.source.select',
-                    )}
+                    label={variables.getMessage('settings:sections.background.source.select')}
                  />
                </div>
              </div>
--- a/src/features/background/options/CustomURLModal.jsx
+++ b/src/features/background/options/CustomURLModal.jsx
@@ -12,9 +12,7 @@ function CustomURLModal({ modalClose, urlError, modalCloseOnly }) {
        <span className="title">
          {variables.getMessage('settings:sections.background.source.add_url')}
        </span>
-        <Tooltip
-          title={variables.getMessage('settings:sections.advanced.reset_modal.cancel')}
-        >
+        <Tooltip title={variables.getMessage('settings:sections.advanced.reset_modal.cancel')}>
          <div className="close" onClick={modalCloseOnly}>
            <MdClose />
          </div>
--- a/src/features/background/options/default.js
+++ b/src/features/background/options/default.js
@@ -16,7 +16,7 @@ const DefaultOptions = {
  customBackground: [],
  backgroundVideoLoop: true,
  backgroundVideoMute: true,
-  backgroundExclude: []
+  backgroundExclude: [],
 };

 export default DefaultOptions;
--- a/src/features/background/options/optionTypes/backgroundImageEffects.js
+++ b/src/features/background/options/optionTypes/backgroundImageEffects.js
@@ -3,15 +3,11 @@ import variables from 'config/variables';
 export const backgroundImageEffects = [
  {
    value: 'none',
-    text: variables.getMessage(
-      'settings:sections.appearance.navbar.refresh_options.none',
-    ),
+    text: variables.getMessage('settings:sections.appearance.navbar.refresh_options.none'),
  },
  {
    value: 'grayscale',
-    text: variables.getMessage(
-      'settings:sections.background.effects.filters.grayscale',
-    ),
+    text: variables.getMessage('settings:sections.background.effects.filters.grayscale'),
  },
  {
    value: 'sepia',
--- a/src/features/greeting/Greeting.jsx
+++ b/src/features/greeting/Greeting.jsx
@@ -40,7 +40,7 @@ function Greeting() {
    }

    return message;
-  }
+  };

  /**
   * It takes a date object and returns the age of the person in years.
@@ -51,7 +51,7 @@ function Greeting() {
    const diff = Date.now() - date.getTime();
    const birthday = new Date(diff);
    return Math.abs(birthday.getUTCFullYear() - 1970);
-  }
+  };

  const getGreeting = (time = 60000 - (Date.now() % 60000)) => {
    timer.current = setTimeout(() => {
@@ -119,7 +119,7 @@ function Greeting() {

      getGreeting();
    }, time);
-  }
+  };

  useEffect(() => {
    EventBus.on('refresh', (data) => {
@@ -146,7 +146,7 @@ function Greeting() {

    return () => {
      EventBus.off('refresh');
-    }
+    };
  }, []);

  return (
@@ -156,4 +156,4 @@ function Greeting() {
  );
 }

-export default Greeting;
+export default Greeting;
--- a/src/features/greeting/options/default.js
+++ b/src/features/greeting/options/default.js
@@ -1,12 +1,13 @@
 const DefaultOptions = {
  greeting: true,
  birthday: new Date(),
-  customEvents: "[{\"id\":\"widgets.greeting.christmas\",\"name\":\"Merry Christmas\",\"month\":12,\"date\":25},{\"id\":\"widgets.greeting.newyear\",\"name\":\"Happy New Year\",\"month\":1,\"date\":1},{\"id\":\"widgets.greeting.halloween\",\"name\":\"Happy Halloween\",\"month\":10,\"date\":31}]",
+  customEvents:
+    '[{"id":"widgets.greeting.christmas","name":"Merry Christmas","month":12,"date":25},{"id":"widgets.greeting.newyear","name":"Happy New Year","month":1,"date":1},{"id":"widgets.greeting.halloween","name":"Happy Halloween","month":10,"date":31}]',
  birthdayenabled: false,
  defaultGreetingMessage: true,
  greetingName: '',
  birthdayage: false,
-  zoomGreeting: 100
+  zoomGreeting: 100,
 };

 export default DefaultOptions;
--- a/src/features/marketplace/components/Collection/Collection.jsx
+++ b/src/features/marketplace/components/Collection/Collection.jsx
@@ -24,13 +24,15 @@ const Collection = ({ collection }) => {
    getCollectionData(collection.name).then((data) => {
      setSubTab(data.display_name);
    });
-  }
+  };

  return (
    <div className="collection h-[125px]" style={getStyle()}>
      <div className="content">
        <span className="title">{collection?.display_name}</span>
-        <span className="subtitle">{collection?.description ? collection?.description.substr(0, 75) : ''}</span>
+        <span className="subtitle">
+          {collection?.description ? collection?.description.substr(0, 75) : ''}
+        </span>
      </div>
      {collection?.news === true ? (
        <a
--- a/src/features/marketplace/components/Elements/ItemCard/ItemCard.jsx
+++ b/src/features/marketplace/components/Elements/ItemCard/ItemCard.jsx
@@ -144,7 +144,11 @@ function ItemCard({ item, type, onCollection, isCurator, cardStyle }) {
              e.target.src = '/icons/marketplace-placeholder.png';
            }}
          />
-          <div className="absolute top-3 right-3">{isItemInstalled(item.name) && <MdCheckCircle style={{ color: `${item.colour}` }} className="h-8 w-8" />}</div>
+          <div className="absolute top-3 right-3">
+            {isItemInstalled(item.name) && (
+              <MdCheckCircle style={{ color: `${item.colour}` }} className="h-8 w-8" />
+            )}
+          </div>
          <div className="card-details">
            <span className="card-title">{item.display_name || item.name}</span>
            {!isCurator ? (
--- a/src/features/marketplace/components/Elements/ItemCard/index.jsx
+++ b/src/features/marketplace/components/Elements/ItemCard/index.jsx
@@ -1 +1 @@
-export * from './ItemCard';
+export * from './ItemCard';
--- a/src/features/marketplace/components/Elements/ItemUtilities/ItemUtilities.jsx
+++ b/src/features/marketplace/components/Elements/ItemUtilities/ItemUtilities.jsx
@@ -74,7 +74,7 @@ const ItemUtilities = ({ itemsFilter, setItemsFilter, itemsView, setItemsView })

  return (
    <div className="w-full flex flex-row justify-between items-center">
-    {itemsFilter && <FilterOptions />}
+      {itemsFilter && <FilterOptions />}
      <div className="flex flex-row gap-2 ml-auto">
        <ItemView />
      </div>
--- a/src/features/marketplace/components/Elements/ItemUtilities/index.jsx
+++ b/src/features/marketplace/components/Elements/ItemUtilities/index.jsx
@@ -1 +1 @@
-export * from './ItemUtilities';
+export * from './ItemUtilities';
--- a/src/features/marketplace/components/Elements/SideloadFailedModal/SideloadFailedModal.jsx
+++ b/src/features/marketplace/components/Elements/SideloadFailedModal/SideloadFailedModal.jsx
@@ -8,9 +8,7 @@ function SideloadFailedModal({ modalClose, reason }) {
    <div className="smallModal">
      <div className="shareHeader">
        <span className="title">{variables.getMessage('modals.main.error_boundary.title')}</span>
-        <Tooltip
-          title={variables.getMessage('settings:sections.advanced.reset_modal.cancel')}
-        >
+        <Tooltip title={variables.getMessage('settings:sections.advanced.reset_modal.cancel')}>
          <div className="close" onClick={modalClose}>
            <MdClose />
          </div>
--- a/src/features/marketplace/components/Elements/index.jsx
+++ b/src/features/marketplace/components/Elements/index.jsx
@@ -2,4 +2,4 @@ export * from './Carousel';
 export * from './SideloadFailedModal';
 export * from './Lightbox';
 export * from './ItemCard';
-export * from './ItemUtilities';
+export * from './ItemUtilities';
--- a/src/features/marketplace/components/Items/Items.jsx
+++ b/src/features/marketplace/components/Items/Items.jsx
@@ -10,7 +10,7 @@ const NewItems = ({ items, view }) => {
      return (
        <table className="w-full">
          <thead className="text-left">
-             <tr>
+            <tr>
              <th>Name</th>
              <th>Type</th>
              {/*<th>{variables.getMessage('settings:sections.quote.author')}</th>*/}
@@ -19,12 +19,7 @@ const NewItems = ({ items, view }) => {
          </thead>
          <tbody>
            {items.map((item, index) => (
-              <ItemCard
-                item={item}
-                type={true}
-                key={index}
-                cardStyle="list"
-              />
+              <ItemCard item={item} type={true} key={index} cardStyle="list" />
            ))}
          </tbody>
        </table>
@@ -33,12 +28,7 @@ const NewItems = ({ items, view }) => {
      return (
        <div className="items">
          {items.map((item, index) => (
-            <ItemCard
-              item={item}
-              type={true}
-              key={index}
-              cardStyle="card"
-            />
+            <ItemCard item={item} type={true} key={index} cardStyle="card" />
          ))}
        </div>
      );
--- a/src/features/marketplace/components/Items/OldItems.jsx
+++ b/src/features/marketplace/components/Items/OldItems.jsx
@@ -57,9 +57,7 @@ function ItemCard({ item, toggleFunction, type, onCollection, isCurator }) {
        )}

        {type === 'all' && !onCollection ? (
-          <span className="card-type">
-            {variables.getMessage('marketplace:' + item.type)}
-          </span>
+          <span className="card-type">{variables.getMessage('marketplace:' + item.type)}</span>
        ) : null}
      </div>
    </motion.div>
--- a/src/features/marketplace/views/Browse.jsx
+++ b/src/features/marketplace/views/Browse.jsx
@@ -27,7 +27,7 @@ function Marketplace() {
  useEffect(() => {
    return () => {
      controller.abort();
-    }
+    };
  }, []);

  async function toggle(pageType, data) {
@@ -171,12 +171,8 @@ function Marketplace() {
    return errorMessage(
      <>
        <MdWifiOff />
-        <span className="title">
-          {variables.getMessage('marketplace:offline.title')}
-        </span>
-        <span className="subtitle">
-          {variables.getMessage('marketplace:offline.description')}
-        </span>
+        <span className="title">{variables.getMessage('marketplace:offline.title')}</span>
+        <span className="subtitle">{variables.getMessage('marketplace:offline.description')}</span>
      </>,
    );
  }
@@ -215,10 +211,7 @@ function Marketplace() {
    <>
      <h1
        onClick={() =>
-          changeTab(
-            'settings',
-            variables.getMessage('settings:sections.changelog.title'),
-          )
+          changeTab('settings', variables.getMessage('settings:sections.changelog.title'))
        }
      >
        See changelog
@@ -239,9 +232,7 @@ function Marketplace() {
              }
            }
          >
-            <div className="nice-tag">
-              {variables.getMessage('marketplace:collection')}
-            </div>
+            <div className="nice-tag">{variables.getMessage('marketplace:collection')}</div>
            <div className="content">
              <span className="mainTitle">{collectionTitle}</span>={' '}
            </div>
--- a/src/features/marketplace/views/CollectionPage.jsx
+++ b/src/features/marketplace/views/CollectionPage.jsx
@@ -48,11 +48,9 @@ function CollectionPage() {
      />*/}
      <div
        className="collectionPage"
-        style={
-          {
-            backgroundImage: `linear-gradient(to bottom, transparent, black), url('${selectedCollection.img}')`,
-          }
-        }
+        style={{
+          backgroundImage: `linear-gradient(to bottom, transparent, black), url('${selectedCollection.img}')`,
+        }}
      >
        <div className="nice-tag">{variables.getMessage('marketplace:collection')}</div>
        <div className="content">
--- a/src/features/marketplace/views/Create.jsx
+++ b/src/features/marketplace/views/Create.jsx
@@ -11,17 +11,12 @@ function Create() {
      <div className="emptyItems">
        <div className="emptyNewMessage">
          <MdOutlineExtensionOff />
-          <span className="title">
-            {variables.getMessage('addons:create.moved_title')}
-          </span>
+          <span className="title">{variables.getMessage('addons:create.moved_title')}</span>
          <span className="subtitle">
            {variables.getMessage('addons:create.moved_description')}
          </span>
          <div className="createButtons">
-            <Button
-              type="settings"
-              label={variables.getMessage('addons:create.moved_button')}
-            />
+            <Button type="settings" label={variables.getMessage('addons:create.moved_button')} />
          </div>
        </div>
      </div>
--- a/src/features/marketplace/views/oldLibrary.jsx
+++ b/src/features/marketplace/views/oldLibrary.jsx
@@ -69,7 +69,7 @@ export default class Added extends PureComponent {
      });
    }

-   // install(input.type, input, true, false);
+    // install(input.type, input, true, false);
    toast(variables.getMessage('toasts.installed'));
    variables.stats.postEvent('marketplace', 'Sideload');
    this.setState({
@@ -156,7 +156,7 @@ export default class Added extends PureComponent {
  removeAll() {
    try {
      this.state.installed.forEach((item) => {
-      //  uninstall(item.type, item.name);
+        //  uninstall(item.type, item.name);
      });
    } catch (e) {}

--- a/src/features/message/options/MessageOptions.jsx
+++ b/src/features/message/options/MessageOptions.jsx
@@ -82,9 +82,7 @@ function MessageOptions() {
                  </span>
                  <TextareaAutosize
                    value={messages[index]}
-                    placeholder={variables.getMessage(
-                      'settings:sections.message.content',
-                    )}
+                    placeholder={variables.getMessage('settings:sections.message.content')}
                    onChange={(e) => message(e, true, index)}
                    varient="outlined"
                    style={{ padding: '0' }}
@@ -99,7 +97,6 @@ function MessageOptions() {
                    icon={<MdCancel />}
                    label={variables.getMessage('marketplace:product.buttons.remove')}
                  />
-
                </div>
              </div>
            </div>
--- a/src/features/message/options/default.js
+++ b/src/features/message/options/default.js
@@ -1,7 +1,7 @@
 const DefaultOptions = {
  message: false,
  messages: [],
-  zoomMessage: 100
+  zoomMessage: 100,
 };

 export default DefaultOptions;
--- a/src/features/misc/sections/Changelog.jsx
+++ b/src/features/misc/sections/Changelog.jsx
@@ -16,7 +16,7 @@ function Changelog() {
  useEffect(() => {
    return () => {
      controller.abort();
-    }
+    };
  }, []);

  const getUpdate = async () => {
--- a/src/features/misc/sections/Experimental.jsx
+++ b/src/features/misc/sections/Experimental.jsx
@@ -23,9 +23,7 @@ function ExperimentalOptions() {
        {variables.getMessage('settings:sections.experimental.warning')}
      </span>
      <Row>
-        <Content
-          title={variables.getMessage('settings:sections.experimental.developer')}
-        />
+        <Content title={variables.getMessage('settings:sections.experimental.developer')} />
        <Action>
          <Checkbox name="debug" text="Debug hotkey (Ctrl + #)" element=".other" />
          <Slider
--- a/src/features/misc/sections/Language.jsx
+++ b/src/features/misc/sections/Language.jsx
@@ -9,7 +9,9 @@ import { PreferencesWrapper } from 'components/Layout';
 const options = languages.map((id) => {
  const native = new Intl.DisplayNames([id], { type: 'language' });
  // const current = new Intl.DisplayNames([variables.locale_id], { type: 'language' });
-  const current = new Intl.DisplayNames([localStorage.getItem('language')], { type: 'language' });
+  const current = new Intl.DisplayNames([localStorage.getItem('language') || 'en'], {
+    type: 'language',
+  });
  return {
    name: native.of(id),
    subname: current.of(id),
--- a/src/features/misc/views/Widgets.jsx
+++ b/src/features/misc/views/Widgets.jsx
@@ -75,4 +75,4 @@ export function Widgets() {
  );
 }

-export default Widgets;
+export default Widgets;
--- a/src/features/navbar/Navbar.jsx
+++ b/src/features/navbar/Navbar.jsx
@@ -118,9 +118,7 @@ class Navbar extends PureComponent {

          {this.state.refreshEnabled !== 'false' && <Refresh fontSize={this.state.zoomFontSize} />}

-          <Tooltip
-            title={variables.getMessage('modals.main.navbar.settings')}
-          >
+          <Tooltip title={variables.getMessage('modals.main.navbar.settings')}>
            <button
              className="navbarButton"
              onClick={() => this.props.openModal('mainModal')}
--- a/src/features/navbar/components/Apps.jsx
+++ b/src/features/navbar/components/Apps.jsx
@@ -22,7 +22,8 @@ class Apps extends PureComponent {

  setZoom() {
    this.setState({
-      zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || defaults.zoomNavbar) / 100) * 1.2) + 'rem',
+      zoomFontSize:
+        Number(((localStorage.getItem('zoomNavbar') || defaults.zoomNavbar) / 100) * 1.2) + 'rem',
    });
  }

--- a/src/features/navbar/components/Notes.jsx
+++ b/src/features/navbar/components/Notes.jsx
@@ -23,7 +23,8 @@ class Notes extends PureComponent {

  setZoom() {
    this.setState({
-      zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || defaults.zoomNavbar) / 100) * 1.2) + 'rem',
+      zoomFontSize:
+        Number(((localStorage.getItem('zoomNavbar') || defaults.zoomNavbar) / 100) * 1.2) + 'rem',
    });
  }

--- a/src/features/navbar/components/Refresh.jsx
+++ b/src/features/navbar/components/Refresh.jsx
@@ -42,9 +42,7 @@ function Refresh() {
        ]);
        break;
      default:
-        text = variables.getMessage(
-          'settings:sections.appearance.navbar.refresh_options.page',
-        );
+        text = variables.getMessage('settings:sections.appearance.navbar.refresh_options.page');
        break;
    }

--- a/src/features/navbar/components/Todo.jsx
+++ b/src/features/navbar/components/Todo.jsx
@@ -35,7 +35,8 @@ class Todo extends PureComponent {

  setZoom() {
    this.setState({
-      zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || defaults.zoomNavbar) / 100) * 1.2) + 'rem',
+      zoomFontSize:
+        Number(((localStorage.getItem('zoomNavbar') || defaults.zoomNavbar) / 100) * 1.2) + 'rem',
    });
  }

@@ -217,9 +218,7 @@ class Todo extends PureComponent {
                              readOnly={this.state.todo[index].done}
                            />
                            <Tooltip
-                              title={variables.getMessage(
-                                'marketplace:product.buttons.remove',
-                              )}
+                              title={variables.getMessage('marketplace:product.buttons.remove')}
                            >
                              <MdDelete onClick={() => this.updateTodo('remove', index)} />
                            </Tooltip>
--- a/src/features/navbar/options/default.js
+++ b/src/features/navbar/options/default.js
@@ -11,7 +11,7 @@ const DefaultOptions = {
  notesPinned: false,
  todoPinned: false,
  todo: [],
-  notes: ''
+  notes: '',
 };

 export default DefaultOptions;
--- a/src/features/quicklinks/options/QuickLinksOptions.jsx
+++ b/src/features/quicklinks/options/QuickLinksOptions.jsx
@@ -154,9 +154,7 @@ class QuickLinksOptions extends PureComponent {
        <Row>
          <Content
            title={variables.getMessage(`${QUICKLINKS_SECTION}.styling`)}
-            subtitle={variables.getMessage(
-              'settings:sections.quicklinks.styling_description',
-            )}
+            subtitle={variables.getMessage('settings:sections.quicklinks.styling_description')}
          />
          <Action>
            <Dropdown
--- a/src/features/quote/options/default.js
+++ b/src/features/quote/options/default.js
@@ -7,7 +7,7 @@ const DefaultOptions = {
  favouriteQuoteEnabled: false,
  authorLink: false,
  authorImg: true,
-  zoomQuote: 100
+  zoomQuote: 100,
 };

 export default DefaultOptions;
--- a/src/features/search/Search.jsx
+++ b/src/features/search/Search.jsx
@@ -145,9 +145,7 @@ function Search() {
      <div className="searchMain">
        <div className={classList}>
          <Icon currentSearch={currentSearch} setSearchDropdown={setSearchDropdown} />
-          <Tooltip
-            title={variables.getMessage('settings:sections.search.voice_search')}
-          >
+          <Tooltip title={variables.getMessage('settings:sections.search.voice_search')}>
            {microphone}
          </Tooltip>
        </div>
--- a/src/features/search/components/autocomplete/Autocomplete.jsx
+++ b/src/features/search/components/autocomplete/Autocomplete.jsx
@@ -7,19 +7,23 @@ import './autocomplete.scss';
 function Autocomplete(props) {
  const [filtered, setFiltered] = useState([]);
  const [input, setInput] = useState('');
-  const [autocompleteDisabled, setAutocompleteDisabled] = useState(localStorage.getItem('autocomplete') !== 'true');
+  const [autocompleteDisabled, setAutocompleteDisabled] = useState(
+    localStorage.getItem('autocomplete') !== 'true',
+  );

  const onChange = (e) => {
    if (autocompleteDisabled) {
      return setInput(e.target.value);
    }

-    setFiltered(props.suggestions.filter(
-      (suggestion) => suggestion.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1,
-    ));
+    setFiltered(
+      props.suggestions.filter(
+        (suggestion) => suggestion.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1,
+      ),
+    );
    setInput(e.target.value);
    props.onChange(e.target.value);
-  }
+  };

  const onClick = (e) => {
    setFiltered([]);
@@ -30,7 +34,7 @@ function Autocomplete(props) {
        value: e.target.innerText,
      },
    });
-  }
+  };

  useEffect(() => {
    EventBus.on('refresh', (data) => {
@@ -41,7 +45,7 @@ function Autocomplete(props) {

    return () => {
      EventBus.off('refresh');
-    }
+    };
  });

  let autocomplete = null;
--- a/src/features/search/components/dropdown/Dropdown.jsx
+++ b/src/features/search/components/dropdown/Dropdown.jsx
@@ -8,11 +8,9 @@ function Dropdown({
  currentSearch,
  searchDropdown,
  setSearchDropdown,
-  searchEngines
+  searchEngines,
 }) {
-  const customText = variables
-    .getMessage('settings:sections.search.custom')
-    .split(' ')[0];
+  const customText = variables.getMessage('settings:sections.search.custom').split(' ')[0];

  function setSearch(name, custom) {
    let _url;
--- a/src/features/search/components/dropdown/index.jsx
+++ b/src/features/search/components/dropdown/index.jsx
@@ -1 +1 @@
-export * from './Dropdown';
+export * from './Dropdown';
--- a/src/features/search/options/default.js
+++ b/src/features/search/options/default.js
@@ -3,7 +3,7 @@ const DefaultOptions = {
  searchEngine: 'duckduckgo',
  customSearchEngine: '',
  voiceSearch: false,
-  searchDropdown: false
+  searchDropdown: false,
 };

 export default DefaultOptions;
--- a/src/features/stats/api/achievements/index.js
+++ b/src/features/stats/api/achievements/index.js
@@ -38,7 +38,6 @@ import { checkAchievements, newAchievements } from './condition';
 function getLocalisedAchievementData(id) {
  // const localised = translations[variables.locale_id][id] ||
  //   translations.en-GB[id] || { name: id, description: '' };
-
  // return {
  //   name: localised.name,
  //   description: localised.description,
--- a/src/features/stats/options/ClearModal.jsx
+++ b/src/features/stats/options/ClearModal.jsx
@@ -10,9 +10,7 @@ function ClearModal({ modalClose, resetStats }) {
        <span className="title">
          {variables.getMessage('settings:sections.advanced.reset_modal.title')}
        </span>
-        <Tooltip
-          title={variables.getMessage('settings:sections.advanced.reset_modal.cancel')}
-        >
+        <Tooltip title={variables.getMessage('settings:sections.advanced.reset_modal.cancel')}>
          <div className="close" onClick={modalClose}>
            <MdClose />
          </div>
--- a/src/features/time/options/DateOptions.jsx
+++ b/src/features/time/options/DateOptions.jsx
@@ -9,7 +9,9 @@ import { Row, Content, Action, PreferencesWrapper } from 'components/Layout/Sett
 import defaults from './default';

 function DateOptions() {
-  const [dateType, setDateType] = useState(localStorage.getItem('dateType') || defaults.date.dateType);
+  const [dateType, setDateType] = useState(
+    localStorage.getItem('dateType') || defaults.date.dateType,
+  );
  const dateFormats = ['DMY', 'MDY', 'YMD'];

  const longSettings = (
@@ -71,9 +73,7 @@ function DateOptions() {
          },
          {
            value: 'slashes',
-            text: variables.getMessage(
-              'settings:sections.date.short_separator.slashes',
-            ),
+            text: variables.getMessage('settings:sections.date.short_separator.slashes'),
          },
        ]}
      />
--- a/src/features/weather/options/default.js
+++ b/src/features/weather/options/default.js
@@ -10,7 +10,7 @@ const DefaultOptions = {
  windDirection: false,
  atmosphericpressure: false,
  zoomWeather: 100,
-  location: 'London'
+  location: 'London',
 };

 export default DefaultOptions;
--- a/src/features/welcome/components/Layout/Panel.jsx
+++ b/src/features/welcome/components/Layout/Panel.jsx
@@ -7,11 +7,7 @@ const Panel = ({ children, type }) => {
      className = 'aside';
      break;
    case 'content':
-      return (
-        <section className="content">
-            {children}
-        </section>
-      );
+      return <section className="content">{children}</section>;
    default:
      className = type;
  }
--- a/src/features/welcome/components/Sections/ChooseLanguage.jsx
+++ b/src/features/welcome/components/Sections/ChooseLanguage.jsx
@@ -5,7 +5,7 @@ import { languages } from 'lib/i18n';
 import { Radio } from 'components/Form/Settings';
 import { Header, Content } from '../Layout';

-const options = languages.map(id => {
+const options = languages.map((id) => {
  const native = new Intl.DisplayNames([id], { type: 'language' });
  // const current = new Intl.DisplayNames([variables.locale_id], { type: 'language' });
  // const current = new Intl.DisplayNames([localStorage.getItem('language')], { type: 'language' });
@@ -15,7 +15,7 @@ const options = languages.map(id => {
    subname: current.of(id),
    value: id,
  };
-})
+});

 function ChooseLanguage() {
  return (
--- a/src/features/welcome/components/Sections/ImportSettings.jsx
+++ b/src/features/welcome/components/Sections/ImportSettings.jsx
@@ -48,9 +48,7 @@ function ImportSettings(props) {
        loadFunction={(e) => importSettings(e)}
      />
      <span className="title">{variables.getMessage('welcome:tip')}</span>
-      <span className="subtitle">
-        {variables.getMessage('welcome:sections.settings.tip')}
-      </span>
+      <span className="subtitle">{variables.getMessage('welcome:sections.settings.tip')}</span>
    </Content>
  );
 }
--- a/src/features/welcome/components/Sections/Intro.jsx
+++ b/src/features/welcome/components/Sections/Intro.jsx
@@ -68,9 +68,7 @@ function Intro() {
        config={{
          icon: FaDiscord,
          title: variables.getMessage('welcome:sections.intro.notices.discord_title'),
-          subtitle: variables.getMessage(
-            'welcome:sections.intro.notices.discord_description',
-          ),
+          subtitle: variables.getMessage('welcome:sections.intro.notices.discord_description'),
          link: DISCORD_LINK,
        }}
      />
@@ -78,9 +76,7 @@ function Intro() {
        config={{
          icon: FaGithub,
          title: variables.getMessage('welcome:sections.intro.notices.github_title'),
-          subtitle: variables.getMessage(
-            'welcome:sections.intro.notices.github_description',
-          ),
+          subtitle: variables.getMessage('welcome:sections.intro.notices.github_description'),
          link: GITHUB_LINK,
        }}
      />
--- a/src/features/welcome/components/Sections/PrivacyOptions.jsx
+++ b/src/features/welcome/components/Sections/PrivacyOptions.jsx
@@ -21,9 +21,7 @@ function OfflineMode() {
 function Links() {
  return (
    <>
-      <span className="title">
-        {variables.getMessage('welcome:sections.privacy.links.title')}
-      </span>
+      <span className="title">{variables.getMessage('welcome:sections.privacy.links.title')}</span>
      <a
        className="link"
        href={variables.constants.PRIVACY_URL}
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -1,13 +1,11 @@
 import { I18nLite } from '@eartharoid/i18n';
 import { importJSON } from '@eartharoid/vite-plugin-i18n/client';

-export const languages = Object
-  .keys(import.meta.glob('i18n/**/main.yml'))
-  .map(path => {
-    const parts = path.split('/');
-    const id = parts[parts.length - 2];
-    return id;
-  });
+export const languages = Object.keys(import.meta.glob('i18n/**/main.yml')).map((path) => {
+  const parts = path.split('/');
+  const id = parts[parts.length - 2];
+  return id;
+});

 /**
 * Initialise the i18n object.
--- a/src/utils/settings/default.js
+++ b/src/utils/settings/default.js
@@ -10,7 +10,9 @@ export function setDefaultSettings(reset) {

  // Languages
  const locale_ids = languages;
-  const browserLanguage = (navigator.languages && navigator.languages.find((lang) => locale_ids.includes(lang))) || navigator.language;
+  const browserLanguage =
+    (navigator.languages && navigator.languages.find((lang) => locale_ids.includes(lang))) ||
+    navigator.language;

  if (locale_ids.includes(browserLanguage)) {
    localStorage.setItem('language', browserLanguage);