refactor: consolidate connection switcher and Connections button

Merge the connection dropdown and the separate Connections button into
a single unified control. The connection dropdown now includes a
'Manage connections...' action at the bottom (for users with
MANAGE_CONNECTIONS permission), eliminating the redundant separate
button that cluttered the sidebar.

Changes:
- Move 'Manage connections...' action inside the connection dropdown
- Remove separate Connections button from sidebar bottom section
- Add dropdownDivider and dropdownManage CSS styles
- Allow dropdown to open even with no connections (for admins to add)

Sidebar bottom now has: View as → Connection dropdown → User profile
(instead of: View as → Connection dropdown → Connections button → User)

Co-authored-by: Venkat SF <venkatesh.sakamuri@stayflexi.com>

Author: cursoragent

src/components/layout/AppSidebar.jsx

@@ -144,7 +144,7 @@ export default function AppSidebar() {
               className={styles.bottomItem}
               onClick={() => setShowConnectionDropdown((v) => !v)}
               title={collapsed ? connectionLabel : undefined}
-              disabled={isLoading || connections.length === 0}
+              disabled={isLoading || (connections.length === 0 && !canManageConnections)}
             >
               <Database size={15} className={styles.navIcon} />
               <span className={`${styles.navLabel} ${collapsed ? styles.navLabelHidden : ''}`}>
@@ -156,62 +156,69 @@ export default function AppSidebar() {
               {!collapsed && <ChevronDown size={14} className={styles.chevronIcon} />}
             </button>
 
-            {showConnectionDropdown && !collapsed && connections.length > 0 && (
+            {showConnectionDropdown && !collapsed && (
               <div className={styles.connectionDropdown}>
-                <div className={styles.dropdownLabel}>Connections</div>
-                {connections.map((conn) => (
-                  <div
-                    key={conn.id}
-                    className={`${styles.dropdownRow} ${conn.id === connectionId ? styles.dropdownItemActive : ''}`}
-                  >
+                {connections.length > 0 && (
+                  <>
+                    <div className={styles.dropdownLabel}>Connections</div>
+                    {connections.map((conn) => (
+                      <div
+                        key={conn.id}
+                        className={`${styles.dropdownRow} ${conn.id === connectionId ? styles.dropdownItemActive : ''}`}
+                      >
+                        <button
+                          className={styles.dropdownItem}
+                          onClick={() => {
+                            changeConnection(conn.id)
+                            setShowConnectionDropdown(false)
+                          }}
+                        >
+                          <Database size={14} />
+                          <span className={styles.dropdownItemName}>
+                            {conn.connectionName}
+                            {getConnectionAccessLabel(conn) ? ` · ${getConnectionAccessLabel(conn)}` : ''}
+                          </span>
+                          <span className={styles.dbTypeBadge}>{getConnectionAccessBadge(conn) || conn.dbType}</span>
+                          {conn.id === connectionId && <Check size={13} className={styles.dropdownItemCheck} />}
+                        </button>
+                        <button
+                          className={`${styles.dropdownPin} ${conn.pinned ? styles.dropdownPinActive : ''}`}
+                          onClick={() =>
+                            setConnectionPin.mutate({ connectionId: conn.id, pinned: !conn.pinned })
+                          }
+                          disabled={setConnectionPin.isPending}
+                          aria-pressed={Boolean(conn.pinned)}
+                          title={
+                            conn.pinned
+                              ? 'Pinned as your default — DeepSQL opens on this connection. Click to unpin.'
+                              : 'Pin as your default — DeepSQL will open on this connection every time you load it.'
+                          }
+                        >
+                          <Pin size={13} />
+                        </button>
+                      </div>
+                    ))}
+                  </>
+                )}
+                {canManageConnections && (
+                  <>
+                    {connections.length > 0 && <div className={styles.dropdownDivider} />}
                     <button
-                      className={styles.dropdownItem}
+                      className={styles.dropdownManage}
                       onClick={() => {
-                        changeConnection(conn.id)
                         setShowConnectionDropdown(false)
+                        setShowConnections(true)
                       }}
                     >
-                      <Database size={14} />
-                      <span className={styles.dropdownItemName}>
-                        {conn.connectionName}
-                        {getConnectionAccessLabel(conn) ? ` · ${getConnectionAccessLabel(conn)}` : ''}
-                      </span>
-                      <span className={styles.dbTypeBadge}>{getConnectionAccessBadge(conn) || conn.dbType}</span>
-                      {conn.id === connectionId && <Check size={13} className={styles.dropdownItemCheck} />}
+                      <Settings size={14} />
+                      <span>Manage connections…</span>
                     </button>
-                    <button
-                      className={`${styles.dropdownPin} ${conn.pinned ? styles.dropdownPinActive : ''}`}
-                      onClick={() =>
-                        setConnectionPin.mutate({ connectionId: conn.id, pinned: !conn.pinned })
-                      }
-                      disabled={setConnectionPin.isPending}
-                      aria-pressed={Boolean(conn.pinned)}
-                      title={
-                        conn.pinned
-                          ? 'Pinned as your default — DeepSQL opens on this connection. Click to unpin.'
-                          : 'Pin as your default — DeepSQL will open on this connection every time you load it.'
-                      }
-                    >
-                      <Pin size={13} />
-                    </button>
-                  </div>
-                ))}
+                  </>
+                )}
               </div>
             )}
           </div>
 
-          {canManageConnections && (
-            <button
-              className={styles.bottomItem}
-              onClick={() => setShowConnections(true)}
-              title={collapsed ? 'Connections' : undefined}
-            >
-              <Settings size={15} className={styles.navIcon} />
-              <span className={`${styles.navLabel} ${collapsed ? styles.navLabelHidden : ''}`}>
-                Connections
-              </span>
-            </button>
-          )}
           <div className={styles.userMenuWrap} ref={userMenuRef}>
             <button
               className={styles.bottomItem}

src/components/layout/AppSidebar.module.css

@@ -338,6 +338,34 @@
   color: #111827;
 }
 
+.dropdownDivider {
+  height: 1px;
+  background: #e5e7eb;
+  margin: 4px 8px;
+}
+
+.dropdownManage {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: calc(100% - 8px);
+  margin: 4px;
+  padding: 8px 10px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  font-size: 13px;
+  color: #6b7280;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.1s, color 0.1s;
+}
+
+.dropdownManage:hover {
+  background: #f3f4f6;
+  color: #111827;
+}
+
 /* ── User profile dropdown ── */
 .userMenuWrap {
   position: relative;