Make Client Settings and connections views scrollable, fix regression in unused bookmarks feature (#621)

Makes clientsettings scrollable, adds an option for mainview to wrap the
mainview-content in an OverlayScrollbarsComponent

public/themes/default.css

@@ -156,7 +156,7 @@
     --table-border-color: rgba(241, 246, 243, 0.15);
     --table-thead-border-top-color: rgba(250, 250, 250, 0.1);
     --table-thead-bright-border-color: rgb(204, 204, 204);
-    --table-thead-bg-color: rgba(250, 250, 250, 0.02);
+    --table-thead-bg-color: rgb(5, 5, 5);
     --table-tr-border-bottom-color: rgba(241, 246, 243, 0.15);
     --table-tr-hover-bg-color: rgba(255, 255, 255, 0.06);
     --table-tr-selected-bg-color: rgb(34, 34, 34);

public/themes/light.css

@@ -57,6 +57,10 @@
     --scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.4);
     --scrollbar-thumb-active-color: rgba(0, 0, 0, 0.5);
 
+    /* table colors */
+    --table-thead-bg-color: rgb(253, 253, 253);
+    --table-tr-selected-bg-color: rgb(216, 216, 216);
+
     /* line color */
     --line-actions-bg-color: rgba(0, 0, 0, 0.1);
     --line-actions-inactive-color: rgba(0, 0, 0, 0.3);

src/app/clientsettings/clientsettings.less

@@ -1,6 +1,7 @@
 .clientsettings-view {
     .content {
-        padding: 14px 18px 0 30px;
+        padding: 14px 18px 14px 30px;
+        overflow-y: scroll;
     }
 
     .wave-dropdown {

src/app/clientsettings/clientsettings.tsx

@@ -14,6 +14,7 @@ import * as appconst from "@/app/appconst";
 
 import "./clientsettings.less";
 import { MainView } from "../common/elements/mainview";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 
 class ClientSettingsKeybindings extends React.Component<{}, {}> {
     componentDidMount() {
@@ -251,7 +252,12 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         const curSudoPwClearOnSleep = GlobalModel.getSudoPwClearOnSleep();
 
         return (
-            <MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>
+            <MainView
+                className="clientsettings-view"
+                title="Client Settings"
+                onClose={this.handleClose}
+                scrollable={true}
+            >
                 <If condition={!isHidden}>
                     <ClientSettingsKeybindings></ClientSettingsKeybindings>
                 </If>

src/app/common/elements/mainview.less

@@ -40,7 +40,8 @@
     }
 
     .mainview-content {
-        padding-top: 14px;
+        display: flex;
+        flex-direction: column;
     }
 }
 

src/app/common/elements/mainview.tsx

@@ -7,6 +7,8 @@ import cn from "classnames";
 import { GlobalModel } from "@/models";
 
 import "./mainview.less";
+import { Choose, If, Otherwise, When } from "tsx-control-statements/components";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 
 @mobxReact.observer
 class MainView extends React.Component<{
@@ -14,6 +16,8 @@ class MainView extends React.Component<{
     onClose: () => void;
     children: React.ReactNode;
     className?: string;
+    scrollable?: boolean;
+    onScrollbarInitialized?: () => void;
 }> {
     render() {
         const sidebarModel = GlobalModel.mainSidebarModel;
@@ -31,7 +35,21 @@ class MainView extends React.Component<{
                         </div>
                     </header>
                 </div>
-                <div className="mainview-content">{this.props.children}</div>
+                <Choose>
+                    <When condition={this.props.scrollable}>
+                        <OverlayScrollbarsComponent
+                            className="mainview-content"
+                            options={{ scrollbars: { autoHide: "leave" } }}
+                            defer={true}
+                            events={{ initialized: this.props.onScrollbarInitialized }}
+                        >
+                            {this.props.children}
+                        </OverlayScrollbarsComponent>
+                    </When>
+                    <Otherwise>
+                        <div className="mainview-content">{this.props.children}</div>
+                    </Otherwise>
+                </Choose>
             </div>
         );
     }

src/app/connections/connections.less

@@ -9,10 +9,20 @@
         margin: 20px 50px 20px 20px;
     }
 
+    .connections-table-container {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        overflow-y: scroll;
+        max-height: 85vh;
+        width: fit-content;
+        max-width: 970px;
+    }
+
     .connections-table {
         margin: 0px 10px 10px 10px;
         table-layout: fixed;
-        max-width: 970px;
+        position: relative;
 
         colgroup {
             .first-col {
@@ -28,13 +38,16 @@
 
         thead {
             border-radius: var(--sizing-2-xs, 4px);
-            border-bottom: 2px solid var(--table-thead-bright-border-color);
             user-select: none;
 
             th {
+                position: sticky;
+                top: 0;
                 height: 32px;
                 padding: 5px 15px 5px 10px;
                 color: var(--app-text-color);
+                border-bottom: 2px solid var(--table-thead-bright-border-color);
+                background: var(--table-thead-bg-color);
             }
         }
 
@@ -78,8 +91,10 @@
 
     footer {
         margin-left: 10px;
+        margin-top: 10px;
         display: flex;
         flex-direction: row;
+        flex-shrink: 0;
         gap: 8px;
     }
 

src/app/connections/connections.tsx

@@ -13,6 +13,7 @@ import * as util from "@/util/util";
 
 import "./connections.less";
 import { MainView } from "../common/elements/mainview";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 
 class ConnectionsKeybindings extends React.Component<{}, {}> {
     componentDidMount() {
@@ -149,57 +150,63 @@ class ConnectionsView extends React.Component<{ model: RemotesModel }, { hovered
                 <If condition={!isHidden}>
                     <ConnectionsKeybindings></ConnectionsKeybindings>
                 </If>
-                <table
-                    className="connections-table"
-                    cellSpacing="0"
-                    cellPadding="0"
-                    border={0}
-                    ref={this.tableRef}
-                    onMouseLeave={this.handleTableHoverLeave}
+                <OverlayScrollbarsComponent
+                    className="connections-table-container"
+                    options={{ scrollbars: { autoHide: "leave" } }}
+                    defer={true}
                 >
-                    <colgroup>
-                        <col className="first-col" />
-                        <col className="second-col" />
-                        <col className="third-col" />
-                    </colgroup>
-                    <thead>
-                        <tr>
-                            <th className="text-standard col-name">
-                                <div>Name</div>
-                            </th>
-                            <th className="text-standard col-type">
-                                <div>Type</div>
-                            </th>
-                            <th className="text-standard col-status">
-                                <div>Status</div>
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <For index="idx" each="item" of={items}>
-                            <tr
-                                key={item.remoteid}
-                                className={cn("connections-item", {
-                                    hovered: this.state.hoveredItemId === item.remoteid,
-                                })}
-                                onClick={() => this.handleRead(item.remoteid)} // Moved onClick here
-                            >
-                                <td className="col-name">
-                                    <Status status={this.getStatus(item.status)} text=""></Status>
-                                    {this.getName(item)}&nbsp;{this.getImportSymbol(item)}
-                                </td>
-                                <td className="col-type">
-                                    <div>{item.remotetype}</div>
-                                </td>
-                                <td className="col-status">
-                                    <div>
-                                        <Status status={this.getStatus(item.status)} text={item.status} />
-                                    </div>
-                                </td>
+                    <table
+                        className="connections-table"
+                        cellSpacing="0"
+                        cellPadding="0"
+                        border={0}
+                        ref={this.tableRef}
+                        onMouseLeave={this.handleTableHoverLeave}
+                    >
+                        <colgroup>
+                            <col className="first-col" />
+                            <col className="second-col" />
+                            <col className="third-col" />
+                        </colgroup>
+                        <thead>
+                            <tr>
+                                <th className="text-standard col-name">
+                                    <div>Name</div>
+                                </th>
+                                <th className="text-standard col-type">
+                                    <div>Type</div>
+                                </th>
+                                <th className="text-standard col-status">
+                                    <div>Status</div>
+                                </th>
                             </tr>
-                        </For>
-                    </tbody>
-                </table>
+                        </thead>
+                        <tbody>
+                            <For index="idx" each="item" of={items}>
+                                <tr
+                                    key={item.remoteid}
+                                    className={cn("connections-item", {
+                                        hovered: this.state.hoveredItemId === item.remoteid,
+                                    })}
+                                    onClick={() => this.handleRead(item.remoteid)} // Moved onClick here
+                                >
+                                    <td className="col-name">
+                                        <Status status={this.getStatus(item.status)} text=""></Status>
+                                        {this.getName(item)}&nbsp;{this.getImportSymbol(item)}
+                                    </td>
+                                    <td className="col-type">
+                                        <div>{item.remotetype}</div>
+                                    </td>
+                                    <td className="col-status">
+                                        <div>
+                                            <Status status={this.getStatus(item.status)} text={item.status} />
+                                        </div>
+                                    </td>
+                                </tr>
+                            </For>
+                        </tbody>
+                    </table>
+                </OverlayScrollbarsComponent>
                 <footer>
                     <Button
                         className="secondary"

src/models/bookmarks.ts

@@ -81,7 +81,7 @@ class BookmarksModel {
         mobx.action(() => {
             this.reset();
             this.globalModel.showSessionView();
-            this.globalModel.inputModel.setCurLine(bm.cmdstr);
+            this.globalModel.inputModel.curLine = bm.cmdstr;
             setTimeout(() => this.globalModel.inputModel.giveFocus(), 50);
         })();
     }