remove the connection manager GUI for a cleaner less confusing look

web/assets/index.js

@@ -169,6 +169,130 @@ const exportConnectionDialog = async (id) => {
 /**
  * Opens a dialog popup to manage stored connection information.
  */
+// const connectionManagerDialog = () => {
+//     const popup = new PopupBuilder();
+//     const el = document.createElement('div');
+//     el.id = 'connectionManager';
+//     el.classList = 'col gap-15';
+//     const connectionValues = getSortedConnectionsArray();
+//     for (const connection of connectionValues) {
+//         const entry = document.createElement('div');
+//         entry.classList = 'entry row gap-10 align-center';
+//         entry.innerHTML = /*html*/`
+//             <div class="icon flex-no-shrink">cloud</div>
+//             <div class="row flex-wrap align-center flex-grow">
+//                 <div class="col gap-5 flex-grow">
+//                     <div class="label">${connection.name}</div>
+//                     <small>
+//                         ${connection.username}@${connection.host}:${connection.port}
+//                         <br>${connection.path}
+//                     </small>
+//                 </div>
+//                 <div class="row gap-10">
+//                     <button class="menu btn iconOnly small secondary" title="Connection options">
+//                         <div class="icon">more_vert</div>
+//                     </button>
+//                     <button class="connect btn iconOnly small" title="Connect">
+//                         <div class="icon">arrow_forward</div>
+//                     </button>
+//                 </div>
+//             </div>
+//         `;
+//         $('.btn.menu', entry).addEventListener('click', () => {
+//             new ContextMenuBuilder()
+//                 .addItem(option => option
+//                     .setLabel('Edit...')
+//                     .setIcon('edit')
+//                     .setClickHandler(async() => {
+//                         popup.hide();
+//                         await editConnectionDialog(connection.id);
+//                         connectionManagerDialog();
+//                     }))
+//                 .addItem(option => option
+//                     .setLabel('Export...')
+//                     .setIcon('download')
+//                     .setClickHandler(async() => {
+//                         exportConnectionDialog(connection.id);
+//                     }))
+//                 .addSeparator()
+//                 .addItem(option => option
+//                     .setLabel('Delete')
+//                     .setIcon('delete')
+//                     .setIsDanger(true)
+//                     .setClickHandler(async() => {
+//                         delete connections[connection.id];
+//                         saveConnections();
+//                         entry.remove();
+//                     }))
+//                 .showAtCursor();
+//         });
+//         $('.btn.connect', entry).addEventListener('click', () => {
+//             popup.hide();
+//             setActiveConnection(connection.id);
+//         });
+//         el.appendChild(entry);
+//     }
+//     const elButtons = document.createElement('div');
+//     elButtons.classList = 'row gap-10 flex-wrap';
+//     const btnAdd = document.createElement('button');
+//     btnAdd.classList = 'btn success small';
+//     btnAdd.innerHTML = /*html*/`
+//         <div class="icon">add</div>
+//         New connection...
+//     `;
+//     btnAdd.addEventListener('click', async() => {
+//         popup.hide();
+//         await addNewConnectionDialog();
+//         connectionManagerDialog();
+//     });
+//     elButtons.appendChild(btnAdd);
+//     const btnImport = document.createElement('button');
+//     btnImport.classList = 'btn secondary small';
+//     btnImport.innerHTML = /*html*/`
+//         <div class="icon">cloud_upload</div>
+//         Import...
+//     `;
+//     btnImport.addEventListener('click', async() => {
+//         const input = document.createElement('input');
+//         input.type = 'file';
+//         input.accept = '.json';
+//         input.addEventListener('change', async() => {
+//             const file = input.files[0];
+//             if (!file) return;
+//             popup.hide();
+//             const reader = new FileReader();
+//             reader.addEventListener('load', async() => {
+//                 try {
+//                     const data = JSON.parse(reader.result);
+//                     const id = Date.now();
+//                     connections[id] = data;
+//                     saveConnections();
+//                     if (!data.key && !data.password) {
+//                         return editConnectionDialog(id);
+//                     }
+//                 } catch (error) {
+//                     console.error(error);
+//                 }
+//                 connectionManagerDialog();
+//             });
+//             reader.readAsText(file);
+//         });
+//         input.click();
+//     });
+//     elButtons.appendChild(btnImport);
+//     el.appendChild(elButtons);
+//     popup
+//         .setTitle('Connections')
+//         .addBody(el)
+//         .addAction(action => action
+//             .setIsPrimary(true)
+//             .setLabel('Done')
+//             .setClickHandler(() => {
+//                 saveConnections();
+//             }));
+//     popup.show();
+// }
+
 const connectionManagerDialog = () => {
     const popup = new PopupBuilder();
     const el = document.createElement('div');
@@ -189,98 +313,18 @@ const connectionManagerDialog = () => {
                     </small>
                 </div>
                 <div class="row gap-10">
-                    <button class="menu btn iconOnly small secondary" title="Connection options">
-                        <div class="icon">more_vert</div>
-                    </button>
                     <button class="connect btn iconOnly small" title="Connect">
                         <div class="icon">arrow_forward</div>
                     </button>
                 </div>
             </div>
         `;
-        $('.btn.menu', entry).addEventListener('click', () => {
-            new ContextMenuBuilder()
-                .addItem(option => option
-                    .setLabel('Edit...')
-                    .setIcon('edit')
-                    .setClickHandler(async() => {
-                        popup.hide();
-                        await editConnectionDialog(connection.id);
-                        connectionManagerDialog();
-                    }))
-                .addItem(option => option
-                    .setLabel('Export...')
-                    .setIcon('download')
-                    .setClickHandler(async() => {
-                        exportConnectionDialog(connection.id);
-                    }))
-                .addSeparator()
-                .addItem(option => option
-                    .setLabel('Delete')
-                    .setIcon('delete')
-                    .setIsDanger(true)
-                    .setClickHandler(async() => {
-                        delete connections[connection.id];
-                        saveConnections();
-                        entry.remove();
-                    }))
-                .showAtCursor();
-        });
         $('.btn.connect', entry).addEventListener('click', () => {
             popup.hide();
             setActiveConnection(connection.id);
         });
         el.appendChild(entry);
     }
-    const elButtons = document.createElement('div');
-    elButtons.classList = 'row gap-10 flex-wrap';
-    const btnAdd = document.createElement('button');
-    btnAdd.classList = 'btn success small';
-    btnAdd.innerHTML = /*html*/`
-        <div class="icon">add</div>
-        New connection...
-    `;
-    btnAdd.addEventListener('click', async() => {
-        popup.hide();
-        await addNewConnectionDialog();
-        connectionManagerDialog();
-    });
-    elButtons.appendChild(btnAdd);
-    const btnImport = document.createElement('button');
-    btnImport.classList = 'btn secondary small';
-    btnImport.innerHTML = /*html*/`
-        <div class="icon">cloud_upload</div>
-        Import...
-    `;
-    btnImport.addEventListener('click', async() => {
-        const input = document.createElement('input');
-        input.type = 'file';
-        input.accept = '.json';
-        input.addEventListener('change', async() => {
-            const file = input.files[0];
-            if (!file) return;
-            popup.hide();
-            const reader = new FileReader();
-            reader.addEventListener('load', async() => {
-                try {
-                    const data = JSON.parse(reader.result);
-                    const id = Date.now();
-                    connections[id] = data;
-                    saveConnections();
-                    if (!data.key && !data.password) {
-                        return editConnectionDialog(id);
-                    }
-                } catch (error) {
-                    console.error(error);
-                }
-                connectionManagerDialog();
-            });
-            reader.readAsText(file);
-        });
-        input.click();
-    });
-    elButtons.appendChild(btnImport);
-    el.appendChild(elButtons);
     popup
         .setTitle('Connections')
         .addBody(el)
@@ -293,6 +337,7 @@ const connectionManagerDialog = () => {
     popup.show();
 }
 
+
 /**
  * Opens a dialog to edit an existing connection by its ID.
  * @param {number} id The connection ID
@@ -1938,20 +1983,20 @@ btnConnections.addEventListener('click', () => {
                 setActiveConnection(connection.id);
             }));
     };
-    menu.addSeparator();
+    // menu.addSeparator();
-    menu.addItem(option => option
+    // menu.addItem(option => option
-        .setLabel('Manage connections...')
+    //     .setLabel('Manage connections...')
-        .setIcon('smb_share')
+    //     .setIcon('smb_share')
-        .setClickHandler(connectionManagerDialog));
+    //     .setClickHandler(connectionManagerDialog));
-    menu.addItem(option => option
+    // menu.addItem(option => option
-        .setLabel('New connection...')
+    //     .setLabel('New connection...')
-        .setIcon('library_add')
+    //     .setIcon('library_add')
-        .setClickHandler(addNewConnectionDialog));
+    //     .setClickHandler(addNewConnectionDialog));
-    menu.addSeparator().addItem(item => item
+    menu.addItem(item => item
         .setIcon('code')
-        .setLabel('SFTP Browser GitHub')
+        .setLabel('SFTP Browser Git')
         .setClickHandler(() => {
-            window.open('https://github.com/CyberGen49/sftp-browser');
+            window.open('https://git.ssh.surf/hypermc/sftp-browser');
         }));
     const rect = btnConnections.getBoundingClientRect();
     menu.showAtCoords(rect.left, rect.bottom-5);