Migrate Cypress (E2E) tests to Vite and TypeScript

This commit progresses the migration from Vue CLI to Vite (#230).

TypeScript migration:

- Convert JavaScript Cypress tests and configurations to TypeScript.
- Introduce `tsconfig.json` for Cypress, following official
  recommendation.

Test execution:

- Use Cypress CLI to run the tests.
- Rename Cypress commands to reflect official naming conventions.
- Start Vue server prior to Cypress execution, using
  `start-server-and-test` package based on official documentation.
- Remove dependency on Vue CLI plugin ((`@vue/cli-plugin-e2e-cypress`).

Configuration standardization (based on Cypress docs):

- Delete unused `plugins/` directory.
- Move test (spec) files to to the root directory.
- Add official ESLint plugin (`eslint-plugin-cypress`).

Changes for importing `vite.config.ts` into `cypress.config.ts`:

- Add TypeScript import assertations to files importing JSON files.
- Use ESM friendly way instead of `__dirname` to solve `ReferenceError:
  __dirname is not defined in ES module scrope`.

Other changes:

- Simplify comments in placeholder files.
- Create Cypress specific `.gitignore` for enhanced maintainability,
  clarity and scalability.
- Remove redundant `vue.config.cjs`.

tests/e2e/revert-toggle.cy.ts

@@ -0,0 +1,50 @@
+describe('revert toggle', () => {
+  context('toggle switch', () => {
+    beforeEach(() => {
+      cy.visit('/');
+      cy.get('.card')
+        .eq(1) // to get 2nd element, first is often cleanup that may lack revert button
+        .click(); // open the card card
+      cy.get('.toggle-switch')
+        .first()
+        .as('toggleSwitch');
+    });
+
+    it('should be visible', () => {
+      cy.get('@toggleSwitch')
+        .should('be.visible');
+    });
+
+    it('should have revert label', () => {
+      cy.get('@toggleSwitch')
+        .find('span')
+        .contains('revert');
+    });
+
+    it('should render label completely without clipping', () => {
+      cy
+        .get('@toggleSwitch')
+        .find('span')
+        .should(($label) => {
+          const text = $label.text();
+          const font = getFont($label[0]);
+          const expectedMinimumTextWidth = getTextWidth(text, font);
+          const containerWidth = $label.parent().width();
+          expect(expectedMinimumTextWidth).to.be.lessThan(containerWidth);
+        });
+    });
+  });
+});
+
+function getFont(element) {
+  const computedStyle = window.getComputedStyle(element);
+  return `${computedStyle.fontWeight} ${computedStyle.fontSize} ${computedStyle.fontFamily}`;
+}
+
+function getTextWidth(text, font) {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  ctx.font = font;
+  const measuredWidth = ctx.measureText(text).width;
+  return measuredWidth;
+}