fix broken bookmakrs view

* center imageview images

* fix terminal selection colors #442

* add firacode font

BUILD.md

@@ -53,12 +53,6 @@ Install modules (we use yarn):
 yarn
 ```
 
-Electron also requires specific builds of node_modules to work (because Electron embeds a specific node.js version that might not match your development node.js version). We use a special electron command to cross-compile those modules:
-
-```
-scripthaus run electron-rebuild
-```
-
 ## Running WebPack
 
 We use webpack to build both the React and Electron App Wrapper code. They are both run together using:

README.md

@@ -20,7 +20,7 @@ Wave isn't just another terminal emulator; it's a rethink on how terminals are b
 -   CodeEdit, to edit local and remote files with a VSCode-like inline editor
 -   AI Integration with ChatGPT (or ChatGPT compatible APIs) to help write commands and get answers inline
 
-![WaveTerm Screenshot](./assets/wave-screenshot.jpeg)
+![WaveTerm Screenshot](./assets/wave-screenshot.png)
 
 ## Installation
 

acknowledgements/README.md

@@ -11,9 +11,9 @@ The license disclaimers for the backend are generated using the [go-licenses](ht
 
 The license disclaimers for the frontend are generated using the [`yarn licenses` tool](https://classic.yarnpkg.com/lang/en/docs/cli/licenses/). This outputs to the file [`frontend.md`](./disclaimers/frontend.md).
 
-These three disclaimer files linked above will be periodically regenerated to reflect new dependencies.
+These disclaimer files linked above will be periodically regenerated to reflect new dependencies.
 
-The [`scripthaus.md` file](../scripthaus.md) contains scripts to genrate the disclaimers and package them. To manually generate the disclaimers, run the following from the repository root directory:
+The [`scripthaus.md` file](../scripthaus.md) contains scripts to generate the disclaimers and package them. To manually generate the disclaimers, run the following from the repository root directory:
 
 ```bash
 scripthaus run generate-license-disclaimers

assets/default-keybindings.json

@@ -39,6 +39,14 @@
       "command": "app:openTabSearchModal",
       "keys": ["Cmd:p"]
     },
+    {
+      "command": "app:openConnectionsView", 
+      "keys": []
+    },
+    {
+      "command": "app:openSettingsView", 
+      "keys": []
+    },
     {
       "command": "app:newTab",
       "keys": ["Cmd:t"]

public/themes/default.css

@@ -60,6 +60,7 @@
     --app-panel-bg-color-dev: rgb(21, 23, 48);
     --app-icon-color: rgb(139, 145, 138);
     --app-icon-hover-color: #fff;
+    --app-selected-mask-color: rgba(255, 255, 255, 0.06);
 
     /* icon colors */
 
@@ -219,6 +220,4 @@
     --modal-header-bottom-border-color: rgba(241, 246, 243, 0.15);
 
     --logo-button-hover-bg-color: #1e1e1e;
-
-    --xterm-viewport-border-color: rgba(241, 246, 243, 0.15);
 }

public/themes/light.css

@@ -17,6 +17,7 @@
     --app-panel-bg-color-dev: #e0e0e0;
     --app-icon-color: rgb(80, 80, 80);
     --app-icon-hover-color: rgb(100, 100, 100);
+    --app-selected-mask-color: rgba(0, 0, 0, 0.06);
 
     --input-bg-color: #eeeeee;
 
@@ -50,6 +51,8 @@
     --form-element-disabled-text-color: #b7b7b7;
     --form-element-placeholder-color: #b7b7b7;
 
+    --markdown-bg-color: rgb(0, 0, 0, 0.1);
+
     /* modal colors */
     --modal-header-bottom-border-color: rgba(0, 0, 0, 0.3);
 
@@ -71,6 +74,4 @@
     --toggle-thumb-color: var(--app-bg-color);
 
     --logo-button-hover-bg-color: #f0f0f0;
-
-    --xterm-viewport-border-color: rgba(0, 0, 0, 0.3);
 }

public/themes/term-default.css

@@ -3,7 +3,7 @@
 
 :root {
     /* 
-     * term colors (16 + 2) form the base terminal theme 
+     * term colors (16 + 6) form the base terminal theme 
      * for consistency these colors should be used by plugins/applications
      */
     --term-black: #000000;
@@ -27,4 +27,6 @@
     --term-cmdtext: #ffffff;
     --term-foreground: #d3d7cf;
     --term-background: #000000;
+    --term-selection-background: #ffffff90;
+    --term-cursor-accent: #000000;
 }

public/themes/term-light.css

@@ -6,4 +6,6 @@
     --term-foreground: #000000;
     --term-background: #fefefe;
     --term-cmdtext: #000000;
+    --term-selection-background: #00000040;
+    --term-cursor-accent: #000000;
 }

src/app/bookmarks/bookmarks.tsx

@@ -193,7 +193,7 @@ class BookmarksView extends React.Component<{}, {}> {
         let bookmarks = GlobalModel.bookmarksModel.bookmarks;
         let bookmark: BookmarkType = null;
         return (
-            <MainView viewName="bookmarks" title="Bookmarks" onClose={this.handleClose}>
+            <MainView className="bookmarks-view" title="Bookmarks" onClose={this.handleClose}>
                 <div className="bookmarks-list">
                     <For index="idx" each="bookmark" of={bookmarks}>
                         <Bookmark key={bookmark.bookmarkid} bookmark={bookmark} />

src/app/clientsettings/clientsettings.tsx

@@ -87,6 +87,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         const availableFontFamilies: DropdownItem[] = [];
         availableFontFamilies.push({ label: "JetBrains Mono", value: "JetBrains Mono" });
         availableFontFamilies.push({ label: "Hack", value: "Hack" });
+        availableFontFamilies.push({ label: "Fira Code", value: "Fira Code" });
         return availableFontFamilies;
     }
 

src/app/common/elements/markdown.less

@@ -8,19 +8,6 @@
         margin-bottom: 10px;
     }
 
-    code {
-        background-color: var(--markdown-bg-color);
-        color: var(--app-text-color);
-        font-family: var(--termfontfamily);
-        border-radius: 4px;
-    }
-
-    code.inline {
-        padding-top: 0;
-        padding-bottom: 0;
-        font-family: var(--termfontfamily);
-    }
-
     .title {
         color: var(--app-text-color);
         margin-top: 16px;
@@ -62,14 +49,29 @@
     pre {
         background-color: var(--markdown-bg-color);
         margin: 4px 10px 4px 10px;
-        padding: 6px 6px 6px 10px;
+        padding: 0.7em;
         border-radius: 4px;
+
+        code {
+            background-color: transparent;
+            padding: 0;
+            line-height: normal;
+        }
     }
 
     pre.selected {
         outline: 2px solid var(--markdown-outline-color);
     }
 
+    code {
+        color: var(--app-text-color);
+        font-family: var(--termfontfamily);
+        border-radius: 4px;
+        background-color: var(--markdown-bg-color);
+        padding: 0.15em 0.5em;
+        line-height: 1.5;
+    }
+
     .title {
         font-weight: semibold;
         padding-top: 6px;

src/app/common/elements/markdown.tsx

@@ -24,7 +24,7 @@ function HeaderRenderer(props: any, hnum: number): any {
 }
 
 function CodeRenderer(props: any): any {
-    return <code className={cn({ inline: props.inline })}>{props.children}</code>;
+    return <code>{props.children}</code>;
 }
 
 @mobxReact.observer

src/app/common/modals/disconnected.tsx

@@ -90,7 +90,7 @@ class DisconnectedModal extends React.Component<{}, {}> {
                         onClick={this.restartServer}
                         leftIcon={<i className="fa-sharp fa-solid fa-triangle-exclamation"></i>}
                     >
-                        Restart Server
+                        Restart Wave Backend
                     </Button>
                 </div>
             </Modal>

src/app/common/modals/tabswitcher.less

@@ -74,7 +74,7 @@
                     .focused-option {
                         border: 1px solid rgba(241, 246, 243, 0.15);
                         border-radius: 4px;
-                        background: rgba(255, 255, 255, 0.06);
+                        background: var(--app-selected-mask-color);
                     }
                 }
             }