From 17990afd5d5ae55fe44a4703294c510dd5886a39 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Tue, 27 Feb 2024 22:39:20 -0800
Subject: [PATCH] Add the logo back to the revamped sidebar, fix regressions
 from last PR (#353)

* Fix logo not being visible in auxiliary views when sidebar is collapsed

* Refactor auxiliary views into MainView component

* fix contents formatting

* Need a better-centered version of the logo for the sidebar

* Add logo back to the sidebar

* revert root.less change

* Fix regressions from last pr

* zero out subtractor if sidebar is collapsed

* remove unnecessary var
---
 src/app/bookmarks/bookmarks.tsx           |   7 +-
 src/app/clientsettings/clientsettings.tsx |  11 +-
 src/app/common/elements/mainview.tsx      |  10 +-
 src/app/connections/connections.tsx       |   7 +-
 src/app/history/history.tsx               |   7 +-
 src/app/sidebar/sidebar.less              | 116 +++-------------------
 src/app/sidebar/sidebar.tsx               |  15 ++-
 7 files changed, 54 insertions(+), 119 deletions(-)

diff --git a/src/app/bookmarks/bookmarks.tsx b/src/app/bookmarks/bookmarks.tsx
index 31177134..e3c21d2c 100644
--- a/src/app/bookmarks/bookmarks.tsx
+++ b/src/app/bookmarks/bookmarks.tsx
@@ -180,6 +180,11 @@ class Bookmark extends React.Component<BookmarkProps, {}> {
 
 @mobxReact.observer
 class BookmarksView extends React.Component<{}, {}> {
+    @boundMethod
+    handleClose() {
+        GlobalModel.bookmarksModel.closeView();
+    }
+
     render() {
         const isHidden = GlobalModel.activeMainView.get() != "bookmarks";
         if (isHidden) {
@@ -188,7 +193,7 @@ class BookmarksView extends React.Component<{}, {}> {
         let bookmarks = GlobalModel.bookmarksModel.bookmarks;
         let bookmark: BookmarkType = null;
         return (
-            <MainView viewName="bookmarks" title="Bookmarks" onClose={GlobalModel.bookmarksModel.closeView}>
+            <MainView viewName="bookmarks" title="Bookmarks" onClose={this.handleClose}>
                 <div className="bookmarks-list">
                     <For index="idx" each="bookmark" of={bookmarks}>
                         <Bookmark key={bookmark.bookmarkid} bookmark={bookmark} />
diff --git a/src/app/clientsettings/clientsettings.tsx b/src/app/clientsettings/clientsettings.tsx
index 3403a960..5763e529 100644
--- a/src/app/clientsettings/clientsettings.tsx
+++ b/src/app/clientsettings/clientsettings.tsx
@@ -129,6 +129,11 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         return clientData?.clientopts?.globalshortcut ?? "";
     }
 
+    @boundMethod
+    handleClose() {
+        GlobalModel.clientSettingsViewModel.closeView();
+    }
+
     render() {
         const isHidden = GlobalModel.activeMainView.get() != "clientsettings";
         if (isHidden) {
@@ -145,11 +150,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         const curFontFamily = GlobalModel.getTermFontFamily();
 
         return (
-            <MainView
-                viewName="clientsettings"
-                title="Client Settings"
-                onClose={GlobalModel.clientSettingsViewModel.closeView}
-            >
+            <MainView viewName="clientsettings" title="Client Settings" onClose={this.handleClose}>
                 <div className="content">
                     <div className="settings-field">
                         <div className="settings-label">Term Font Size</div>
diff --git a/src/app/common/elements/mainview.tsx b/src/app/common/elements/mainview.tsx
index de15d3c5..75c13f03 100644
--- a/src/app/common/elements/mainview.tsx
+++ b/src/app/common/elements/mainview.tsx
@@ -16,11 +16,13 @@ class MainView extends React.Component<{
     children: React.ReactNode;
 }> {
     render() {
-        // TODO: This is a workaround for History view not honoring the sidebar width. This is rooted in the table width for the history view, which uses `calc(100%-20px)`. To properly fix this, History view needs a full overhaul.
-        const width = window.innerWidth - 6 - GlobalModel.mainSidebarModel.getWidth();
-
+        const sidebarModel = GlobalModel.mainSidebarModel;
+        const maxWidthSubtractor = sidebarModel.getCollapsed() ? 0 : sidebarModel.getWidth();
         return (
-            <div className={cn("mainview", `${this.props.viewName}-view`)} style={{ maxWidth: width }}>
+            <div
+                className={cn("mainview", `${this.props.viewName}-view`)}
+                style={{ maxWidth: `calc(100vw - ${maxWidthSubtractor}px)` }}
+            >
                 <div className="header-container bottom-border">
                     <header className="header">
                         <div className="title text-primary">{this.props.title}</div>
diff --git a/src/app/connections/connections.tsx b/src/app/connections/connections.tsx
index fa1dd532..f5c715b8 100644
--- a/src/app/connections/connections.tsx
+++ b/src/app/connections/connections.tsx
@@ -98,6 +98,11 @@ class ConnectionsView extends React.Component<{ model: RemotesModel }, { hovered
         }
     }
 
+    @boundMethod
+    handleClose() {
+        GlobalModel.connectionViewModel.closeView();
+    }
+
     componentDidMount() {
         if (this.tableRef.current != null) {
             this.tableRszObs = new ResizeObserver(this.handleTableResize.bind(this));
@@ -126,7 +131,7 @@ class ConnectionsView extends React.Component<{ model: RemotesModel }, { hovered
         let item: RemoteType = null;
 
         return (
-            <MainView viewName="connections" title="Connections" onClose={GlobalModel.connectionViewModel.closeView}>
+            <MainView viewName="connections" title="Connections" onClose={this.handleClose}>
                 <table
                     className="connections-table"
                     cellSpacing="0"
diff --git a/src/app/history/history.tsx b/src/app/history/history.tsx
index 232c4a5a..257f9443 100644
--- a/src/app/history/history.tsx
+++ b/src/app/history/history.tsx
@@ -386,6 +386,11 @@ class HistoryView extends React.Component<{}, {}> {
         })();
     }
 
+    @boundMethod
+    handleClose() {
+        GlobalModel.historyViewModel.closeView();
+    }
+
     render() {
         let isHidden = GlobalModel.activeMainView.get() != "history";
         if (isHidden) {
@@ -408,7 +413,7 @@ class HistoryView extends React.Component<{}, {}> {
         let remoteId: string = null;
 
         return (
-            <MainView viewName="history" title="History" onClose={GlobalModel.historyViewModel.closeView}>
+            <MainView viewName="history" title="History" onClose={this.handleClose}>
                 <div key="search" className="history-search">
                     <div className="main-search field">
                         <TextField
diff --git a/src/app/sidebar/sidebar.less b/src/app/sidebar/sidebar.less
index feaf29ba..0b799d9d 100644
--- a/src/app/sidebar/sidebar.less
+++ b/src/app/sidebar/sidebar.less
@@ -5,7 +5,6 @@
     display: flex;
     flex-direction: column;
     position: relative;
-    font-size: 12.5px;
     line-height: 20px;
     backdrop-filter: blur(4px);
     z-index: 20;
@@ -19,123 +18,38 @@
     .title-bar-drag {
         -webkit-app-region: drag;
         height: calc(var(--screentabs-height) + 1px);
-        top: 0;
-        left: 0;
-        width: 100%;
         border-bottom: 1px solid var(--app-border-color);
         position: relative;
+        display: flex;
+
+        .logo {
+            line-height: 15px;
+            margin: auto auto;
+            svg {
+                width: 88px;
+            }
+        }
 
         .close-button {
             -webkit-app-region: no-drag;
             position: absolute;
             right: 0;
-            top: 0;
             height: 100%;
-            padding: 5px;
+            padding: 10px;
             display: flex;
             align-items: center;
-            justify-content: center;
             cursor: pointer;
         }
     }
 
     &.collapsed {
         display: none;
-
-        width: 6em;
-        min-width: 6em;
-        .arrow-container,
-        .collapse-button {
-            transform: rotate(180deg);
-            margin-top: 20px;
-        }
-
-        .title-bar-drag {
-            .close-button {
-                display: none;
-            }
-        }
-
-        .contents {
-            .top,
-            .workspaces,
-            .middle,
-            .bottom,
-            .separator {
-                pointer-events: none;
-                opacity: 0;
-                visibility: hidden;
-            }
-
-            .logo {
-                display: flex;
-                flex-direction: column;
-                margin-left: 0;
-                justify-content: center;
-                align-items: center;
-
-                .logo-container {
-                    width: 45px;
-                }
-
-                .collapse-button {
-                    margin-right: 0;
-                }
-            }
-        }
-        overflow: hidden;
-    }
-
-    .arrow-container {
-        position: absolute;
-        top: 24px;
-        right: 15px;
-        width: 1.5em;
-        height: 1.5em;
-        border-radius: 50%;
-        transition: transform 0.3s ease-in-out;
-        z-index: 2;
-        svg {
-            width: 1.5em;
-            height: 1.5em;
-        }
     }
 
     .contents {
         margin-top: 16px;
     }
 
-    .logo {
-        margin-left: 14px;
-        display: flex;
-        flex-direction: row;
-
-        .logo-container {
-            flex-shrink: 0;
-            img {
-                width: 40px;
-            }
-        }
-
-        .spacer {
-            flex-grow: 1;
-        }
-        img {
-            width: 100px;
-        }
-
-        .collapse-button {
-            transition: transform 0.3s ease-in-out;
-            margin-right: 14px;
-
-            svg {
-                margin-top: 3px;
-                width: 1.5em;
-                height: 1.5em;
-            }
-        }
-    }
-
     .separator {
         height: 1px;
         margin: 16px 0;
@@ -188,10 +102,12 @@
 
         .front-icon {
             .positional-icon-visible;
+            font-size: 15px;
         }
 
         .end-icons {
             height: 20px;
+            line-height: normal;
         }
 
         .item-contents {
@@ -234,14 +150,6 @@
             }
         }
 
-        .front-icon {
-            font-size: 15px;
-        }
-
-        .end-icons {
-            line-height: normal;
-        }
-
         .fa-discord {
             font-size: 13px;
         }
diff --git a/src/app/sidebar/sidebar.tsx b/src/app/sidebar/sidebar.tsx
index 77dc378c..38b5407b 100644
--- a/src/app/sidebar/sidebar.tsx
+++ b/src/app/sidebar/sidebar.tsx
@@ -10,10 +10,11 @@ import dayjs from "dayjs";
 import { If } from "tsx-control-statements/components";
 import { compareLoose } from "semver";
 
-import { ReactComponent as LeftChevronIcon } from "@/assets/icons/chevron_left.svg";
 import { ReactComponent as AppsIcon } from "@/assets/icons/apps.svg";
 import { ReactComponent as WorkspacesIcon } from "@/assets/icons/workspaces.svg";
 import { ReactComponent as SettingsIcon } from "@/assets/icons/settings.svg";
+import { ReactComponent as WaveLogoWord } from "@/assets/wave-logo_horizontal-coloronblack.svg";
+import { ReactComponent as WaveLogo } from "@/assets/waveterm-logo.svg";
 
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import { GlobalModel, GlobalCommandRunner, Session } from "@/models";
@@ -265,8 +266,8 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
     }
 
     render() {
-        const mainSidebar = GlobalModel.mainSidebarModel;
-        const isCollapsed = mainSidebar.getCollapsed();
+        const sidebarWidth = GlobalModel.mainSidebarModel.getWidth();
+
         return (
             <ResizableSidebar
                 className="main-sidebar"
@@ -277,6 +278,14 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
                 {(toggleCollapse) => (
                     <React.Fragment>
                         <div className="title-bar-drag">
+                            <div className="logo">
+                                <If condition={sidebarWidth > 215}>
+                                    <WaveLogoWord />
+                                </If>
+                                <If condition={sidebarWidth <= 215}>
+                                    <WaveLogo />
+                                </If>
+                            </div>
                             <div className="close-button">
                                 <i className="fa-sharp fa-solid fa-xmark-large" onClick={toggleCollapse} />
                             </div>