fix: deletion of connections inside folder

src/renderer/components/ModalConnectionAppearence.vue

@@ -89,7 +89,7 @@ const icons = [
    { name: 'account-group', code: 'mdi-account-group-outline' },
    { name: 'cloud', code: 'mdi-cloud-outline' },
    { name: 'key-chain', code: 'mdi-key-chain-variant' },
-   { name: 'filmstrip', code: 'mdi-filmstrip' },
+   { 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' },
@@ -99,20 +99,22 @@ const icons = [
    { name: 'cart', code: 'mdi-cart-variant' },
    { name: 'bank', code: 'mdi-bank-outline' },
    { name: 'receipt', code: 'mdi-receipt-text-outline' },
-   { name: 'heart', code: 'mdi-heart-outline' },
+   { name: 'raspberry-pi', code: 'mdi-raspberry-pi' },
    { name: 'book', code: 'mdi-book-outline' },
-   { name: 'anchor', code: 'mdi-anchor' },
+   { name: 'web', code: 'mdi-web' },
-   { name: 'leaf', code: 'mdi-leaf' },
+   { name: 'multimedia', code: 'mdi-multimedia' },
-   { name: 'music', code: 'mdi-music' },
+   { name: 'qr-code', code: 'mdi-qrcode' },
-   { name: 'camera', code: 'mdi-camera-outline' },
+   { name: 'flask', code: 'mdi-flask-outline' },
-   { name: 'cash-register', code: 'mdi-cash-register' },
+   { name: 'memory', code: 'mdi-memory' },
-   { name: 'food', code: 'mdi-food-outline' },
+   { 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-motorbike' },
+   { name: 'motorbike', code: 'mdi-atv' },
    { name: 'train', code: 'mdi-train' },
    { name: 'airplane', code: 'mdi-airplane' },
    { name: 'ferry', code: 'mdi-ferry' },
@@ -123,11 +125,9 @@ const icons = [
    { name: 'aws', code: 'mdi-aws' },
    { name: 'google-cloud', code: 'mdi-google-cloud' },
    { name: 'microsoft-azure', code: 'mdi-microsoft-azure' },
-   { name: 'debian', code: 'mdi-debian' },
+   { name: 'linux', code: 'mdi-linux' },
-   { name: 'ubuntu', code: 'mdi-ubuntu' },
+   { name: 'microsoft-windows', code: 'mdi-microsoft-windows' },
-   { name: 'arch', code: 'mdi-arch' },
+   { name: 'apple', code: 'mdi-apple' },
-   { name: 'redhat', code: 'mdi-redhat' },
-   { name: 'fedora', code: 'mdi-fedora' },
    { name: 'android', code: 'mdi-android' }
 ];
 

src/renderer/components/ModalFolderAppearence.vue

@@ -96,7 +96,7 @@ const colorPalette = [
    { name: 'emerald', hex: '#038835' },
    { name: 'mint', hex: '#48CFAD' },
    { name: 'aqua', hex: '#4FC1E9' },
-   { name: 'roya-lblue', hex: '#4169E1' },
+   { name: 'royal-lblue', hex: '#4169E1' },
    { name: 'blue-jeans', hex: '#5D9CEC' },
    { name: 'stone', hex: '#59788E' },
    { name: 'lavander', hex: '#AC92EC' },

src/renderer/components/SettingBarConnections.vue

@@ -48,7 +48,7 @@
             </div>
             <SettingBarConnectionsFolder
                v-else-if="element.isFolder"
-               :key="element.uid"
+               :key="`${element.uid}-${element.connections.length}`"
                :folder="element"
                :covered-element="coveredElement"
                :dragged-element="draggedElement"

src/renderer/components/SettingBarConnectionsFolder.vue

@@ -47,9 +47,9 @@
             >
                <i
                   class="folder-element-icon dbi"
-                  :class="[getConnectionOrderByUid(element).icon ? `mdi ${getConnectionOrderByUid(element).icon}`: `dbi-${getConnectionOrderByUid(element).client}`, getStatusBadge(element)]"
+                  :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>
+               <small v-if="isOpen" class="folder-element-name">{{ getConnectionOrderByUid(element)?.name || getConnectionName(element) }}</small>
             </div>
          </template>
       </Draggable>

src/renderer/stores/connections.ts

@@ -111,16 +111,12 @@ export const useConnectionsStore = defineStore('connections', {
          persistentStore.set('connectionsOrder', this.connectionsOrder);
       },
       deleteConnection (connection: SidebarElement | ConnectionParams) {
-         this.connections = (this.connections as SidebarElement[]).filter(el => el.uid !== connection.uid);
-         persistentStore.set('connections', this.connections);
-
-         this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).filter(el => el.uid !== connection.uid);
          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);
 
          // Clear empty folders
          const emptyFolders = (this.connectionsOrder as SidebarElement[]).reduce<string[]>((acc, curr) => {
@@ -130,8 +126,10 @@ export const useConnectionsStore = defineStore('connections', {
          }, []);
 
          this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).filter(el => !emptyFolders.includes(el.uid));
-
          persistentStore.set('connectionsOrder', this.connectionsOrder);
+
+         this.connections = (this.connections as SidebarElement[]).filter(el => el.uid !== connection.uid);
+         persistentStore.set('connections', this.connections);
       },
       editConnection (connection: ConnectionParams) {
          const editedConnections = (this.connections as ConnectionParams[]).map(conn => {