chore(release): 0.5.18

build(deps): bump sql-formatter from 8.2.0 to 11.0.2

.github/dependabot.yml

@@ -6,6 +6,8 @@
 version: 2
 updates:
   - package-ecosystem: "npm"
+    allow:
+      - dependency-type: "production"
     directory: "/"
     schedule:
       interval: "monthly" 

.github/workflows/build-linux.yml

@@ -1,29 +0,0 @@
-name: Build/release [LINUX]
-
-on: push
-
-jobs:
-  release:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest]
-
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v2
-
-      - name: Install Node.js, NPM and Yarn
-        uses: actions/setup-node@v1
-        with:
-          node-version: 14
-      
-      - name: Install dependencies
-        run: npm i
-
-      - name: Build/release Electron app
-        uses: samuelmeuli/action-electron-builder@v1
-        with:
-          github_token: ${{ secrets.github_token }}
-          release: ${{ startsWith(github.ref, 'refs/tags/v') }}

.github/workflows/build-mac.yml

@@ -1,29 +0,0 @@
-name: Build/release [MAC]
-
-on: push
-
-jobs:
-  release:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [macos-latest]
-
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v2
-
-      - name: Install Node.js, NPM and Yarn
-        uses: actions/setup-node@v1
-        with:
-          node-version: 14
-          
-      - name: Install dependencies
-        run: npm i
-        
-      - name: Build/release Electron app
-        uses: samuelmeuli/action-electron-builder@v1
-        with:
-          github_token: ${{ secrets.github_token }}
-          release: ${{ startsWith(github.ref, 'refs/tags/v') }}

.github/workflows/build-win.yml

@@ -1,29 +0,0 @@
-name: Build/release [WINDOWS]
-
-on: push
-
-jobs:
-  release:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [windows-2019]
-
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v2
-
-      - name: Install Node.js, NPM and Yarn
-        uses: actions/setup-node@v1
-        with:
-          node-version: 14
-
-      - name: Install dependencies
-        run: npm i
-          
-      - name: Build/release Electron app
-        uses: samuelmeuli/action-electron-builder@v1
-        with:
-          github_token: ${{ secrets.github_token }}
-          release: ${{ startsWith(github.ref, 'refs/tags/v') }}

.github/workflows/build.yml

@@ -0,0 +1,37 @@
+name: Build & release
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  release:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      
+      - name: Install dependencies
+        run: npm i
+        
+      - name: "Build"
+        run: npm run build
+
+      - name: Release
+        uses: ncipollo/release-action@v1
+        with:
+          artifacts: "build/*.AppImage,build/*.yml,build/*.deb,build/*.dmg,build/*.blockmap,build/*.zip,build/*.exe"
+          allowUpdates: true
+          draft: true
+          generateReleaseNotes: true

.github/workflows/create-artifact-linux.yml

@@ -10,10 +10,15 @@ jobs:
       - name: Check out Git repository
         uses: actions/checkout@v3
 
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: npm install & build
         run: |
           npm install
-          npm run build:local
+          npm run build
 
       - name: Upload Artifact
         uses: actions/upload-artifact@v3

.github/workflows/create-artifact-macos.yml

@@ -0,0 +1,31 @@
+name: Create artifact [MAC]
+
+on: 
+  workflow_dispatch: {}
+
+jobs:
+  build:
+    runs-on: macos-latest
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: npm install & build
+        run: |
+          npm install
+          npm run build
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: macos-build
+          retention-days: 3
+          path: |
+            build
+            !build/*-unpacked
+            !build/.icon-ico

.github/workflows/test-e2e-linux.yml

@@ -12,12 +12,12 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
-      - name: Install Node.js, NPM and Yarn
-        uses: actions/setup-node@v1
+      - name: Install Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 16
       
       - name: Install dependencies
         run: npm i

.nvmrc

@@ -1 +0,0 @@
-v16.13.0

.stylelintrc

@@ -1,6 +1,7 @@
 {
   "extends": [
-    "stylelint-config-standard"
+    "stylelint-config-standard",
+    "stylelint-config-recommended-vue"
   ],
   "fix": true,
   "formatter": "verbose",
@@ -10,6 +11,7 @@
   "rules": {
     "at-rule-no-unknown": null,
     "no-descending-specificity": null,
+    "font-family-no-missing-generic-family-keyword": null,
     "declaration-colon-newline-after": "always-multi-line"
   },
   "syntax": "scss"

.vscode/settings.json

@@ -7,7 +7,8 @@
       "SQLite",
       "Windows",
       "translation",
-      "Linux"
+      "Linux",
+      "MacOS"
    ],
    "svg.preview.background": "transparent"
 }

CHANGELOG.md

@@ -2,6 +2,93 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.5.18](https://github.com/antares-sql/antares/compare/v0.5.17...v0.5.18) (2022-10-14)
+
+
+### Features
+
+* **PostgreSQL:** UUID random generation option on UUID fields, closes [#424](https://github.com/antares-sql/antares/issues/424) ([a521274](https://github.com/antares-sql/antares/commit/a521274d01031c1411bbbb136369802d43368089))
+
+
+### Bug Fixes
+
+* auto-scroll on sidebar not working, fixes [#447](https://github.com/antares-sql/antares/issues/447) ([dd9c089](https://github.com/antares-sql/antares/commit/dd9c089d27c61ab76d49887c7de2849cbb6e88a6))
+* trackpad horizontal scroll on tabs not working properly ([ba5a1b6](https://github.com/antares-sql/antares/commit/ba5a1b68ab2d56777a5c94eede26e9bded5819e6))
+
+### [0.5.17](https://github.com/antares-sql/antares/compare/v0.5.16...v0.5.17) (2022-09-22)
+
+
+### Features
+
+* added more editor font sizes, closes [#440](https://github.com/antares-sql/antares/issues/440) ([d114f8a](https://github.com/antares-sql/antares/commit/d114f8a65164f702b23175095e6fc2b021e0e038))
+
+
+### Bug Fixes
+
+* "run or reload" shortcut triggers on all connections open ([01f607c](https://github.com/antares-sql/antares/commit/01f607cd40c18ab0f9761b2a05705a966aaae43a))
+* cant run procedures with parameters from leftbar ([efe134a](https://github.com/antares-sql/antares/commit/efe134a059700ca87333dc6e66166d6ec8d289e8))
+* editor font size doesn't change on new tabs, fixes [#442](https://github.com/antares-sql/antares/issues/442) ([84168d1](https://github.com/antares-sql/antares/commit/84168d1d75460acc2c844bfece7d85f0c977e74c))
+* empty definer when editing a view, fixes [#437](https://github.com/antares-sql/antares/issues/437) ([498a9b4](https://github.com/antares-sql/antares/commit/498a9b48e25ee061960f5f649c953cdaf6ff1a58))
+* **MacOS:** empty options on macos menubar ([a142d3c](https://github.com/antares-sql/antares/commit/a142d3c4d77e31375dfbea148eec54ce1f635192))
+
+### [0.5.16](https://github.com/antares-sql/antares/compare/v0.5.15...v0.5.16) (2022-08-26)
+
+
+### Bug Fixes
+
+* CTRL+Right/Left not working on text editor, closes [#427](https://github.com/antares-sql/antares/issues/427) ([ffc645b](https://github.com/antares-sql/antares/commit/ffc645ba5efb1c52670096e4f8c7f992b7335dae))
+* issue updating datetime cells with null value, closes [#423](https://github.com/antares-sql/antares/issues/423) ([ebc325a](https://github.com/antares-sql/antares/commit/ebc325ae0c656dca2eb8f7544ab271beaee9b47e))
+* ts exceptions ([df68114](https://github.com/antares-sql/antares/commit/df681147aaf0bfca69f3ffdc474cc1846541b1d8))
+* **UI:** editor themes group not visible in select element ([9dc700e](https://github.com/antares-sql/antares/commit/9dc700e13ea65bb8c6feac4ff4ffeadd32053614))
+* **UI:** wrong position of fields resizable area ([c90ab0e](https://github.com/antares-sql/antares/commit/c90ab0e8807ff30a9ab58e9aa3515cf427dd6e86))
+* unable to set null or delete rows without primary key ([39326eb](https://github.com/antares-sql/antares/commit/39326eb52e038728b5419d4a8de8024c7ead3002))
+
+### [0.5.15](https://github.com/antares-sql/antares/compare/v0.5.14...v0.5.15) (2022-08-17)
+
+
+### Features
+
+* ability to add new shortcuts ([d044a02](https://github.com/antares-sql/antares/commit/d044a02cb79a9d06aadc34cdbf6e81da84360559))
+* ability to edit shortcuts ([8eb127e](https://github.com/antares-sql/antares/commit/8eb127e45838bc01ba12f0740fec077fcd975532))
+* added more events in shortcuts setting ([5043faf](https://github.com/antares-sql/antares/commit/5043fafa934844ebc2f59cabcec830c6a4d5ca8e))
+* delete shortcuts and restore defaults ([c22413f](https://github.com/antares-sql/antares/commit/c22413fde9dfe5501a5f220070cfe552a318c70b))
+* dynamic shortcut suggestions on empty query tabs ([4df14c3](https://github.com/antares-sql/antares/commit/4df14c3693955bd7801b4b99103fca85f00f3e8c))
+* list of available shortcuts in settings window ([44bb75b](https://github.com/antares-sql/antares/commit/44bb75bc60d7d31bbd99a9ba57f30fd354f7581c))
+* **UI:** connection name on left bar, closes [#382](https://github.com/antares-sql/antares/issues/382) [#414](https://github.com/antares-sql/antares/issues/414) ([4887753](https://github.com/antares-sql/antares/commit/48877534d1a41d351b267c0dab925046ca984179))
+* **UI:** shortcuts setting UI improved ([49b63bc](https://github.com/antares-sql/antares/commit/49b63bc6f28fc6031e6a892d0a48cd35ae2f26cd))
+
+
+### Bug Fixes
+
+* startup exception ([c50d17e](https://github.com/antares-sql/antares/commit/c50d17e82b7fd337d4037ddf646cd1a8fc765bae))
+
+
+### Improvements
+
+* improved keypress detector ([0f219cf](https://github.com/antares-sql/antares/commit/0f219cf9b796b4369c609fb0e8e3b84346a30b07))
+* **translation:** updated italian translation ([c05be83](https://github.com/antares-sql/antares/commit/c05be8304f3cf299cf338f67c00184305e022919))
+
+### [0.5.14](https://github.com/antares-sql/antares/compare/v0.5.13...v0.5.14) (2022-08-09)
+
+
+### Bug Fixes
+
+* unable to open settingbar context menu ([44eb507](https://github.com/antares-sql/antares/commit/44eb507a12bad028a4fa8a8bb0f6442a3e8dde91))
+
+### [0.5.13](https://github.com/antares-sql/antares/compare/v0.5.12...v0.5.13) (2022-08-09)
+
+
+### Features
+
+* copy row as CSV, closes [#394](https://github.com/antares-sql/antares/issues/394) ([1c3d7aa](https://github.com/antares-sql/antares/commit/1c3d7aa30bb9c2bd900a764ee6b97960729e9263))
+* new macos icon ([0bfa14e](https://github.com/antares-sql/antares/commit/0bfa14e1c90320578597df030941530b670a4131))
+
+
+### Bug Fixes
+
+* **MySQL:** error with ANSI sql_mode ([f64a12a](https://github.com/antares-sql/antares/commit/f64a12a8e9c5f764c3a692f1a032736e008058b5))
+* set legacy: false ([104b7c9](https://github.com/antares-sql/antares/commit/104b7c928b9c2abfc056880f16c606a0b1fa7c67))
+
 ### [0.5.12](https://github.com/antares-sql/antares/compare/v0.5.11...v0.5.12) (2022-07-26)
 
 

CONTRIBUTING.md

@@ -44,8 +44,7 @@ In this folder is located the structure of Vue frontend application.
 
 ## Build
 
-The command to build Antares SQL locally is `npm run build:local`.  
-`build` command (without `:local`) is used exclusively by the GitHub Action.
+The command to build Antares SQL locally is `npm run build`. 
 
 ## Conventions
 

README.md

@@ -18,7 +18,8 @@ We are actively working on it, hoping to provide new cool features, improvements
 
 🔗 If you are curious to try Antares you can download and install the [latest release](https://github.com/Fabio286/antares/releases/latest).  
 👁 To stay tuned for new releases [follow Antares SQL](https://twitter.com/AntaresSQL) on Twitter.  
-🌟 Don't forget to **leave a star** if you appreciate this project.
+🌟 Don't forget to **leave a star** if you appreciate this project.  
+🗳️ Poll: **[Which is the main OS you use Antares on?](https://github.com/antares-sql/antares/discussions/379)**
 
 ## Current key features
 
@@ -33,6 +34,7 @@ We are actively working on it, hoping to provide new cool features, improvements
 - SSH tunnel support.
 - Manual commit mode.
 - Import and export database dumps.
+- Customizable keyboard shortcuts.
 - Dark and light theme.
 - Editor themes.
 
@@ -49,11 +51,11 @@ Since Antares SQL is a free software we don't have a budget to spend on annual l
 
 ### Linux
 
-On Linux you can simply download and run the `.AppImage` distribution, install from Snap Store or from AUR.
+On Linux you can simply download and run the `.AppImage` distribution, install from Snap Store, from AUR or from our [PPA repository](https://github.com/antares-sql/antares-ppa).
 
 ### Windows
 
-On Windows you can choose between downloading the app from Microsoft Store or downloading the `.exe` from our [website](https://antares-sql.app/download.html) or [this github repo](https://github.com/Fabio286/antares/releases/latest). Distributions that are not from Microsoft Store are not signed with a certificate, so to install you need to click on "More info" and then "Run anyway" on SmartScreen prompt.
+On Windows you can choose between downloading the app from Microsoft Store or downloading the `.exe` from our [website](https://antares-sql.app/downloads) or [this github repo](https://github.com/Fabio286/antares/releases/latest). Distributions that are not from Microsoft Store are not signed with a certificate, so to install you need to click on "More info" and then "Run anyway" on SmartScreen prompt.
 
 ### MacOS
 
@@ -61,7 +63,7 @@ On macOS you can run `.dmg` distribution following [this guide](https://support.
 
 ## Download
 
-[![Get it from the Snap Store](https://snapcraft.io/static/images/badges/en/snap-store-black.svg)](https://snapcraft.io/antares) [![Get it from AUR](https://raw.githubusercontent.com/Fabio286/antares/3e00c4bae6e036300c752c1a40c5a038fea9c169/docs/aur-badge.svg)](https://aur.archlinux.org/packages/antares-sql/) [![Get it from Microsoft Store](https://raw.githubusercontent.com/Fabio286/antares/gh-pages/src/assets/ms-store.png)](https://www.microsoft.com/p/antares-sql-client/9nhtb9sq51r1?cid=storebadge&ocid=badge&rtc=1&activetab=pivot:overviewtab)  
+[![Get it from the Snap Store](https://snapcraft.io/static/images/badges/en/snap-store-black.svg)](https://snapcraft.io/antares) [![Get it from AUR](https://raw.githubusercontent.com/Fabio286/antares/3e00c4bae6e036300c752c1a40c5a038fea9c169/docs/aur-badge.svg)](https://aur.archlinux.org/packages/antares-sql/) [<img src="https://developer.microsoft.com/store/badges/images/English_get-it-from-MS.png" style="height: 56px">](https://www.microsoft.com/p/antares-sql-client/9nhtb9sq51r1?cid=storebadge&ocid=badge&rtc=1&activetab=pivot:overviewtab)  
 🚀 **[Other Downloads](https://github.com/Fabio286/antares/releases/latest)**
 
 ## Coming soon

package.json

@@ -1,7 +1,7 @@
 {
   "name": "antares",
   "productName": "Antares",
-  "version": "0.5.12",
+  "version": "0.5.18",
   "description": "A modern, fast and productivity driven SQL client with a focus in UX.",
   "license": "MIT",
   "repository": "https://github.com/antares-sql/antares.git",
@@ -12,14 +12,13 @@
     "compile:main": "webpack --mode=production --config webpack.main.config.js",
     "compile:workers": "webpack --mode=production --config webpack.workers.config.js",
     "compile:renderer": "webpack --mode=production --config webpack.renderer.config.js",
-    "build": "cross-env NODE_ENV=production npm run compile",
-    "build:local": "npm run build && electron-builder --publish never",
-    "build:appx": "npm run build:local -- --win appx",
-    "rebuild:electron": "rimraf ./dist &&  npm run postinstall",
+    "build": "cross-env NODE_ENV=production npm run compile && electron-builder --publish never",
+    "build:appx": "npm run build -- --win appx",
+    "rebuild:electron": "rimraf ./dist &&  npm run postinstall && npm run devtools:install",
     "release": "standard-version",
     "release:pre": "npm run release -- --prerelease alpha",
     "devtools:install": "node scripts/devtoolsInstaller",
-    "postinstall": "electron-builder install-app-deps && npm run devtools:install",
+    "postinstall": "electron-builder install-app-deps",
     "test:e2e": "npm run compile && npm run test:e2e-dry",
     "test:e2e-dry": "xvfb-maybe -- playwright test",
     "lint": "eslint . --ext .js,.ts,.vue && stylelint \"./src/**/*.{css,scss,sass,vue}\"",
@@ -65,7 +64,11 @@
       "target": [
         {
           "target": "deb",
-          "arch": "x64"
+          "arch": [
+            "x64",
+            "armv7l",
+            "arm64"
+          ]
         },
         {
           "target": "AppImage",
@@ -76,6 +79,7 @@
           ]
         }
       ],
+      "icon": "assets/linux",
       "category": "Development"
     },
     "appImage": {
@@ -117,7 +121,7 @@
   "dependencies": {
     "@electron/remote": "~2.0.1",
     "@faker-js/faker": "~6.1.2",
-    "@mdi/font": "~6.9.96",
+    "@mdi/font": "~7.0.96",
     "@turf/helpers": "~6.5.0",
     "@vueuse/core": "~8.7.5",
     "ace-builds": "~1.8.1",
@@ -128,20 +132,21 @@
     "electron-window-state": "~5.0.3",
     "encoding": "~0.1.13",
     "leaflet": "~1.7.1",
-    "marked": "~4.0.0",
+    "marked": "~4.0.19",
     "moment": "~2.29.4",
     "mysql2": "~2.3.2",
     "pg": "~8.7.1",
+    "pg-connection-string": "~2.5.0",
     "pg-query-stream": "~4.2.3",
     "pgsql-ast-parser": "~7.2.1",
-    "pinia": "~2.0.13",
+    "pinia": "~2.0.23",
     "source-map-support": "~0.5.20",
     "spectre.css": "~0.5.9",
-    "sql-formatter": "~4.0.2",
+    "sql-formatter": "~11.0.2",
     "ssh2-promise": "~1.0.2",
     "v-mask": "~2.3.0",
-    "vue": "~3.2.37",
-    "vue-i18n": "~9.1.9",
+    "vue": "~3.2.40",
+    "vue-i18n": "~9.2.2",
     "vuedraggable": "~4.1.0"
   },
   "devDependencies": {
@@ -151,7 +156,7 @@
     "@playwright/test": "~1.21.1",
     "@types/better-sqlite3": "~7.5.0",
     "@types/leaflet": "~1.7.9",
-    "@types/marked": "~4.0.3",
+    "@types/marked": "~4.0.7",
     "@types/node": "~17.0.23",
     "@types/pg": "~8.6.5",
     "@typescript-eslint/eslint-plugin": "~5.18.0",
@@ -162,7 +167,7 @@
     "chalk": "~4.1.2",
     "cross-env": "~7.0.2",
     "css-loader": "~6.5.0",
-    "electron": "~19.0.5",
+    "electron": "~19.1.2",
     "electron-builder": "~23.0.3",
     "eslint": "~7.32.0",
     "eslint-config-standard": "~16.0.3",
@@ -176,15 +181,17 @@
     "node-loader": "~2.0.0",
     "playwright": "~1.21.1",
     "playwright-core": "~1.21.1",
+    "postcss-html": "~1.5.0",
     "progress-webpack-plugin": "~1.0.12",
     "rimraf": "~3.0.2",
     "sass": "~1.42.1",
     "sass-loader": "~12.3.0",
     "standard-version": "~9.3.1",
     "style-loader": "~3.3.1",
-    "stylelint": "~13.13.1",
-    "stylelint-config-standard": "~22.0.0",
-    "stylelint-scss": "~3.21.0",
+    "stylelint": "~14.9.1",
+    "stylelint-config-recommended-vue": "~1.4.0",
+    "stylelint-config-standard": "~26.0.0",
+    "stylelint-scss": "~4.3.0",
     "tree-kill": "~1.2.2",
     "ts-loader": "~9.2.8",
     "typescript": "~4.6.3",

scripts/devRunner.js

@@ -114,7 +114,6 @@ function startRenderer (callback) {
    });
 
    const server = new WebpackDevServer(compiler, {
-      hot: true,
       port: 9080,
       client: {
          overlay: true,

scripts/devtoolsInstaller.js

@@ -1,4 +1,5 @@
-// @ts-check
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 const fs = require('fs');
 const path = require('path');
 const https = require('https');

src/common/FakerMethods.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export default class {
    static get _methods () {
       return [
@@ -139,7 +140,7 @@ export default class {
          { name: 'arrayElement', group: 'random', types: ['string'] },
          { name: 'arrayElements', group: 'random', types: ['string'] },
          { name: 'objectElement', group: 'random', types: ['string'] },
-         { name: 'uuid', group: 'random', types: ['string'] },
+         { name: 'uuid', group: 'random', types: ['string', 'uuid'] },
          { name: 'boolean', group: 'random', types: ['string'] },
          { name: 'word', group: 'random', types: ['string'] },
          { name: 'words', group: 'random', types: ['string'] },
@@ -180,7 +181,7 @@ export default class {
             acc[curr.group] = new Set(curr.types);
 
          return acc;
-      }, {});
+      }, {} as any);
 
       const groupsArr = [];
 
@@ -198,12 +199,12 @@ export default class {
       });
    }
 
-   static getGroupsByType (type) {
+   static getGroupsByType (type: string) {
       if (!type) return [];
       return this.getGroups().filter(group => group.types.includes(type));
    }
 
-   static getMethods ({ type, group }) {
+   static getMethods ({ type, group }: {type: string; group: string}) {
       return this._methods.filter(method => method.group === group && method.types.includes(type)).sort((a, b) => {
          if (a.name < b.name)
             return -1;

src/common/fieldTypes.ts

@@ -86,6 +86,14 @@ export const BIT = [
    'BIT VARYING'
 ];
 
+export const BINARY = [
+   'BINARY'
+];
+
+export const UUID = [
+   'UUID'
+];
+
 export const SPATIAL = [
    'POINT',
    'LINESTRING',

src/common/libs/bufferToBase64.ts

@@ -1,5 +1,5 @@
 export function bufferToBase64 (buf: Buffer) {
-   const binstr = Array.prototype.map.call(buf, ch => {
+   const binstr = Array.prototype.map.call(buf, (ch: number) => {
       return String.fromCharCode(ch);
    }).join('');
    return Buffer.from(binstr, 'binary').toString('base64');

src/common/shortcuts.ts

@@ -1,69 +1,138 @@
+export const shortcutEvents: { [key: string]: { l18n: string; l18nParam?: string | number; context?: 'tab' }} = {
+   'run-or-reload': { l18n: 'message.runOrReload', context: 'tab' },
+   'open-new-tab': { l18n: 'message.openNewTab', context: 'tab' },
+   'close-tab': { l18n: 'message.closeTab', context: 'tab' },
+   'format-query': { l18n: 'message.formatQuery', context: 'tab' },
+   'kill-query': { l18n: 'message.killQuery', context: 'tab' },
+   'query-history': { l18n: 'message.queryHistory', context: 'tab' },
+   'clear-query': { l18n: 'message.clearQuery', context: 'tab' },
+   'next-tab': { l18n: 'message.nextTab' },
+   'prev-tab': { l18n: 'message.previousTab' },
+   'open-all-connections': { l18n: 'message.openAllConnections' },
+   'open-filter': { l18n: 'message.openFilter' },
+   'next-page': { l18n: 'message.nextResultsPage' },
+   'prev-page': { l18n: 'message.previousResultsPage' },
+   'toggle-console': { l18n: 'message.toggleConsole' },
+   'save-content': { l18n: 'message.saveContent' },
+   'create-connection': { l18n: 'message.createNewConnection' },
+   'open-settings': { l18n: 'message.openSettings' },
+   'open-scratchpad': { l18n: 'message.openScratchpad' }
+};
+
 interface ShortcutRecord {
    event: string;
-   keys: Electron.Accelerator[];
-   description: string;
+   keys: Electron.Accelerator[] | string[];
+   /** Needed for default shortcuts */
    os: NodeJS.Platform[];
 }
 
+/**
+ * Default shortcuts
+ */
 const shortcuts: ShortcutRecord[] = [
+   {
+      event: 'run-or-reload',
+      keys: ['F5'],
+      os: ['darwin', 'linux', 'win32']
+   },
+   {
+      event: 'save-content',
+      keys: ['CommandOrControl+S'],
+      os: ['darwin', 'linux', 'win32']
+   },
+   {
+      event: 'kill-query',
+      keys: ['CommandOrControl+K'],
+      os: ['darwin', 'linux', 'win32']
+   },
+   {
+      event: 'format-query',
+      keys: ['CommandOrControl+B'],
+      os: ['darwin', 'linux', 'win32']
+   },
+   {
+      event: 'clear-query',
+      keys: ['CommandOrControl+Alt+W'],
+      os: ['darwin', 'linux', 'win32']
+   },
+   {
+      event: 'query-history',
+      keys: ['CommandOrControl+G'],
+      os: ['darwin', 'linux', 'win32']
+   },
    {
       event: 'open-new-tab',
       keys: ['CommandOrControl+T'],
-      description: 'Open a new query tab',
       os: ['darwin', 'linux', 'win32']
    },
    {
       event: 'close-tab',
       keys: ['CommandOrControl+W'],
-      description: 'Close tab',
       os: ['darwin', 'linux', 'win32']
    },
    {
       event: 'next-tab',
-      keys: ['Alt+CommandOrControl+Right', 'CommandOrControl+PageDown'],
-      description: 'Next tab',
+      keys: ['Alt+CommandOrControl+Right'],
       os: ['darwin', 'win32']
    },
    {
       event: 'prev-tab',
-      keys: ['Alt+CommandOrControl+Left', 'CommandOrControl+PageUp'],
-      description: 'Previous tab',
+      keys: ['Alt+CommandOrControl+Left'],
       os: ['darwin', 'win32']
    },
    {
       event: 'next-tab',
       keys: ['CommandOrControl+PageDown'],
-      description: 'Next tab',
-      os: ['linux']
+      os: ['linux', 'win32']
    },
    {
       event: 'prev-tab',
       keys: ['CommandOrControl+PageUp'],
-      description: 'Previous tab',
-      os: ['linux']
+      os: ['linux', 'win32']
    },
    {
-      event: 'open-connections-modal',
+      event: 'open-filter',
+      keys: ['CommandOrControl+F'],
+      os: ['darwin', 'linux', 'win32']
+   },
+   {
+      event: 'next-page',
+      keys: ['CommandOrControl+Right'],
+      os: ['darwin', 'linux', 'win32']
+   },
+   {
+      event: 'prev-page',
+      keys: ['CommandOrControl+Left'],
+      os: ['darwin', 'linux', 'win32']
+   },
+   {
+      event: 'open-all-connections',
       keys: ['Shift+CommandOrControl+Space'],
-      description: 'Show all connections',
       os: ['darwin', 'linux', 'win32']
    },
    {
       event: 'toggle-console',
-      keys: ['CommandOrControl+F12', 'CommandOrControl+`'],
-      description: 'Toggle console',
+      keys: ['CommandOrControl+F12'],
+      os: ['darwin', 'linux', 'win32']
+   },
+   {
+      event: 'toggle-console',
+      keys: ['CommandOrControl+`'],
       os: ['darwin', 'linux', 'win32']
    }
 ];
 
 for (let i = 1; i <= 9; i++) {
-   shortcuts.push(
-      {
-         event: `select-tab-${i}`,
-         keys: [`CommandOrControl+${i}`],
-         description: `Select tab number ${i}`,
-         os: ['darwin', 'linux', 'win32']
-      });
+   shortcutEvents[`select-tab-${i}`] = {
+      l18n: 'message.selectTabNumber',
+      l18nParam: i
+   };
+
+   shortcuts.push({
+      event: `select-tab-${i}`,
+      keys: [`CommandOrControl+${i}`],
+      os: ['darwin', 'linux', 'win32']
+   });
 }
 
 export { shortcuts, ShortcutRecord };

src/main/ipc-handlers/application.ts

@@ -1,4 +1,5 @@
 import { app, ipcMain, dialog } from 'electron';
+import { ShortcutRegister } from '../libs/ShortcutRegister';
 
 export default () => {
    ipcMain.on('close-app', () => {
@@ -12,4 +13,24 @@ export default () => {
    ipcMain.handle('get-download-dir-path', () => {
       return app.getPath('downloads');
    });
+
+   ipcMain.handle('resotre-default-shortcuts', () => {
+      const shortCutRegister = ShortcutRegister.getInstance();
+      shortCutRegister.restoreDefaults();
+   });
+
+   ipcMain.handle('reload-shortcuts', () => {
+      const shortCutRegister = ShortcutRegister.getInstance();
+      shortCutRegister.reload();
+   });
+
+   ipcMain.handle('update-shortcuts', (event, shortcuts) => {
+      const shortCutRegister = ShortcutRegister.getInstance();
+      shortCutRegister.updateShortcuts(shortcuts);
+   });
+
+   ipcMain.handle('unregister-shortcuts', () => {
+      const shortCutRegister = ShortcutRegister.getInstance();
+      shortCutRegister.unregister();
+   });
 };

src/main/ipc-handlers/tables.ts

@@ -177,7 +177,10 @@ export default (connections: {[key: string]: antares.Client}) => {
                if (typeof orgRow[key] === 'string')
                   orgRow[key] = `'${orgRow[key]}'`;
 
-               orgRow[key] = `= ${orgRow[key]}`;
+               if (orgRow[key] === null)
+                  orgRow[key] = `IS ${orgRow[key]}`;
+               else
+                  orgRow[key] = `= ${orgRow[key]}`;
             }
 
             await connections[params.uid]

src/main/libs/ShortcutRegister.ts

@@ -0,0 +1,139 @@
+import { BrowserWindow, globalShortcut, Menu, MenuItem, MenuItemConstructorOptions } from 'electron';
+import * as Store from 'electron-store';
+import { ShortcutRecord, shortcuts } from 'common/shortcuts';
+
+const shortcutsStore = new Store({ name: 'shortcuts' });
+const isDevelopment = process.env.NODE_ENV !== 'production';
+const defaultShortcuts = shortcuts.filter(s => s.os.includes(process.platform));
+
+export type ShortcutMode = 'local' | 'global'
+export type OsMenu = {
+   [key in NodeJS.Platform]?: MenuItemConstructorOptions[];
+};
+
+export class ShortcutRegister {
+   private _shortcuts: ShortcutRecord[];
+   private _mainWindow: BrowserWindow;
+   private _menu: Menu;
+   private _menuTemplate: OsMenu;
+   private _mode: ShortcutMode;
+   private static _instance: ShortcutRegister;
+
+   private constructor (args: { mainWindow: BrowserWindow; menuTemplate?: OsMenu; mode: ShortcutMode }) {
+      this._mainWindow = args.mainWindow;
+      this._menuTemplate = args.menuTemplate || {};
+      this._mode = args.mode;
+      this.shortcuts = shortcutsStore.get('shortcuts', defaultShortcuts) as ShortcutRecord[];
+   }
+
+   public static getInstance (args?: { mainWindow?: BrowserWindow; menuTemplate?: OsMenu; mode?: ShortcutMode }) {
+      if (!ShortcutRegister._instance && args.menuTemplate !== undefined && args.mode !== undefined) {
+         ShortcutRegister._instance = new ShortcutRegister({
+            mainWindow: args.mainWindow,
+            menuTemplate: args.menuTemplate,
+            mode: args.mode
+         });
+      }
+
+      return ShortcutRegister._instance;
+   }
+
+   get shortcuts () {
+      return this._shortcuts;
+   }
+
+   private set shortcuts (value: ShortcutRecord[]) {
+      this._shortcuts = value;
+      shortcutsStore.set('shortcuts', value);
+   }
+
+   init () {
+      this._mainWindow.webContents.send('update-shortcuts', this.shortcuts);
+
+      this.buildBaseMenu();
+
+      if (this._mode === 'global')
+         this.setGlobalShortcuts();
+      else if (this._mode === 'local')
+         this.setLocalShortcuts();
+      else
+         throw new Error(`Unknown mode "${this._mode}"`);
+
+      Menu.setApplicationMenu(this._menu);
+   }
+
+   private buildBaseMenu () {
+      if (Object.keys(this._menuTemplate).includes(process.platform))
+         this._menu = Menu.buildFromTemplate(this._menuTemplate[process.platform]);
+      else
+         this._menu = new Menu();
+   }
+
+   private setLocalShortcuts () {
+      for (const shortcut of this.shortcuts) {
+         if (shortcut.os.includes(process.platform)) {
+            for (const key of shortcut.keys) {
+               try {
+                  this._menu.append(new MenuItem({
+                     label: 'Shortcuts',
+                     visible: false,
+                     submenu: [{
+                        label: String(key),
+                        accelerator: key,
+                        visible: false,
+                        click: () => {
+                           this._mainWindow.webContents.send(shortcut.event);
+                           if (isDevelopment) console.log('LOCAL EVENT:', shortcut);
+                        }
+                     }]
+                  }));
+               }
+               catch (error) {
+                  if (isDevelopment) console.log(error);
+                  this.restoreDefaults();
+                  throw error;
+               }
+            }
+         }
+      }
+   }
+
+   private setGlobalShortcuts () {
+      for (const shortcut of this.shortcuts) {
+         if (shortcut.os.includes(process.platform)) {
+            for (const key of shortcut.keys) {
+               try {
+                  globalShortcut.register(key, () => {
+                     this._mainWindow.webContents.send(shortcut.event);
+                     if (isDevelopment) console.log('GLOBAL EVENT:', shortcut);
+                  });
+               }
+               catch (error) {
+                  if (isDevelopment) console.log(error);
+                  this.restoreDefaults();
+                  throw error;
+               }
+            }
+         }
+      }
+   }
+
+   reload () {
+      this.unregister();
+      this.init();
+   }
+
+   updateShortcuts (shortcuts: ShortcutRecord[]) {
+      this.shortcuts = shortcuts;
+      this.reload();
+   }
+
+   restoreDefaults () {
+      this.shortcuts = defaultShortcuts;
+      this.reload();
+   }
+
+   unregister () {
+      if (this._mode === 'global') globalShortcut.unregisterAll();
+   }
+}

src/main/libs/clients/MySQLClient.ts

@@ -192,14 +192,14 @@ export class MySQLClient extends AntaresCore {
 
       // ANSI_QUOTES check
       const [response] = await connection.query<mysql.RowDataPacket[]>('SHOW GLOBAL VARIABLES LIKE \'%sql_mode%\'');
-      const sqlMode = response[0]?.Value?.split(',');
-      const hasAnsiQuotes = sqlMode.includes('ANSI_QUOTES');
+      const sqlMode: string[] = response[0]?.Value?.split(',');
+      const hasAnsiQuotes = sqlMode.includes('ANSI') || sqlMode.includes('ANSI_QUOTES');
 
       if (this._params.readonly)
          await connection.query('SET SESSION TRANSACTION READ ONLY');
 
       if (hasAnsiQuotes)
-         await connection.query(`SET SESSION sql_mode = "${sqlMode.filter((m: string) => m !== 'ANSI_QUOTES').join(',')}"`);
+         await connection.query(`SET SESSION sql_mode = '${sqlMode.filter((m: string) => !['ANSI', 'ANSI_QUOTES'].includes(m)).join(',')}'`);
 
       return connection;
    }
@@ -219,18 +219,18 @@ export class MySQLClient extends AntaresCore {
 
       // ANSI_QUOTES check
       const [res] = await connection.query<mysql.RowDataPacket[]>('SHOW GLOBAL VARIABLES LIKE \'%sql_mode%\'');
-      const sqlMode = res[0]?.Value?.split(',');
-      const hasAnsiQuotes = sqlMode.includes('ANSI_QUOTES');
+      const sqlMode: string[] = res[0]?.Value?.split(',');
+      const hasAnsiQuotes = sqlMode.includes('ANSI') || sqlMode.includes('ANSI_QUOTES');
 
       if (hasAnsiQuotes)
-         await connection.query(`SET SESSION sql_mode = "${sqlMode.filter((m: string) => m !== 'ANSI_QUOTES').join(',')}"`);
+         await connection.query(`SET SESSION sql_mode = '${sqlMode.filter((m: string) => !['ANSI', 'ANSI_QUOTES'].includes(m)).join(',')}'`);
 
       connection.on('connection', conn => {
          if (this._params.readonly)
             conn.query('SET SESSION TRANSACTION READ ONLY');
 
          if (hasAnsiQuotes)
-            conn.query(`SET SESSION sql_mode = "${sqlMode.filter((m: string) => m !== 'ANSI_QUOTES').join(',')}"`);
+            conn.query(`SET SESSION sql_mode = '${sqlMode.filter((m: string) => !['ANSI', 'ANSI_QUOTES'].includes(m)).join(',')}'`);
       });
 
       return connection;
@@ -940,7 +940,7 @@ export class MySQLClient extends AntaresCore {
 
       return {
          algorithm: algorithm[0]['Create View'].match(/(?<=CREATE ALGORITHM=).*?(?=\s)/gs)[0],
-         definer: viewInfo[0].DEFINER,
+         definer: viewInfo[0].DEFINER.split('@').map((str: string) => `\`${str}\``).join('@'),
          security: viewInfo[0].SECURITY_TYPE,
          updateOption: viewInfo[0].CHECK_OPTION === 'NONE' ? '' : viewInfo[0].CHECK_OPTION,
          sql: viewInfo[0].VIEW_DEFINITION,
@@ -1397,7 +1397,7 @@ export class MySQLClient extends AntaresCore {
    }
 
    async getVersion () {
-      const sql = 'SHOW VARIABLES LIKE "%vers%"';
+      const sql = 'SHOW VARIABLES LIKE \'%vers%\'';
       const { rows } = await this.raw(sql);
 
       return rows.reduce((acc, curr) => {
@@ -1588,7 +1588,8 @@ export class MySQLClient extends AntaresCore {
          let timeStop: Date;
          let keysArr: antares.QueryForeign[] = [];
 
-         const { rows, report, fields, keys, duration } = await new Promise((resolve, reject) => {
+         // eslint-disable-next-line @typescript-eslint/no-explicit-any
+         const { rows, report, fields, keys, duration }: any = await new Promise((resolve, reject) => {
             connection.query({ sql: query, nestTables }).then(async ([response, fields]) => {
                timeStop = new Date();
                const queryResult = response;

src/main/libs/clients/PostgreSQLClient.ts

@@ -1,6 +1,5 @@
 import * as antares from 'common/interfaces/antares';
 import * as mysql from 'mysql2';
-import { builtinsTypes } from 'pg-types';
 import * as pg from 'pg';
 import * as pgAst from 'pgsql-ast-parser';
 import { AntaresCore } from '../AntaresCore';
@@ -19,6 +18,68 @@ pg.types.setTypeParser(1114, pgToString); // timestamp
 pg.types.setTypeParser(1184, pgToString); // timestamptz
 pg.types.setTypeParser(1266, pgToString); // timetz
 
+// from pg-types
+type builtinsTypes =
+   'BOOL' |
+   'BYTEA' |
+   'CHAR' |
+   'INT8' |
+   'INT2' |
+   'INT4' |
+   'REGPROC' |
+   'TEXT' |
+   'OID' |
+   'TID' |
+   'XID' |
+   'CID' |
+   'JSON' |
+   'XML' |
+   'PG_NODE_TREE' |
+   'SMGR' |
+   'PATH' |
+   'POLYGON' |
+   'CIDR' |
+   'FLOAT4' |
+   'FLOAT8' |
+   'ABSTIME' |
+   'RELTIME' |
+   'TINTERVAL' |
+   'CIRCLE' |
+   'MACADDR8' |
+   'MONEY' |
+   'MACADDR' |
+   'INET' |
+   'ACLITEM' |
+   'BPCHAR' |
+   'VARCHAR' |
+   'DATE' |
+   'TIME' |
+   'TIMESTAMP' |
+   'TIMESTAMPTZ' |
+   'INTERVAL' |
+   'TIMETZ' |
+   'BIT' |
+   'VARBIT' |
+   'NUMERIC' |
+   'REFCURSOR' |
+   'REGPROCEDURE' |
+   'REGOPER' |
+   'REGOPERATOR' |
+   'REGCLASS' |
+   'REGTYPE' |
+   'UUID' |
+   'TXID_SNAPSHOT' |
+   'PG_LSN' |
+   'PG_NDISTINCT' |
+   'PG_DEPENDENCIES' |
+   'TSVECTOR' |
+   'TSQUERY' |
+   'GTSVECTOR' |
+   'REGCONFIG' |
+   'REGDICTIONARY' |
+   'JSONB' |
+   'REGNAMESPACE' |
+   'REGROLE';
 export class PostgreSQLClient extends AntaresCore {
    private _schema?: string;
    private _runningConnections: Map<string, number>;
@@ -1365,7 +1426,8 @@ export class PostgreSQLClient extends AntaresCore {
          let timeStop: Date;
          let keysArr: antares.QueryForeign[] = [];
 
-         const { rows, report, fields, keys, duration } = await new Promise((resolve, reject) => {
+         // eslint-disable-next-line @typescript-eslint/no-explicit-any
+         const { rows, report, fields, keys, duration }: any = await new Promise((resolve, reject) => {
             (async () => {
                try {
                   const res = await connection.query({ rowMode: args.nest ? 'array' : null, text: query });

src/main/libs/clients/SQLiteClient.ts

@@ -628,7 +628,8 @@ export class SQLiteClient extends AntaresCore {
          let timeStop;
          const keysArr: antares.QueryForeign[] = [];
 
-         const { rows, report, fields, keys, duration } = await new Promise((resolve, reject) => {
+         // eslint-disable-next-line @typescript-eslint/no-explicit-any
+         const { rows, report, fields, keys, duration }: any = await new Promise((resolve, reject) => {
             (async () => {
                let queryRunResult: sqlite.RunResult;
                // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/main/main.ts

@@ -1,16 +1,15 @@
-import { app, BrowserWindow, globalShortcut, nativeImage, Menu, ipcMain } from 'electron';
+import { app, BrowserWindow, nativeImage, ipcMain } from 'electron';
 import * as path from 'path';
 import * as Store from 'electron-store';
 import * as windowStateKeeper from 'electron-window-state';
 import * as remoteMain from '@electron/remote/main';
 
 import ipcHandlers from './ipc-handlers';
-import { shortcuts } from 'common/shortcuts';
+import { OsMenu, ShortcutRegister } from './libs/ShortcutRegister';
 
 Store.initRenderer();
-const persistentStore = new Store({ name: 'settings' });
-
-const appTheme = persistentStore.get('application_theme');
+const settingsStore = new Store({ name: 'settings' });
+const appTheme = settingsStore.get('application_theme');
 const isDevelopment = process.env.NODE_ENV !== 'production';
 const isMacOS = process.platform === 'darwin';
 const isLinux = process.platform === 'linux';
@@ -86,7 +85,7 @@ else {
    ipcHandlers();
 
    ipcMain.on('refresh-theme-settings', () => {
-      const appTheme = persistentStore.get('application_theme');
+      const appTheme = settingsStore.get('application_theme');
       if (isWindows && mainWindow) {
          mainWindow.setTitleBarOverlay({
             color: appTheme === 'dark' ? '#3f3f3f' : '#fff',
@@ -143,40 +142,11 @@ else {
          window.webContents.session.loadExtension(extensionPath, { allowFileAccess: true }).catch(console.error);
       }
    });
-
-   app.on('browser-window-focus', () => {
-      // Send registered shortcut events to window
-      for (const shortcut of shortcuts) {
-         if (shortcut.os.includes(process.platform)) {
-            for (const key of shortcut.keys) {
-               globalShortcut.register(key, () => {
-                  mainWindow.webContents.send(shortcut.event);
-                  if (isDevelopment) console.log('EVENT:', shortcut);
-               });
-            }
-         }
-      }
-
-      if (isDevelopment) { // Dev shortcuts
-         globalShortcut.register('Shift+CommandOrControl+F5', () => {
-            mainWindow.reload();
-         });
-         globalShortcut.register('Shift+CommandOrControl+F12', () => {
-            mainWindow.webContents.openDevTools();
-         });
-      }
-   });
-
-   app.on('browser-window-blur', () => {
-      globalShortcut.unregisterAll();
-   });
 }
 
 function createAppMenu () {
-   let menu: Electron.Menu = null;
-
-   if (isMacOS) {
-      menu = Menu.buildFromTemplate([
+   const menuTemplate: OsMenu = {
+      darwin: [
          {
             label: app.name,
             submenu: [
@@ -207,10 +177,11 @@ function createAppMenu () {
          {
             role: 'windowMenu'
          }
-      ]);
-   }
+      ]
+   };
 
-   Menu.setApplicationMenu(menu);
+   const shortCutRegister = ShortcutRegister.getInstance({ mainWindow, menuTemplate, mode: 'local' });
+   shortCutRegister.init();
 }
 
 function saveWindowState () {

src/renderer/App.vue

@@ -67,10 +67,6 @@ const { changeApplicationTheme } = settingsStore;
 
 const isAllConnectionsModal: Ref<boolean> = ref(false);
 
-ipcRenderer.on('open-connections-modal', () => {
-   isAllConnectionsModal.value = true;
-});
-
 document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
       changeApplicationTheme(applicationTheme.value);// Forces persistentStore to save on file and mail process
@@ -78,6 +74,22 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 onMounted(() => {
+   ipcRenderer.on('open-all-connections', () => {
+      isAllConnectionsModal.value = true;
+   });
+
+   ipcRenderer.on('open-scratchpad', () => {
+      isScratchpad.value = true;
+   });
+
+   ipcRenderer.on('open-settings', () => {
+      isSettingModal.value = true;
+   });
+
+   ipcRenderer.on('create-connection', () => {
+      workspacesStore.selectWorkspace('NEW');
+   });
+
    ipcRenderer.send('check-for-updates');
    checkVersionUpdate();
 

src/renderer/components/BaseConfirmModal.vue

@@ -31,13 +31,13 @@
                      class="btn btn-primary mr-2"
                      @click.stop="confirmModal"
                   >
-                     {{ confirmText || $t('word.confirm') }}
+                     {{ confirmText || t('word.confirm') }}
                   </button>
                   <button
                      class="btn btn-link"
                      @click="hideModal"
                   >
-                     {{ cancelText || $t('word.cancel') }}
+                     {{ cancelText || t('word.cancel') }}
                   </button>
                </div>
             </div>
@@ -49,6 +49,9 @@
 <script setup lang="ts">
 import { useFocusTrap } from '@/composables/useFocusTrap';
 import { computed, onBeforeUnmount, PropType, useSlots } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps({
    size: {
@@ -65,6 +68,10 @@ const props = defineProps({
    disableAutofocus: {
       type: Boolean,
       default: false
+   },
+   closeOnConfirm: {
+      type: Boolean,
+      default: true
    }
 });
 const emit = defineEmits(['confirm', 'hide']);
@@ -87,7 +94,7 @@ const modalSizeClass = computed(() => {
 
 const confirmModal = () => {
    emit('confirm');
-   hideModal();
+   if (props.closeOnConfirm) hideModal();
 };
 
 const hideModal = () => {

src/renderer/components/BaseSelect.vue

@@ -431,6 +431,12 @@ export default defineComponent({
     width: 100%;
   }
 
+  &__item-text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   &__list-wrapper {
     cursor: pointer;
     position: fixed;

src/renderer/components/BaseTextEditor.vue

@@ -51,14 +51,17 @@ watch(editorTheme, () => {
 
 watch(editorFontSize, () => {
    const sizes = {
-      small: 12,
-      medium: 14,
-      large: 16
+      xsmall: '10px',
+      small: '12px',
+      medium: '14px',
+      large: '16px',
+      xlarge: '18px',
+      xxlarge: '20px'
    };
 
    if (editor) {
       editor.setOptions({
-         fontSize: sizes[editorFontSize.value as undefined as 'small' | 'medium' | 'large']
+         fontSize: sizes[editorFontSize.value]
       });
    }
 });

src/renderer/components/BaseUploadInput.vue

@@ -4,7 +4,7 @@
          <i class="mdi mdi-folder-open mr-1" />{{ message }}
       </span>
       <span class="text-ellipsis file-uploader-value">
-         {{ lastPart(modelValue) }}
+         {{ lastPart(modelValue, 19) }}
       </span>
       <i
          v-if="modelValue"
@@ -24,6 +24,9 @@
 
 <script setup lang="ts">
 import { uidGen } from 'common/libs/uidGen';
+import { useFilters } from '@/composables/useFilters';
+
+const { lastPart } = useFilters();
 
 defineProps({
    message: {
@@ -43,15 +46,6 @@ const id = uidGen();
 const clear = () => {
    emit('clear');
 };
-
-const lastPart = (string: string) => {
-   if (!string) return '';
-
-   string = string.split(/[/\\]+/).pop();
-   if (string.length >= 19)
-      string = `...${string.slice(-19)}`;
-   return string;
-};
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/FakerSelect.vue

@@ -4,7 +4,7 @@
          v-model="selectedGroup"
          class="form-select"
          :options="[{name: 'manual'}, ...fakerGroups]"
-         :option-label="(opt: any) => opt.name === 'manual' ? $t('message.manualValue') : $t(`faker.${opt.name}`)"
+         :option-label="(opt: any) => opt.name === 'manual' ? t('message.manualValue') : t(`faker.${opt.name}`)"
          option-track-by="name"
          :disabled="!isChecked"
          style="flex-grow: 0;"
@@ -15,7 +15,7 @@
          v-if="selectedGroup !== 'manual'"
          v-model="selectedMethod"
          :options="fakerMethods"
-         :option-label="(opt: any) => $t(`faker.${opt.name}`)"
+         :option-label="(opt: any) => t(`faker.${opt.name}`)"
          option-track-by="name"
          class="form-select"
          :disabled="!isChecked"
@@ -41,7 +41,7 @@
       <BaseUploadInput
          v-else-if="inputProps().type === 'file'"
          :model-value="selectedValue"
-         :message="$t('word.browse')"
+         :message="t('word.browse')"
          @clear="clearValue"
          @change="filesChange($event)"
       />
@@ -87,11 +87,14 @@
 
 <script setup lang="ts">
 import { computed, PropType, Ref, ref, watch } from 'vue';
-import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
+import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, BLOB, BIT, UUID } from 'common/fieldTypes';
 import BaseUploadInput from '@/components/BaseUploadInput.vue';
 import ForeignKeySelect from '@/components/ForeignKeySelect.vue';
 import FakerMethods from 'common/FakerMethods';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps({
    type: String,
@@ -123,6 +126,8 @@ const fakerGroups = computed(() => {
       localType.value = 'datetime';
    else if (TIME.includes(props.type))
       localType.value = 'time';
+   else if (UUID.includes(props.type))
+      localType.value = 'uuid';
    else
       localType.value = 'none';
 

src/renderer/components/ForeignKeySelect.vue

@@ -21,6 +21,7 @@ import { useWorkspacesStore } from '@/stores/workspaces';
 import { TEXT, LONG_TEXT } from 'common/fieldTypes';
 import BaseSelect from '@/components/BaseSelect.vue';
 import { TableField } from 'common/interfaces/antares';
+import { useFilters } from '@/composables/useFilters';
 
 const props = defineProps({
    modelValue: [String, Number],
@@ -35,6 +36,7 @@ const emit = defineEmits(['update:modelValue', 'blur']);
 
 const { addNotification } = useNotificationsStore();
 const workspacesStore = useWorkspacesStore();
+const { cutText } = useFilters();
 
 const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
 
@@ -53,7 +55,7 @@ const foreigns = computed(() => {
    if (!isValidDefault.value)
       list.push({ value: props.modelValue, label: props.modelValue === null ? 'NULL' : props.modelValue });
    for (const row of foreignList.value)
-      list.push({ value: row.foreign_column, label: `${row.foreign_column} ${cutText('foreign_description' in row ? ` - ${row.foreign_description}` : '')}` });
+      list.push({ value: row.foreign_column, label: `${row.foreign_column} ${cutText('foreign_description' in row ? ` - ${row.foreign_description}` : '', 15)}` });
    return list;
 });
 
@@ -61,11 +63,6 @@ const onChange = (opt: HTMLSelectElement) => {
    emit('update:modelValue', opt.value);
 };
 
-const cutText = (val: string) => {
-   if (typeof val !== 'string') return val;
-   return val.length > 15 ? `${val.substring(0, 15)}...` : val;
-};
-
 watch(() => props.modelValue, () => {
    currentValue.value = props.modelValue;
 });

src/renderer/components/KeyPressDetector.vue

@@ -0,0 +1,122 @@
+<template>
+   <div class="form-group has-icon-right m-0">
+      <input
+         class="form-input"
+         type="text"
+         :value="pressedKeys"
+         :placeholder="t('message.registerAShortcut')"
+         @focus="isFocus = true"
+         @blur="isFocus = false"
+         @keydown.prevent.stop="onKey"
+      >
+      <i class="form-icon mdi mdi-keyboard-outline mdi-24px" />
+   </div>
+</template>
+<script setup lang="ts">
+import { computed, PropType, Ref, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Application from '@/ipc-api/Application';
+
+const { t } = useI18n();
+
+const emit = defineEmits(['update:modelValue']);
+
+const isMacOS = process.platform === 'darwin';
+
+const props = defineProps({
+   modelValue: String as PropType<string | Electron.Accelerator>
+});
+
+const isFocus = ref(false);
+const keyboardEvent: Ref<KeyboardEvent> = ref(null);
+
+const pressedKeys = computed(() => {
+   const keys: string[] = [];
+   const singleKeysToIgnore = ['Dead', 'Backspace', 'ArrotLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+   const specialKeys = ['Control', 'Alt', 'AltGraph', 'Shift', 'Meta', 'CapsLock', 'ContextMenu', 'Escape'];
+   const keysFromCode = ['Space', 'Minus', 'Equal', 'Slash', 'Quote', 'Semicolon', 'Comma', 'Period', 'Backslash', 'BracketLeft', 'BracketRight'];
+
+   if (props.modelValue && !keyboardEvent.value)
+      return props.modelValue;
+   else if (keyboardEvent.value) {
+      if (keyboardEvent.value.altKey)
+         keys.push('Alt');
+      if (keyboardEvent.value.ctrlKey)
+         keys.push('Control');
+      if (keyboardEvent.value.metaKey && isMacOS)
+         keys.push('Command');
+      if (keyboardEvent.value.shiftKey && keys.length)
+         keys.push('Shift');
+      if (keyboardEvent.value.code) {
+         if (keys.length === 0 && (keyboardEvent.value.key.length === 1 || singleKeysToIgnore.includes(keyboardEvent.value.key)))
+            return t('message.invalidShortcutMessage');
+         else if (!specialKeys.includes(keyboardEvent.value.key)) {
+            if (keyboardEvent.value.key === 'Dead') {
+               keys.push(keyboardEvent.value.code
+                  .replace('Digit', '')
+                  .replace('Key', '')
+                  .replace('Quote', '\'')
+                  .replace('Backquote', '`'));
+            }
+            else if (keysFromCode.includes(keyboardEvent.value.code) || keyboardEvent.value.code.includes('Digit')) {
+               keys.push(keyboardEvent.value.code
+                  .replace('Quote', '\'')
+                  .replace('Semicolon', ';')
+                  .replace('Slash', '/')
+                  .replace('Backslash', '\\')
+                  .replace('BracketLeft', '[')
+                  .replace('BracketRight', ']')
+                  .replace('Comma', ',')
+                  .replace('Period', '.')
+                  .replace('Minus', '-')
+                  .replace('Equal', '=')
+                  .replace('Digit', '')
+                  .replace('Key', ''));
+            }
+            else {
+               keys.push(keyboardEvent.value.key.length === 1
+                  ? keyboardEvent.value.key.toUpperCase()
+                  : keyboardEvent.value.key
+                     .replace('Arrow', '')
+               );
+            }
+         }
+         else
+            return t('message.invalidShortcutMessage');
+      }
+   }
+
+   return keys.join('+');
+});
+
+const onKey = (e: KeyboardEvent) => {
+   e.stopPropagation();
+   e.preventDefault();
+   keyboardEvent.value = e;
+};
+
+watch(pressedKeys, (value) => {
+   if (value !== t('message.invalidShortcutMessage'))
+      emit('update:modelValue', pressedKeys.value);
+});
+
+watch(isFocus, (val) => {
+   if (val)
+      Application.unregisterShortcuts();
+   else
+      Application.reloadShortcuts();
+});
+</script>
+<style lang="scss" scoped>
+.has-icon-right {
+   .form-input {
+      padding-right: 1.8rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      caret-color: transparent;
+   }
+   .form-icon {
+      right: 0.4rem;
+   }
+}
+</style>

src/renderer/components/ModalAllConnections.vue

@@ -7,7 +7,7 @@
                <div class="modal-title h6">
                   <div class="d-flex">
                      <i class="mdi mdi-24px mdi-apps mr-1" />
-                     <span class="cut-text">{{ $t('message.allConnections') }}</span>
+                     <span class="cut-text">{{ t('message.allConnections') }}</span>
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -126,7 +126,7 @@
                         key="trick"
                         readonly
                         class="p-absolute"
-                        style="width: 1px; height: 1px; opacity: 0"
+                        style="width: 1px; height: 1px; opacity: 0;"
                         type="text"
                      >
                      <!-- workaround for useFocusTrap $lastFocusable -->
@@ -270,89 +270,87 @@ onBeforeUnmount(() => {
 
 <style lang="scss" scoped>
 .vscroll {
-   height: 1000px;
-   overflow: auto;
-   overflow-anchor: none;
+  height: 1000px;
+  overflow: auto;
+  overflow-anchor: none;
 }
 
 .column-resizable {
-
-   &:hover,
-   &:active {
-      resize: horizontal;
-      overflow: hidden;
-   }
+  &:hover,
+  &:active {
+    resize: horizontal;
+    overflow: hidden;
+  }
 }
 
 .table-column-title {
-   display: flex;
-   align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .sort-icon {
-   font-size: 0.7rem;
-   line-height: 1;
-   margin-left: 0.2rem;
+  font-size: 0.7rem;
+  line-height: 1;
+  margin-left: 0.2rem;
 }
 
 .modal {
-   align-items: flex-start;
+  align-items: flex-start;
 
-   .modal-container {
-      max-width: 75vw;
-      margin-top: 10vh;
+  .modal-container {
+    max-width: 75vw;
+    margin-top: 10vh;
 
-      .modal-body {
-         height: 80vh;
-      }
-   }
+    .modal-body {
+      height: 80vh;
+    }
+  }
 }
 
 .connections-search {
-   display: flex;
-   justify-content: space-around;
+  display: flex;
+  justify-content: space-around;
 }
 
 .connection-block {
-   cursor: pointer;
-   transition: all .2s;
-   border-radius: $border-radius;
-   outline: none;
+  cursor: pointer;
+  transition: all 0.2s;
+  border-radius: $border-radius;
+  outline: none;
 
-   &:focus {
-      box-shadow: 0 0 3px .1rem rgba($primary-color, 80%);
-   }
-
-   &:hover {
-      .all-connections-buttons {
-
-         .all-connections-delete,
-         .all-connections-pinned,
-         .all-connections-pin {
-            opacity: .5;
-         }
-      }
-   }
-
-   .all-connections-buttons {
-      .all-connections-pinned {
-         opacity: .3;
-         transition: opacity .2s;
-
-         &:hover {
-            opacity: 1;
-         }
-      }
+  &:focus {
+    box-shadow: 0 0 3px 0.1rem rgba($primary-color, 80%);
+  }
 
+  &:hover {
+    .all-connections-buttons {
       .all-connections-delete,
+      .all-connections-pinned,
       .all-connections-pin {
-         opacity: 0;
-         transition: opacity .2s;
-
-         &:hover {
-            opacity: 1;
-         }
+        opacity: 0.5;
       }
-   }
+    }
+  }
+
+  .all-connections-buttons {
+    .all-connections-pinned {
+      opacity: 0.3;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    .all-connections-delete,
+    .all-connections-pin {
+      opacity: 0;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
 }
 </style>

src/renderer/components/ModalAskCredentials.vue

@@ -6,7 +6,7 @@
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
-                     <i class="mdi mdi-24px mdi-key-variant mr-1" /> {{ $t('word.credentials') }}
+                     <i class="mdi mdi-24px mdi-key-variant mr-1" /> {{ t('word.credentials') }}
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -16,7 +16,7 @@
                   <form class="form-horizontal">
                      <div class="form-group">
                         <div class="col-3">
-                           <label class="form-label">{{ $t('word.user') }}</label>
+                           <label class="form-label">{{ t('word.user') }}</label>
                         </div>
                         <div class="col-9">
                            <input
@@ -29,7 +29,7 @@
                      </div>
                      <div class="form-group">
                         <div class="col-3">
-                           <label class="form-label">{{ $t('word.password') }}</label>
+                           <label class="form-label">{{ t('word.password') }}</label>
                         </div>
                         <div class="col-9">
                            <input
@@ -44,10 +44,10 @@
             </div>
             <div class="modal-footer">
                <button class="btn btn-primary mr-2" @click.stop="sendCredentials">
-                  {{ $t('word.send') }}
+                  {{ t('word.send') }}
                </button>
                <button class="btn btn-link" @click.stop="closeModal">
-                  {{ $t('word.close') }}
+                  {{ t('word.close') }}
                </button>
             </div>
          </div>
@@ -58,6 +58,9 @@
 <script setup lang="ts">
 import { Ref, ref } from 'vue';
 import { useFocusTrap } from '@/composables/useFocusTrap';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const { trapRef } = useFocusTrap();
 

src/renderer/components/ModalAskParameters.vue

@@ -1,7 +1,7 @@
 <template>
    <ConfirmModal
-      :confirm-text="$t('word.run')"
-      :cancel-text="$t('word.cancel')"
+      :confirm-text="t('word.run')"
+      :cancel-text="t('word.cancel')"
       size="400"
       @confirm="runRoutine"
       @hide="closeModal"
@@ -9,7 +9,7 @@
       <template #header>
          <div class="d-flex">
             <i class="mdi mdi-24px mdi-play mr-1" />
-            <span class="cut-text">{{ $t('word.parameters') }}: {{ localRoutine.name }}</span>
+            <span class="cut-text">{{ t('word.parameters') }}: {{ localRoutine.name }}</span>
          </div>
       </template>
       <template #body>
@@ -52,6 +52,12 @@ import { computed, PropType, Ref, ref } from 'vue';
 import { NUMBER, FLOAT } from 'common/fieldTypes';
 import { FunctionInfos, RoutineInfos } from 'common/interfaces/antares';
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import { useFilters } from '@/composables/useFilters';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const { wrapNumber } = useFilters();
 
 const props = defineProps({
    localRoutine: Object as PropType<RoutineInfos | FunctionInfos>,
@@ -106,11 +112,6 @@ const onKey = (e: KeyboardEvent) => {
       closeModal();
 };
 
-const wrapNumber = (num: number) => {
-   if (!num) return '';
-   return `(${num})`;
-};
-
 window.addEventListener('keydown', onKey);
 
 setTimeout(() => {

src/renderer/components/ModalDiscardChanges.vue

@@ -1,18 +1,18 @@
 <template>
    <ConfirmModal
-      :confirm-text="$t('word.discard')"
-      :cancel-text="$t('word.stay')"
+      :confirm-text="t('word.discard')"
+      :cancel-text="t('word.stay')"
       @confirm="emit('confirm')"
       @hide="emit('close')"
    >
       <template #header>
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-content-save-alert mr-1" /> {{ $t('message.unsavedChanges') }}
+            <i class="mdi mdi-24px mdi-content-save-alert mr-1" /> {{ t('message.unsavedChanges') }}
          </div>
       </template>
       <template #body>
          <div>
-            {{ $t('message.discardUnsavedChanges') }}
+            {{ t('message.discardUnsavedChanges') }}
          </div>
       </template>
    </ConfirmModal>
@@ -21,6 +21,9 @@
 <script setup lang="ts">
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
 import { onBeforeUnmount } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const emit = defineEmits(['confirm', 'close']);
 

src/renderer/components/ModalEditSchema.vue

@@ -7,7 +7,7 @@
                <div class="modal-title h6">
                   <div class="d-flex">
                      <i class="mdi mdi-24px mdi-database-edit mr-1" />
-                     <span class="cut-text">{{ $t('message.editSchema') }}</span>
+                     <span class="cut-text">{{ t('message.editSchema') }}</span>
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -17,7 +17,7 @@
                   <form class="form-horizontal">
                      <div class="form-group">
                         <div class="col-3">
-                           <label class="form-label">{{ $t('word.name') }}</label>
+                           <label class="form-label">{{ t('word.name') }}</label>
                         </div>
                         <div class="col-9">
                            <input
@@ -26,14 +26,14 @@
                               class="form-input"
                               type="text"
                               required
-                              :placeholder="$t('message.schemaName')"
+                              :placeholder="t('message.schemaName')"
                               readonly
                            >
                         </div>
                      </div>
                      <div class="form-group">
                         <div class="col-3">
-                           <label class="form-label">{{ $t('word.collation') }}</label>
+                           <label class="form-label">{{ t('word.collation') }}</label>
                         </div>
                         <div class="col-9">
                            <BaseSelect
@@ -43,7 +43,7 @@
                               option-label="collation"
                               option-track-by="collation"
                            />
-                           <small>{{ $t('message.serverDefault') }}: {{ defaultCollation }}</small>
+                           <small>{{ t('message.serverDefault') }}: {{ defaultCollation }}</small>
                         </div>
                      </div>
                   </form>
@@ -51,10 +51,10 @@
             </div>
             <div class="modal-footer">
                <button class="btn btn-primary mr-2" @click.stop="updateSchema">
-                  {{ $t('word.update') }}
+                  {{ t('word.update') }}
                </button>
                <button class="btn btn-link" @click.stop="closeModal">
-                  {{ $t('word.close') }}
+                  {{ t('word.close') }}
                </button>
             </div>
          </div>
@@ -70,6 +70,9 @@ import { useWorkspacesStore } from '@/stores/workspaces';
 import { useFocusTrap } from '@/composables/useFocusTrap';
 import Schema from '@/ipc-api/Schema';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps({
    selectedSchema: String

src/renderer/components/ModalExportSchema.vue

@@ -7,7 +7,7 @@
                <div class="modal-title h6">
                   <div class="d-flex">
                      <i class="mdi mdi-24px mdi-database-arrow-down mr-1" />
-                     <span class="cut-text">{{ $t('message.exportSchema') }}</span>
+                     <span class="cut-text">{{ t('message.exportSchema') }}</span>
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -16,7 +16,7 @@
                <div class="container">
                   <div class="columns">
                      <div class="col-3">
-                        <label class="form-label">{{ $t('message.directoryPath') }}</label>
+                        <label class="form-label">{{ t('message.directoryPath') }}</label>
                      </div>
                      <div class="col-9">
                         <fieldset class="input-group">
@@ -26,14 +26,14 @@
                               type="text"
                               required
                               readonly
-                              :placeholder="$t('message.schemaName')"
+                              :placeholder="t('message.schemaName')"
                            >
                            <button
                               type="button"
                               class="btn btn-primary input-group-btn"
                               @click.prevent="openPathDialog"
                            >
-                              {{ $t('word.change') }}
+                              {{ t('word.change') }}
                            </button>
                         </fieldset>
                      </div>
@@ -51,14 +51,14 @@
                         <div class="column col-auto col-ml-auto ">
                            <button
                               class="btn btn-dark btn-sm"
-                              :title="$t('word.refresh')"
+                              :title="t('word.refresh')"
                               @click="refresh"
                            >
                               <i class="mdi mdi-database-refresh" />
                            </button>
                            <button
                               class="btn btn-dark btn-sm mx-1"
-                              :title="$t('message.uncheckAllTables')"
+                              :title="t('message.uncheckAllTables')"
                               :disabled="isRefreshing"
                               @click="uncheckAllTables"
                            >
@@ -66,7 +66,7 @@
                            </button>
                            <button
                               class="btn btn-dark btn-sm"
-                              :title="$t('message.checkAllTables')"
+                              :title="t('message.checkAllTables')"
                               :disabled="isRefreshing"
                               @click="checkAllTables"
                            >
@@ -122,22 +122,22 @@
                               <div class="tr">
                                  <div class="th" style="width: 50%;">
                                     <div class="table-column-title">
-                                       <span>{{ $t('word.table') }}</span>
+                                       <span>{{ t('word.table') }}</span>
                                     </div>
                                  </div>
                                  <div class="th text-center">
                                     <div class="table-column-title">
-                                       <span>{{ $t('word.structure') }}</span>
+                                       <span>{{ t('word.structure') }}</span>
                                     </div>
                                  </div>
                                  <div class="th text-center">
                                     <div class="table-column-title">
-                                       <span>{{ $t('word.content') }}</span>
+                                       <span>{{ t('word.content') }}</span>
                                     </div>
                                  </div>
                                  <div class="th text-center">
                                     <div class="table-column-title">
-                                       <span>{{ $t('word.drop') }}</span>
+                                       <span>{{ t('word.drop') }}</span>
                                     </div>
                                  </div>
                               </div>
@@ -183,19 +183,19 @@
                   </div>
                   <div class="column col-4">
                      <h5 class="h5">
-                        {{ $t('word.options') }}
+                        {{ t('word.options') }}
                      </h5>
-                     <span class="h6">{{ $t('word.includes') }}:</span>
+                     <span class="h6">{{ t('word.includes') }}:</span>
                      <label
                         v-for="(_, key) in options.includes"
                         :key="key"
                         class="form-checkbox"
                      >
-                        <input v-model="options.includes[key]" type="checkbox"><i class="form-icon" /> {{ $tc(`word.${key}`, 2) }}
+                        <input v-model="options.includes[key]" type="checkbox"><i class="form-icon" /> {{ t(`word.${key}`, 2) }}
                      </label>
                      <div v-if="clientCustoms.exportByChunks">
                         <div class="h6 mt-4 mb-2">
-                           {{ $t('message.newInserStmtEvery') }}:
+                           {{ t('message.newInserStmtEvery') }}:
                         </div>
                         <div class="columns">
                            <div class="column col-6">
@@ -209,21 +209,21 @@
                               <BaseSelect
                                  v-model="options.sqlInsertDivider"
                                  class="form-select"
-                                 :options="[{value: 'bytes', label: 'KiB'}, {value: 'rows', label: $tc('word.row', 2)}]"
+                                 :options="[{value: 'bytes', label: 'KiB'}, {value: 'rows', label: t('word.row', 2)}]"
                               />
                            </div>
                         </div>
                      </div>
 
                      <div class="h6 mb-2 mt-4">
-                        {{ $t('message.ourputFormat') }}:
+                        {{ t('message.ourputFormat') }}:
                      </div>
                      <div class="columns">
                         <div class="column h5 mb-4">
                            <BaseSelect
                               v-model="options.outputFormat"
                               class="form-select"
-                              :options="[{value: 'sql', label: $t('message.singleFile', {ext: '.sql'})}, {value: 'sql.zip', label: $t('message.zipCompressedFile', {ext: '.sql'})}]"
+                              :options="[{value: 'sql', label: t('message.singleFile', {ext: '.sql'})}, {value: 'sql.zip', label: t('message.zipCompressedFile', {ext: '.sql'})}]"
                            />
                         </div>
                      </div>
@@ -245,7 +245,7 @@
                </div>
                <div class="column col-auto px-0">
                   <button class="btn btn-link" @click.stop="closeModal">
-                     {{ $t('word.close') }}
+                     {{ t('word.close') }}
                   </button>
                   <button
                      class="btn btn-primary mr-2"
@@ -254,7 +254,7 @@
                      autofocus
                      @click.prevent="startExport"
                   >
-                     {{ $t('word.export') }}
+                     {{ t('word.export') }}
                   </button>
                </div>
             </div>

src/renderer/components/ModalFakerRows.vue

@@ -7,7 +7,7 @@
                <div class="modal-title h6">
                   <div class="d-flex">
                      <i class="mdi mdi-24px mdi-playlist-plus mr-1" />
-                     <span class="cut-text">{{ $tc('message.insertRow', 2) }}</span>
+                     <span class="cut-text">{{ t('message.insertRow', 2) }}</span>
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -39,7 +39,7 @@
                                  <span class="input-group-addon field-type" :class="typeClass(field.type)">
                                     {{ field.type }} {{ wrapNumber(fieldLength(field)) }}
                                  </span>
-                                 <label class="form-checkbox ml-3" :title="$t('word.insert')">
+                                 <label class="form-checkbox ml-3" :title="t('word.insert')">
                                     <input
                                        type="checkbox"
                                        :checked="!fieldsToExclude.includes(field.name)"
@@ -55,7 +55,7 @@
             </div>
             <div class="modal-footer columns">
                <div class="column d-flex" :class="hasFakes ? 'col-4' : 'col-2'">
-                  <div class="input-group tooltip tooltip-right" :data-tooltip="$t('message.numberOfInserts')">
+                  <div class="input-group tooltip tooltip-right" :data-tooltip="t('message.numberOfInserts')">
                      <input
                         v-model="nInserts"
                         type="number"
@@ -70,7 +70,7 @@
                   <div
                      v-if="hasFakes"
                      class="tooltip tooltip-right ml-2"
-                     :data-tooltip="$t('message.fakeDataLanguage')"
+                     :data-tooltip="t('message.fakeDataLanguage')"
                   >
                      <BaseSelect
                         v-model="fakerLocale"
@@ -85,10 +85,10 @@
                      :class="{'loading': isInserting}"
                      @click.stop="insertRows"
                   >
-                     {{ $t('word.insert') }}
+                     {{ t('word.insert') }}
                   </button>
                   <button class="btn btn-link" @click.stop="closeModal">
-                     {{ $t('word.close') }}
+                     {{ t('word.close') }}
                   </button>
                </div>
             </div>
@@ -109,6 +109,12 @@ import { useFocusTrap } from '@/composables/useFocusTrap';
 import Tables from '@/ipc-api/Tables';
 import FakerSelect from '@/components/FakerSelect.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { useFilters } from '@/composables/useFilters';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const { wrapNumber } = useFilters();
 
 const props = defineProps({
    tabUid: [String, Number],
@@ -267,11 +273,6 @@ const onKey = (e: KeyboardEvent) => {
       closeModal();
 };
 
-const wrapNumber = (num: number) => {
-   if (!num) return '';
-   return `(${num})`;
-};
-
 window.addEventListener('keydown', onKey);
 
 onMounted(() => {

src/renderer/components/ModalHistory.vue

@@ -100,14 +100,15 @@
 <script setup lang="ts">
 import { Component, computed, ComputedRef, onBeforeUnmount, onMounted, onUpdated, Prop, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import * as moment from 'moment';
 import { ConnectionParams } from 'common/interfaces/antares';
 import { HistoryRecord, useHistoryStore } from '@/stores/history';
 import { useConnectionsStore } from '@/stores/connections';
 import { useFocusTrap } from '@/composables/useFocusTrap';
+import { useFilters } from '@/composables/useFilters';
 import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
 
 const { t } = useI18n();
+const { formatDate } = useFilters();
 
 const { getHistoryByWorkspace, deleteQueryFromHistory } = useHistoryStore();
 const { getConnectionName } = useConnectionsStore();
@@ -164,7 +165,6 @@ const resizeResults = () => {
    }
 };
 
-const formatDate = (date: Date) => moment(date).isValid() ? moment(date).format('HH:mm:ss - YYYY/MM/DD') : date;
 const refreshScroller = () => resizeResults();
 const closeModal = () => emit('close');
 

src/renderer/components/ModalImportSchema.vue

@@ -7,7 +7,7 @@
                <div class="modal-title h6">
                   <div class="d-flex">
                      <i class="mdi mdi-24px mdi-database-arrow-up mr-1" />
-                     <span class="cut-text">{{ $t('message.importSchema') }}</span>
+                     <span class="cut-text">{{ t('message.importSchema') }}</span>
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -15,7 +15,7 @@
             <div class="modal-body pb-0">
                {{ sqlFile }}
                <div v-if="queryErrors.length > 0" class="mt-2">
-                  <label>{{ $tc('message.importQueryErrors', queryErrors.length) }}</label>
+                  <label>{{ t('message.importQueryErrors', queryErrors.length) }}</label>
                   <textarea
                      v-model="formattedQueryErrors"
                      class="form-input"
@@ -28,7 +28,7 @@
                <div class="column col modal-progress-wrapper text-left">
                   <div class="import-progress">
                      <span class="progress-status">
-                        {{ progressPercentage }}% - {{ progressStatus }} - {{ $tc('message.executedQueries', queryCount) }}
+                        {{ progressPercentage }}% - {{ progressStatus }} - {{ t('message.executedQueries', queryCount) }}
                      </span>
                      <progress
                         class="progress d-block"
@@ -39,7 +39,7 @@
                </div>
                <div class="column col-auto px-0">
                   <button class="btn btn-link" @click.stop="closeModal">
-                     {{ completed ? $t('word.close') : $t('word.cancel') }}
+                     {{ completed ? t('word.close') : t('word.cancel') }}
                   </button>
                </div>
             </div>
@@ -57,8 +57,8 @@ import { storeToRefs } from 'pinia';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
 import Schema from '@/ipc-api/Schema';
-import { useI18n } from 'vue-i18n';
 import { ImportState } from 'common/interfaces/importer';
+import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 

src/renderer/components/ModalNewSchema.vue

@@ -7,7 +7,7 @@
                <div class="modal-title h6">
                   <div class="d-flex">
                      <i class="mdi mdi-24px mdi-database-plus mr-1" />
-                     <span class="cut-text">{{ $t('message.createNewSchema') }}</span>
+                     <span class="cut-text">{{ t('message.createNewSchema') }}</span>
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -17,7 +17,7 @@
                   <form class="form-horizontal" @submit.prevent="createSchema">
                      <div class="form-group">
                         <div class="col-3">
-                           <label class="form-label">{{ $t('word.name') }}</label>
+                           <label class="form-label">{{ t('word.name') }}</label>
                         </div>
                         <div class="col-9">
                            <input
@@ -26,13 +26,13 @@
                               class="form-input"
                               type="text"
                               required
-                              :placeholder="$t('message.schemaName')"
+                              :placeholder="t('message.schemaName')"
                            >
                         </div>
                      </div>
                      <div v-if="customizations.collations" class="form-group">
                         <div class="col-3">
-                           <label class="form-label">{{ $t('word.collation') }}</label>
+                           <label class="form-label">{{ t('word.collation') }}</label>
                         </div>
                         <div class="col-9">
                            <BaseSelect
@@ -42,7 +42,7 @@
                               option-label="collation"
                               option-track-by="collation"
                            />
-                           <small>{{ $t('message.serverDefault') }}: {{ defaultCollation }}</small>
+                           <small>{{ t('message.serverDefault') }}: {{ defaultCollation }}</small>
                         </div>
                      </div>
                   </form>
@@ -54,10 +54,10 @@
                   :class="{'loading': isLoading}"
                   @click.stop="createSchema"
                >
-                  {{ $t('word.add') }}
+                  {{ t('word.add') }}
                </button>
                <button class="btn btn-link" @click.stop="closeModal">
-                  {{ $t('word.close') }}
+                  {{ t('word.close') }}
                </button>
             </div>
          </div>
@@ -73,6 +73,9 @@ import { useWorkspacesStore } from '@/stores/workspaces';
 import { useFocusTrap } from '@/composables/useFocusTrap';
 import Schema from '@/ipc-api/Schema';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const { addNotification } = useNotificationsStore();
 const workspacesStore = useWorkspacesStore();

src/renderer/components/ModalProcessesList.vue

@@ -17,7 +17,7 @@
                <div class="modal-title h6">
                   <div class="d-flex">
                      <i class="mdi mdi-24px mdi-memory mr-1" />
-                     <span class="cut-text">{{ $t('message.processesList') }}: {{ connectionName }}</span>
+                     <span class="cut-text">{{ t('message.processesList') }}: {{ connectionName }}</span>
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -29,7 +29,7 @@
                         <button
                            class="btn btn-dark btn-sm mr-0 pr-1 d-flex"
                            :class="{'loading':isQuering}"
-                           :title="`${$t('word.refresh')} (F5)`"
+                           :title="`${t('word.refresh')}`"
                            @click="getProcessesList"
                         >
                            <i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh mr-1" />
@@ -39,7 +39,7 @@
                            <i class="mdi mdi-24px mdi-menu-down" />
                         </div>
                         <div class="menu px-3">
-                           <span>{{ $t('word.autoRefresh') }}: <b>{{ +autorefreshTimer ? `${autorefreshTimer}s` : 'OFF' }}</b></span>
+                           <span>{{ t('word.autoRefresh') }}: <b>{{ +autorefreshTimer ? `${autorefreshTimer}s` : 'OFF' }}</b></span>
                            <input
                               v-model="autorefreshTimer"
                               class="slider no-border"
@@ -59,7 +59,7 @@
                         tabindex="0"
                      >
                         <i class="mdi mdi-24px mdi-file-export mr-1" />
-                        <span>{{ $t('word.export') }}</span>
+                        <span>{{ t('word.export') }}</span>
                         <i class="mdi mdi-24px mdi-menu-down" />
                      </button>
                      <ul class="menu text-left">
@@ -74,7 +74,7 @@
                </div>
                <div class="workspace-query-info">
                   <div v-if="sortedResults.length">
-                     {{ $t('word.processes') }}: <b>{{ sortedResults.length.toLocaleString() }}</b>
+                     {{ t('word.processes') }}: <b>{{ sortedResults.length.toLocaleString() }}</b>
                   </div>
                </div>
             </div>
@@ -135,6 +135,7 @@
 
 <script setup lang="ts">
 import { Component, computed, onBeforeUnmount, onMounted, onUpdated, Prop, Ref, ref } from 'vue';
+import { ipcRenderer } from 'electron';
 import { ConnectionParams } from 'common/interfaces/antares';
 import { exportRows } from '../libs/exportRows';
 import { useNotificationsStore } from '@/stores/notifications';
@@ -144,6 +145,9 @@ import { useConnectionsStore } from '@/stores/connections';
 import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
 import ModalProcessesListRow from '@/components/ModalProcessesListRow.vue';
 import ModalProcessesListContext from '@/components/ModalProcessesListContext.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const { addNotification } = useNotificationsStore();
 const { getConnectionName } = useConnectionsStore();
@@ -323,10 +327,10 @@ const onKey = (e:KeyboardEvent) => {
    e.stopPropagation();
    if (e.key === 'Escape')
       closeModal();
-   if (e.key === 'F5')
-      getProcessesList();
 };
 
+ipcRenderer.on('run-or-reload', getProcessesList);
+
 window.addEventListener('keydown', onKey, { capture: true });
 
 onMounted(() => {
@@ -345,6 +349,8 @@ onBeforeUnmount(() => {
    window.removeEventListener('keydown', onKey, { capture: true });
    window.removeEventListener('resize', resizeResults);
    clearInterval(refreshInterval.value);
+
+   ipcRenderer.removeListener('run-or-reload', getProcessesList);
 });
 
 defineExpose({ refreshScroller });

src/renderer/components/ModalProcessesListContext.vue

@@ -4,7 +4,7 @@
       @close-context="closeContext"
    >
       <div v-if="props.selectedRow" class="context-element">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-content-copy text-light pr-1" /> {{ $t('word.copy') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-content-copy text-light pr-1" /> {{ t('word.copy') }}</span>
          <i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
          <div class="context-submenu">
             <div
@@ -13,7 +13,7 @@
                @click="copyCell"
             >
                <span class="d-flex">
-                  <i class="mdi mdi-18px mdi-numeric-0 mdi-rotate-90 text-light pr-1" /> {{ $tc('word.cell', 1) }}
+                  <i class="mdi mdi-18px mdi-numeric-0 mdi-rotate-90 text-light pr-1" /> {{ t('word.cell', 1) }}
                </span>
             </div>
             <div
@@ -22,7 +22,7 @@
                @click="copyRow"
             >
                <span class="d-flex">
-                  <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ $tc('word.row', 1) }}
+                  <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('word.row', 1) }}
                </span>
             </div>
          </div>
@@ -33,7 +33,7 @@
          @click="killProcess"
       >
          <span class="d-flex">
-            <i class="mdi mdi-18px mdi-close-circle-outline text-light pr-1" /> {{ $t('message.killProcess') }}
+            <i class="mdi mdi-18px mdi-close-circle-outline text-light pr-1" /> {{ t('message.killProcess') }}
          </span>
       </div>
    </BaseContextMenu>
@@ -41,6 +41,9 @@
 
 <script setup lang="ts">
 import BaseContextMenu from '@/components/BaseContextMenu.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps({
    contextEvent: MouseEvent,

src/renderer/components/ModalProcessesListRow.vue

@@ -12,19 +12,19 @@
             class="cell-content"
             :class="`${isNull(col)} type-${typeof col === 'number' ? 'int' : 'varchar'}`"
             @dblclick="dblClick(cKey)"
-         >{{ cutText(col) }}</span>
+         >{{ cutText(col, 250) }}</span>
       </div>
       <ConfirmModal
          v-if="isInfoModal"
-         :confirm-text="$t('word.update')"
-         :cancel-text="$t('word.close')"
+         :confirm-text="t('word.update')"
+         :cancel-text="t('word.close')"
          size="medium"
          :hide-footer="true"
          @hide="hideInfoModal"
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-information-outline mr-1" /> {{ $t('message.processInfo') }}
+               <i class="mdi mdi-24px mdi-information-outline mr-1" /> {{ t('message.processInfo') }}
             </div>
          </template>
          <template #body>
@@ -48,6 +48,12 @@
 import { Ref, ref } from 'vue';
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
 import TextEditor from '@/components/BaseTextEditor.vue';
+import { useFilters } from '@/composables/useFilters';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const { cutText } = useFilters();
 
 const props = defineProps({
    row: Object
@@ -79,11 +85,6 @@ const dblClick = (col: string) => {
    isInfoModal.value = true;
 };
 
-const cutText = (val: string | number) => {
-   if (typeof val !== 'string') return val;
-   return val.length > 250 ? `${val.substring(0, 250)}[...]` : val;
-};
-
 </script>
 
 <style lang="scss">

src/renderer/components/ModalSettings.vue

@@ -30,6 +30,13 @@
                         >
                            <a class="tab-link">{{ t('word.themes') }}</a>
                         </li>
+                        <li
+                           class="tab-item c-hand"
+                           :class="{'active': selectedTab === 'shortcuts'}"
+                           @click="selectTab('shortcuts')"
+                        >
+                           <a class="tab-link">{{ t('word.shortcuts') }}</a>
+                        </li>
                         <li
                            v-if="updateStatus !== 'disabled'"
                            class="tab-item c-hand"
@@ -232,7 +239,7 @@
                            <div class="column col-12 h6 text-uppercase mb-2 mt-4">
                               {{ t('message.editorTheme') }}
                            </div>
-                           <div class="column col-6 h5 mb-4">
+                           <div class="column col-5 h5 mb-4">
                               <BaseSelect
                                  v-model="localEditorTheme"
                                  class="form-select"
@@ -244,28 +251,49 @@
                                  @change="changeEditorTheme(localEditorTheme)"
                               />
                            </div>
-                           <div class="column col-6 mb-4">
+                           <div class="column col-7 mb-4">
                               <div class="btn-group btn-group-block">
+                                 <button
+                                    class="btn btn-dark cut-text"
+                                    :class="{'active': editorFontSize === 'xsmall'}"
+                                    @click="changeEditorFontSize('xsmall')"
+                                 >
+                                    10px
+                                 </button>
                                  <button
                                     class="btn btn-dark cut-text"
                                     :class="{'active': editorFontSize === 'small'}"
                                     @click="changeEditorFontSize('small')"
                                  >
-                                    {{ t('word.small') }}
+                                    12px
                                  </button>
                                  <button
                                     class="btn btn-dark cut-text"
                                     :class="{'active': editorFontSize === 'medium'}"
                                     @click="changeEditorFontSize('medium')"
                                  >
-                                    {{ t('word.medium') }}
+                                    14px
                                  </button>
                                  <button
                                     class="btn btn-dark cut-text"
                                     :class="{'active': editorFontSize === 'large'}"
                                     @click="changeEditorFontSize('large')"
                                  >
-                                    {{ t('word.large') }}
+                                    16px
+                                 </button>
+                                 <button
+                                    class="btn btn-dark cut-text"
+                                    :class="{'active': editorFontSize === 'xlarge'}"
+                                    @click="changeEditorFontSize('xlarge')"
+                                 >
+                                    18px
+                                 </button>
+                                 <button
+                                    class="btn btn-dark cut-text"
+                                    :class="{'active': editorFontSize === 'xxlarge'}"
+                                    @click="changeEditorFontSize('xxlarge')"
+                                 >
+                                    20px
                                  </button>
                               </div>
                            </div>
@@ -282,6 +310,9 @@
                      </div>
                   </div>
 
+                  <div v-show="selectedTab === 'shortcuts'" class="panel-body py-4">
+                     <ModalSettingsShortcuts />
+                  </div>
                   <div v-show="selectedTab === 'update'" class="panel-body py-4">
                      <ModalSettingsUpdate />
                   </div>
@@ -315,7 +346,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, Ref, ref } from 'vue';
+import { onBeforeUnmount, Ref, ref, computed } from 'vue';
 import { shell } from 'electron';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
@@ -326,11 +357,12 @@ import { useFocusTrap } from '@/composables/useFocusTrap';
 import { localesNames } from '@/i18n/supported-locales';
 import ModalSettingsUpdate from '@/components/ModalSettingsUpdate.vue';
 import ModalSettingsChangelog from '@/components/ModalSettingsChangelog.vue';
+import ModalSettingsShortcuts from '@/components/ModalSettingsShortcuts.vue';
 import BaseTextEditor from '@/components/BaseTextEditor.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
-import { computed } from '@vue/reactivity';
+import { AvailableLocale } from '@/i18n';
 
-const { t, availableLocales } = useI18n();
+const { t } = useI18n();
 
 const applicationStore = useApplicationStore();
 const settingsStore = useSettingsStore();
@@ -384,7 +416,29 @@ const contributors = process.env.APP_CONTRIBUTORS;
 const appLogo = require('../images/logo.svg');
 const darkPreview = require('../images/dark.png');
 const lightPreview = require('../images/light.png');
-const editorThemes= [
+const exampleQuery = `-- This is an example
+SELECT 
+    employee.id,
+    employee.first_name,
+    employee.last_name,
+    SUM(DATEDIFF("SECOND", call.start, call.end)) AS call_duration
+FROM call
+INNER JOIN employee ON call.employee_id = employee.id
+GROUP BY
+    employee.id,
+    employee.first_name,
+    employee.last_name
+ORDER BY
+    employee.id ASC;
+`;
+
+const localLocale: Ref<AvailableLocale> = ref(null);
+const localPageSize: Ref<number> = ref(null);
+const localTimeout: Ref<number> = ref(null);
+const localEditorTheme: Ref<string> = ref(null);
+const selectedTab: Ref<string> = ref('general');
+
+const editorThemes = computed(() => [
    {
       group: t('word.light'),
       themes: [
@@ -432,32 +486,11 @@ const editorThemes= [
          { code: 'vibrant_ink', name: 'Vibrant Ink' }
       ]
    }
-];
-const exampleQuery = `-- This is an example
-SELECT 
-    employee.id,
-    employee.first_name,
-    employee.last_name,
-    SUM(DATEDIFF("SECOND", call.start, call.end)) AS call_duration
-FROM call
-INNER JOIN employee ON call.employee_id = employee.id
-GROUP BY
-    employee.id,
-    employee.first_name,
-    employee.last_name
-ORDER BY
-    employee.id ASC;
-`;
-
-const localLocale: Ref<string> = ref(null);
-const localPageSize: Ref<number> = ref(null);
-const localTimeout: Ref<number> = ref(null);
-const localEditorTheme: Ref<string> = ref(null);
-const selectedTab: Ref<string> = ref('general');
+]);
 
 const locales = computed(() => {
    const locales = [];
-   for (const locale of availableLocales)
+   for (const locale of Object.keys(localesNames))
       locales.push({ code: locale, name: localesNames[locale] });
 
    return locales;
@@ -517,7 +550,7 @@ const toggleLineWrap = () => {
    changeLineWrap(!selectedLineWrap.value);
 };
 
-localLocale.value = selectedLocale.value as string;
+localLocale.value = selectedLocale.value;
 localPageSize.value = pageSize.value as number;
 localTimeout.value = notificationsTimeout.value as number;
 localEditorTheme.value = editorTheme.value as string;
@@ -538,6 +571,12 @@ onBeforeUnmount(() => {
     .modal-body {
       overflow: hidden;
 
+      .tab-link {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
       .panel-body {
         min-height: calc(25vh - 70px);
         max-height: 65vh;

src/renderer/components/ModalSettingsShortcuts.vue

@@ -0,0 +1,313 @@
+<template>
+   <div class="p-relative">
+      <div class="shortcuts-tools pb-2 px-2">
+         <button class="btn btn-dark btn-sm d-flex ml-2" @click="showAddModal">
+            <i class="mdi mdi-24px mdi-plus mr-1" /><span>{{ t('message.addShortcut') }}</span>
+         </button>
+         <button class="btn btn-dark btn-sm d-flex ml-2" @click="isConfirmRestoreModal = true">
+            <i class="mdi mdi-24px mdi-undo mr-1" /><span>{{ t('message.restoreDefaults') }}</span>
+         </button>
+      </div>
+      <div class="container workspace-query-results">
+         <div class="table table-hover">
+            <div class="thead">
+               <div class="tr text-uppercase">
+                  <div class="th no-border">
+                     <div>
+                        {{ t('word.event') }}
+                     </div>
+                  </div>
+                  <div class="th no-border" style="width: 100%;">
+                     <div>
+                        {{ t('word.key', 2) }}
+                     </div>
+                  </div>
+                  <div class="th no-border" />
+               </div>
+            </div>
+
+            <div class="tbody">
+               <div
+                  v-for="(shortcut, i) in shortcuts"
+                  :key="i"
+                  class="tr"
+                  tabindex="0"
+               >
+                  <div class="td py-1">
+                     {{ t(shortcutEvents[shortcut.event].l18n, {param: shortcutEvents[shortcut.event].l18nParam}) }}
+                  </div>
+                  <div
+                     class="td py-1"
+                     style="border-right: 0;"
+                     v-html="parseKeys(shortcut.keys)"
+                  />
+                  <div class="td py-1 pr-2">
+                     <button class="shortcut-button btn btn-link btn-sm d-flex p-0 px-1 mr-2" @click="showEditModal({...shortcut, index: i})">
+                        <span>{{ t('word.edit') }}</span><i class="mdi mdi-pencil ml-1" />
+                     </button>
+                     <button class="shortcut-button btn btn-link btn-sm d-flex p-0 px-1" @click="showDeleteModal(shortcut)">
+                        <span>{{ t('word.delete') }}</span><i class="mdi mdi-delete-outline ml-1" />
+                     </button>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+   </div>
+   <Teleport to="#window-content">
+      <ConfirmModal
+         v-if="isConfirmAddModal"
+         :disable-autofocus="true"
+         :confirm-text="t('word.save')"
+         :close-on-confirm="false"
+         @confirm="addShortcut"
+         @hide="closeAddModal"
+      >
+         <template #header>
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-plus mr-1" /> {{ t('message.addShortcut') }}
+            </div>
+         </template>
+         <template #body>
+            <div class="mb-2">
+               <div class="form-group">
+                  <label class="form-label">{{ t('word.event') }}</label>
+                  <BaseSelect
+                     v-model="shortcutToAdd.event"
+                     class="form-select"
+                     :options="eventOptions"
+                  />
+               </div>
+            </div>
+            <div class="mb-2">
+               <div class="form-group">
+                  <label class="form-label">{{ t('word.key', 2) }}</label>
+                  <KeyPressDetector v-model="typedShortcut" />
+               </div>
+            </div>
+            <small v-if="doesShortcutExists" class="text-warning">{{ t('message.shortcutAlreadyExists') }}</small>
+         </template>
+      </ConfirmModal>
+
+      <ConfirmModal
+         v-if="isConfirmEditModal"
+         :disable-autofocus="true"
+         :confirm-text="t('word.save')"
+         :close-on-confirm="false"
+         @confirm="editShortcut"
+         @hide="closeEditModal"
+      >
+         <template #header>
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-plus mr-1" /> {{ t('message.editShortcut') }}
+            </div>
+         </template>
+         <template #body>
+            <div class="mb-2">
+               <div class="form-group">
+                  <label class="form-label">{{ t('word.event') }}</label>
+                  <BaseSelect
+                     v-model="shortcutToEdit.event"
+                     class="form-select"
+                     :options="eventOptions"
+                     :disabled="true"
+                  />
+               </div>
+            </div>
+            <div class="mb-2">
+               <div class="form-group">
+                  <label class="form-label">{{ t('word.key', 2) }}</label>
+                  <KeyPressDetector v-model="shortcutToEdit.keys[0]" />
+               </div>
+            </div>
+            <small v-if="doesShortcutExists" class="text-warning">{{ t('message.shortcutAlreadyExists') }}</small>
+         </template>
+      </ConfirmModal>
+
+      <ConfirmModal
+         v-if="isConfirmDeleteModal"
+         :disable-autofocus="true"
+         @confirm="deleteShortcut"
+         @hide="isConfirmDeleteModal = false"
+      >
+         <template #header>
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-delete mr-1" /> {{ t('message.deleteShortcut') }}
+            </div>
+         </template>
+         <template #body>
+            <div class="mb-2">
+               {{ t('message.deleteCorfirm') }} <b>{{ t(shortcutEvents[shortcutToDelete.event].l18n, {param: shortcutEvents[shortcutToDelete.event].l18nParam}) }} (<span v-html="parseKeys(shortcutToDelete.keys)" />)</b>?
+            </div>
+         </template>
+      </ConfirmModal>
+
+      <ConfirmModal
+         v-if="isConfirmRestoreModal"
+         :disable-autofocus="true"
+         @confirm="restoreDefaults"
+         @hide="isConfirmRestoreModal = false"
+      >
+         <template #header>
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-undo mr-1" /> {{ t('message.restoreDefaults') }}
+            </div>
+         </template>
+         <template #body>
+            <div class="mb-2">
+               {{ t('message.restoreDefaultsQuestion') }}
+            </div>
+         </template>
+      </ConfirmModal>
+   </Teleport>
+</template>
+<script setup lang="ts">
+import { Ref, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import { useSettingsStore } from '@/stores/settings';
+import KeyPressDetector from './KeyPressDetector.vue';
+import Application from '@/ipc-api/Application';
+import { shortcutEvents, ShortcutRecord } from 'common/shortcuts';
+import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import BaseSelect from '@/components/BaseSelect.vue';
+import { computed } from '@vue/reactivity';
+import { useFilters } from '@/composables/useFilters';
+
+const { parseKeys } = useFilters();
+
+const { t } = useI18n();
+
+const isMacOS = process.platform === 'darwin';
+
+const isConfirmRestoreModal = ref(false);
+const isConfirmAddModal = ref(false);
+const isConfirmEditModal = ref(false);
+const isConfirmDeleteModal = ref(false);
+const doesShortcutExists = ref(false);
+const shortcutToAdd: Ref<ShortcutRecord> = ref({ event: undefined, keys: [], os: [process.platform] });
+const shortcutToEdit: Ref<ShortcutRecord & { index: number }> = ref(null);
+const shortcutToDelete: Ref<ShortcutRecord> = ref(null);
+const typedShortcut = ref('');
+
+const settingsStore = useSettingsStore();
+const { shortcuts } = storeToRefs(settingsStore);
+
+const eventOptions = computed(() => {
+   return Object.keys(shortcutEvents)
+      .map(key => {
+         return { value: key, label: t(shortcutEvents[key].l18n, { param: shortcutEvents[key].l18nParam }) };
+      })
+      .sort((a, b) => {
+         if (a.label < b.label) return -1;
+         if (a.label > b.label) return 1;
+         return 0;
+      });
+});
+
+const restoreDefaults = () => {
+   isConfirmRestoreModal.value = false;
+   return Application.restoreDefaultShortcuts();
+};
+
+const showAddModal = () => {
+   shortcutToAdd.value.event = eventOptions.value[0].value;
+   isConfirmAddModal.value = true;
+};
+
+const closeAddModal = () => {
+   typedShortcut.value = '';
+   doesShortcutExists.value = false;
+   shortcutToAdd.value = { event: undefined, keys: [], os: [process.platform] };
+   isConfirmAddModal.value = false;
+};
+
+const showEditModal = (shortcut: ShortcutRecord & { index: number }) => {
+   shortcut = {
+      ...shortcut,
+      keys: [shortcut.keys[0].replaceAll('CommandOrControl', isMacOS ? 'Command' : 'Control')]
+   };
+   shortcutToEdit.value = shortcut;
+   isConfirmEditModal.value = true;
+};
+
+const editShortcut = () => {
+   const index = shortcutToEdit.value.index;
+   delete shortcutToEdit.value.index;
+   shortcutToEdit.value.index = undefined;
+
+   shortcuts.value[index] = shortcutToEdit.value;
+
+   isConfirmEditModal.value = false;
+   return Application.updateShortcuts(shortcuts.value);
+};
+
+const closeEditModal = () => {
+   typedShortcut.value = '';
+   doesShortcutExists.value = false;
+   shortcutToEdit.value = null;
+   isConfirmEditModal.value = false;
+};
+
+const addShortcut = () => {
+   if (!typedShortcut.value.length || doesShortcutExists.value) return;
+   shortcutToAdd.value.keys = [typedShortcut.value.replaceAll(isMacOS ? 'Command' : 'Control', 'CommandOrControl')];
+   const filteredShortcuts = [shortcutToAdd.value, ...shortcuts.value];
+
+   isConfirmAddModal.value = false;
+   return Application.updateShortcuts(filteredShortcuts);
+};
+
+const showDeleteModal = (shortcut: ShortcutRecord) => {
+   isConfirmDeleteModal.value = true;
+   shortcutToDelete.value = shortcut;
+};
+
+const deleteShortcut = () => {
+   const filteredShortcuts = shortcuts.value.filter(s => (
+      shortcutToDelete.value.keys.toString() !== s.keys.toString()
+   ));
+
+   isConfirmDeleteModal.value = false;
+   return Application.updateShortcuts(filteredShortcuts);
+};
+
+watch(typedShortcut, () => {
+   doesShortcutExists.value = shortcuts.value.some(s => (
+      s.keys.some(k => (
+         k.replaceAll('CommandOrControl', isMacOS ? 'Command' : 'Control') === typedShortcut.value
+      ))
+   ));
+});
+</script>
+<style lang="scss" scoped>
+  .table {
+    .tr {
+      .td {
+        border-right: 3px solid;
+        border-bottom: 3px solid;
+      }
+
+      &:hover {
+        .shortcut-button {
+          opacity: 1;
+        }
+      }
+
+      .shortcut-button {
+        font-size: 0.7rem;
+        height: 1rem;
+        line-height: 1rem;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+    }
+  }
+
+  .shortcuts-tools {
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>

src/renderer/components/ModalSettingsUpdate.vue

@@ -26,27 +26,27 @@
             :class="{'loading': updateStatus === 'checking'}"
             @click="checkForUpdates"
          >
-            {{ $t('message.checkForUpdates') }}
+            {{ t('message.checkForUpdates') }}
          </button>
          <button
             v-else-if="updateStatus === 'downloaded'"
             class="btn btn-primary"
             @click="restartToUpdate"
          >
-            {{ $t('message.restartToInstall') }}
+            {{ t('message.restartToInstall') }}
          </button>
          <button
             v-else-if="updateStatus === 'link'"
             class="btn btn-primary"
             @click="openOutside('https://antares-sql.app/download.html')"
          >
-            {{ $t('message.goToDownloadPage') }}
+            {{ t('message.goToDownloadPage') }}
          </button>
       </div>
       <div class="form-group mt-4">
          <label class="form-switch d-inline-block disabled" @click.prevent="toggleAllowPrerelease">
             <input type="checkbox" :checked="allowPrerelease">
-            <i class="form-icon" /> {{ $t('message.includeBetaUpdates') }}
+            <i class="form-icon" /> {{ t('message.includeBetaUpdates') }}
          </label>
       </div>
    </div>

src/renderer/components/QueryEditor.vue

@@ -34,6 +34,15 @@ const {
    lineWrap
 } = storeToRefs(settingsStore);
 
+const sizes = {
+   xsmall: '10px',
+   small: '12px',
+   medium: '14px',
+   large: '16px',
+   xlarge: '18px',
+   xxlarge: '20px'
+};
+
 const props = defineProps({
    modelValue: String,
    workspace: Object as Prop<Workspace>,
@@ -240,12 +249,6 @@ watch(editorTheme, () => {
 });
 
 watch(editorFontSize, () => {
-   const sizes = {
-      small: '12px',
-      medium: '14px',
-      large: '16px'
-   };
-
    if (editor.value) {
       editor.value.setOptions({
          fontSize: sizes[editorFontSize.value]
@@ -305,7 +308,8 @@ onMounted(() => {
       enableBasicAutocompletion: true,
       wrap: lineWrap.value,
       enableSnippets: true,
-      enableLiveAutocompletion: autoComplete.value
+      enableLiveAutocompletion: autoComplete.value,
+      fontSize: sizes[editorFontSize.value]
    });
 
    if (!baseCompleter.value.length)

src/renderer/components/SettingBarContext.vue

@@ -8,27 +8,27 @@
          class="context-element"
          @click="unpin"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-pin-off text-light pr-1" /> {{ $t('word.unpin') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-pin-off text-light pr-1" /> {{ t('word.unpin') }}</span>
       </div>
       <div
          v-else
          class="context-element"
          @click="pin"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-pin mdi-rotate-45 text-light pr-1" /> {{ $t('word.pin') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-pin mdi-rotate-45 text-light pr-1" /> {{ t('word.pin') }}</span>
       </div>
       <div
          v-if="isConnected"
          class="context-element"
          @click="disconnect"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-power text-light pr-1" /> {{ $t('word.disconnect') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-power text-light pr-1" /> {{ t('word.disconnect') }}</span>
       </div>
       <div class="context-element" @click="duplicateConnection">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-content-duplicate text-light pr-1" /> {{ $t('word.duplicate') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-content-duplicate text-light pr-1" /> {{ t('word.duplicate') }}</span>
       </div>
       <div class="context-element" @click="showConfirmModal">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $t('word.delete') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ t('word.delete') }}</span>
       </div>
 
       <ConfirmModal
@@ -38,12 +38,12 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-server-remove mr-1" /> {{ $t('message.deleteConnection') }}
+               <i class="mdi mdi-24px mdi-server-remove mr-1" /> {{ t('message.deleteConnection') }}
             </div>
          </template>
          <template #body>
             <div class="mb-2">
-               {{ $t('message.deleteCorfirm') }} <b>{{ connectionName }}</b>?
+               {{ t('message.deleteCorfirm') }} <b>{{ connectionName }}</b>?
             </div>
          </template>
       </ConfirmModal>
@@ -54,12 +54,15 @@
 import { computed, Prop, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { uidGen } from 'common/libs/uidGen';
+import { useI18n } from 'vue-i18n';
 import { useConnectionsStore } from '@/stores/connections';
 import { useWorkspacesStore } from '@/stores/workspaces';
 import BaseContextMenu from '@/components/BaseContextMenu.vue';
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
 import { ConnectionParams } from 'common/interfaces/antares';
 
+const { t } = useI18n();
+
 const connectionsStore = useConnectionsStore();
 
 const {

src/renderer/components/TheScratchpad.vue

@@ -1,14 +1,14 @@
 <template>
    <ConfirmModal
-      :confirm-text="$t('word.update')"
-      :cancel-text="$t('word.close')"
+      :confirm-text="t('word.update')"
+      :cancel-text="t('word.close')"
       size="large"
       :hide-footer="true"
       @hide="hideScratchpad"
    >
       <template #header>
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-notebook-edit-outline mr-1" /> {{ $t('word.scratchpad') }}
+            <i class="mdi mdi-24px mdi-notebook-edit-outline mr-1" /> {{ t('word.scratchpad') }}
          </div>
       </template>
       <template #body>
@@ -22,7 +22,7 @@
                   :show-line-numbers="false"
                />
             </div>
-            <small class="text-gray">{{ $t('message.markdownSupported') }}</small>
+            <small class="text-gray">{{ t('message.markdownSupported') }}</small>
          </div>
       </template>
    </ConfirmModal>
@@ -35,6 +35,9 @@ import { useApplicationStore } from '@/stores/application';
 import { useScratchpadStore } from '@/stores/scratchpad';
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
 import TextEditor from '@/components/BaseTextEditor.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const applicationStore = useApplicationStore();
 const scratchpadStore = useScratchpadStore();

src/renderer/components/TheSettingBar.vue

@@ -14,17 +14,20 @@
                @start="isDragging = true"
                @end="dragStop"
             >
-               <template #item="{element}">
+               <template #item="{ element }">
                   <li
                      :draggable="true"
-                     class="settingbar-element btn btn-link ex-tooltip"
-                     :class="{'selected': element.uid === selectedWorkspace}"
+                     class="settingbar-element btn btn-link"
+                     :class="{ 'selected': element.uid === selectedWorkspace }"
+                     :title="getConnectionName(element.uid)"
                      @click.stop="selectWorkspace(element.uid)"
                      @contextmenu.prevent="contextMenu($event, element)"
-                     @mouseover.self="tooltipPosition"
                   >
-                     <i class="settingbar-element-icon dbi" :class="[`dbi-${element.client}`, getStatusBadge(element.uid), (pinnedConnections.has(element.uid) ? 'settingbar-element-pin' : false)]" />
-                     <span v-if="!isDragging && !isScrolling" class="ex-tooltip-content">{{ getConnectionName(element.uid) }}</span>
+                     <i
+                        class="settingbar-element-icon dbi"
+                        :class="[`dbi-${element.client}`, getStatusBadge(element.uid), (pinnedConnections.has(element.uid) ? 'settingbar-element-pin' : false)]"
+                     />
+                     <small class="settingbar-element-name">{{ getConnectionName(element.uid) }}</small>
                   </li>
                </template>
             </Draggable>
@@ -34,14 +37,17 @@
             <li
                v-for="connection in unpinnedConnectionsArr"
                :key="connection.uid"
-               class="settingbar-element btn btn-link ex-tooltip"
-               :class="{'selected': connection.uid === selectedWorkspace}"
+               class="settingbar-element btn btn-link"
+               :class="{ 'selected': connection.uid === selectedWorkspace }"
+               :title="getConnectionName(connection.uid)"
                @click.stop="selectWorkspace(connection.uid)"
                @contextmenu.prevent="contextMenu($event, connection)"
-               @mouseover.self="tooltipPosition"
             >
-               <i class="settingbar-element-icon dbi" :class="[`dbi-${connection.client}`, getStatusBadge(connection.uid)]" />
-               <span v-if="!isDragging && !isScrolling" class="ex-tooltip-content">{{ getConnectionName(connection.uid) }}</span>
+               <i
+                  class="settingbar-element-icon dbi"
+                  :class="[`dbi-${connection.client}`, getStatusBadge(connection.uid)]"
+               />
+               <small class="settingbar-element-name">{{ getConnectionName(connection.uid) }}</small>
             </li>
          </ul>
       </div>
@@ -50,21 +56,19 @@
          <ul class="settingbar-elements">
             <li
                v-if="isScrollable"
-               class="settingbar-element btn btn-link ex-tooltip"
+               class="settingbar-element btn btn-link"
+               :title="t('message.allConnections')"
                @click="emit('show-connections-modal')"
-               @mouseover.self="tooltipPosition"
             >
                <i class="settingbar-element-icon mdi mdi-24px mdi-dots-horizontal text-light" />
-               <span class="ex-tooltip-content">{{ $t('message.allConnections') }} (Shift+CTRL+Space)</span>
             </li>
             <li
-               class="settingbar-element btn btn-link ex-tooltip"
-               :class="{'selected': 'NEW' === selectedWorkspace}"
+               class="settingbar-element btn btn-link"
+               :class="{ 'selected': 'NEW' === selectedWorkspace }"
+               :title="t('message.addConnection')"
                @click="selectWorkspace('NEW')"
-               @mouseover.self="tooltipPosition"
             >
                <i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
-               <span class="ex-tooltip-content">{{ $t('message.addConnection') }}</span>
             </li>
          </ul>
       </div>
@@ -73,15 +77,21 @@
          <ul class="settingbar-elements">
             <li
                v-if="!disableScratchpad"
-               class="settingbar-element btn btn-link ex-tooltip"
+               class="settingbar-element btn btn-link"
+               :title="t('word.scratchpad')"
                @click="showScratchpad"
             >
                <i class="settingbar-element-icon mdi mdi-24px mdi-notebook-edit-outline text-light" />
-               <span class="ex-tooltip-content">{{ $t('word.scratchpad') }}</span>
             </li>
-            <li class="settingbar-element btn btn-link ex-tooltip" @click="showSettingModal('general')">
-               <i class="settingbar-element-icon mdi mdi-24px mdi-cog text-light" :class="{' badge badge-update': hasUpdates}" />
-               <span class="ex-tooltip-content">{{ $t('word.settings') }}</span>
+            <li
+               class="settingbar-element btn btn-link"
+               :title="t('word.settings')"
+               @click="showSettingModal('general')"
+            >
+               <i
+                  class="settingbar-element-icon mdi mdi-24px mdi-cog text-light"
+                  :class="{ ' badge badge-update': hasUpdates }"
+               />
             </li>
          </ul>
       </div>
@@ -98,7 +108,10 @@ import { useSettingsStore } from '@/stores/settings';
 import * as Draggable from 'vuedraggable';
 import SettingBarContext from '@/components/SettingBarContext.vue';
 import { ConnectionParams } from 'common/interfaces/antares';
-import { useElementBounding, useScroll } from '@vueuse/core';
+import { useElementBounding } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const applicationStore = useApplicationStore();
 const connectionsStore = useConnectionsStore();
@@ -122,7 +135,6 @@ const sidebarConnections: Ref<HTMLDivElement> = ref(null);
 const isContext: Ref<boolean> = ref(false);
 const isDragging: Ref<boolean> = ref(false);
 const isScrollable: Ref<boolean> = ref(false);
-const isScrolling = ref(useScroll(sidebarConnections)?.isScrolling);
 const contextEvent: Ref<MouseEvent> = ref(null);
 const contextConnection: Ref<ConnectionParams> = ref(null);
 const sidebarConnectionsHeight = ref(useElementBounding(sidebarConnections)?.height);
@@ -237,32 +249,32 @@ watch(selectedWorkspace, (newVal, oldVal) => {
 </script>
 
 <style lang="scss">
-  #settingbar {
-    width: $settingbar-width;
-    height: calc(100vh - #{$excluding-size});
-    display: flex;
-    flex-direction: column;
+#settingbar {
+   width: $settingbar-width;
+   height: calc(100vh - #{$excluding-size});
+   display: flex;
+   flex-direction: column;
    //  justify-content: space-between;
-    align-items: center;
-    padding: 0;
-    z-index: 9;
+   align-items: center;
+   padding: 0;
+   z-index: 9;
 
-    .settingbar-top-elements {
+   .settingbar-top-elements {
       overflow-x: hidden;
       overflow-y: overlay;
       // max-height: calc((100vh - 3.5rem) - #{$excluding-size});
 
       &::-webkit-scrollbar {
-        width: 3px;
+         width: 3px;
       }
-    }
+   }
 
-    .settingbar-bottom-elements {
+   .settingbar-bottom-elements {
       z-index: 1;
       margin-top: auto;
-    }
+   }
 
-    .settingbar-elements {
+   .settingbar-elements {
       list-style: none;
       text-align: center;
       width: $settingbar-width;
@@ -270,101 +282,85 @@ watch(selectedWorkspace, (newVal, oldVal) => {
       margin: 0;
 
       .settingbar-element {
-        height: $settingbar-width;
-        width: 100%;
-        margin: 0;
-        opacity: 0.5;
-        transition: opacity 0.2s;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        border-radius: 0;
-        padding: 0;
+         height: $settingbar-width;
+         width: 100%;
+         margin: 0;
+         opacity: 0.6;
+         transition: opacity 0.2s;
+         display: flex;
+         align-items: center;
+         justify-content: flex-start;
+         border-radius: 0;
+         padding: 0;
+         position: relative;
 
-        &:hover {
-          opacity: 1;
-        }
+         &:hover {
+            opacity: 1;
+         }
 
-        &.selected {
-          opacity: 1;
+         &.selected {
+            opacity: 1;
 
-          &::before {
-            height: $settingbar-width;
-          }
-        }
+            &::before {
+               height: $settingbar-width;
+            }
+         }
 
-        &::before {
-          content: "";
-          height: 0;
-          width: 3px;
-          transition: height 0.2s;
-          background-color: $primary-color;
-          border-radius: $border-radius;
-        }
+         &::before {
+            content: "";
+            height: 0;
+            width: 3px;
+            transition: height 0.2s;
+            background-color: $primary-color;
+            border-radius: $border-radius;
+         }
 
-        .settingbar-element-icon {
-          margin: 0 auto;
+         .settingbar-element-icon {
+            margin: 0 auto;
 
-          &.badge::after {
-            bottom: -10px;
-            right: 0;
+            &.badge::after {
+               top: 5px;
+               right: -4px;
+               position: absolute;
+            }
+
+            &.badge-update::after {
+               bottom: initial;
+            }
+         }
+
+         .settingbar-element-name {
+            font-size: 65%;
+            bottom: 5px;
+            left: 7px;
             position: absolute;
-          }
+            font-style: normal;
+            display: block;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            width: calc($settingbar-width - 15px);
+            text-align: left;
+            line-height: 1.1;
+            color: rgba($body-font-color-dark, 0.8);
+            text-align: center;
+         }
 
-          &.badge-update::after {
-            bottom: initial;
-          }
-        }
+         .settingbar-element-pin {
+            margin: 0 auto;
 
-        .settingbar-element-pin{
-          margin: 0 auto;
-
-          &::before {
-            font: normal normal normal 14px/1 "Material Design Icons";
-            content: "\F0403";
-            color: $body-font-color-dark;
-            transform: rotate(45deg);
-            opacity: .25;
-            bottom: -8px;
-            left: -4px;
-            position: absolute;
-          }
-        }
+            &::before {
+               font: normal normal normal 14px/1 "Material Design Icons";
+               content: "\F0403";
+               color: $body-font-color-dark;
+               transform: rotate(45deg);
+               opacity: 0.25;
+               top: -8px;
+               left: -10px;
+               position: absolute;
+            }
+         }
       }
-    }
-  }
-
-  .ex-tooltip {// Because both overflow-x: visible and overflow-y:auto are evil!!!
-    .ex-tooltip-content {
-      z-index: 999;
-      visibility: hidden;
-      opacity: 0;
-      display: block;
-      position: absolute;
-      text-align: center;
-      margin: 0 0 0 calc(#{$settingbar-width} - 5px);
-      left: 0;
-      padding: 0.2rem 0.4rem;
-      font-size: 0.7rem;
-      background: rgba(48, 55, 66, 0.95);
-      border-radius: $border-radius;
-      color: #fff;
-      max-width: 320px;
-      pointer-events: none;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      transition: opacity 0.2s;
-    }
-
-    &.sortable-chosen {
-      .ex-tooltip-content {
-        opacity: 0 !important;
-      }
-    }
-
-    &:hover:not(.selected) .ex-tooltip-content {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
+   }
+}
 </style>

src/renderer/components/Workspace.vue

@@ -31,10 +31,10 @@
                   >
                      <i class="mdi mdi-18px mdi-code-tags mr-1" />
                      <span>
-                        <span>{{ cutText(element.content || 'Query') }} #{{ element.index }}</span>
+                        <span>{{ cutText(element.content || 'Query', 20, true) }} #{{ element.index }}</span>
                         <span
                            class="btn btn-clear"
-                           :title="$t('word.close')"
+                           :title="t('word.close')"
                            @mousedown.left.stop
                            @click.stop="closeTab(element)"
                         />
@@ -47,11 +47,11 @@
                      @dblclick="openAsPermanentTab(element)"
                   >
                      <i class="mdi mdi-18px mr-1" :class="element.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
-                     <span :title="`${$t('word.data').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
-                        <span class=" text-italic">{{ cutText(element.elementName) }}</span>
+                     <span :title="`${t('word.data').toUpperCase()}: ${t(`word.${element.elementType}`)}`">
+                        <span class=" text-italic">{{ cutText(element.elementName, 20, true) }}</span>
                         <span
                            class="btn btn-clear"
-                           :title="$t('word.close')"
+                           :title="t('word.close')"
                            @mousedown.left.stop
                            @click.stop="closeTab(element)"
                         />
@@ -60,11 +60,11 @@
 
                   <a v-else-if="element.type === 'data'" class="tab-link">
                      <i class="mdi mdi-18px mr-1" :class="element.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
-                     <span :title="`${$t('word.data').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
-                        {{ cutText(element.elementName) }}
+                     <span :title="`${t('word.data').toUpperCase()}: ${t(`word.${element.elementType}`)}`">
+                        {{ cutText(element.elementName, 20, true) }}
                         <span
                            class="btn btn-clear"
-                           :title="$t('word.close')"
+                           :title="t('word.close')"
                            @mousedown.left.stop
                            @click.stop="closeTab(element)"
                         />
@@ -77,11 +77,11 @@
                      :class="{'badge': element.isChanged}"
                   >
                      <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
-                     <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
-                        {{ $t('message.newTable') }}
+                     <span :title="`${t('word.new').toUpperCase()}: ${t(`word.${element.elementType}`)}`">
+                        {{ t('message.newTable') }}
                         <span
                            class="btn btn-clear"
-                           :title="$t('word.close')"
+                           :title="t('word.close')"
                            @mousedown.left.stop
                            @click.stop="closeTab(element)"
                         />
@@ -94,11 +94,11 @@
                      :class="{'badge': element.isChanged}"
                   >
                      <i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
-                     <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
-                        {{ cutText(element.elementName) }}
+                     <span :title="`${t('word.settings').toUpperCase()}: ${t(`word.${element.elementType}`)}`">
+                        {{ cutText(element.elementName, 20, true) }}
                         <span
                            class="btn btn-clear"
-                           :title="$t('word.close')"
+                           :title="t('word.close')"
                            @mousedown.left.stop
                            @click.stop="closeTab(element)"
                         />
@@ -111,11 +111,11 @@
                      :class="{'badge': element.isChanged}"
                   >
                      <i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
-                     <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.view`)}`">
-                        {{ cutText(element.elementName) }}
+                     <span :title="`${t('word.settings').toUpperCase()}: ${t(`word.view`)}`">
+                        {{ cutText(element.elementName, 20, true) }}
                         <span
                            class="btn btn-clear"
-                           :title="$t('word.close')"
+                           :title="t('word.close')"
                            @mousedown.left.stop
                            @click.stop="closeTab(element)"
                         />
@@ -128,11 +128,11 @@
                      :class="{'badge': element.isChanged}"
                   >
                      <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
-                     <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
-                        {{ $t('message.newView') }}
+                     <span :title="`${t('word.new').toUpperCase()}: ${t(`word.${element.elementType}`)}`">
+                        {{ t('message.newView') }}
                         <span
                            class="btn btn-clear"
-                           :title="$t('word.close')"
+                           :title="t('word.close')"
                            @mousedown.left.stop
                            @click.stop="closeTab(element)"
                         />
@@ -145,11 +145,11 @@
                      :class="{'badge': element.isChanged}"
                   >
                      <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
-                     <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
-                        {{ $t('message.newTrigger') }}
+                     <span :title="`${t('word.new').toUpperCase()}: ${t(`word.${element.elementType}`)}`">
+                        {{ t('message.newTrigger') }}
                         <span
                            class="btn btn-clear"
-                           :title="$t('word.close')"
+                           :title="t('word.close')"
                            @mousedown.left.stop
                            @click.stop="closeTab(element)"
                         />
@@ -162,11 +162,11 @@
                      :class="{'badge': element.isChanged}"
                   >
                      <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
-                     <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
-                        {{ $t('message.newRoutine') }}
+                     <span :title="`${t('word.new').toUpperCase()}: ${t(`word.${element.elementType}`)}`">
+                        {{ t('message.newRoutine') }}
                         <span
                            class="btn btn-clear"
-                           :title="$t('word.close')"
+                           :title="t('word.close')"
                            @mousedown.left.stop
                            @click.stop="closeTab(element)"
                         />
@@ -179,11 +179,11 @@
                      :class="{'badge': element.isChanged}"
                   >
                      <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
-                     <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
-                        {{ $t('message.newFunction') }}
+                     <span :title="`${t('word.new').toUpperCase()}: ${t(`word.${element.elementType}`)}`">
+                        {{ t('message.newFunction') }}
                         <span
                            class="btn btn-clear"
-                           :title="$t('word.close')"
+                           :title="t('word.close')"
                            @mousedown.left.stop
                            @click.stop="closeTab(element)"
                         />
@@ -196,11 +196,11 @@
                      :class="{'badge': element.isChanged}"
                   >
                      <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
-                     <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
-                        {{ $t('message.newTriggerFunction') }}
+                     <span :title="`${t('word.new').toUpperCase()}: ${t(`word.${element.elementType}`)}`">
+                        {{ t('message.newTriggerFunction') }}
                         <span
                            class="btn btn-clear"
-                           :title="$t('word.close')"
+                           :title="t('word.close')"
                            @mousedown.left.stop
                            @click.stop="closeTab(element)"
                         />
@@ -213,11 +213,11 @@
                      :class="{'badge': element.isChanged}"
                   >
                      <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
-                     <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
-                        {{ $t('message.newScheduler') }}
+                     <span :title="`${t('word.new').toUpperCase()}: ${t(`word.${element.elementType}`)}`">
+                        {{ t('message.newScheduler') }}
                         <span
                            class="btn btn-clear"
-                           :title="$t('word.close')"
+                           :title="t('word.close')"
                            @mousedown.left.stop
                            @click.stop="closeTab(element)"
                         />
@@ -231,11 +231,11 @@
                      @dblclick="openAsPermanentTab(element)"
                   >
                      <i class="mdi mdi-18px mdi-tune-vertical-variant mr-1" />
-                     <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
-                        <span class=" text-italic">{{ cutText(element.elementName) }}</span>
+                     <span :title="`${t('word.settings').toUpperCase()}: ${t(`word.${element.elementType}`)}`">
+                        <span class=" text-italic">{{ cutText(element.elementName, 20, true) }}</span>
                         <span
                            class="btn btn-clear"
-                           :title="$t('word.close')"
+                           :title="t('word.close')"
                            @mousedown.left.stop
                            @click.stop="closeTab(element)"
                         />
@@ -248,11 +248,11 @@
                      :class="{'badge': element.isChanged}"
                   >
                      <i class="mdi mdi-18px mdi-tune-vertical-variant mr-1" />
-                     <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
-                        {{ cutText(element.elementName) }}
+                     <span :title="`${t('word.settings').toUpperCase()}: ${t(`word.${element.elementType}`)}`">
+                        {{ cutText(element.elementName, 20, true) }}
                         <span
                            class="btn btn-clear"
-                           :title="$t('word.close')"
+                           :title="t('word.close')"
                            @mousedown.left.stop
                            @click.stop="closeTab(element)"
                         />
@@ -268,7 +268,7 @@
                   <a
                      class="tab-link workspace-tools-link dropdown-toggle"
                      tabindex="0"
-                     :title="$t('word.tools')"
+                     :title="t('word.tools')"
                   >
                      <i class="mdi mdi-24px mdi-tools" />
                   </a>
@@ -276,13 +276,13 @@
                      <li class="menu-item">
                         <a class="c-hand p-vcentered" @click="showProcessesModal">
                            <i class="mdi mdi-memory mr-1 tool-icon" />
-                           <span>{{ $t('message.processesList') }}</span>
+                           <span>{{ t('message.processesList') }}</span>
                         </a>
                      </li>
                      <li class="menu-item">
                         <a class="c-hand p-vcentered" @click="toggleConsole">
                            <i class="mdi mdi-console-line mr-1 tool-icon" />
-                           <span>{{ $t('word.console') }}</span>
+                           <span>{{ t('word.console') }}</span>
                         </a>
                      </li>
                      <li
@@ -292,7 +292,7 @@
                      >
                         <a class="c-hand p-vcentered disabled">
                            <i class="mdi mdi-shape mr-1 tool-icon" />
-                           <span>{{ $t('word.variables') }}</span>
+                           <span>{{ t('word.variables') }}</span>
                         </a>
                      </li>
                      <li
@@ -302,7 +302,7 @@
                      >
                         <a class="c-hand p-vcentered disabled">
                            <i class="mdi mdi-account-group mr-1 tool-icon" />
-                           <span>{{ $t('message.manageUsers') }}</span>
+                           <span>{{ t('message.manageUsers') }}</span>
                         </a>
                      </li>
                   </ul>
@@ -312,7 +312,7 @@
                <li class="tab-item">
                   <a
                      class="tab-add"
-                     :title="$t('message.openNewTab')"
+                     :title="t('message.openNewTab')"
                      @click="addQueryTab"
                   >
                      <i class="mdi mdi-24px mdi-plus" />
@@ -326,7 +326,7 @@
                v-if="tab.type ==='query'"
                :tab-uid="tab.uid"
                :tab="tab"
-               :is-selected="selectedTab === tab.uid"
+               :is-selected="selectedTab === tab.uid && isSelected"
                :connection="connection"
             />
             <WorkspaceTabTable
@@ -334,7 +334,7 @@
                v-once
                :tab-uid="tab.uid"
                :connection="connection"
-               :is-selected="selectedTab === tab.uid"
+               :is-selected="selectedTab === tab.uid && isSelected"
                :table="tab.elementName"
                :schema="tab.schema"
                :element-type="tab.elementType"
@@ -344,14 +344,14 @@
                :tab-uid="tab.uid"
                :tab="tab"
                :connection="connection"
-               :is-selected="selectedTab === tab.uid"
+               :is-selected="selectedTab === tab.uid && isSelected"
                :schema="tab.schema"
             />
             <WorkspaceTabPropsTable
                v-else-if="tab.type === 'table-props'"
                :tab-uid="tab.uid"
                :connection="connection"
-               :is-selected="selectedTab === tab.uid"
+               :is-selected="selectedTab === tab.uid && isSelected"
                :table="tab.elementName"
                :schema="tab.schema"
             />
@@ -360,13 +360,13 @@
                :tab-uid="tab.uid"
                :tab="tab"
                :connection="connection"
-               :is-selected="selectedTab === tab.uid"
+               :is-selected="selectedTab === tab.uid && isSelected"
                :schema="tab.schema"
             />
             <WorkspaceTabPropsView
                v-else-if="tab.type === 'view-props'"
                :tab-uid="tab.uid"
-               :is-selected="selectedTab === tab.uid"
+               :is-selected="selectedTab === tab.uid && isSelected"
                :connection="connection"
                :view="tab.elementName"
                :schema="tab.schema"
@@ -376,7 +376,7 @@
                :tab-uid="tab.uid"
                :tab="tab"
                :connection="connection"
-               :is-selected="selectedTab === tab.uid"
+               :is-selected="selectedTab === tab.uid && isSelected"
                :trigger="tab.elementName"
                :schema="tab.schema"
             />
@@ -384,7 +384,7 @@
                v-else-if="['temp-trigger-props', 'trigger-props'].includes(tab.type)"
                :tab-uid="tab.uid"
                :connection="connection"
-               :is-selected="selectedTab === tab.uid"
+               :is-selected="selectedTab === tab.uid && isSelected"
                :trigger="tab.elementName"
                :schema="tab.schema"
             />
@@ -393,7 +393,7 @@
                :tab-uid="tab.uid"
                :tab="tab"
                :connection="connection"
-               :is-selected="selectedTab === tab.uid"
+               :is-selected="selectedTab === tab.uid && isSelected"
                :trigger="tab.elementName"
                :schema="tab.schema"
             />
@@ -401,7 +401,7 @@
                v-else-if="['temp-trigger-function-props', 'trigger-function-props'].includes(tab.type)"
                :tab-uid="tab.uid"
                :connection="connection"
-               :is-selected="selectedTab === tab.uid"
+               :is-selected="selectedTab === tab.uid && isSelected"
                :function="tab.elementName"
                :schema="tab.schema"
             />
@@ -410,7 +410,7 @@
                :tab-uid="tab.uid"
                :tab="tab"
                :connection="connection"
-               :is-selected="selectedTab === tab.uid"
+               :is-selected="selectedTab === tab.uid && isSelected"
                :trigger="tab.elementName"
                :schema="tab.schema"
             />
@@ -418,7 +418,7 @@
                v-else-if="['temp-routine-props', 'routine-props'].includes(tab.type)"
                :tab-uid="tab.uid"
                :connection="connection"
-               :is-selected="selectedTab === tab.uid"
+               :is-selected="selectedTab === tab.uid && isSelected"
                :routine="tab.elementName"
                :schema="tab.schema"
             />
@@ -427,7 +427,7 @@
                :tab-uid="tab.uid"
                :tab="tab"
                :connection="connection"
-               :is-selected="selectedTab === tab.uid"
+               :is-selected="selectedTab === tab.uid && isSelected"
                :trigger="tab.elementName"
                :schema="tab.schema"
             />
@@ -435,7 +435,7 @@
                v-else-if="['temp-function-props', 'function-props'].includes(tab.type)"
                :tab-uid="tab.uid"
                :connection="connection"
-               :is-selected="selectedTab === tab.uid"
+               :is-selected="selectedTab === tab.uid && isSelected"
                :function="tab.elementName"
                :schema="tab.schema"
             />
@@ -444,7 +444,7 @@
                :tab-uid="tab.uid"
                :tab="tab"
                :connection="connection"
-               :is-selected="selectedTab === tab.uid"
+               :is-selected="selectedTab === tab.uid && isSelected"
                :trigger="tab.elementName"
                :schema="tab.schema"
             />
@@ -452,7 +452,7 @@
                v-else-if="['temp-scheduler-props', 'scheduler-props'].includes(tab.type)"
                :tab-uid="tab.uid"
                :connection="connection"
-               :is-selected="selectedTab === tab.uid"
+               :is-selected="selectedTab === tab.uid && isSelected"
                :scheduler="tab.elementName"
                :schema="tab.schema"
             />
@@ -485,6 +485,7 @@ import Connection from '@/ipc-api/Connection';
 import { useWorkspacesStore, WorkspaceTab } from '@/stores/workspaces';
 import { useConsoleStore } from '@/stores/console';
 import { ConnectionParams } from 'common/interfaces/antares';
+import { useFilters } from '@/composables/useFilters';
 
 import WorkspaceEmptyState from '@/components/WorkspaceEmptyState.vue';
 import WorkspaceExploreBar from '@/components/WorkspaceExploreBar.vue';
@@ -510,7 +511,11 @@ import WorkspaceTabPropsFunction from '@/components/WorkspaceTabPropsFunction.vu
 import WorkspaceTabPropsScheduler from '@/components/WorkspaceTabPropsScheduler.vue';
 import ModalProcessesList from '@/components/ModalProcessesList.vue';
 import ModalDiscardChanges from '@/components/ModalDiscardChanges.vue';
+import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n();
+
+const { cutText } = useFilters();
 const workspacesStore = useWorkspacesStore();
 
 const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
@@ -633,6 +638,8 @@ const hideProcessesModal = () => {
 const addWheelEvent = () => {
    if (!hasWheelEvent.value) {
       tabWrap.value.$el.addEventListener('wheel', (e: WheelEvent) => {
+         if (e.deltaX !== 0) return; // If trackpad horizontal scroll
+
          if (e.deltaY > 0) tabWrap.value.$el.scrollLeft += 50;
          else tabWrap.value.$el.scrollLeft -= 50;
       });
@@ -640,14 +647,6 @@ const addWheelEvent = () => {
    }
 };
 
-const cutText = (string: string) => {
-   const limit = 20;
-   const escapedString = string.replace(/\s{2,}/g, ' ');
-   if (escapedString.length > limit)
-      return `${escapedString.substr(0, limit)}...`;
-   return escapedString;
-};
-
 (async () => {
    await addWorkspace(props.connection.uid);
    const isInitiated = await Connection.checkConnection(props.connection.uid);

src/renderer/components/WorkspaceAddConnectionPanel.vue

@@ -553,14 +553,14 @@ setDefaults();
 
 setTimeout(() => {
    if (firstInput.value) firstInput.value.focus();
-}, 20);
+}, 200);
 </script>
 
 <style lang="scss" scoped>
 .connection-panel {
   margin-left: auto;
   margin-right: auto;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
   margin-top: 1.5rem;
 
   .panel {

src/renderer/components/WorkspaceEditConnectionPanel.vue

@@ -551,7 +551,7 @@ localConnection.value = JSON.parse(JSON.stringify(props.connection));
 .connection-panel {
   margin-left: auto;
   margin-right: auto;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
   margin-top: 1.5rem;
 
   .panel {

src/renderer/components/WorkspaceExploreBar.vue

@@ -15,18 +15,18 @@
                <i
                   v-if="customizations.schemas"
                   class="mdi mdi-18px mdi-database-plus c-hand mr-2"
-                  :title="$t('message.createNewSchema')"
+                  :title="t('message.createNewSchema')"
                   @click="showNewDBModal"
                />
                <i
                   class="mdi mdi-18px mdi-refresh c-hand mr-2"
                   :class="{'rotate':isRefreshing}"
-                  :title="$t('word.refresh')"
+                  :title="t('word.refresh')"
                   @click="refresh"
                />
                <i
                   class="mdi mdi-18px mdi-power c-hand"
-                  :title="$t('word.disconnect')"
+                  :title="t('word.disconnect')"
                   @click="disconnectWorkspace(connection.uid)"
                />
             </span>
@@ -38,7 +38,7 @@
                   v-model="searchTerm"
                   class="form-input input-sm"
                   type="text"
-                  :placeholder="$t('message.searchForElements')"
+                  :placeholder="t('message.searchForElements')"
                >
                <i v-if="!searchTerm" class="form-icon mdi mdi-magnify mdi-18px" />
                <i
@@ -133,6 +133,9 @@ import TableContext from '@/components/WorkspaceExploreBarTableContext.vue';
 import MiscContext from '@/components/WorkspaceExploreBarMiscContext.vue';
 import MiscFolderContext from '@/components/WorkspaceExploreBarMiscFolderContext.vue';
 import ModalNewSchema from '@/components/ModalNewSchema.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps({
    connection: Object,

src/renderer/components/WorkspaceExploreBarMiscContext.vue

@@ -8,7 +8,7 @@
          class="context-element"
          @click="runElementCheck"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-play text-light pr-1" /> {{ $t('word.run') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-play text-light pr-1" /> {{ t('word.run') }}</span>
       </div>
       <div
          v-if="selectedMisc.type === 'trigger' && customizations.triggerEnableDisable"
@@ -16,10 +16,10 @@
          @click="toggleTrigger"
       >
          <span v-if="!selectedMisc.enabled" class="d-flex">
-            <i class="mdi mdi-18px mdi-play text-light pr-1" /> {{ $t('word.enable') }}
+            <i class="mdi mdi-18px mdi-play text-light pr-1" /> {{ t('word.enable') }}
          </span>
          <span v-else class="d-flex">
-            <i class="mdi mdi-18px mdi-pause text-light pr-1" /> {{ $t('word.disable') }}
+            <i class="mdi mdi-18px mdi-pause text-light pr-1" /> {{ t('word.disable') }}
          </span>
       </div>
       <div
@@ -28,14 +28,14 @@
          @click="toggleScheduler"
       >
          <span v-if="!selectedMisc.enabled" class="d-flex">
-            <i class="mdi mdi-18px mdi-play text-light pr-1" /> {{ $t('word.enable') }}
+            <i class="mdi mdi-18px mdi-play text-light pr-1" /> {{ t('word.enable') }}
          </span>
          <span v-else class="d-flex">
-            <i class="mdi mdi-18px mdi-pause text-light pr-1" /> {{ $t('word.disable') }}
+            <i class="mdi mdi-18px mdi-pause text-light pr-1" /> {{ t('word.disable') }}
          </span>
       </div>
       <div class="context-element" @click="showDeleteModal">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-table-remove text-light pr-1" /> {{ $t('word.delete') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-table-remove text-light pr-1" /> {{ t('word.delete') }}</span>
       </div>
       <ConfirmModal
          v-if="isDeleteModal"
@@ -50,7 +50,7 @@
          </template>
          <template #body>
             <div class="mb-2">
-               {{ $t('message.deleteCorfirm') }} "<b>{{ selectedMisc.name }}</b>"?
+               {{ t('message.deleteCorfirm') }} "<b>{{ selectedMisc.name }}</b>"?
             </div>
          </template>
       </ConfirmModal>
@@ -188,8 +188,6 @@ const deleteMisc = async () => {
             break;
       }
 
-      console.log(res);
-
       const { status, response } = res;
 
       if (status === 'success') {
@@ -219,7 +217,7 @@ const runElementCheck = () => {
 };
 
 const runElement = (params: string[]) => {
-   if (props.selectedMisc.type === 'procedure')
+   if (['procedure', 'routine'].includes(props.selectedMisc.type))
       runRoutine(params);
    else if (props.selectedMisc.type === 'function')
       runFunction(params);

src/renderer/components/WorkspaceExploreBarSchema.vue

@@ -25,7 +25,6 @@
             <ul class="menu menu-nav pt-0">
                <li
                   v-for="table of filteredTables"
-                  :ref="breadcrumbs.schema === database.name && [breadcrumbs.table, breadcrumbs.view].includes(table.name) ? 'explorebarSelected' : ''"
                   :key="table.name"
                   class="menu-item"
                   :class="{'selected': breadcrumbs.schema === database.name && [breadcrumbs.table, breadcrumbs.view].includes(table.name)}"
@@ -69,7 +68,6 @@
                         <li
                            v-for="trigger of filteredTriggers"
                            :key="trigger.name"
-                           :ref="breadcrumbs.schema === database.name && breadcrumbs.trigger === trigger.name ? 'explorebarSelected' : ''"
                            class="menu-item"
                            :class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.trigger === trigger.name}"
                            @mousedown.left="selectMisc({schema: database.name, misc: trigger, type: 'trigger'})"
@@ -111,7 +109,6 @@
                         <li
                            v-for="(routine, i) of filteredProcedures"
                            :key="`${routine.name}-${i}`"
-                           :ref="breadcrumbs.schema === database.name && breadcrumbs.routine === routine.name ? 'explorebarSelected' : ''"
                            class="menu-item"
                            :class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.routine === routine.name}"
                            @mousedown.left="selectMisc({schema: database.name, misc: routine, type: 'routine'})"
@@ -145,7 +142,6 @@
                         <li
                            v-for="(func, i) of filteredTriggerFunctions"
                            :key="`${func.name}-${i}`"
-                           :ref="breadcrumbs.schema === database.name && breadcrumbs.triggerFunction === func.name ? 'explorebarSelected' : ''"
                            class="menu-item"
                            :class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.triggerFunction === func.name}"
                            @mousedown.left="selectMisc({schema: database.name, misc: func, type: 'triggerFunction'})"
@@ -179,7 +175,6 @@
                         <li
                            v-for="(func, i) of filteredFunctions"
                            :key="`${func.name}-${i}`"
-                           :ref="breadcrumbs.schema === database.name && breadcrumbs.function === func.name ? 'explorebarSelected' : ''"
                            class="menu-item"
                            :class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.function === func.name}"
                            @mousedown.left="selectMisc({schema: database.name, misc: func, type: 'function'})"
@@ -213,7 +208,6 @@
                         <li
                            v-for="scheduler of filteredSchedulers"
                            :key="scheduler.name"
-                           :ref="breadcrumbs.schema === database.name && breadcrumbs.scheduler === scheduler.name ? 'explorebarSelected' : ''"
                            class="menu-item"
                            :class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.scheduler === scheduler.name}"
                            @mousedown.left="selectMisc({schema: database.name, misc: scheduler, type: 'scheduler'})"
@@ -281,7 +275,6 @@ const {
 } = workspacesStore;
 
 const schemaAccordion: Ref<HTMLDetailsElement> = ref(null);
-const explorebarSelected: Ref<HTMLElement[]> = ref(null);
 const isLoading = ref(false);
 
 const searchTerm = computed(() => {
@@ -340,7 +333,8 @@ const maxSize = computed(() => {
 watch(breadcrumbs, (newVal, oldVal) => {
    if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
       setTimeout(() => {
-         const element = explorebarSelected.value ? explorebarSelected.value[0] : null;
+         const element = document.querySelector<HTMLElement>('.workspace-explorebar-database .selected');
+
          if (element) {
             const rect = element.getBoundingClientRect();
             const elemTop = rect.top;
@@ -353,7 +347,7 @@ watch(breadcrumbs, (newVal, oldVal) => {
                element.removeAttribute('tabindex');
             }
          }
-      }, 50);
+      }, 100);
    }
 });
 

src/renderer/components/WorkspaceExploreBarSchemaContext.vue

@@ -4,7 +4,7 @@
       @close-context="closeContext"
    >
       <div class="context-element">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-plus text-light pr-1" /> {{ $t('word.add') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-plus text-light pr-1" /> {{ t('word.add') }}</span>
          <i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
          <div class="context-submenu">
             <div
@@ -12,49 +12,49 @@
                class="context-element"
                @click="openCreateTableTab"
             >
-               <span class="d-flex"><i class="mdi mdi-18px mdi-table text-light pr-1" /> {{ $t('word.table') }}</span>
+               <span class="d-flex"><i class="mdi mdi-18px mdi-table text-light pr-1" /> {{ t('word.table') }}</span>
             </div>
             <div
                v-if="workspace.customizations.viewAdd"
                class="context-element"
                @click="openCreateViewTab"
             >
-               <span class="d-flex"><i class="mdi mdi-18px mdi-table-eye text-light pr-1" /> {{ $t('word.view') }}</span>
+               <span class="d-flex"><i class="mdi mdi-18px mdi-table-eye text-light pr-1" /> {{ t('word.view') }}</span>
             </div>
             <div
                v-if="workspace.customizations.triggerAdd"
                class="context-element"
                @click="openCreateTriggerTab"
             >
-               <span class="d-flex"><i class="mdi mdi-18px mdi-table-cog text-light pr-1" /> {{ $tc('word.trigger', 1) }}</span>
+               <span class="d-flex"><i class="mdi mdi-18px mdi-table-cog text-light pr-1" /> {{ t('word.trigger', 1) }}</span>
             </div>
             <div
                v-if="workspace.customizations.routineAdd"
                class="context-element"
                @click="openCreateRoutineTab"
             >
-               <span class="d-flex"><i class="mdi mdi-18px mdi-sync-circle pr-1" /> {{ $tc('word.storedRoutine', 1) }}</span>
+               <span class="d-flex"><i class="mdi mdi-18px mdi-sync-circle pr-1" /> {{ t('word.storedRoutine', 1) }}</span>
             </div>
             <div
                v-if="workspace.customizations.functionAdd"
                class="context-element"
                @click="openCreateFunctionTab"
             >
-               <span class="d-flex"><i class="mdi mdi-18px mdi-arrow-right-bold-box pr-1" /> {{ $tc('word.function', 1) }}</span>
+               <span class="d-flex"><i class="mdi mdi-18px mdi-arrow-right-bold-box pr-1" /> {{ t('word.function', 1) }}</span>
             </div>
             <div
                v-if="workspace.customizations.triggerFunctionAdd"
                class="context-element"
                @click="openCreateTriggerFunctionTab"
             >
-               <span class="d-flex"><i class="mdi mdi-18px mdi-cog-clockwise pr-1" /> {{ $tc('word.triggerFunction', 1) }}</span>
+               <span class="d-flex"><i class="mdi mdi-18px mdi-cog-clockwise pr-1" /> {{ t('word.triggerFunction', 1) }}</span>
             </div>
             <div
                v-if="workspace.customizations.schedulerAdd"
                class="context-element"
                @click="openCreateSchedulerTab"
             >
-               <span class="d-flex"><i class="mdi mdi-18px mdi-calendar-clock text-light pr-1" /> {{ $tc('word.scheduler', 1) }}</span>
+               <span class="d-flex"><i class="mdi mdi-18px mdi-calendar-clock text-light pr-1" /> {{ t('word.scheduler', 1) }}</span>
             </div>
          </div>
       </div>
@@ -63,28 +63,28 @@
          class="context-element"
          @click="showExportSchemaModal"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-database-arrow-down text-light pr-1" /> {{ $t('word.export') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-database-arrow-down text-light pr-1" /> {{ t('word.export') }}</span>
       </div>
       <div
          v-if="workspace.customizations.schemaImport"
          class="context-element"
          @click="initImport"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-database-arrow-up text-light pr-1" /> {{ $t('word.import') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-database-arrow-up text-light pr-1" /> {{ t('word.import') }}</span>
       </div>
       <div
          v-if="workspace.customizations.schemaEdit"
          class="context-element"
          @click="showEditModal"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-database-edit text-light pr-1" /> {{ $t('word.edit') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-database-edit text-light pr-1" /> {{ t('word.edit') }}</span>
       </div>
       <div
          v-if="workspace.customizations.schemaDrop"
          class="context-element"
          @click="showDeleteModal"
       >
-         <span class="d-flex"><i class="mdi mdi-18px mdi-database-remove text-light pr-1" /> {{ $t('word.delete') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-database-remove text-light pr-1" /> {{ t('word.delete') }}</span>
       </div>
 
       <ConfirmModal
@@ -95,12 +95,12 @@
          <template #header>
             <div class="d-flex">
                <i class="mdi mdi-24px mdi-database-remove mr-1" />
-               <span class="cut-text">{{ $t('message.deleteSchema') }}</span>
+               <span class="cut-text">{{ t('message.deleteSchema') }}</span>
             </div>
          </template>
          <template #body>
             <div class="mb-2">
-               {{ $t('message.deleteCorfirm') }} "<b>{{ selectedSchema }}</b>"?
+               {{ t('message.deleteCorfirm') }} "<b>{{ selectedSchema }}</b>"?
             </div>
          </template>
       </ConfirmModal>
@@ -135,6 +135,9 @@ import ModalExportSchema from '@/components/ModalExportSchema.vue';
 import ModalImportSchema from '@/components/ModalImportSchema.vue';
 import Schema from '@/ipc-api/Schema';
 import Application from '@/ipc-api/Application';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps({
    contextEvent: MouseEvent,

src/renderer/components/WorkspaceQueryConsole.vue

@@ -35,7 +35,7 @@
       @close-context="isContext = false"
    >
       <div class="context-element" @click="copyQuery">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-content-copy text-light pr-1" /> {{ $t('word.copy') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-content-copy text-light pr-1" /> {{ t('word.copy') }}</span>
       </div>
    </BaseContextMenu>
 </template>
@@ -119,61 +119,62 @@ onMounted(() => {
 });
 </script>
 <style lang="scss" scoped>
-.query-console-wrapper{
-   width: 100%;
-   z-index: 9;
-   margin-top: auto;
-   position: absolute;
-   bottom: 0;
+.query-console-wrapper {
+  width: 100%;
+  z-index: 9;
+  margin-top: auto;
+  position: absolute;
+  bottom: 0;
 
-   .query-console-resizer{
-      height: 4px;
-      top: -1px;
-      width: 100%;
-      cursor: ns-resize;
-      position: absolute;
-      z-index: 99;
-      transition: background 0.2s;
+  .query-console-resizer {
+    height: 4px;
+    top: -1px;
+    width: 100%;
+    cursor: ns-resize;
+    position: absolute;
+    z-index: 99;
+    transition: background 0.2s;
 
-      &:hover {
-         background: rgba($primary-color, 50%);
+    &:hover {
+      background: rgba($primary-color, 50%);
+    }
+  }
+
+  .query-console {
+    padding: 0;
+    padding-bottom: $footer-height;
+
+    .query-console-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 4px;
+      font-weight: 700;
+    }
+
+    .query-console-body {
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+      max-height: 100%;
+      padding: 0 6px 3px;
+
+      .query-console-log {
+        padding: 1px 3px;
+        margin: 1px 0;
+        border-radius: $border-radius;
+
+        .query-console-log-sql {
+          font-size: 95%;
+          opacity: 0.8;
+          font-weight: 700;
+
+          &:hover {
+            user-select: text;
+          }
+        }
       }
-   }
-
-   .query-console {
-      padding: 0;
-      padding-bottom: $footer-height;
-      .query-console-header {
-         display: flex;
-         justify-content: space-between;
-         align-items: center;
-         padding: 4px;
-         font-weight: 700;
-      }
-
-      .query-console-body {
-         overflow: auto;
-         display: flex;
-         flex-direction: column;
-         max-height: 100%;
-         padding: 0 6px 3px;
-
-         .query-console-log {
-            padding: 1px 3px;
-            margin: 1px 0;
-            border-radius: $border-radius;
-
-            .query-console-log-sql {
-               font-size: 95%;
-               opacity: .8;
-               font-weight: 700;
-               &:hover {
-                  user-select: text;
-               }
-            }
-         }
-      }
-   }
-
+    }
+  }
 }
 </style>

src/renderer/components/WorkspaceTabNewFunction.vue

@@ -7,7 +7,6 @@
                   class="btn btn-primary btn-sm"
                   :disabled="!isChanged"
                   :class="{'loading':isSaving}"
-                  title="CTRL+S"
                   @click="saveChanges"
                >
                   <i class="mdi mdi-24px mdi-content-save mr-1" />
@@ -189,6 +188,7 @@ import WorkspaceTabPropsFunctionParamsModal from '@/components/WorkspaceTabProps
 import BaseSelect from '@/components/BaseSelect.vue';
 import { FunctionInfos, FunctionParam } from 'common/interfaces/antares';
 import { useI18n } from 'vue-i18n';
+import { ipcRenderer } from 'electron';
 
 const { t } = useI18n();
 
@@ -300,14 +300,10 @@ const hideParamsModal = () => {
    isParamsModal.value = false;
 };
 
-const onKey = (e: KeyboardEvent) => {
-   if (props.isSelected) {
-      e.stopPropagation();
-      if (e.ctrlKey && e.key === 's') { // CTRL + S
-         if (isChanged.value)
-            saveChanges();
-      }
-   }
+const saveContentListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen && isChanged.value)
+      saveChanges();
 };
 
 watch(() => props.isSelected, (val) => {
@@ -341,19 +337,19 @@ setTimeout(() => {
    resizeQueryEditor();
 }, 50);
 
-window.addEventListener('keydown', onKey);
-
 onMounted(() => {
    if (props.isSelected)
       changeBreadcrumbs({ schema: props.schema });
 
+   ipcRenderer.on('save-content', saveContentListener);
+
    setTimeout(() => {
       firstInput.value.focus();
    }, 100);
 });
 
 onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
+   ipcRenderer.removeListener('save-content', saveContentListener);
 });
 
 onUnmounted(() => {

src/renderer/components/WorkspaceTabNewRoutine.vue

@@ -7,31 +7,30 @@
                   class="btn btn-primary btn-sm"
                   :disabled="!isChanged"
                   :class="{'loading':isSaving}"
-                  title="CTRL+S"
                   @click="saveChanges"
                >
                   <i class="mdi mdi-24px mdi-content-save mr-1" />
-                  <span>{{ $t('word.save') }}</span>
+                  <span>{{ t('word.save') }}</span>
                </button>
                <button
                   :disabled="!isChanged"
                   class="btn btn-link btn-sm mr-0"
-                  :title="$t('message.clearChanges')"
+                  :title="t('message.clearChanges')"
                   @click="clearChanges"
                >
                   <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
-                  <span>{{ $t('word.clear') }}</span>
+                  <span>{{ t('word.clear') }}</span>
                </button>
 
                <div class="divider-vert py-3" />
 
                <button class="btn btn-dark btn-sm" @click="showParamsModal">
                   <i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
-                  <span>{{ $t('word.parameters') }}</span>
+                  <span>{{ t('word.parameters') }}</span>
                </button>
             </div>
             <div class="workspace-query-info">
-               <div class="d-flex" :title="$t('word.schema')">
+               <div class="d-flex" :title="t('word.schema')">
                   <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
                </div>
             </div>
@@ -42,7 +41,7 @@
             <div class="column col-auto">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('word.name') }}
+                     {{ t('word.name') }}
                   </label>
                   <input
                      ref="firstInput"
@@ -55,7 +54,7 @@
             <div v-if="customizations.languages" class="column col-auto">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('word.language') }}
+                     {{ t('word.language') }}
                   </label>
                   <BaseSelect
                      v-model="localRoutine.language"
@@ -67,11 +66,11 @@
             <div v-if="customizations.definer" class="column col-auto">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('word.definer') }}
+                     {{ t('word.definer') }}
                   </label>
                   <BaseSelect
                      v-model="localRoutine.definer"
-                     :options="[{value: '', name:$t('message.currentUser')}, ...workspace.users]"
+                     :options="[{value: '', name:t('message.currentUser')}, ...workspace.users]"
                      :option-label="(user: any) => user.value === '' ? user.name : `${user.name}@${user.host}`"
                      :option-track-by="(user: any) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
                      class="form-select"
@@ -81,7 +80,7 @@
             <div v-if="customizations.comment" class="column">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('word.comment') }}
+                     {{ t('word.comment') }}
                   </label>
                   <input
                      v-model="localRoutine.comment"
@@ -93,7 +92,7 @@
             <div class="column col-auto">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('message.sqlSecurity') }}
+                     {{ t('message.sqlSecurity') }}
                   </label>
                   <BaseSelect
                      v-model="localRoutine.security"
@@ -105,7 +104,7 @@
             <div v-if="customizations.procedureDataAccess" class="column col-auto">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('message.dataAccess') }}
+                     {{ t('message.dataAccess') }}
                   </label>
                   <BaseSelect
                      v-model="localRoutine.dataAccess"
@@ -118,7 +117,7 @@
                <div class="form-group">
                   <label class="form-label d-invisible">.</label>
                   <label class="form-checkbox form-inline">
-                     <input v-model="localRoutine.deterministic" type="checkbox"><i class="form-icon" /> {{ $t('word.deterministic') }}
+                     <input v-model="localRoutine.deterministic" type="checkbox"><i class="form-icon" /> {{ t('word.deterministic') }}
                   </label>
                </div>
             </div>
@@ -126,7 +125,7 @@
       </div>
       <div class="workspace-query-results column col-12 mt-2 p-relative">
          <BaseLoader v-if="isLoading" />
-         <label class="form-label ml-2">{{ $t('message.routineBody') }}</label>
+         <label class="form-label ml-2">{{ t('message.routineBody') }}</label>
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
@@ -160,6 +159,10 @@ import BaseLoader from '@/components/BaseLoader.vue';
 import WorkspaceTabPropsRoutineParamsModal from '@/components/WorkspaceTabPropsRoutineParamsModal.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import { FunctionParam } from 'common/interfaces/antares';
+import { useI18n } from 'vue-i18n';
+import { ipcRenderer } from 'electron';
+
+const { t } = useI18n();
 
 const props = defineProps({
    tabUid: String,
@@ -269,14 +272,10 @@ const hideParamsModal = () => {
    isParamsModal.value = false;
 };
 
-const onKey = (e: KeyboardEvent) => {
-   if (props.isSelected) {
-      e.stopPropagation();
-      if (e.ctrlKey && e.key === 's') { // CTRL + S
-         if (isChanged.value)
-            saveChanges();
-      }
-   }
+const saveContentListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen && isChanged.value)
+      saveChanges();
 };
 
 watch(() => props.isSelected, (val) => {
@@ -310,19 +309,19 @@ setTimeout(() => {
    resizeQueryEditor();
 }, 50);
 
-window.addEventListener('keydown', onKey);
-
 onMounted(() => {
    if (props.isSelected)
       changeBreadcrumbs({ schema: props.schema });
 
+   ipcRenderer.on('save-content', saveContentListener);
+
    setTimeout(() => {
       firstInput.value.focus();
    }, 100);
 });
 
 onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
+   ipcRenderer.removeListener('save-content', saveContentListener);
 });
 
 onUnmounted(() => {

src/renderer/components/WorkspaceTabNewScheduler.vue

@@ -7,7 +7,6 @@
                   class="btn btn-primary btn-sm"
                   :disabled="!isChanged"
                   :class="{'loading':isSaving}"
-                  title="CTRL+S"
                   @click="saveChanges"
                >
                   <i class="mdi mdi-24px mdi-content-save mr-1" />
@@ -138,6 +137,7 @@ import QueryEditor from '@/components/QueryEditor.vue';
 import WorkspaceTabPropsSchedulerTimingModal from '@/components/WorkspaceTabPropsSchedulerTimingModal.vue';
 import Schedulers from '@/ipc-api/Schedulers';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { ipcRenderer } from 'electron';
 
 const { t } = useI18n();
 
@@ -259,14 +259,10 @@ const timingUpdate = (options: EventInfos) => {
    localScheduler.value = options;
 };
 
-const onKey = (e: KeyboardEvent) => {
-   if (props.isSelected) {
-      e.stopPropagation();
-      if (e.ctrlKey && e.key === 's') { // CTRL + S
-         if (isChanged.value)
-            saveChanges();
-      }
-   }
+const saveContentListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen && isChanged.value)
+      saveChanges();
 };
 
 watch(() => props.isSelected, (val) => {
@@ -298,19 +294,19 @@ setTimeout(() => {
    resizeQueryEditor();
 }, 50);
 
-window.addEventListener('keydown', onKey);
-
 onMounted(() => {
    if (props.isSelected)
       changeBreadcrumbs({ schema: props.schema });
 
+   ipcRenderer.on('save-content', saveContentListener);
+
    setTimeout(() => {
       firstInput.value.focus();
    }, 100);
 });
 
 onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
+   ipcRenderer.removeListener('save-content', saveContentListener);
 });
 
 onUnmounted(() => {

src/renderer/components/WorkspaceTabNewTable.vue

@@ -7,7 +7,6 @@
                   class="btn btn-primary btn-sm"
                   :disabled="!isChanged || !isValid"
                   :class="{'loading':isSaving}"
-                  title="CTRL+S"
                   @click="saveChanges"
                >
                   <i class="mdi mdi-24px mdi-content-save mr-1" />
@@ -175,6 +174,7 @@ import WorkspaceTabPropsTableForeignModal from '@/components/WorkspaceTabPropsTa
 import WorkspaceTabNewTableEmptyState from '@/components/WorkspaceTabNewTableEmptyState.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import { ConnectionParams, TableField, TableForeign, TableIndex, TableOptions } from 'common/interfaces/antares';
+import { ipcRenderer } from 'electron';
 
 const { t } = useI18n();
 
@@ -420,14 +420,10 @@ const foreignsUpdate = (foreigns: TableForeign[]) => {
    localKeyUsage.value = foreigns;
 };
 
-const onKey = (e: KeyboardEvent) => {
-   if (props.isSelected) {
-      e.stopPropagation();
-      if (e.ctrlKey && e.key === 's') { // CTRL + S
-         if (isChanged.value)
-            saveChanges();
-      }
-   }
+const saveContentListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen && isChanged.value)
+      saveChanges();
 };
 
 watch(() => props.isSelected, (val) => {
@@ -447,18 +443,19 @@ tableOptions.value = {
 };
 
 localOptions.value = JSON.parse(JSON.stringify(tableOptions.value));
-window.addEventListener('keydown', onKey);
 
 onMounted(() => {
    if (props.isSelected)
       changeBreadcrumbs({ schema: props.schema });
 
+   ipcRenderer.on('save-content', saveContentListener);
+
    setTimeout(() => {
       firstInput.value.focus();
    }, 100);
 });
 
 onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
+   ipcRenderer.removeListener('save-content', saveContentListener);
 });
 </script>

src/renderer/components/WorkspaceTabNewTrigger.vue

@@ -7,7 +7,6 @@
                   class="btn btn-primary btn-sm"
                   :disabled="!isChanged"
                   :class="{'loading':isSaving}"
-                  title="CTRL+S"
                   @click="saveChanges"
                >
                   <i class="mdi mdi-24px mdi-content-save mr-1" />
@@ -126,6 +125,7 @@ import QueryEditor from '@/components/QueryEditor.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import Triggers from '@/ipc-api/Triggers';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { ipcRenderer } from 'electron';
 
 const { t } = useI18n();
 
@@ -268,14 +268,10 @@ const resizeQueryEditor = () => {
    }
 };
 
-const onKey = (e: KeyboardEvent) => {
-   if (props.isSelected) {
-      e.stopPropagation();
-      if (e.ctrlKey && e.key === 's') { // CTRL + S
-         if (isChanged.value)
-            saveChanges();
-      }
-   }
+const saveContentListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen && isChanged.value)
+      saveChanges();
 };
 
 watch(() => props.isSelected, (val) => {
@@ -305,12 +301,12 @@ setTimeout(() => {
    resizeQueryEditor();
 }, 50);
 
-window.addEventListener('keydown', onKey);
-
 onMounted(() => {
    if (props.isSelected)
       changeBreadcrumbs({ schema: props.schema });
 
+   ipcRenderer.on('save-content', saveContentListener);
+
    setTimeout(() => {
       firstInput.value.focus();
    }, 100);
@@ -323,6 +319,6 @@ onUnmounted(() => {
 });
 
 onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
+   ipcRenderer.removeListener('save-content', saveContentListener);
 });
 </script>

src/renderer/components/WorkspaceTabNewTriggerFunction.vue

@@ -7,7 +7,6 @@
                   class="btn btn-primary btn-sm"
                   :disabled="!isChanged"
                   :class="{'loading':isSaving}"
-                  title="CTRL+S"
                   @click="saveChanges"
                >
                   <i class="mdi mdi-24px mdi-content-save mr-1" />
@@ -105,6 +104,7 @@ import BaseLoader from '@/components/BaseLoader.vue';
 import QueryEditor from '@/components/QueryEditor.vue';
 import Functions from '@/ipc-api/Functions';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { ipcRenderer } from 'electron';
 
 const { t } = useI18n();
 
@@ -203,14 +203,10 @@ const resizeQueryEditor = () => {
    }
 };
 
-const onKey = (e: KeyboardEvent) => {
-   if (props.isSelected) {
-      e.stopPropagation();
-      if (e.ctrlKey && e.key === 's') { // CTRL + S
-         if (isChanged.value)
-            saveChanges();
-      }
-   }
+const saveContentListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen && isChanged.value)
+      saveChanges();
 };
 
 originalFunction.value = {
@@ -237,12 +233,12 @@ setTimeout(() => {
    resizeQueryEditor();
 }, 50);
 
-window.addEventListener('keydown', onKey);
-
 onMounted(() => {
    if (props.isSelected)
       changeBreadcrumbs({ schema: props.schema });
 
+   ipcRenderer.on('save-content', saveContentListener);
+
    setTimeout(() => {
       firstInput.value.focus();
    }, 100);
@@ -255,6 +251,6 @@ onUnmounted(() => {
 });
 
 onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
+   ipcRenderer.removeListener('save-content', saveContentListener);
 });
 </script>

src/renderer/components/WorkspaceTabNewView.vue

@@ -7,7 +7,6 @@
                   class="btn btn-primary btn-sm"
                   :disabled="!isChanged"
                   :class="{'loading':isSaving}"
-                  title="CTRL+S"
                   @click="saveChanges"
                >
                   <i class="mdi mdi-24px mdi-content-save mr-1" />
@@ -115,6 +114,7 @@ import BaseLoader from '@/components/BaseLoader.vue';
 import QueryEditor from '@/components/QueryEditor.vue';
 import Views from '@/ipc-api/Views';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { ipcRenderer } from 'electron';
 
 const { t } = useI18n();
 
@@ -216,14 +216,10 @@ const resizeQueryEditor = () => {
    }
 };
 
-const onKey = (e: KeyboardEvent) => {
-   if (props.isSelected) {
-      e.stopPropagation();
-      if (e.ctrlKey && e.key === 's') { // CTRL + S
-         if (isChanged.value)
-            saveChanges();
-      }
-   }
+const saveContentListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen && isChanged.value)
+      saveChanges();
 };
 
 watch(() => props.isSelected, (val) => {
@@ -259,12 +255,12 @@ setTimeout(() => {
    resizeQueryEditor();
 }, 50);
 
-window.addEventListener('keydown', onKey);
-
 onMounted(() => {
    if (props.isSelected)
       changeBreadcrumbs({ schema: props.schema });
 
+   ipcRenderer.on('save-content', saveContentListener);
+
    setTimeout(() => {
       firstInput.value.focus();
    }, 100);
@@ -277,7 +273,7 @@ onUnmounted(() => {
 });
 
 onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
+   ipcRenderer.removeListener('save-content', saveContentListener);
 });
 
 </script>

src/renderer/components/WorkspaceTabPropsFunction.vue

@@ -7,7 +7,6 @@
                   class="btn btn-primary btn-sm"
                   :disabled="!isChanged"
                   :class="{'loading':isSaving}"
-                  title="CTRL+S"
                   @click="saveChanges"
                >
                   <i class="mdi mdi-24px mdi-content-save mr-1" />
@@ -207,6 +206,7 @@ import Functions from '@/ipc-api/Functions';
 import BaseSelect from '@/components/BaseSelect.vue';
 import { useI18n } from 'vue-i18n';
 import { AlterFunctionParams, FunctionInfos, FunctionParam } from 'common/interfaces/antares';
+import { ipcRenderer } from 'electron';
 
 const { t } = useI18n();
 
@@ -407,14 +407,10 @@ const hideAskParamsModal = () => {
    isAskingParameters.value = false;
 };
 
-const onKey = (e: KeyboardEvent) => {
-   if (props.isSelected) {
-      e.stopPropagation();
-      if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
-         if (isChanged.value)
-            saveChanges();
-      }
-   }
+const saveContentListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen && isChanged.value)
+      saveChanges();
 };
 
 watch(() => props.schema, async () => {
@@ -457,11 +453,12 @@ watch(consoleHeight, () => {
 (async () => {
    await getFunctionData();
    queryEditor.value.editor.session.setValue(localFunction.value.sql);
-   window.addEventListener('keydown', onKey);
 })();
 
 onMounted(() => {
    window.addEventListener('resize', resizeQueryEditor);
+
+   ipcRenderer.on('save-content', saveContentListener);
 });
 
 onUnmounted(() => {
@@ -469,6 +466,6 @@ onUnmounted(() => {
 });
 
 onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
+   ipcRenderer.removeListener('save-content', saveContentListener);
 });
 </script>

src/renderer/components/WorkspaceTabPropsRoutine.vue

@@ -7,7 +7,6 @@
                   class="btn btn-primary btn-sm"
                   :disabled="!isChanged"
                   :class="{'loading':isSaving}"
-                  title="CTRL+S"
                   @click="saveChanges"
                >
                   <i class="mdi mdi-24px mdi-content-save mr-1" />
@@ -179,6 +178,7 @@ import BaseLoader from '@/components/BaseLoader.vue';
 import WorkspaceTabPropsRoutineParamsModal from '@/components/WorkspaceTabPropsRoutineParamsModal.vue';
 import ModalAskParameters from '@/components/ModalAskParameters.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { ipcRenderer } from 'electron';
 
 const { t } = useI18n();
 
@@ -377,14 +377,10 @@ const hideAskParamsModal = () => {
    isAskingParameters.value = false;
 };
 
-const onKey = (e: KeyboardEvent) => {
-   if (props.isSelected) {
-      e.stopPropagation();
-      if (e.ctrlKey && e.key === 's') { // CTRL + S
-         if (isChanged.value)
-            saveChanges();
-      }
-   }
+const saveContentListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen && isChanged.value)
+      saveChanges();
 };
 
 watch(() => props.schema, async () => {
@@ -427,11 +423,12 @@ watch(consoleHeight, () => {
 (async () => {
    await getRoutineData();
    queryEditor.value.editor.session.setValue(localRoutine.value.sql);
-   window.addEventListener('keydown', onKey);
 })();
 
 onMounted(() => {
    window.addEventListener('resize', resizeQueryEditor);
+
+   ipcRenderer.on('save-content', saveContentListener);
 });
 
 onUnmounted(() => {
@@ -439,7 +436,7 @@ onUnmounted(() => {
 });
 
 onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
+   ipcRenderer.removeListener('save-content', saveContentListener);
 });
 
 </script>

src/renderer/components/WorkspaceTabPropsScheduler.vue

@@ -7,7 +7,6 @@
                   class="btn btn-primary btn-sm"
                   :disabled="!isChanged"
                   :class="{'loading':isSaving}"
-                  title="CTRL+S"
                   @click="saveChanges"
                >
                   <i class="mdi mdi-24px mdi-content-save mr-1" />
@@ -136,6 +135,7 @@ import QueryEditor from '@/components/QueryEditor.vue';
 import WorkspaceTabPropsSchedulerTimingModal from '@/components/WorkspaceTabPropsSchedulerTimingModal.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import Schedulers from '@/ipc-api/Schedulers';
+import { ipcRenderer } from 'electron';
 
 const { t } = useI18n();
 
@@ -295,14 +295,10 @@ const timingUpdate = (options: EventInfos) => {
    localScheduler.value = options;
 };
 
-const onKey = (e: KeyboardEvent) => {
-   if (props.isSelected) {
-      e.stopPropagation();
-      if (e.ctrlKey && e.key === 's') { // CTRL + S
-         if (isChanged.value)
-            saveChanges();
-      }
-   }
+const saveContentListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen && isChanged.value)
+      saveChanges();
 };
 
 watch(() => props.schema, async () => {
@@ -345,11 +341,12 @@ watch(consoleHeight, () => {
 (async () => {
    await getSchedulerData();
    queryEditor.value.editor.session.setValue(localScheduler.value.sql);
-   window.addEventListener('keydown', onKey);
 })();
 
 onMounted(() => {
    window.addEventListener('resize', resizeQueryEditor);
+
+   ipcRenderer.on('save-content', saveContentListener);
 });
 
 onUnmounted(() => {
@@ -357,7 +354,7 @@ onUnmounted(() => {
 });
 
 onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
+   ipcRenderer.removeListener('save-content', saveContentListener);
 });
 
 </script>

src/renderer/components/WorkspaceTabPropsTable.vue

@@ -7,7 +7,6 @@
                   class="btn btn-primary btn-sm"
                   :disabled="!isChanged"
                   :class="{'loading':isSaving}"
-                  title="CTRL+S"
                   @click="saveChanges"
                >
                   <i class="mdi mdi-24px mdi-content-save mr-1" />
@@ -173,7 +172,7 @@
 </template>
 
 <script setup lang="ts">
-import { Component, computed, onBeforeUnmount, Ref, ref, watch } from 'vue';
+import { Component, computed, onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue';
 import { AlterTableParams, TableField, TableForeign, TableIndex, TableInfos, TableOptions } from 'common/interfaces/antares';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
@@ -186,6 +185,7 @@ import BaseSelect from '@/components/BaseSelect.vue';
 import WorkspaceTabPropsTableFields from '@/components/WorkspaceTabPropsTableFields.vue';
 import WorkspaceTabPropsTableIndexesModal from '@/components/WorkspaceTabPropsTableIndexesModal.vue';
 import WorkspaceTabPropsTableForeignModal from '@/components/WorkspaceTabPropsTableForeignModal.vue';
+import { ipcRenderer } from 'electron';
 
 const { t } = useI18n();
 
@@ -646,14 +646,10 @@ const foreignsUpdate = (foreigns: TableForeign[]) => {
    localKeyUsage.value = foreigns;
 };
 
-const onKey = (e: KeyboardEvent) => {
-   if (props.isSelected) {
-      e.stopPropagation();
-      if (e.ctrlKey && e.key === 's') { // CTRL + S
-         if (isChanged.value)
-            saveChanges();
-      }
-   }
+const saveContentListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen && isChanged.value)
+      saveChanges();
 };
 
 watch(() => props.schema, () => {
@@ -684,9 +680,12 @@ watch(isChanged, (val) => {
 });
 
 getFieldsData();
-window.addEventListener('keydown', onKey);
+
+onMounted(() => {
+   ipcRenderer.on('save-content', saveContentListener);
+});
 
 onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
+   ipcRenderer.removeListener('save-content', saveContentListener);
 });
 </script>

src/renderer/components/WorkspaceTabPropsTrigger.vue

@@ -7,7 +7,6 @@
                   class="btn btn-primary btn-sm"
                   :disabled="!isChanged"
                   :class="{'loading':isSaving}"
-                  title="CTRL+S"
                   @click="saveChanges"
                >
                   <i class="mdi mdi-24px mdi-content-save mr-1" />
@@ -126,6 +125,7 @@ import QueryEditor from '@/components/QueryEditor.vue';
 import BaseLoader from '@/components/BaseLoader.vue';
 import Triggers from '@/ipc-api/Triggers';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { ipcRenderer } from 'electron';
 
 type TriggerEventName = 'INSERT' | 'UPDATE' | 'DELETE'
 
@@ -318,14 +318,10 @@ const resizeQueryEditor = () => {
    }
 };
 
-const onKey = (e: KeyboardEvent) => {
-   if (props.isSelected) {
-      e.stopPropagation();
-      if (e.ctrlKey && e.key === 's') { // CTRL + S
-         if (isChanged.value)
-            saveChanges();
-      }
-   }
+const saveContentListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen && isChanged.value)
+      saveChanges();
 };
 
 watch(() => props.schema, async () => {
@@ -359,11 +355,12 @@ watch(consoleHeight, () => {
 (async () => {
    await getTriggerData();
    queryEditor.value.editor.session.setValue(localTrigger.value.sql);
-   window.addEventListener('keydown', onKey);
 })();
 
 onMounted(() => {
    window.addEventListener('resize', resizeQueryEditor);
+
+   ipcRenderer.on('save-content', saveContentListener);
 });
 
 onUnmounted(() => {
@@ -371,6 +368,6 @@ onUnmounted(() => {
 });
 
 onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
+   ipcRenderer.removeListener('save-content', saveContentListener);
 });
 </script>

src/renderer/components/WorkspaceTabPropsTriggerFunction.vue

@@ -7,7 +7,6 @@
                   class="btn btn-primary btn-sm"
                   :disabled="!isChanged"
                   :class="{'loading':isSaving}"
-                  title="CTRL+S"
                   @click="saveChanges"
                >
                   <i class="mdi mdi-24px mdi-content-save mr-1" />
@@ -93,6 +92,7 @@ import QueryEditor from '@/components/QueryEditor.vue';
 import Functions from '@/ipc-api/Functions';
 import BaseSelect from '@/components/BaseSelect.vue';
 import { AlterFunctionParams, TriggerFunctionInfos } from 'common/interfaces/antares';
+import { ipcRenderer } from 'electron';
 
 const { t } = useI18n();
 
@@ -223,14 +223,10 @@ const resizeQueryEditor = () => {
    }
 };
 
-const onKey = (e: KeyboardEvent) => {
-   if (props.isSelected) {
-      e.stopPropagation();
-      if (e.ctrlKey && e.key === 's') { // CTRL + S
-         if (isChanged.value)
-            saveChanges();
-      }
-   }
+const saveContentListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen && isChanged.value)
+      saveChanges();
 };
 
 watch(() => props.schema, async () => {
@@ -264,11 +260,12 @@ watch(isChanged, (val) => {
 (async () => {
    await getFunctionData();
    queryEditor.value.editor.session.setValue(localFunction.value.sql);
-   window.addEventListener('keydown', onKey);
 })();
 
 onMounted(() => {
    window.addEventListener('resize', resizeQueryEditor);
+
+   ipcRenderer.on('save-content', saveContentListener);
 });
 
 onUnmounted(() => {
@@ -276,6 +273,6 @@ onUnmounted(() => {
 });
 
 onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
+   ipcRenderer.removeListener('save-content', saveContentListener);
 });
 </script>

src/renderer/components/WorkspaceTabPropsView.vue

@@ -7,7 +7,6 @@
                   class="btn btn-primary btn-sm"
                   :disabled="!isChanged"
                   :class="{'loading':isSaving}"
-                  title="CTRL+S"
                   @click="saveChanges"
                >
                   <i class="mdi mdi-24px mdi-content-save mr-1" />
@@ -112,6 +111,7 @@ import BaseLoader from '@/components/BaseLoader.vue';
 import QueryEditor from '@/components/QueryEditor.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import Views from '@/ipc-api/Views';
+import { ipcRenderer } from 'electron';
 
 const { t } = useI18n();
 
@@ -245,14 +245,10 @@ const resizeQueryEditor = () => {
    }
 };
 
-const onKey = (e: KeyboardEvent) => {
-   if (props.isSelected) {
-      e.stopPropagation();
-      if (e.ctrlKey && e.key === 's') { // CTRL + S
-         if (isChanged.value)
-            saveChanges();
-      }
-   }
+const saveContentListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen && isChanged.value)
+      saveChanges();
 };
 
 watch(() => props.schema, async () => {
@@ -288,11 +284,12 @@ watch(isChanged, (val) => {
 (async () => {
    await getViewData();
    queryEditor.value.editor.session.setValue(localView.value.sql);
-   window.addEventListener('keydown', onKey);
 })();
 
 onMounted(() => {
    window.addEventListener('resize', resizeQueryEditor);
+
+   ipcRenderer.on('save-content', saveContentListener);
 });
 
 onUnmounted(() => {
@@ -300,6 +297,6 @@ onUnmounted(() => {
 });
 
 onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
+   ipcRenderer.removeListener('save-content', saveContentListener);
 });
 </script>

src/renderer/components/WorkspaceTabQuery.vue

@@ -3,11 +3,6 @@
       v-show="isSelected"
       class="workspace-query-tab column col-12 columns col-gapless no-outline p-0"
       tabindex="0"
-      @keydown.f5="runQuery(query)"
-      @keydown.k="killTabQuery"
-      @keydown.ctrl.alt.w="clear"
-      @keydown.ctrl.b="beautify"
-      @keydown.ctrl.g="openHistoryModal"
    >
       <div class="workspace-query-runner column col-12">
          <QueryEditor
@@ -40,7 +35,6 @@
                      class="btn btn-primary btn-sm"
                      :class="{'loading':isQuering}"
                      :disabled="!query"
-                     title="F5"
                      @click="runQuery(query)"
                   >
                      <i class="mdi mdi-24px mdi-play pr-1" />
@@ -68,7 +62,6 @@
                <button
                   class="btn btn-link btn-sm mr-0"
                   :disabled="!query || isQuering"
-                  title="CTRL+W"
                   @click="clear()"
                >
                   <i class="mdi mdi-24px mdi-delete-sweep pr-1" />
@@ -80,7 +73,6 @@
                <button
                   class="btn btn-dark btn-sm"
                   :disabled="!query || isQuering"
-                  title="CTRL+B"
                   @click="beautify()"
                >
                   <i class="mdi mdi-24px mdi-brush pr-1" />
@@ -89,7 +81,6 @@
                <button
                   class="btn btn-dark btn-sm"
                   :disabled="isQuering"
-                  title="CTRL+G"
                   @click="openHistoryModal()"
                >
                   <i class="mdi mdi-24px mdi-history pr-1" />
@@ -206,6 +197,7 @@ import WorkspaceTabQueryTable from '@/components/WorkspaceTabQueryTable.vue';
 import WorkspaceTabQueryEmptyState from '@/components/WorkspaceTabQueryEmptyState.vue';
 import ModalHistory from '@/components/ModalHistory.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { ipcRenderer } from 'electron';
 
 const { t } = useI18n();
 
@@ -427,7 +419,8 @@ const beautify = () => {
       const formattedQuery = format(query.value, {
          language,
          uppercase: true
-      });
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any);
       queryEditor.value.editor.session.setValue(formattedQuery);
    }
 };
@@ -499,12 +492,47 @@ selectedSchema.value = props.tab.schema || breadcrumbsSchema.value;
 if (!databaseSchemas.value.includes(selectedSchema.value))
    selectedSchema.value = null;
 
-// window.addEventListener('keydown', onKey);
 window.addEventListener('resize', onWindowResize);
 
+const reloadListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen)
+      runQuery(query.value);
+};
+
+const formatListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen)
+      beautify();
+};
+
+const killQueryListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen)
+      killTabQuery();
+};
+
+const clearQueryListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen)
+      clear();
+};
+
+const historyListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen)
+      openHistoryModal();
+};
+
 onMounted(() => {
    const localResizer = resizer.value;
 
+   ipcRenderer.on('run-or-reload', reloadListener);
+   ipcRenderer.on('format-query', formatListener);
+   ipcRenderer.on('kill-query', killQueryListener);
+   ipcRenderer.on('clear-query', clearQueryListener);
+   ipcRenderer.on('query-history', historyListener);
+
    localResizer.addEventListener('mousedown', (e: MouseEvent) => {
       e.preventDefault();
 
@@ -518,12 +546,17 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
    window.removeEventListener('resize', onWindowResize);
-   // window.removeEventListener('keydown', onKey);
    const params = {
       uid: props.connection.uid,
       tabUid: props.tab.uid
    };
    Schema.destroyConnectionToCommit(params);
+
+   ipcRenderer.removeListener('run-or-reload', reloadListener);
+   ipcRenderer.removeListener('format-query', formatListener);
+   ipcRenderer.removeListener('kill-query', killQueryListener);
+   ipcRenderer.removeListener('clear-query', clearQueryListener);
+   ipcRenderer.removeListener('query-history', historyListener);
 });
 </script>
 

src/renderer/components/WorkspaceTabQueryEmptyState.vue

@@ -2,49 +2,21 @@
    <div class="container">
       <div class="columns">
          <div class="column col-16 text-right">
-            <div class="mb-4">
-               {{ t('message.runQuery') }}
-            </div>
-            <div v-if="customizations.cancelQueries" class="mb-4">
-               {{ t('message.killQuery') }}
-            </div>
-            <div class="mb-4">
-               {{ t('word.format') }}
-            </div>
-            <div class="mb-4">
-               {{ t('word.clear') }}
-            </div>
-            <div class="mb-4">
-               {{ t('word.history') }}
-            </div>
-            <div class="mb-4">
-               {{ t('message.openNewTab') }}
-            </div>
-            <div class="mb-4">
-               {{ t('message.closeTab') }}
+            <div
+               v-for="(shortcut, i) in tabShortcuts"
+               :key="i"
+               class="mb-4"
+            >
+               {{ t(shortcutEvents[shortcut.event].l18n, {param: shortcutEvents[shortcut.event].l18nParam}) }}
             </div>
          </div>
          <div class="column col-16">
-            <div class="mb-4">
-               <code>F5</code>
-            </div>
-            <div v-if="customizations.cancelQueries" class="mb-4">
-               <code>CTRL</code> + <code>K</code>
-            </div>
-            <div class="mb-4">
-               <code>CTRL</code> + <code>B</code>
-            </div>
-            <div class="mb-4">
-               <code>CTRL</code> + <code>ALT</code> + <code>W</code>
-            </div>
-            <div class="mb-4">
-               <code>CTRL</code> + <code>G</code>
-            </div>
-            <div class="mb-4">
-               <code>CTRL</code> + <code>T</code>
-            </div>
-            <div class="mb-4">
-               <code>CTRL</code> + <code>W</code>
+            <div
+               v-for="(shortcut, i) in tabShortcuts"
+               :key="i"
+               class="mb-4"
+            >
+               <span v-html="parseKeys(shortcut.keys)" />
             </div>
          </div>
       </div>
@@ -52,12 +24,22 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
+import { useSettingsStore } from '@/stores/settings';
+import { shortcutEvents } from 'common/shortcuts';
+import { useFilters } from '@/composables/useFilters';
+
+const { parseKeys } = useFilters();
 
 const { t } = useI18n();
 
-defineProps({
-   customizations: Object
+const settingsStore = useSettingsStore();
+const { shortcuts } = storeToRefs(settingsStore);
+
+const tabShortcuts = computed(() => {
+   return shortcuts.value.filter(s => shortcutEvents[s.event].context === 'tab');
 });
 </script>
 

src/renderer/components/WorkspaceTabQueryTable.vue

@@ -377,7 +377,7 @@ const deleteSelected = () => {
    });
 
    const params = {
-      primary: primaryField.value.name,
+      primary: primaryField.value?.name,
       schema: getSchema(resultsetIndex.value),
       table: getTable(resultsetIndex.value),
       rows
@@ -389,7 +389,7 @@ const setNull = () => {
    const row = localResults.value.find((row: any) => selectedRows.value.includes(row._antares_id));
 
    const params = {
-      primary: primaryField.value.name,
+      primary: primaryField.value?.name,
       schema: getSchema(resultsetIndex.value),
       table: getTable(resultsetIndex.value),
       id: getPrimaryValue(row),
@@ -449,6 +449,18 @@ const copyRow = (format: string) => {
       }
       navigator.clipboard.writeText(sqlInserts.join('\n'));
    }
+   else if (format === 'csv') {
+      const csv = [];
+      if (!Array.isArray(contentToCopy)) contentToCopy = [contentToCopy];
+
+      if (contentToCopy.length)
+         csv.push(Object.keys(contentToCopy[0]).join(';'));
+
+      for (const row of contentToCopy)
+         csv.push(Object.values(row).map(col => typeof col === 'string' ? `"${col}"` : col).join(';'));
+
+      navigator.clipboard.writeText(csv.join('\n'));
+   }
 };
 
 const duplicateRow = () => {
@@ -599,7 +611,7 @@ const onKey = async (e: KeyboardEvent) => {
       selectAllRows(e);
 
    // row navigation stuff
-   if ((e.code.includes('Arrow') || e.code === 'Tab') && sortedResults.value.length > 0 && !e.altKey) {
+   if (!(e.ctrlKey || e.metaKey) && (e.code.includes('Arrow') || e.code === 'Tab') && sortedResults.value.length > 0 && !e.altKey) {
       e.preventDefault();
 
       const aviableFields= Object.keys(sortedResults.value[0]).slice(0, -1); // removes _antares_id

src/renderer/components/WorkspaceTabQueryTableContext.vue

@@ -21,6 +21,11 @@
                   <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('word.row', selectedRows.length) }} (JSON)
                </span>
             </div>
+            <div class="context-element" @click="copyRow('csv')">
+               <span class="d-flex">
+                  <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('word.row', selectedRows.length) }} (CSV)
+               </span>
+            </div>
             <div class="context-element" @click="copyRow('sql')">
                <span class="d-flex">
                   <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('word.row', selectedRows.length) }} (SQL INSERT)

src/renderer/components/WorkspaceTabQueryTableRow.vue

@@ -19,7 +19,7 @@
                class="cell-content"
                :class="`${isNull(col)} ${typeClass(fields[cKey].type)}`"
                @dblclick="editON(cKey)"
-            >{{ cutText(typeFormat(col, fields[cKey].type.toLowerCase(), fields[cKey].length) as string) }}</span>
+            >{{ cutText(typeFormat(col, fields[cKey].type.toLowerCase(), fields[cKey].length) as string, 250) }}</span>
             <ForeignKeySelect
                v-else-if="isForeignKey(cKey)"
                v-model="editingContent"
@@ -212,6 +212,7 @@ import {
    DATETIME,
    BLOB,
    BIT,
+   BINARY,
    HAS_TIMEZONE,
    SPATIAL,
    IS_MULTI_SPATIAL
@@ -221,9 +222,11 @@ import TextEditor from '@/components/BaseTextEditor.vue';
 import BaseMap from '@/components/BaseMap.vue';
 import ForeignKeySelect from '@/components/ForeignKeySelect.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { useFilters } from '@/composables/useFilters';
 import { QueryForeign, TableField } from 'common/interfaces/antares';
 
 const { t } = useI18n();
+const { cutText } = useFilters();
 
 const props = defineProps({
    row: Object,
@@ -377,6 +380,9 @@ const editON = async (field: string) => {
 
    const content = props.row[field];
    const type = props.fields[field].type.toUpperCase();
+
+   if (BINARY.includes(type)) return;
+
    originalContent.value = typeFormat(content, type, props.fields[field].length);
    editingType.value = type;
    editingField.value = field;
@@ -440,7 +446,7 @@ const editOFF = () => {
    let content;
    if (!BLOB.includes(editingType.value)) {
       if ([...DATETIME, ...TIME].includes(editingType.value)) {
-         if (editingContent.value.substring(editingContent.value.length - 1) === '.')
+         if (editingContent.value !== null && editingContent.value.substring(editingContent.value.length - 1) === '.')
             editingContent.value = editingContent.value.slice(0, -1);
       }
 
@@ -546,11 +552,6 @@ const onKey = (e: KeyboardEvent) => {
    }
 };
 
-const cutText = (val: string) => {
-   if (typeof val !== 'string') return val;
-   return val.length > 128 ? `${val.substring(0, 128)}[...]` : val;
-};
-
 const typeFormat = (val: string | number | Date | number[], type: string, precision?: number | false) => {
    if (!val) return val;
 
@@ -585,6 +586,9 @@ const typeFormat = (val: string | number | Date | number[], type: string, precis
       return parseInt(bitString).toString().padStart(Number(precision), '0');
    }
 
+   if (BINARY.includes(type))
+      return Buffer.from(val as number[]).toString('hex');
+
    if (ARRAY.includes(type)) {
       if (Array.isArray(val))
          return JSON.stringify(val).replaceAll('[', '{').replaceAll(']', '}');

src/renderer/components/WorkspaceTabTable.vue

@@ -8,7 +8,7 @@
                      <button
                         class="btn btn-dark btn-sm mr-0 pr-1"
                         :class="{'loading':isQuering}"
-                        :title="`${t('word.refresh')} (F5)`"
+                        :title="`${t('word.refresh')}`"
                         @click="reloadTable"
                      >
                         <i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh mr-1" />
@@ -35,7 +35,7 @@
                   <button
                      class="btn btn-dark btn-sm mr-0"
                      :disabled="isQuering || page === 1"
-                     title="CTRL+ᐊ"
+                     :title="t('message.previousResultsPage')"
                      @click="pageChange('prev')"
                   >
                      <i class="mdi mdi-24px mdi-skip-previous" />
@@ -61,7 +61,7 @@
                   <button
                      class="btn btn-dark btn-sm mr-0"
                      :disabled="isQuering || (results.length && results[0].rows.length < limit)"
-                     title="CTRL+ᐅ"
+                     :title="t('message.nextResultsPage')"
                      @click="pageChange('next')"
                   >
                      <i class="mdi mdi-24px mdi-skip-next" />
@@ -72,7 +72,7 @@
 
                <button
                   class="btn btn-sm"
-                  :title="`${t('word.filter')} (CTRL+F)`"
+                  :title="t('word.filter')"
                   :class="{'btn-primary': isSearch, 'btn-dark': !isSearch}"
                   @click="isSearch = !isSearch"
                >
@@ -85,7 +85,7 @@
                   @click="showFakerModal()"
                >
                   <i class="mdi mdi-24px mdi-playlist-plus mr-1" />
-                  <span>{{ $tc('message.insertRow', 2) }}</span>
+                  <span>{{ t('message.insertRow', 2) }}</span>
                </button>
 
                <div class="dropdown table-dropdown pr-2">
@@ -189,6 +189,10 @@ import WorkspaceTabTableFilters from '@/components/WorkspaceTabTableFilters.vue'
 import ModalFakerRows from '@/components/ModalFakerRows.vue';
 import { ConnectionParams } from 'common/interfaces/antares';
 import { TableFilterClausole } from 'common/interfaces/tableApis';
+import { useFilters } from '@/composables/useFilters';
+import { ipcRenderer } from 'electron';
+
+const { localeString } = useFilters();
 
 const { t } = useI18n();
 
@@ -339,7 +343,6 @@ const pageChange = (direction: 'prev' | 'next') => {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const showFakerModal = (row?: any) => {
-   console.log(row);
    if (isQuering.value) return;
    isFakerModal.value = true;
    rowToDuplicate.value = row;
@@ -350,23 +353,6 @@ const hideFakerModal = () => {
    rowToDuplicate.value = null;
 };
 
-const onKey = (e: KeyboardEvent) => {
-   if (props.isSelected) {
-      e.stopPropagation();
-      if (e.key === 'F5')
-         reloadTable();
-
-      if (e.ctrlKey || e.metaKey) {
-         if (e.key === 'ArrowRight')
-            pageChange('next');
-         if (e.key === 'ArrowLeft')
-            pageChange('prev');
-         if (e.key === 'f')
-            isSearch.value = !isSearch.value;
-      }
-   }
-};
-
 const setRefreshInterval = () => {
    if (refreshInterval.value)
       clearInterval(refreshInterval.value);
@@ -398,9 +384,28 @@ const updateFilters = (clausoles: TableFilterClausole[]) => {
    getTableData();
 };
 
-const localeString = (val: number | null) => {
-   if (val !== null)
-      return val.toLocaleString();
+const reloadListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen)
+      reloadTable();
+};
+
+const openFilterListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen)
+      isSearch.value = !isSearch.value;
+};
+
+const nextPageListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen)
+      pageChange('next');
+};
+
+const prevPageListener = () => {
+   const hasModalOpen = !!document.querySelectorAll('.modal.active').length;
+   if (props.isSelected && !hasModalOpen)
+      pageChange('prev');
 };
 
 const hasApproximately = computed(() => {
@@ -459,10 +464,17 @@ watch(isSearch, (val) => {
 });
 
 getTableData();
-window.addEventListener('keydown', onKey);
+
+ipcRenderer.on('run-or-reload', reloadListener);
+ipcRenderer.on('open-filter', openFilterListener);
+ipcRenderer.on('next-page', nextPageListener);
+ipcRenderer.on('prev-page', prevPageListener);
 
 onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
    clearInterval(refreshInterval.value);
+   ipcRenderer.removeListener('run-or-reload', reloadListener);
+   ipcRenderer.removeListener('open-filter', openFilterListener);
+   ipcRenderer.removeListener('next-page', nextPageListener);
+   ipcRenderer.removeListener('prev-page', prevPageListener);
 });
 </script>

src/renderer/components/WorkspaceTabTableFilters.vue

@@ -51,7 +51,7 @@
             class="btn btn-sm btn-primary mr-0 ml-2"
             type="submit"
          >
-            {{ $t('word.filter') }}
+            {{ t('word.filter') }}
          </button>
          <button
             class="btn btn-sm btn-dark mr-0 ml-2"
@@ -71,6 +71,9 @@ import customizations from 'common/customizations';
 import { NUMBER, FLOAT } from 'common/fieldTypes';
 import BaseSelect from '@/components/BaseSelect.vue';
 import { TableFilterClausole } from 'common/interfaces/tableApis';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps({
    fields: Array as Prop<TableField[]>,

src/renderer/composables/useFilters.ts

@@ -0,0 +1,51 @@
+import * as moment from 'moment';
+
+export function useFilters () {
+   const cutText = (string: string, length: number, escape?: boolean) => {
+      if (typeof string !== 'string') return string;
+      if (escape) string = string.replace(/\s{2,}/g, ' ');
+      return string.length > length ? `${string.substring(0, length)}...` : string;
+   };
+
+   const lastPart = (string: string, length: number) => {
+      if (!string) return '';
+
+      string = string.split(/[/\\]+/).pop();
+      if (string.length >= length)
+         string = `...${string.slice(-length)}`;
+      return string;
+   };
+
+   const formatDate = (date: Date) => moment(date).isValid() ? moment(date).format('HH:mm:ss - YYYY/MM/DD') : date;
+
+   const localeString = (number: number | null) => {
+      if (number !== null)
+         return number.toLocaleString();
+   };
+
+   const wrapNumber = (num: number) => {
+      if (!num) return '';
+      return `(${num})`;
+   };
+
+   const parseKeys = (keys: {[key: number]: string}[]) => {
+      const isMacOS = process.platform === 'darwin';
+      return (keys as string[]).map(k => (
+         k.split('+')
+            .map(sk => (
+               `<code class="text-bold">${sk}</code>`
+            )))
+         .join('+')
+         .replaceAll('CommandOrControl', isMacOS ? 'Command' : 'Control')
+      ).join(', ');
+   };
+
+   return {
+      cutText,
+      formatDate,
+      wrapNumber,
+      lastPart,
+      localeString,
+      parseKeys
+   };
+}

src/renderer/i18n/ar-SA.ts

@@ -1,4 +1,4 @@
-module.exports = {
+export const arSA = {
    word: {
       edit: 'تعديل',
       save: 'حفظ',

src/renderer/i18n/de-DE.ts

@@ -1,4 +1,4 @@
-module.exports = {
+export const deDE = {
    word: {
       edit: 'Bearbeiten',
       save: 'Speichern',

src/renderer/i18n/en-US.ts

@@ -1,4 +1,4 @@
-module.exports = {
+export const enUS = {
    word: {
       edit: 'Edit',
       save: 'Save',
@@ -142,7 +142,8 @@ module.exports = {
       contributors: 'Contributors',
       pin: 'Pin',
       unpin: 'Unpin',
-      console: 'Console'
+      console: 'Console',
+      shortcuts: 'Shortcuts'
    },
    message: {
       appWelcome: 'Welcome to Antares SQL Client!',
@@ -298,7 +299,30 @@ module.exports = {
       allConnections: 'All connections',
       searchForConnections: 'Search for connections',
       disableScratchpad: 'Disable scratchpad',
-      reportABug: 'Report a bug'
+      reportABug: 'Report a bug',
+      nextTab: 'Next tab',
+      previousTab: 'Previous tab',
+      selectTabNumber: 'Select tab number {param}',
+      toggleConsole: 'Toggle console',
+      addShortcut: 'Add shortcut',
+      editShortcut: 'Edit shortcut',
+      deleteShortcut: 'Delete shortcut',
+      restoreDefaults: 'Restore defaults',
+      restoreDefaultsQuestion: 'Do you confirm to restore default values?',
+      registerAShortcut: 'Register a shortcut',
+      invalidShortcutMessage: 'Invalid combination, continue to type',
+      shortcutAlreadyExists: 'Shortcut already exists',
+      saveContent: 'Save content',
+      openAllConnections: 'Open all connections',
+      openSettings: 'Open settings',
+      openScratchpad: 'Open scratchpad',
+      runOrReload: 'Run or reload',
+      formatQuery: 'Format query',
+      queryHistory: 'Query history',
+      clearQuery: 'Clear query',
+      openFilter: 'Open filter',
+      nextResultsPage: 'Next results page',
+      previousResultsPage: 'Previous results page'
    },
    faker: {
       address: 'Address',

src/renderer/i18n/es-ES.ts

@@ -1,4 +1,4 @@
-module.exports = {
+export const esES = {
    word: {
       edit: 'Editar',
       save: 'Guardar',

src/renderer/i18n/fr-FR.ts

@@ -1,4 +1,4 @@
-module.exports = {
+export const frFR = {
    word: {
       edit: 'Editer',
       save: 'Sauver',

src/renderer/i18n/index.ts

@@ -1,19 +1,41 @@
 import { createI18n } from 'vue-i18n';
+import { enUS } from './en-US';
+import { itIT } from './it-IT';
+import { arSA } from './ar-SA';
+import { esES } from './es-ES';
+import { frFR } from './fr-FR';
+import { ptBR } from './pt-BR';
+import { deDE } from './de-DE';
+import { viVN } from './vi-VN';
+import { jaJP } from './ja-JP';
+import { zhCN } from './zh-CN';
+import { ruRU } from './ru-RU';
 
-const i18n = createI18n({
+const messages = {
+   'en-US': enUS,
+   'it-IT': itIT,
+   'ar-SA': arSA,
+   'es-ES': esES,
+   'fr-FR': frFR,
+   'pt-BR': ptBR,
+   'de-DE': deDE,
+   'vi-VN': viVN,
+   'ja-JP': jaJP,
+   'zh-CN': zhCN,
+   'ru-RU': ruRU
+};
+
+type NestedPartial<T> = {
+   [K in keyof T]?: T[K] extends Array<infer R> ? Array<NestedPartial<R>> : (T[K] extends unknown ? unknown : NestedPartial<T[K]>)
+};
+
+export type MessageSchema = typeof enUS
+export type AvailableLocale = keyof typeof messages
+
+const i18n = createI18n<[NestedPartial<MessageSchema>], AvailableLocale>({
    fallbackLocale: 'en-US',
-   messages: {
-      'en-US': require('./en-US'),
-      'it-IT': require('./it-IT'),
-      'ar-SA': require('./ar-SA'),
-      'es-ES': require('./es-ES'),
-      'fr-FR': require('./fr-FR'),
-      'pt-BR': require('./pt-BR'),
-      'de-DE': require('./de-DE'),
-      'vi-VN': require('./vi-VN'),
-      'ja-JP': require('./ja-JP'),
-      'zh-CN': require('./zh-CN'),
-      'ru-RU': require('./ru-RU')
-   }
+   allowComposition: true,
+   messages
 });
-export default i18n;
+
+export { i18n };