refactor: improve performance for common use cases

packages/app/.gitignore

@@ -1 +1,2 @@
-.transly
+.transly
+chakra-config.json

packages/app/package.json

@@ -27,6 +27,7 @@
 		"test": "vitest",
 		"clean": "rm -Rf dist out",
 		"dev": "webpack -w -c webpack.config.ts",
+		"serve": "webpack serve -c webpack.config.ts",
 		"start": "electron-forge start -- --no-sandbox",
 		"build": "rm -Rf dist && cross-env NODE_OPTIONS=--max-old-space-size=4096 NODE_ENV=production webpack -c webpack.config.ts",
 		"make": "electron-forge make",
@@ -35,15 +36,18 @@
 		"typecheck": "tsc --noEmit --watch",
 		"update-icons": "tsx ./scripts/icons/build.ts",
 		"update-locales": "transly cache seed && transly translate && prettier --write './src/locales/**/*.json'",
-		"release-preview": "npm version prerelease --preid=preview && git push --follow-tags"
+		"release-preview": "npm version prerelease --preid=preview && git push --follow-tags",
+		"postinstall": "chakra typegen src/components/theme/index.ts"
 	},
 	"devDependencies": {
+		"@chakra-ui/cli": "^3.35.0",
 		"@electron-forge/cli": "^7.11.1",
 		"@electron-forge/maker-deb": "^7.11.1",
 		"@electron-forge/maker-dmg": "^7.11.1",
 		"@electron-forge/maker-wix": "^7.11.1",
 		"@electron-forge/maker-zip": "^7.11.1",
 		"@electron-forge/plugin-auto-unpack-natives": "^7.11.1",
+		"@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
 		"@reforged/maker-appimage": "^5.1.1",
 		"@svgr/webpack": "^8.1.0",
 		"@swc/core": "^1.15.11",
@@ -78,6 +82,7 @@
 		"mini-css-extract-plugin": "^2.10.0",
 		"node-loader": "^2.1.0",
 		"p-limit": "^7.2.0",
+		"react-refresh": "^0.18.0",
 		"sharp": "^0.34.5",
 		"sharp-ico": "^0.1.5",
 		"swc-loader": "^0.2.7",
@@ -93,13 +98,15 @@
 		"vite-tsconfig-paths": "^6.1.1",
 		"webpack": "^5.106.2",
 		"webpack-cli": "^6.0.1",
+		"webpack-dev-server": "^5.2.4",
 		"webpack-merge": "^6.0.1"
 	},
 	"dependencies": {
-		"@chakra-ui/react": "^2.10.9",
+		"@chakra-ui/react": "^3.35.0",
 		"@emotion/react": "^11.14.0",
-		"@emotion/styled": "^11.14.1",
 		"@floating-ui/react": "^0.27.17",
+		"@headless-tree/core": "^1.7.0",
+		"@headless-tree/react": "^1.7.0",
 		"@hookform/resolvers": "^5.2.2",
 		"@lexical/react": "^0.39.0",
 		"@msgpack/msgpack": "^3.1.3",
@@ -126,13 +133,14 @@
 		"file-saver": "^2.0.5",
 		"flexsearch": "^0.8.212",
 		"font-list": "^2.0.2",
-		"framer-motion": "^12.29.2",
+		"fuse.js": "^7.3.0",
 		"fuzzysort": "^3.1.0",
 		"hotkeys-js": "^4.0.0",
 		"humanize-duration": "^3.33.2",
 		"i18next": "^26.0.4",
 		"i18next-fs-backend": "^2.6.3",
 		"i18next-http-backend": "^3.0.4",
+		"idb-keyval": "^6.2.2",
 		"leviathan-crypto": "^1.4.0",
 		"lexical": "^0.39.0",
 		"libsodium-wrappers-sumo": "^0.8.2",
@@ -142,15 +150,17 @@
 		"monaco-markdown": "^0.0.12",
 		"ms": "^2.1.3",
 		"nano-queries": "^2.0.3",
+		"next-themes": "^0.4.6",
 		"ordinality": "^1.0.2",
 		"pretty-bytes": "^7.1.0",
 		"react": "^19.2.4",
+		"react-aria-components": "^1.18.0",
 		"react-dom": "^19.2.4",
 		"react-dropzone": "^14.3.8",
 		"react-focus-lock": "^2.13.7",
 		"react-hook-form": "^7.71.1",
 		"react-i18next": "^17.0.2",
-		"react-icons": "^5.5.0",
+		"react-icons": "^5.6.0",
 		"react-redux": "^9.2.0",
 		"react-resizable-panels": "^3.0.6",
 		"recursive-readdir": "^2.2.3",

packages/app/scripts/webpack/app.ts

@@ -3,6 +3,7 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import path from 'path';
 import { Configuration, WebpackPluginInstance } from 'webpack';
+import { Configuration as DevServerConfig } from 'webpack-dev-server';
 import { merge } from 'webpack-merge';
 
 import { productName } from '../../package.json';
@@ -24,6 +25,12 @@ function getPathForPackage(packageName: string, packagePath: string) {
 
 export default merge(commonConfig, {
 	target: 'web',
+	devServer: {
+		client: {
+			overlay: false,
+		},
+		hot: 'only',
+	} satisfies DevServerConfig,
 	entry: {
 		...Object.fromEntries(
 			windows.map(({ name, renderer }) => [

packages/app/scripts/webpack/shared.ts

@@ -3,14 +3,22 @@ import path from 'path';
 import { SwcMinifyWebpackPlugin } from 'swc-minify-webpack-plugin';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 import { Configuration } from 'webpack';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 
-import { isPreloadChunk, isProduction, mode, projectRoot } from './utils';
+import {
+	isPreloadChunk,
+	isProduction,
+	isWebpackServeMode,
+	mode,
+	projectRoot,
+} from './utils';
 
 const outputPath = path.join(projectRoot, 'dist');
 
 console.log('Webpack run', {
 	isProduction,
 	outputPath,
+	isWebpackServeMode,
 });
 
 export default {
@@ -81,7 +89,7 @@ export default {
 	},
 	output: {
 		path: outputPath,
-		publicPath: './',
+		publicPath: isWebpackServeMode ? '/' : './',
 
 		// Better chunk naming for caching
 		chunkFilename: isProduction ? '[name].[contenthash].js' : '[name].js',
@@ -113,6 +121,8 @@ export default {
 								runtime: 'automatic',
 								pragma: 'React.createElement',
 								pragmaFrag: 'React.Fragment',
+								development: !isProduction && isWebpackServeMode,
+								refresh: !isProduction && isWebpackServeMode,
 							},
 						},
 						target: 'es2022',
@@ -142,6 +152,7 @@ export default {
 	},
 
 	plugins: [
+		...(isWebpackServeMode ? [new ReactRefreshWebpackPlugin()] : []),
 		// run full TS type check in parallel; async: false -> build waits for typecheck and fails on errors
 		new ForkTsCheckerWebpackPlugin({
 			// Allow async in dev for faster builds

packages/app/scripts/webpack/utils.ts

@@ -1,5 +1,6 @@
 import { existsSync, readdirSync, statSync } from 'fs';
 import path from 'path';
+import { argv } from 'process';
 import { PathData } from 'webpack';
 
 export const projectRoot = path.resolve('.');
@@ -8,6 +9,8 @@ export const mode = process.env.NODE_ENV === 'production' ? 'production' : 'deve
 
 export const isProduction = mode === 'production';
 
+export const isWebpackServeMode = argv.includes('serve');
+
 export const isPreloadChunk = (chunk: Exclude<PathData['chunk'], void>) =>
 	Boolean(chunk.name && chunk.name.endsWith('-preload'));
 

packages/app/src/api/buttons/useButtonsManager.ts

@@ -19,9 +19,11 @@ export const useButtonsManager = (): ButtonsManagerObject => {
 	const managerRef = useRef<ButtonsManager>(null as unknown as ButtonsManager);
 	if (!managerRef.current) {
 		managerRef.current = new ButtonsManager((buttons) => {
-			setState({
-				start: buttons.start.map((button) => button.button),
-				end: buttons.end.map((button) => button.button),
+			requestAnimationFrame(() => {
+				setState({
+					start: buttons.start.map((button) => button.button),
+					end: buttons.end.map((button) => button.button),
+				});
 			});
 		});
 	}

packages/app/src/components/Features/Group.tsx

@@ -6,9 +6,9 @@ export const FeaturesPanel = ({ children, ...props }: StackProps) => {
 	return (
 		<VStack
 			align="start"
-			backgroundColor="dim.50"
+			backgroundColor="surface.panel"
 			padding="1rem"
-			borderRadius="6px"
+			borderRadius="xl"
 			width="100%"
 			gap="1rem"
 			{...props}

packages/app/src/components/Features/Header/FeaturesHeader.tsx

@@ -8,14 +8,14 @@ export const FeaturesHeader: FC<FeaturesHeaderProps> = ({ children, ...rest }) =
 		<Text
 			as="h2"
 			{...rest}
-			sx={{
+			css={{
 				marginLeft: '40%',
 				fontSize: '18px',
 				fontWeight: 'bold',
+
 				'&:not(:first-child)': {
 					marginTop: '2rem',
 				},
-				...rest.sx,
 			}}
 		>
 			{children}

packages/app/src/components/Features/Option/FeaturesOption.tsx

@@ -14,14 +14,14 @@ export const FeaturesOption: FC<FeaturesOptionProps> = ({
 	return (
 		<Box
 			w="100%"
-			sx={{
+			css={{
 				display: 'grid',
 				gridTemplateColumns: '40% minmax(auto, 60%)',
 				gridRowGap: '50rem',
 			}}
 		>
 			<Text
-				sx={{
+				css={{
 					display: 'flex',
 					justifyContent: 'end',
 					lineHeight: '120%',

packages/app/src/components/IconButton.tsx

@@ -1,34 +1,37 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, memo, ReactNode } from 'react';
 import {
 	IconButton as BaseIconButton,
 	IconButtonProps as BaseIconButtonProps,
-	Tooltip,
-	TooltipProps,
 } from '@chakra-ui/react';
+import { Tooltip, type TooltipProps } from '@components/ui/tooltip';
 
-export type IconButtonProps = Omit<BaseIconButtonProps, 'icon' | 'aria-label'> & {
-	icon: Exclude<BaseIconButtonProps['icon'], void>;
+export type IconButtonProps = Omit<BaseIconButtonProps, 'aria-label'> & {
+	icon: ReactNode;
 	title: string;
-	tooltipPlacement?: TooltipProps['placement'];
+	tooltipPlacement?: string;
 	tooltipProps?: Omit<TooltipProps, 'children'>;
 };
 
-export const IconButton = forwardRef<HTMLDivElement, IconButtonProps>(
-	({ icon, title, tooltipPlacement, tooltipProps, ...buttonProps }, ref) => {
-		return (
-			<Tooltip
-				label={title}
-				hasArrow
-				placement={tooltipPlacement}
-				{...tooltipProps}
-			>
-				<BaseIconButton
-					ref={ref}
-					icon={icon}
-					aria-label={title}
-					{...buttonProps}
-				/>
-			</Tooltip>
-		);
-	},
+export const IconButton = memo(
+	forwardRef<HTMLButtonElement, IconButtonProps>(
+		({ icon, title, tooltipPlacement, tooltipProps, ...buttonProps }, ref) => {
+			return (
+				<Tooltip
+					showArrow
+					{...(tooltipProps ?? {})}
+					content={title}
+					positioning={{
+						placement: tooltipPlacement as any,
+						...(tooltipProps?.positioning ?? {}),
+					}}
+				>
+					<BaseIconButton ref={ref} aria-label={title} {...buttonProps}>
+						{icon}
+					</BaseIconButton>
+				</Tooltip>
+			);
+		},
+	),
 );
+
+IconButton.displayName = 'IconButton';