refactor(frontend): move to and enforce absolute imports

[odzhychko]

Enforce absolute imports as they were often request in PR reviews ^^

Example before

import useCalendarsStore from '../../../store/calendars.js'

Example after

import useCalendarsStore from '@/store/calendars.js'

🤖 AI (if applicable)

• The content of this PR was partly or fully generated using AI
  • only used AI for writing eslint.config.mjs
  • changes to imports were done by ESLint
  • changes to path in vi.mock were done by search and replace

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[SebastianKrupinski]

Thank goodness for eslint fix!

[SebastianKrupinski]

Bypassed failed PHP tests as the failures are unrelated

[susnux]

I am curious as this is non standard behavior and always will require tooling plugins, so there must be a benefit larger than that?

[odzhychko]

[...]
Second, absolute imports let me easily move files around. When all imports are absolute, there’s less friction to moving a file, because all of the imports will just boringly work in the new directory.
[...]
Third, absolute imports scale well. A large React component is typically going to have a lot of imports:
[...]

https://www.jakeworth.com/posts/the-joy-of-javascript-absolute-imports/

For me those two points are the main benefits of absolute imports.

Also support of @/ for absolute imports is something the official Vue starter (npm create vue@latest) configures by default. So I guess, it is not too uncommon and kind of a quasi standard 🤷

[SebastianKrupinski]

I am curious as this is non standard behavior and always will require tooling plugins, so there must be a benefit larger than that?

The "@/" is supported out of the box with webpack/vite/ts/etc without plug-ins... the plugins are only for usage enforcement.

The main point to it stop the dot insanity "../../../" in some places we had "../../../../../../" makes it hard to figure out which folder you are referencing

[susnux]

The "@/" is supported out of the box with webpack/vite/ts/etc without plug-ins... the plugins are only for usage enforcement.

I was more referring to actual standards like ECMA for ESM and thus general tooling support.
But yes I get the benefit for deeply nested code :)