Additions

src/renderer/App.vue

@@ -8,7 +8,7 @@
             id="main-loader"
             :is-loading="isLoading"
          /> -->
-         <TheAppWelcome @newConn="showNewConnModal" />
+         <TheAppWelcome v-if="!connections.length" @newConn="showNewConnModal" />
       </div>
       <TheFooter />
       <ModalNewConnection v-if="isNewConnModal" />
@@ -39,7 +39,8 @@ export default {
    computed: {
       ...mapGetters({
          isLoading: 'application/isLoading',
-         isNewConnModal: 'connections/isNewModal'
+         isNewConnModal: 'connections/isNewModal',
+         connections: 'connections/getConnections'
       })
    },
    methods: {

src/renderer/components/ModalNewConnection.vue

@@ -152,7 +152,8 @@ export default {
             port: '3306',
             user: 'root',
             password: '',
-            ask: false
+            ask: false,
+            uid: Math.random().toString(36).substr(2, 9).toUpperCase()
          },
          toast: {
             status: '',

src/renderer/components/TheSettingBar.vue

@@ -3,9 +3,10 @@
       <div class="settingbar-top-elements">
          <ul class="settingbar-elements">
             <li
-               v-for="(connection, key) in connections"
+               v-for="connection in connections"
-               :key="key"
+               :key="connection.uid"
                class="settingbar-element btn btn-link tooltip tooltip-right p-0"
+               :class="{'selected': connection.uid === selectedConnection}"
                :data-tooltip="`${connection.user}@${connection.host}:${connection.port}`"
             >
                <i class="dbi" :class="`dbi-${connection.client}`" />
@@ -37,13 +38,15 @@ export default {
    name: 'TheSettingBar',
    computed: {
       ...mapGetters({
-         connections: 'connections/getConnections'
+         connections: 'connections/getConnections',
+         selectedConnection: 'connections/getSelected'
       })
    },
    methods: {
       ...mapActions({
          showNewConnModal: 'connections/showNewConnModal'
-      })
+      }),
+      isActiveTab: uid => uid === this.selectedConnection
    }
 };
 </script>

src/renderer/store/modules/connections.store.js

@@ -5,10 +5,16 @@ export default {
    strict: true,
    state: {
       connections: [],
-      is_new_modal: false
+      is_new_modal: false,
+      connection_selected: null
    },
    getters: {
       getConnections: state => state.connections,
+      getSelected: state => {
+         if (state.connection_selected) return state.connection_selected;
+         if (state.connections.length) return state.connections[0].uid;
+         return null;
+      },
       isNewModal: state => state.is_new_modal
    },
    mutations: {