about modal (#244)

emain/emain.ts

@@ -690,7 +690,10 @@ function getAppMenu() {
     ];
     const appMenu: Electron.MenuItemConstructorOptions[] = [
         {
-            role: "about",
+            label: "About Wave Terminal",
+            click: (_, window) => {
+                window?.webContents.send("menu-item-about");
+            },
         },
         {
             label: "Check for Updates",

emain/preload.ts

@@ -24,6 +24,7 @@ contextBridge.exposeInMainWorld("api", {
     onUpdaterStatusChange: (callback) => ipcRenderer.on("app-update-status", (_event, status) => callback(status)),
     getUpdaterStatus: () => ipcRenderer.sendSync("get-app-update-status"),
     installAppUpdate: () => ipcRenderer.send("install-app-update"),
+    onMenuItemAbout: (callback) => ipcRenderer.on("menu-item-about", callback),
     updateWindowControlsOverlay: (rect) => ipcRenderer.send("update-window-controls-overlay", rect),
 });
 

frontend/app/element/button.less

@@ -2,150 +2,102 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 
 .button {
-    background: var(--accent-color);
-    border: none;
-    cursor: pointer;
-    outline: inherit;
-    display: flex;
-    padding: 6px 16px;
-    align-items: center;
-    gap: 4px;
-    border-radius: 6px;
-    height: auto;
-    line-height: 1.5;
-    white-space: nowrap;
-    user-select: none;
-    font-weight: 500;
+    padding: 1px;
+    border: 1px solid transparent;
+    border-radius: 8px;
 
-    color: var(--main-text-color);
-
-    i {
-        fill: var(--main-text-color);
+    &:focus,
+    &.focus {
+        border: 1px solid var(--button-focus-border-color);
     }
 
-    &.primary,
-    &.secondary {
-        color: var(--main-text-color);
+    .button-inner {
         background: var(--accent-color);
+        border: none;
+        cursor: pointer;
+        outline: inherit;
+        display: flex;
+        padding: 8px 20px;
+        align-items: center;
+        gap: 4px;
+        border-radius: 6px;
+        height: auto;
+        line-height: 16px;
+        white-space: nowrap;
+        user-select: none;
+        font-size: 14px;
+
+        color: var(--main-text-color);
 
         i {
             fill: var(--main-text-color);
         }
-    }
 
-    &.primary.danger {
-        background: var(--error-color);
-    }
-
-    &.primary.warning {
-        background: #e6ba1e;
-        color: #000000;
-    }
-
-    &.primary.outlined,
-    &.primary.greyoutlined {
-        background: none;
-        border: 1px solid var(--accent-color);
-
-        i {
-            fill: var(--accent-color);
-        }
-    }
-
-    &.primary.greyoutlined {
-        border-color: var(--secondary-text-color);
-
-        i {
-            fill: var(--secondary-text-color);
-        }
-    }
-
-    &.primary.outlined.danger {
-        border-color: var(--error-color);
-
-        i {
-            fill: var(--error-color);
-        }
-    }
-
-    &.primary.outlined,
-    &.primary.greyoutlined {
-        &.hover-danger:hover {
+        &.primary,
+        &.secondary {
             color: var(--main-text-color);
-            border-color: var(--error-color);
+            background: var(--accent-color);
+
+            i {
+                fill: var(--main-text-color);
+            }
+        }
+
+        &.primary.danger {
             background: var(--error-color);
         }
-    }
 
-    &.greytext {
-        color: var(--secondary-text-color);
-    }
+        &.primary.warning {
+            background: #e6ba1e;
+            color: #000000;
+        }
 
-    &.primary.ghost {
-        background: none;
+        &.primary.ghost {
+            background: none;
 
-        i {
-            fill: var(--accent-color);
+            i {
+                fill: var(--accent-color);
+            }
+        }
+
+        &.primary.ghost.danger {
+            i {
+                fill: var(--app-error-color);
+            }
+        }
+
+        &.secondary,
+        &.link-button {
+            background: var(--highlight-bg-color);
+        }
+
+        &.secondary.ghost {
+            background: none;
+        }
+
+        &.secondary.danger {
+            color: var(--error-color);
+        }
+
+        &.disabled {
+            opacity: 0.5;
         }
     }
 
-    &.primary.ghost.danger {
-        i {
-            fill: var(--app-error-color);
-        }
+    /* 
+	 *	customs styles here
+	 */
+    .border-radius-4 {
+        border-radius: 4px;
     }
 
-    &.secondary {
-        background: var(--highlight-bg-color);
+    .vertical-padding-2 {
+        padding-top: 2px;
+        padding-bottom: 2px;
     }
 
-    &.secondary.outlined {
-        background: none;
-        border: 1px solid var(--main-text-color);
-    }
-
-    &.secondary.outlined.danger {
-        border-color: var(--error-color);
-    }
-
-    &.secondary.ghost {
-        background: none;
-    }
-
-    &.secondary.danger {
-        color: var(--error-color);
-    }
-
-    &.small {
-        padding: 4px 8px;
-        font-size: 12px;
-        border-radius: 3.6px;
-    }
-
-    &.term-inline {
-        padding: 2px 8px;
-        border-radius: 3px;
-    }
-
-    &.disabled {
-        opacity: 0.5;
-    }
-
-    &.link {
-        cursor: pointer;
+    .horizontal-padding-10 {
+        padding-left: 10px;
+        padding-right: 10px;
     }
 }
-
-.border-radius-4 {
-    border-radius: 4px;
-}
-
-.vertical-padding-2 {
-    padding-top: 2px;
-    padding-bottom: 2px;
-}
-
-.horizontal-padding-10 {
-    padding-left: 10px;
-    padding-right: 10px;
-}

frontend/app/element/button.tsx

@@ -14,16 +14,18 @@ const Button = React.memo(({ className = "primary", children, disabled, ...props
     );
 
     return (
-        <button
-            className={clsx("button", className, {
-                disabled,
-                hasIcon,
-            })}
-            disabled={disabled}
-            {...props}
-        >
-            {children}
-        </button>
+        <div className="button">
+            <button
+                className={clsx("button-inner", className, {
+                    disabled,
+                    hasIcon,
+                })}
+                disabled={disabled}
+                {...props}
+            >
+                {children}
+            </button>
+        </div>
     );
 });
 

frontend/app/element/linkbutton.less

@@ -0,0 +1,12 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+.button {
+    &.link-button {
+        text-decoration: none;
+
+        .button-inner {
+            padding: 8px 12px;
+        }
+    }
+}

frontend/app/element/linkbutton.tsx

@@ -0,0 +1,37 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { clsx } from "clsx";
+import * as React from "react";
+
+import "./linkbutton.less";
+
+interface LinkButtonProps {
+    href: string;
+    rel?: string;
+    target?: string;
+    children: React.ReactNode;
+    disabled?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    style?: React.CSSProperties;
+    autoFocus?: boolean;
+    className?: string;
+    termInline?: boolean;
+    title?: string;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+}
+
+const LinkButton = ({ leftIcon, rightIcon, children, className, ...rest }: LinkButtonProps) => {
+    return (
+        <a {...rest} className="button link-button">
+            <span className={clsx("button-inner", className)}>
+                {leftIcon && <span className="icon-left">{leftIcon}</span>}
+                {children}
+                {rightIcon && <span className="icon-right">{rightIcon}</span>}
+            </span>
+        </a>
+    );
+};
+
+export { LinkButton };

frontend/app/modals/about.less

@@ -0,0 +1,61 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+.about-modal {
+    width: 445px;
+    padding-bottom: 34px;
+
+    .modal-content {
+        margin-bottom: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 24px;
+
+        .section-wrapper {
+            display: flex;
+            flex-direction: column;
+            gap: 26px;
+            width: 100%;
+        }
+
+        .section {
+            align-items: center;
+            gap: 16px;
+            align-self: stretch;
+            width: 100%;
+            text-align: center;
+
+            &.logo-section {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+                text-align: center;
+
+                .app-name {
+                    font-size: 25px;
+                }
+
+                .text-standard {
+                    line-height: 20px;
+                }
+            }
+        }
+
+        .section:nth-child(3) {
+            display: flex;
+            align-items: flex-start;
+            gap: 7px;
+
+            .wave-button-link {
+                display: flex;
+                align-items: center;
+
+                i {
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+}

frontend/app/modals/about.tsx

@@ -0,0 +1,61 @@
+import Logo from "@/app/asset/logo.svg";
+import { LinkButton } from "@/app/element/linkbutton";
+import { modalsModel } from "@/app/store/modalmodel";
+import { Modal } from "./modal";
+
+import "./about.less";
+
+interface AboutModalProps {}
+
+const AboutModal = ({}: AboutModalProps) => {
+    const currentDate = new Date();
+
+    return (
+        <Modal className="about-modal" title="About" onClose={() => modalsModel.popModal()}>
+            <div className="section-wrapper">
+                <div className="section logo-section">
+                    <Logo />
+                    <div className="app-name">Wave Terminal</div>
+                    <div className="text-standard">
+                        Open-Source AI-Native Terminal
+                        <br />
+                        Built for Seamless Workflows
+                    </div>
+                </div>
+                <div className="section text-standard">Client Version 0.1.8 (20240615-002636)</div>
+                <div className="section">
+                    <LinkButton
+                        className="secondary solid"
+                        href="https://github.com/wavetermdev/waveterm"
+                        target="_blank"
+                        leftIcon={<i className="fa-brands fa-github"></i>}
+                    >
+                        Github
+                    </LinkButton>
+                    <LinkButton
+                        className="secondary solid"
+                        href="https://www.waveterm.dev/"
+                        target="_blank"
+                        leftIcon={<i className="fa-sharp fa-light fa-globe"></i>}
+                    >
+                        Website
+                    </LinkButton>
+                    <LinkButton
+                        className="secondary solid"
+                        href="https://github.com/wavetermdev/waveterm/blob/main/acknowledgements/README.md"
+                        target="_blank"
+                        rel={"noopener"}
+                        leftIcon={<i className="fa-sharp fa-light fa-heart"></i>}
+                    >
+                        Acknowledgements
+                    </LinkButton>
+                </div>
+                <div className="section text-standard">&copy; {currentDate.getFullYear()} Command Line Inc.</div>
+            </div>
+        </Modal>
+    );
+};
+
+AboutModal.displayName = "AboutModal";
+
+export { AboutModal };

frontend/app/modals/modal.less

@@ -24,51 +24,61 @@
 }
 
 .modal {
+    position: relative;
     z-index: var(--zindex-modal);
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 16px;
-    border-radius: 10px;
+    gap: 32px;
+    padding: 24px 16px 16px;
+    border-radius: 8px;
+    border: 0.5px solid var(--modal-border-color);
     background: var(--modal-bg-color);
-    border: 1px solid var(--border-color);
-    box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25);
 
-    .modal-header {
-        width: 100%;
+    .header-content-wrapper {
         display: flex;
-        align-items: center;
-        padding: 12px 14px 12px 20px;
-        justify-content: space-between;
-        line-height: 20px;
-        border-bottom: 1px solid var(--modal-header-bottom-border-color);
-        user-select: none;
+        flex-direction: column;
+        gap: 8px;
+        width: 100%;
 
-        .modal-title {
-            color: var(--main-text-color);
-            font-size: var(--title-font-size);
-        }
+        .modal-header {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            user-select: none;
 
-        button {
-            padding-right: 4px !important;
-            i {
-                font-size: 18px;
+            .modal-title {
+                color: var(--main-text-color);
+                font-size: var(--title-font-size);
+            }
+
+            button {
+                position: absolute;
+                right: 8px;
+                top: 8px;
+                padding: 8px 16px;
+
+                i {
+                    font-size: 18px;
+                }
             }
         }
-    }
-
-    .modal-body {
-        width: 100%;
-        padding: 0px 20px;
+        .modal-content {
+            width: 100%;
+            padding: 0px 20px;
+        }
     }
 
     .modal-footer {
         display: flex;
         justify-content: flex-end;
         width: 100%;
-        padding: 0 20px 20px;
+        padding-top: 16px;
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
 
-        button:last-child {
+        .button:last-child {
             margin-left: 8px;
         }
     }

frontend/app/modals/modal.tsx

@@ -2,19 +2,18 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Button } from "@/app/element/button";
+import clsx from "clsx";
 import ReactDOM from "react-dom";
 
 import "./modal.less";
 
 interface ModalHeaderProps {
-    title: React.ReactNode;
     description?: string;
     onClose?: () => void;
 }
 
-const ModalHeader = ({ onClose, title, description }: ModalHeaderProps) => (
+const ModalHeader = ({ onClose, description }: ModalHeaderProps) => (
     <header className="modal-header">
-        {typeof title === "string" ? <h3 className="modal-title">{title}</h3> : title}
         {description && <p>{description}</p>}
         {onClose && (
             <Button className="secondary ghost" onClick={onClose} title="Close (ESC)">
@@ -39,20 +38,22 @@ interface ModalFooterProps {
     onCancel?: () => void;
 }
 
-const ModalFooter = ({ onCancel, onOk, cancelLabel = "Cancel", okLabel = "Ok" }: ModalFooterProps) => (
-    <footer className="modal-footer">
-        {onCancel && (
-            <Button className="secondary" onClick={onCancel}>
-                {cancelLabel}
-            </Button>
-        )}
-        {onOk && (
-            <Button className="primary" onClick={onOk}>
-                {okLabel}
-            </Button>
-        )}
-    </footer>
-);
+const ModalFooter = ({ onCancel, onOk, cancelLabel = "Cancel", okLabel = "Ok" }: ModalFooterProps) => {
+    return (
+        <footer className="modal-footer">
+            {onCancel && (
+                <Button className="secondary ghost" onClick={onCancel}>
+                    {cancelLabel}
+                </Button>
+            )}
+            {onOk && (
+                <Button className="primary" onClick={onOk}>
+                    {okLabel}
+                </Button>
+            )}
+        </footer>
+    );
+};
 
 interface ModalProps {
     title: string;
@@ -81,13 +82,21 @@ const Modal = ({
 }: ModalProps) => {
     const renderBackdrop = (onClick) => <div className="modal-backdrop" onClick={onClick}></div>;
 
+    const renderFooter = () => {
+        return onOk || onCancel;
+    };
+
     const renderModal = () => (
         <div className="modal-wrapper">
             {renderBackdrop(onClickBackdrop)}
-            <div className={`modal ${className}`}>
-                <ModalHeader title={title} onClose={onClose} description={description} />
-                <ModalContent>{children}</ModalContent>
-                <ModalFooter onCancel={onCancel} onOk={onOk} cancelLabel={cancelLabel} okLabel={okLabel} />
+            <div className={clsx(`modal`, className)}>
+                <div className="header-content-wrapper">
+                    <ModalHeader onClose={onClose} description={description} />
+                    <ModalContent>{children}</ModalContent>
+                </div>
+                {renderFooter() && (
+                    <ModalFooter onCancel={onCancel} onOk={onOk} cancelLabel={cancelLabel} okLabel={okLabel} />
+                )}
             </div>
         </div>
     );

frontend/app/modals/modalregistry.tsx

@@ -1,12 +1,14 @@
 // Copyright 2023, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { AboutModal } from "./about";
 import { TosModal } from "./tos";
 import { UserInputModal } from "./userinputmodal";
 
 const modalRegistry: { [key: string]: React.ComponentType<any> } = {
     [TosModal.displayName || "TosModal"]: TosModal,
     [UserInputModal.displayName || "UserInputModal"]: UserInputModal,
+    [AboutModal.displayName || "AboutModal"]: AboutModal,
 };
 
 export const getModalComponent = (key: string): React.ComponentType<any> | undefined => {

frontend/app/modals/tos.less

@@ -1,5 +1,6 @@
 .tos-modal {
     width: 640px;
+    border-radius: 10px;
 
     .modal-inner {
         padding: 40px 76px;
@@ -16,6 +17,8 @@
 
             .logo {
                 margin-bottom: 10px;
+                display: flex;
+                justify-content: center;
             }
 
             .modal-title {

frontend/app/store/global.ts

@@ -62,6 +62,15 @@ function initGlobalAtoms(initOpts: GlobalInitOptions) {
         // do nothing
     }
 
+    const showAboutModalAtom = jotai.atom(false) as jotai.PrimitiveAtom<boolean>;
+    try {
+        getApi().onMenuItemAbout(() => {
+            modalsModel.pushModal("AboutModal");
+        });
+    } catch (_) {
+        // do nothing
+    }
+
     const clientAtom: jotai.Atom<Client> = jotai.atom((get) => {
         const clientId = get(clientIdAtom);
         if (clientId == null) {

frontend/app/theme.less

@@ -64,14 +64,19 @@
     // xterm-decoration-top: 2
 
     /* modal colors */
-    --modal-bg-color: rgb(26, 28, 26);
+    --modal-bg-color: #232323;
     --modal-header-bottom-border-color: rgba(241, 246, 243, 0.15);
+    --modal-border-color: rgba(255, 255, 255, 0.12) /* toggle colors */ --toggle-bg-color: var(--border-color);
 
-    /* toggle colors */
-    --toggle-bg-color: var(--border-color);
     --toggle-thumb-color: var(--main-text-color);
     --toggle-checked-bg-color: var(--accent-color);
 
     /* link color */
     --link-color: #58c142;
+
+    /* button colors */
+    --button-primary-color: #58c142;
+    --button-secondary-color: rgba(255, 255, 255, 0.1);
+    --button-danger-color: #d43434;
+    --button-focus-border-color: rgba(88, 193, 66, 0.8);
 }

frontend/types/custom.d.ts

@@ -68,6 +68,7 @@ declare global {
         onUpdaterStatusChange: (callback: (status: UpdaterStatus) => void) => void;
         getUpdaterStatus: () => UpdaterStatus;
         installAppUpdate: () => void;
+        onMenuItemAbout: (callback: () => void) => void;
         updateWindowControlsOverlay: (rect: Dimensions) => void;
     };