Pe 222 apps sidebar (#51)

* can open / close Apps view * gotten app list to load dynamically * updated icons bizzare that they all have the same bg color * can select an app form left bar * could not get ImageViewer to work :( * getting rid of screenshots * readme.md works * fixed the color problems for icons
2026-08-05 13:57:07 -07:00 · 2023-10-28 13:18:31 -07:00
parent e0cd8516b8
commit c9c2b91a77
27 changed files with 730 additions and 150 deletions
@@ -1,6 +1,6 @@
 {
-    "name": "Prompt",
-    "version": "0.3.1",
+    "name": "waveterm",
+    "version": "0.5.0",
    "lockfileVersion": 1,
    "requires": true,
    "dependencies": {
@@ -2289,6 +2289,15 @@
                    "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
                    "dev": true
                },
+                "color-convert": {
+                    "version": "2.0.1",
+                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+                    "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+                    "dev": true,
+                    "requires": {
+                        "color-name": "~1.1.4"
+                    }
+                },
                "emoji-regex": {
                    "version": "9.2.2",
                    "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -2306,6 +2315,40 @@
                        "strip-ansi": "^7.0.1"
                    }
                },
+                "string-width-cjs": {
+                    "version": "npm:string-width@4.2.3",
+                    "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+                    "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+                    "dev": true,
+                    "requires": {
+                        "emoji-regex": "^8.0.0",
+                        "is-fullwidth-code-point": "^3.0.0",
+                        "strip-ansi": "^6.0.1"
+                    },
+                    "dependencies": {
+                        "ansi-regex": {
+                            "version": "5.0.1",
+                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+                            "dev": true
+                        },
+                        "emoji-regex": {
+                            "version": "8.0.0",
+                            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+                            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+                            "dev": true
+                        },
+                        "strip-ansi": {
+                            "version": "6.0.1",
+                            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+                            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+                            "dev": true,
+                            "requires": {
+                                "ansi-regex": "^5.0.1"
+                            }
+                        }
+                    }
+                },
                "strip-ansi": {
                    "version": "7.1.0",
                    "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
@@ -2315,6 +2358,23 @@
                        "ansi-regex": "^6.0.1"
                    }
                },
+                "strip-ansi-cjs": {
+                    "version": "npm:strip-ansi@6.0.1",
+                    "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+                    "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+                    "dev": true,
+                    "requires": {
+                        "ansi-regex": "^5.0.1"
+                    },
+                    "dependencies": {
+                        "ansi-regex": {
+                            "version": "5.0.1",
+                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+                            "dev": true
+                        }
+                    }
+                },
                "wrap-ansi": {
                    "version": "8.1.0",
                    "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
@@ -2325,6 +2385,60 @@
                        "string-width": "^5.0.1",
                        "strip-ansi": "^7.0.1"
                    }
+                },
+                "wrap-ansi-cjs": {
+                    "version": "npm:wrap-ansi@7.0.0",
+                    "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+                    "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+                    "dev": true,
+                    "requires": {
+                        "ansi-styles": "^4.0.0",
+                        "string-width": "^4.1.0",
+                        "strip-ansi": "^6.0.0"
+                    },
+                    "dependencies": {
+                        "ansi-regex": {
+                            "version": "5.0.1",
+                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+                            "dev": true
+                        },
+                        "ansi-styles": {
+                            "version": "4.3.0",
+                            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+                            "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+                            "dev": true,
+                            "requires": {
+                                "color-convert": "^2.0.1"
+                            }
+                        },
+                        "emoji-regex": {
+                            "version": "8.0.0",
+                            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+                            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+                            "dev": true
+                        },
+                        "string-width": {
+                            "version": "4.2.3",
+                            "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+                            "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+                            "dev": true,
+                            "requires": {
+                                "emoji-regex": "^8.0.0",
+                                "is-fullwidth-code-point": "^3.0.0",
+                                "strip-ansi": "^6.0.1"
+                            }
+                        },
+                        "strip-ansi": {
+                            "version": "6.0.1",
+                            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+                            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+                            "dev": true,
+                            "requires": {
+                                "ansi-regex": "^5.0.1"
+                            }
+                        }
+                    }
                }
            }
        },
@@ -4846,25 +4960,6 @@
            "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
            "dev": true
        },
-        "electron": {
-            "version": "25.4.0",
-            "resolved": "https://registry.npmjs.org/electron/-/electron-25.4.0.tgz",
-            "integrity": "sha512-VLTRxDhL4UvQbqM7pTNENnJo62cdAPZT92N+B7BZQ5Xfok1wuVPEewIjBot4K7U3EpLUuHn1veeLzho3ihiP+Q==",
-            "dev": true,
-            "requires": {
-                "@electron/get": "^2.0.0",
-                "@types/node": "^18.11.18",
-                "extract-zip": "^2.0.1"
-            },
-            "dependencies": {
-                "@types/node": {
-                    "version": "18.17.1",
-                    "resolved": "https://registry.npmjs.org/@types/node/-/node-18.17.1.tgz",
-                    "integrity": "sha512-xlR1jahfizdplZYRU59JlUx9uzF1ARa8jbhM11ccpCJya8kvos5jwdm2ZAgxSCwOl0fq21svP18EVwPBXMQudw==",
-                    "dev": true
-                }
-            }
-        },
        "electron-installer-common": {
            "version": "0.10.3",
            "resolved": "https://registry.npmjs.org/electron-installer-common/-/electron-installer-common-0.10.3.tgz",
@@ -8897,6 +8992,53 @@
                }
            }
        },
+        "raw-loader": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+            "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+            "dev": true,
+            "requires": {
+                "loader-utils": "^2.0.0",
+                "schema-utils": "^3.0.0"
+            },
+            "dependencies": {
+                "ajv": {
+                    "version": "6.12.6",
+                    "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+                    "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+                    "dev": true,
+                    "requires": {
+                        "fast-deep-equal": "^3.1.1",
+                        "fast-json-stable-stringify": "^2.0.0",
+                        "json-schema-traverse": "^0.4.1",
+                        "uri-js": "^4.2.2"
+                    }
+                },
+                "ajv-keywords": {
+                    "version": "3.5.2",
+                    "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+                    "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+                    "dev": true
+                },
+                "json-schema-traverse": {
+                    "version": "0.4.1",
+                    "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+                    "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+                    "dev": true
+                },
+                "schema-utils": {
+                    "version": "3.3.0",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+                    "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+                    "dev": true,
+                    "requires": {
+                        "@types/json-schema": "^7.0.8",
+                        "ajv": "^6.12.5",
+                        "ajv-keywords": "^3.5.2"
+                    }
+                }
+            }
+        },
        "rcedit": {
            "version": "3.1.0",
            "resolved": "https://registry.npmjs.org/rcedit/-/rcedit-3.1.0.tgz",
@@ -9897,17 +10039,6 @@
                "strip-ansi": "^6.0.1"
            }
        },
-        "string-width-cjs": {
-            "version": "npm:string-width@4.2.3",
-            "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-            "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-            "dev": true,
-            "requires": {
-                "emoji-regex": "^8.0.0",
-                "is-fullwidth-code-point": "^3.0.0",
-                "strip-ansi": "^6.0.1"
-            }
-        },
        "string_decoder": {
            "version": "1.3.0",
            "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -9925,15 +10056,6 @@
                "ansi-regex": "^5.0.1"
            }
        },
-        "strip-ansi-cjs": {
-            "version": "npm:strip-ansi@6.0.1",
-            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-            "dev": true,
-            "requires": {
-                "ansi-regex": "^5.0.1"
-            }
-        },
        "strip-bom": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -11050,17 +11172,6 @@
                "strip-ansi": "^6.0.0"
            }
        },
-        "wrap-ansi-cjs": {
-            "version": "npm:wrap-ansi@7.0.0",
-            "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-            "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-            "dev": true,
-            "requires": {
-                "ansi-styles": "^4.0.0",
-                "string-width": "^4.1.0",
-                "strip-ansi": "^6.0.0"
-            }
-        },
        "wrappy": {
            "version": "1.0.2",
            "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -72,6 +72,7 @@
        "lodash-webpack-plugin": "^0.11.6",
        "mini-css-extract-plugin": "^2.6.0",
        "prettier": "^2.8.8",
+        "raw-loader": "^4.0.2",
        "react-split-it": "^2.0.0",
        "style-loader": "^3.3.1",
        "typescript": "^4.7.3",
@@ -197,7 +197,8 @@ a.a-block {
        height: 100%;

        .history-view,
-        .bookmarks-view {
+        .bookmarks-view,
+        .plugins-view {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
@@ -11,6 +11,8 @@ import type { ContextMenuOpts } from "../types/types";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import { GlobalModel } from "../model/model";
 import { isBlank } from "../util/util";
+import { WorkspaceView } from "./workspace/workspaceview";
+import { PluginsView } from "./pluginsview/pluginsview";
 import { BookmarksView } from "./bookmarks/bookmarks";
 import { HistoryView } from "./history/history";
 import {
@@ -21,7 +23,6 @@ import {
 } from "./common/modals/settings";
 import { RemotesModal } from "./connections/connections";
 import { TosModal } from "./common/modals/modals";
-import { WorkspaceView } from "../app/workspace/workspaceview";
 import { MainSideBar } from "./sidebar/MainSideBar";
 import { DisconnectedModal, ClientStopModal, AlertModal, WelcomeModal } from "./common/modals/modals";
 import { ErrorBoundary } from "./common/error/errorboundary";
@@ -107,11 +108,13 @@ class App extends React.Component<{}, {}> {
        if (dcWait) {
            setTimeout(() => this.updateDcWait(false), 0);
        }
+        //console.log(`GlobalModel.activeMainView.get() = ${GlobalModel.activeMainView.get()}`); // @mike - if I remove this, I cant see plugins
        return (
            <div id="main" className={"platform-" + platform} onContextMenu={this.handleContextMenu}>
                <div className="main-content">
                    <MainSideBar />
                    <ErrorBoundary>
+                        <PluginsView />
                        <WorkspaceView />
                        <HistoryView />
                        <BookmarksView />
@@ -0,0 +1,137 @@
+@import "../../app/common/themes/themes.less";
+
+.plugins-view {
+    background-color: @background-session;
+
+    .header {
+        margin: 1.5em 1.5em 0.5em;
+
+        .plugins-title {
+            margin-bottom: 0.5em;
+            font-weight: bold;
+            font-size: 1.5em;
+        }
+
+        .close-button {
+            position: absolute;
+            right: 1em;
+            top: 0.8em;
+            cursor: pointer;
+            width: 1.5em;
+            height: 1.5em;
+            border-radius: 50%;
+            svg {
+                width: 1.5em;
+                height: 1.5em;
+                fill: @base-color;
+            }
+        }
+    }
+
+    .body {
+        display: flex;
+        .plugins-list {
+            padding: 1em;
+            border-right: 1px solid @base-border;
+            min-height: calc(100vh - 6em);
+            max-height: calc(100vh - 6em);
+            overflow-y: auto;
+            flex: 0 0 auto;
+            .plugin-summary {
+                display: block;
+                padding: 10px;
+                max-width: 323px;
+                border-radius: 8px;
+                margin-bottom: 1em;
+                border: 1px solid transparent;
+                &.selected {
+                    border-color: @prompt-green;
+                }
+                .plugin-summary-header {
+                    display: flex;
+                    .plugin-summary-icon {
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        height: 100%;
+                        svg {
+                            width: 32px;
+                            height: 32px;
+                            fill: white;
+                        }
+                    }
+                    .plugin-summary-info {
+                        flex: 1;
+                        margin: 0 12px;
+                        .plugin-summary-title {
+                        }
+                        .plugin-summary-vendor {
+                            font-size: 0.8em;
+                        }
+                    }
+                }
+                .plugin-summary-body {
+                    margin-top: 8px;
+                    min-height: 54px;
+                    max-height: 54px;
+                    overflow-y: auto;
+                }
+            }
+        }
+        .plugins-details {
+            flex: 1 !important;
+            padding: 2em;
+            min-height: calc(100vh - 6em);
+            max-height: calc(100vh - 6em);
+            overflow-y: auto;
+            flex: 0 0 auto;
+            .plugin-label {
+                min-width: 100%;
+                margin-bottom: 1em;
+            }
+            .plugin-summary-header {
+                display: flex;
+                .plugin-summary-icon {
+                    svg {
+                        width: 48px;
+                        height: 48px;
+                        fill: white;
+                    }
+                }
+                .plugin-summary-info {
+                    flex: 1;
+                    margin: 0 12px;
+                    .plugin-summary-title {
+                        font-size: 1.1em;
+                        margin-top: 0.3em;
+                    }
+                    .plugin-summary-vendor {
+                        font-size: 0.9em;
+                        margin-top: 0.4em;
+                    }
+                }
+            }
+            .plugin-summary-body {
+                margin-top: 1em;
+            }
+            .plugin-screenshots-container {
+                margin-top: 3em;
+                .plugin-screenshots {
+                    display: flex;
+                    overflow-x: auto;
+                    width: 100%;
+                    white-space: nowrap;
+                    align-items: flex-start;
+                    img {
+                        flex-shrink: 0;
+                        margin-right: 10px;
+                        max-height: 50vh;
+                    }
+                }
+            }
+            .plugin-readme {
+                margin-top: 3em;
+            }
+        }
+    }
+}
@@ -0,0 +1,101 @@
+// Copyright 2023, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
+import * as mobxReact from "mobx-react";
+import * as mobx from "mobx";
+import { boundMethod } from "autobind-decorator";
+import { GlobalModel } from "../../model/model";
+import { PluginModel } from "../../plugins/plugins";
+import { ImageDisplay, Markdown } from "../common/common";
+
+import { ReactComponent as XmarkIcon } from "../assets/icons/line/xmark.svg";
+
+import "./pluginsview.less";
+
+@mobxReact.observer
+class PluginsView extends React.Component<{}, {}> {
+    @boundMethod
+    closeView(): void {
+        GlobalModel.pluginsModel.closeView();
+    }
+
+    render() {
+        if (GlobalModel.activeMainView.get() !== "plugins") {
+            return <></>;
+        }
+        const { pluginsModel } = GlobalModel;
+        console.log(`rendering details for ${pluginsModel.selectedPlugin.get().name}`);
+        const PluginList = () => (
+            <div className="plugins-list">
+                {PluginModel.allPlugins().map((plugin, i) => (
+                    <div
+                        key={i}
+                        className={`plugin-summary hoverEffect ${
+                            plugin.name === pluginsModel.selectedPlugin.get().name ? "selected" : ""
+                        }`}
+                        onClick={() => pluginsModel.setSelectedPlugin(plugin)}
+                    >
+                        <div className="plugin-summary-header">
+                            <div className="plugin-summary-icon">{plugin.getIcon()}</div>
+                            <div className="plugin-summary-info">
+                                <div className="plugin-summary-title">{plugin.title}</div>
+                                <div className="plugin-summary-vendor">{plugin.vendor}</div>
+                            </div>
+                        </div>
+                        <div className="plugin-summary-body">{plugin.summary}</div>
+                    </div>
+                ))}
+            </div>
+        );
+
+        const PluginDetails = () => {
+            const plugin = pluginsModel.selectedPlugin.get();
+            return (
+                <div className="plugins-details">
+                    <div className="plugin-summary-header">
+                        <div className="plugin-summary-icon">{plugin.getIcon()}</div>
+                        <div className="plugin-summary-info">
+                            <div className="plugin-summary-title">{plugin.title}</div>
+                            <div className="plugin-summary-vendor">{plugin.vendor}</div>
+                        </div>
+                    </div>
+                    <div className="plugin-summary-body">{plugin.summary}</div>
+                    {plugin.screenshots && plugin.screenshots.length > 0 && (
+                        <div className="plugin-screenshots-container">
+                            <div className="plugin-label">{"Screenshots"}</div>
+                            <div className="plugin-screenshots">
+                                {plugin.screenshots.map((path, index) => (
+                                    <img key={index} src={path} alt={`Screenshot ${index}`} />
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                    {plugin.readme && (
+                        <div className="plugin-readme">
+                            <div className="plugin-label">{"Readme"}</div>
+                            <Markdown text={plugin.readme} />
+                        </div>
+                    )}
+                </div>
+            );
+        };
+
+        return (
+            <div className="plugins-view">
+                <div className="header">
+                    <div className="plugins-title">Apps</div>
+                    <div className="close-button hoverEffect" title="Close (Escape)" onClick={this.closeView}>
+                        <XmarkIcon className={"icon"} />
+                    </div>
+                </div>
+                <div className="body">
+                    <PluginList />
+                    <PluginDetails />
+                </div>
+            </div>
+        );
+    }
+}
+
+export { PluginsView };
@@ -76,12 +76,19 @@ class MainSideBar extends React.Component<{}, {}> {
        GlobalCommandRunner.showRemote(remote.remoteid);
    }

+    @boundMethod
+    handlePluginsClick(): void {
+        if (GlobalModel.activeMainView.get() == "plugins") {
+            GlobalModel.showSessionView();
+            return;
+        }
+        GlobalModel.pluginsModel.showPluginsView();
+    }
+
    @boundMethod
    handleHistoryClick(): void {
        if (GlobalModel.activeMainView.get() == "history") {
-            mobx.action(() => {
-                GlobalModel.activeMainView.set("session");
-            })();
+            GlobalModel.showSessionView();
            return;
        }
        GlobalModel.historyViewModel.reSearch();
@@ -150,7 +157,6 @@ class MainSideBar extends React.Component<{}, {}> {
        }
        return sessionList.map((session, index) => {
            const isActive = GlobalModel.activeMainView.get() == "session" && activeSessionId == session.sessionId;
-            /** @TODO: Handle archived sessions and talk to Mike about session settings */
            return (
                <div
                    key={index}
@@ -200,11 +206,11 @@ class MainSideBar extends React.Component<{}, {}> {
                </div>
                <div className="contents">
                    <div className="top">
-                        {/*<div className="item disabled">
+                        <div className="item hoverEffect" onClick={this.handlePluginsClick}>
                            <AppsIcon className="icon" />
                            Apps
                            <span className="hotkey">&#x2318;A</span>
-                            </div>*/}
+                        </div>
                        <div className="item hoverEffect" onClick={this.handleHistoryClick}>
                            <HistoryIcon className="icon" />
                            History
@@ -15,6 +15,7 @@ import {
    isModKeyPress,
 } from "../util/util";
 import { TermWrap } from "../plugins/terminal/term";
+import { PluginModel } from "../plugins/plugins";
 import type {
    SessionDataType,
    LineType,
@@ -2423,7 +2424,36 @@ class BookmarksModel {
            return;
        }
    }
-    return;
+}
+
+class PluginsModel {
+    selectedPlugin: OV<RendererPluginType> = mobx.observable.box(null, { name: "selectedPlugin" });
+
+    showPluginsView(): void {
+        mobx.action(() => {
+            this.reset();
+            GlobalModel.activeMainView.set("plugins");
+            const allPlugins = PluginModel.allPlugins();
+            this.selectedPlugin.set(allPlugins.length > 0 ? allPlugins[0] : null);
+        })();
+    }
+
+    setSelectedPlugin(plugin: RendererPluginType): void {
+        mobx.action(() => {
+            this.selectedPlugin.set(plugin);
+        })();
+    }
+
+    reset(): void {
+        mobx.action(() => {
+            this.selectedPlugin.set(null);
+        })();
+    }
+
+    closeView(): void {
+        GlobalModel.showSessionView();
+        setTimeout(() => GlobalModel.inputModel.giveFocus(), 50);
+    }
 }

 class RemotesModalModel {
@@ -2658,7 +2688,7 @@ class Model {
    authKey: string;
    isDev: boolean;
    platform: string;
-    activeMainView: OV<"session" | "history" | "bookmarks" | "webshare"> = mobx.observable.box("session", {
+    activeMainView: OV<"plugins" | "session" | "history" | "bookmarks" | "webshare"> = mobx.observable.box("session", {
        name: "activeMainView",
    });
    termFontSize: CV<number>;
@@ -2684,6 +2714,7 @@ class Model {
    remotesModalModel: RemotesModalModel;

    inputModel: InputModel;
+    pluginsModel: PluginsModel;
    bookmarksModel: BookmarksModel;
    historyViewModel: HistoryViewModel;
    clientData: OV<ClientDataType> = mobx.observable.box(null, {
@@ -2702,6 +2733,7 @@ class Model {
        );
        this.ws.reconnect();
        this.inputModel = new InputModel();
+        this.pluginsModel = new PluginsModel();
        this.bookmarksModel = new BookmarksModel();
        this.historyViewModel = new HistoryViewModel();
        this.remotesModalModel = new RemotesModalModel();
@@ -3203,7 +3235,9 @@ class Model {
            this.updateRemotes(update.remotes);
        }
        if ("mainview" in update) {
-            if (update.mainview == "bookmarks") {
+            if (update.mainview == "plugins") {
+                this.pluginsModel.showPluginsView();
+            } else if (update.mainview == "bookmarks") {
                this.bookmarksModel.showBookmarksView(update.bookmarks, update.selectedbookmark);
            } else if (update.mainview == "session") {
                this.activeMainView.set("session");
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" rx="8" fill="url(#paint0_linear_629_37176)"/>
+<path d="M12.7568 13.803C13.0621 13.5231 13.0828 13.0487 12.8028 12.7434C12.5229 12.438 12.0485 12.4174 11.7432 12.6973L8.74319 15.4475C8.58822 15.5896 8.49999 15.7901 8.5 16.0004C8.50001 16.2106 8.58825 16.4112 8.74322 16.5532L11.7432 19.3031C12.0486 19.5829 12.523 19.5623 12.8029 19.2569C13.0828 18.9516 13.0621 18.4772 12.7568 18.1973L10.3599 16.0003L12.7568 13.803Z" fill="white"/>
+<path d="M17.7301 11.9199C17.8249 11.5167 17.5749 11.113 17.1717 11.0181C16.7685 10.9233 16.3647 11.1733 16.2699 11.5765L14.2699 20.0808C14.1751 20.484 14.4251 20.8877 14.8283 20.9826C15.2315 21.0774 15.6353 20.8274 15.7301 20.4242L17.7301 11.9199Z" fill="white"/>
+<path d="M20.2568 12.6973C19.9515 12.4174 19.4771 12.438 19.1972 12.7434C18.9172 13.0487 18.9379 13.5231 19.2432 13.803L21.6401 16.0003L19.2432 18.1973C18.9379 18.4772 18.9172 18.9516 19.1971 19.2569C19.477 19.5623 19.9514 19.5829 20.2568 19.3031L23.2568 16.5532C23.4118 16.4112 23.5 16.2106 23.5 16.0004C23.5 15.7901 23.4118 15.5896 23.2568 15.4475L20.2568 12.6973Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_629_37176" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
+<stop stop-color="#68D4EC"/>
+<stop offset="1" stop-color="#005B70"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,5 @@
+{
+    "title": "Code Viewer",
+    "vendor": "Wave",
+    "summary": "View and Edit source code with syntax highlightng and code completion."
+}
@@ -0,0 +1,8 @@
+# Code Editor for Wave Terminal
+
+These instructions are for setting up the build on MacOS.
+If you're developing on Linux please use the [Linux Build Instructions](./build-linux.md).
+
+## Running the Development Version of Wave
+
+If you install the production version of Wave, you'll see a semi-transparent sidebar, and the data for Wave is stored in the directory ~/prompt. The development version has a red/brown sidebar and stores its data in ~/prompt-dev. This allows the production and development versions to be run simultaneously with no conflicts. If the dev database is corrupted by development bugs, or the schema changes in development it will not affect the production copy.
@@ -0,0 +1,10 @@
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" rx="8" fill="url(#paint0_linear_629_37175)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.281 10H13.72C13.046 10 12.495 10 12.048 10.037C11.585 10.074 11.166 10.155 10.776 10.354C10.1646 10.6656 9.66756 11.1626 9.356 11.774C9.156 12.165 9.076 12.584 9.038 13.047C9 13.494 9 14.045 9 14.719V17.28C9 17.954 9 18.504 9.037 18.952C9.074 19.415 9.155 19.834 9.354 20.225C9.66556 20.8364 10.1626 21.3334 10.774 21.645C11.165 21.844 11.584 21.925 12.047 21.962C12.494 21.999 13.045 21.999 13.719 21.999H18.281C18.955 21.999 19.505 21.999 19.953 21.962C20.416 21.925 20.835 21.844 21.226 21.645C21.8374 21.3334 22.3344 20.8364 22.646 20.225C22.845 19.834 22.926 19.415 22.963 18.952C23 18.505 23 17.954 23 17.28V14.72C23 14.046 23 13.495 22.963 13.048C22.926 12.585 22.845 12.166 22.646 11.776C22.3344 11.1646 21.8374 10.6676 21.226 10.356C20.835 10.156 20.416 10.076 19.953 10.038C19.506 10 18.955 10 18.281 10ZM11.456 11.69C11.6 11.617 11.799 11.562 12.169 11.532C12.549 11.501 13.038 11.5 13.75 11.5H18.25C18.962 11.5 19.452 11.5 19.83 11.532C20.201 11.562 20.4 11.617 20.544 11.691C20.874 11.859 21.142 12.126 21.309 12.456C21.383 12.6 21.439 12.799 21.469 13.169C21.477 13.271 21.483 13.38 21.487 13.5H10.513C10.517 13.38 10.523 13.27 10.532 13.17C10.562 12.799 10.617 12.6 10.691 12.456C10.8588 12.1266 11.1266 11.8578 11.456 11.69ZM10.5 15V17.25C10.5 17.962 10.5 18.452 10.532 18.83C10.562 19.201 10.617 19.4 10.691 19.544C10.859 19.874 11.126 20.142 11.456 20.309C11.6 20.383 11.799 20.439 12.169 20.469C12.398 20.487 12.666 20.495 13 20.498V15H10.5ZM14.5 20.5H17.5V15H14.5V20.5ZM19 20.498C19.334 20.495 19.602 20.488 19.83 20.468C20.201 20.438 20.4 20.383 20.544 20.309C20.8732 20.1415 21.141 19.874 21.309 19.545C21.383 19.4 21.439 19.201 21.469 18.831C21.499 18.451 21.5 17.962 21.5 17.25V15H19V20.498Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_629_37175" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8B46D0"/>
+<stop offset="1" stop-color="#42156F"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,5 @@
+{
+    "title": "CSV Viewer",
+    "vendor": "Wave",
+    "summary": "View CSV files inline from within the terminal. I am now trying an animated gif :)"
+}
@@ -0,0 +1,5 @@
+{
+    "title": "ImageViewer",
+    "vendor": "Wave",
+    "summary": "View Images inline in the terminal."
+}
@@ -0,0 +1,5 @@
+{
+    "title": "Markdown",
+    "vendor": "Wave",
+    "summary": "Markdown is a lightweight markup language for creating formatted text using a plain-text editor."
+}
--- a/Show More
+++ b/Show More