From 5b98728fc6ebeb64674de1440d336401ed21507a Mon Sep 17 00:00:00 2001
From: sawka <mike.sawka@gmail.com>
Date: Wed, 28 Dec 2022 17:46:15 -0800
Subject: [PATCH] move logo to sidebar, main-content fills vertical space

---
 src/emain.ts |  5 ++++-
 src/main.tsx | 14 +++++++-------
 src/model.ts |  6 ++++++
 src/sh2.less | 14 ++++++++++----
 4 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/emain.ts b/src/emain.ts
index 5def6cb3..c98613c7 100644
--- a/src/emain.ts
+++ b/src/emain.ts
@@ -52,7 +52,7 @@ if (isDev) {
 }
 let app = electron.app;
 app.setName((isDev ? "Prompt (Dev)" : "Prompt"));
-const DevLocalServerPath = "/Users/mike/prompt/local-server";
+const DevLocalServerPath = "/Users/mike/prompt-dev/local-server";
 let localServerProc = null;
 let localServerShouldRestart = false;
 
@@ -76,6 +76,9 @@ function getAppBasePath() {
 }
 
 function getBaseHostPort() {
+    if (isDev) {
+        return "http://localhost:8090";
+    }
     return "http://localhost:8080";
 }
 
diff --git a/src/main.tsx b/src/main.tsx
index 11c86996..f358ea68 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2484,12 +2484,16 @@ class MainSideBar extends React.Component<{}, {}> {
                 sessionList.push(session);
             }
         }
+        let isCollapsed = this.collapsed.get();
         return (
-            <div className={cn("main-sidebar", {"collapsed": this.collapsed.get()})}>
+            <div className={cn("main-sidebar", {"collapsed": isCollapsed})}>
+                <h1 className={cn("title", "prompt-logo-small", {"collapsed": isCollapsed})}>
+                    {(isCollapsed ? "[p]" : "[prompt]")}
+                </h1>
                 <div className="collapse-container">
                     <div className="arrow-container" onClick={this.toggleCollapsed}>
-                        <If condition={!this.collapsed.get()}><i className="fa fa-arrow-left"/></If>
-                        <If condition={this.collapsed.get()}><i className="fa fa-arrow-right"/></If>
+                        <If condition={!isCollapsed}><i className="fa fa-arrow-left"/></If>
+                        <If condition={isCollapsed}><i className="fa fa-arrow-right"/></If>
                     </div>
                 </div>
                 <div className="menu">
@@ -2660,10 +2664,6 @@ class Main extends React.Component<{}, {}> {
     render() {
         return (
             <div id="main">
-                <h1 className="title prompt-logo-small">
-                    [prompt]
-                    <span className="title-cursor">&#9608;</span>
-                </h1>
                 <div className="main-content">
                     <MainSideBar/>
                     <SessionView/>
diff --git a/src/model.ts b/src/model.ts
index d5acf1e3..61e1985f 100644
--- a/src/model.ts
+++ b/src/model.ts
@@ -1579,10 +1579,16 @@ class Model {
     }
 
     getBaseHostPort() : string {
+        if (this.isDev) {
+            return "http://localhost:8090";
+        }
         return "http://localhost:8080";
     }
 
     getBaseWsHostPort() : string {
+        if (this.isDev) {
+            return "ws://localhost:8091";
+        }
         return "ws://localhost:8081";
     }
 
diff --git a/src/sh2.less b/src/sh2.less
index 0e265465..647e9aad 100644
--- a/src/sh2.less
+++ b/src/sh2.less
@@ -49,7 +49,7 @@ html, body, #main {
         display: flex;
         flex-direction: row;
         background-color: black;
-        height: calc(100% - 45px);
+        height: 100%;
 
         .session-view {
             flex-grow: 1;
@@ -171,7 +171,7 @@ html, body, #main {
 }
 
 .title.prompt-logo-small {
-    padding-left: 10px;
+    padding-left: 5px;
     padding-top: 8px;
     padding-bottom: 8px;
     margin-bottom: 0;
@@ -180,6 +180,12 @@ html, body, #main {
     color: rgb(0, 177, 10);
     position: relative;
     border-bottom: 2px solid #ddd;
+    white-space: nowrap;
+    overflow: hidden;
+
+    &.collapsed {
+        padding-left: 1px;
+    }
 
     .title-cursor {
         position: relative;
@@ -352,7 +358,7 @@ html, body, #main {
     }
 
     &.collapsed {
-        width: 50px;
+        width: 55px;
 
         .collapse-container {
             right: 12px;
@@ -366,7 +372,7 @@ html, body, #main {
     .collapse-container {
         position: absolute;
         right: 3px;
-        top: -4px;
+        top: 42px;
 
         .arrow-container {
             color: #777;