fix title-bar drag area

* init
* render table
* add packages
* filtering and sorting
* init pagination
* partially working min-max
* fix broken style
* styles fixes
* init
* sticky header
* resizable cols
* scrollable tbody instead
* remove unused deps
* add file size limit
* style fixes
* scrollable x-axis
* border fixes
* more style fixes
* handle csv without headers
* fix headers rendering
* revert changes to model
* revert changes to code plugin
* ellipsis mixin
* fix height calc problem
* minor fix
* minor fix
* minor fix
* minor fix
* minor fix
* reset model and code plugin changes
* more fixes
* fix wrong theme import path

forge.config.js

@@ -1,7 +1,7 @@
 var AllowedFirstParts = {
     "package.json": true,
     dist: true,
-    static: true,
+    public: true,
     node_modules: true,
     bin: true,
 };
@@ -50,12 +50,12 @@ module.exports = {
         files: [
             "package.json",
             "dist/*",
-            "static/*",
+            "public/*",
             "node_modules/lzma-native/**",
             "node_modules/fs-ext/**",
             "node_modules/fsevents/**",
         ],
-        icon: "icon/Prompt.icns",
+        icon: "public/Prompt.icns",
         osxNotarize: {
             tool: "notarytool",
             keychainProfile: "notarytool-creds",

package.json

@@ -1,77 +1,85 @@
 {
-  "name": "Prompt",
-  "version": "0.3.0",
-  "main": "dist/emain.js",
-  "license": "Proprietary",
-  "dependencies": {
-    "@monaco-editor/react": "^4.5.1",
-    "autobind-decorator": "^2.4.0",
-    "classnames": "^2.3.1",
-    "dayjs": "^1.11.3",
-    "dompurify": "^3.0.2",
-    "electron-squirrel-startup": "^1.0.0",
-    "mobx": "^6.6.0",
-    "mobx-react": "^7.5.0",
-    "monaco-editor": "^0.41.0",
-    "node-fetch": "^3.2.10",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-json-view": "^1.21.3",
-    "react-markdown": "^8.0.5",
-    "remark": "^14.0.2",
-    "remark-gfm": "^3.0.1",
-    "sprintf-js": "^1.1.2",
-    "throttle-debounce": "^5.0.0",
-    "tsx-control-statements": "^4.1.1",
-    "uuid": "^9.0.0",
-    "winston": "^3.8.2",
-    "xterm": "^5.0.0"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.18.2",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-decorators": "^7.18.2",
-    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/plugin-transform-react-jsx": "^7.17.12",
-    "@babel/plugin-transform-runtime": "^7.18.2",
-    "@babel/preset-env": "^7.18.2",
-    "@babel/preset-react": "^7.17.12",
-    "@babel/preset-typescript": "^7.17.12",
-    "@electron-forge/cli": "^6.0.0-beta.70",
-    "@electron-forge/maker-deb": "^6.0.0-beta.70",
-    "@electron-forge/maker-rpm": "^6.0.0-beta.70",
-    "@electron-forge/maker-squirrel": "^6.0.0-beta.70",
-    "@electron-forge/maker-zip": "^6.0.0-beta.70",
-    "@types/classnames": "^2.3.1",
-    "@types/electron": "^1.6.10",
-    "@types/node": "^18.0.3",
-    "@types/react": "^18.0.12",
-    "@types/uuid": "9.0.0",
-    "babel-loader": "^9.1.3",
-    "babel-plugin-jsx-control-statements": "^4.1.2",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.1",
-    "electron": "25.4.0",
-    "electron-rebuild": "^3.2.8",
-    "http-server": "^14.1.1",
-    "less": "^4.1.2",
-    "less-loader": "^11.0.0",
-    "lodash-webpack-plugin": "^0.11.6",
-    "mini-css-extract-plugin": "^2.6.0",
-    "prettier": "^2.8.8",
-    "style-loader": "^3.3.1",
-    "typescript": "^4.7.3",
-    "webpack": "^5.73.0",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.9.1",
-    "webpack-merge": "^5.8.0"
-  },
-  "scripts": {
-    "start": "electron-forge start",
-    "package": "electron-forge package",
-    "make": "electron-forge make"
-  }
+    "name": "Prompt",
+    "version": "0.4.0",
+    "main": "dist/emain.js",
+    "license": "Proprietary",
+    "dependencies": {
+        "@monaco-editor/react": "^4.5.1",
+        "@tanstack/match-sorter-utils": "^8.8.4",
+        "@tanstack/react-table": "^8.10.3",
+        "autobind-decorator": "^2.4.0",
+        "classnames": "^2.3.1",
+        "dayjs": "^1.11.3",
+        "dompurify": "^3.0.2",
+        "electron-squirrel-startup": "^1.0.0",
+        "mobx": "^6.6.0",
+        "mobx-react": "^7.5.0",
+        "monaco-editor": "^0.41.0",
+        "mustache": "^4.2.0",
+        "node-fetch": "^3.2.10",
+        "papaparse": "^5.4.1",
+        "react": "^18.1.0",
+        "react-dom": "^18.1.0",
+        "react-json-view": "^1.21.3",
+        "react-markdown": "^8.0.5",
+        "remark": "^14.0.2",
+        "remark-gfm": "^3.0.1",
+        "sprintf-js": "^1.1.2",
+        "throttle-debounce": "^5.0.0",
+        "tsx-control-statements": "^4.1.1",
+        "uuid": "^9.0.0",
+        "winston": "^3.8.2",
+        "xterm": "^5.0.0"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.17.10",
+        "@babel/core": "^7.18.2",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-decorators": "^7.18.2",
+        "@babel/plugin-proposal-private-methods": "^7.18.6",
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+        "@babel/plugin-transform-react-jsx": "^7.17.12",
+        "@babel/plugin-transform-runtime": "^7.18.2",
+        "@babel/preset-env": "^7.18.2",
+        "@babel/preset-react": "^7.17.12",
+        "@babel/preset-typescript": "^7.17.12",
+        "@electron-forge/cli": "^6.0.0-beta.70",
+        "@electron-forge/maker-deb": "^6.0.0-beta.70",
+        "@electron-forge/maker-rpm": "^6.0.0-beta.70",
+        "@electron-forge/maker-squirrel": "^6.0.0-beta.70",
+        "@electron-forge/maker-zip": "^6.0.0-beta.70",
+        "@svgr/webpack": "^8.1.0",
+        "@types/classnames": "^2.3.1",
+        "@types/electron": "^1.6.10",
+        "@types/node": "^18.0.3",
+        "@types/papaparse": "^5.3.9",
+        "@types/react": "^18.0.12",
+        "@types/uuid": "9.0.0",
+        "babel-loader": "^9.1.3",
+        "babel-plugin-jsx-control-statements": "^4.1.2",
+        "copy-webpack-plugin": "^11.0.0",
+        "css-loader": "^6.7.1",
+        "electron": "27.0.0",
+        "electron-rebuild": "^3.2.8",
+        "file-loader": "^6.2.0",
+        "http-server": "^14.1.1",
+        "less": "^4.1.2",
+        "less-loader": "^11.0.0",
+        "lodash-webpack-plugin": "^0.11.6",
+        "mini-css-extract-plugin": "^2.6.0",
+        "prettier": "^2.8.8",
+        "react-split-it": "^2.0.0",
+        "style-loader": "^3.3.1",
+        "typescript": "^4.7.3",
+        "webpack": "^5.73.0",
+        "webpack-bundle-analyzer": "^4.5.0",
+        "webpack-cli": "^4.9.2",
+        "webpack-dev-server": "^4.9.1",
+        "webpack-merge": "^5.8.0"
+    },
+    "scripts": {
+        "start": "electron-forge start",
+        "package": "electron-forge package",
+        "make": "electron-forge make"
+    }
 }

public/index-dev.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <base href="../" />
+        <script charset="UTF-8" src="dist-dev/prompt.js"></script>
+        <link rel="stylesheet" href="public/bulma-0.9.4.min.css" />
+        <link rel="stylesheet" href="dist-dev/prompt.css" />
+    </head>
+    <body>
+        <div id="measure"></div>
+        <div id="title-bar"></div>
+        <div id="app"></div>
+    </body>
+</html>

public/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <base href="../" />
+        <script charset="UTF-8" src="dist/prompt.js"></script>
+        <link rel="stylesheet" href="public/bulma-0.9.4.min.css" />
+        <link rel="stylesheet" href="dist/prompt.css" />
+    </head>
+    <body>
+        <div id="measure"></div>
+        <div id="title-bar"></div>
+        <div id="app"></div>
+    </body>
+</html>

scripthaus.md

@@ -12,7 +12,6 @@ node_modules/.bin/webpack --watch --config webpack.dev.js
 node_modules/.bin/webpack --config webpack.dev.js
 ```
 
-
 ```bash
 # @scripthaus command webpack-electron-watch
 # @scripthaus cd :playbook
@@ -64,7 +63,7 @@ node_modules/.bin/webpack --config webpack.share.prod.js
 ```bash
 # @scripthaus command typecheck
 # @scripthaus cd :playbook
-node_modules/.bin/tsc --jsx preserve --noEmit --esModuleInterop --target ES5 --experimentalDecorators --downlevelIteration src/prompt.ts
+node_modules/.bin/tsc --jsx preserve --noEmit --esModuleInterop --target ES5 --experimentalDecorators --downlevelIteration src/index.ts
 ```
 
 ```bash

src/app/app.less

@@ -0,0 +1,407 @@
+@import "./common/themes/themes.less";
+
+@font-face {
+    font-family: "Martian Mono";
+    src: url("./assets/fonts/MartianMono-VariableFont_wdth,wght.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+:root {
+    --fa-style-family: "Font Awesome 6 Sharp";
+}
+
+html,
+body {
+    overflow: hidden;
+    font-family: @fixed-font;
+    font-size: 12px;
+    font-weight: 300;
+    line-height: 1.5;
+    background: @base-background-transparent;
+    color: @base-color;
+}
+
+body.is-dev {
+    background-color: @base-background-dev;
+}
+
+textarea {
+    overflow: hidden;
+    font-family: @fixed-font;
+    font-size: 12px;
+    font-weight: 300;
+    line-height: 1.5;
+    background: @base-background;
+    color: @base-color;
+}
+
+svg.icon {
+    fill: @base-color;
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+}
+
+.hoverEffect {
+    &:hover {
+        cursor: pointer;
+        box-shadow: 0px 2px 2px 0 rgba(255, 255, 255, 0.1), 0px 4px 5px 0 rgba(255, 255, 255, 0.2),
+            0px 0px 5px 2.5px rgba(255, 255, 255, 0.5);
+        transition: box-shadow 0.2s ease;
+    }
+}
+
+.hover-effect-base:hover {
+    cursor: pointer;
+    
+    .hover-effect-target {
+        box-shadow: 0px 2px 2px 0 rgba(255, 255, 255, 0.1), 0px 4px 5px 0 rgba(255, 255, 255, 0.2),
+            0px 0px 5px 2.5px rgba(255, 255, 255, 0.5);
+        transition: box-shadow 0.2s ease;
+    }
+}
+
+.hideScrollbarUntillHover {
+    overflow: hidden;
+    &:hover,
+    &:focus,
+    &:focus-within {
+        overflow: auto;
+    }
+}
+
+*::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+}
+
+*::-webkit-scrollbar-track {
+    background-color: @scrollbar-background !important;
+}
+
+*::-webkit-scrollbar-thumb {
+    background-color: @scrollbar-thumb !important;
+}
+
+.glow {
+    &:focus,
+    &:hover {
+        border: 1px solid @background-session-components !important;
+        box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5) inset, 0px 0px 2px rgba(255, 255, 255, 0.2) inset;
+    }
+}
+
+.truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.dropdown,
+.button {
+    display: inline-block;
+    border: 1px solid @base-border !important;
+    border-radius: 5px;
+    cursor: pointer;
+    background-color: @button-background !important;
+    color: @prompt-green;
+    .hoverEffect;
+    &:hover {
+        color: @prompt-green;
+    }
+    &.disabled {
+        color: fade(@disabled-color, 60%);
+        background: @button-disabled-background;
+        cursor: initial;
+        &:hover {
+            box-shadow: none;
+        }
+    }
+}
+.dropdown {
+    padding-left: 0.5rem;
+    outline: none !important;
+}
+
+#title-bar {
+    -webkit-app-region: drag;
+    height: 10px;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.content {
+    a:hover {
+        color: #485fc7;
+    }
+}
+
+input[type="checkbox"] {
+    cursor: pointer;
+}
+
+.display-none {
+    display: none;
+}
+
+.flex-spacer {
+    flex-grow: 1;
+}
+
+.flex-centered-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+a.a-block {
+    display: block;
+}
+
+// main layout
+#main {
+    margin-top: 10px;
+    height: calc(100vh - 10px);
+    display: flex;
+    flex-direction: column;
+
+    .main-content {
+        display: flex;
+        flex-direction: row;
+        height: 100%;
+
+        .history-view,
+        .bookmarks-view {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            margin-right: 0.5em;
+            position: relative;
+            &.is-hidden {
+                display: none;
+            }
+            overflow: auto;
+        }
+    }
+}
+
+.copied-indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: @term-white;
+    opacity: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    animation-name: fade-in-out;
+    animation-duration: 0.3s;
+}
+
+.loading-spinner {
+    display: inline-block;
+    position: absolute;
+    top: calc(40% - 8px);
+    left: 30px;
+    width: 20px;
+    height: 20px;
+
+    div {
+        box-sizing: border-box;
+        display: block;
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        margin: 2px;
+        border: 2px solid #777;
+        border-radius: 50%;
+        animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        border-color: #777 transparent transparent transparent;
+    }
+
+    div:nth-child(1) {
+        animation-delay: -0.45s;
+    }
+
+    div:nth-child(2) {
+        animation-delay: -0.3s;
+    }
+
+    div:nth-child(3) {
+        animation-delay: -0.15s;
+    }
+}
+
+#measure {
+    position: absolute;
+    z-index: -1;
+    top: -5000px;
+    line-height: normal;
+
+    .pre {
+        white-space: pre;
+    }
+
+    .mono {
+        font-family: @terminal-font;
+    }
+}
+
+.text-button {
+    color: @term-white;
+    cursor: pointer;
+    background-color: #171717;
+    outline: 2px solid #171717;
+
+    &:hover,
+    &:focus {
+        color: @term-white;
+        background-color: #333;
+        outline: 2px solid #333;
+    }
+
+    &.connect-button {
+        color: @term-green;
+        &:hover {
+            color: @term-green;
+        }
+    }
+
+    &.disconnect-button {
+        color: @term-red;
+        &:hover {
+            color: @term-red;
+        }
+    }
+
+    &.success-button {
+        color: @term-green;
+        &:hover {
+            color: @term-green;
+        }
+    }
+
+    &.error-button {
+        color: @term-red;
+        &:hover {
+            color: @term-red;
+        }
+    }
+
+    &.grey-button {
+        color: #666;
+        &:hover {
+            color: #666;
+        }
+    }
+
+    &.disabled-button {
+        &:hover,
+        &:focus {
+            outline: none;
+            background-color: #171717;
+        }
+        cursor: default;
+    }
+}
+
+.focus-indicator {
+    position: absolute;
+    display: none;
+    width: 5px;
+    border-radius: 3px;
+    height: calc(100% - 20px);
+    top: 10px;
+    left: 0;
+    z-index: 8;
+
+    &.selected {
+        display: block;
+        background-color: #666 !important;
+    }
+
+    &.active,
+    &.active.selected {
+        display: block;
+        background-color: @tab-blue !important;
+    }
+
+    &.active.selected.fg-focus {
+        display: block;
+        background-color: @tab-green !important;
+    }
+}
+
+.focus-parent:hover .focus-indicator {
+    display: block;
+    background-color: #222;
+}
+
+.remote-status {
+    margin-right: 5px;
+    position: relative;
+    top: -3px;
+    color: #c4a000;
+
+    &.status-init,
+    &.status-disconnected {
+        color: #c4a000;
+    }
+
+    &.status-connecting {
+        color: #c4a000;
+    }
+
+    &.status-connected {
+        color: #4e9a06;
+    }
+
+    &.status-error {
+        color: #cc0000;
+    }
+}
+
+@keyframes loader-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+
+    80% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fade-in-out {
+    0% {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}

src/app/app.tsx

@@ -0,0 +1,144 @@
+import * as React from "react";
+import * as mobxReact from "mobx-react";
+import * as mobx from "mobx";
+import { boundMethod } from "autobind-decorator";
+import { If } from "tsx-control-statements/components";
+import dayjs from "dayjs";
+import type { ContextMenuOpts } from "../types/types";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import { GlobalModel } from "../model/model";
+import { isBlank } from "../util/util";
+import { BookmarksView } from "./bookmarks/bookmarks";
+import { HistoryView } from "./history/history";
+import {
+    ScreenSettingsModal,
+    SessionSettingsModal,
+    LineSettingsModal,
+    ClientSettingsModal,
+} 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 "./app.less";
+
+dayjs.extend(localizedFormat);
+
+type OV<V> = mobx.IObservableValue<V>;
+
+@mobxReact.observer
+class App extends React.Component<{}, {}> {
+    dcWait: OV<boolean> = mobx.observable.box(false, { name: "dcWait" });
+
+    constructor(props: any) {
+        super(props);
+        if (GlobalModel.isDev) document.body.className = "is-dev";
+    }
+
+    @boundMethod
+    handleContextMenu(e: any) {
+        let isInNonTermInput = false;
+        let activeElem = document.activeElement;
+        if (activeElem != null && activeElem.nodeName == "TEXTAREA") {
+            if (!activeElem.classList.contains("xterm-helper-textarea")) {
+                isInNonTermInput = true;
+            }
+        }
+        if (activeElem != null && activeElem.nodeName == "INPUT" && activeElem.getAttribute("type") == "text") {
+            isInNonTermInput = true;
+        }
+        let opts: ContextMenuOpts = {};
+        if (isInNonTermInput) {
+            opts.showCut = true;
+        }
+        let sel = window.getSelection();
+        if (!isBlank(sel.toString())) {
+            GlobalModel.contextEditMenu(e, opts);
+        } else {
+            if (isInNonTermInput) {
+                GlobalModel.contextEditMenu(e, opts);
+            }
+        }
+    }
+
+    @boundMethod
+    updateDcWait(val: boolean): void {
+        mobx.action(() => {
+            this.dcWait.set(val);
+        })();
+    }
+
+    render() {
+        let screenSettingsModal = GlobalModel.screenSettingsModal.get();
+        let sessionSettingsModal = GlobalModel.sessionSettingsModal.get();
+        let lineSettingsModal = GlobalModel.lineSettingsModal.get();
+        let clientSettingsModal = GlobalModel.clientSettingsModal.get();
+        let remotesModal = GlobalModel.remotesModalModel.isOpen();
+        let disconnected = !GlobalModel.ws.open.get() || !GlobalModel.localServerRunning.get();
+        let hasClientStop = GlobalModel.getHasClientStop();
+        let dcWait = this.dcWait.get();
+        if (disconnected || hasClientStop) {
+            if (!dcWait) {
+                setTimeout(() => this.updateDcWait(true), 1500);
+            }
+            return (
+                <div id="main" onContextMenu={this.handleContextMenu}>
+                    <div className="main-content">
+                        <MainSideBar />
+                        <div className="session-view" />
+                    </div>
+                    <If condition={dcWait}>
+                        <If condition={disconnected}>
+                            <DisconnectedModal />
+                        </If>
+                        <If condition={!disconnected && hasClientStop}>
+                            <ClientStopModal />
+                        </If>
+                    </If>
+                </div>
+            );
+        }
+        if (dcWait) {
+            setTimeout(() => this.updateDcWait(false), 0);
+        }
+        return (
+            <div id="main" onContextMenu={this.handleContextMenu}>
+                <div className="main-content">
+                    <MainSideBar />
+                    <WorkspaceView />
+                    <HistoryView />
+                    <BookmarksView />
+                </div>
+                <AlertModal />
+                <If condition={GlobalModel.needsTos()}>
+                    <TosModal />
+                </If>
+                <If condition={GlobalModel.welcomeModalOpen.get()}>
+                    <WelcomeModal />
+                </If>
+                <If condition={screenSettingsModal != null}>
+                    <ScreenSettingsModal
+                        key={screenSettingsModal.sessionId + ":" + screenSettingsModal.screenId}
+                        sessionId={screenSettingsModal.sessionId}
+                        screenId={screenSettingsModal.screenId}
+                    />
+                </If>
+                <If condition={sessionSettingsModal != null}>
+                    <SessionSettingsModal key={sessionSettingsModal} sessionId={sessionSettingsModal} />
+                </If>
+                <If condition={lineSettingsModal != null}>
+                    <LineSettingsModal key={String(lineSettingsModal)} linenum={lineSettingsModal} />
+                </If>
+                <If condition={clientSettingsModal}>
+                    <ClientSettingsModal />
+                </If>
+                <If condition={remotesModal}>
+                    <RemotesModal model={GlobalModel.remotesModalModel} />
+                </If>
+            </div>
+        );
+    }
+}
+
+export { App };

src/app/assets/icons/add.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="add">
+<path id="Vector" d="M8 2.25C8.41421 2.25 8.75 2.58579 8.75 3V7.25H12.9999C13.4142 7.25 13.7499 7.58579 13.7499 8C13.7499 8.41421 13.4142 8.75 12.9999 8.75H8.75V13C8.75 13.4142 8.41421 13.75 8 13.75C7.58579 13.75 7.25 13.4142 7.25 13V8.75H2.99994C2.58573 8.75 2.24994 8.41421 2.24994 8C2.24994 7.58579 2.58573 7.25 2.99994 7.25H7.25V3C7.25 2.58579 7.58579 2.25 8 2.25Z" />
+</g>
+</svg>

src/app/assets/icons/chevron_left.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="chevron left">
+<path id="Vector" d="M9.37532 3.87037C9.06142 3.60011 8.58787 3.63548 8.31761 3.94938L5.24716 7.51555C5.00479 7.79706 5.005 8.21358 5.24766 8.49484L8.3181 12.0537C8.58869 12.3673 9.06228 12.4022 9.3759 12.1316C9.68952 11.861 9.72441 11.3874 9.45383 11.0738L6.80564 8.0044L9.45433 4.92809C9.72459 4.61419 9.68922 4.14064 9.37532 3.87037Z" />
+</g>
+</svg>

src/app/assets/icons/circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>

src/app/assets/icons/circle_info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336H192v48h24 80 24V336H296h-8V248 224H264 216 192v48h24 24v64H216zm72-144V128H224v64h64z"/></svg>