chore(release): 0.7.1

docs: add dyaskur as a contributor for code

.all-contributorsrc

@@ -174,6 +174,25 @@
       "contributions": [
         "translation"
       ]
+    },
+    {
+      "login": "brdtheo",
+      "name": "Théo Billardey",
+      "avatar_url": "https://avatars.githubusercontent.com/u/48206778?v=4",
+      "profile": "https://codepen.io/theo-billardey",
+      "contributions": [
+        "translation"
+      ]
+    },
+    {
+      "login": "dyaskur",
+      "name": "Muhammad Dyas Yaskur",
+      "avatar_url": "https://avatars.githubusercontent.com/u/9539970?v=4",
+      "profile": "http://yaskur.net",
+      "contributions": [
+        "translation",
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/workflows/build.yml

@@ -11,7 +11,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [macos-latest, ubuntu-latest, windows-latest]
+        os: [macos-11, ubuntu-20.04, windows-latest]
 
     steps:
       - name: Check out Git repository

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

@@ -5,7 +5,7 @@ on:
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: Check out Git repository
         uses: actions/checkout@v3

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

@@ -1,4 +1,4 @@
-name: Test end-to-end [LINUX]
+name: Test end-to-end [WINDOWS]
 
 on: push
 
@@ -8,7 +8,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-latest]
+        os: [windows-latest]
 
     steps:
       - name: Check out Git repository

CHANGELOG.md

@@ -2,6 +2,45 @@
 
 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.7.1](https://github.com/antares-sql/antares/compare/v0.7.0...v0.7.1) (2022-12-23)
+
+
+### Features
+
+* Copy rows as html table, so we can paste it to spreadsheet ([c32f463](https://github.com/antares-sql/antares/commit/c32f463ea5ac3f54cba32929f77442f1e0ba934a))
+* option to disable selected query execution, closes [#477](https://github.com/antares-sql/antares/issues/477) ([1bd26ce](https://github.com/antares-sql/antares/commit/1bd26ceaa68fe66f26c76b3b60fa6eeccea91729))
+
+
+### Bug Fixes
+
+*  bahasa indonesia typos ([897795d](https://github.com/antares-sql/antares/commit/897795ddbb4ade2652b0471f18288b8b3aaf0eb9))
+* connection default icon not change after client change ([a6bdf69](https://github.com/antares-sql/antares/commit/a6bdf69a281c8614c41274b6dc2f3563aa89c57e))
+* context submenu outside view when near the edge, fixes [#506](https://github.com/antares-sql/antares/issues/506) ([c08946e](https://github.com/antares-sql/antares/commit/c08946e932884e5f0253df2545f98315ab7e5219))
+* **i18n:** add missing keys for french translation ([fd129a2](https://github.com/antares-sql/antares/commit/fd129a2ad1c3401372c9172b38f4406254d134df))
+* **MySQL:** not every connection gets read-only option ([843c15e](https://github.com/antares-sql/antares/commit/843c15e428c4a0412f19a93ab05d2fcbb60da09b))
+* **UI:** white background dragging connections inside folder on Linux ([dd971d7](https://github.com/antares-sql/antares/commit/dd971d70e04faf0d5b239586b12e4a9a42407433))
+* white background dragging connections or tabs on Linux, fixes [#486](https://github.com/antares-sql/antares/issues/486) ([669d7e8](https://github.com/antares-sql/antares/commit/669d7e8d4d062ed5bdafe1d5cde8ec51a2f68b26))
+
+## [0.7.0](https://github.com/antares-sql/antares/compare/v0.6.0...v0.7.0) (2022-11-30)
+
+
+### Features
+
+* **UI:** connections customization ([212b2bd](https://github.com/antares-sql/antares/commit/212b2bdba933db1af22967a057d64f41c96b9930))
+* **UI:** folders customization ([72accb7](https://github.com/antares-sql/antares/commit/72accb7b0e62977dde2c82312aee5b9d025e5182))
+* **UI:** folders implementation ([ece6c64](https://github.com/antares-sql/antares/commit/ece6c6401def4a9b42280f23efaa038b9ad98de8))
+* **UI:** footer color based on folder color ([4fe9dfc](https://github.com/antares-sql/antares/commit/4fe9dfc4d7ca19a798b8a8a74d979ab88aebeaac))
+* **UI:** new settimgbar tooltips ([6728964](https://github.com/antares-sql/antares/commit/672896414e901635c83ca037663e355a31ce013b))
+
+
+### Bug Fixes
+
+* deletion of connections inside folder ([b06bafe](https://github.com/antares-sql/antares/commit/b06bafe06c060233ebe901979b9fc4455a25cb89))
+* missing sidebar data after update ([0a1f50a](https://github.com/antares-sql/antares/commit/0a1f50a9b92c9705784b93f14be40a01a78cb0da))
+* **UI:** folder to folder drag glitches ([0fca70e](https://github.com/antares-sql/antares/commit/0fca70ebec1af3d594db4e1ce159e52e12224850))
+* **UI:** wrong copnnection icons color with light theme ([d010d5a](https://github.com/antares-sql/antares/commit/d010d5aa8f07a5def1183567ee767fd144696ed3))
+* wrong position moving elements outside folder ([7af178a](https://github.com/antares-sql/antares/commit/7af178a1e400876e6c45dbe31a198a12d29227a8))
+
 ## [0.6.0](https://github.com/antares-sql/antares/compare/v0.5.19...v0.6.0) (2022-11-18)
 
 

README.md

@@ -116,30 +116,34 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->
 <table>
-  <tr>
-    <td align="center"><a href="https://fabiodistasio.it/"><img src="https://avatars.githubusercontent.com/u/31471771?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Fabio Di Stasio</b></sub></a><br /><a href="https://github.com/antares-sql/antares/commits?author=Fabio286" title="Code">💻</a> <a href="#translation-Fabio286" title="Translation">🌍</a> <a href="https://github.com/antares-sql/antares/commits?author=Fabio286" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://www.linkedin.com/in/giulioganci/"><img src="https://avatars.githubusercontent.com/u/4192159?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Giulio Ganci</b></sub></a><br /><a href="https://github.com/antares-sql/antares/commits?author=toriphes" title="Code">💻</a></td>
-    <td align="center"><a href="https://christianratz.de/"><img src="https://avatars.githubusercontent.com/u/2630316?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Christian Ratz</b></sub></a><br /><a href="https://github.com/antares-sql/antares/commits?author=digitalgopnik" title="Code">💻</a> <a href="#translation-digitalgopnik" title="Translation">🌍</a></td>
-    <td align="center"><a href="https://reverb6821.github.io/"><img src="https://avatars.githubusercontent.com/u/55198803?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Giuseppe Gigliotti</b></sub></a><br /><a href="#translation-reverb6821" title="Translation">🌍</a></td>
-    <td align="center"><a href="https://github.com/Mohd-PH"><img src="https://avatars.githubusercontent.com/u/9362157?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mohd-PH</b></sub></a><br /><a href="#translation-Mohd-PH" title="Translation">🌍</a></td>
-    <td align="center"><a href="https://github.com/hongkfui"><img src="https://avatars.githubusercontent.com/u/37477191?v=4?s=100" width="100px;" alt=""/><br /><sub><b>hongkfui</b></sub></a><br /><a href="#translation-hongkfui" title="Translation">🌍</a></td>
-    <td align="center"><a href="https://github.com/MrAnyx"><img src="https://avatars.githubusercontent.com/u/44176707?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Robin</b></sub></a><br /><a href="#translation-MrAnyx" title="Translation">🌍</a></td>
-  </tr>
-  <tr>
-    <td align="center"><a href="https://github.com/daeleduardo"><img src="https://avatars.githubusercontent.com/u/8599078?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Daniel Eduardo</b></sub></a><br /><a href="#translation-daeleduardo" title="Translation">🌍</a></td>
-    <td align="center"><a href="https://ngoquocdat.com/"><img src="https://avatars.githubusercontent.com/u/56961917?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ngô Quốc Đạt</b></sub></a><br /><a href="#translation-datlechin" title="Translation">🌍</a></td>
-    <td align="center"><a href="https://github.com/IsamuSugi"><img src="https://avatars.githubusercontent.com/u/7746658?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Isamu Sugiura</b></sub></a><br /><a href="#translation-IsamuSugi" title="Translation">🌍</a></td>
-    <td align="center"><a href="http://rsacchetto.nexxontech.it/"><img src="https://avatars.githubusercontent.com/u/18429412?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Riccardo Sacchetto</b></sub></a><br /><a href="#platform-Occhioverde" title="Packaging/porting to new platform">📦</a></td>
-    <td align="center"><a href="https://kilianstallinger.com"><img src="https://avatars.githubusercontent.com/u/5290318?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kilian Stallinger</b></sub></a><br /><a href="https://github.com/antares-sql/antares/commits?author=kilianstallz" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/wenj91"><img src="https://avatars.githubusercontent.com/u/12549338?v=4?s=100" width="100px;" alt=""/><br /><sub><b>文杰</b></sub></a><br /><a href="https://github.com/antares-sql/antares/commits?author=wenj91" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/goYou"><img src="https://avatars.githubusercontent.com/u/62732795?v=4?s=100" width="100px;" alt=""/><br /><sub><b>goYou</b></sub></a><br /><a href="#translation-goYou" title="Translation">🌍</a></td>
-  </tr>
-  <tr>
-    <td align="center"><a href="https://github.com/raliqala"><img src="https://avatars.githubusercontent.com/u/30502407?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Topollo</b></sub></a><br /><a href="https://github.com/antares-sql/antares/commits?author=raliqala" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/SmileYzn"><img src="https://avatars.githubusercontent.com/u/5851851?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Cleverson</b></sub></a><br /><a href="#translation-SmileYzn" title="Translation">🌍</a></td>
-    <td align="center"><a href="https://github.com/fredatgithub"><img src="https://avatars.githubusercontent.com/u/6720055?v=4?s=100" width="100px;" alt=""/><br /><sub><b>fred</b></sub></a><br /><a href="#translation-fredatgithub" title="Translation">🌍</a></td>
-    <td align="center"><a href="https://github.com/xak666"><img src="https://avatars.githubusercontent.com/u/38811437?v=4?s=100" width="100px;" alt=""/><br /><sub><b>xaka_xak</b></sub></a><br /><a href="#translation-xak666" title="Translation">🌍</a></td>
-  </tr>
+  <tbody>
+    <tr>
+      <td align="center"><a href="https://fabiodistasio.it/"><img src="https://avatars.githubusercontent.com/u/31471771?v=4?s=100" width="100px;" alt="Fabio Di Stasio"/><br /><sub><b>Fabio Di Stasio</b></sub></a><br /><a href="https://github.com/antares-sql/antares/commits?author=Fabio286" title="Code">💻</a> <a href="#translation-Fabio286" title="Translation">🌍</a> <a href="https://github.com/antares-sql/antares/commits?author=Fabio286" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://www.linkedin.com/in/giulioganci/"><img src="https://avatars.githubusercontent.com/u/4192159?v=4?s=100" width="100px;" alt="Giulio Ganci"/><br /><sub><b>Giulio Ganci</b></sub></a><br /><a href="https://github.com/antares-sql/antares/commits?author=toriphes" title="Code">💻</a></td>
+      <td align="center"><a href="https://christianratz.de/"><img src="https://avatars.githubusercontent.com/u/2630316?v=4?s=100" width="100px;" alt="Christian Ratz"/><br /><sub><b>Christian Ratz</b></sub></a><br /><a href="https://github.com/antares-sql/antares/commits?author=digitalgopnik" title="Code">💻</a> <a href="#translation-digitalgopnik" title="Translation">🌍</a></td>
+      <td align="center"><a href="https://reverb6821.github.io/"><img src="https://avatars.githubusercontent.com/u/55198803?v=4?s=100" width="100px;" alt="Giuseppe Gigliotti"/><br /><sub><b>Giuseppe Gigliotti</b></sub></a><br /><a href="#translation-reverb6821" title="Translation">🌍</a></td>
+      <td align="center"><a href="https://github.com/Mohd-PH"><img src="https://avatars.githubusercontent.com/u/9362157?v=4?s=100" width="100px;" alt="Mohd-PH"/><br /><sub><b>Mohd-PH</b></sub></a><br /><a href="#translation-Mohd-PH" title="Translation">🌍</a></td>
+      <td align="center"><a href="https://github.com/hongkfui"><img src="https://avatars.githubusercontent.com/u/37477191?v=4?s=100" width="100px;" alt="hongkfui"/><br /><sub><b>hongkfui</b></sub></a><br /><a href="#translation-hongkfui" title="Translation">🌍</a></td>
+      <td align="center"><a href="https://github.com/MrAnyx"><img src="https://avatars.githubusercontent.com/u/44176707?v=4?s=100" width="100px;" alt="Robin"/><br /><sub><b>Robin</b></sub></a><br /><a href="#translation-MrAnyx" title="Translation">🌍</a></td>
+    </tr>
+    <tr>
+      <td align="center"><a href="https://github.com/daeleduardo"><img src="https://avatars.githubusercontent.com/u/8599078?v=4?s=100" width="100px;" alt="Daniel Eduardo"/><br /><sub><b>Daniel Eduardo</b></sub></a><br /><a href="#translation-daeleduardo" title="Translation">🌍</a></td>
+      <td align="center"><a href="https://ngoquocdat.com/"><img src="https://avatars.githubusercontent.com/u/56961917?v=4?s=100" width="100px;" alt="Ngô Quốc Đạt"/><br /><sub><b>Ngô Quốc Đạt</b></sub></a><br /><a href="#translation-datlechin" title="Translation">🌍</a></td>
+      <td align="center"><a href="https://github.com/IsamuSugi"><img src="https://avatars.githubusercontent.com/u/7746658?v=4?s=100" width="100px;" alt="Isamu Sugiura"/><br /><sub><b>Isamu Sugiura</b></sub></a><br /><a href="#translation-IsamuSugi" title="Translation">🌍</a></td>
+      <td align="center"><a href="http://rsacchetto.nexxontech.it/"><img src="https://avatars.githubusercontent.com/u/18429412?v=4?s=100" width="100px;" alt="Riccardo Sacchetto"/><br /><sub><b>Riccardo Sacchetto</b></sub></a><br /><a href="#platform-Occhioverde" title="Packaging/porting to new platform">📦</a></td>
+      <td align="center"><a href="https://kilianstallinger.com"><img src="https://avatars.githubusercontent.com/u/5290318?v=4?s=100" width="100px;" alt="Kilian Stallinger"/><br /><sub><b>Kilian Stallinger</b></sub></a><br /><a href="https://github.com/antares-sql/antares/commits?author=kilianstallz" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/wenj91"><img src="https://avatars.githubusercontent.com/u/12549338?v=4?s=100" width="100px;" alt="文杰"/><br /><sub><b>文杰</b></sub></a><br /><a href="https://github.com/antares-sql/antares/commits?author=wenj91" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/goYou"><img src="https://avatars.githubusercontent.com/u/62732795?v=4?s=100" width="100px;" alt="goYou"/><br /><sub><b>goYou</b></sub></a><br /><a href="#translation-goYou" title="Translation">🌍</a></td>
+    </tr>
+    <tr>
+      <td align="center"><a href="https://github.com/raliqala"><img src="https://avatars.githubusercontent.com/u/30502407?v=4?s=100" width="100px;" alt="Topollo"/><br /><sub><b>Topollo</b></sub></a><br /><a href="https://github.com/antares-sql/antares/commits?author=raliqala" title="Code">💻</a></td>
+      <td align="center"><a href="https://github.com/SmileYzn"><img src="https://avatars.githubusercontent.com/u/5851851?v=4?s=100" width="100px;" alt="Cleverson"/><br /><sub><b>Cleverson</b></sub></a><br /><a href="#translation-SmileYzn" title="Translation">🌍</a></td>
+      <td align="center"><a href="https://github.com/fredatgithub"><img src="https://avatars.githubusercontent.com/u/6720055?v=4?s=100" width="100px;" alt="fred"/><br /><sub><b>fred</b></sub></a><br /><a href="#translation-fredatgithub" title="Translation">🌍</a></td>
+      <td align="center"><a href="https://github.com/xak666"><img src="https://avatars.githubusercontent.com/u/38811437?v=4?s=100" width="100px;" alt="xaka_xak"/><br /><sub><b>xaka_xak</b></sub></a><br /><a href="#translation-xak666" title="Translation">🌍</a></td>
+      <td align="center"><a href="https://codepen.io/theo-billardey"><img src="https://avatars.githubusercontent.com/u/48206778?v=4?s=100" width="100px;" alt="Théo Billardey"/><br /><sub><b>Théo Billardey</b></sub></a><br /><a href="#translation-brdtheo" title="Translation">🌍</a></td>
+      <td align="center"><a href="http://yaskur.net"><img src="https://avatars.githubusercontent.com/u/9539970?v=4?s=100" width="100px;" alt="Muhammad Dyas Yaskur"/><br /><sub><b>Muhammad Dyas Yaskur</b></sub></a><br /><a href="#translation-dyaskur" title="Translation">🌍</a> <a href="https://github.com/antares-sql/antares/commits?author=dyaskur" title="Code">💻</a></td>
+    </tr>
+  </tbody>
 </table>
 
 <!-- markdownlint-restore -->

package.json

@@ -1,7 +1,7 @@
 {
   "name": "antares",
   "productName": "Antares",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "A modern, fast and productivity driven SQL client with a focus in UX.",
   "license": "MIT",
   "repository": "https://github.com/antares-sql/antares.git",
@@ -124,18 +124,19 @@
     "@mdi/font": "~7.0.96",
     "@turf/helpers": "~6.5.0",
     "@vueuse/core": "~8.7.5",
-    "ace-builds": "~1.8.1",
-    "better-sqlite3": "~7.6.2",
+    "ace-builds": "~1.14.0",
+    "better-sqlite3": "~8.0.0",
     "electron-log": "~4.4.1",
     "electron-store": "~8.0.1",
     "electron-updater": "~4.6.5",
     "electron-window-state": "~5.0.3",
     "encoding": "~0.1.13",
+    "floating-vue": "~2.0.0-beta.20",
     "leaflet": "~1.7.1",
     "marked": "~4.0.19",
     "moment": "~2.29.4",
     "mysql2": "~2.3.2",
-    "node-firebird": "~1.1.3",
+    "node-firebird": "~1.1.4",
     "pg": "~8.7.1",
     "pg-connection-string": "~2.5.0",
     "pg-query-stream": "~4.2.3",
@@ -143,10 +144,10 @@
     "pinia": "~2.0.23",
     "source-map-support": "~0.5.20",
     "spectre.css": "~0.5.9",
-    "sql-formatter": "~11.0.2",
+    "sql-formatter": "~12.0.3",
     "ssh2-promise": "~1.0.2",
     "v-mask": "~2.3.0",
-    "vue": "~3.2.40",
+    "vue": "~3.2.45",
     "vue-i18n": "~9.2.2",
     "vuedraggable": "~4.1.0"
   },
@@ -154,7 +155,7 @@
     "@babel/eslint-parser": "~7.15.7",
     "@babel/preset-env": "~7.15.8",
     "@babel/preset-typescript": "~7.16.7",
-    "@playwright/test": "~1.21.1",
+    "@playwright/test": "~1.28.1",
     "@types/better-sqlite3": "~7.5.0",
     "@types/leaflet": "~1.7.9",
     "@types/marked": "~4.0.7",
@@ -168,8 +169,8 @@
     "chalk": "~4.1.2",
     "cross-env": "~7.0.2",
     "css-loader": "~6.5.0",
-    "electron": "~19.1.2",
-    "electron-builder": "~23.0.3",
+    "electron": "~22.0.0",
+    "electron-builder": "~22.10.3",
     "eslint": "~7.32.0",
     "eslint-config-standard": "~16.0.3",
     "eslint-plugin-import": "~2.24.2",
@@ -180,8 +181,8 @@
     "html-webpack-plugin": "~5.5.0",
     "mini-css-extract-plugin": "~2.4.5",
     "node-loader": "~2.0.0",
-    "playwright": "~1.21.1",
-    "playwright-core": "~1.21.1",
+    "playwright": "~1.28.1",
+    "playwright-core": "~1.28.1",
     "postcss-html": "~1.5.0",
     "progress-webpack-plugin": "~1.0.12",
     "rimraf": "~3.0.2",
@@ -201,7 +202,7 @@
     "vue-loader": "~16.8.3",
     "webpack": "~5.72.0",
     "webpack-cli": "~4.9.1",
-    "webpack-dev-server": "~4.4.0",
+    "webpack-dev-server": "~4.11.1",
     "xvfb-maybe": "~0.2.1"
   }
 }

src/common/libs/uidGen.ts

@@ -1,3 +1,3 @@
 export function uidGen (prefix?: string) {
-   return (prefix ? `${prefix}:` : '') + Math.random().toString(36).substr(2, 9).toUpperCase();
+   return (prefix ? `${prefix}:` : '') + Math.random().toString(36).substring(2, 11).toUpperCase();
 }

src/main/libs/clients/FirebirdSQLClient.ts

@@ -1047,7 +1047,7 @@ export class FirebirdSQLClient extends AntaresCore {
             connection = await this.getConnection();
 
             const transaction = await new Promise<firebird.Transaction>((resolve, reject) => {
-               (connection as firebird.Database).transaction(firebird.ISOLATION_READ_COMMITED, (err, transaction) => {
+               (connection as firebird.Database).transaction(firebird.ISOLATION_READ_COMMITTED, (err, transaction) => {
                   if (err) reject(err);
                   else resolve(transaction);
                });

src/main/libs/clients/MySQLClient.ts

@@ -225,6 +225,9 @@ export class MySQLClient extends AntaresCore {
       if (hasAnsiQuotes)
          await connection.query(`SET SESSION sql_mode = '${sqlMode.filter((m: string) => !['ANSI', 'ANSI_QUOTES'].includes(m)).join(',')}'`);
 
+      if (this._params.readonly)
+         await connection.query('SET SESSION TRANSACTION READ ONLY');
+
       connection.on('connection', conn => {
          if (this._params.readonly)
             conn.query('SET SESSION TRANSACTION READ ONLY');

src/main/main.ts

@@ -37,6 +37,7 @@ async function createMainWindow () {
       webPreferences: {
          nodeIntegration: true,
          contextIsolation: false,
+         devTools: isDevelopment,
          spellcheck: false
       },
       autoHideMenuBar: true,

src/renderer/components/BaseContextMenu.vue

@@ -1,5 +1,5 @@
 <template>
-   <div class="context" :class="{'bottom': isBottom}">
+   <div class="context" :class="[{ 'bottom': isBottom }, { 'right': isRight }]">
       <a
          class="context-overlay"
          @click="close"
@@ -19,9 +19,10 @@
 import { computed, onBeforeUnmount, onMounted, Ref, ref } from 'vue';
 
 const contextContent: Ref<HTMLDivElement> = ref(null);
-const contextSize: Ref<DOMRect> = ref(null);
+const contextSize: Ref<{height: number; width: number; subHeight?: number; subWidth?: number}> = ref(null);
 const isBottom: Ref<boolean> = ref(false);
-const props = defineProps<{contextEvent: MouseEvent}>();
+const isRight: Ref<boolean> = ref(false);
+const props = defineProps<{ contextEvent: MouseEvent }>();
 const emit = defineEmits(['close-context']);
 
 const position = computed(() => {
@@ -39,8 +40,16 @@ const position = computed(() => {
             isBottom.value = true;
          }
 
-         if (clientX + contextSize.value.width + 5 >= window.innerWidth)
+         if (clientY + contextSize.value.subHeight + contextSize.value.height >= window.innerHeight)
+            isBottom.value = true;
+
+         if (clientX + contextSize.value.width + 5 >= window.innerWidth) {
             leftCord = `${clientX - contextSize.value.width}px`;
+            isRight.value = true;
+         }
+
+         if (clientX + contextSize.value.subWidth + contextSize.value.width >= window.innerWidth)
+            isRight.value = true;
       }
    }
 
@@ -62,8 +71,20 @@ const onKey = (e: KeyboardEvent) => {
 window.addEventListener('keydown', onKey);
 
 onMounted(() => {
-   if (contextContent.value)
+   if (contextContent.value) {
       contextSize.value = contextContent.value.getBoundingClientRect();
+
+      const submenus = contextContent.value.querySelectorAll<HTMLDivElement>('.context-submenu');
+
+      for (const submenu of submenus) {
+         const submenuSize = submenu.getBoundingClientRect();
+
+         if (!contextSize.value.subHeight || submenuSize.height > contextSize.value.subHeight)
+            contextSize.value.subHeight = submenuSize.height;
+         if (!contextSize.value.subWidth || submenuSize.width > contextSize.value.subWidth)
+            contextSize.value.subWidth = submenuSize.width;
+      }
+   }
 });
 
 onBeforeUnmount(() => {
@@ -73,88 +94,94 @@ onBeforeUnmount(() => {
 
 <style lang="scss">
 .context {
-  display: flex;
-  font-size: 16px;
-  z-index: 400;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  position: fixed;
-  height: 100vh;
-  right: 0;
-  top: 0;
-  left: 0;
-  bottom: 0;
+   display: flex;
+   font-size: 16px;
+   z-index: 400;
+   justify-content: center;
+   align-items: center;
+   overflow: hidden;
+   position: fixed;
+   height: 100vh;
+   right: 0;
+   top: 0;
+   left: 0;
+   bottom: 0;
 
-  &:not(.bottom) .context-submenu {
-    top: -0.2rem;
-  }
+   &:not(.bottom) .context-submenu {
+      top: -0.2rem;
+   }
 
-  &.bottom .context-submenu {
-    bottom: -0.2rem;
-  }
+   &.bottom .context-submenu {
+      bottom: -0.2rem;
+   }
 
-  .context-container {
-    min-width: 100px;
-    z-index: 10;
-    padding: 0;
-    background: #1d1d1d;
-    border-radius: $border-radius;
-    border: 1px solid $bg-color-light-dark;
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    pointer-events: initial;
+   &:not(.right) .context-submenu {
+      left: 100%;
+   }
 
-    .context-element {
-      display: flex;
-      align-items: center;
-      margin: 0.2rem;
-      padding: 0.1rem 0.3rem;
+   &.right .context-submenu {
+      right: 100%;
+   }
+
+   .context-container {
+      min-width: 100px;
+      z-index: 10;
+      padding: 0;
+      background: #1d1d1d;
       border-radius: $border-radius;
-      cursor: pointer;
-      justify-content: space-between;
-      position: relative;
-      white-space: nowrap;
+      border: 1px solid $bg-color-light-dark;
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      pointer-events: initial;
 
-      .context-submenu {
-        border-radius: $border-radius;
-        border: 1px solid $bg-color-light-dark;
-        opacity: 0;
-        visibility: hidden;
-        transition: opacity 0.2s;
-        position: absolute;
-        left: 100%;
-        min-width: 100px;
-        background: #1d1d1d;
+      .context-element {
+         display: flex;
+         align-items: center;
+         margin: 0.2rem;
+         padding: 0.1rem 0.3rem;
+         border-radius: $border-radius;
+         cursor: pointer;
+         justify-content: space-between;
+         position: relative;
+         white-space: nowrap;
+
+         .context-submenu {
+            border-radius: $border-radius;
+            border: 1px solid $bg-color-light-dark;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.2s;
+            position: absolute;
+            min-width: 100px;
+            background: #1d1d1d;
+         }
+
+         &:hover {
+            .context-submenu {
+               display: block;
+               visibility: visible;
+               opacity: 1;
+            }
+         }
       }
+   }
 
-      &:hover {
-        .context-submenu {
-          display: block;
-          visibility: visible;
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  .context-overlay {
-    background: transparent;
-    bottom: 0;
-    cursor: default;
-    display: block;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
+   .context-overlay {
+      background: transparent;
+      bottom: 0;
+      cursor: default;
+      display: block;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+   }
 }
 
 .disabled {
-  pointer-events: none;
-  filter: grayscale(100%);
-  opacity: 0.5;
+   pointer-events: none;
+   filter: grayscale(100%);
+   opacity: 0.5;
 }
-
 </style>

src/renderer/components/ModalAllConnections.vue

@@ -55,20 +55,7 @@
                               <div class="panel-subtitle">
                                  {{ clients.get(connection.client) || connection.client }}
                               </div>
-                              <div class="all-connections-buttons p-absolute d-flex" style="top: 0; right: 0;">
-                                 <i
-                                    v-if="connection.isPinned"
-                                    class="all-connections-pinned mdi mdi-18px"
-                                    :class="connectionHover === connection.uid ? 'mdi-pin-off' : 'mdi-pin'"
-                                    :title="t('word.unpin')"
-                                    @click.stop="unpinConnection(connection.uid)"
-                                 />
-                                 <i
-                                    v-else
-                                    class="all-connections-pin mdi mdi-18px mdi-pin mdi-rotate-45"
-                                    :title="t('word.pin')"
-                                    @click.stop="pinConnection(connection.uid)"
-                                 />
+                              <div class="all-connections-buttons p-absolute d-flex" :style="'top: 0; right: 0;'">
                                  <i
                                     class="all-connections-delete mdi mdi-delete mdi-18px ml-2"
                                     :title="t('word.delete')"
@@ -126,7 +113,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 -->
@@ -171,15 +158,12 @@ const connectionsStore = useConnectionsStore();
 const workspacesStore = useWorkspacesStore();
 
 const { connections,
-   pinnedConnections,
    lastConnections
 } = storeToRefs(connectionsStore);
 const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
 
 const {
    getConnectionName,
-   pinConnection,
-   unpinConnection,
    deleteConnection
 } = connectionsStore;
 const { selectWorkspace } = workspacesStore;
@@ -206,13 +190,10 @@ const sortedConnections = computed(() => {
          const connTime = lastConnections.value.find((lc) => lc.uid === c.uid)?.time || 0;
          return {
             ...c,
-            time: connTime,
-            isPinned: pinnedConnections.value.has(c.uid)
+            time: connTime
          };
       })
       .sort((a, b) => {
-         if (a.isPinned < b.isPinned) return 1;
-         if (a.isPinned > b.isPinned) return -1;
          if (a.time < b.time) return 1;
          if (a.time > b.time) return -1;
          return 0;

src/renderer/components/ModalConnectionAppearence.vue

@@ -0,0 +1,195 @@
+<template>
+   <Teleport to="#window-content">
+      <div class="modal active">
+         <a class="modal-overlay" @click.stop="closeModal" />
+         <div ref="trapRef" class="modal-container p-0">
+            <div class="modal-header pl-2">
+               <div class="modal-title h6">
+                  <div class="d-flex">
+                     <i class="mdi mdi-24px mdi-brush-variant mr-1" />
+                     <span class="cut-text">{{ t('message.editConnectionAppearence') }}</span>
+                  </div>
+               </div>
+               <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+            </div>
+            <div class="modal-body pb-0">
+               <div class="content">
+                  <form class="form-horizontal">
+                     <div class="form-group mb-4">
+                        <div class="col-3">
+                           <label class="form-label">{{ t('word.label') }}</label>
+                        </div>
+                        <div class="col-9">
+                           <input
+                              ref="firstInput"
+                              v-model="localConnection.name"
+                              class="form-input"
+                              type="text"
+                              :placeholder="getConnectionName(localConnection.uid)"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group">
+                        <div class="col-3">
+                           <label class="form-label">{{ t('word.icon') }}</label>
+                        </div>
+                        <div class="col-9 icons-wrapper">
+                           <div
+                              v-for="icon in icons"
+                              :key="icon.name"
+                              class="icon-box"
+                              :title="icon.name"
+                              :class="[icon.code ? `mdi ${icon.code} mdi-36px` : `dbi dbi-${connection.client}`, {'selected': localConnection.icon === icon.code}]"
+                              @click="localConnection.icon = icon.code"
+                           />
+                        </div>
+                     </div>
+                  </form>
+               </div>
+            </div>
+            <div class="modal-footer">
+               <button class="btn btn-primary mr-2" @click.stop="editFolderAppearence">
+                  {{ t('word.update') }}
+               </button>
+               <button class="btn btn-link" @click.stop="closeModal">
+                  {{ t('word.close') }}
+               </button>
+            </div>
+         </div>
+      </div>
+   </Teleport>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, PropType, Ref, ref } from 'vue';
+import { useFocusTrap } from '@/composables/useFocusTrap';
+import { useI18n } from 'vue-i18n';
+import { SidebarElement, useConnectionsStore } from '@/stores/connections';
+import { unproxify } from '@/libs/unproxify';
+
+const connectionsStore = useConnectionsStore();
+
+const { t } = useI18n();
+
+const props = defineProps({
+   connection: {
+      type: Object as PropType<SidebarElement>,
+      required: true
+   }
+});
+
+const emit = defineEmits(['close']);
+
+const { updateConnectionOrder, getConnectionName } = connectionsStore;
+
+const icons = [
+   { name: 'default', code: null },
+
+   // Symbols
+   { name: 'account-group', code: 'mdi-account-group-outline' },
+   { name: 'cloud', code: 'mdi-cloud-outline' },
+   { name: 'key-chain', code: 'mdi-key-chain-variant' },
+   { name: 'lightning-bolt', code: 'mdi-lightning-bolt' },
+   { name: 'map-marker', code: 'mdi-map-marker-radius-outline' },
+   { name: 'api', code: 'mdi-api' },
+   { name: 'chart-line', code: 'mdi-chart-line' },
+   { name: 'chat', code: 'mdi-chat-outline' },
+   { name: 'bug', code: 'mdi-bug-outline' },
+   { name: 'shield', code: 'mdi-shield-outline' },
+   { name: 'cart', code: 'mdi-cart-variant' },
+   { name: 'bank', code: 'mdi-bank-outline' },
+   { name: 'receipt', code: 'mdi-receipt-text-outline' },
+   { name: 'raspberry-pi', code: 'mdi-raspberry-pi' },
+   { name: 'book', code: 'mdi-book-outline' },
+   { name: 'web', code: 'mdi-web' },
+   { name: 'multimedia', code: 'mdi-multimedia' },
+   { name: 'qr-code', code: 'mdi-qrcode' },
+   { name: 'flask', code: 'mdi-flask-outline' },
+   { name: 'memory', code: 'mdi-memory' },
+   { name: 'cube', code: 'mdi-cube-outline' },
+   { name: 'weather', code: 'mdi-weather-partly-snowy-rainy' },
+   { name: 'controller', code: 'mdi-controller' },
+   { name: 'home-group', code: 'mdi-home-group' },
+
+   // Vehicles
+   { name: 'truck', code: 'mdi-truck-outline' },
+   { name: 'car', code: 'mdi-car' },
+   { name: 'motorbike', code: 'mdi-atv' },
+   { name: 'train', code: 'mdi-train' },
+   { name: 'airplane', code: 'mdi-airplane' },
+   { name: 'ferry', code: 'mdi-ferry' },
+
+   // Brand
+   { name: 'docker', code: 'mdi-docker' },
+   { name: 'open-source', code: 'mdi-open-source-initiative' },
+   { name: 'aws', code: 'mdi-aws' },
+   { name: 'google-cloud', code: 'mdi-google-cloud' },
+   { name: 'microsoft-azure', code: 'mdi-microsoft-azure' },
+   { name: 'linux', code: 'mdi-linux' },
+   { name: 'microsoft-windows', code: 'mdi-microsoft-windows' },
+   { name: 'apple', code: 'mdi-apple' },
+   { name: 'android', code: 'mdi-android' }
+];
+
+const { trapRef } = useFocusTrap();
+
+const firstInput: Ref<HTMLInputElement> = ref(null);
+const localConnection: Ref<SidebarElement> = ref(unproxify(props.connection));
+
+const editFolderAppearence = () => {
+   updateConnectionOrder(localConnection.value);
+   closeModal();
+};
+
+const closeModal = () => emit('close');
+
+const onKey =(e: KeyboardEvent) => {
+   e.stopPropagation();
+   if (e.key === 'Escape')
+      closeModal();
+};
+
+onBeforeUnmount(() => {
+   window.removeEventListener('keydown', onKey);
+});
+
+</script>
+
+<style scoped lang="scss">
+  .modal-container {
+    max-width: 360px;
+  }
+
+  .icons-wrapper{
+      display: grid;
+      grid-template-columns: repeat(auto-fill, 40px);
+      gap: 5px;
+
+     .icon-box {
+         height: 40px;
+         width: 40px;
+         border-radius: 4px;
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         cursor: pointer;
+
+         &.selected {
+            outline: 2px solid $primary-color;
+            border-radius: 8px;
+         }
+     }
+  }
+
+  .theme-light {
+      .icons-wrapper {
+         .dbi {
+            filter: invert(100%) opacity(.8);
+
+            &.selected {
+               outline-color: #1c96d6;
+            }
+         }
+      }
+  }
+</style>

src/renderer/components/ModalFolderAppearence.vue

@@ -0,0 +1,152 @@
+<template>
+   <Teleport to="#window-content">
+      <div class="modal active">
+         <a class="modal-overlay" @click.stop="closeModal" />
+         <div ref="trapRef" class="modal-container p-0">
+            <div class="modal-header pl-2">
+               <div class="modal-title h6">
+                  <div class="d-flex">
+                     <i class="mdi mdi-24px mdi-folder-edit mr-1" />
+                     <span class="cut-text">{{ t('message.editFolder') }}</span>
+                  </div>
+               </div>
+               <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+            </div>
+            <div class="modal-body pb-0">
+               <div class="content">
+                  <form class="form-horizontal">
+                     <div class="form-group mb-4">
+                        <div class="col-3">
+                           <label class="form-label">{{ t('word.name') }}</label>
+                        </div>
+                        <div class="col-9">
+                           <input
+                              ref="firstInput"
+                              v-model="localFolder.name"
+                              class="form-input"
+                              type="text"
+                              required
+                              :placeholder="t('message.folderName')"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group">
+                        <div class="col-3">
+                           <label class="form-label">{{ t('word.color') }}</label>
+                        </div>
+                        <div class="col-9 color-wrapper">
+                           <div
+                              v-for="color in colorPalette"
+                              :key="color.name"
+                              class="color-box"
+                              :title="color.name"
+                              :style="`background-color: ${color.hex}`"
+                              @click="localFolder.color = color.hex"
+                           >
+                              <i v-if="localFolder.color === color.hex" class="mdi mdi-check" />
+                           </div>
+                        </div>
+                     </div>
+                  </form>
+               </div>
+            </div>
+            <div class="modal-footer">
+               <button class="btn btn-primary mr-2" @click.stop="editFolderAppearence">
+                  {{ t('word.update') }}
+               </button>
+               <button class="btn btn-link" @click.stop="closeModal">
+                  {{ t('word.close') }}
+               </button>
+            </div>
+         </div>
+      </div>
+   </Teleport>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, PropType, Ref, ref } from 'vue';
+import { useFocusTrap } from '@/composables/useFocusTrap';
+import { useI18n } from 'vue-i18n';
+import { SidebarElement, useConnectionsStore } from '@/stores/connections';
+import { unproxify } from '@/libs/unproxify';
+
+const connectionsStore = useConnectionsStore();
+
+const { t } = useI18n();
+
+const props = defineProps({
+   folder: {
+      type: Object as PropType<SidebarElement>,
+      required: true
+   }
+});
+
+const emit = defineEmits(['close']);
+
+const { updateConnectionOrder } = connectionsStore;
+
+const colorPalette = [
+   { name: 'default', hex: '#E36929' },
+   { name: 'grape-fruit', hex: '#ED5565' },
+   { name: 'rose', hex: '#E3242B' },
+   { name: 'fire', hex: '#FDA50F' },
+   { name: 'sunflower', hex: '#FFCE54' },
+   { name: 'moss', hex: '#8A985E' },
+   { name: 'grass', hex: '#6DCD05' },
+   { name: 'emerald', hex: '#038835' },
+   { name: 'mint', hex: '#48CFAD' },
+   { name: 'aqua', hex: '#4FC1E9' },
+   { name: 'royal-lblue', hex: '#4169E1' },
+   { name: 'blue-jeans', hex: '#5D9CEC' },
+   { name: 'stone', hex: '#59788E' },
+   { name: 'lavander', hex: '#AC92EC' },
+   { name: 'pink-rose', hex: '#EC87C0' },
+   { name: 'smoke', hex: '#BEBDB8' },
+   { name: 'slate', hex: '#757C88' }
+];
+
+const { trapRef } = useFocusTrap();
+
+const firstInput: Ref<HTMLInputElement> = ref(null);
+const localFolder: Ref<SidebarElement> = ref(unproxify(props.folder));
+
+const editFolderAppearence = () => {
+   updateConnectionOrder(localFolder.value);
+   closeModal();
+};
+
+const closeModal = () => emit('close');
+
+const onKey =(e: KeyboardEvent) => {
+   e.stopPropagation();
+   if (e.key === 'Escape')
+      closeModal();
+};
+
+onBeforeUnmount(() => {
+   window.removeEventListener('keydown', onKey);
+});
+
+</script>
+
+<style scoped lang="scss">
+  .modal-container {
+    max-width: 360px;
+  }
+
+  .color-wrapper{
+      display: grid;
+      grid-template-columns: repeat(auto-fill, 20px);
+      gap: 5px;
+
+     .color-box {
+         height: 20px;
+         width: 20px;
+         border-radius: 4px;
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         cursor: pointer;
+     }
+  }
+</style>

src/renderer/components/ModalSettings.vue

@@ -86,7 +86,7 @@
                                     />
                                  </div>
                                  <div class="col-4 col-sm-12 px-2 p-vcentered">
-                                    <small class="d-block" style="line-height: 1.1; font-size: 70%;">
+                                    <small class="d-block" :style="'line-height: 1.1; font-size: 70%;'">
                                        {{ t('message.missingOrIncompleteTranslation') }}<br>
                                        <a class="text-bold c-hand" @click="openOutside('https://github.com/antares-sql/antares/wiki/Translate-Antares')">{{ t('message.findOutHowToContribute') }}</a>
                                     </small>
@@ -196,6 +196,19 @@
                                     </label>
                                  </div>
                               </div>
+                              <div class="form-group column col-12 mb-0">
+                                 <div class="col-5 col-sm-12">
+                                    <label class="form-label">
+                                       {{ t('message.executeSelectedQuery') }}
+                                    </label>
+                                 </div>
+                                 <div class="col-3 col-sm-12">
+                                    <label class="form-switch d-inline-block" @click.prevent="toggleExecuteSelected">
+                                       <input type="checkbox" :checked="selectedExecuteSelected">
+                                       <i class="form-icon" />
+                                    </label>
+                                 </div>
+                              </div>
                            </div>
                         </form>
                      </div>
@@ -379,6 +392,7 @@ const {
    dataTabLimit: pageSize,
    autoComplete: selectedAutoComplete,
    lineWrap: selectedLineWrap,
+   executeSelected: selectedExecuteSelected,
    notificationsTimeout,
    restoreTabs,
    disableBlur,
@@ -398,6 +412,7 @@ const {
    changeDisableScratchpad,
    changeAutoComplete,
    changeLineWrap,
+   changeExecuteSelected,
    changeApplicationTheme,
    changeEditorTheme,
    changeEditorFontSize,
@@ -550,6 +565,10 @@ const toggleLineWrap = () => {
    changeLineWrap(!selectedLineWrap.value);
 };
 
+const toggleExecuteSelected = () => {
+   changeExecuteSelected(!selectedExecuteSelected.value);
+};
+
 localLocale.value = selectedLocale.value;
 localPageSize.value = pageSize.value as number;
 localTimeout.value = notificationsTimeout.value as number;

src/renderer/components/SettingBarConnections.vue

@@ -0,0 +1,218 @@
+<template>
+   <Draggable
+      :list="localList"
+      item-key="'uid'"
+      ghost-class="ghost"
+      :group="{ name: 'connections', pull: 'clone' }"
+      :swap-threshold="0.3"
+      @start="emit('start', $event)"
+      @end="emit('end', $event)"
+      @change="emit('update:modelValue', localList)"
+   >
+      <template #item="{ element }">
+         <li
+            v-if="element.isFolder || !folderedConnections.includes(element.uid)"
+            :draggable="true"
+            :class="{'folder': element.isFolder}"
+            @dragstart="draggedElement = element.uid"
+            @dragend="dragEnd"
+            @contextmenu.prevent="emit('context', $event, element)"
+         >
+            <div
+               v-if="!element.isFolder && !folderedConnections.includes(element.uid)"
+               v-tooltip="{
+                  strategy: 'fixed',
+                  placement: 'right',
+                  content: getConnectionName(element.uid)
+               }"
+               class="settingbar-element btn btn-link"
+               :class="{ 'selected': element.uid === selectedWorkspace && coveredElement !== element.uid }"
+               placement="right"
+               strategy="fixed"
+               @click.stop="selectWorkspace(element.uid)"
+            >
+               <!-- Creates a new folder -->
+               <SettingBarConnections
+                  v-if="draggedElement && !foldersUid.includes(draggedElement)"
+                  class="drag-area"
+                  :class="[{'folder-preview': coveredElement === element.uid && draggedElement !== coveredElement}]"
+                  :list="dummyNested"
+                  @dragenter="coveredElement = element.uid"
+                  @dragleave="coveredElement = false"
+                  @change="createFolder"
+               />
+               <i v-if="coveredElement === element.uid && draggedElement !== coveredElement" class="settingbar-element-icon mdi mdi-folder-plus mdi-36px" />
+               <template v-else>
+                  <div class="settingbar-element-icon-wrapper">
+                     <i
+                        class="settingbar-element-icon dbi"
+                        :class="[element.icon ? `mdi ${element.icon} mdi-36px`: `dbi-${element.client}`, getStatusBadge(element.uid)]"
+                     />
+                     <small class="settingbar-element-name">{{ element.name || getConnectionName(element.uid) }}</small>
+                  </div>
+               </template>
+            </div>
+            <SettingBarConnectionsFolder
+               v-else-if="element.isFolder"
+               :key="`${element.uid}-${element.connections.length}`"
+               :folder="element"
+               :covered-element="coveredElement"
+               :dragged-element="draggedElement"
+               :folder-drag="folderDrag"
+               @select-workspace="selectWorkspace"
+               @covered="coveredElement = element.uid"
+               @uncovered="coveredElement = false"
+               @folder-sort="emit('update:modelValue', localList)"
+               @folder-drag="folderDrag = $event"
+               @context="emit('context', $event.event, $event.content)"
+            />
+         </li>
+      </template>
+   </Draggable>
+</template>
+<script setup lang="ts">
+import { computed, PropType, Ref, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import * as Draggable from 'vuedraggable';
+import { SidebarElement, useConnectionsStore } from '@/stores/connections';
+import { useWorkspacesStore } from '@/stores/workspaces';
+import SettingBarConnectionsFolder from '@/components/SettingBarConnectionsFolder.vue';
+
+const workspacesStore = useWorkspacesStore();
+const connectionsStore = useConnectionsStore();
+
+const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+const { getFolders: folders } = storeToRefs(connectionsStore);
+
+const { getWorkspace, selectWorkspace } = workspacesStore;
+const { getConnectionName, addFolder } = connectionsStore;
+
+const props = defineProps({
+   modelValue: {
+      type: Array as PropType<SidebarElement[]>,
+      default: () => []
+   }
+});
+
+const emit = defineEmits(['start', 'end', 'move', 'context', 'update:modelValue']);
+
+const localList = ref(props.modelValue);
+const dummyNested = ref([]);
+const draggedElement: Ref<string | false> = ref(false);
+const coveredElement: Ref<string | false> = ref(false);
+const folderDrag = ref(false);
+
+const foldersUid = computed(() => folders.value.reduce<string[]>((acc, curr) => {
+   acc.push(curr.uid);
+   return acc;
+}, []));
+const folderedConnections = computed(() => {
+   return folders.value.reduce<string[]>((acc, curr) => {
+      acc = [...acc, ...curr.connections];
+      return acc;
+   }, []);
+});
+
+const dragEnd = () => {
+   coveredElement.value = false;
+   draggedElement.value = false;
+};
+
+const createFolder = ({ added }: {added: { element: SidebarElement }}) => {
+   if (typeof coveredElement.value === 'string' && !added.element.isFolder) {
+      // Create folder
+      addFolder({
+         after: coveredElement.value,
+         connections: [coveredElement.value, added.element.uid]
+      });
+
+      coveredElement.value = false;
+   }
+};
+
+const getStatusBadge = (uid: string) => {
+   if (getWorkspace(uid)) {
+      const status = getWorkspace(uid).connectionStatus;
+
+      switch (status) {
+         case 'connected':
+            return 'badge badge-connected';
+         case 'connecting':
+            return 'badge badge-connecting';
+         case 'failed':
+            return 'badge badge-failed';
+         default:
+            return '';
+      }
+   }
+};
+
+watch(() => dummyNested.value.length, () => {
+   dummyNested.value = [];
+});
+
+watch(() => props.modelValue, (value) => {
+   localList.value = value;
+   folderDrag.value = false;// Prenent some edge cases
+});
+
+</script>
+<style lang="scss">
+.drag-area {
+  background-color: transparent;
+  z-index: 10;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  right: 20px;
+  bottom: 20px;
+  transition: all .2s;
+
+  &.folder-preview {
+      border: 2px dotted;
+      border-radius: 15px;
+      left: 5px;
+      top: 5px;
+      right: 5px;
+      bottom: 5px;
+  }
+
+   li {
+      display: none!important;
+   }
+}
+
+.ghost:not(.folder) {
+   height: $settingbar-width;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   padding: 4px;
+   position: relative;
+   transition: opacity .2s;
+
+   .settingbar-element {
+      border-radius: 15px!important;
+      background: rgba($color: #fff, $alpha: 0.1);
+
+      .settingbar-element-name {
+         position: absolute;
+         bottom: 5px;
+         left: 3px!important;
+         text-align: center!important;
+         font-size: 65%;
+         font-style: normal;
+         display: block;
+         overflow: hidden;
+         white-space: nowrap;
+         text-overflow: ellipsis;
+         line-height: 1;
+      }
+   }
+}
+
+.settingbar-element-icon {
+   display: flex;
+   color: $body-font-color-dark;
+}
+</style>

src/renderer/components/SettingBarConnectionsFolder.vue

@@ -0,0 +1,451 @@
+<template>
+   <div
+      v-tooltip="{
+         strategy: 'fixed',
+         placement: 'right',
+         content: folder.name,
+         disabled: isOpen || !folder.name
+      }"
+      class="settingbar-element folder btn btn-link p-1"
+      :class="[{ 'selected-inside': hasSelectedInside && !isOpen }]"
+      :style="isOpen ? `height: auto; opacity: 1;` : null"
+   >
+      <Draggable
+         class="folder-container"
+         :item-key="((item: string) => localList.indexOf(item))"
+         :class="[{'opened': isOpen}]"
+         :style="[
+            `background: ${folder.color};`,
+            isOpen ? `max-height: ${60*(folder.connections.length+1)}px` : 'max-height: 60px',
+            !isOpen || folderDrag ? `overflow: hidden;` : ''
+         ]"
+         :list="localList"
+         ghost-class="ghost"
+         :group="{ name: 'connections', put: folderDrag ? undefined : 'clone' }"
+         @start="dragStart"
+         @end="dragStop"
+      >
+         <template #header>
+            <div
+               v-if="!isOpen"
+               class="folder-overlay"
+               @click="openFolder"
+               @contextmenu.stop="emit('context', {event: $event, content: folder})"
+            />
+            <div
+               v-if="isOpen"
+               class="folder-icon"
+               :style="`color: ${folder.color};`"
+               @click="closeFolder"
+            >
+               <i class="folder-icon-open mdi mdi-folder-open mdi-36px" />
+               <i class="folder-icon-close mdi mdi-folder mdi-36px" />
+            </div>
+         </template>
+         <template #item="{ element }">
+            <div
+               :key="element"
+               v-tooltip="{
+                  strategy: 'fixed',
+                  placement: 'right',
+                  content: getConnectionName(element)
+               }"
+               class="folder-element"
+               :class="{ 'selected': element === selectedWorkspace }"
+               @click="emit('select-workspace', element)"
+               @contextmenu.stop="emit('context', {event: $event, content: getConnectionOrderByUid(element)})"
+            >
+               <i
+                  class="folder-element-icon dbi"
+                  :class="[getConnectionOrderByUid(element)?.icon ? `mdi ${getConnectionOrderByUid(element).icon}`: `dbi-${getConnectionOrderByUid(element)?.client}`, getStatusBadge(element)]"
+               />
+               <small v-if="isOpen" class="folder-element-name">{{ getConnectionOrderByUid(element)?.name || getConnectionName(element) }}</small>
+            </div>
+         </template>
+      </Draggable>
+      <SettingBarConnections
+         v-if="draggedElement && !foldersUid.includes(draggedElement)"
+         class="drag-area"
+         :class="[{'folder-preview': coveredElement === folder.uid && draggedElement !== coveredElement}]"
+         :list="dummyNested"
+         :swap-threshold="1"
+         @dragenter="emit('covered')"
+         @dragleave="emit('uncovered')"
+         @change="addIntoFolder"
+      />
+   </div>
+</template>
+<script setup lang="ts">
+import { computed, PropType, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import * as Draggable from 'vuedraggable';
+import { SidebarElement, useConnectionsStore } from '@/stores/connections';
+import { useWorkspacesStore } from '@/stores/workspaces';
+import SettingBarConnections from '@/components/SettingBarConnections.vue';
+
+const workspacesStore = useWorkspacesStore();
+const connectionsStore = useConnectionsStore();
+
+const { getFolders: folders } = storeToRefs(connectionsStore);
+const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+const { getWorkspace } = workspacesStore;
+const { getConnectionOrderByUid, getConnectionName, addToFolder } = connectionsStore;
+
+const foldersOpened = JSON.parse(localStorage.getItem('opened-folders')) || [];
+
+const props = defineProps({
+   folder: {
+      type: Object as PropType<SidebarElement>,
+      required: true
+   },
+   folderDrag: {
+      type: Boolean,
+      default: false
+   },
+   draggedElement: {
+      type: [String, Boolean] as PropType<string | false>,
+      required: true
+   },
+   coveredElement: {
+      type: [String, Boolean] as PropType<string | false>,
+      required: true
+   }
+});
+
+const emit = defineEmits(['context', 'covered', 'uncovered', 'select-workspace', 'folder-sort', 'folder-drag']);
+
+const isOpen = ref(foldersOpened.includes(props.folder.uid));
+const localList = ref(props.folder.connections);
+const dummyNested = ref([]);
+
+const hasSelectedInside = computed(() => localList.value.includes(selectedWorkspace.value));
+
+const foldersUid = computed(() => folders.value.reduce<string[]>((acc, curr) => {
+   acc.push(curr.uid);
+   return acc;
+}, []));
+
+const addIntoFolder = ({ added }: {added: { element: SidebarElement }}) => {
+   if (typeof props.coveredElement === 'string' && !added.element.isFolder) {
+      addToFolder({
+         folder: props.coveredElement,
+         connection: added.element.uid
+      });
+
+      emit('uncovered');
+   }
+};
+
+const getStatusBadge = (uid: string) => {
+   if (getWorkspace(uid)) {
+      const status = getWorkspace(uid).connectionStatus;
+
+      switch (status) {
+         case 'connected':
+            return 'badge badge-connected';
+         case 'connecting':
+            return 'badge badge-connecting';
+         case 'failed':
+            return 'badge badge-failed';
+         default:
+            return '';
+      }
+   }
+};
+
+const openFolder = () => {
+   isOpen.value = true;
+   const opened: string[] = JSON.parse(localStorage.getItem('opened-folders')) || [];
+   opened.push(props.folder.uid);
+   localStorage.setItem('opened-folders', JSON.stringify(opened));
+};
+
+const closeFolder = () => {
+   isOpen.value = false;
+   let opened: string[] = JSON.parse(localStorage.getItem('opened-folders')) || [];
+   opened = opened.filter(uid => uid !== props.folder.uid);
+   localStorage.setItem('opened-folders', JSON.stringify(opened));
+};
+
+const dragStart = () => {
+   emit('folder-drag', true);
+};
+
+const dragStop = () => {
+   emit('folder-drag', false);
+};
+
+watch(() => dummyNested.value.length, () => {
+   dummyNested.value = [];
+});
+
+emit('folder-sort');// To apply changes on component key change
+</script>
+<style lang="scss" scoped>
+.folder {
+   position: relative;
+   &.selected-inside {
+      opacity: 1!important;
+
+      &::after {
+         height: 2.5rem;
+         position: absolute;
+      }
+   }
+
+   &::after {
+      content: "";
+      height: 0;
+      width: 3px;
+      transition: height 0.2s;
+      background-color: rgba($color: #fff, $alpha: 0.8);
+      border-radius: $border-radius;
+      position: absolute;
+      left: 0;
+   }
+}
+
+.folder-container {
+   display: grid;
+   grid-template-columns: auto auto;
+   grid-template-rows: 50%;
+   gap: 4px;
+   padding: 4px;
+   height: 100%;
+   width: 100%;
+   border-radius: 15px;
+   transition: background .3s;
+   color: $body-font-color-dark;
+
+   &::before {
+      content: "";
+      height: 0;
+      width: 3px;
+      transition: height 0.2s;
+      background-color: rgba($color: #fff, $alpha: 0.8);
+      border-radius: $border-radius;
+      position: absolute;
+      left: -11px;
+   }
+
+   .folder-element-icon {
+      margin: 0 auto;
+
+      &.badge::after {
+         top: 10px;
+         right: 0px;
+         position: absolute;
+         display: none;
+      }
+
+      &.badge-update::after {
+         bottom: initial;
+      }
+   }
+
+   &.opened {
+      gap: 4px 6px;
+      grid-template-columns: auto;
+      grid-template-rows: auto;
+      background: rgba($color: #fff, $alpha: 0.1)!important;
+      transition: max-height .1s;
+
+      .folder-element {
+         opacity: .6;
+         height: 2.5rem;
+         max-width: initial;
+         max-height: initial;
+         background: transparent;
+
+         &.ghost {
+            background: $bg-color-light-dark;
+            &.selected::before {
+               height: 0;
+               position: absolute;
+            }
+         }
+
+         &.selected {
+            opacity: 1;
+
+            &::before {
+               height: 2.5rem;
+               position: absolute;
+            }
+         }
+
+         &::before {
+            content: "";
+            height: 0;
+            width: 3px;
+            transition: height 0.2s;
+            background-color: rgba($color: #fff, $alpha: 0.8);
+            border-radius: $border-radius;
+            position: absolute;
+            left: -11px;
+         }
+
+         .folder-element-icon {
+            margin: 0 auto;
+            font-size: 36px;
+            display: flex;
+
+            &.badge::after {
+               top: 14px;
+               right: -4px;
+               position: absolute;
+               display: block;
+            }
+
+            &.badge-update::after {
+               bottom: initial;
+            }
+         }
+      }
+
+      .folder-icon {
+         height: 2.5rem;
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         margin-bottom: 3px;
+         position: relative;
+         transition: opacity .2s;
+
+         .folder-icon-open {
+            display: block;
+         }
+
+         .folder-icon-close {
+            display: none;
+         }
+
+         &:hover {
+            opacity: 1;
+
+            .folder-icon-open {
+               display: none;
+            }
+
+            .folder-icon-close {
+               display: block;
+            }
+         }
+      }
+   }
+
+   .folder-overlay {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 10;
+   }
+
+   .folder-element {
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      max-width: 23px;
+      max-height: 23px;
+      margin-bottom: 3px;
+      position: relative;
+      transition: opacity .2s;
+      background: $bg-color-light-dark;
+      border-radius: 8px;
+
+      &.ghost {
+         margin:0 ;
+         margin-bottom: 3px;
+         height: 2.5rem;
+      }
+
+      &:hover, &.selected {
+         opacity: 1;
+      }
+
+      .folder-element-icon {
+         transition: margin .2s;
+      }
+
+      .folder-element-name {
+         position: absolute;
+         max-width: 90%;
+         bottom: 0;
+         font-size: 65%;
+         font-style: normal;
+         display: block;
+         overflow: hidden;
+         white-space: nowrap;
+         text-overflow: ellipsis;
+         line-height: 1;
+         transition: bottom .2s;
+      }
+   }
+
+   &:not(.opened){
+      .folder-element {
+
+         .folder-element-icon {
+            width: 21px;
+            height: 21px;
+            font-size: 16px;
+         }
+      }
+   }
+}
+
+.ghost {
+   border-radius: 15px!important;
+   background: rgba($color: #fff, $alpha: 0.1);
+
+   &.folder-element {
+      height: $settingbar-width;
+      border-radius: 15px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 4px;
+      position: relative;
+      transition: opacity .2s;
+
+      &:hover, &.selected {
+         opacity: 1;
+      }
+
+      .folder-element-icon {
+         margin: 0 auto;
+         font-size: 36px;
+         display: flex;
+         align-items: center;
+         justify-content: center;
+
+         &.badge::after {
+            top: 5px;
+            right: -4px;
+            position: absolute;
+         }
+
+         &.badge-update::after {
+            bottom: initial;
+         }
+      }
+
+      .folder-element-name {
+         position: absolute;
+         max-width: 90%;
+         bottom: 5px;
+         text-align: center;
+         font-size: 65%;
+         font-style: normal;
+         display: block;
+         overflow: hidden;
+         white-space: nowrap;
+         text-overflow: ellipsis;
+         line-height: 1;
+      }
+   }
+}
+</style>

src/renderer/components/SettingBarContext.vue

@@ -3,20 +3,6 @@
       :context-event="contextEvent"
       @close-context="$emit('close-context')"
    >
-      <div
-         v-if="isPinned"
-         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>
-      </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>
-      </div>
       <div
          v-if="isConnected"
          class="context-element"
@@ -24,9 +10,16 @@
       >
          <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">
+      <div
+         v-if="!contextConnection.isFolder"
+         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>
       </div>
+      <div class="context-element" @click.stop="showAppearenceModal">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-brush-variant text-light pr-1" /> {{ t('word.appearence') }}</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>
       </div>
@@ -38,7 +31,7 @@
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-server-remove mr-1" /> {{ t('message.deleteConnection') }}
+               <i class="mdi mdi-24px mr-1" :class="[contextConnection.isFolder ? 'mdi-folder-remove' : 'mdi-server-remove']" /> {{ t(contextConnection.isFolder ? 'message.deleteFolder' : 'message.deleteConnection') }}
             </div>
          </template>
          <template #body>
@@ -47,6 +40,16 @@
             </div>
          </template>
       </ConfirmModal>
+      <ModalFolderAppearence
+         v-if="isFolderEdit"
+         :folder="contextConnection"
+         @close="hideAppearenceModal"
+      />
+      <ModalConnectionAppearence
+         v-if="isConnectionEdit"
+         :connection="contextConnection"
+         @close="hideAppearenceModal"
+      />
    </BaseContextMenu>
 </template>
 
@@ -55,26 +58,24 @@ 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 { SidebarElement, 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';
+import ModalFolderAppearence from '@/components/ModalFolderAppearence.vue';
+import ModalConnectionAppearence from '@/components/ModalConnectionAppearence.vue';
 
 const { t } = useI18n();
 
 const connectionsStore = useConnectionsStore();
 
 const {
+   getConnectionByUid,
    getConnectionName,
    addConnection,
-   deleteConnection,
-   pinConnection,
-   unpinConnection
+   deleteConnection
 } = connectionsStore;
 
-const { pinnedConnections } = storeToRefs(connectionsStore);
-
 const workspacesStore = useWorkspacesStore();
 const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
 
@@ -86,16 +87,17 @@ const {
 
 const props = defineProps({
    contextEvent: MouseEvent,
-   contextConnection: Object as Prop<ConnectionParams>
+   contextConnection: Object as Prop<SidebarElement>
 });
 
 const emit = defineEmits(['close-context']);
 
 const isConfirmModal = ref(false);
+const isFolderEdit = ref(false);
+const isConnectionEdit = ref(false);
 
-const connectionName = computed(() => getConnectionName(props.contextConnection.uid));
-const isConnected = computed(() => getWorkspace(props.contextConnection.uid).connectionStatus === 'connected');
-const isPinned = computed(() => pinnedConnections.value.has(props.contextConnection.uid));
+const connectionName = computed(() => props.contextConnection.name || getConnectionName(props.contextConnection.uid) || t('word.folder', 1));
+const isConnected = computed(() => getWorkspace(props.contextConnection.uid)?.connectionStatus === 'connected');
 
 const confirmDeleteConnection = () => {
    if (selectedWorkspace.value === props.contextConnection.uid)
@@ -105,7 +107,7 @@ const confirmDeleteConnection = () => {
 };
 
 const duplicateConnection = () => {
-   let connectionCopy = Object.assign({}, props.contextConnection);
+   let connectionCopy = getConnectionByUid(props.contextConnection.uid);
    connectionCopy = {
       ...connectionCopy,
       uid: uidGen('C'),
@@ -116,6 +118,19 @@ const duplicateConnection = () => {
    closeContext();
 };
 
+const showAppearenceModal = () => {
+   if (props.contextConnection.isFolder)
+      isFolderEdit.value = true;
+   else
+      isConnectionEdit.value = true;
+};
+
+const hideAppearenceModal = () => {
+   isConnectionEdit.value = false;
+   isFolderEdit.value = false;
+   closeContext();
+};
+
 const showConfirmModal = () => {
    isConfirmModal.value = true;
 };
@@ -125,16 +140,6 @@ const hideConfirmModal = () => {
    closeContext();
 };
 
-const pin = () => {
-   pinConnection(props.contextConnection.uid);
-   closeContext();
-};
-
-const unpin = () => {
-   unpinConnection(props.contextConnection.uid);
-   closeContext();
-};
-
 const disconnect = () => {
    disconnectWorkspace(props.contextConnection.uid);
    closeContext();

src/renderer/components/TheFooter.vue

@@ -1,5 +1,9 @@
 <template>
-   <div id="footer" class="text-light">
+   <div
+      id="footer"
+      :class="[lightColors.includes(footerColor) ? 'text-dark' : 'text-light']"
+      :style="`background-color: ${footerColor};`"
+   >
       <div class="footer-left-elements">
          <ul class="footer-elements">
             <li class="footer-element">
@@ -50,6 +54,7 @@ import { useApplicationStore } from '@/stores/application';
 import { useWorkspacesStore } from '@/stores/workspaces';
 import { computed, ComputedRef } from 'vue';
 import { useConsoleStore } from '@/stores/console';
+import { useConnectionsStore } from '@/stores/connections';
 
 const { t } = useI18n();
 
@@ -62,14 +67,19 @@ interface DatabaseInfos {// TODO: temp
 
 const applicationStore = useApplicationStore();
 const workspacesStore = useWorkspacesStore();
+const connectionsStore = useConnectionsStore();
+
+const lightColors = ['#FFCE54', '#FDA50F', '#BEBDB8', '#48CFAD'];
 
 const { getSelected: workspaceUid } = storeToRefs(workspacesStore);
 const { toggleConsole } = useConsoleStore();
 
 const { showSettingModal } = applicationStore;
 const { getWorkspace } = workspacesStore;
+const { getConnectionFolder } = connectionsStore;
 
 const workspace = computed(() => getWorkspace(workspaceUid.value));
+const footerColor = computed(() => getConnectionFolder(workspaceUid.value)?.color || '#E36929');
 const version: ComputedRef<DatabaseInfos> = computed(() => {
    return getWorkspace(workspaceUid.value) ? workspace.value.version : null;
 });

src/renderer/components/TheSettingBar.vue

@@ -8,47 +8,10 @@
             @close-context="isContext = false"
          />
          <ul class="settingbar-elements">
-            <Draggable
-               v-model="pinnedConnectionsArr"
-               :item-key="'uid'"
-               @start="isDragging = true"
-               @end="dragStop"
-            >
-               <template #item="{ element }">
-                  <li
-                     :draggable="true"
-                     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)"
-                  >
-                     <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>
-
-            <div v-if="pinnedConnectionsArr.length" class="divider" />
-
-            <li
-               v-for="connection in unpinnedConnectionsArr"
-               :key="connection.uid"
-               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)"
-            >
-               <i
-                  class="settingbar-element-icon dbi"
-                  :class="[`dbi-${connection.client}`, getStatusBadge(connection.uid)]"
-               />
-               <small class="settingbar-element-name">{{ getConnectionName(connection.uid) }}</small>
-            </li>
+            <SettingBarConnections
+               v-model="connectionsArr"
+               @context="contextMenu"
+            />
          </ul>
       </div>
 
@@ -56,19 +19,31 @@
          <ul class="settingbar-elements">
             <li
                v-if="isScrollable"
+               v-tooltip="{
+                  strategy: 'fixed',
+                  placement: 'right',
+                  content: t('message.allConnections')
+               }"
                class="settingbar-element btn btn-link"
-               :title="t('message.allConnections')"
                @click="emit('show-connections-modal')"
             >
-               <i class="settingbar-element-icon mdi mdi-24px mdi-dots-horizontal text-light" />
+               <div class="settingbar-element-icon-wrapper">
+                  <i class="settingbar-element-icon mdi mdi-24px mdi-dots-horizontal text-light" />
+               </div>
             </li>
             <li
+               v-tooltip="{
+                  strategy: 'fixed',
+                  placement: 'right',
+                  content: t('message.addConnection')
+               }"
                class="settingbar-element btn btn-link"
                :class="{ 'selected': 'NEW' === selectedWorkspace }"
-               :title="t('message.addConnection')"
                @click="selectWorkspace('NEW')"
             >
-               <i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
+               <div class="settingbar-element-icon-wrapper">
+                  <i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
+               </div>
             </li>
          </ul>
       </div>
@@ -77,15 +52,23 @@
          <ul class="settingbar-elements">
             <li
                v-if="!disableScratchpad"
+               v-tooltip="{
+                  strategy: 'fixed',
+                  placement: 'right',
+                  content: t('word.scratchpad')
+               }"
                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" />
             </li>
             <li
+               v-tooltip="{
+                  strategy: 'fixed',
+                  placement: 'right',
+                  content: t('word.settings')
+               }"
                class="settingbar-element btn btn-link"
-               :title="t('word.settings')"
                @click="showSettingModal('general')"
             >
                <i
@@ -102,16 +85,16 @@
 import { ref, Ref, computed, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useApplicationStore } from '@/stores/application';
-import { useConnectionsStore } from '@/stores/connections';
+import { useConnectionsStore, SidebarElement } from '@/stores/connections';
 import { useWorkspacesStore } from '@/stores/workspaces';
 import { useSettingsStore } from '@/stores/settings';
-import * as Draggable from 'vuedraggable';
 import SettingBarContext from '@/components/SettingBarContext.vue';
-import { ConnectionParams } from 'common/interfaces/antares';
+import SettingBarConnections from '@/components/SettingBarConnections.vue';
 import { useElementBounding } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
+localStorage.setItem('opened-folders', '[]');
 
 const applicationStore = useApplicationStore();
 const connectionsStore = useConnectionsStore();
@@ -119,121 +102,42 @@ const workspacesStore = useWorkspacesStore();
 const settingsStore = useSettingsStore();
 
 const { updateStatus } = storeToRefs(applicationStore);
-const { connections: storedConnections, pinnedConnections, lastConnections } = storeToRefs(connectionsStore);
 const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+const { connectionsOrder } = storeToRefs(connectionsStore);
 const { disableScratchpad } = storeToRefs(settingsStore);
 
 const { showSettingModal, showScratchpad } = applicationStore;
-const { getConnectionName, updatePinnedConnections } = connectionsStore;
-const { getWorkspace, selectWorkspace } = workspacesStore;
+const { updateConnectionsOrder, initConnectionsOrder } = connectionsStore;
+const { selectWorkspace } = workspacesStore;
 
 const emit = defineEmits(['show-connections-modal']);
 
-const isLinux = process.platform === 'linux';
-
 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 contextEvent: Ref<MouseEvent> = ref(null);
-const contextConnection: Ref<ConnectionParams> = ref(null);
+const contextConnection: Ref<SidebarElement> = ref(null);
 const sidebarConnectionsHeight = ref(useElementBounding(sidebarConnections)?.height);
 
-const pinnedConnectionsArr = computed({
-   get: () => [...pinnedConnections.value].map(c => storedConnections.value.find(sc => sc.uid === c)).filter(Boolean),
-   set: (value: ConnectionParams[]) => {
-      const pinnedUid = value.reduce((acc, curr) => {
-         acc.push(curr.uid);
-         return acc;
-      }, []);
-
-      updatePinnedConnections(pinnedUid);
+const connectionsArr = computed({
+   get: () => connectionsOrder.value,
+   set: (value: SidebarElement[]) => {
+      updateConnectionsOrder(value);
    }
 });
 
-const unpinnedConnectionsArr = computed(() => {
-   return storedConnections.value
-      .filter(c => !pinnedConnections.value.has(c.uid))
-      .map(c => {
-         const connTime = lastConnections.value.find((lc) => lc.uid === c.uid)?.time || 0;
-         return { ...c, time: connTime };
-      })
-      .sort((a, b) => {
-         if (a.time < b.time) return 1;
-         else if (a.time > b.time) return -1;
-         return 0;
-      });
-});
-
 const hasUpdates = computed(() => ['available', 'downloading', 'downloaded', 'link'].includes(updateStatus.value));
 
-const contextMenu = (event: MouseEvent, connection: ConnectionParams) => {
+const contextMenu = (event: MouseEvent, connection: SidebarElement) => {
    contextEvent.value = event;
    contextConnection.value = connection;
    isContext.value = true;
 };
 
-const tooltipPosition = (e: Event) => {
-   const el = (e.target ? e.target : e) as unknown as HTMLElement;
-   const tooltip = el.querySelector<HTMLElement>('.ex-tooltip-content');
-   if (tooltip) {
-      const fromTop = isLinux
-         ? window.scrollY + el.getBoundingClientRect().top + (el.offsetHeight / 4)
-         : window.scrollY + el.getBoundingClientRect().top - (el.offsetHeight / 4);
-      tooltip.style.top = `${fromTop}px`;
-   }
-};
-
-const getStatusBadge = (uid: string) => {
-   if (getWorkspace(uid)) {
-      const status = getWorkspace(uid).connectionStatus;
-
-      switch (status) {
-         case 'connected':
-            return 'badge badge-connected';
-         case 'connecting':
-            return 'badge badge-connecting';
-         case 'failed':
-            return 'badge badge-failed';
-         default:
-            return '';
-      }
-   }
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const dragStop = (e: any) => {
-   isDragging.value = false;
-
-   setTimeout(() => {
-      tooltipPosition(e.originalEvent.target.parentNode);
-   }, 200);
-};
-
 watch(sidebarConnectionsHeight, (value) => {
    isScrollable.value = value < sidebarConnections.value.scrollHeight;
 });
 
-watch(unpinnedConnectionsArr, (newVal, oldVal) => {
-   if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
-      setTimeout(() => {
-         const element = document.querySelector<HTMLElement>('.settingbar-element.selected');
-         if (element) {
-            const rect = element.getBoundingClientRect();
-            const elemTop = rect.top;
-            const elemBottom = rect.bottom;
-            const isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
-
-            if (!isVisible) {
-               element.setAttribute('tabindex', '-1');
-               element.focus();
-               element.removeAttribute('tabindex');
-            }
-         }
-      }, 50);
-   }
-});
-
 watch(selectedWorkspace, (newVal, oldVal) => {
    if (newVal !== oldVal) {
       setTimeout(() => {
@@ -246,6 +150,9 @@ watch(selectedWorkspace, (newVal, oldVal) => {
       }, 150);
    }
 });
+
+if (!connectionsArr.value.length)
+   initConnectionsOrder();
 </script>
 
 <style lang="scss">
@@ -281,6 +188,22 @@ watch(selectedWorkspace, (newVal, oldVal) => {
       padding: 0;
       margin: 0;
 
+      li {
+         margin: 0;
+         background: $bg-color-light-dark;
+
+         &.ghost {
+            border-radius: $border-radius;
+
+            .settingbar-element {
+               &.selected::before {
+                  height: 0;
+                  width: 0;
+               }
+            }
+         }
+      }
+
       .settingbar-element {
          height: $settingbar-width;
          width: 100%;
@@ -289,7 +212,7 @@ watch(selectedWorkspace, (newVal, oldVal) => {
          transition: opacity 0.2s;
          display: flex;
          align-items: center;
-         justify-content: flex-start;
+         justify-content: center;
          border-radius: 0;
          padding: 0;
          position: relative;
@@ -302,7 +225,7 @@ watch(selectedWorkspace, (newVal, oldVal) => {
             opacity: 1;
 
             &::before {
-               height: $settingbar-width;
+               height: calc(#{$settingbar-width} - 0.4rem);
             }
          }
 
@@ -311,53 +234,56 @@ watch(selectedWorkspace, (newVal, oldVal) => {
             height: 0;
             width: 3px;
             transition: height 0.2s;
-            background-color: $primary-color;
+            background-color: rgba($color: #fff, $alpha: 0.8);
             border-radius: $border-radius;
          }
 
-         .settingbar-element-icon {
-            margin: 0 auto;
+         .settingbar-element-icon-wrapper{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
 
-            &.badge::after {
-               top: 5px;
-               right: -4px;
-               position: absolute;
+            .settingbar-element-icon {
+               &.badge::after {
+                  top: 10px;
+                  right: -6px;
+                  position: absolute;
+               }
+
+               &.badge-update::after {
+                  bottom: initial;
+               }
             }
 
-            &.badge-update::after {
-               bottom: initial;
+            .settingbar-element-name {
+               font-size: 65%;
+               max-width: 90%;
+               font-style: normal;
+               display: block;
+               overflow: hidden;
+               white-space: nowrap;
+               text-overflow: ellipsis;
+               width: calc($settingbar-width - 15px);
+               line-height: 1.1;
+               color: rgba($body-font-color-dark, 0.8);
+               text-align: center;
             }
-         }
 
-         .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;
-         }
+            .settingbar-element-pin {// <- Dead
+               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: 0.25;
-               top: -8px;
-               left: -10px;
-               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;
+               }
             }
          }
       }

src/renderer/components/TheTitleBar.vue

@@ -30,7 +30,7 @@
          >
             <i class="mdi mdi-24px mdi-refresh" />
          </div>
-         <div v-if="isWindows" style="width: 140px;" />
+         <div v-if="isWindows" :style="'width: 140px;'" />
       </div>
    </div>
 </template>
@@ -67,7 +67,7 @@ const windowTitle = computed(() => {
 
    const connectionName = getConnectionName(selectedWorkspace.value);
    const workspace = getWorkspace(selectedWorkspace.value);
-   const breadcrumbs = Object.values(workspace.breadcrumbs).filter(breadcrumb => breadcrumb) || [workspace.client];
+   const breadcrumbs = workspace ? Object.values(workspace.breadcrumbs).filter(breadcrumb => breadcrumb) || [workspace.client] : [];
 
    return [connectionName, ...breadcrumbs].join(' • ');
 });

src/renderer/components/WorkspaceEmptyState.vue

@@ -7,7 +7,7 @@
          {{ t('message.noOpenTabs') }}
       </p>
       <div class="empty-action">
-         <button class="btn btn-gray d-flex" @click="emit('new-tab')">
+         <button class="btn btn-primary d-flex" @click="emit('new-tab')">
             <i class="mdi mdi-24px mdi-tab-plus mr-2" />
             {{ t('message.openNewTab') }}
          </button>
@@ -45,7 +45,7 @@ const workspace = computed(() => {
 changeBreadcrumbs({ schema: workspace.value.breadcrumbs.schema });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .empty {
     height: 100%;
     border-radius: 0;

src/renderer/components/WorkspaceTabQuery.vue

@@ -198,6 +198,7 @@ import WorkspaceTabQueryEmptyState from '@/components/WorkspaceTabQueryEmptyStat
 import ModalHistory from '@/components/ModalHistory.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import { ipcRenderer } from 'electron';
+import { useSettingsStore } from '@/stores/settings';
 
 const { t } = useI18n();
 
@@ -222,6 +223,7 @@ const { addNotification } = useNotificationsStore();
 const workspacesStore = useWorkspacesStore();
 
 const { consoleHeight } = storeToRefs(useConsoleStore());
+const { executeSelected } = storeToRefs(useSettingsStore());
 
 const {
    getWorkspace,
@@ -290,8 +292,10 @@ const runQuery = async (query: string) => {
    if (!query || isQuering.value) return;
    isQuering.value = true;
 
-   const selectedQuery = queryEditor.value.editor.getSelectedText();
-   if (selectedQuery) query = selectedQuery;
+   if (executeSelected.value) {
+      const selectedQuery = queryEditor.value.editor.getSelectedText();
+      if (selectedQuery) query = selectedQuery;
+   }
 
    clearTabData();
    queryTable.value.resetSort();

src/renderer/components/WorkspaceTabQueryTable.vue

@@ -465,6 +465,42 @@ const copyRow = (format: string) => {
 
       navigator.clipboard.writeText(csv.join('\n'));
    }
+   else if (format === 'html') {
+      const arrayContent = new Array<string[]>();
+      if (!Array.isArray(contentToCopy)) contentToCopy = [contentToCopy];
+
+      for (const row of contentToCopy)
+         arrayContent.push(Object.values(row));
+
+      const htmlContent = createHtmlTable(arrayContent);
+      const htmlBlob = new Blob([htmlContent.outerHTML], { type: 'text/html' });
+      const textBlob = new Blob([arrayContent.map(row => row.join('\t')).join('\n')], { type: 'text/plain' });
+      const data = [new ClipboardItem({
+         'text/plain': textBlob,
+         'text/html': htmlBlob
+      })];
+
+      navigator.clipboard.write(data);
+   }
+};
+
+const createHtmlTable = (tableData: Array<string[]>) => {
+   const table = document.createElement('table');
+   const tableBody = document.createElement('tbody');
+   tableData.forEach(function (rowData: Array<string>) {
+      const row = document.createElement('tr');
+
+      rowData.forEach(function (cellData: string) {
+         const cell = document.createElement('td');
+         cell.appendChild(document.createTextNode(cellData));
+         row.appendChild(cell);
+      });
+
+      tableBody.appendChild(row);
+   });
+
+   table.appendChild(tableBody);
+   return table;
 };
 
 const fillCell = (event: { name: string; group: string; type: string }) => {

src/renderer/components/WorkspaceTabQueryTableContext.vue

@@ -16,6 +16,11 @@
                   <i class="mdi mdi-18px mdi-numeric-0 mdi-rotate-90 text-light pr-1" /> {{ t('word.cell', 1) }}
                </span>
             </div>
+            <div class="context-element" @click="copyRow('html')">
+               <span class="d-flex">
+                  <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('word.row', selectedRows.length) }} ({{ t('word.table') }})
+               </span>
+            </div>
             <div class="context-element" @click="copyRow('json')">
                <span class="d-flex">
                   <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('word.row', selectedRows.length) }} (JSON)

src/renderer/i18n/en-US.ts

@@ -143,7 +143,12 @@ export const enUS = {
       pin: 'Pin',
       unpin: 'Unpin',
       console: 'Console',
-      shortcuts: 'Shortcuts'
+      shortcuts: 'Shortcuts',
+      folder: 'Folder | Folders',
+      appearence: 'Appearence',
+      color: 'Color',
+      label: 'Label',
+      icon: 'Icon'
    },
    message: {
       appWelcome: 'Welcome to Antares SQL Client!',
@@ -323,7 +328,12 @@ export const enUS = {
       openFilter: 'Open filter',
       nextResultsPage: 'Next results page',
       previousResultsPage: 'Previous results page',
-      fillCell: 'Fill cell'
+      fillCell: 'Fill cell',
+      editFolder: 'Edit folder',
+      folderName: 'Folder name',
+      deleteFolder: 'Delete folder',
+      editConnectionAppearence: 'Edit connection appearence',
+      executeSelectedQuery: 'Execute selected query'
    },
    faker: {
       address: 'Address',

src/renderer/i18n/fr-FR.ts

@@ -13,23 +13,23 @@ export const frFR = {
       port: 'Port',
       user: 'Utilisateur',
       password: 'Mot de passe',
-      credentials: 'Credentials',
+      credentials: 'Identifiants',
       connect: 'Connexion',
       connected: 'Connecté',
       disconnect: 'Déconnection',
       disconnected: 'Déconnecté',
-      refresh: 'Rafrechir',
+      refresh: 'Rafraîchir',
       settings: 'Paramètres',
       general: 'Général',
       themes: 'Thèmes',
       update: 'Mise à jour',
-      about: 'A propos de',
+      about: 'À propos de',
       language: 'Langage',
       version: 'Version',
       donate: 'Faire une donation',
-      run: 'Lancer',
+      run: 'Éxécuter',
       schema: 'Schéma',
-      results: 'Resultats',
+      results: 'Résultats',
       size: 'Taille',
       seconds: 'Secondes',
       type: 'Type',
@@ -44,14 +44,14 @@ export const frFR = {
       collation: 'Langage',
       clear: 'Effacer',
       options: 'Options',
-      autoRefresh: 'Auto-rafraichissemnt',
+      autoRefresh: 'Auto-rafraîchissemnt',
       indexes: 'Indexs',
-      foreignKeys: 'Clefs étrangères',
+      foreignKeys: 'Clés étrangères',
       length: 'Longueur',
       unsigned: 'non signé',
-      default: 'Par défault',
+      default: 'Par défaut',
       comment: 'Commentaire',
-      key: 'Clef | Clefs',
+      key: 'Clé | Clés',
       order: 'Ordre',
       expression: 'Expression',
       autoIncrement: 'Auto Incrémentation',
@@ -63,11 +63,11 @@ export const frFR = {
       discard: 'Jeter',
       stay: 'Rester',
       author: 'Auteur',
-      light: 'Léger',
+      light: 'Clair',
       dark: 'Sombre',
-      autoCompletion: 'Auto Completion',
+      autoCompletion: 'Prédiction Automatique',
       application: 'Application',
-      editor: 'Editor',
+      editor: 'Éditeur',
       view: 'Vue',
       definer: 'Définisseur',
       algorithme: 'Algorithme',
@@ -83,10 +83,10 @@ export const frFR = {
       import: 'Import',
       returns: 'Retourne',
       timing: 'Temps',
-      state: 'Etat',
-      execution: 'Exécution',
+      state: 'État',
+      execution: 'Éxécution',
       starts: 'Commence',
-      ends: 'Fini',
+      ends: 'Termine',
       ssl: 'SSL',
       privateKey: 'Clé privée',
       certificate: 'Certificat',
@@ -95,7 +95,7 @@ export const frFR = {
       upload: 'Téléverser',
       browse: 'Naviguer',
       faker: 'Imposteur',
-      sshTunnel: 'SSH tunnel',
+      sshTunnel: 'Tunnel SSH',
       content: 'Contenu',
       cut: 'Couper',
       copy: 'Copier',
@@ -116,7 +116,7 @@ export const frFR = {
       cell: 'Cellule | Cellules',
       triggerFunction: 'Fonction de déclenchement | Fonctions de déclenchement',
       all: 'Tout',
-      duplicate: 'Double',
+      duplicate: 'Dupliquer',
       routine: 'Routine',
       new: 'Nouveau',
       history: 'Passé',
@@ -139,7 +139,8 @@ export const frFR = {
       commit: 'Appliquer',
       rollback: 'Retour arrière',
       connectionString: 'Chaîne de connexion',
-      contributors: 'Contributeurs'
+      contributors: 'Contributeurs',
+      shortcuts: 'Raccourcis'
    },
    message: {
       appWelcome: 'Bienvenue dans le client SQL Antares!',
@@ -179,8 +180,8 @@ export const frFR = {
       editDatabase: 'Editer la base de données',
       clearChanges: 'Effacer les modifications',
       addNewField: 'Ajouter un nouveau champ',
-      manageIndexes: 'Gère les index',
-      manageForeignKeys: 'Gère les clés étrangères',
+      manageIndexes: 'Gérer les index',
+      manageForeignKeys: 'Gérer les clés étrangères',
       allowNull: 'Autoriser NULL',
       zeroFill: 'Remplissage avec zéro',
       customValue: 'Valeur personnalisée',
@@ -208,11 +209,11 @@ export const frFR = {
       selectStatement: 'Sélectionner un état',
       triggerStatement: 'Déclencher un état',
       sqlSecurity: 'Sécurité SQL',
-      updateOption: 'Mide à jour d\'une option',
+      updateOption: 'Mise à jour d\'une option',
       deleteView: 'Effacer une vue',
       createNewView: 'Créer une nouvelle vue',
       deleteTrigger: 'Effacer un déclencheur',
-      createNewTrigger: 'Cr"er un nouveau déclencheur',
+      createNewTrigger: 'Créer un nouveau déclencheur',
       currentUser: 'utilisateur courant',
       routineBody: 'Corps de la routine',
       dataAccess: 'Accès aux données',
@@ -232,7 +233,7 @@ export const frFR = {
       tableFiller: 'Remplisseur de table',
       fakeDataLanguage: 'Language de données fausses',
       searchForElements: 'Rechercher des éléments',
-      selectAll: 'Tout séélectionner',
+      selectAll: 'Tout sélectionner',
       queryDuration: 'Temps de requêtage',
       includeBetaUpdates: 'Inclure les mises à jour beta',
       setNull: 'Définir comme NULL',
@@ -287,7 +288,10 @@ export const frFR = {
       ourputFormat: 'Format de sortie',
       singleFile: 'Seul fichier avec l\'extension {ext}',
       zipCompressedFile: 'Fichier compréssé avec l\'extension {ext}',
-      disableBlur: 'Désactiver le floue'
+      disableBlur: 'Désactiver le floue',
+      missingOrIncompleteTranslation: 'Traduction manquante ou incomplète?',
+      findOutHowToContribute: 'Trouver comment contribuer',
+      disableScratchpad: 'Désactiver le bloc-notes'
    },
    faker: {
       address: 'Adresse',

src/renderer/i18n/id-ID.ts

@@ -0,0 +1,502 @@
+export const idID = {
+   word: {
+      edit: 'Ubah',
+      save: 'Simpan',
+      close: 'Tutup',
+      delete: 'Hapus',
+      confirm: 'Iya',
+      cancel: 'Batal',
+      send: 'Kirim',
+      connectionName: 'Nama Koneksi',
+      client: 'Klien',
+      hostName: 'Nama Host',
+      port: 'Port',
+      user: 'Pengguna',
+      password: 'Sandi',
+      credentials: 'Kredensial',
+      connect: 'Menyambung',
+      connected: 'Tersambung',
+      disconnect: 'Putuskan',
+      disconnected: 'Terputus',
+      refresh: 'Segarkan',
+      settings: 'Pengaturan',
+      general: 'Umum',
+      themes: 'Tema',
+      update: 'Memperbarui',
+      about: 'Tentang',
+      language: 'Bahasa',
+      version: 'Versi',
+      donate: 'Donasi',
+      run: 'Jalankan',
+      schema: 'Skema',
+      results: 'Hasil',
+      size: 'Ukuran',
+      seconds: 'Detik',
+      type: 'Jenis',
+      mimeType: 'Tipe Mime',
+      download: 'Unduh',
+      add: 'Tambahkan',
+      data: 'Data',
+      properties: 'Properti',
+      insert: 'Masukan',
+      connecting: 'Menghubungkan',
+      name: 'Nama',
+      collation: 'Kolasi',
+      clear: 'Jernih',
+      options: 'Pilihan',
+      autoRefresh: 'Segarkan otomatis',
+      indexes: 'Indeks',
+      foreignKeys: 'Foreign Key',
+      length: 'Panjangnya',
+      unsigned: 'Unsigned',
+      default: 'Bawaan',
+      comment: 'Komentar',
+      key: 'Key | Keys',
+      order: 'Urutan',
+      expression: 'Ekspresi',
+      autoIncrement: 'Inkremen Otomatis',
+      engine: 'Mesin',
+      field: 'Bidang | Fields',
+      approximately: 'Sekitar',
+      total: 'Total',
+      table: 'Tabel',
+      discard: 'Membuang',
+      stay: 'Tinggal',
+      author: 'Pengarang',
+      light: 'Terang',
+      dark: 'Gelap',
+      autoCompletion: 'Penyelesaian Otomatis',
+      application: 'Aplikasi',
+      editor: 'Editor',
+      view: 'Melihat',
+      definer: 'Definisi',
+      algorithm: 'Algoritma',
+      trigger: 'Trigger | Trigger',
+      storedRoutine: 'Rutin tersimpan | Rutin tersimpan',
+      scheduler: 'Penjadwal | Penjadwal',
+      event: 'Peristiwa',
+      parameters: 'Parameter',
+      function: 'Fungsi | Fungsi',
+      deterministic: 'Deterministik',
+      context: 'Konteks',
+      export: 'Ekspor',
+      import: 'Impor',
+      returns: 'Pengembalian',
+      timing: 'Pengaturan waktu',
+      state: 'Keadaan',
+      execution: 'Eksekusi',
+      starts: 'Mulai',
+      ends: 'Berakhir',
+      ssl: 'SSL',
+      privateKey: 'Kunci pribadi',
+      certificate: 'Sertifikat',
+      caCertificate: 'Sertifikat CA',
+      ciphers: 'Chipher',
+      upload: 'Mengunggah',
+      browse: 'Jelajahi',
+      faker: 'Pemalsu',
+      content: 'Isi',
+      cut: 'Potong',
+      copy: 'Salin',
+      paste: 'Tempel',
+      tools: 'Peralatan',
+      variables: 'Variabel',
+      processes: 'Proses',
+      database: 'Basis data',
+      scratchpad: 'Papan penggaris',
+      array: 'Array',
+      changelog: 'Changelog',
+      format: 'Format',
+      sshTunnel: 'Tunel SSH',
+      structure: 'Struktur',
+      small: 'Kecil',
+      medium: 'Sedang',
+      large: 'Besar',
+      row: 'Baris | Baris',
+      cell: 'Sel | Sel',
+      triggerFunction: 'Fungsi trigger | Fungsi trigger',
+      all: 'Semua',
+      duplicate: 'Duplikat',
+      routine: 'Rutin',
+      new: 'Baru',
+      history: 'Histori',
+      select: 'Pilih',
+      passphrase: 'Frasa sandi',
+      filter: 'Saring',
+      change: 'Mengubah',
+      views: 'Tampilan',
+      triggers: 'Pemicu',
+      routines: 'Rutinitas',
+      functions: 'Fungsi',
+      schedulers: 'Penjadwal',
+      includes: 'Termasuk',
+      drop: 'Menjatuhkan',
+      completed: 'Selesai',
+      aborted: 'Dibatalkan',
+      disabled: 'Dinonaaktivkan',
+      enable: 'Aktifkan',
+      disable: 'Nonaktifkan',
+      commit: 'Komit',
+      rollback: 'Kembalikan',
+      connectionString: 'Rangkaian sambungan',
+      contributors: 'Kontributor',
+      pin: 'Pin',
+      unpin: 'Unpin',
+      console: 'Konsol',
+      shortcuts: 'Shortcut',
+      folder: 'Folder | Folder',
+      appearence: 'Appearence',
+      color: 'Color',
+      label: 'Label',
+      icon: 'Icon'
+   },
+   message: {
+      appWelcome: 'Selamat datang di Antares SQL Client!',
+      appFirstStep: 'Langkah pertama Anda: buat koneksi database baru.',
+      addConnection: 'Tambahkan koneksi',
+      createConnection: 'Buat koneksi',
+      createNewConnection: 'Buat koneksi baru',
+      askCredentials: 'Mintalah kredensial',
+      testConnection: 'Tes koneksi',
+      editConnection: 'Mengedit koneksi',
+      deleteConnection: 'Hapus koneksi',
+      deleteCorfirm: 'Apakah Anda mengkonfirmasi pembatalan',
+      connectionSuccessfullyMade: 'Sambungan berhasil dibuat!',
+      madeWithJS: 'Dibuat dengan 💛 dan JavaScript!',
+      checkForUpdates: 'Periksa pembaruan',
+      noUpdatesAvailable: 'Tidak ada pembaruan yang tersedia',
+      checkingForUpdate: 'Memeriksa pembaruan',
+      checkFailure: 'Pemeriksaan gagal, coba lagi nanti',
+      updateAvailable: 'Pembaruan tersedia',
+      downloadingUpdate: 'Mengunduh pembaruan',
+      updateDownloaded: 'Pembaruan diunduh',
+      restartToInstall: 'Mulai ulang Antares untuk menginstal',
+      unableEditFieldWithoutPrimary: 'Tidak dapat mengedit bidang tanpa kunci utama di kumpulan hasil',
+      editCell: 'Mengedit sel',
+      deleteRows: 'Hapus baris | Hapus {count} baris',
+      confirmToDeleteRows: 'Apakah Anda mengonfirmasi untuk menghapus satu baris? | Apakah Anda mengonfirmasi untuk menghapus {count} baris?',
+      notificationsTimeout: 'Batas waktu pemberitahuan',
+      uploadFile: 'Unggah data',
+      addNewRow: 'Tambahkan baris baru',
+      numberOfInserts: 'Jumlah sisipan',
+      openNewTab: 'Buka tab baru',
+      affectedRows: 'Baris yang terpengaruh',
+      createNewDatabase: 'Buat Basis Data baru',
+      databaseName: 'Nama basis data',
+      serverDefault: 'Standar server',
+      deleteDatabase: 'Hapus basis data',
+      editDatabase: 'Ubah basis data',
+      clearChanges: 'Hapus perubahan',
+      addNewField: 'Tambahkan bidang baru',
+      manageIndexes: 'Kelola indeks',
+      manageForeignKeys: 'Mengelola kunci asing',
+      allowNull: 'Izinkan NULL',
+      zeroFill: 'Isi nol',
+      customValue: 'Nilai khusus',
+      onUpdate: 'Sedang diperbarui',
+      deleteField: 'Hapus bidang',
+      createNewIndex: 'Buat indeks baru',
+      addToIndex: 'Tambahkan ke index',
+      createNewTable: 'Buat tabel baru',
+      emptyTable: 'Kosongkan Tabel',
+      deleteTable: 'Hapus tabel',
+      emptyCorfirm: 'Apakah Anda mengkonfirmasi untuk mengosongkan',
+      unsavedChanges: 'Perubahan belum disimpan',
+      discardUnsavedChanges: 'Anda memiliki beberapa perubahan yang belum disimpan. Dengan menutup tab ini akan membuang perubahan',
+      thereAreNoIndexes: 'Tidak ada indeks',
+      thereAreNoForeign: 'Tidak ada kunci asing',
+      createNewForeign: 'Buat kunci asing baru',
+      referenceTable: 'Ref. table',
+      referenceField: 'Ref. field',
+      foreignFields: 'Bidang asing',
+      invalidDefault: 'Standar tidak valid',
+      onDelete: 'Saat hapus',
+      applicationTheme: 'Tema Aplikasi',
+      editorTheme: 'Tema Editor',
+      wrapLongLines: 'Bungkus garis panjang',
+      selectStatement: 'Pilih pernyataan',
+      triggerStatement: 'Pernyataan pemicu',
+      sqlSecurity: 'keamanan SQL',
+      updateOption: 'Opsi pembaruan',
+      deleteView: 'Hapus tampilan',
+      createNewView: 'Buat tampilan baru',
+      deleteTrigger: 'Hapus pemicu',
+      createNewTrigger: 'Buat pemicu baru',
+      currentUser: 'Pengguna saat ini',
+      routineBody: 'Badan rutin',
+      dataAccess: 'Akses data',
+      thereAreNoParameters: 'Tidak ada parameter',
+      createNewParameter: 'Buat parameter baru',
+      createNewRoutine: 'Buat rutin tersimpan baru',
+      deleteRoutine: 'Hapus rutinitas yang tersimpan',
+      functionBody: 'Fungsi tubuh',
+      createNewFunction: 'Buat fungsi baru',
+      deleteFunction: 'Hapus fungsi',
+      schedulerBody: 'badan Penjadwal',
+      createNewScheduler: 'Buat penjadwal baru',
+      deleteScheduler: 'Hapus penjadwal',
+      preserveOnCompletion: 'Pertahankan saat selesai',
+      enableSsl: 'Aktifkan SSL',
+      manualValue: 'Nilai manual',
+      tableFiller: 'Pengisi Tabel',
+      fakeDataLanguage: 'Bahasa data palsu',
+      searchForElements: 'Cari elemen',
+      selectAll: 'Pilih Semua',
+      queryDuration: 'Durasi kueri',
+      includeBetaUpdates: 'Sertakan pembaruan beta',
+      setNull: 'Tetapkan NULL',
+      processesList: 'Daftar proses',
+      processInfo: 'Info proses',
+      manageUsers: 'Kelola pengguna',
+      createNewSchema: 'Buat skema baru',
+      schemaName: 'Nama skema',
+      editSchema: 'Edit skema',
+      deleteSchema: 'Hapus skema',
+      markdownSupported: 'Markdown didukung',
+      plantATree: 'Menanam pohon',
+      dataTabPageSize: 'Ukuran halaman tab DATA',
+      enableSsh: 'Aktifkan SSH',
+      pageNumber: 'Nomor halaman',
+      duplicateTable: 'Duplikat Tabel',
+      noOpenTabs: 'Tidak ada tab terbuka, navigasikan di bilah kiri atau:',
+      noSchema: 'Tidak ada skema',
+      restorePreviourSession: 'Kembalikan sesi sebelumnya',
+      runQuery: 'Jalankan kueri',
+      thereAreNoTableFields: 'Tidak ada bidang tabel',
+      newTable: 'Tabel baru',
+      newView: 'Pemandangan baru',
+      newTrigger: 'Pemicu baru',
+      newRoutine: 'Rutinitas baru',
+      newFunction: 'Fungsi baru',
+      newScheduler: 'Penjadwal baru',
+      newTriggerFunction: 'Fungsi pemicu baru',
+      thereIsNoQueriesYet: 'Belum ada kueri',
+      searchForQueries: 'Telusuri kueri',
+      killProcess: 'Membunuh proses',
+      closeTab: 'Tutup tab',
+      exportSchema: 'Skema ekspor',
+      importSchema: 'Skema impor',
+      directoryPath: 'Jalur direktori',
+      newInserStmtEvery: 'Pernyataan INSERT baru setiap',
+      processingTableExport: 'Memproses {table}',
+      fechingTableExport: 'Mengambil data {table}',
+      writingTableExport: 'Menulis data {table} ',
+      checkAllTables: 'Periksa semua tabel',
+      uncheckAllTables: 'Hapus centang semua tabel',
+      goToDownloadPage: 'Buka halaman unduh',
+      readOnlyMode: 'Mode hanya baca',
+      killQuery: 'Bunuh kueri',
+      insertRow: 'Sisipkan baris | Sisipkan baris',
+      commitMode: 'Mode komit',
+      autoCommit: 'Komit otomatis',
+      manualCommit: 'Komit manual',
+      actionSuccessful: '{aksi} berhasil',
+      importQueryErrors: 'Peringatan: {n} kesalahan telah terjadi | Peringatan: {n} kesalahan telah terjadi',
+      executedQueries: '{n} permintaan dieksekusi | {n} permintaan dieksekusi',
+      ourputFormat: 'Format keluaran',
+      singleFile: 'File {ext} tunggal',
+      zipCompressedFile: 'File {ext} terkompresi ZIP',
+      disableBlur: 'Nonaktifkan buram',
+      untrustedConnection: 'Koneksi tidak tepercaya',
+      missingOrIncompleteTranslation: 'Terjemahan hilang atau tidak lengkap?',
+      findOutHowToContribute: 'Cari tahu cara berkontribusi',
+      disableFKChecks: 'Nonaktifkan pemeriksaan kunci asing',
+      allConnections: 'Semua koneksi',
+      searchForConnections: 'Cari koneksi',
+      disableScratchpad: 'Nonaktifkan papan tulis',
+      reportABug: 'Laporkan bug',
+      nextTab: 'Tab setelahnya',
+      previousTab: 'Tab sebelumnya',
+      selectTabNumber: 'Pilih nomor tab {param}',
+      toggleConsole: 'Toggle console',
+      addShortcut: 'Tambah shortcut',
+      editShortcut: 'Ubah shortcut',
+      deleteShortcut: 'Hapus shortcut',
+      restoreDefaults: 'Kembalikan ke default',
+      restoreDefaultsQuestion: 'Apakah kamu yakin untuk dikembalikan seperti setelan awal?',
+      registerAShortcut: 'Daftarkan shortcut',
+      invalidShortcutMessage: 'Kombinasi salah, lanjutkan mengetik',
+      shortcutAlreadyExists: 'Shortcut sudah ada',
+      saveContent: 'Simpan content',
+      openAllConnections: 'Buka semua koneksi',
+      openSettings: 'Buka Pengaturan',
+      openScratchpad: 'Buka scratchpad',
+      runOrReload: 'Jalankan atau reload',
+      formatQuery: 'Format query',
+      queryHistory: 'Histori query',
+      clearQuery: 'Bersihkan query',
+      openFilter: 'Buka filter',
+      nextResultsPage: 'Next results page',
+      previousResultsPage: 'Previous results page',
+      fillCell: 'Isi sel',
+      editFolder: 'Ubah folder',
+      folderName: 'Nama folder',
+      deleteFolder: 'Hapus folder',
+      editConnectionAppearence: 'Ubah connection appearence',
+      executeSelectedQuery: 'Eksekusi query yang dipilih'
+   },
+   faker: {
+      address: 'Alamat',
+      commerce: 'Perdagangan',
+      company: 'Perusahaan',
+      database: 'Basis data',
+      date: 'Tanggal',
+      finance: 'Keuangan',
+      git: 'Git',
+      hacker: 'Peretas',
+      internet: 'Internet',
+      lorem: 'Lorem',
+      name: 'Nama',
+      music: 'Musik',
+      phone: 'Telepon',
+      random: 'Acak',
+      system: 'Sistem',
+      time: 'Waktu',
+      vehicle: 'Kendaraan',
+      zipCode: 'Kode Pos',
+      zipCodeByState: 'Kode pos menurut negara bagian',
+      city: 'Kota',
+      cityPrefix: 'Awalan kota',
+      citySuffix: 'Akhiran kota',
+      streetName: 'nama jalan',
+      streetAddress: 'alamat jalan',
+      streetSuffix: 'Akhiran jalan',
+      streetPrefix: 'Awalan jalan',
+      secondaryAddress: 'Alamat sekunder',
+      county: 'daerah',
+      country: 'Negara',
+      countryCode: 'Kode negara',
+      state: 'Negara',
+      stateAbbr: 'Singkatan negara',
+      latitude: 'Garis Lintang',
+      longitude: 'Garis bujur',
+      direction: 'Arah',
+      cardinalDirection: 'Arah mata angin',
+      ordinalDirection: 'Arah ordinal',
+      nearbyGPSCoordinate: 'Koordinat GPS terdekat',
+      timeZone: 'Zona waktu',
+      color: 'Warna',
+      department: 'Departemen',
+      productName: 'Nama Produk',
+      price: 'Harga',
+      productAdjective: 'Kata sifat produk',
+      productMaterial: 'Bahan produk',
+      product: 'Produk',
+      productDescription: 'Deskripsi Produk',
+      suffixes: 'Akhiran',
+      companyName: 'Nama Perusahaan',
+      companySuffix: 'Akhiran perusahaan',
+      catchPhrase: 'Menangkap frase',
+      bs: 'BS',
+      catchPhraseAdjective: 'Menangkap frase kata sifat',
+      catchPhraseDescriptor: 'Menangkap frase deskriptor',
+      catchPhraseNoun: 'Menangkap frase kata benda',
+      bsAdjective: 'kata sifat BS',
+      bsBuzz: 'BS berdengung',
+      bsNoun: 'kata benda BS',
+      column: 'Kolom',
+      type: 'Jenis',
+      collation: 'Pemeriksaan',
+      engine: 'Mesin',
+      past: 'Masa lalu',
+      future: 'Masa depan',
+      between: 'Di antara',
+      recent: 'Terkini',
+      soon: 'Segera',
+      month: 'Bulan',
+      weekday: 'Hari kerja',
+      account: 'Akun',
+      accountName: 'Nama akun',
+      routingNumber: 'Nomor perutean',
+      mask: 'Masker',
+      amount: 'Jumlah',
+      transactionType: 'Tipe transaksi',
+      currencyCode: 'Kode mata uang',
+      currencyName: 'Nama mata uang',
+      currencySymbol: 'Simbol mata uang',
+      bitcoinAddress: 'Alamat Bitcoin',
+      litecoinAddress: 'Alamat Litecoin',
+      creditCardNumber: 'Nomor kartu kredit',
+      creditCardCVV: 'CVV kartu kredit',
+      ethereumAddress: 'Alamat Ethereum',
+      iban: 'Iban',
+      bic: 'Bic',
+      transactionDescription: 'Deskripsi transaksi',
+      branch: 'Cabang',
+      commitEntry: 'Lakukan entri',
+      commitMessage: 'Pesan komit',
+      commitSha: 'Lakukan SHA',
+      shortSha: 'SHA pendek',
+      abbreviation: 'Singkatan',
+      adjective: 'Kata sifat',
+      noun: 'Kata benda',
+      verb: 'Kata kerja',
+      ingverb: 'Ingverb',
+      phrase: 'Frasa',
+      avatar: 'Avatar',
+      email: 'Email',
+      exampleEmail: 'Contoh email',
+      userName: 'Username',
+      protocol: 'Protokol',
+      url: 'Url',
+      domainName: 'Nama domain',
+      domainSuffix: 'Akhiran domain',
+      domainWord: 'Kata domain',
+      ip: 'IP',
+      ipv6: 'IPv6',
+      userAgent: 'Agen pengguna',
+      mac: 'Mac',
+      password: 'Kata sandi',
+      word: 'Kata',
+      words: 'Kata-kata',
+      sentence: 'Kalimat',
+      slug: 'Siput',
+      sentences: 'Kalimat-kalimat',
+      paragraph: 'Gugus kalimat',
+      paragraphs: 'Paragraf',
+      text: 'Teks',
+      lines: 'Garis',
+      genre: 'Aliran',
+      firstName: 'Nama depan',
+      lastName: 'Nama keluarga',
+      middleName: 'Nama tengah',
+      findName: 'Nama lengkap',
+      jobTitle: 'Judul pekerjaan',
+      gender: 'Jenis kelamin',
+      prefix: 'Awalan',
+      suffix: 'Akhiran',
+      title: 'Judul',
+      jobDescriptor: 'Deskriptor pekerjaan',
+      jobArea: 'Bidang pekerjaan',
+      jobType: 'Jenis pekerjaan',
+      phoneNumber: 'Nomor telepon',
+      phoneNumberFormat: 'Format nomor telepon',
+      phoneFormats: 'Format telepon',
+      number: 'Nomor',
+      float: 'Mengambang',
+      arrayElement: 'Elemen array',
+      arrayElements: 'Elemen2 array',
+      objectElement: 'Elemen objek',
+      uuid: 'Uuid',
+      boolean: 'Boolean',
+      image: 'Gambar',
+      locale: 'Lokal',
+      alpha: 'Alfa',
+      alphaNumeric: 'Alfanumerik',
+      hexaDecimal: 'Heksadesimal',
+      fileName: 'Nama file',
+      commonFileName: 'Nama file umum',
+      mimeType: 'Jenis mime',
+      commonFileType: 'Jenis file umum',
+      commonFileExt: 'Ekstensi file umum',
+      fileType: 'Jenis file',
+      fileExt: 'Ekstensi file',
+      directoryPath: 'Jalur direktori',
+      filePath: 'Jalur file',
+      semver: 'Semver',
+      manufacturer: 'Pabrikan',
+      model: 'Model',
+      fuel: 'Fuel',
+      vin: 'Vin'
+   }
+};

src/renderer/i18n/index.ts

@@ -10,6 +10,7 @@ import { viVN } from './vi-VN';
 import { jaJP } from './ja-JP';
 import { zhCN } from './zh-CN';
 import { ruRU } from './ru-RU';
+import { idID } from './id-ID';
 
 const messages = {
    'en-US': enUS,
@@ -22,7 +23,8 @@ const messages = {
    'vi-VN': viVN,
    'ja-JP': jaJP,
    'zh-CN': zhCN,
-   'ru-RU': ruRU
+   'ru-RU': ruRU,
+   'id-ID': idID
 };
 
 type NestedPartial<T> = {

src/renderer/i18n/pt-BR.ts

@@ -142,7 +142,12 @@ export const ptBR = {
       pin: 'Fixar',	
       unpin: 'Desafixar',	
       console: 'Console',	
-      shortcuts: 'Atalhos'
+      shortcuts: 'Atalhos',
+      folder: 'Pasta | Pastas',
+      appearence: 'Aparência',
+      color: 'Cor',
+      label: 'Rótulo',
+      icon: 'Icone'
    },
    message: {
       appWelcome: 'Bem vindo ao Antares SQL Client!',
@@ -320,7 +325,12 @@ export const ptBR = {
       clearQuery: 'Limpar consulta',	
       openFilter: 'Abrir Filtro',	
       nextResultsPage: 'Próxima página de resultados',	
-      previousResultsPage: 'Página de resultados anterior'
+      previousResultsPage: 'Página de resultados anterior',
+      fillCell: 'Preencher Célula',
+      editFolder: 'Editar Pasta',
+      folderName: 'Nome da pasta',
+      deleteFolder: 'Apagar Pasta',
+      editConnectionAppearence: 'Editar aparência da conexão'
    },
    faker: {
       address: 'Endereço',

src/renderer/i18n/supported-locales.ts

@@ -9,5 +9,6 @@ export const localesNames: {[key: string]: string} = {
    'vi-VN': 'Tiếng Việt',
    'ja-JP': '日本語',
    'zh-CN': '简体中文',
-   'ru-RU': 'Русский'
+   'ru-RU': 'Русский',
+   'id-ID': 'Bahasa Indonesia'
 };

src/renderer/index.ts

@@ -3,7 +3,9 @@ import { ipcRenderer } from 'electron';
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { VueMaskDirective } from 'v-mask';
+import * as FloatingVue from 'floating-vue';
 import '@mdi/font/css/materialdesignicons.css';
+import 'floating-vue/dist/style.css';
 import 'leaflet/dist/leaflet.css';
 import '@/scss/main.scss';
 
@@ -27,6 +29,7 @@ createApp(App)
    .directive('mask', vMaskV3)
    .use(createPinia())
    .use(i18n)
+   .use(FloatingVue)
    .mount('#app');
 
 const { locale } = useSettingsStore();

src/renderer/libs/getContrast.ts

@@ -0,0 +1,4 @@
+export const getContrast = (hexcolor: string) => {
+   if (!hexcolor) return '';
+   return (parseInt(hexcolor.replace('#', ''), 16) > 0xffffff / 2) ? 'dark' : 'light';
+};

src/renderer/scss/_transitions.scss

@@ -43,6 +43,14 @@
   animation: jump-down-in 0.2s reverse;
 }
 
+.flip-list-move {
+  transition: transform 0.5s;
+}
+
+.no-move {
+  transition: transform 0s;
+}
+
 .pulse {
   animation-name: pulse;
   animation-duration: 2s;

src/renderer/scss/themes/dark-theme.scss

@@ -209,6 +209,8 @@
         background: $bg-color-light-dark;
 
         .tab-item {
+          background: $bg-color-light-dark;
+
           > a {
             color: $body-font-color-dark;
           }

src/renderer/stores/connections.ts

@@ -2,8 +2,19 @@ import { defineStore } from 'pinia';
 import * as Store from 'electron-store';
 import * as crypto from 'crypto';
 import { ConnectionParams } from 'common/interfaces/antares';
+import { uidGen } from 'common/libs/uidGen';
 const key = localStorage.getItem('key');
 
+export interface SidebarElement {
+   isFolder: boolean;
+   uid: string;
+   client?: string;
+   connections?: string[];
+   color?: string;
+   name?: string;
+   icon?: null | string;
+}
+
 if (!key)
    localStorage.setItem('key', crypto.randomBytes(16).toString('hex'));
 else
@@ -18,67 +29,175 @@ const persistentStore = new Store({
 export const useConnectionsStore = defineStore('connections', {
    state: () => ({
       connections: persistentStore.get('connections', []) as ConnectionParams[],
-      pinnedConnections: new Set([...persistentStore.get('pinnedConnections', []) as string[]]) as Set<string>,
-      lastConnections: persistentStore.get('lastConnections', []) as {uid: string; time: number}[]
+      lastConnections: persistentStore.get('lastConnections', []) as {uid: string; time: number}[],
+      connectionsOrder: persistentStore.get('connectionsOrder', []) as SidebarElement[]
    }),
    getters: {
+      getConnectionByUid: state => (uid:string) => state.connections.find(connection => connection.uid === uid),
       getConnectionName: state => (uid: string) => {
-         const connection = state.connections.filter(connection => connection.uid === uid)[0];
+         const connection = state.connections.find(connection => connection.uid === uid);
          let connectionName = '';
+         if (connection) {
+            if (connection.name)
+               connectionName = connection.name;
+            else if (connection.ask)
+               connectionName = `${connection.host}:${connection.port}`;
+            else if (connection.databasePath) {
+               let string = connection.databasePath.split(/[/\\]+/).pop();
 
-         if (connection.name)
-            connectionName = connection.name;
-         else if (connection.ask)
-            connectionName = `${connection.host}:${connection.port}`;
-         else if (connection.databasePath) {
-            let string = connection.databasePath.split(/[/\\]+/).pop();
+               if (string.length >= 30)
+                  string = `...${string.slice(-30)}`;
 
-            if (string.length >= 30)
-               string = `...${string.slice(-30)}`;
-
-            connectionName = string;
+               connectionName = string;
+            }
+            else
+               connectionName = `${connection.user + '@'}${connection.host}:${connection.port}`;
          }
-         else
-            connectionName = `${connection.user + '@'}${connection.host}:${connection.port}`;
 
          return connectionName;
-      }
+      },
+      getConnectionOrderByUid: state => (uid:string) => state.connectionsOrder
+         .find(connection => connection.uid === uid),
+      getFolders: state => state.connectionsOrder.filter(conn => conn.isFolder),
+      getConnectionFolder: state => (uid:string) => state.connectionsOrder
+         .find(folder => folder.isFolder && folder.connections.includes(uid))
    },
    actions: {
       addConnection (connection: ConnectionParams) {
          this.connections.push(connection);
          persistentStore.set('connections', this.connections);
+
+         this.connectionsOrder.push({
+            isFolder: false,
+            uid: connection.uid,
+            client: connection.client,
+            icon: null,
+            name: null
+         });
+         persistentStore.set('connectionsOrder', this.connectionsOrder);
       },
-      deleteConnection (connection: ConnectionParams) {
-         this.connections = (this.connections as ConnectionParams[]).filter(el => el.uid !== connection.uid);
+      addFolder (params: {after: string; connections: [string, string]}) {
+         const index = this.connectionsOrder.findIndex((conn: SidebarElement) => conn.uid === params.after);
+
+         this.connectionsOrder.splice(index, 0, {
+            isFolder: true,
+            uid: uidGen('F'),
+            name: '',
+            color: '#E36929',
+            connections: params.connections
+         });
+         persistentStore.set('connectionsOrder', this.connectionsOrder);
+      },
+      addToFolder (params: {folder: string; connection: string}) {
+         this.connectionsOrder = this.connectionsOrder.map((conn: SidebarElement) => {
+            if (conn.uid === params.folder)
+               conn.connections.push(params.connection);
+
+            return conn;
+         });
+         persistentStore.set('connectionsOrder', this.connectionsOrder);
+         this.clearEmptyFolders();
+      },
+      deleteConnection (connection: SidebarElement | ConnectionParams) {
+         this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).map(el => { // Removes connection from folders
+            if (el.isFolder && el.connections.includes(connection.uid))
+               el.connections = el.connections.filter(uid => uid !== connection.uid);
+            return el;
+         });
+         this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).filter(el => el.uid !== connection.uid);
+
+         this.connections = (this.connections as SidebarElement[]).filter(el => el.uid !== connection.uid);
          persistentStore.set('connections', this.connections);
-         (this.pinnedConnections as Set<string>).delete(connection.uid);
-         persistentStore.set('pinnedConnections', [...this.pinnedConnections]);
+         this.clearEmptyFolders();
       },
       editConnection (connection: ConnectionParams) {
          const editedConnections = (this.connections as ConnectionParams[]).map(conn => {
             if (conn.uid === connection.uid) return connection;
             return conn;
          });
+
          this.connections = editedConnections;
-         this.selected_conection = {};
          persistentStore.set('connections', this.connections);
+
+         const editedConnectionsOrder = (this.connectionsOrder as SidebarElement[]).map(conn => {
+            if (conn.uid === connection.uid) {
+               return {
+                  isFolder: false,
+                  uid: connection.uid,
+                  client: connection.client,
+                  icon: conn.icon,
+                  name: conn.name
+               };
+            }
+            return conn;
+         });
+
+         this.connectionsOrder = editedConnectionsOrder;
+         persistentStore.set('connectionsOrder', this.connectionsOrder);
       },
       updateConnections (connections: ConnectionParams[]) {
          this.connections = connections;
          persistentStore.set('connections', this.connections);
       },
-      updatePinnedConnections (pinned: string[]) {
-         this.pinnedConnections = new Set(pinned);
-         persistentStore.set('pinnedConnections', [...this.pinnedConnections]);
+      initConnectionsOrder () {
+         this.connectionsOrder = (this.connections as ConnectionParams[]).map<SidebarElement>(conn => {
+            return {
+               isFolder: false,
+               uid: conn.uid,
+               client: conn.client,
+               icon: null,
+               name: null
+            };
+         });
+         persistentStore.set('connectionsOrder', this.connectionsOrder);
       },
-      pinConnection (uid: string) {
-         (this.pinnedConnections as Set<string>).add(uid);
-         persistentStore.set('pinnedConnections', [...this.pinnedConnections]);
+      updateConnectionsOrder (connections: SidebarElement[]) {
+         const invalidElements = connections.reduce<{index: number; uid: string}[]>((acc, curr, i) => {
+            if (typeof curr === 'string')
+               acc.push({ index: i, uid: curr });
+
+            return acc;
+         }, []);
+
+         if (invalidElements.length) {
+            invalidElements.forEach(el => {
+               let connIndex = connections.findIndex(conn => conn.uid === el.uid);
+               const conn = connections[connIndex];
+
+               if (connIndex === -1) return;
+
+               connections.splice(el.index, 1, { // Move to new position
+                  isFolder: false,
+                  client: conn.client,
+                  uid: conn.uid,
+                  icon: conn.icon,
+                  name: conn.name
+               });
+
+               connIndex = connections.findIndex((conn, i) => conn.uid === el.uid && i !== el.index);
+               connections.splice(connIndex, 1);// Delete old object
+            });
+         }
+
+         // Clear empty folders
+         const emptyFolders = connections.reduce<string[]>((acc, curr) => {
+            if (curr.connections && curr.connections.length === 0)
+               acc.push(curr.uid);
+            return acc;
+         }, []);
+
+         connections = connections.filter(el => !emptyFolders.includes(el.uid));
+
+         this.connectionsOrder = connections;
+         persistentStore.set('connectionsOrder', this.connectionsOrder);
       },
-      unpinConnection (uid: string) {
-         (this.pinnedConnections as Set<string>).delete(uid);
-         persistentStore.set('pinnedConnections', [...this.pinnedConnections]);
+      updateConnectionOrder (element: SidebarElement) {
+         this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).map(el => {
+            if (el.uid === element.uid)
+               el = element;
+            return el;
+         });
+         persistentStore.set('connectionsOrder', this.connectionsOrder);
       },
       updateLastConnection (uid: string) {
          const cIndex = (this.lastConnections as {uid: string; time: number}[]).findIndex((c) => c.uid === uid);
@@ -89,6 +208,17 @@ export const useConnectionsStore = defineStore('connections', {
             this.lastConnections.push({ uid, time: new Date().getTime() });
 
          persistentStore.set('lastConnections', this.lastConnections);
+      },
+      clearEmptyFolders () {
+         // Clear empty folders
+         const emptyFolders = (this.connectionsOrder as SidebarElement[]).reduce<string[]>((acc, curr) => {
+            if (curr.connections && curr.connections.length === 0)
+               acc.push(curr.uid);
+            return acc;
+         }, []);
+
+         this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).filter(el => !emptyFolders.includes(el.uid));
+         persistentStore.set('connectionsOrder', this.connectionsOrder);
       }
    }
 });

src/renderer/stores/settings.ts

@@ -22,6 +22,7 @@ export const useSettingsStore = defineStore('settings', {
       dataTabLimit: settingsStore.get('data_tab_limit', 1000) as number,
       autoComplete: settingsStore.get('auto_complete', true) as boolean,
       lineWrap: settingsStore.get('line_wrap', true) as boolean,
+      executeSelected: settingsStore.get('execute_selected', true) as boolean,
       applicationTheme: settingsStore.get('application_theme', defaultAppTheme) as ApplicationTheme,
       editorTheme: settingsStore.get('editor_theme', defaultEditorTheme) as string,
       editorFontSize: settingsStore.get('editor_font_size', 'medium') as EditorFontSize,
@@ -60,6 +61,10 @@ export const useSettingsStore = defineStore('settings', {
          this.lineWrap = val;
          settingsStore.set('line_wrap', this.lineWrap);
       },
+      changeExecuteSelected (val: boolean) {
+         this.executeSelected = val;
+         settingsStore.set('execute_selected', this.executeSelected);
+      },
       changeApplicationTheme (theme: string) {
          this.applicationTheme = theme;
          settingsStore.set('application_theme', this.applicationTheme);

src/renderer/untyped.d.ts

@@ -1,2 +1,80 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/ban-types */
 declare module '@/App.vue';
 declare module 'v-mask';
+declare module 'vuedraggable' {// <- to export as default
+   const draggableComponent: import('vue').DefineComponent<{
+      list: {
+          type: ArrayConstructor;
+          required: boolean;
+          default: any;
+      };
+      modelValue: {
+          type: ArrayConstructor;
+          required: boolean;
+          default: any;
+      };
+      itemKey: {
+          type: (FunctionConstructor | StringConstructor)[];
+          required: boolean;
+      };
+      clone: {
+          type: FunctionConstructor;
+          default: (original: any) => any;
+      };
+      tag: {
+          type: StringConstructor;
+          default: string;
+      };
+      move: {
+          type: FunctionConstructor;
+          default: any;
+      };
+      componentData: {
+          type: ObjectConstructor;
+          required: boolean;
+          default: any;
+      };
+  }, unknown, {
+      error: boolean;
+  }, {
+      realList(): any;
+      getKey(): any;
+  }, {
+      getUnderlyingVm(domElement: any): any;
+      getUnderlyingPotencialDraggableComponent(htmElement: any): any;
+      emitChanges(evt: any): void;
+      alterList(onList: any): void;
+      spliceList(): void;
+      updatePosition(oldIndex: any, newIndex: any): void;
+      getRelatedContextFromMoveEvent({ to, related }: {
+          to: any;
+          related: any;
+      }): any;
+      getVmIndexFromDomIndex(domIndex: any): any;
+      onDragStart(evt: any): void;
+      onDragAdd(evt: any): void;
+      onDragRemove(evt: any): void;
+      onDragUpdate(evt: any): void;
+      computeFutureIndex(relatedContext: any, evt: any): any;
+      onDragMove(evt: any, originalEvent: any): any;
+      onDragEnd(): void;
+  }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, any[], any, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<{
+      move: Function;
+      tag: string;
+      clone: Function;
+      list: unknown[];
+      modelValue: unknown[];
+      componentData: Record<string, any>;
+  } & {
+      itemKey?: string | Function;
+  }>, {
+      move: Function;
+      tag: string;
+      clone: Function;
+      list: unknown[];
+      modelValue: unknown[];
+      componentData: Record<string, any>;
+  }>;
+   export = draggableComponent;
+}