Dependency and frontend guide update

.github/workflows/ci.yml

@@ -23,7 +23,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           persist-credentials: false
 
@@ -34,15 +34,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           persist-credentials: false
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
 
       - name: Setup node env 🏗
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           cache: pnpm
           node-version-file: .nvmrc

.github/workflows/codeql-analysis.yml

@@ -22,17 +22,17 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           persist-credentials: false
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@v4
         with:
           languages: ${{ matrix.language }}
 
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v3
+        uses: github/codeql-action/autobuild@v4
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@v4

.github/workflows/deploy-docs.yml

@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0 # Fetch all history for all branches
           persist-credentials: false
@@ -25,7 +25,7 @@ jobs:
         uses: pnpm/action-setup@v4
 
       - name: Setup node env 🏗
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           cache: pnpm
           node-version-file: .nvmrc
@@ -61,7 +61,7 @@ jobs:
           rm -rf .vitepress/dist-main
 
       - name: Upload Pages artifact
-        uses: actions/upload-pages-artifact@v3
+        uses: actions/upload-pages-artifact@v4
         with:
           path: .vitepress/dist/
 

.nvmrc

@@ -1 +1 @@
-v22
+v24

.vitepress/plugins/markdown-fit-media.ts

@@ -1,8 +1,9 @@
 import type MarkdownIt from 'markdown-it';
 
 // Modified from https://github.com/ulfschneider/markdown-it-fitmedia
+import * as fs from 'node:fs';
 import * as cheerio from 'cheerio';
-import sizeOf from 'image-size';
+import { imageSize } from 'image-size';
 
 interface FitMediaOptions {
   imgDir?: string;
@@ -28,10 +29,10 @@ interface Token {
 }
 
 function getDimensions(src: string, fitMediaOptions: FitMediaOptions): Dimensions {
-  if (fitMediaOptions.imgDir) {
-    return sizeOf(`${fitMediaOptions.imgDir}${src}`);
-  }
-  return sizeOf(src);
+  const filePath = fitMediaOptions.imgDir ? `${fitMediaOptions.imgDir}${src}` : src;
+  const buffer = fs.readFileSync(filePath);
+  const result = imageSize(buffer);
+  return { width: result.width ?? 0, height: result.height ?? 0 };
 }
 
 function styleAspectRatio(style: string | undefined, width: number, height: number): string {

contribution-guides/vue-typescript.md

@@ -10,21 +10,21 @@ pnpm run --filter rotki test:unit
 
 These are small tests ensuring that parts of the code work well in isolation.
 
-The second type of tests is an end-to-end (`e2e`) test suite using `cypress`. The e2e tests require the Python environment with all dependencies installed because they depend on the actual Python backend. These tests ensure proper e2e functionality and application integration and try to replicate scenarios of real user interaction through the application.
+The second type of tests is an end-to-end (`e2e`) test suite using [Playwright](https://playwright.dev/). The e2e tests require the Python environment with all dependencies installed because they depend on the actual Python backend. These tests ensure proper e2e functionality and application integration and try to replicate scenarios of real user interaction through the application.
 
 To run the e2e tests, use the following command inside the frontend directory:
 
 ```sh
-pnpm run --filter rotki test:integration-ci
+pnpm run --filter rotki test:e2e
 ```
 
 The above command will run the e2e tests in headless mode. If you want to debug specific tests, you can also run:
 
 ```sh
-pnpm run --filter rotki test:integration
+pnpm run --filter rotki test:e2e:ui
 ```
 
-This command will open the Cypress Test Runner window where you can select specific suites to execute.
+This command will open the Playwright UI mode where you can select specific tests to execute and see detailed traces.
 
 ## Linting
 
@@ -177,19 +177,24 @@ export const useCounterStore = defineStore('counter', () => {
 });
 ```
 
-### useCssModules
-
-It should be only used if there is some access to the css module class names inside the script tag.
-If the only usage is in the template then use `$style` instead
-
 ### useAttrs
 
 It should be only used if there is some access to the `attrs` inside the script tag.
 If the only usage is in the template part then use `$attrs` instead.
 
-### Style Tag
+### Styling
+
+Use [Tailwind CSS](https://tailwindcss.com/) utility classes directly in the template for styling components. Avoid using scoped styles, CSS modules, or BEM naming conventions.
+
+```vue
+<template>
+  <div class="flex items-center gap-2 p-4 rounded-lg bg-rui-grey-100">
+    <span class="text-rui-text font-medium">{{ title }}</span>
+  </div>
+</template>
+```
 
-Initially, the style tag was using scoped SCSS with [BEM](https://getbem.com/naming/) for naming. Any scoped style should eventually be replaced with [CSS Modules](https://vuejs.org/api/sfc-css-features.html#css-modules), and we should simplify naming and move away from BEM.
+If you encounter components using legacy scoped styles or CSS modules, consider migrating them to Tailwind classes when making changes to those components.
 
 ## Dependencies
 

package.json

@@ -2,7 +2,7 @@
   "name": "@rotki/docs",
   "version": "1.0.0",
   "private": true,
-  "packageManager": "pnpm@10.13.1",
+  "packageManager": "pnpm@10.26.1",
   "description": "rotki's user guide and facing documentation",
   "keywords": [
     "static",
@@ -26,28 +26,28 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@vitejs/plugin-vue": "6.0.0",
-    "vue": "3.5.17"
+    "@vitejs/plugin-vue": "6.0.3",
+    "vue": "3.5.26"
   },
   "devDependencies": {
-    "@rotki/eslint-config": "4.4.0",
-    "@rotki/eslint-plugin": "^1.1.0",
+    "@rotki/eslint-config": "4.5.0",
+    "@rotki/eslint-plugin": "1.2.0",
     "@types/node": "24.0.15",
-    "@vue/compiler-sfc": "3.5.17",
-    "@vue/runtime-dom": "3.5.17",
+    "@vue/compiler-sfc": "3.5.26",
+    "@vue/runtime-dom": "3.5.26",
     "cheerio": "1.1.2",
-    "eslint": "9.31.0",
+    "eslint": "9.39.2",
     "husky": "9.1.7",
-    "image-size": "1.2.1",
-    "lint-staged": "16.1.2",
+    "image-size": "2.0.2",
+    "lint-staged": "16.2.7",
     "markdown-it": "14.1.0",
     "papaparse": "5.5.3",
     "url": "0.11.4",
-    "vitepress": "1.6.3",
-    "vitepress-plugin-tabs": "0.7.1"
+    "vitepress": "1.6.4",
+    "vitepress-plugin-tabs": "0.7.3"
   },
   "engines": {
-    "node": ">=22 <23",
+    "node": ">=24 <25",
     "pnpm": ">=10 <11"
   },
   "pnpm": {