applied various optimisations to UI

package.json

@@ -46,10 +46,8 @@
     "@uiw/codemirror-extensions-color": "^4.21.25",
     "@uiw/codemirror-theme-github": "^4.21.25",
     "@uiw/react-codemirror": "^4.21.25",
-    "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.17",
     "classnames": "^2.5.1",
-    "clsx": "^2.1.0",
     "color": "^4.2.3",
     "dompurify": "^3.0.8",
     "framer-motion": "^11.0.25",
@@ -57,22 +55,15 @@
     "lodash": "^4.17.21",
     "million": "latest",
     "motion": "^10.17.0",
-    "npm": "^10.4.0",
-    "npm-run-all": "^4.1.5",
-    "pocketbase": "^0.21.1",
-    "preact": "^10.20.0",
     "react": "^18.2.0",
     "react-best-gradient-color-picker": "3.0.5",
-    "react-confetti-explosion": "^2.1.2",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.13",
     "react-router-dom": "^6.22.0",
-    "react-shadow": "^20.4.0",
     "react-toastify": "^10.0.5",
     "rimraf": "^5.0.5",
     "sortablejs": "^1.15.2",
     "swiper": "^11.1.0",
-    "tailwind-merge": "^2.2.2",
     "tailwindcss": "^3.4.1",
     "ts-loader": "^9.5.1",
     "typescript": "^5.3.3",

src/interface/components/BackgroundSelector.tsx

@@ -2,7 +2,6 @@ import { ChangeEvent, memo, useEffect, useState } from "react";
 import { downloadPresetBackground, openDB, readAllData, writeData } from "../hooks/BackgroundDataLoader";
 import presetBackgrounds from "../assets/presetBackgrounds";
 import "./BackgroundSelector.css";
-import browser from "webextension-polyfill";
 
 export interface Background {
   id: string;

src/interface/components/ThemeCover.tsx

@@ -14,7 +14,7 @@ type ThemeCoverProps = {
   onThemeDelete: (themeId: string) => void;
 };
 
-export const ThemeCover: React.FC<ThemeCoverProps> = ({
+export const ThemeCover: React.FC<ThemeCoverProps> = React.memo(({
   theme,
   downloaded,
   isSelected,
@@ -96,7 +96,7 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
       </div>
     </button>
   );
-};
+});
 
 const LoadingSpinner = ({ size }: { size: number }) => {
   return <div style={{ width: `${size}px`, height: `${size}px` }} className={`animate-spin rounded-full border-2 border-white border-t-2 border-t-transparent`}></div>;

src/interface/pages/SettingsPage.tsx

@@ -7,6 +7,7 @@ import Shortcuts from './SettingsPage/Shortcuts';
 import Picker from '../components/Picker';
 import Themes from './SettingsPage/Themes';
 import { ToastContainer } from 'react-toastify';
+import { memo } from 'react';
 
 import browser from 'webextension-polyfill';
 
@@ -46,4 +47,4 @@ const SettingsPage = ({ standalone }: SettingsPage) => {
   );
 };
 
-export default SettingsPage;
+export default memo(SettingsPage);

src/interface/pages/SettingsPage/Settings.tsx

@@ -6,6 +6,7 @@ import { SettingsList } from '../../types/SettingsProps';
 import { useSettingsContext } from '../../SettingsContext';
 
 import browser from 'webextension-polyfill'
+import { memo } from 'react';
 
 const Settings: React.FC = () => {
   const { settingsState, setSettingsState } = useSettingsContext();
@@ -89,4 +90,4 @@ const Settings: React.FC = () => {
   );
 };
 
-export default Settings;
+export default memo(Settings);

src/interface/pages/SettingsPage/Themes.tsx

@@ -1,6 +1,7 @@
 import { FC, createRef, useState } from 'react';
 import BackgroundSelector from '../../components/BackgroundSelector';
 import ThemeSelector from '../../components/ThemeSelector';
+import { memo } from 'react';
 
 type ThemeSelectorRef = {
   disableTheme: () => void;
@@ -26,4 +27,4 @@ const Themes: FC = () => {
   );
 };
 
-export default Themes;
+export default memo(Themes);

src/interface/utils/cn.ts

@@ -1,6 +0,0 @@
-import { ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
- 
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}