feat: move connections out of folder from context menu, related to #773

src/renderer/components/SettingBarContext.vue

@@ -37,7 +37,7 @@
                   /> {{ t('application.newFolder') }}</span>
             </div>
             <div
-               v-for="folder in parsedFolders"
+               v-for="folder in filteredFolders"
                :key="folder.uid"
                class="context-element"
                @click.stop="moveToFolder(folder.uid)"
@@ -50,6 +50,19 @@
                      :style="`color: ${folder.color}!important`"
                   /> {{ folder.name || t('general.folder') }}</span>
             </div>
+
+            <div
+               v-if="isInFolder"
+               class="context-element"
+               @click="outOfFolder"
+            >
+               <span class="d-flex">
+                  <BaseIcon
+                     class="text-light mt-1 mr-1"
+                     icon-name="mdiFolderOff"
+                     :size="18"
+                  /> {{ t('application.outOfFolder') }}</span>
+            </div>
          </div>
       </div>
       <div class="context-element" @click.stop="showAppearanceModal">
@@ -137,7 +150,9 @@ const {
    getConnectionName,
    addConnection,
    deleteConnection,
-   addFolder
+   addFolder,
+   addToFolder,
+   removeFromFolders
 } = connectionsStore;
 
 const { getFolders: folders } = storeToRefs(connectionsStore);
@@ -162,7 +177,8 @@ const isConnectionEdit = ref(false);
 
 const connectionName = computed(() => props.contextConnection.name || getConnectionName(props.contextConnection.uid) || t('general.folder', 1));
 const isConnected = computed(() => getWorkspace(props.contextConnection.uid)?.connectionStatus === 'connected');
-const parsedFolders = computed(() => folders.value.filter(f => !f.connections.includes(props.contextConnection.uid)));
+const filteredFolders = computed(() => folders.value.filter(f => !f.connections.includes(props.contextConnection.uid)));
+const isInFolder = computed(() => folders.value.some(f => f.connections.includes(props.contextConnection.uid)));
 
 const confirmDeleteConnection = () => {
    if (isConnected.value)
@@ -177,10 +193,21 @@ const moveToFolder = (folderUid?: string) => {
          connections: [props.contextConnection.uid]
       });
    }
+   else {
+      addToFolder({
+         folder: folderUid,
+         connection: props.contextConnection.uid
+      });
+   }
 
    closeContext();
 };
 
+const outOfFolder = () => {
+   removeFromFolders(props.contextConnection.uid);
+   closeContext();
+};
+
 const duplicateConnection = () => {
    let connectionCopy = getConnectionByUid(props.contextConnection.uid);
    connectionCopy = {

src/renderer/i18n/en-US.ts

@@ -365,6 +365,7 @@ export const enUS = {
       folderName: 'Folder name',
       deleteFolder: 'Delete folder',
       newFolder: 'New folder',
+      outOfFolder: 'Out of folder',
       editConnectionAppearance: 'Edit connection appearance',
       defaultCopyType: 'Default copy type',
       showTableSize: 'Show table size in sidebar',

src/renderer/stores/connections.ts

@@ -95,7 +95,7 @@ export const useConnectionsStore = defineStore('connections', {
             ? this.connectionsOrder.findIndex((conn: SidebarElement) => conn.uid === params.after)
             : this.connectionsOrder.length;
 
-         this.removeFromFolders(params.connections);
+         this.removeFromFolders(...params.connections);
 
          this.connectionsOrder.splice(index, 0, {
             isFolder: true,
@@ -116,6 +116,8 @@ export const useConnectionsStore = defineStore('connections', {
          this.clearEmptyFolders();
       },
       addToFolder (params: {folder: string; connection: string}) {
+         this.removeFromFolders(params.connection);
+
          this.connectionsOrder = this.connectionsOrder.map((conn: SidebarElement) => {
             if (conn.uid === params.folder)
                conn.connections.push(params.connection);