bundle size optimizations

package.json

@@ -98,6 +98,7 @@
         "format-duration": "^3.0.2",
         "fuse.js": "^7.1.0",
         "i18next": "^25.6.2",
+        "i18next-http-backend": "^3.0.2",
         "idb-keyval": "^6.2.2",
         "immer": "^10.2.0",
         "is-electron": "^2.2.2",

pnpm-lock.yaml

@@ -122,6 +122,9 @@ importers:
       i18next:
         specifier: ^25.6.2
         version: 25.6.2(typescript@5.8.3)
+      i18next-http-backend:
+        specifier: ^3.0.2
+        version: 3.0.2(encoding@0.1.13)
       idb-keyval:
         specifier: ^6.2.2
         version: 6.2.2
@@ -2579,6 +2582,9 @@ packages:
     engines: {node: '>=20'}
     hasBin: true
 
+  cross-fetch@4.0.0:
+    resolution: {integrity: sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -3423,6 +3429,9 @@ packages:
   humanize-ms@1.2.1:
     resolution: {integrity: sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==}
 
+  i18next-http-backend@3.0.2:
+    resolution: {integrity: sha512-PdlvPnvIp4E1sYi46Ik4tBYh/v/NbYfFFgTjkwFl0is8A18s7/bx9aXqsrOax9WUbeNS6mD2oix7Z0yGGf6m5g==}
+
   i18next-parser@9.3.0:
     resolution: {integrity: sha512-VaQqk/6nLzTFx1MDiCZFtzZXKKyBV6Dv0cJMFM/hOt4/BWHWRgYafzYfVQRUzotwUwjqeNCprWnutzD/YAGczg==}
     engines: {node: ^18.0.0 || ^20.0.0 || ^22.0.0, npm: '>=6', yarn: '>=1'}
@@ -4107,6 +4116,15 @@ packages:
   node-api-version@0.2.1:
     resolution: {integrity: sha512-2xP/IGGMmmSQpI1+O/k72jF/ykvZ89JeuKX3TLJAYPDVLUalrshrLHkeVcCCZqG/eEa635cr8IBYzgnDvM2O8Q==}
 
+  node-fetch@2.7.0:
+    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+
   node-mpv@https://codeload.github.com/jeffvli/Node-MPV/tar.gz/32b4d64395289ad710c41d481d2707a7acfc228f:
     resolution: {tarball: https://codeload.github.com/jeffvli/Node-MPV/tar.gz/32b4d64395289ad710c41d481d2707a7acfc228f}
     version: 2.0.0-beta.3
@@ -5317,6 +5335,9 @@ packages:
     resolution: {integrity: sha512-y8MN937s/HVhEoBU1SxfHC+wxCHkV1a9gW8eAdTadYh/bGyesZIVcbjI+mSpFbSVwQici/XjBjuUyri1dnXwBw==}
     engines: {node: '>=10.13.0'}
 
+  tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+
   tr46@1.0.1:
     resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
 
@@ -5619,6 +5640,9 @@ packages:
   wcwidth@1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
 
+  webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+
   webidl-conversions@4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
 
@@ -5630,6 +5654,9 @@ packages:
     resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
     engines: {node: '>=18'}
 
+  whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+
   whatwg-url@7.1.0:
     resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
 
@@ -8358,6 +8385,12 @@ snapshots:
       '@epic-web/invariant': 1.0.0
       cross-spawn: 7.0.6
 
+  cross-fetch@4.0.0(encoding@0.1.13):
+    dependencies:
+      node-fetch: 2.7.0(encoding@0.1.13)
+    transitivePeerDependencies:
+      - encoding
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -9470,6 +9503,12 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  i18next-http-backend@3.0.2(encoding@0.1.13):
+    dependencies:
+      cross-fetch: 4.0.0(encoding@0.1.13)
+    transitivePeerDependencies:
+      - encoding
+
   i18next-parser@9.3.0:
     dependencies:
       '@babel/runtime': 7.27.1
@@ -10095,6 +10134,12 @@ snapshots:
     dependencies:
       semver: 7.7.2
 
+  node-fetch@2.7.0(encoding@0.1.13):
+    dependencies:
+      whatwg-url: 5.0.0
+    optionalDependencies:
+      encoding: 0.1.13
+
   node-mpv@https://codeload.github.com/jeffvli/Node-MPV/tar.gz/32b4d64395289ad710c41d481d2707a7acfc228f: {}
 
   node-releases@2.0.26: {}
@@ -11372,6 +11417,8 @@ snapshots:
     dependencies:
       streamx: 2.22.0
 
+  tr46@0.0.3: {}
+
   tr46@1.0.1:
     dependencies:
       punycode: 2.3.1
@@ -11663,6 +11710,8 @@ snapshots:
     dependencies:
       defaults: 1.0.4
 
+  webidl-conversions@3.0.1: {}
+
   webidl-conversions@4.0.2: {}
 
   whatwg-encoding@3.1.1:
@@ -11671,6 +11720,11 @@ snapshots:
 
   whatwg-mimetype@4.0.0: {}
 
+  whatwg-url@5.0.0:
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+
   whatwg-url@7.1.0:
     dependencies:
       lodash.sortby: 4.7.0

src/i18n/i18n.ts

@@ -1,5 +1,6 @@
-import { PostProcessorModule, StringMap, TOptions } from 'i18next';
+import { PostProcessorModule, TOptions } from 'i18next';
 import i18n from 'i18next';
+import backend from 'i18next-http-backend';
 import { initReactI18next } from 'react-i18next';
 
 import ar from './locales/ar.json';
@@ -207,7 +208,12 @@ const ignoreSentenceCaseLanguages = ['de'];
 
 const sentenceCasePostProcessor: PostProcessorModule = {
     name: 'sentenceCase',
-    process: (value: string, _key: string, _options: TOptions<StringMap>, translator: any) => {
+    process: (
+        value: string,
+        _key: string,
+        _options: TOptions<Record<string, string>>,
+        translator: any,
+    ) => {
         const sentences = value.split('. ');
 
         return sentences
@@ -227,6 +233,7 @@ i18n.use(lowerCasePostProcessor)
     .use(upperCasePostProcessor)
     .use(titleCasePostProcessor)
     .use(sentenceCasePostProcessor)
+    .use(backend)
     .use(initReactI18next) // passes i18n down to react-i18next
     .init({
         fallbackLng: 'en',

src/renderer/app.tsx

@@ -1,15 +1,62 @@
 import { MantineProvider } from '@mantine/core';
-import '@mantine/core/styles.css';
-import '@mantine/dates/styles.css';
 import { Notifications } from '@mantine/notifications';
+// Base mantine styles (required)
+import '@mantine/core/styles/baseline.css';
+import '@mantine/core/styles/default-css-variables.css';
+import '@mantine/core/styles/global.css';
+// Shared mantine styles
+import '@mantine/core/styles/ScrollArea.css';
+import '@mantine/core/styles/UnstyledButton.css';
+import '@mantine/core/styles/VisuallyHidden.css';
+import '@mantine/core/styles/Paper.css';
+import '@mantine/core/styles/Popover.css';
+import '@mantine/core/styles/CloseButton.css';
+import '@mantine/core/styles/Group.css';
+import '@mantine/core/styles/Loader.css';
+import '@mantine/core/styles/Overlay.css';
+import '@mantine/core/styles/ModalBase.css';
+import '@mantine/core/styles/Input.css';
+import '@mantine/core/styles/InlineInput.css';
+import '@mantine/core/styles/Flex.css';
+import '@mantine/core/styles/FloatingIndicator.css';
+import '@mantine/core/styles/ActionIcon.css';
+// Component-specific mantine styles (needs to be updated if new components are added)
+import '@mantine/core/styles/Accordion.css';
+import '@mantine/core/styles/ActionIcon.css';
+import '@mantine/core/styles/Badge.css';
+import '@mantine/core/styles/Button.css';
+import '@mantine/core/styles/Center.css';
+import '@mantine/core/styles/Checkbox.css';
+import '@mantine/core/styles/Code.css';
+import '@mantine/core/styles/ColorInput.css';
+import '@mantine/core/styles/Dialog.css';
+import '@mantine/core/styles/Divider.css';
+import '@mantine/core/styles/Flex.css';
+import '@mantine/core/styles/Grid.css';
+import '@mantine/core/styles/Group.css';
+import '@mantine/core/styles/Kbd.css';
+import '@mantine/core/styles/LoadingOverlay.css';
+import '@mantine/core/styles/Menu.css';
+import '@mantine/core/styles/Modal.css';
+import '@mantine/core/styles/NumberInput.css';
+import '@mantine/core/styles/Pagination.css';
+import '@mantine/core/styles/PasswordInput.css';
+import '@mantine/core/styles/Pill.css';
+import '@mantine/core/styles/Rating.css';
+import '@mantine/core/styles/SegmentedControl.css';
+import '@mantine/core/styles/Slider.css';
+import '@mantine/core/styles/Stack.css';
+import '@mantine/core/styles/Switch.css';
+import '@mantine/core/styles/Table.css';
+import '@mantine/core/styles/Tabs.css';
+import '@mantine/core/styles/Text.css';
+import '@mantine/core/styles/Title.css';
+import '@mantine/core/styles/Tooltip.css';
+import '@mantine/dates/styles.css';
 import '@mantine/notifications/styles.css';
 import isElectron from 'is-electron';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
-import '/@/shared/styles/global.css';
-
-import 'overlayscrollbars/overlayscrollbars.css';
-
 import i18n from '/@/i18n/i18n';
 import { useDiscordRpc } from '/@/renderer/features/discord-rpc/use-discord-rpc';
 import { PlayerProvider } from '/@/renderer/features/player/context/player-context';
@@ -21,6 +68,10 @@ import { useCssSettings, useHotkeySettings, useSettingsStore } from '/@/renderer
 import { useAppTheme } from '/@/renderer/themes/use-app-theme';
 import { sanitizeCss } from '/@/renderer/utils/sanitize';
 import { WebAudio } from '/@/shared/types/types';
+import '/@/shared/styles/global.css';
+
+import 'overlayscrollbars/overlayscrollbars.css';
+
 import '/styles/overlayscrollbars.css';
 
 const ipc = isElectron() ? window.api.ipc : null;

src/renderer/components/item-list/item-detail-list/item-detail-list.tsx

@@ -1,4 +1,4 @@
-import { throttle } from 'lodash';
+import throttle from 'lodash/throttle';
 import { AnimatePresence, motion, Variants } from 'motion/react';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import {

src/renderer/hooks/use-server-authenticated.ts

@@ -1,5 +1,5 @@
 import isElectron from 'is-electron';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { api } from '/@/renderer/api';

src/shared/styles/global.css

@@ -122,56 +122,56 @@ button {
 @font-face {
     font-family: Archivo;
     font-weight: 100 1000;
-    src: url('../../../assets/fonts/Archivo-VariableFont_wdth,wght.ttf');
+    src: url('../../../assets/fonts/Archivo-VariableFont_wdth,wght.woff2');
 }
 
 @font-face {
     font-family: Raleway;
     font-weight: 100 1000;
-    src: url('../../../assets/fonts/Raleway-VariableFont_wght.ttf');
+    src: url('../../../assets/fonts/Raleway-VariableFont_wght.woff2');
 }
 
 @font-face {
     font-family: Fredoka;
     font-weight: 100 1000;
-    src: url('../../../assets/fonts/Fredoka-VariableFont_wdth,wght.ttf');
+    src: url('../../../assets/fonts/Fredoka-VariableFont_wdth,wght.woff2');
 }
 
 @font-face {
     font-family: 'League Spartan';
     font-weight: 100 1000;
-    src: url('../../../assets/fonts/LeagueSpartan-VariableFont_wght.ttf');
+    src: url('../../../assets/fonts/LeagueSpartan-VariableFont_wght.woff2');
 }
 
 @font-face {
     font-family: Lexend;
     font-weight: 100 1000;
-    src: url('../../../assets/fonts/Lexend-VariableFont_wght.ttf');
+    src: url('../../../assets/fonts/Lexend-VariableFont_wght.woff2');
 }
 
 @font-face {
     font-family: Inter;
     font-weight: 100 1000;
-    src: url('../../../assets/fonts/Inter-VariableFont_slnt,wght.ttf');
+    src: url('../../../assets/fonts/Inter-VariableFont_slnt,wght.woff2');
 }
 
 @font-face {
     font-family: Sora;
     font-weight: 100 1000;
-    src: url('../../../assets/fonts/Sora-VariableFont_wght.ttf');
+    src: url('../../../assets/fonts/Sora-VariableFont_wght.woff2');
 }
 
 @font-face {
     font-family: 'Work Sans';
     font-weight: 100 1000;
-    src: url('../../../assets/fonts/WorkSans-VariableFont_wght.ttf');
+    src: url('../../../assets/fonts/WorkSans-VariableFont_wght.woff2');
 }
 
 @font-face {
     font-family: Poppins;
     font-style: normal;
     font-weight: 400;
-    src: url('../../../assets/fonts/Poppins-Regular.ttf');
+    src: url('../../../assets/fonts/Poppins-Regular.woff2');
     font-display: swap;
 }
 
@@ -179,7 +179,7 @@ button {
     font-family: Poppins;
     font-style: normal;
     font-weight: 600;
-    src: url('../../../assets/fonts/Poppins-SemiBold.ttf');
+    src: url('../../../assets/fonts/Poppins-SemiBold.woff2');
     font-display: swap;
 }
 
@@ -187,7 +187,7 @@ button {
     font-family: Poppins;
     font-style: normal;
     font-weight: 700;
-    src: url('../../../assets/fonts/Poppins-Bold.ttf');
+    src: url('../../../assets/fonts/Poppins-Bold.woff2');
     font-display: swap;
 }
 
@@ -195,7 +195,7 @@ button {
     font-family: Poppins;
     font-style: normal;
     font-weight: 800;
-    src: url('../../../assets/fonts/Poppins-ExtraBold.ttf');
+    src: url('../../../assets/fonts/Poppins-ExtraBold.woff2');
     font-display: swap;
 }
 
@@ -203,20 +203,20 @@ button {
     font-family: Poppins;
     font-style: normal;
     font-weight: 900;
-    src: url('../../../assets/fonts/Poppins-Black.ttf');
+    src: url('../../../assets/fonts/Poppins-Black.woff2');
     font-display: swap;
 }
 
 @font-face {
     font-family: Raleway;
     font-weight: 100 1000;
-    src: url('../../../assets/fonts/Raleway-VariableFont_wght.ttf');
+    src: url('../../../assets/fonts/Raleway-VariableFont_wght.woff2');
 }
 
 @font-face {
     font-family: 'Noto Sans JP';
     font-weight: 100 900;
-    src: url('../../../assets/fonts/NotoSansJP-VariableFont_wght.ttf');
+    src: url('../../../assets/fonts/NotoSansJP-VariableFont_wght.woff2');
     unicode-range: U+3000-9FFF, U+FF00-FFEF; /* Japanese characters */
 }
 

src/shared/types/domain-types.ts

@@ -1,4 +1,3 @@
-import { Omit } from 'lodash';
 import orderBy from 'lodash/orderBy';
 import reverse from 'lodash/reverse';
 import shuffle from 'lodash/shuffle';

web.vite.config.ts

@@ -20,7 +20,7 @@ export default defineConfig({
                 favicon: normalizePath(path.resolve(__dirname, './assets/icons/favicon.ico')),
                 index: normalizePath(path.resolve(__dirname, './src/renderer/index.html')),
                 preview_full_screen_player: normalizePath(
-                    path.resolve(__dirname, './media/preview_full_screen_player.png'),
+                    path.resolve(__dirname, './media/preview_full_screen_player.webp'),
                 ),
             },
             output: {
@@ -98,9 +98,9 @@ export default defineConfig({
                     {
                         form_factor: 'wide',
                         label: 'Full screen player showing music player and lyrics',
-                        sizes: '1440x900',
+                        sizes: '720x450',
-                        src: 'preview_full_screen_player.png',
+                        src: 'preview_full_screen_player.webp',
-                        type: 'image/png',
+                        type: 'image/webp',
                     },
                 ],
                 short_name: 'Feishin',