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>
+                <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,6 +150,11 @@ class ConnectionsView extends React.Component<{ model: RemotesModel }, { hovered
                 <If condition={!isHidden}>
                     <ConnectionsKeybindings></ConnectionsKeybindings>
                 </If>
+                <OverlayScrollbarsComponent
+                    className="connections-table-container"
+                    options={{ scrollbars: { autoHide: "leave" } }}
+                    defer={true}
+                >
                     <table
                         className="connections-table"
                         cellSpacing="0"
@@ -200,6 +206,7 @@ class ConnectionsView extends React.Component<{ model: RemotesModel }, { hovered
                             </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);
         })();
     }