style(frontend): organize imports with Biome TASK-1640

[Akuukis]

💭 Notes

See package.json, tsconfig.json, biome.jsonc, webpack.common.js, kpi.code-workspace and js/k-icons.ts files. The rest are semi-auto-generated.

Organize imports using Biome, automatically on save in VSCode workspace. As Biome explains:

Import statements are sorted by “distance”. Modules that are “farther” from the user are put on the top, modules “closer” to the user are put on the bottom.

For smarter distance calculation Biome treats # prefixed paths as internal paths (as implemented by nodejs itself), and so I also did a simple search/replace refactor to consolidate aliases and remap jsapp/js/* to #/*.

Biome supports grouped imports. Note that manually set grouped imports conflicts with auto-import functionality - auto-imports just add the new import at the end of imports and so at the end of last import group instead of the correct import group, and then either we commit wrong grouping or the import has to be adjusted manually anyways. Usually the first, but both defeats the purpose of either auto-imports or import group. Unless, it's ok to most of time to automatically add to only the last group, while only manually to others! Here's my compromise:

• first group for side-effect imports (e.g. import './example.scss'), we want the order of them manually reviewed anyways. And we will have less of them over time.
• second group for import { ... } from 'react' only, because it looks like all of like to see react import at the top of other imports, because almost all files already had it there. It's only one line (or none), there wont be second line.
• third group for everything else, auto-import safe and auto-sorted.

👀 Preview steps

Developers:

• open repo in the VSCode workspace
  • perhaps also restart Biome extension (CTRL+SHIFT+P -> "Biome: Restart LSP Server") to load the new config
  • YMMV for other IDEs
• open a javascript or typescript file
• change import order
• save and see how it resorts the imports
  • if not, in VSCode check bottom-right corner whenever formatting is manually disabled

Users:

• nothing should change.
• beware of order of explicit side-effect imports. Please search for import ' to review those parts.
• beware of order of hidden side-effect imports - do we have any? 🤔

[magicznyleszek]

Just one question to verify things. Other than that LGTM, tested and works like a charm :)