Translated using Weblate (Indonesian)

Currently translated at 100.0% (80 of 80 strings)

Translation: Mue/Mue Tab - Main
Translate-URL: https://hosted.weblate.org/projects/mue/mue-tab-8-0/mue-tab-main/id/

.gitignore

@@ -2,17 +2,26 @@
 node_modules/
 .history/
 .vscode/
-build/
+extensions/
 .idea/
 dist/
+build/
+coverage/
+logs/
 
 # Files
 package-lock.json
 .stylelintcache
 yarn-error.log
+pnpm-lock.yaml
 .eslintcache
 stats.json
 yarn.lock
 keys.json
 .DS_Store
 *.zip
+i18n-fallback.json
+bun.lockb
+.env
+*.log
+*.tmp

README.md

@@ -1,121 +1,50 @@
-<img src="assets/logo.png" align="left" width="180px" height="180px"/>
-<img align="left" width="0" height="192px" hspace="10"/>
+![Mue Header](assets/mue_readme.png)
 
-> <a href="https://muetab.com/">Mue</a>
+<h1 align="center">Mue</h1>
 
-[![License](https://img.shields.io/badge/license-BSD%203-blue?style=flat-square)](/LICENSE) [![Discord](https://img.shields.io/discord/659129207208804381?label=discord&color=7289DA&style=flat-square)](https://discord.gg/zv8C9F8) [![Code Size](https://img.shields.io/github/languages/code-size/mue/mue?color=green&label=size&style=flat-square)]()
-<br>
-[![Microsoft Edge](https://img.shields.io/badge/dynamic/json?style=flat-square&label=microsoft%20edge&query=%24.version&url=https%3A%2F%2Fmicrosoftedge.microsoft.com%2Faddons%2Fgetproductdetailsbycrxid%2Faepnglgjfokepefimhbnibfjekidhmja)](https://microsoftedge.microsoft.com/addons/detail/aepnglgjfokepefimhbnibfjekidhmja) [![Firefox](https://img.shields.io/amo/v/mue?label=firefox&style=flat-square)](https://addons.mozilla.org/firefox/addon/mue) [![Chrome](https://img.shields.io/chrome-web-store/v/bngmbednanpcfochchhgbkookpiaiaid?label=chrome&style=flat-square)](https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid)
+<p align="center">A fast, open and free-to-use browser extension that gives a new, fresh and customisable tab page to modern browsers.</p>
 
-Mue is a fast, open and free-to-use browser extension that gives a new, fresh and customisable tab page to modern browsers.
+<p align="center"><i>Managed by <a href="https://kaiso.one" target="_blank">Kaiso</a> and maintained by contributors all over the world.</i></p>
 
-<br>
+<p align="center"><a href="https://muetab.com">muetab.com</a></p>
 
-## Table of contents
 
-- [Table of contents](#table-of-contents)
-- [Screenshots](#screenshots)
-- [Features](#features)
-  - [Planned Features](#planned-features)
-- [Installation](#installation)
-  - [Chrome](#chrome)
-  - [Firefox](#firefox)
-  - [Edge (Chromium)](#edge-chromium)
-  - [Whale](#whale)
-  - [Other](#other)
-- [Development](#development)
-  - [Translations](#translations)
-- [Credits](#credits)
-  - [Developers](#developers)
-  - [Translators](#translators)
-  - [Contributors](#contributors)
-  - [Resources](#resources)
 
-## Screenshots
-
-![Screenshot](assets/screenshot.webp)
-![Settings Modal](assets/screenshot2.webp)
-
-## Features
-
-- Fast and free
-- Supports multiple browsers
-- Actively developed and open source
-- Automatically updating [API](https://github.com/mue/api) with new photos, quotes and offline mode
-- Widgets such as search bar, weather, quick links, clock, date, quote, greeting
-- Settings - enable/disable various features and customise parts of Mue
-- Navbar with copy button, favourite background, notes feature etc
-- [Marketplace](https://github.com/mue/marketplace) - download custom photo packs, quote packs and preset settings made by the community
-
-### Planned Features
-
-Please see our [roadmap](https://trello.com/b/w7zhS7Hi/mue-50). We are currently working on a rewrite over on the "phoenix" branch.
+## Why Mue?
+- Beautiful and Minimalist Design
+- Customisable Layout
+- Widgets (such as weather, notes, bookmarks and more)
+- Privacy-Focused - does not track your browsing activity
+- Extensible with the Mue Marketplace
+- Open Source under the BSD-3 License
 
 ## Installation
+Mue can be downloaded on the following browsers:
 
-_A demo of the tab can be found [here](https://demo.muetab.com), and the latest GitHub commit build [here](https://mue.vercel.app)_
+- [Chrome](https://chromewebstore.google.com/detail/mue/bngmbednanpcfochchhgbkookpiaiaid)
+- [Edge](https://microsoftedge.microsoft.com/addons/detail/mue/aepnglgjfokepefimhbnibfjekidhmja)
+- [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/mue/)
+- [Whale](https://store.whale.naver.com/detail/ecllekeilcmicbfkkiknfdddbogibbnc)
 
-### Chrome
+and can be manually sideloaded on others using the files on [GitHub Releases](https://github.com/mue/mue/releases)
 
-[![Chrome Web Store Logo](assets/chrome.png)](https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid)
-<br>
-[Chrome Web Store](https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid)
 
-### Firefox
+## Demo
+A fully-featured demo of the tab extension is available in-browser at [demo.muetab.com](https://demo.muetab.com)
 
-[![Firefox Add-ons Logo](assets/firefox.png)](https://addons.mozilla.org/firefox/addon/mue)
-<br>
-[Firefox Add-ons](https://addons.mozilla.org/firefox/addon/mue)
-
-### Edge (Chromium)
-
-[Microsoft Edge Addons](https://microsoftedge.microsoft.com/addons/detail/aepnglgjfokepefimhbnibfjekidhmja)
-
-### Whale
-
-[Whale Store](https://store.whale.naver.com/detail/ecllekeilcmicbfkkiknfdddbogibbnc)
-
-### Other
-
-[GitHub Releases](https://github.com/mue/mue/releases)
 
 ## Development
+Install dependencies with ``bun install``, and then you can run any of the following scripts as needed:
 
-Please see the [documentation](https://docs.muetab.com/development#mue-tab).
+- `bun run dev[:host]` - start development server
+- `bun run build` - build production copy of Mue
+- `bun run lint[:fix]` - run linter
+- `bun run pretty` - run prettier
+- `bun run translations` - migrate old translation format to new
 
-### Translations
-
-[![Contribute on Weblate](https://hosted.weblate.org/widgets/mue/-/open-graph.png)](https://hosted.weblate.org/engage/mue/)
-
-## Credits
-
-### Developers
-
-[David Ralph](https://github.com/davidcralph) - Lead development, photographer <br/>
-[Alex Sparkes](https://github.com/alexsparkes) - Name, lead design, photographer <br/>
-[Isaac Saunders](https://github.com/eartharoid) - QA, development, photographer <br/>
-[Wessel Tip](https://github.com/Wessel) - Development <br/>
-
-### Translators
-
-[Wessel Tip](https://github.com/Wessel), [Heimen Stoffels](https://github.com/Vistaus) - Dutch <br/>
-[Alex Sparkes](https://github.com/alexsparkes), [Maxime](https://github.com/exiam) - French <br/>
-[Anders](https://github.com/FuryingFox) - Norwegian <br/>
-[Pronin Egor](https://github.com/MrZillaGold) - Russian <br/>
-[Vicente](https://github.com/Vicente015) - Spanish <br/>
-[Austin Huang](https://github.com/austinhuang0131) - Chinese (Simplified) <br/>
-[FreeFun](https://github.com/xXFreeFunXx) - German <br/>
-[Aksal](https://github.com/aksalsf) - Indonesian <br/>
-[Kağan Can Şit](https://github.com/KaganCanSit) - Turkish <br/>
-efeaydal - Turkish <br/>
-
-### Contributors
-
-Many thanks to the photographers [here](https://api.muetab.com/images/photographers) for letting us use their wonderful photographs.
-
-And finally, a big thank you to all the other [contributors](https://github.com/mue/mue/graphs/contributors)!
-
-### Resources
+## Translations
+We use [Weblate](https://weblate.org) for translations. To get started, please visit the [project](https://hosted.weblate.org/projects/mue/) and look for the latest version to start translating Mue into your langauge.
 
+## Attribution
 [Pexels](https://pexels.com), [Unsplash](https://unsplash.com) - Stock photos used for offline mode <br/>
 [Undraw](https://undraw.co) - Welcome modal images

build/finalise.js

@@ -0,0 +1,61 @@
+import fs from `node:fs`;
+import ADMZip from 'adm-zip';
+import * as pkg from '../package.json';
+
+export default function finalise(isProd) {
+  return {
+    name: 'finalise',
+      writeBundle() {
+      if (isProd) {
+        // clean up
+        if (fs.existsSync('./extensions')) {
+          fs.rmSync('./extensions', { recursive: true });
+        }
+
+        // prettify and move i18n report
+        fs.writeFileSync(
+          './i18n-fallback.json',
+          JSON.stringify(
+            JSON.parse(fs.readFileSync('./dist/i18n-fallback.json', 'utf8')),
+            null,
+            2,
+          ),
+        );
+        fs.rmSync('./dist/i18n-fallback.json');
+
+        for (const browser of ['chrome', 'firefox']) {
+          // set up
+          fs.mkdirSync(`./extensions/${browser}`, { recursive: true });
+          // copy manifest
+          fs.copyFileSync(
+            `./manifest/${browser}.json`,
+            `./extensions/${browser}/manifest.json`,
+          );
+          // copy service worker
+          fs.copyFileSync(
+            './manifest/background.js',
+            `./extensions/${browser}/background.js`,
+          );
+          // chrome is weird
+          if (browser === `${browser}`) {
+            fs.cpSync(
+              './manifest/_locales',
+              `./extensions/${browser}/_locales`,
+              {
+                recursive: true,
+              },
+            );
+          }
+          // copy build
+          fs.cpSync('./dist', `./extensions/${browser}/`, {
+            recursive: true,
+          });
+          // package
+          const cZip = new ADMZip();
+          cZip.addLocalFolder(`./extensions/${browser}`);
+          cZip.writeZip(`./extensions/${browser}-${pkg.version}.zip`);
+        }
+      }
+    },
+  }
+}

build/i18n.js

@@ -0,0 +1 @@
+// https://hosted.weblate.org/api/components/mue/mue-tab/statistics/

cypress.config.js

@@ -0,0 +1,16 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+
+  component: {
+    devServer: {
+      framework: "react",
+      bundler: "vite",
+    },
+  },
+});

cypress/e2e/appearance.cy.js

@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})

cypress/e2e/date.cy.js

@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})

cypress/e2e/greeting.cy.js

@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})

cypress/e2e/marketplace.cy.js

@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})

cypress/e2e/message.cy.js

@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})

cypress/e2e/navbar.cy.js

@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})

cypress/e2e/quicklinks.cy.js

@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})

cypress/e2e/quote.cy.js

@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})

cypress/e2e/search.cy.js

@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})

cypress/e2e/stats.cy.js

@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})

cypress/e2e/time.cy.js

@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})

cypress/e2e/weather.cy.js

@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})

cypress/e2e/welcome.cy.js

@@ -0,0 +1,200 @@
+/* eslint-disable no-undef */
+describe('initial modal open', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173')
+    cy.get('.welcomeContent').should('be.visible')
+  })
+})
+
+describe('discord link', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173')
+    cy.get('.welcomeNotice a').eq(0).invoke('removeAttr', 'target').click()
+    cy.url().then((url) => {
+      expect(url).to.include('discord.com')
+    })
+  })
+})
+
+describe('contribute link', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173')
+    cy.get('.welcomeNotice a').eq(1).invoke('removeAttr', 'target').click()
+    cy.url().then(url  => {
+      expect(url).to.include('github.com')
+    })
+  })
+})
+
+describe('preview function enable/disable', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173')
+    // does the preview button exist?
+    cy.get('.welcomeButtons button').eq(0).click()
+
+    // did preview load correctly?
+    cy.get('.preview-mode').should('be.visible')
+
+    // go back
+    cy.get('.preview-mode button').click()
+
+    // are we back?
+    cy.get('.welcomeContent').should('be.visible')
+  })
+})
+
+describe('second tab navigation', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173')
+    cy.get('.welcomeButtons button').eq(1).click()
+
+    // are we on the second tab?
+    cy.get('.languageSettings').should('be.visible')
+  })
+})
+
+describe('change to each language setting and back', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173')
+    cy.get('.welcomeButtons button').eq(1).click()
+
+    // change to each language setting
+    cy.get('.languageSettings span').each(($el, index, $list) => {
+      // press the next one
+      cy.get('.languageSettings span').eq(index).click()
+      // is it checked? state=checked
+      cy.get('.languageSettings span').eq(index).should('have.attr', 'state', 'checked')
+    })
+  })
+})
+
+describe('third tab navigation', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173')
+    // go to second
+    cy.get('.welcomeButtons button').eq(1).click()
+
+    // go to third
+    cy.get('.welcomeButtons button').eq(1).click()
+  })
+})
+
+describe('import settings', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173')
+  })
+})
+
+describe('fourth tab navigation', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173')
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+  })
+})
+
+describe('theme change', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173')
+    cy.get('.welcomeButtons button').eq(1).click()
+
+  })
+})
+
+describe('fifth tab navigation', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173')
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+  })
+})
+
+describe('style choice', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173')
+    cy.get('.welcomeButtons button').eq(1).click()
+
+  })
+})
+
+describe('sixth tab navigation', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173')
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+  })
+})
+
+describe('offline mode check', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173')
+
+  })
+})
+
+describe('privacy policy link', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173')
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeNotice a').eq(2).invoke('removeAttr', 'target').click()
+    cy.url().then(url  => {
+      expect(url).to.include('github.com')
+    })
+  })
+})
+
+describe('source code link', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173')
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeNotice a').eq(2).invoke('removeAttr', 'target').click()
+    cy.url().then(url  => {
+      expect(url).to.include('github.com')
+    })
+  })
+})
+
+describe('final tab navigation', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173')
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+  })
+})
+
+// describe the changes list
+
+describe('finish button', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173')
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(1).click()
+    cy.get('.welcomeButtons button').eq(2).click()
+  })
+})

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

cypress/support/component.js

@@ -0,0 +1,24 @@
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+import { mount } from 'cypress/react18'
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)

cypress/support/e2e.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'

index.html

@@ -3,8 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/src/assets/icons/32x32.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/src/assets/icons/16x16.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/icons/32x32.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/icons/16x16.png" />
     <title>New Tab</title>
   </head>
 

manifest/chrome.json

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

manifest/firefox.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Mue",
   "description": "Fast, open and free-to-use new tab page for modern browsers.",
-  "version": "7.1.2",
+  "version": "8.0.0",
   "homepage_url": "https://muetab.com",
   "action": {
     "default_icon": "icons/128x128.png"
@@ -17,5 +17,10 @@
   },
   "chrome_settings_overrides": {
     "homepage": "index.html"
+  },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "{ac143a20-4b61-4c81-abdd-4bff77032972}"
+    }
   }
 }

migrate-translations.js

@@ -0,0 +1,66 @@
+const fs = require('fs');
+const YAML = require('yaml');
+
+const compareAndRemoveKeys = (json1, json2) => {
+  for (let key in json1) {
+    if (json2.hasOwnProperty(key)) {
+      if (typeof json1[key] === 'object' && typeof json2[key] === 'object') {
+        compareAndRemoveKeys(json1[key], json2[key]);
+      } else {
+        if (json1[key] === json2[key]) {
+          delete json1[key];
+        }
+      }
+    } else {
+      delete json1[key];
+    }
+  }
+};
+
+const original = JSON.parse(fs.readFileSync(`./src/i18n/locales/en-GB.json`, 'utf8'));
+
+fs.readdirSync('./src/i18n/locales').forEach((e) => {
+  if (!e.endsWith('json')) return;
+  const data = JSON.parse(fs.readFileSync(`./src/i18n/locales/${e}`, 'utf8'));
+  const name = e.replace('.json', '');
+
+  if (name !== 'en-GB') {
+    compareAndRemoveKeys(data, original);
+  }
+
+  try {
+    fs.mkdirSync(`./src/i18n/${name}`);
+  } catch (e) {}
+
+  const _addons = YAML.stringify(data.modals?.main?.addons) || '{}';
+  fs.writeFileSync(`./src/i18n/${name}/_addons.yml`, _addons);
+  delete data?.modals?.main?.addons;
+
+  const _marketplace = YAML.stringify(data.modals?.main?.marketplace) || '{}';
+  fs.writeFileSync(`./src/i18n/${name}/_marketplace.yml`, _marketplace);
+  delete data?.modals?.main?.marketplace;
+
+  const _settings = YAML.stringify(data.modals?.main?.settings) || '{}';
+  fs.writeFileSync(`./src/i18n/${name}/_settings.yml`, _settings);
+  delete data?.modals?.main?.settings;
+
+  const _welcome = YAML.stringify(data.modals?.welcome) || '{}';
+  fs.writeFileSync(`./src/i18n/${name}/_welcome.yml`, _welcome);
+  delete data?.modals?.welcome;
+
+  const main = YAML.stringify(data) || '{}';
+  fs.writeFileSync(`./src/i18n/${name}/main.yml`, main);
+});
+
+fs.readdirSync('./src/i18n/locales/achievements').forEach((e) => {
+  if (!e.endsWith('json')) return;
+  const data = JSON.parse(fs.readFileSync(`./src/i18n/locales/achievements/${e}`, 'utf8'));
+  const name = e.replace('.json', '');
+
+  if (name !== 'en-GB') {
+    compareAndRemoveKeys(data, original);
+  }
+
+  const _achievements = YAML.stringify(data) || '{}';
+  fs.writeFileSync(`./src/i18n/${name}/_achievements.yml`, _achievements);
+});

package.json

@@ -9,56 +9,69 @@
   "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": "7.1.2",
+  "version": "8.0.0",
   "dependencies": {
-    "@eartharoid/i18n": "1.2.1",
+    "@eartharoid/i18n": "2.0.0-alpha.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@floating-ui/react-dom": "2.1.1",
-    "@fontsource/lexend-deca": "5.0.14",
-    "@fontsource/montserrat": "5.0.19",
+    "@floating-ui/react-dom": "2.1.0",
+    "@fontsource-variable/lexend-deca": "^5.1.0",
+    "@fontsource-variable/montserrat": "^5.1.0",
+    "@headlessui/react": "^2.1.9",
     "@muetab/react-sortable-hoc": "^2.0.1",
-    "@mui/material": "6.0.2",
-    "@sentry/react": "^8.28.0",
-    "embla-carousel-autoplay": "8.2.1",
-    "embla-carousel-react": "8.2.1",
+    "@mui/material": "5.15.19",
+    "@sentry/react": "^8.33.1",
+    "clsx": "^2.1.1",
+    "embla-carousel-autoplay": "8.1.3",
+    "embla-carousel-react": "8.1.3",
     "fast-blurhash": "^1.1.4",
-    "image-conversion": "^2.1.1",
+    "framer-motion": "^11.11.0",
+    "markdown-to-jsx": "^7.5.0",
+    "mue": "file:",
     "react": "^18.3.1",
     "react-best-gradient-color-picker": "^3.0.10",
     "react-clock": "5.0.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-modal": "3.16.1",
+    "react-slider": "^2.0.6",
     "react-toastify": "10.0.5",
+    "recharts": "^2.13.3",
     "use-debounce": "^10.0.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.4.1",
-    "@commitlint/config-conventional": "^19.4.1",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
     "@eartharoid/deep-merge": "^0.0.2",
-    "@vitejs/plugin-react-swc": "^3.7.0",
-    "adm-zip": "0.5.16",
-    "eslint": "^8.57.0",
+    "@eartharoid/vite-plugin-i18n": "1.0.0-alpha.7",
+    "@tailwindcss/typography": "^0.5.15",
+    "@vitejs/plugin-react-swc": "^3.7.1",
+    "adm-zip": "^0.5.16",
+    "autoprefixer": "^10.4.20",
+    "cypress": "^13.17.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
-    "husky": "^9.1.5",
+    "husky": "^9.1.6",
     "prettier": "^3.3.3",
-    "sass": "^1.78.0",
+    "sass": "^1.79.4",
     "stylelint": "^16.9.0",
     "stylelint-config-standard-scss": "^13.1.0",
-    "stylelint-scss": "^6.5.1",
-    "vite": "5.4.3",
-    "vite-plugin-progress": "^0.0.7"
+    "stylelint-scss": "^6.7.0",
+    "tailwindcss": "^3.4.13",
+    "vite": "5.2.12",
+    "vite-plugin-inspect": "^0.8.7",
+    "vite-plugin-progress": "^0.0.7",
+    "yaml": "^2.5.1"
   },
   "scripts": {
+    "build": "vite build",
+    "cy:open": "cypress open",
     "dev": "vite",
     "dev:host": "vite --host",
-    "translations": "cd scripts && node updatetranslations.js",
-    "build": "vite build",
-    "pretty": "prettier --write \"./**/*.{js,jsx,json,scss,css}\"",
     "lint": "eslint \"./src/**/*.{js,jsx}\" && stylelint \"./src/**/*.{scss,css}\"",
     "lint:fix": "eslint \"./src/**/*.{js,jsx}\" --fix && stylelint \"./src/**/*.{scss,css}\" --fix",
-    "postinstall": "husky"
+    "postinstall": "husky",
+    "pretty": "prettier --write \"./**/*.{js,jsx,json,scss,css}\""
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

scripts/updatetranslations.js

@@ -1,85 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const merge = require('@eartharoid/deep-merge');
-
-const compareAndRemoveKeys = (json1, json2) => {
-  for (let key in json1) {
-    if (json2.hasOwnProperty(key)) {
-      if (typeof json1[key] === 'object' && typeof json2[key] === 'object') {
-        compareAndRemoveKeys(json1[key], json2[key]);
-      }
-    } else {
-      delete json1[key];
-    }
-  }
-};
-
-const localesDir = path.join(__dirname, '../src/i18n/locales');
-const achievementsDir = path.join(localesDir, 'achievements');
-
-// Check if the locales directory exists, if not, create it
-if (!fs.existsSync(localesDir)) {
-  fs.mkdirSync(localesDir, { recursive: true });
-}
-
-// Check if the achievements directory exists, if not, create it
-if (!fs.existsSync(achievementsDir)) {
-  fs.mkdirSync(achievementsDir, { recursive: true });
-}
-
-fs.readdirSync(localesDir).forEach((file) => {
-  if (file === 'en_GB.json') {
-    return;
-  }
-
-  if (fs.lstatSync(path.join(localesDir, file)).isDirectory()) {
-    return;
-  }
-
-  const en = require(path.join(localesDir, 'en_GB.json'));
-  const newdata = merge(en, require(path.join(localesDir, file)));
-
-  compareAndRemoveKeys(newdata, en);
-
-  fs.writeFileSync(path.join(localesDir, file), JSON.stringify(newdata, null, 2));
-
-  fs.appendFileSync(path.join(localesDir, file), '\n');
-});
-
-fs.readdirSync(achievementsDir).forEach((file) => {
-  if (file === 'en_GB.json') {
-    return;
-  }
-
-  if (fs.lstatSync(path.join(achievementsDir, file)).isDirectory()) {
-    return;
-  }
-
-  const enGBFilePath = path.join(achievementsDir, 'en_GB.json');
-  if (!fs.existsSync(enGBFilePath)) {
-    console.error(`File 'en_GB.json' does not exist in the directory '${achievementsDir}'`);
-    return;
-  }
-
-  const en = require(enGBFilePath);
-  const newdata = merge(en, require(path.join(achievementsDir, file)));
-
-  compareAndRemoveKeys(newdata, en);
-
-  fs.writeFileSync(path.join(achievementsDir, file), JSON.stringify(newdata, null, 2));
-
-  fs.appendFileSync(path.join(achievementsDir, file), '\n');
-
-  const locales = fs.readdirSync(localesDir);
-  locales.forEach((locale) => {
-    if (!fs.existsSync(path.join(achievementsDir, locale))) {
-      // ignore directories
-      if (fs.lstatSync(path.join(localesDir, locale)).isDirectory()) {
-        return;
-      }
-
-      fs.writeFileSync(path.join(achievementsDir, locale), JSON.stringify(en, null, 2));
-      fs.appendFileSync(path.join(achievementsDir, locale), '\n');
-    }
-  });
-});

src/App.jsx

@@ -3,20 +3,22 @@ import { ToastContainer } from 'react-toastify';
 import Background from 'features/background/Background';
 import Widgets from 'features/misc/views/Widgets';
 import Modals from 'features/misc/modals/Modals';
-import { loadSettings, moveSettings } from 'utils/settings';
+import { loadSettings } from 'utils/settings';
 import EventBus from 'utils/eventbus';
 import variables from 'config/variables';
+import Preview from 'features/helpers/preview/Preview';
+import Stats from 'features/stats/api/stats';
+
+import Welcome from 'features/welcome/Welcome';
+
+import BackgroundDefaults from 'features/background/options/default';
+import defaults from 'config/default';
+
+import '@fontsource-variable/lexend-deca';
+import '@fontsource-variable/montserrat';
 
 const useAppSetup = () => {
   useEffect(() => {
-    const firstRun = localStorage.getItem('firstRun');
-    const stats = localStorage.getItem('stats');
-
-    if (!firstRun || !stats) {
-      moveSettings();
-      window.location.reload();
-    }
-
     loadSettings();
 
     const refreshHandler = (data) => {
@@ -27,8 +29,6 @@ const useAppSetup = () => {
 
     EventBus.on('refresh', refreshHandler);
 
-    variables.stats.tabLoad();
-
     return () => {
       EventBus.off('refresh', refreshHandler);
     };
@@ -40,20 +40,29 @@ const App = () => {
   const [showBackground, setShowBackground] = useState(false);
 
   useEffect(() => {
-    const storedToastDisplayTime = localStorage.getItem('toastDisplayTime');
-    const storedBackground = localStorage.getItem('background');
+    const storedToastDisplayTime =
+      localStorage.getItem('toastDisplayTime') || defaults.toastDisplayTime;
+    const storedBackground = localStorage.getItem('background') || BackgroundDefaults.background;
 
     if (storedToastDisplayTime) {
       setToastDisplayTime(parseInt(storedToastDisplayTime, 10));
     }
 
-    if (storedBackground === 'true') {
+    if (storedBackground === 'true' || storedBackground === true) {
       setShowBackground(true);
     }
+
+    // Reset tab ID when component mounts and post initial event
+    Stats.generateTabId();
+    Stats.postEvent('new-tab', 'tab', 'opened');
   }, []);
 
   useAppSetup();
 
+  if (localStorage.getItem('showWelcome') !== 'false') {
+    return <Welcome />;
+  }
+
   return (
     <>
       {showBackground && <Background />}
@@ -68,6 +77,9 @@ const App = () => {
         <Widgets />
         <Modals />
       </div>
+      {localStorage.getItem('welcomePreview') === 'true' && (
+        <Preview setup={() => window.location.reload()} />
+      )}
     </>
   );
 };

src/components/Elements/AddModal/AddModal.jsx

@@ -1,10 +1,9 @@
 import variables from 'config/variables';
 
 import { useState, memo } from 'react';
-import { TextareaAutosize } from '@mui/material';
 import { MdAddLink, MdClose } from 'react-icons/md';
-import { Tooltip } from 'components/Elements';
-import { Button } from 'components/Elements';
+import { Tooltip, Button } from 'components/Elements';
+import { TextareaAutosize } from 'components/Form';
 
 function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, editLink }) {
   const [name, setName] = useState(edit ? editData.name : '');
@@ -19,7 +18,7 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
             ? variables.getMessage('widgets.quicklinks.edit')
             : variables.getMessage('widgets.quicklinks.new')}
         </span>
-        <Tooltip title={variables.getMessage('modals.welcome.buttons.close')}>
+        <Tooltip title={variables.getMessage('welcome:buttons.close')}>
           <div className="close" onClick={() => closeModal()}>
             <MdClose />
           </div>
@@ -56,7 +55,7 @@ function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, ed
             type="settings"
             onClick={() => editLink(editData, name, url, icon)}
             icon={<MdAddLink />}
-            label={variables.getMessage('modals.main.settings.sections.quicklinks.edit')}
+            label={variables.getMessage('settings:sections.quicklinks.edit')}
           />
         ) : (
           <Button

src/components/Elements/MainModal/Main.jsx

@@ -1,64 +1,90 @@
 import variables from 'config/variables';
-import { Suspense, lazy, useState, memo } from 'react';
-import { MdClose } from 'react-icons/md';
-
+import { memo, Suspense, lazy } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import './scss/index.scss';
-import { Tooltip } from 'components/Elements';
+import Navbar from './backend/TabNavbar';
+import { TabProvider, useTab } from './backend/TabContext';
+import { MarketplaceDataProvider } from 'features/marketplace/api/MarketplaceDataContext';
+
 const Settings = lazy(() => import('../../../features/misc/views/Settings'));
 const Addons = lazy(() => import('../../../features/misc/views/Addons'));
 const Marketplace = lazy(() => import('../../../features/misc/views/Marketplace'));
 
 const renderLoader = () => (
-  <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
-    <div className="modalSidebar">
-      <span className="mainTitle">Mue</span>
-    </div>
-    <div className="modalTabContent">
-      <div className="emptyItems">
-        <div className="emptyMessage">
-          <div className="loaderHolder">
-            <div id="loader"></div>
-            <span className="subtitle">{variables.getMessage('modals.main.loading')}</span>
-          </div>
-        </div>
-      </div>
+  <div className="flex flex-col w-full h-[65vh] justify-center items-center">
+    <div className="loaderHolder">
+      <div id="loader"></div>
+      <span className="subtitle">{variables.getMessage('modals.main.loading')}</span>
     </div>
   </div>
 );
 
-function MainModal({ modalClose }) {
-  const [currentTab, setCurrentTab] = useState('settings');
+const MainModalContent = ({ modalClose }) => {
+  const { activeTab, direction } = useTab();
 
-  const changeTab = (type) => {
-    setCurrentTab(type);
+  const variants = {
+    enter: (direction) => ({
+      x: direction > 0 ? '100%' : '-100%',
+      opacity: 0,
+      top: '80px',
+      position: 'absolute',
+      width: '100%',
+    }),
+    center: {
+      x: 0,
+      opacity: 1,
+      top: '80px',
+      position: 'absolute',
+      width: '100%',
+    },
+    exit: (direction) => ({
+      x: direction < 0 ? '100%' : '-100%',
+      opacity: 0,
+      top: '80px',
+      position: 'absolute',
+      width: '100%',
+    }),
   };
 
   const renderTab = () => {
-    switch (currentTab) {
+    switch (activeTab) {
       case 'addons':
-        return <Addons changeTab={changeTab} />;
+        return <Addons />;
       case 'marketplace':
-        return <Marketplace changeTab={changeTab} />;
+        return <Marketplace />;
       default:
-        return <Settings changeTab={changeTab} />;
+        return <Settings />;
     }
   };
 
   return (
-    <div className="frame">
-      <Tooltip
-        style={{ position: 'absolute', top: '1rem', right: '1rem' }}
-        title={variables.getMessage('modals.welcome.buttons.close')}
-        key="closeTooltip"
-      >
-        <span className="closeModal" onClick={modalClose}>
-          <MdClose />
-        </span>
-      </Tooltip>
-      <Suspense fallback={renderLoader()}>{renderTab()}</Suspense>
+    <div className="flex flex-col w-full min-w-full ">
+      <Navbar modalClose={modalClose} />
+      <AnimatePresence initial={false} custom={direction}>
+        <motion.div
+          key={activeTab}
+          custom={direction}
+          variants={variants}
+          initial="enter"
+          animate="center"
+          exit="exit"
+          transition={{ type: 'tween', duration: 0.8 }}
+          className="flex w-full min-w-full overflow-y-auto"
+        >
+          <Suspense fallback={renderLoader()}>{renderTab()}</Suspense>
+        </motion.div>
+      </AnimatePresence>
     </div>
   );
-}
+};
+
+const MainModal = ({ modalClose }) => (
+  <TabProvider>
+    <MarketplaceDataProvider>
+      <MainModalContent modalClose={modalClose} />
+    </MarketplaceDataProvider>
+  </TabProvider>
+);
 
 const MemoizedMainModal = memo(MainModal);
 export { MemoizedMainModal as default, MemoizedMainModal as MainModal };

src/components/Elements/MainModal/backend/Tab.jsx

@@ -21,41 +21,41 @@ import {
   MdOutlineAssessment as Stats,
   MdOutlineNewReleases as Changelog,
   MdInfoOutline as About,
-  MdOutlineExtension as Added,
+  MdSpaceDashboard as Added,
   MdAddCircleOutline as Create,
   MdViewAgenda as Overview,
   MdCollectionsBookmark as Collections,
 } from 'react-icons/md';
 
 const iconMapping = {
-  [variables.getMessage('modals.main.marketplace.product.overview')]: <Overview />,
+  [variables.getMessage('marketplace:product.overview')]: <Overview />,
   [variables.getMessage('modals.main.navbar.settings')]: <Settings />,
   [variables.getMessage('modals.main.navbar.addons')]: <Addons />,
   [variables.getMessage('modals.main.navbar.marketplace')]: <Marketplace />,
-  [variables.getMessage('modals.main.settings.sections.appearance.navbar.title')]: <Navbar />,
-  [variables.getMessage('modals.main.settings.sections.greeting.title')]: <Greeting />,
-  [variables.getMessage('modals.main.settings.sections.time.title')]: <Time />,
-  [variables.getMessage('modals.main.settings.sections.quicklinks.title')]: <QuickLinks />,
-  [variables.getMessage('modals.main.settings.sections.quote.title')]: <Quote />,
-  [variables.getMessage('modals.main.settings.sections.date.title')]: <Date />,
-  [variables.getMessage('modals.main.settings.sections.message.title')]: <Message />,
-  [variables.getMessage('modals.main.settings.sections.background.title')]: <Background />,
-  [variables.getMessage('modals.main.settings.sections.search.title')]: <MdSearch />,
-  [variables.getMessage('modals.main.settings.sections.weather.title')]: <Weather />,
-  [variables.getMessage('modals.main.settings.sections.appearance.title')]: <Appearance />,
-  [variables.getMessage('modals.main.settings.sections.language.title')]: <Language />,
-  [variables.getMessage('modals.main.settings.sections.advanced.title')]: <Advanced />,
-  [variables.getMessage('modals.main.settings.sections.stats.title')]: <Stats />,
-  [variables.getMessage('modals.main.settings.sections.experimental.title')]: <Experimental />,
-  [variables.getMessage('modals.main.settings.sections.changelog.title')]: <Changelog />,
-  [variables.getMessage('modals.main.settings.sections.about.title')]: <About />,
-  [variables.getMessage('modals.main.addons.added')]: <Added />,
-  [variables.getMessage('modals.main.addons.create.title')]: <Create />,
-  [variables.getMessage('modals.main.marketplace.all')]: <Addons />,
-  [variables.getMessage('modals.main.marketplace.photo_packs')]: <Background />,
-  [variables.getMessage('modals.main.marketplace.quote_packs')]: <Quote />,
-  [variables.getMessage('modals.main.marketplace.preset_settings')]: <Advanced />,
-  [variables.getMessage('modals.main.marketplace.collections')]: <Collections />,
+  [variables.getMessage('settings:sections.appearance.navbar.title')]: <Navbar />,
+  [variables.getMessage('settings:sections.greeting.title')]: <Greeting />,
+  [variables.getMessage('settings:sections.time.title')]: <Time />,
+  [variables.getMessage('settings:sections.quicklinks.title')]: <QuickLinks />,
+  [variables.getMessage('settings:sections.quote.title')]: <Quote />,
+  [variables.getMessage('settings:sections.date.title')]: <Date />,
+  [variables.getMessage('settings:sections.message.title')]: <Message />,
+  [variables.getMessage('settings:sections.background.title')]: <Background />,
+  [variables.getMessage('settings:sections.search.title')]: <MdSearch />,
+  [variables.getMessage('settings:sections.weather.title')]: <Weather />,
+  [variables.getMessage('settings:sections.appearance.title')]: <Appearance />,
+  [variables.getMessage('settings:sections.language.title')]: <Language />,
+  [variables.getMessage('settings:sections.advanced.title')]: <Advanced />,
+  [variables.getMessage('settings:sections.stats.title')]: <Stats />,
+  [variables.getMessage('settings:sections.experimental.title')]: <Experimental />,
+  [variables.getMessage('settings:sections.changelog.title')]: <Changelog />,
+  [variables.getMessage('settings:sections.about.title')]: <About />,
+  [variables.getMessage('addons:added')]: <Added />,
+  [variables.getMessage('addons:create.title')]: <Create />,
+  [variables.getMessage('marketplace:all')]: <Addons />,
+  [variables.getMessage('marketplace:photo_packs')]: <Background />,
+  [variables.getMessage('marketplace:quote_packs')]: <Quote />,
+  [variables.getMessage('marketplace:preset_settings')]: <Advanced />,
+  [variables.getMessage('marketplace:collections')]: <Collections />,
 };
 
 function Tab({ label, currentTab, onClick, navbarTab }) {
@@ -71,34 +71,15 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
   }
 
   const icon = iconMapping[label];
-  const divider = [
-    variables.getMessage('modals.main.settings.sections.weather.title'),
-    variables.getMessage('modals.main.settings.sections.language.title'),
-    variables.getMessage('modals.main.marketplace.all'),
-    variables.getMessage('modals.main.settings.sections.experimental.title'),
-  ].includes(label);
 
-  const mue = [
-    variables.getMessage('modals.main.marketplace.product.overview'),
-    variables.getMessage('modals.main.addons.added'),
-    variables.getMessage('modals.main.marketplace.all'),
-  ].includes(label);
-
-  if (
-    label === variables.getMessage('modals.main.settings.sections.experimental.title') &&
-    !isExperimental
-  ) {
-    return <hr />;
+  if (label === variables.getMessage('settings:sections.experimental.title') && !isExperimental) {
+    return null;
   }
 
   return (
-    <>
-      {mue && <span className="mainTitle">Mue</span>}
-      <button className={className} onClick={() => onClick(label)}>
-        {icon} <span>{label}</span>
-      </button>
-      {divider && <hr />}
-    </>
+    <button className={className} onClick={() => onClick(label)}>
+      {icon} <span>{label}</span>
+    </button>
   );
 }
 

src/components/Elements/MainModal/backend/TabContext.jsx

@@ -0,0 +1,56 @@
+import { createContext, useContext, useState } from 'react';
+import variables from 'config/variables';
+
+const TabContext = createContext();
+
+export const useTab = () => {
+  return useContext(TabContext);
+};
+
+export const TabProvider = ({ children }) => {
+  const [activeTab, setActiveTab] = useState('settings');
+  const [subTab, setSubTab] = useState(variables.getMessage('marketplace:product.overview'));
+  const [subSection, setSubSection] = useState('');
+  const [direction, setDirection] = useState(1);
+
+  const changeTab = (tab, subtab = '', section = '') => {
+    const tabs = [
+      { id: 'settings', label: 'Settings' },
+      { id: 'addons', label: 'Addons' },
+      { id: 'marketplace', label: 'Marketplace' },
+    ];
+
+    const currentIndex = tabs.findIndex((t) => t.id === activeTab);
+    const newIndex = tabs.findIndex((t) => t.id === tab);
+
+    setDirection(newIndex > currentIndex ? 1 : -1);
+    setSubTab(subtab);
+    if (tab === 'settings' && subtab === '' && section === '') {
+      setSubTab(variables.getMessage('marketplace:product.overview'));
+    }
+
+    setActiveTab(tab);
+    setSubSection(section);
+  };
+
+  const setSection = (type) => {
+    setSubTab(type);
+  };
+
+  return (
+    <TabContext.Provider
+      value={{
+        activeTab,
+        subTab,
+        direction,
+        subSection,
+        changeTab,
+        setSubTab,
+        setSection,
+        setSubSection,
+      }}
+    >
+      {children}
+    </TabContext.Provider>
+  );
+};

src/components/Elements/MainModal/backend/TabNavbar.jsx

@@ -0,0 +1,275 @@
+import React from 'react';
+import {
+  MdSettings,
+  MdOutlineShoppingBasket,
+  MdSpaceDashboard,
+  MdOutlineKeyboardArrowRight,
+  MdClose,
+  MdSearch,
+} from 'react-icons/md';
+import { IoMdPricetag } from 'react-icons/io';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useTab } from './TabContext';
+import { useMarketData } from 'features/marketplace/api/MarketplaceDataContext';
+import { Tooltip } from 'components/Elements';
+import variables from 'config/variables';
+import clsx from 'clsx';
+
+const TabNavbar = ({ modalClose }) => {
+  const { activeTab, subTab, changeTab, subSection, setSubTab, setSubSection } = useTab();
+  const { setSelectedItem, setSelectedCollection, installedItems } = useMarketData();
+
+  const tabs = [
+    { id: 'settings', label: 'Settings', icon: <MdSettings /> },
+    { id: 'addons', label: 'Addons', icon: <MdSpaceDashboard /> },
+    { id: 'marketplace', label: 'Marketplace', icon: <IoMdPricetag /> },
+  ];
+
+  const navbarLogo = (
+    <svg
+      width="123"
+      height="123"
+      viewBox="0 0 123 123"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-[40px] h-[40px]"
+    >
+      <g filter="url(#filter0_d_2473_27)">
+        <circle cx="61.5" cy="61.5" r="50.5" fill="url(#paint0_linear_2473_27)" />
+        <path
+          d="M68.2969 43.1796V48.5603H79.9348V60.1055H85.3638V43.1796H68.2969Z"
+          fill="url(#paint1_linear_2473_27)"
+        />
+        <path
+          d="M72.1542 61.0483H67.344V65.8527H62.9056V61.0483H58.0919V56.6185H62.9056V51.8175H67.344V56.6185H72.1542V61.0483ZM78.6447 49.6043H67.034V45.5766H47.5625V72.0938H82.6836V61.1961H78.6447V49.6043Z"
+          fill="url(#paint2_linear_2473_27)"
+        />
+        <path
+          d="M46.358 50.518H42.6289V77.0352H77.75V73.3029H46.358V50.518Z"
+          fill="url(#paint3_linear_2473_27)"
+        />
+        <path
+          d="M41.4205 55.4516H37.6914V81.9688H72.8125V78.2365H41.4205V55.4516Z"
+          fill="url(#paint4_linear_2473_27)"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_2473_27"
+          x="0.3"
+          y="0.3"
+          width="122.4"
+          height="122.4"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="5.35" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2473_27" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_2473_27"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint0_linear_2473_27"
+          x1="104.324"
+          y1="35.24"
+          x2="16.959"
+          y2="88.366"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FF5C25" />
+          <stop offset="0.484375" stopColor="#D21A11" />
+          <stop offset="1" stopColor="#FF456E" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_2473_27"
+          x1="76.8303"
+          y1="60.1055"
+          x2="76.8303"
+          y2="43.1796"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#F18D91" />
+          <stop offset="1" stopColor="#FBD3C6" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_2473_27"
+          x1="65.123"
+          y1="72.0938"
+          x2="65.123"
+          y2="45.5766"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#F18D91" />
+          <stop offset="1" stopColor="#FBD3C6" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear_2473_27"
+          x1="60.1895"
+          y1="77.0352"
+          x2="60.1895"
+          y2="50.518"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#F18D91" />
+          <stop offset="1" stopColor="#FBD3C6" />
+        </linearGradient>
+        <linearGradient
+          id="paint4_linear_2473_27"
+          x1="55.252"
+          y1="81.9688"
+          x2="55.252"
+          y2="55.4516"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#F18D91" />
+          <stop offset="1" stopColor="#FBD3C6" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+
+  return (
+    <div className="flex flex-row gap-5 p-5 items-center justify-between">
+      <div className="flex flex-row gap-5 items-center">
+        {navbarLogo}
+        <div className="flex flex-row items-center gap-2">
+          <span
+            onClick={() => {
+              changeTab(activeTab);
+              setSelectedItem(null);
+              setSelectedCollection(null);
+            }}
+            className={clsx(
+              'text-xl capitalize tracking-normal transition-all duration-150 ease-in-out',
+              {
+                'text-neutral-300 cursor-pointer hover:text-neutral-100':
+                  subTab !== '' && (activeTab === 'marketplace' || activeTab === 'addons'),
+              },
+            )}
+          >
+            {variables.getMessage(`modals.main.navbar.${activeTab}`)}
+          </span>
+          {subTab !== '' && (
+            <>
+              <MdOutlineKeyboardArrowRight />
+              <span
+                onClick={() => setSubSection('')}
+                className={clsx(
+                  'text-xl capitalize tracking-normal transition-all duration-150 ease-in-out',
+                  {
+                    'dark:text-neutral-300 text-neutral-600 cursor-pointer hover:text-black dark:hover:text-neutral-100':
+                      subSection !== '',
+                  },
+                )}
+              >
+                {subTab}
+              </span>
+            </>
+          )}
+          {subSection !== '' && (
+            <>
+              <MdOutlineKeyboardArrowRight />
+              <span className="text-xl capitalize tracking-normal">{subSection}</span>
+            </>
+          )}
+        </div>
+      </div>
+      <div className="flex flex-row gap-5">
+        <AnimatePresence>
+          {activeTab === 'marketplace' && subTab === '' && (
+            <motion.div
+              initial={{ opacity: 0, y: '-100%' }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: '-100%' }}
+            >
+              <form className="max-w-md mx-auto relative mr-10">
+                <input
+                  label={variables.getMessage('widgets.search')}
+                  placeholder={variables.getMessage('widgets.search')}
+                  name="filter"
+                  id="filter"
+                  className="h-[40px] block w-full px-4 ps-10 text-sm text-gray-900 border border-[#484848] rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-neutral-100"
+                />
+                <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+                  <MdSearch />
+                </div>
+              </form>
+            </motion.div>
+          )}
+        </AnimatePresence>
+        <div className="flex space-x-1">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => {
+                changeTab(tab.id);
+                setSelectedItem(null);
+                setSelectedCollection(null);
+              }}
+              className={`${
+                activeTab === tab.id ? '' : 'dark:hover:text-white/70 hover:text-black/70'
+              } dark:text-white text-black transition-all duration-800	ease-in-out flex flex-row gap-2 items-center relative rounded-sm px-3 py-1.5 text-sm outline-sky-400 transition focus-visible:outline-2`}
+              style={{
+                WebkitTapHighlightColor: 'transparent',
+              }}
+            >
+              {activeTab === tab.id && (
+                <motion.span
+                  layoutId="tabNavbarBubble"
+                  className="absolute inset-0 z-10 bg-[#333] mix-blend-lighten rounded-xl"
+                  transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
+                />
+              )}
+              {tab.icon}
+              {variables.getMessage(`modals.main.navbar.${tab.id}`)}
+              {tab.id === 'addons' && (
+                <AnimatePresence>
+                  <div className="px-3 py-1 dark:bg-[#424242] bg-neutral-300 rounded-lg text-xs">
+                    <motion.span
+                      key={installedItems.length}
+                      initial={{ opacity: 0, y: -10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: 10 }}
+                    >
+                      {installedItems.length}
+                    </motion.span>
+                  </div>
+                </AnimatePresence>
+              )}
+              {tab.id === 'marketplace' && (
+                <span className="px-3 py-1 bg-rose-800 rounded-lg text-xs border border-rose-700 text-white">
+                  NEW
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+        <Tooltip
+          style={{ marginLeft: 'auto', justifySelf: 'flex-end' }}
+          title={variables.getMessage('welcome:buttons.close')}
+          key="closeTooltip"
+        >
+          <span className="closeModal" onClick={modalClose}>
+            <MdClose />
+          </span>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+export { TabNavbar as default, TabNavbar };

src/components/Elements/MainModal/backend/Tabs.jsx

@@ -1,109 +0,0 @@
-import variables from 'config/variables';
-import React, { useState, useEffect } from 'react';
-import {
-  MdSettings,
-  MdOutlineShoppingBasket,
-  MdOutlineExtension,
-  MdRefresh,
-  MdClose,
-} from 'react-icons/md';
-import Tab from './Tab';
-import { Button } from 'components/Elements';
-import ErrorBoundary from '../../../../features/misc/modals/ErrorBoundary';
-
-const Tabs = (props) => {
-  const [currentTab, setCurrentTab] = useState(props.children[0].props.label);
-  const [currentName, setCurrentName] = useState(props.children[0].props.name);
-
-  const onClick = (tab, name) => {
-    if (name !== currentName) {
-      variables.stats.postEvent('tab', `Opened ${name}`);
-    }
-
-    setCurrentTab(tab);
-    setCurrentName(name);
-  };
-
-  const hideReminder = () => {
-    localStorage.setItem('showReminder', false);
-    document.querySelector('.reminder-info').style.display = 'none';
-  };
-
-  const navbarButtons = [
-    {
-      tab: 'settings',
-      icon: <MdSettings />,
-    },
-    {
-      tab: 'addons',
-      icon: <MdOutlineExtension />,
-    },
-    {
-      tab: 'marketplace',
-      icon: <MdOutlineShoppingBasket />,
-    },
-  ];
-
-  const reminderInfo = (
-    <div
-      className="reminder-info"
-      style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
-    >
-      <div className="shareHeader">
-        <span className="title">{variables.getMessage('modals.main.settings.reminder.title')}</span>
-        <span className="closeModal" onClick={hideReminder}>
-          <MdClose />
-        </span>
-      </div>
-      <span className="subtitle">
-        {variables.getMessage('modals.main.settings.reminder.message')}
-      </span>
-      <button onClick={() => window.location.reload()}>
-        <MdRefresh />
-        {variables.getMessage('modals.main.error_boundary.refresh')}
-      </button>
-    </div>
-  );
-
-  return (
-    <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
-      <div className="modalSidebar">
-        {props.children.map((tab, index) => (
-          <Tab
-            currentTab={currentTab}
-            key={index}
-            label={tab.props.label}
-            onClick={(nextTab) => onClick(nextTab, tab.props.name)}
-            navbarTab={props.navbar || false}
-          />
-        ))}
-        {reminderInfo}
-      </div>
-      <div className="modalTabContent">
-        <div className="modalNavbar">
-          {navbarButtons.map(({ tab, icon }, index) => (
-            <Button
-              type="navigation"
-              onClick={() => props.changeTab(tab)}
-              icon={icon}
-              label={variables.getMessage(`modals.main.navbar.${tab}`)}
-              active={props.current === tab}
-              key={`${tab}-${index}`}
-            />
-          ))}
-        </div>
-        {props.children.map((tab, index) => {
-          if (tab.props.label !== currentTab) {
-            return undefined;
-          }
-
-          return (
-            <ErrorBoundary key={`error-boundary-${index}`}>{tab.props.children}</ErrorBoundary>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
-export default Tabs;

src/components/Elements/MainModal/backend/newTabs.jsx

@@ -0,0 +1,107 @@
+import { useState, useCallback, memo, useMemo } from 'react';
+import variables from 'config/variables';
+import Tab from './Tab';
+import { useTab } from './TabContext';
+import { MdOutlineWarning, MdRefresh, MdClose } from 'react-icons/md';
+import Stats from 'features/stats/api/stats';
+
+const Sidebar = memo(({ sections, currentTab, setCurrentTab }) => {
+  const { subTab, setSubTab, setSubSection } = useTab();
+  const handleClick = useCallback(
+    (label) => () => {
+      const newTab = variables.getMessage(label);
+      setSubTab(newTab);
+      setSubSection('');
+      Stats.postEvent('settings-tab', newTab, 'opened');
+    },
+    [setSubTab, setSubSection],
+  );
+
+  const hideReminder = () => {
+    localStorage.setItem('showReminder', false);
+    document.querySelector('.reminder-info').style.display = 'none';
+  };
+
+  const reminderInfo = useMemo(
+    () => (
+      <div
+        className="bg-rose-800 border-rose-700 border-2 flex-row px-10 py-5 rounded items-center justify-between"
+        style={{ display: localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none' }}
+      >
+        <div className="flex flex-row items-center gap-5">
+          <MdOutlineWarning />
+          <span>{variables.getMessage('settings:reminder.message')}</span>
+        </div>
+        <div className="flex flex-row items-center gap-5">
+          <button
+            className="bg-neutral-900 border-neutral-800 border-2 px-8 py-2 flex flex-row items-center gap-2 rounded"
+            onClick={() => window.location.reload()}
+          >
+            <MdRefresh /> {variables.getMessage('modals.main.error_boundary.refresh')}
+          </button>
+          <button
+            className="bg-neutral-900 border-neutral-800 border-2 px-8 py-2 flex flex-row items-center gap-2 rounded"
+            onClick={hideReminder}
+          >
+            <MdClose />
+            Close
+          </button>
+        </div>
+      </div>
+    ),
+    [],
+  );
+
+  return (
+    <div className="modalSidebar">
+      {sections.map((section, index) => (
+        <Tab
+          key={index}
+          currentTab={subTab}
+          label={variables.getMessage(section.label)}
+          onClick={handleClick(section.label)}
+          navbarTab={section.navbar || false}
+        />
+      ))}
+      {reminderInfo}
+    </div>
+  );
+});
+
+const Content = memo(({ sections, currentTab }) => {
+  const hideReminder = () => {
+    localStorage.setItem('showReminder', false);
+    document.querySelector('.reminder-info').style.display = 'none';
+  };
+
+  return (
+    <>
+      {sections.map(
+        ({ label, name, component: Component }) =>
+          variables.getMessage(label) === currentTab && (
+            <div
+              className="w-full rounded h-[calc(78vh-80px)] flex flex-col pr-10 gap-3 lg:overflow-x-hidden overflow-y-auto overflow-x-auto"
+              key={name}
+              label={variables.getMessage(label)}
+              name={name}
+            >
+              <Component />
+            </div>
+          ),
+      )}
+    </>
+  );
+});
+
+const Tabs = ({ sections }) => {
+  const { subTab, setSubTab, setSubSection } = useTab();
+
+  return (
+    <div className="flex flex-row w-full gap-2">
+      <Sidebar sections={sections} currentTab={subTab} />
+      <Content sections={sections} currentTab={subTab} />
+    </div>
+  );
+};
+
+export { Tabs };

src/components/Elements/MainModal/scss/index.scss

@@ -27,6 +27,7 @@
   z-index: -2;
   transition-timing-function: ease-in;
   border-radius: map-get($modal, 'border-radius');
+  -webkit-user-select: none;
   user-select: none;
   overflow-y: auto;
   transform: scale(0);
@@ -37,6 +38,7 @@
   }
 
   .modalInfoPage {
+    -webkit-user-select: text;
     user-select: text;
   }
 }
@@ -47,13 +49,46 @@
   right: 3rem;
 }
 
+.ReactModal__Html--open,
+.ReactModal__Body--open {
+  overflow: hidden;
+}
+
+/* modal transition */
+.ReactModal__Content--after-open {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.ReactModal__Content--before-close {
+  opacity: 0;
+  transform: scale(0);
+}
+
+#modal {
+  height: 80vh;
+  width: clamp(60vw, 1400px, 90vw);
+
+  @include themed {
+    background-color: t($modal-background);
+  }
+}
+
+.closePositioning {
+  position: absolute;
+  top: 3rem;
+  right: 3rem;
+}
+
 .closeModal {
   display: grid;
   place-items: center;
-  padding: 0.5em;
+  height: 40px;
+  width: 40px;
   border-radius: 12px;
   cursor: pointer;
   transition: 0.5s;
+  align-self: flex-end;
 
   svg {
     font-size: 2em;
@@ -82,15 +117,6 @@
   transform: scale(0);
 }
 
-#modal {
-  height: 80vh;
-  width: clamp(60vw, 1400px, 90vw);
-
-  @include themed {
-    background-color: t($modal-background);
-  }
-}
-
 /* fixes for font size on extension */
 label,
 p,
@@ -124,9 +150,9 @@ h5 {
   height: 50px;
 
   @include themed {
-    border: 3px solid t($modal-sidebar);
+    border: 3px solid t($btn-background);
     border-radius: 50%;
-    border-top-color: t($modal-sidebarActive);
+    border-top-color: t($brand-accent);
   }
 
   animation: spin 1s ease-in-out infinite;
@@ -247,13 +273,12 @@ h5 {
   flex-flow: row;
   justify-content: space-between;
   padding: 25px;
-  margin-top: 20px;
   transition: 0.5s;
 
   @include themed {
     background: t($modal-sidebar);
     border-radius: t($borderRadius);
-    box-shadow: 0 0 0 1px t($modal-sidebarActive);
+    //box-shadow: 0 0 0 1px t($modal-sidebarActive);
 
     &:hover {
       background: t($modal-sidebarActive);
@@ -269,6 +294,7 @@ h5 {
     flex-flow: row;
     align-items: center;
     gap: 25px;
+    flex-grow: 0;
 
     svg {
       @include themed {
@@ -291,14 +317,14 @@ h5 {
     flex-flow: row;
     gap: 20px;
     align-items: center;
+    width: 275px;
+    justify-content: flex-end;
   }
 }
 
 .reminder-info {
   display: flex;
   flex-flow: column;
-  position: absolute;
-  bottom: 0;
   padding: 15px;
   gap: 15px;
 

src/components/Elements/MainModal/scss/marketplace/_main.scss

@@ -51,31 +51,12 @@
     @include themed {
       background-color: t($modal-secondaryColour);
       box-shadow: 0 0 0 1px t($modal-sidebarActive);
-
-      &:hover {
-        background-color: t($modal-sidebarActive);
-
-        img {
-          background-color: t($modal-sidebarActive);
-        }
-      }
     }
 
     .tags {
       margin-top: 7px;
     }
 
-    .item-back {
-      filter: blur(60px) saturate(180%) brightness(90%);
-      position: absolute;
-      object-fit: cover !important;
-      height: 90px;
-      width: 100px;
-      border-radius: 100px;
-      transition: 0.5s;
-      margin-top: 30px;
-    }
-
     .item-icon {
       object-fit: cover !important;
       height: 60px !important;
@@ -125,15 +106,15 @@
 }
 
 .itemPage {
-  display: flex;
-  flex-flow: row;
-  justify-content: space-between;
+  // display: flex;
+  // flex-flow: row;
+  // justify-content: space-between;
 
   .itemShowcase {
     display: flex;
     flex-flow: column;
     gap: 25px;
-    width: 60%;
+    // width: 60%;
     max-width: 650px;
 
     .description {
@@ -162,31 +143,24 @@
     border-radius: 15px;
     width: 30%;
     max-width: 300px;
-    max-height: 700px;
+    // max-height: 700px;
 
-    .front {
-      padding: 20px;
-      height: 100%;
-      display: flex;
-      flex-flow: column;
-      gap: 15px;
-      width: 100%;
-      box-sizing: border-box !important;
-      border-radius: 12px 12px 0 0;
-      backdrop-filter: blur(40px) saturate(150%) brightness(75%);
-
-      @include themed {
-        background-image: linear-gradient(to bottom, transparent, t($modal-background));
-      }
-    }
+    padding: 20px;
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+    gap: 15px;
+    width: 100%;
+    box-sizing: border-box !important;
+    border-radius: 12px;
 
     .icon {
       width: 100%;
       height: auto;
       border-radius: 12px;
-      box-shadow: 0 5px 25px black;
+      box-shadow: 0 5px 25px rgba(0, 0, 0, 0.75);
       aspect-ratio: 1 / 1;
-      object-fit: contain;
+      object-fit: cover;
     }
 
     .divider {
@@ -435,35 +409,6 @@ p.author {
   align-items: center;
 }
 
-.marketplaceSearch {
-  display: flex;
-  align-items: center;
-  padding: 10px 30px;
-  border-radius: 10px;
-  font-size: 18px;
-
-  @include themed {
-    box-shadow: 0 0 0 3px t($modal-sidebarActive);
-    background: t($modal-sidebar);
-  }
-
-  input {
-    all: unset;
-  }
-
-  @include themed {
-    &:focus-within {
-      background: t($modal-sidebarActive);
-      box-shadow: 0 0 0 1px t($color);
-    }
-
-    &:disabled {
-      background: t($modal-sidebarActive);
-      cursor: not-allowed;
-    }
-  }
-}
-
 .inCollection {
   // background-image: linear-gradient(to left, transparent, #000),
   //  url('https://external-preview.redd.it/JyhsEoGMhKIMi3kvfBS24L0IllAO_KrIm4UI-dA1Ax4.jpg?auto=webp&s=b5adf9859b2c1855a5b3085f9453a6e878548505');
@@ -507,7 +452,6 @@ p.author {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 15px;
 
   .tooltip {
     margin-right: 25px;

src/components/Elements/MainModal/scss/marketplace/modules/_item.scss

@@ -9,9 +9,11 @@ p.description {
 }
 
 .moreInfo {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 30px;
+  .details {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 30px;
+  }
 
   .items {
     margin-top: 0 !important;

src/components/Elements/MainModal/scss/modules/_modalTabContent.scss

@@ -1,67 +1,43 @@
 @import 'scss/variables';
 
-.modalTabContent {
-  width: 100% !important;
+.settingsRow {
+  display: flex;
+  align-items: center;
+  min-height: 100px;
+  justify-content: space-between;
+  transition: 0.4s ease-in-out;
+  @extend %tabText;
 
-  /* button {
-    @include modal-button(standard);
-  } */
+  /* border-top: 1px solid #ccc; */
+  border-bottom: 1px solid #676767;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
 
-  @include themed {
-    padding: 1rem 3rem 3rem;
+  &.settingsNoBorder {
+    border-bottom: none;
+  }
+
+  .content {
     display: flex;
-    flex-direction: column;
-    width: 100%;
-    background: t($modal-background);
+    flex-flow: column;
+    max-width: 50%;
+  }
 
-    @extend %tabText;
+  .action {
+    display: flex;
+    flex-flow: column;
+    align-items: flex-end;
+    width: 300px;
 
-    hr {
-      width: 100%;
-      background: rgb(196 196 196 / 74%);
-      outline: none;
+    button {
+      margin-top: 10px;
     }
 
-    .settingsRow {
+    .link {
       display: flex;
+      flex-flow: row;
+      gap: 15px;
       align-items: center;
-      min-height: 100px;
-      justify-content: space-between;
-      transition: 0.4s ease-in-out;
-
-      /* border-top: 1px solid #ccc; */
-      border-bottom: 1px solid #676767;
-      padding-top: 1rem;
-      padding-bottom: 1rem;
-
-      &.settingsNoBorder {
-        border-bottom: none;
-      }
-
-      .content {
-        display: flex;
-        flex-flow: column;
-        max-width: 50%;
-      }
-
-      .action {
-        display: flex;
-        flex-flow: column;
-        align-items: flex-end;
-        width: 300px;
-
-        button {
-          margin-top: 10px;
-        }
-
-        .link {
-          margin-top: 10px;
-          display: flex;
-          flex-flow: row;
-          gap: 15px;
-          align-items: center;
-        }
-      }
     }
   }
 }
@@ -81,60 +57,61 @@
     padding: 5px 10px;
   }
 }
+.itemPage {
+  table {
+    border-collapse: separate;
+    border-radius: 10px;
+    margin-top: 20px;
 
-table {
-  border-collapse: separate;
-  border-radius: 10px;
-  margin-top: 20px;
-
-  @include themed {
-    box-shadow: 0 0 0 1px t($modal-sidebarActive);
-    padding: 0;
-    border: 0;
-    outline: none;
-  }
-
-  tr:first-child {
     @include themed {
-      border-radius: t($borderRadius);
-      color: t($subColor);
+      box-shadow: 0 0 0 1px t($modal-sidebarActive);
+      padding: 0;
+      border: 0;
+      outline: none;
     }
 
-    letter-spacing: 2px;
-
-    th {
-      padding: 20px;
-    }
-  }
-
-  td {
-    padding: 15px;
-  }
-
-  tr {
-    th:last-child {
-      display: grid;
-      place-items: center;
-    }
-  }
-
-  ::placeholder {
-    @include themed {
-      color: t($subColor);
-    }
-  }
-
-  tr:not(:first-child) {
-    @include themed {
-      background: t($modal-secondaryColour);
-    }
-
-    textarea {
-      width: 90%;
-      margin: 10px;
-
+    tr:first-child {
       @include themed {
-        color: t($color);
+        border-radius: t($borderRadius);
+        color: t($subColor);
+      }
+
+      letter-spacing: 2px;
+
+      th {
+        padding: 20px;
+      }
+    }
+
+    td {
+      padding: 15px;
+    }
+
+    tr {
+      th:last-child {
+        display: grid;
+        place-items: center;
+      }
+    }
+
+    ::placeholder {
+      @include themed {
+        color: t($subColor);
+      }
+    }
+
+    tr:not(:first-child) {
+      @include themed {
+        background: t($modal-secondaryColour);
+      }
+
+      textarea {
+        width: 90%;
+        margin: 10px;
+
+        @include themed {
+          color: t($color);
+        }
       }
     }
   }

src/components/Elements/MainModal/scss/modules/_navbar.scss

@@ -3,10 +3,3 @@
   align-items: flex-start;
   justify-content: flex-start;
 }
-
-.modalNavbar {
-  display: flex;
-  flex-flow: row;
-  gap: 25px;
-  margin-bottom: 1rem;
-}

src/components/Elements/MainModal/scss/modules/_sidebar.scss

@@ -7,10 +7,9 @@
     position: sticky;
     margin: 0;
     padding: 0 5px;
-    background: t($modal-sidebar);
     border-radius: 12px 0 0 12px;
     overflow: hidden auto;
-    height: 80vh;
+    height: calc(80vh - 80px);
     min-width: 250px;
 
     .mainTitle {

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

@@ -1,18 +1,3 @@
-.updateChangelog {
-  max-width: 75%;
-  margin-top: 15px;
-  white-space: pre-wrap;
-  font-size: 18px;
-
-  a {
-    color: var(--modal-link);
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-}
-
 .changelogtab {
   .mainTitle {
     margin: 0 !important;
@@ -22,6 +7,12 @@
     max-width: 95%;
   }
 
+  a {
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
   .changelogAt {
     text-decoration: none;
   }

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

@@ -42,6 +42,17 @@
   -webkit-padding-start: 0;
   padding: 0;
   list-style-type: none;
+  margin-top: 16px;
+}
+
+.images-row.fixed-width {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 10px;
+}
+
+.image-container {
+  width: 200px;
 }
 
 .images-row {

src/components/Elements/ResetModal/ResetModal.jsx

@@ -6,7 +6,7 @@ import { Tooltip, Button } from 'components/Elements';
 
 function ResetModal({ modalClose }) {
   const reset = () => {
-    variables.stats.postEvent('setting', 'Reset');
+    variables.stats.postEvent('setting', 'reset');
     setDefaultSettings('reset');
     window.location.reload();
   };
@@ -15,34 +15,32 @@ function ResetModal({ modalClose }) {
     <div className="smallModal">
       <div className="shareHeader">
         <span className="title">
-          {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.title')}
+          {variables.getMessage('settings:sections.advanced.reset_modal.title')}
         </span>
-        <Tooltip
-          title={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
-        >
+        <Tooltip title={variables.getMessage('settings:sections.advanced.reset_modal.cancel')}>
           <div className="close" onClick={modalClose}>
             <MdClose />
           </div>
         </Tooltip>
       </div>
       <span className="title">
-        {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.question')}
+        {variables.getMessage('settings:sections.advanced.reset_modal.question')}
       </span>
       <span className="subtitle">
-        {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.information')}
+        {variables.getMessage('settings:sections.advanced.reset_modal.information')}
       </span>
       <div className="resetFooter">
         <Button
           type="secondary"
           onClick={modalClose}
           icon={<MdClose />}
-          label={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
+          label={variables.getMessage('settings:sections.advanced.reset_modal.cancel')}
         />
         <Button
           type="settings"
           onClick={() => reset()}
           icon={<MdRestartAlt />}
-          label={variables.getMessage('modals.main.settings.buttons.reset')}
+          label={variables.getMessage('settings:buttons.reset')}
         />
       </div>
     </div>

src/components/Elements/ShareModal/ShareModal.jsx

@@ -42,7 +42,7 @@ function ShareModal({ modalClose, data }) {
     <div className="smallModal">
       <div className="shareHeader">
         <span className="title">{variables.getMessage('widgets.quote.share')}</span>
-        <Tooltip title={variables.getMessage('modals.welcome.buttons.close')}>
+        <Tooltip title={variables.getMessage('welcome:buttons.close')}>
           <div className="close" onClick={modalClose}>
             <MdClose />
           </div>

src/components/Elements/Tooltip/Tooltip.jsx

@@ -1,5 +1,6 @@
 import { useState, memo, useRef } from 'react';
 import { useFloating, flip, offset, shift } from '@floating-ui/react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
 import './tooltip.scss';
 
 function Tooltip({ children, title, style, placement, subtitle }) {
@@ -17,7 +18,7 @@ function Tooltip({ children, title, style, placement, subtitle }) {
 
   return (
     <>
-      <div
+      <motion.div
         className="tooltip"
         style={style}
         onMouseEnter={() => setShowTooltip(true)}
@@ -26,25 +27,34 @@ function Tooltip({ children, title, style, placement, subtitle }) {
         onBlur={() => setShowTooltip(false)}
         ref={setReference}
         aria-describedby={tooltipId.current}
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.2 }}
       >
         {children}
-      </div>
-      {showTooltip && (
-        <span
-          ref={refs.setFloating}
-          style={{
-            position: strategy,
-            top: y ?? '',
-            left: x ?? '',
-            display: 'flex',
-            flexFlow: 'column',
-          }}
-          className="tooltipTitle"
-        >
-          {title}
-          <span style={{ fontSize: '8px' }}>{subtitle}</span>
-        </span>
-      )}
+      </motion.div>
+      <AnimatePresence>
+        {showTooltip && (
+          <motion.span
+            ref={refs.setFloating}
+            style={{
+              position: strategy,
+              top: y ?? '',
+              left: x ?? '',
+              display: 'flex',
+              flexFlow: 'column',
+            }}
+            className="tooltipTitle"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 20 }}
+            transition={{ duration: 0.2 }}
+          >
+            {title}
+            <span style={{ fontSize: '8px' }}>{subtitle}</span>
+          </motion.span>
+        )}
+      </AnimatePresence>
     </>
   );
 }

src/components/Elements/Tooltip/tooltip.scss

@@ -19,6 +19,7 @@
 
 .tooltipTitle {
   @extend %basic;
+  border-radius: 8px !important;
 
   text-align: center;
   font-size: 0.6rem;
@@ -33,9 +34,6 @@
   cursor: initial;
   user-select: none;
   opacity: 1;
-  animation-name: floating;
-  animation-duration: 0.3s;
-  animation-timing-function: ease-in;
 }
 
 #modal {
@@ -54,26 +52,6 @@
   }
 }
 
-.tooltipTitle::before {
-  transform: scale3d(0.2, 0.2, 1);
-  transition: all 0.2s ease-in-out;
-}
-
-.tooltipTitle::after {
-  transform: translate3d(0, 6px, 0);
-  transition: all 0.1s ease-in-out;
-}
-
-.tooltipTitle:hover::before,
-.tooltipTitle:hover::after {
-  opacity: 1;
-  transform: scale3d(1, 1, 1);
-}
-
-.tooltipTitle:hover::after {
-  transition: all 0.2s 0.1s ease-in-out;
-}
-
 #arrow {
   position: absolute;
   background: #333;
@@ -96,37 +74,3 @@
     }
   }
 }
-
-#floating {
-  transition-property: opacity, transform;
-}
-
-#floating[data-status='open'],
-#floating[data-status='close'] {
-  transition-duration: 250ms;
-}
-
-#floating[data-status='initial'],
-#floating[data-status='close'] {
-  opacity: 0;
-}
-
-#floating[data-status='initial'][data-placement^='top'],
-#floating[data-status='close'][data-placement^='top'] {
-  transform: translateY(5px);
-}
-
-#floating[data-status='initial'][data-placement^='bottom'],
-#floating[data-status='close'][data-placement^='bottom'] {
-  transform: translateY(-5px);
-}
-
-#floating[data-status='initial'][data-placement^='left'],
-#floating[data-status='close'][data-placement^='left'] {
-  transform: translateX(5px);
-}
-
-#floating[data-status='initial'][data-placement^='right'],
-#floating[data-status='close'][data-placement^='right'] {
-  transform: translateX(-5px);
-}

src/components/Form/Settings/Checkbox/Checkbox.cy.jsx

@@ -0,0 +1,68 @@
+/* eslint-disable no-undef */
+import React from 'react'
+import { Checkbox } from './Checkbox'
+
+describe('<Checkbox />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<Checkbox />)
+  })
+
+  // checked prop works
+  it('can init checked', () => {
+    cy.mount(<Checkbox checked={true} />)
+    cy.get('span').should('have.attr', 'aria-checked', 'true')
+  })
+  
+  it('can init unchecked', () => {
+    cy.mount(<Checkbox checked={false} />)
+    cy.get('span').should('have.attr', 'aria-checked', 'false')
+  })
+
+  // can init with setting
+  it('can init with setting', () => {
+    localStorage.setItem('test', 'true')
+    cy.mount(<Checkbox name="test" />)
+    cy.get('span').should('have.attr', 'aria-checked', 'true')
+  })
+
+  // can be changed
+  it('can be changed', () => {
+    cy.mount(<Checkbox checked={true} />)
+    cy.get('span').click().should('have.attr', 'aria-checked', 'false')
+    cy.get('span').click().should('have.attr', 'aria-checked', 'true')
+  })
+
+  // onChange callback works
+  it('calls onChange when clicked', () => {
+    const onChange = cy.stub()
+    cy.mount(<Checkbox onChange={onChange} />)
+    cy.get('span').click().then(() => {
+      expect(onChange).to.be.called()
+    })
+  })
+
+  // disabled prop works
+
+
+  // text prop works
+  it('displays text', () => {
+    cy.mount(<Checkbox text="Hello, world!" />)
+    cy.contains('Hello, world!').should('be.visible')
+  })
+
+  // reminder works (needs stub)
+
+  // reminder works (needs stub)
+
+  // category prop works (needs stub)
+
+  // name prop works
+  it('saves to localStorage with name', () => {
+    cy.mount(<Checkbox name="test" />)
+    cy.get('span').click()
+    expect(localStorage.getItem('test')).to.eq('true')
+  })
+
+  // stats tracking works (needs stub)
+})

src/components/Form/Settings/Checkbox/Checkbox.jsx

@@ -1,61 +1,51 @@
 import variables from 'config/variables';
-import { PureComponent } from 'react';
-import { Checkbox as CheckboxUI, FormControlLabel } from '@mui/material';
-
+import { useEffect, useState } from 'react';
+import { Checkbox as CheckboxUI, Field, Label } from '@headlessui/react';
+import { MdCheckBox } from 'react-icons/md';
 import EventBus from 'utils/eventbus';
 
-class Checkbox extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      checked: localStorage.getItem(this.props.name) === 'true',
-    };
-  }
+const Checkbox = (props) => {
+  const [checked, setChecked] = useState(localStorage.getItem(props.name) === 'true');
 
-  handleChange = () => {
-    const value = this.state.checked !== true;
-    localStorage.setItem(this.props.name, value);
+  useEffect(() => {
+    setChecked(localStorage.getItem(props.name) === 'true');
+  }, [props.name]);
 
-    this.setState({
-      checked: value,
-    });
+  const handleChange = () => {
+    const value = !checked;
+    localStorage.setItem(props.name, value.toString());
 
-    if (this.props.onChange) {
-      this.props.onChange(value);
+    setChecked(value);
+
+    if (props.onChange) {
+      props.onChange(value);
     }
 
-    variables.stats.postEvent(
-      'setting',
-      `${this.props.name} ${this.state.checked === true ? 'enabled' : 'disabled'}`,
-    );
+    variables.stats.postEvent('setting', props.name, value ? 'enabled' : 'disabled');
 
-    if (this.props.element) {
-      if (!document.querySelector(this.props.element)) {
+    if (props.element) {
+      if (!document.querySelector(props.element)) {
         document.querySelector('.reminder-info').style.display = 'flex';
-        return localStorage.setItem('showReminder', true);
+        localStorage.setItem('showReminder', 'true');
       }
     }
 
-    EventBus.emit('refresh', this.props.category);
+    EventBus.emit('refresh', props.category);
   };
 
-  render() {
-    return (
-      <FormControlLabel
-        control={
-          <CheckboxUI
-            name={this.props.name}
-            color="primary"
-            className="checkbox"
-            checked={this.state.checked}
-            onChange={this.handleChange}
-            disabled={this.props.disabled || false}
-          />
-        }
-        label={this.props.text}
-      />
-    );
-  }
-}
+  return (
+    <Field className="w-[300px] h-9 my-1 flex flex-row-reverse items-center gap-2 justify-between text-left">
+      <CheckboxUI
+        checked={checked}
+        onChange={handleChange}
+        disabled={props.disabled || false}
+        className="border border-[#484848] bg-white/5 group size-4 rounded-sm data-[checked]:bg-neutral-900 cursor-pointer grid place-content-center"
+      >
+        <MdCheckBox className="stroke-white opacity-0 group-data-[checked]:opacity-100 size-6" />
+      </CheckboxUI>
+      <Label>{props.text}</Label>
+    </Field>
+  );
+};
 
 export { Checkbox as default, Checkbox };

src/components/Form/Settings/Dropdown/Dropdown.jsx

@@ -1,78 +1,86 @@
-import variables from 'config/variables';
-import { PureComponent, createRef } from 'react';
-import { InputLabel, MenuItem, FormControl, Select } from '@mui/material';
+import { useState } from 'react';
+import { Field, Label, Select } from '@headlessui/react';
+import clsx from 'clsx';
 
 import EventBus from 'utils/eventbus';
+import variables from 'config/variables';
 
-class Dropdown extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: localStorage.getItem(this.props.name) || this.props.items[0].value,
-      title: '',
-    };
-    this.dropdown = createRef();
-  }
+const Dropdown = (props) => {
+  const [value, setValue] = useState(localStorage.getItem(props.name) || props.items[0]?.value);
 
-  onChange = (e) => {
-    const { value } = e.target;
-
-    if (value === variables.getMessage('modals.main.loading')) {
+  const handleChange = (e) => {
+    const newValue = e.target.value;
+    if (newValue === variables.getMessage('modals.main.loading')) {
       return;
     }
 
-    variables.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`);
+    variables.stats.postEvent('setting', `${props.name} from ${value} to ${newValue}`);
+    setValue(newValue);
 
-    this.setState({
-      value,
-    });
-
-    if (!this.props.noSetting) {
-      localStorage.setItem(this.props.name, value);
-      localStorage.setItem(this.props.name2, this.props.value2);
+    if (!props.noSetting) {
+      localStorage.setItem(props.name, newValue);
+      localStorage.setItem(props.name2, props.value2);
     }
 
-    if (this.props.onChange) {
-      this.props.onChange(value);
+    if (props.onChange) {
+      props.onChange(newValue);
     }
 
-    if (this.props.element) {
-      if (!document.querySelector(this.props.element)) {
+    if (props.element) {
+      if (!document.querySelector(props.element)) {
         document.querySelector('.reminder-info').style.display = 'flex';
         return localStorage.setItem('showReminder', true);
       }
     }
 
-    EventBus.emit('refresh', this.props.category);
+    EventBus.emit('refresh', props.category);
   };
 
-  render() {
-    const id = 'dropdown' + this.props.name;
-    const label = this.props.label || '';
+  const selectedItem = props.items.find((item) => item?.value === value);
 
-    return (
-      <FormControl fullWidth className={id}>
-        <InputLabel id={id}>{label}</InputLabel>
+  return (
+    <Field className="w-[100%] max-w-md mr-10">
+      {props.label && <Label className="mb-2 block text-sm font-medium">{props.label}</Label>}
+      <div className="relative">
         <Select
-          labelId={id}
-          id={this.props.name}
-          value={this.state.value}
-          label={label}
-          onChange={this.onChange}
-          ref={this.dropdown}
-          key={id}
+          name={props.name}
+          value={value}
+          onChange={handleChange}
+          aria-label={props.label || props.name}
+          className={clsx(
+            'w-full rounded-lg py-4 px-5 text-sm/6 font-semibold text-white shadow-md',
+            'bg-white/5 hover:bg-white/10 dark:text-white',
+            'border border-white/10',
+            'transition-colors duration-200',
+            'focus:outline-none data-[focus]:outline-1 data-[focus]:outline-white',
+            'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+            'appearance-none',
+          )}
+          style={{
+            backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E")`,
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'right 1.25rem center',
+            backgroundSize: '1rem',
+          }}
         >
-          {this.props.items.map((item) =>
+          {props.items.map((item) =>
             item !== null ? (
-              <MenuItem key={id + item.value} value={item.value}>
+              <option
+                key={item.value}
+                value={item.value}
+                className="bg-modal-content-light dark:bg-modal-content-dark"
+              >
                 {item.text}
-              </MenuItem>
+              </option>
             ) : null,
           )}
         </Select>
-      </FormControl>
-    );
-  }
-}
+      </div>
+      {selectedItem?.description && (
+        <p className="mt-2 text-sm text-white/50">{selectedItem.description}</p>
+      )}
+    </Field>
+  );
+};
 
 export { Dropdown as default, Dropdown };

src/components/Form/Settings/FileUpload/FileUpload.jsx

@@ -1,65 +1,53 @@
 import variables from 'config/variables';
-import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
-import { compressAccurately, filetoDataURL } from 'image-conversion';
 import videoCheck from 'features/background/api/videoCheck';
 
-class FileUpload extends PureComponent {
-  componentDidMount() {
-    document.getElementById(this.props.id).onchange = (e) => {
-      const reader = new FileReader();
-      const file = e.target.files[0];
+function FileUpload({ id, type, accept, loadFunction }) {
+  const handleChange = (e) => {
+    const reader = new FileReader();
+    const file = e.target.files[0];
 
-      if (this.props.type === 'settings') {
-        reader.readAsText(file, 'UTF-8');
-        reader.onload = (e) => {
-          return this.props.loadFunction(e.target.result);
-        };
-      } else {
-        // background upload
-        const settings = {};
+    if (type === 'settings') {
+      reader.readAsText(file, 'UTF-8');
+      reader.onload = (e) => {
+        return loadFunction(e.target.result);
+      };
+    } else {
+      // background upload
+      const settings = {};
 
-        Object.keys(localStorage).forEach((key) => {
-          settings[key] = localStorage.getItem(key);
-        });
+      Object.keys(localStorage).forEach((key) => {
+        settings[key] = localStorage.getItem(key);
+      });
 
-        const settingsSize = new TextEncoder().encode(JSON.stringify(settings)).length;
-        if (videoCheck(file.type) === true) {
-          if (settingsSize + file.size > 4850000) {
-            return toast(variables.getMessage('toasts.no_storage'));
-          }
-
-          return this.props.loadFunction(file);
+      const settingsSize = new TextEncoder().encode(JSON.stringify(settings)).length;
+      if (videoCheck(file.type) === true) {
+        if (settingsSize + file.size > 4850000) {
+          return toast(variables.getMessage('toasts.no_storage'));
         }
 
-        compressAccurately(file, {
-          size: 450,
-          accuracy: 0.9,
-        }).then(async (res) => {
-          if (settingsSize + res.size > 4850000) {
-            return toast(variables.getMessage('toasts.no_storage'));
-          }
-
-          this.props.loadFunction({
-            target: {
-              result: await filetoDataURL(res),
-            },
-          });
-        });
+        return loadFunction(file);
       }
-    };
-  }
 
-  render() {
-    return (
-      <input
-        id={this.props.id}
-        type="file"
-        style={{ display: 'none' }}
-        accept={this.props.accept}
-      />
-    );
-  }
+      loadFunction(
+        {
+          target: {
+            result: file,
+          },
+        },
+      );
+    }
+  };
+
+  return (
+    <input
+      id={id}
+      type="file"
+      style={{ display: 'none' }}
+      accept={accept}
+      onChange={handleChange}
+    />
+  );
 }
 
 export { FileUpload as default, FileUpload };

src/components/Form/Settings/Radio/Radio.jsx

@@ -1,87 +1,82 @@
 import variables from 'config/variables';
-import { PureComponent } from 'react';
-import {
-  Radio as RadioUI,
-  RadioGroup,
-  FormControlLabel,
-  FormControl,
-  FormLabel,
-} from '@mui/material';
+import { useState } from 'react';
+import { Radio as PureRadio, RadioGroup } from '@headlessui/react';
+import { MdCheckCircle } from 'react-icons/md';
 
 import EventBus from 'utils/eventbus';
-import { translations } from 'lib/translations';
 
-class Radio extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: localStorage.getItem(this.props.name),
-    };
-  }
-
-  handleChange = async (e) => {
-    const { value } = e.target;
+function Radio(props) {
+  const [value, setValue] = useState(localStorage.getItem(props.name));
 
+  const handleChange = async (value) => {
     if (value === 'loading') {
       return;
     }
 
-    if (this.props.name === 'language') {
+    if (props.name === 'language') {
       // old tab name
-      if (localStorage.getItem('tabName') === variables.getMessage('tabname')) {
-        localStorage.setItem('tabName', translations[value.replace('-', '_')].tabname);
-      }
+      // TODO: was this important?
+      // if (localStorage.getItem('tabName') === variables.getMessage('tabname')) {
+      //   localStorage.setItem('tabName', translations[value].tabname);
+      // }
     }
 
-    localStorage.setItem(this.props.name, value);
+    localStorage.setItem(props.name, value);
 
-    this.setState({
-      value,
-    });
+    setValue(value);
 
-    if (this.props.onChange) {
-      this.props.onChange(value);
+    if (props.onChange) {
+      props.onChange(value);
     }
 
-    variables.stats.postEvent('setting', `${this.props.name} from ${this.state.value} to ${value}`);
+    if (props.name !== 'language') {
+      variables.stats.postEvent('setting', props.name, `${value}-${value}`);
+    } else {
+      variables.stats.postEvent('language', props.name, `${value}-${value}`);
+    }
 
-    if (this.props.element) {
-      if (!document.querySelector(this.props.element)) {
+    if (props.element) {
+      if (!document.querySelector(props.element)) {
         document.querySelector('.reminder-info').style.display = 'flex';
         return localStorage.setItem('showReminder', true);
       }
     }
 
-    EventBus.emit('refresh', this.props.category);
+    EventBus.emit('refresh', props.category);
   };
 
-  render() {
-    return (
-      <FormControl component="fieldset">
-        <FormLabel
-          className={this.props.smallTitle ? 'radio-title-small' : 'radio-title'}
-          component="legend"
-        >
-          {this.props.title}
-        </FormLabel>
-        <RadioGroup
-          aria-label={this.props.name}
-          name={this.props.name}
-          onChange={this.handleChange}
-          value={this.state.value}
-        >
-          {this.props.options.map((option) => (
-            <FormControlLabel
-              value={option.value}
-              control={<RadioUI />}
-              label={option.name}
-              key={option.name}
-            />
-          ))}
-        </RadioGroup>
-      </FormControl>
-    );
-  }
+  return (
+    <div className="w-full">
+      <RadioGroup
+        aria-label={props.name}
+        name={props.name}
+        onChange={handleChange}
+        value={value}
+        className="space-y-2"
+      >
+        {props.options.map((option) => (
+          <PureRadio
+            key={option.name}
+            label={option.name}
+            value={option.value}
+            className="data-[checked]:bg-white/10 group relative flex cursor-pointer rounded-lg bg-white/5 dark:data-[checked]:hover:bg-neutral-700 dark:hover:bg-neutral-700 dark:data-[checked]:hover:bg-neutral-700 hover:bg-neutral-200 py-4 px-5 dark:text-white text-black shadow-md transition focus:outline-none data-[focus]:outline-1 data-[focus]:outline-white"
+          >
+            <div className="flex w-full items-center justify-between">
+              <div className="text-sm/6">
+                <p className="font-semibold capitalize">{option.name}</p>
+                <div className="flex gap-2 dark:text-white/50">
+                  <div>{option.subname}</div>
+                  <div aria-hidden="true">&middot;</div>
+                  <div>10%</div>
+                </div>
+              </div>
+              <MdCheckCircle className="size-6 dark:fill-white fill-black opacity-0 transition group-data-[checked]:opacity-100" />
+            </div>
+          </PureRadio>
+        ))}
+      </RadioGroup>
+    </div>
+  );
 }
 
 export { Radio as default, Radio };

src/components/Form/Settings/Slider/Slider.jsx

@@ -1,88 +1,361 @@
 import variables from 'config/variables';
-import { PureComponent } from 'react';
+import { useState, useCallback, memo, useMemo, useRef } from 'react';
 import { toast } from 'react-toastify';
-import { Slider } from '@mui/material';
-import { MdRefresh } from 'react-icons/md';
-
+import ReactSlider from 'react-slider';
+import { MdRefresh, MdEdit } from 'react-icons/md';
 import EventBus from 'utils/eventbus';
+import clsx from 'clsx';
+import debounce from 'lodash/debounce';
 
-class SliderComponent extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: localStorage.getItem(this.props.name) || this.props.default,
-    };
-  }
+// Style definitions split into logical groups for better readability
+const buttonStyles = {
+  base: 'inline-flex items-center text-sm px-3 py-1.5 rounded-md font-medium',
+  colors: 'bg-neutral-200 hover:bg-neutral-300 active:bg-neutral-400',
+  darkMode: 'dark:bg-white/10 dark:hover:bg-white/15 dark:active:bg-white/20',
+  text: 'text-neutral-800 dark:text-white',
+  transitions: 'transition-colors duration-200',
+};
 
-  handleChange = (e, text) => {
-    let { value } = e.target;
-    value = Number(value);
+const thumbStyles = {
+  base: [
+    'w-5 h-5 rounded-full cursor-pointer',
+    'absolute top-1/2',
+    'flex items-center justify-center',
+    '-translate-y-1/2', // Keep only Y transform in classes
+  ],
+  colors: 'bg-gradient-to-br from-neutral-50 to-neutral-200 dark:from-white dark:to-neutral-100',
+  interactions: [
+    'hover:from-neutral-100 hover:to-neutral-300',
+    'dark:hover:from-white dark:hover:to-neutral-200',
+    'focus:outline-none focus:ring-2 focus:ring-neutral-400 dark:focus:ring-white/40',
+  ],
+  // Remove transition-all which was causing lag
+  effects: 'shadow-lg shadow-black/10 dark:shadow-black/25',
+  tooltip: [
+    'before:content-[attr(aria-valuenow)]',
+    'before:absolute before:top-[-28px]',
+    'before:text-xs before:bg-neutral-800 dark:before:bg-black/90',
+    'before:text-white before:px-2 before:py-1 before:rounded-md',
+    'before:opacity-0 hover:before:opacity-100',
+    'before:transition-all before:duration-200 before:whitespace-nowrap',
+    'before:shadow-lg',
+  ],
+};
 
-    if (text) {
-      if (value === '') {
-        return this.setState({
-          value: 0,
-        });
-      }
+const markStyles = {
+  base: [
+    'h-3 w-1.5 rounded-full cursor-pointer select-none',
+    'absolute top-1/2 transform -translate-y-1/2',
+  ],
+  colors: 'bg-neutral-400 dark:bg-white/30',
+  hover: 'hover:bg-neutral-600 dark:hover:bg-white/50 hover:scale-110',
+  transitions: 'hover:transition-transform hover:duration-200',
+  label: [
+    'after:content-[attr(data-value)]',
+    'after:absolute after:top-5',
+    'after:text-xs after:opacity-85',
+    'after:left-1/2', // Add this to position relative to center
+    'after:transform after:-translate-x-1/2', // Center the label
+    'after:whitespace-nowrap after:pointer-events-none',
+    'after:font-medium',
+    'after:text-center', // Ensure text is centered
+    'after:text-neutral-700 dark:after:text-white/85',
+  ],
+};
 
-      if (value > this.props.max) {
-        value = this.props.max;
-      }
+const MULTIPLIER_MARKS = {
+  10: '0.1x',
+  100: '1x',
+  200: '2x',
+  400: '4x',
+};
 
-      if (value < this.props.min) {
-        value = this.props.min;
-      }
-    }
+// Update ValueDisplay component to show edit affordance
+const ValueDisplay = memo(({ value, display, onChange, min, max }) => {
+  const [editing, setEditing] = useState(false);
+  const [inputValue, setInputValue] = useState(value);
 
-    localStorage.setItem(this.props.name, value);
-    this.setState({
-      value,
-    });
-
-    if (this.props.element) {
-      if (!document.querySelector(this.props.element)) {
-        document.querySelector('.reminder-info').style.display = 'flex';
-        return localStorage.setItem('showReminder', true);
-      }
-    }
-
-    EventBus.emit('refresh', this.props.category);
+  const handleChange = (e) => {
+    // Allow typing any numeric input, validate on blur
+    const numericValue = e.target.value.replace(/[^\d.-]/g, '');
+    setInputValue(numericValue);
   };
 
-  resetItem = () => {
-    this.handleChange({
-      target: {
-        value: this.props.default || '',
-      },
-    });
+  const handleBlur = () => {
+    setEditing(false);
+    const numValue = Number(inputValue);
+
+    // Only validate and clamp on blur
+    if (!isNaN(numValue)) {
+      const clampedValue = Math.min(Math.max(numValue, min), max);
+      setInputValue(clampedValue);
+      onChange(clampedValue);
+    } else {
+      setInputValue(value);
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      handleBlur();
+    } else if (e.key === 'Escape') {
+      setEditing(false);
+      setInputValue(value);
+    }
+  };
+
+  return editing ? (
+    <input
+      type="number" // Change to number type
+      value={inputValue}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+      min={min} // Optional: add min/max if needed
+      max={max}
+      step="any" // Allow decimal values
+      className="w-20 text-sm bg-neutral-200 dark:bg-white/15 text-neutral-800 dark:text-white 
+                px-3 py-1.5 rounded-md font-medium outline-none focus:ring-2 
+                focus:ring-neutral-400 dark:focus:ring-white/40
+                [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none
+                transition-colors duration-200" // Added transition
+      autoFocus
+    />
+  ) : (
+    <div
+      onClick={() => setEditing(true)}
+      className="group relative flex items-center gap-2 text-sm bg-neutral-200 dark:bg-white/15 
+                text-neutral-800 dark:text-white px-3 py-1.5 rounded-md font-medium cursor-pointer 
+                hover:bg-neutral-300 dark:hover:bg-white/20 transition-colors duration-200"
+    >
+      <span className="flex items-center">
+        {value}
+        <span className="text-neutral-500 dark:text-white/50 ml-0.5">{display}</span>
+      </span>
+      <MdEdit className="w-4 h-4 opacity-50 group-hover:opacity-100 transition-opacity" />
+      <span
+        className="absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-neutral-800 
+                     dark:bg-black/90 text-white text-xs rounded opacity-0 group-hover:opacity-100 
+                     transition-opacity duration-200 whitespace-nowrap"
+      >
+        Click to edit
+      </span>
+    </div>
+  );
+});
+
+// Memoized reset button component
+const ResetButton = memo(({ onClick }) => (
+  <button
+    onClick={onClick}
+    className={clsx(
+      buttonStyles.base,
+      buttonStyles.colors,
+      buttonStyles.darkMode,
+      buttonStyles.text,
+      buttonStyles.transitions,
+    )}
+  >
+    <MdRefresh className="w-4 h-4 mr-1.5" />
+    {variables.getMessage('settings:buttons.reset')}
+  </button>
+));
+
+function SliderComponent(props) {
+  const [value, setValue] = useState(() => {
+    try {
+      const stored = localStorage.getItem(props.name);
+      return stored ? Number(stored) : Number(props.default);
+    } catch (e) {
+      return Number(props.default);
+    }
+  });
+
+  const isDraggingRef = useRef(false);
+  const lastUpdateRef = useRef(value);
+
+  // Separated storage update from visual update
+  const updateStorage = useCallback(
+    (newValue) => {
+      try {
+        localStorage.setItem(props.name, newValue);
+        lastUpdateRef.current = newValue;
+
+        if (props.element && !document.querySelector(props.element)) {
+          const reminderElement = document.querySelector('.reminder-info');
+          if (reminderElement) {
+            reminderElement.style.display = 'flex';
+            localStorage.setItem('showReminder', true);
+            return;
+          }
+        }
+
+        EventBus.emit('refresh', props.category);
+      } catch (e) {
+        console.error('Error updating slider:', e);
+      }
+    },
+    [props.element, props.category],
+  );
+
+  // More efficient debounced storage update
+  const debouncedUpdate = useMemo(() => debounce(updateStorage, 150), [updateStorage]);
+
+  const handleChange = useCallback(
+    (newValue) => {
+      if (typeof newValue !== 'number') return;
+      const clampedValue = Math.min(Math.max(newValue, props.min), props.max);
+
+      // Always update visual state immediately
+      setValue(clampedValue);
+
+      // Only update storage if we're not actively dragging
+      if (!isDraggingRef.current) {
+        debouncedUpdate(clampedValue);
+      }
+    },
+    [props.min, props.max, debouncedUpdate],
+  );
+
+  const handleDragStart = useCallback(() => {
+    isDraggingRef.current = true;
+  }, []);
+
+  const handleDragEnd = useCallback(() => {
+    isDraggingRef.current = false;
+    // Ensure final value is stored
+    if (lastUpdateRef.current !== value) {
+      updateStorage(value);
+    }
+  }, [value, updateStorage]);
+
+  // Update thumbStyles to include performance optimizations
+  const enhancedThumbStyles = {
+    ...thumbStyles,
+    performance: [
+      'will-change-transform',
+      'transform translate3d(0,0,0)',
+      'backface-visibility-hidden',
+    ],
+  };
+
+  const resetItem = useCallback(() => {
+    handleChange(Number(props.default));
     toast(variables.getMessage('toasts.reset'));
-  };
+  }, [props.default, handleChange]);
 
-  render() {
-    return (
-      <>
-        <span className={'sliderTitle'}>
-          {this.props.title}
-          <span>{Number(this.state.value)}</span>
-          <span className="link" onClick={this.resetItem}>
-            <MdRefresh />
-            {variables.getMessage('modals.main.settings.buttons.reset')}
-          </span>
-        </span>
-        <Slider
-          value={Number(this.state.value)}
-          onChange={this.handleChange}
-          valueLabelDisplay="auto"
-          default={Number(this.props.default)}
-          min={Number(this.props.min)}
-          max={Number(this.props.max)}
-          step={Number(this.props.step) || 1}
-          getAriaValueText={(value) => `${value}`}
-          marks={this.props.marks || []}
+  const handleMarkClick = useCallback(
+    (markValue) => {
+      handleChange(markValue);
+    },
+    [handleChange],
+  );
+
+  // Memoized render functions to prevent unnecessary re-renders
+  const renderThumb = useMemo(
+    () => (thumbProps, state) => (
+      <div
+        {...thumbProps}
+        style={{
+          ...thumbProps.style,
+          left: thumbProps.style.left,
+          marginLeft: 0,
+          transform: 'translateY(-50%)', // Only handle Y transform here
+        }}
+        aria-label={`Slider value: ${state.valueNow}%`}
+        aria-valuenow={`${state.valueNow}${props.display}`}
+        role="slider"
+        aria-valuemin={state.valueMin}
+        aria-valuemax={state.valueMax}
+      />
+    ),
+    [props.display],
+  );
+
+  const renderMark = useMemo(
+    () => (markProps) => {
+      if (!MULTIPLIER_MARKS[markProps.key]) return null;
+
+      return (
+        <div
+          {...markProps}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleMarkClick(markProps.key);
+          }}
+          onMouseDown={(e) => e.preventDefault()}
+          data-value={MULTIPLIER_MARKS[markProps.key]}
+          role="button"
+          tabIndex={0}
+          aria-label={`Set zoom to ${MULTIPLIER_MARKS[markProps.key]}`}
+          className={`${markProps.className} cursor-pointer`}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              handleMarkClick(markProps.key);
+            }
+          }}
         />
-      </>
-    );
-  }
+      );
+    },
+    [handleMarkClick],
+  );
+
+  return (
+    <div className="w-full">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-sm font-medium text-neutral-800 dark:text-white">{props.title}</span>
+        <div className="flex items-center gap-2 justify-between w-full">
+          <ValueDisplay
+            value={value}
+            display={props.display}
+            onChange={handleChange}
+            min={Number(props.min)}
+            max={Number(props.max)}
+          />
+          <ResetButton onClick={resetItem} />
+        </div>
+      </div>
+
+      <ReactSlider
+        value={value}
+        onChange={handleChange}
+        onBeforeChange={handleDragStart}
+        onAfterChange={handleDragEnd}
+        min={Number(props.min)}
+        max={Number(props.max)}
+        step={Number(props.step) || 1}
+        marks={Object.keys(MULTIPLIER_MARKS).map(Number)}
+        snapPoints={Object.keys(MULTIPLIER_MARKS).map(Number)}
+        snap
+        className="h-14 flex items-center touch-none"
+        thumbClassName={clsx([
+          ...thumbStyles.base,
+          thumbStyles.colors,
+          ...thumbStyles.interactions,
+          thumbStyles.effects,
+          ...thumbStyles.tooltip,
+          'touch-none',
+          'left-0', // Add this to ensure proper positioning
+        ])}
+        trackClassName="h-2 bg-neutral-300 dark:bg-white/15 rounded-full absolute top-1/2 transform -translate-y-1/2 touch-none"
+        markClassName={clsx([
+          ...markStyles.base,
+          markStyles.colors,
+          markStyles.hover,
+          markStyles.transitions,
+          ...markStyles.label,
+        ])}
+        renderThumb={renderThumb}
+        renderMark={renderMark}
+      />
+    </div>
+  );
 }
 
-export { SliderComponent as default, SliderComponent as Slider };
+// Export memoized version for better performance when parent components re-render
+const Slider = memo(SliderComponent);
+Slider.displayName = 'Slider';
+
+export { Slider as default, Slider };

src/components/Form/Settings/Switch/Switch.jsx

@@ -1,60 +1,53 @@
 import variables from 'config/variables';
-import { PureComponent } from 'react';
-import { Switch as SwitchUI, FormControlLabel } from '@mui/material';
+import { useState } from 'react';
+import { Field, Label, Switch as SwitchUI } from '@headlessui/react';
 
 import EventBus from 'utils/eventbus';
 
-class Switch extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      checked: localStorage.getItem(this.props.name) === 'true',
-    };
-  }
+function Switch(props) {
+  const [checked, setChecked] = useState(localStorage.getItem(props.name) === 'true');
 
-  handleChange = () => {
-    const value = this.state.checked !== true;
-    localStorage.setItem(this.props.name, value);
+  const handleChange = () => {
+    const value = checked !== true;
+    localStorage.setItem(props.name, value);
 
-    this.setState({
-      checked: value,
-    });
+    setChecked(value);
 
-    if (this.props.onChange) {
-      this.props.onChange(value);
+    if (props.onChange) {
+      props.onChange(value);
     }
 
     variables.stats.postEvent(
       'setting',
-      `${this.props.name} ${this.state.checked === true ? 'enabled' : 'disabled'}`,
+      `${props.name} ${checked === true ? 'enabled' : 'disabled'}`,
     );
 
-    if (this.props.element) {
-      if (!document.querySelector(this.props.element)) {
+    if (props.element) {
+      if (!document.querySelector(props.element)) {
         document.querySelector('.reminder-info').style.display = 'flex';
         return localStorage.setItem('showReminder', true);
       }
     }
 
-    EventBus.emit('refresh', this.props.category);
+    EventBus.emit('refresh', props.category);
   };
 
-  render() {
-    return (
-      <FormControlLabel
-        control={
-          <SwitchUI
-            name={this.props.name}
-            color="primary"
-            checked={this.state.checked}
-            onChange={this.handleChange}
-          />
-        }
-        label={this.props.header ? '' : this.props.text}
-        labelPlacement="start"
-      />
-    );
-  }
+  return (
+    <Field className="flex flex-row items-center justify-between w-[100%]">
+      <Label>{props.header ? '' : props.text}</Label>
+      <SwitchUI
+        checked={checked}
+        onChange={handleChange}
+        className="box-border group relative flex h-7 w-14 cursor-pointer rounded-full bg-white/10 p-1 transition-colors duration-200 ease-in-out focus:outline-none data-[focus]:outline-1 data-[focus]:outline-white data-[checked]:bg-white/10"
+      >
+        {' '}
+        <span
+          aria-hidden="true"
+          className="pointer-events-none inline-block size-5 translate-x-0 rounded-full bg-white ring-0 shadow-lg transition duration-200 ease-in-out group-data-[checked]:translate-x-7"
+        />
+      </SwitchUI>
+    </Field>
+  );
 }
 
 export { Switch as default, Switch };