Refactor frontend

[NanamiNakano]

Description

This PR refactors frontend, fixes infinite re-render issues, and brings some performance enhancements by reducing unnecessary re-rendering and useEffect hooks.

Details

Optimizations

• Now the data used for initialization (labels, user data and "task" length) will now only be loaded once
• Add error handling
• Add load state
• Reduce unnecessary calculations between re-renders with useMemo and useCallback
• Simplified rendering logic

Project structure

• Separate util functions from components
• State Management with zustand
• Split components for easier maintenance

Bug fixes

• Fix column resize styling issue by rewriting the history table
• Fix highlighting components (SliceText and JustSliceText, perviously defined inside the Page component) infinite re-render issue
• Fix the issue that sometimes it was not possible to manually select texts when server section rendered

Modifications

• Disable selection when viewing history (Editing will be implemented in the future)

Testing

@Yazawazi and I have tested that all the features work correctly!

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@types/[email protected]	None	0	6.36 kB	types
npm/[email protected]	environment	0	627 kB	mweststrate
npm/[email protected]	None	0	344 kB	timdown
npm/[email protected]	environment	+2	149 kB	daishi
npm/[email protected]	environment	+2	114 kB	react-bot
npm/[email protected]	None	0	88.5 kB	daishi
pypi/[email protected]	environment Transitive: eval, filesystem, network, shell, unsafe	+180	1.46 GB	hynek
pypi/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	+223	1.5 GB

View full report↗︎

[NanamiNakano]

#10 should be merge first