From e47c31e414789ce6e2f81d41ffe4b814958bb2cf Mon Sep 17 00:00:00 2001
From: sawka <mike.sawka@gmail.com>
Date: Mon, 20 Feb 2023 18:01:47 -0800
Subject: [PATCH] updates for bookmarked/pinned

---
 src/main.tsx | 52 +++++++++++++++++++++++++++++++++++++++++++++-------
 src/model.ts |  8 ++++++++
 src/sh2.less | 31 +++++++++++++++++++++++++------
 src/types.ts |  2 ++
 4 files changed, 80 insertions(+), 13 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index 77ed0f94..9922f0c8 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -655,6 +655,23 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
         }
     }
 
+    @boundMethod
+    clickPin() {
+        let {line} = this.props;
+        if (!line.pinned) {
+            GlobalCommandRunner.linePin(line.lineid, true);
+        }
+        else {
+            GlobalCommandRunner.linePin(line.lineid, false);
+        }
+    }
+
+    @boundMethod
+    clickBookmark() {
+        let {line} = this.props;
+        GlobalCommandRunner.lineBookmark(line.lineid);
+    }
+
     @boundMethod
     handleResizeButton() {
         console.log("resize button");
@@ -739,12 +756,15 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
                         </div>
                     </div>
                     <div key="spacer" className="flex-spacer"/>
-                    <div key="star" className={cn("line-star", {"active": line.star > 0})} onClick={this.clickStar}>
-                        <If condition={!line.star || line.star == 0}>
-                            <i className="fa fa-star-o"/>
+                    <div key="pin" title="Pin" className={cn("line-icon", {"active": line.pinned})} onClick={this.clickPin}>
+                        <i className="fa fa-thumb-tack"/>
+                    </div>
+                    <div key="bookmark" title="Bookmark" className={cn("line-icon", "line-bookmark", {"active": line.bookmarked})} onClick={this.clickBookmark}>
+                        <If condition={!line.bookmarked}>
+                            <i className="fa fa-bookmark-o"/>
                         </If>
-                        <If condition={line.star > 0}>
-                            <i className="fa fa-star"/>
+                        <If condition={line.bookmarked}>
+                            <i className="fa fa-bookmark"/>
                         </If>
                     </div>
                 </div>
@@ -2817,6 +2837,10 @@ class MainSideBar extends React.Component<{}, {}> {
         GlobalCommandRunner.createNewSession();
     }
 
+    handleNewSharedSession() {
+        console.log("create shared session");
+    }
+
     clickRemotes() {
         GlobalCommandRunner.showAllRemotes();
     }
@@ -2850,6 +2874,11 @@ class MainSideBar extends React.Component<{}, {}> {
         })();
     }
 
+    @boundMethod
+    handleBookmarksClick() : void {
+        console.log("click bookmarks");
+    }
+
     render() {
         let model = GlobalModel;
         let activeSessionId = model.activeSessionId.get();
@@ -2911,15 +2940,24 @@ class MainSideBar extends React.Component<{}, {}> {
                             <li className="new-session"><a onClick={() => this.handleNewSession()}><i className="fa fa-plus"/> New Session</a></li>
                         </If>
                     </ul>
+                    <p className="menu-label">
+                        Shared Sessions
+                    </p>
+                    <ul className="menu-list">
+                        <li className="new-session"><a onClick={() => this.handleNewSharedSession()}><i className="fa fa-plus"/> New Session</a></li>
+                    </ul>
                     <ul className="menu-list" style={{marginTop: 20, display: "none"}}>
                         <li className="menu-history"><a onClick={this.handleHistoryClick}><i className="fa fa-clock-o"/> HISTORY</a></li>
                     </ul>
+                    <ul className="menu-list" style={{marginTop: 20}}>
+                        <li className="menu-bookmarks"><a onClick={this.handleBookmarksClick}><i className="fa fa-bookmark"/> BOOKMARKS</a></li>
+                    </ul>
                     <div className="spacer"></div>
                     <If condition={GlobalModel.debugSW.get() && sw != null}>
                         <div>
                             focus={sw.focusType.get()}<br/>
-            sline={sw.selectedLine.get()}<br/>
-            termfocus={sw.termLineNumFocus.get()}<br/>
+                            sline={sw.selectedLine.get()}<br/>
+                            termfocus={sw.termLineNumFocus.get()}<br/>
                         </div>
                     </If>
                     <p className="menu-label">
diff --git a/src/model.ts b/src/model.ts
index d3c3eeed..10f7fa4f 100644
--- a/src/model.ts
+++ b/src/model.ts
@@ -2417,6 +2417,14 @@ class CommandRunner {
     lineStar(lineId : string, starVal : number) {
         GlobalModel.submitCommand("line", "star", [lineId, String(starVal)], {"nohist": "1"}, true);
     }
+
+    lineBookmark(lineId : string) {
+        GlobalModel.submitCommand("line", "bookmark", [lineId], {"nohist": "1"}, true);
+    }
+
+    linePin(lineId : string, val : boolean) {
+        GlobalModel.submitCommand("line", "pin", [lineId, (val ? "1" : "0")], {"nohist": "1"}, true);
+    }
 };
 
 function cmdPacketString(pk : FeCmdPacketType) : string {
diff --git a/src/sh2.less b/src/sh2.less
index 9fbe93d5..181891e9 100644
--- a/src/sh2.less
+++ b/src/sh2.less
@@ -282,6 +282,10 @@ html, body, #main {
         li.menu-history {
             margin-left: -10px;
         }
+
+        li.menu-bookmarks {
+            margin-left: -10px;
+        }
     }
 
     .menu-list.remotes-menu-list {
@@ -458,19 +462,34 @@ html, body, #main {
         margin-left: 2px;
     }
 
-    .line-star {
+    .line-icon {
         display: none;
         cursor: pointer;
         padding: 3px;
         font-size: 1.5rem;
     }
 
-    .line-star.active {
-        display: block;
-        color: @term-bright-yellow;
+    .line-icon.line-bookmark.active {
+        cursor: auto;
     }
 
-    &:hover .line-star {
+    .line-icon + .line-icon {
+        margin-left: 5px;
+    }
+
+    .line-icon.active {
+        display: block;
+
+        i.fa-star, i.fa-thumb-tack {
+            color: @term-bright-yellow;
+        }
+
+        i.fa-bookmark {
+            color: @term-bright-blue;
+        }
+    }
+
+    &:hover .line-icon {
         display: block;
     }
 
@@ -632,7 +651,7 @@ html, body, #main {
             top: 4px;
         }
 
-        .line-star {
+        .line-icon {
             padding-top: 0;
             padding-bottom: 0;
             font-size: 20px;
diff --git a/src/types.ts b/src/types.ts
index 817063e4..b10a578a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -31,6 +31,8 @@ type LineType = {
     contentheight? : number,
     star? : number,
     archived? : boolean,
+    bookmarked? : boolean,
+    pinned? : boolean,
     ephemeral? : boolean,
     remove? : boolean,
 };