beta.1

Add a button in the directory view to easily navigate to the parent of
the current directory.

.github/workflows/bump-version.yml

@@ -58,6 +58,7 @@ jobs:
               shell: bash
 
             - name: "Push version bump: ${{ steps.bump-version.outputs.WAVETERM_VERSION }}"
+              if: github.ref_protected
               run: |
                   # Create a new commit for the package version bump in package.json
                   export VERSION=${{ steps.bump-version.outputs.WAVETERM_VERSION }}

.storybook/global.css

@@ -1,7 +1,6 @@
 body {
     height: 100vh;
     padding: 0;
-    overflow: auto;
 }
 
 #storybook-root {

.storybook/preview.tsx

@@ -3,9 +3,6 @@ import type { Preview } from "@storybook/react";
 import React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import "../frontend/app/theme.less";
-import "../frontend/app/app.less";
-import "../frontend/app/reset.less";
 import "./global.css";
 
 const preview: Preview = {

.vscode/tasks.json

@@ -1,18 +0,0 @@
-{
-    "version": "2.0.0",
-    "tasks": [
-        {
-            "label": "Start Storybook",
-            "type": "shell",
-            "command": "yarn storybook",
-            "presentation": {
-                "reveal": "silent",
-                "panel": "shared"
-            },
-            "runOptions": {
-                "instanceLimit": 1,
-                "runOn": "folderOpen"
-            }
-        }
-    ]
-}

Taskfile.yml

@@ -17,8 +17,7 @@ vars:
 tasks:
     electron:dev:
         desc: Run the Electron application via the Vite dev server (enables hot reloading).
-        cmds:
-            - yarn dev
+        cmd: yarn dev
         deps:
             - yarn
             - build:backend
@@ -28,12 +27,15 @@ tasks:
 
     electron:start:
         desc: Run the Electron application directly.
-        cmds:
-            - yarn start
+        cmd: yarn start
         deps:
             - yarn
             - build:backend
 
+    storybook:
+        desc: Start the Storybook server.
+        cmd: yarn storybook
+
     package:
         desc: Package the application for the current platform.
         cmds:
@@ -98,12 +100,12 @@ tasks:
         requires:
             vars:
                 - ARCHS
-        cmds:
-            - cmd: CGO_ENABLED=1 GOARCH={{.GOARCH}} go build -tags "osusergo,netcgo,sqlite_omit_load_extension" -ldflags "{{.GO_LDFLAGS}} -X main.BuildTime=$({{.DATE}} +'%Y%m%d%H%M') -X main.WaveVersion={{.VERSION}}" -o dist/bin/wavesrv.{{if eq .GOARCH "amd64"}}x64{{else}}{{.GOARCH}}{{end}}{{exeExt}} cmd/server/main-server.go
-              for:
-                  var: ARCHS
-                  split: ","
-                  as: GOARCH
+        cmd:
+            cmd: CGO_ENABLED=1 GOARCH={{.GOARCH}} go build -tags "osusergo,netcgo,sqlite_omit_load_extension" -ldflags "{{.GO_LDFLAGS}} -X main.BuildTime=$({{.DATE}} +'%Y%m%d%H%M') -X main.WaveVersion={{.VERSION}}" -o dist/bin/wavesrv.{{if eq .GOARCH "amd64"}}x64{{else}}{{.GOARCH}}{{end}}{{exeExt}} cmd/server/main-server.go
+            for:
+                var: ARCHS
+                split: ","
+                as: GOARCH
         sources:
             - "cmd/server/*.go"
             - "pkg/**/*.go"
@@ -173,8 +175,7 @@ tasks:
             - "pkg/**/*.go"
         generates:
             - dist/bin/wsh-{{.VERSION}}-{{.GOOS}}.{{.NORMALIZEDARCH}}{{.EXT}}
-        cmds:
-            - (CGO_ENABLED=0 GOOS={{.GOOS}} GOARCH={{.GOARCH}} go build -ldflags="-s -w -X main.BuildTime=$({{.DATE}} +'%Y%m%d%H%M') -X main.WaveVersion={{.VERSION}}" -o dist/bin/wsh-{{.VERSION}}-{{.GOOS}}.{{.NORMALIZEDARCH}}{{.EXT}} cmd/wsh/main-wsh.go)
+        cmd: (CGO_ENABLED=0 GOOS={{.GOOS}} GOARCH={{.GOARCH}} go build -ldflags="-s -w -X main.BuildTime=$({{.DATE}} +'%Y%m%d%H%M') -X main.WaveVersion={{.VERSION}}" -o dist/bin/wsh-{{.VERSION}}-{{.GOOS}}.{{.NORMALIZEDARCH}}{{.EXT}} cmd/wsh/main-wsh.go)
         deps:
             - go:mod:tidy
         internal: true
@@ -251,8 +252,7 @@ tasks:
             - yarn.lock
             - package.json
             - .yarnrc.yml
-        cmds:
-            - yarn
+        cmd: yarn
 
     go:mod:tidy:
         desc: Runs `go mod tidy`
@@ -261,5 +261,4 @@ tasks:
             - go.sum
         sources:
             - go.mod
-        cmds:
-            - go mod tidy
+        cmd: go mod tidy

cmd/server/main-server.go

@@ -42,8 +42,8 @@ import (
 var WaveVersion = "0.0.0"
 var BuildTime = "0"
 
-const InitialTelemetryWait = 30 * time.Second
-const TelemetryTick = 10 * time.Minute
+const InitialTelemetryWait = 10 * time.Second
+const TelemetryTick = 2 * time.Minute
 const TelemetryInterval = 4 * time.Hour
 
 const ReadySignalPidVarName = "WAVETERM_READY_SIGNAL_PID"

cmd/wsh/cmd/wshcmd-setmeta.go

@@ -47,11 +47,16 @@ func parseMetaSets(metaSets []string) (map[string]interface{}, error) {
 			}
 			meta[fields[0]] = val
 		} else {
-			fval, err := strconv.ParseFloat(setVal, 64)
+			ival, err := strconv.ParseInt(setVal, 0, 64)
 			if err == nil {
-				meta[fields[0]] = fval
+				meta[fields[0]] = ival
 			} else {
-				meta[fields[0]] = setVal
+				fval, err := strconv.ParseFloat(setVal, 64)
+				if err == nil {
+					meta[fields[0]] = fval
+				} else {
+					meta[fields[0]] = setVal
+				}
 			}
 		}
 	}

electron-builder.config.cjs

@@ -10,7 +10,7 @@ const path = require("path");
 const config = {
     appId: pkg.build.appId,
     productName: pkg.productName,
-    executableName: pkg.name,
+    executableName: pkg.productName,
     artifactName: "${productName}-${platform}-${arch}-${version}.${ext}",
     generateUpdatesFilesForAllChannels: true,
     npmRebuild: false,
@@ -55,6 +55,7 @@ const config = {
     linux: {
         artifactName: "${name}-${platform}-${arch}-${version}.${ext}",
         category: "TerminalEmulator",
+        executableName: pkg.name,
         icon: "build/icons.icns",
         target: ["zip", "deb", "rpm", "AppImage", "pacman"],
         synopsis: pkg.description,
@@ -86,7 +87,7 @@ const config = {
         if (context.electronPlatformName === "darwin" && context.arch === Arch.universal) {
             const packageBinDir = path.resolve(
                 context.appOutDir,
-                `${pkg.name}.app/Contents/Resources/app.asar.unpacked/dist/bin`
+                `${pkg.productName}.app/Contents/Resources/app.asar.unpacked/dist/bin`
             );
 
             // Reapply file permissions to the wavesrv binaries in the final app package

frontend/app/element/button.stories.tsx

@@ -1,121 +0,0 @@
-// Copyright 2024, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import { Button } from "./button";
-
-const meta = {
-    title: "Elements/Button",
-    component: Button,
-    args: {
-        children: "Click Me",
-        disabled: false,
-        className: "",
-        onClick: fn(),
-    },
-    argTypes: {
-        onClick: {
-            action: "clicked",
-            description: "Click event handler",
-        },
-        children: {
-            description: "Content inside the button",
-        },
-        disabled: {
-            description: "Disables the button if true",
-        },
-        className: {
-            description: "Additional class names to style the button",
-        },
-    },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Disabled: Story = {
-    args: {
-        disabled: true,
-        children: "Disabled Button",
-    },
-};
-
-export const GreySolid: Story = {
-    args: {
-        className: "solid grey",
-        children: "Grey Solid Button",
-    },
-};
-
-export const RedSolid: Story = {
-    args: {
-        className: "solid red",
-        children: "Red Solid Button",
-    },
-};
-
-export const YellowSolid: Story = {
-    args: {
-        className: "solid yellow",
-        children: "Yellow Solid Button",
-    },
-};
-
-export const GreenOutlined: Story = {
-    args: {
-        className: "outlined green",
-        children: "Green Outline Button",
-    },
-};
-
-export const GreyOutlined: Story = {
-    args: {
-        className: "outlined grey",
-        children: "Grey Outline Button",
-    },
-};
-
-export const RedOutlined: Story = {
-    args: {
-        className: "outlined red",
-        children: "Red Outline Button",
-    },
-};
-
-export const YellowOutlined: Story = {
-    args: {
-        className: "outlined yellow",
-        children: "Yellow Outline Button",
-    },
-};
-
-export const GreenGhostText: Story = {
-    args: {
-        className: "ghost green",
-        children: "Yellow Ghost Text Button",
-    },
-};
-
-export const GreyGhostText: Story = {
-    args: {
-        className: "ghost grey",
-        children: "Grey Ghost Text Button",
-    },
-};
-
-export const RedGhost: Story = {
-    args: {
-        className: "ghost red",
-        children: "Red Ghost Text Button",
-    },
-};
-
-export const YellowGhostText: Story = {
-    args: {
-        className: "ghost yellow",
-        children: "Yellow Ghost Text Button",
-    },
-};

frontend/app/element/button.tsx

@@ -9,39 +9,41 @@ import "./button.less";
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     className?: string;
     children?: ReactNode;
+    target?: string;
+    source?: string;
 }
 
 const Button = memo(
-    forwardRef<HTMLButtonElement, ButtonProps>(({ children, disabled, className = "", ...props }: ButtonProps, ref) => {
-        const btnRef = useRef<HTMLButtonElement>(null);
-        useImperativeHandle(ref, () => btnRef.current as HTMLButtonElement);
+    forwardRef<HTMLButtonElement, ButtonProps>(
+        ({ children, disabled, source, className = "", ...props }: ButtonProps, ref) => {
+            const btnRef = useRef<HTMLButtonElement>(null);
+            useImperativeHandle(ref, () => btnRef.current as HTMLButtonElement);
 
-        const childrenArray = Children.toArray(children);
+            const childrenArray = Children.toArray(children);
 
-        // Check if the className contains any of the categories: solid, outlined, or ghost
-        const containsButtonCategory = /(solid|outline|ghost)/.test(className);
-        // If no category is present, default to 'solid'
-        const categoryClassName = containsButtonCategory ? className : `solid ${className}`;
+            // Check if the className contains any of the categories: solid, outlined, or ghost
+            const containsButtonCategory = /(solid|outline|ghost)/.test(className);
+            // If no category is present, default to 'solid'
+            const categoryClassName = containsButtonCategory ? className : `solid ${className}`;
 
-        // Check if the className contains any of the color options: green, grey, red, or yellow
-        const containsColor = /(green|grey|red|yellow)/.test(categoryClassName);
-        // If no color is present, default to 'green'
-        const finalClassName = containsColor ? categoryClassName : `green ${categoryClassName}`;
+            // Check if the className contains any of the color options: green, grey, red, or yellow
+            const containsColor = /(green|grey|red|yellow)/.test(categoryClassName);
+            // If no color is present, default to 'green'
+            const finalClassName = containsColor ? categoryClassName : `green ${categoryClassName}`;
 
-        return (
-            <button
-                ref={btnRef}
-                tabIndex={disabled ? -1 : 0}
-                className={clsx("button", finalClassName)}
-                disabled={disabled}
-                {...props}
-            >
-                {childrenArray}
-            </button>
-        );
-    })
+            return (
+                <button
+                    ref={btnRef}
+                    tabIndex={disabled ? -1 : 0}
+                    className={clsx("button", finalClassName)}
+                    disabled={disabled}
+                    {...props}
+                >
+                    {childrenArray}
+                </button>
+            );
+        }
+    )
 );
 
-Button.displayName = "Button";
-
 export { Button };

frontend/app/element/dropdown.less

@@ -1,40 +0,0 @@
-// Copyright 2024, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-.dropdown {
-    position: absolute;
-    z-index: 1000; // TODO: put this in theme.less
-    display: flex;
-    width: 125px;
-    padding: 2px;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: flex-start;
-    gap: 1px;
-    border-radius: 4px;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    background: #212121;
-    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.3);
-
-    .dropdown-item {
-        padding: 4px 6px;
-        cursor: pointer;
-        color: #fff;
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-        letter-spacing: -0.12px;
-        width: 100%;
-        border-radius: 2px;
-
-        &:hover,
-        &.active {
-            background-color: var(--accent-color);
-        }
-
-        .arrow {
-            float: right;
-        }
-    }
-}

frontend/app/element/dropdown.stories.tsx

@@ -1,301 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import { useRef, useState } from "react";
-import { Dropdown } from "./dropdown";
-
-const meta = {
-    title: "Elements/Dropdown",
-    component: Dropdown,
-    args: {
-        items: [],
-        anchorRef: undefined,
-        boundaryRef: undefined,
-        className: "",
-        setVisibility: fn(),
-    },
-    argTypes: {
-        items: {
-            description: "Items of dropdown",
-        },
-        anchorRef: {
-            description: "Element to attach the dropdown",
-        },
-        setVisibility: {
-            description: "Visibility event handler",
-        },
-        boundaryRef: {
-            description: "Component that defines the boundaries of the dropdown",
-        },
-        className: {
-            description: "Custom className",
-        },
-    },
-} satisfies Meta<typeof Dropdown>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const DefaultRender: Story = {
-    render: (args) => {
-        const anchorRef = useRef<HTMLDivElement>(null);
-        const boundaryRef = useRef<HTMLDivElement>(null);
-        const [isDropdownVisible, setIsDropdownVisible] = useState(false);
-
-        const handleAnchorClick = () => {
-            setIsDropdownVisible((prev) => !prev);
-        };
-
-        const mapItemsWithClick = (items: any[]) => {
-            return items.map((item) => ({
-                ...item,
-                onClick: () => {
-                    // Call the original onClick if it exists
-                    if (item.onClick) {
-                        item.onClick();
-                    }
-                    // Close the dropdown after an item is clicked
-                    setIsDropdownVisible(false);
-                },
-                // Recursively update subItems' onClick handlers
-                subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
-            }));
-        };
-
-        // Modify args to include updated items with the new onClick behavior
-        const modifiedArgs = {
-            ...args,
-            items: mapItemsWithClick(args.items),
-        };
-
-        return (
-            <div
-                ref={boundaryRef}
-                className="boundary"
-                style={{ padding: "20px", height: "300px", border: "2px solid black" }}
-            >
-                <div style={{ height: "400px" }}>
-                    <div
-                        ref={anchorRef}
-                        style={{
-                            backgroundColor: "lightblue",
-                            padding: "10px",
-                            display: "inline-block",
-                            cursor: "pointer",
-                        }}
-                        onClick={handleAnchorClick}
-                    >
-                        Anchor Element
-                    </div>
-                </div>
-                {isDropdownVisible && (
-                    <Dropdown
-                        {...modifiedArgs}
-                        setVisibility={(visible) => setIsDropdownVisible(visible)}
-                        anchorRef={anchorRef}
-                        boundaryRef={boundaryRef}
-                    />
-                )}
-            </div>
-        );
-    },
-    args: {
-        items: [
-            { label: "Option 1", onClick: (e) => console.log("Clicked Option 1") },
-            {
-                label: "Option 2",
-                onClick: (e) => console.log("Clicked Option 2"),
-                subItems: [
-                    { label: "Option 2 -> 1", onClick: (e) => console.log("Clicked Option 2 -> 1") },
-                    { label: "Option 2 -> 2", onClick: (e) => console.log("Clicked Option 2 -> 2") },
-                ],
-            },
-            {
-                label: "Option 3",
-                onClick: (e) => console.log("Clicked Option 3"),
-                subItems: [
-                    { label: "Option 3 -> 1", onClick: (e) => console.log("Clicked Option 3 -> 1") },
-                    { label: "Option 3 -> 2", onClick: (e) => console.log("Clicked Option 3 -> 2") },
-                    {
-                        label: "Option 3 -> 3",
-                        onClick: (e) => console.log("Clicked Option 3 -> 3"),
-                        subItems: [
-                            { label: "Option 3 -> 3 -> 1", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 1") },
-                            { label: "Option 3 -> 3 -> 2", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 2") },
-                            { label: "Option 3 -> 3 -> 3", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 3") },
-                            {
-                                label: "Option 3 -> 3 -> 4",
-                                onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4"),
-                                subItems: [
-                                    {
-                                        label: "Option 3 -> 3 -> 4 -> 1",
-                                        onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 1"),
-                                    },
-                                    {
-                                        label: "Option 3 -> 3 -> 4 -> 2",
-                                        onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 2"),
-                                    },
-                                    {
-                                        label: "Option 3 -> 3 -> 4 -> 3",
-                                        onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 3"),
-                                    },
-                                ],
-                            },
-                        ],
-                    },
-                ],
-            },
-            {
-                label: "Option 4",
-                onClick: (e) => console.log("Clicked Option 4"),
-                subItems: [
-                    { label: "Option 4 -> 1", onClick: (e) => console.log("Clicked Option 4 -> 1") },
-                    { label: "Option 4 -> 2", onClick: (e) => console.log("Clicked Option 4 -> 2") },
-                    { label: "Option 4 -> 3", onClick: (e) => console.log("Clicked Option 4 -> 3") },
-                    { label: "Option 4 -> 4", onClick: (e) => console.log("Clicked Option 4 -> 4") },
-                    { label: "Option 4 -> 5", onClick: (e) => console.log("Clicked Option 4 -> 5") },
-                    { label: "Option 4 -> 6", onClick: (e) => console.log("Clicked Option 4 -> 6") },
-                    { label: "Option 4 -> 7", onClick: (e) => console.log("Clicked Option 4 -> 7") },
-                ],
-            },
-        ],
-    },
-};
-
-export const CustomRender: Story = {
-    render: (args) => {
-        const anchorRef = useRef<HTMLDivElement>(null);
-        const boundaryRef = useRef<HTMLDivElement>(null);
-        const [isDropdownVisible, setIsDropdownVisible] = useState(false);
-
-        const handleAnchorClick = () => {
-            setIsDropdownVisible((prev) => !prev);
-        };
-
-        const mapItemsWithClick = (items: any[]) => {
-            return items.map((item) => ({
-                ...item,
-                onClick: () => {
-                    // Call the original onClick if it exists
-                    if (item.onClick) {
-                        item.onClick();
-                    }
-                    // Close the dropdown after an item is clicked
-                    setIsDropdownVisible(false);
-                },
-                // Recursively update subItems' onClick handlers
-                subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
-            }));
-        };
-
-        // Custom render function for menu items
-        const renderMenuItem = (item: any, props: any) => (
-            <div {...props}>
-                <strong>{item.label}</strong>
-                {item.subItems && <span style={{ marginLeft: "10px", color: "#888" }}>▶</span>}
-            </div>
-        );
-
-        // Custom render function for the entire menu
-        const renderMenu = (subMenu: JSX.Element) => <div>{subMenu}</div>;
-
-        // Modify args to include updated items with the new onClick behavior
-        const modifiedArgs = {
-            ...args,
-            items: mapItemsWithClick(args.items),
-        };
-
-        return (
-            <div
-                ref={boundaryRef}
-                className="boundary"
-                style={{ padding: "20px", height: "300px", border: "2px solid black" }}
-            >
-                <div style={{ height: "400px" }}>
-                    <div
-                        ref={anchorRef}
-                        style={{
-                            backgroundColor: "lightblue",
-                            padding: "10px",
-                            display: "inline-block",
-                            cursor: "pointer",
-                        }}
-                        onClick={handleAnchorClick}
-                    >
-                        Anchor Element
-                    </div>
-                </div>
-                {isDropdownVisible && (
-                    <Dropdown
-                        {...modifiedArgs}
-                        setVisibility={(visible) => setIsDropdownVisible(visible)}
-                        anchorRef={anchorRef}
-                        boundaryRef={boundaryRef}
-                        renderMenu={renderMenu}
-                        renderMenuItem={renderMenuItem}
-                    />
-                )}
-            </div>
-        );
-    },
-    args: {
-        items: [
-            { label: "Option 1", onClick: (e) => console.log("Clicked Option 1") },
-            {
-                label: "Option 2",
-                onClick: (e) => console.log("Clicked Option 2"),
-                subItems: [
-                    { label: "Option 2 -> 1", onClick: (e) => console.log("Clicked Option 2 -> 1") },
-                    { label: "Option 2 -> 2", onClick: (e) => console.log("Clicked Option 2 -> 2") },
-                ],
-            },
-            {
-                label: "Option 3",
-                onClick: (e) => console.log("Clicked Option 3"),
-                subItems: [
-                    { label: "Option 3 -> 1", onClick: (e) => console.log("Clicked Option 3 -> 1") },
-                    { label: "Option 3 -> 2", onClick: (e) => console.log("Clicked Option 3 -> 2") },
-                    {
-                        label: "Option 3 -> 3",
-                        onClick: (e) => console.log("Clicked Option 3 -> 3"),
-                        subItems: [
-                            { label: "Option 3 -> 3 -> 1", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 1") },
-                            { label: "Option 3 -> 3 -> 2", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 2") },
-                            { label: "Option 3 -> 3 -> 3", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 3") },
-                            {
-                                label: "Option 3 -> 3 -> 4",
-                                onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4"),
-                                subItems: [
-                                    {
-                                        label: "Option 3 -> 3 -> 4 -> 1",
-                                        onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 1"),
-                                    },
-                                    {
-                                        label: "Option 3 -> 3 -> 4 -> 2",
-                                        onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 2"),
-                                    },
-                                    {
-                                        label: "Option 3 -> 3 -> 4 -> 3",
-                                        onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 3"),
-                                    },
-                                ],
-                            },
-                        ],
-                    },
-                ],
-            },
-            {
-                label: "Option 4",
-                onClick: (e) => console.log("Clicked Option 4"),
-                subItems: [
-                    { label: "Option 4 -> 1", onClick: (e) => console.log("Clicked Option 4 -> 1") },
-                    { label: "Option 4 -> 2", onClick: (e) => console.log("Clicked Option 4 -> 2") },
-                    { label: "Option 4 -> 3", onClick: (e) => console.log("Clicked Option 4 -> 3") },
-                    { label: "Option 4 -> 4", onClick: (e) => console.log("Clicked Option 4 -> 4") },
-                    { label: "Option 4 -> 5", onClick: (e) => console.log("Clicked Option 4 -> 5") },
-                    { label: "Option 4 -> 6", onClick: (e) => console.log("Clicked Option 4 -> 6") },
-                    { label: "Option 4 -> 7", onClick: (e) => console.log("Clicked Option 4 -> 7") },
-                ],
-            },
-        ],
-    },
-};

frontend/app/element/dropdown.tsx

@@ -1,351 +0,0 @@
-import { useHeight } from "@/app/hook/useHeight";
-import { useWidth } from "@/app/hook/useWidth";
-import clsx from "clsx";
-import React, { memo, useEffect, useLayoutEffect, useRef, useState } from "react";
-import ReactDOM from "react-dom";
-import "./dropdown.less";
-
-type DropdownItem = {
-    label: string;
-    subItems?: DropdownItem[];
-    onClick?: (e) => void;
-};
-
-const SubMenu = memo(
-    ({
-        subItems,
-        parentKey,
-        subMenuPosition,
-        visibleSubMenus,
-        hoveredItems,
-        subMenuRefs,
-        handleMouseEnterItem,
-        handleOnClick,
-        renderMenu,
-        renderMenuItem,
-    }: {
-        subItems: DropdownItem[];
-        parentKey: string;
-        subMenuPosition: {
-            [key: string]: { top: number; left: number; label: string };
-        };
-        visibleSubMenus: { [key: string]: any };
-        hoveredItems: string[];
-        subMenuRefs: React.MutableRefObject<{ [key: string]: React.RefObject<HTMLDivElement> }>;
-        handleMouseEnterItem: (
-            event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-            parentKey: string | null,
-            index: number,
-            item: DropdownItem
-        ) => void;
-        handleOnClick: (e: React.MouseEvent<HTMLDivElement>, item: DropdownItem) => void;
-        renderMenu?: (subMenu: JSX.Element, props: any) => JSX.Element;
-        renderMenuItem?: (item: DropdownItem, props: any) => JSX.Element;
-    }) => {
-        subItems.forEach((_, idx) => {
-            const newKey = `${parentKey}-${idx}`;
-            if (!subMenuRefs.current[newKey]) {
-                subMenuRefs.current[newKey] = React.createRef<HTMLDivElement>();
-            }
-        });
-
-        const position = subMenuPosition[parentKey];
-        const isPositioned = position && position.top !== undefined && position.left !== undefined;
-
-        const subMenu = (
-            <div
-                className="dropdown sub-dropdown"
-                ref={subMenuRefs.current[parentKey]}
-                style={{
-                    top: position?.top || 0,
-                    left: position?.left || 0,
-                    position: "absolute",
-                    zIndex: 1000,
-                    visibility: visibleSubMenus[parentKey]?.visible && isPositioned ? "visible" : "hidden",
-                }}
-            >
-                {subItems.map((item, idx) => {
-                    const newKey = `${parentKey}-${idx}`;
-                    const isActive = hoveredItems.includes(newKey);
-
-                    const menuItemProps = {
-                        className: clsx("dropdown-item", { active: isActive }),
-                        onMouseEnter: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
-                            handleMouseEnterItem(event, parentKey, idx, item),
-                        onClick: (e: React.MouseEvent<HTMLDivElement>) => handleOnClick(e, item),
-                    };
-
-                    const renderedItem = renderMenuItem ? (
-                        renderMenuItem(item, menuItemProps) // Remove portal here
-                    ) : (
-                        <div key={newKey} {...menuItemProps}>
-                            {item.label}
-                            {item.subItems && <span className="arrow">▶</span>}
-                        </div>
-                    );
-
-                    return (
-                        <React.Fragment key={newKey}>
-                            {renderedItem}
-                            {visibleSubMenus[newKey]?.visible && item.subItems && (
-                                <SubMenu
-                                    subItems={item.subItems}
-                                    parentKey={newKey}
-                                    subMenuPosition={subMenuPosition}
-                                    visibleSubMenus={visibleSubMenus}
-                                    hoveredItems={hoveredItems}
-                                    handleMouseEnterItem={handleMouseEnterItem}
-                                    handleOnClick={handleOnClick}
-                                    subMenuRefs={subMenuRefs}
-                                    renderMenu={renderMenu}
-                                    renderMenuItem={renderMenuItem}
-                                />
-                            )}
-                        </React.Fragment>
-                    );
-                })}
-            </div>
-        );
-
-        return ReactDOM.createPortal(renderMenu ? renderMenu(subMenu, { parentKey }) : subMenu, document.body);
-    }
-);
-
-const Dropdown = memo(
-    ({
-        items,
-        anchorRef,
-        boundaryRef,
-        className,
-        setVisibility,
-        renderMenu,
-        renderMenuItem,
-    }: {
-        items: DropdownItem[];
-        anchorRef: React.RefObject<HTMLElement>;
-        boundaryRef?: React.RefObject<HTMLElement>;
-        className?: string;
-        setVisibility: (_: boolean) => void;
-        renderMenu?: (subMenu: JSX.Element, props: any) => JSX.Element;
-        renderMenuItem?: (item: DropdownItem, props: any) => JSX.Element;
-    }) => {
-        const [visibleSubMenus, setVisibleSubMenus] = useState<{ [key: string]: any }>({});
-        const [hoveredItems, setHoveredItems] = useState<string[]>([]);
-        const [subMenuPosition, setSubMenuPosition] = useState<{
-            [key: string]: { top: number; left: number; label: string };
-        }>({});
-        const [position, setPosition] = useState({ top: 0, left: 0 });
-        const dropdownRef = useRef<HTMLDivElement>(null);
-        const subMenuRefs = useRef<{ [key: string]: React.RefObject<HTMLDivElement> }>({});
-
-        const effectiveBoundaryRef: React.RefObject<HTMLElement> = boundaryRef ?? { current: document.documentElement };
-        const width = useWidth(effectiveBoundaryRef);
-        const height = useHeight(effectiveBoundaryRef);
-
-        items.forEach((_, idx) => {
-            const key = `${idx}`;
-            if (!subMenuRefs.current[key]) {
-                subMenuRefs.current[key] = React.createRef<HTMLDivElement>();
-            }
-        });
-
-        useLayoutEffect(() => {
-            if (anchorRef.current && dropdownRef.current) {
-                const anchorRect = anchorRef.current.getBoundingClientRect();
-                const scrollTop = window.scrollY || document.documentElement.scrollTop;
-                const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
-
-                let top = anchorRect.bottom + scrollTop;
-                let left = anchorRect.left + scrollLeft;
-
-                const boundaryRect = effectiveBoundaryRef.current?.getBoundingClientRect() || {
-                    top: 0,
-                    left: 0,
-                    bottom: window.innerHeight,
-                    right: window.innerWidth,
-                };
-
-                if (left + dropdownRef.current.offsetWidth > boundaryRect.right + scrollLeft) {
-                    left = boundaryRect.right + scrollLeft - dropdownRef.current.offsetWidth;
-                }
-
-                if (top + dropdownRef.current.offsetHeight > boundaryRect.bottom + scrollTop) {
-                    top = boundaryRect.bottom + scrollTop - dropdownRef.current.offsetHeight;
-                }
-
-                setPosition({ top, left });
-            }
-        }, [width, height]);
-
-        useEffect(() => {
-            const handleClickOutside = (event: MouseEvent) => {
-                const isClickInsideDropdown = dropdownRef.current && dropdownRef.current.contains(event.target as Node);
-                const isClickInsideAnchor = anchorRef.current && anchorRef.current.contains(event.target as Node);
-
-                const isClickInsideSubMenus = Object.keys(subMenuRefs.current).some(
-                    (key) =>
-                        subMenuRefs.current[key]?.current &&
-                        subMenuRefs.current[key]?.current.contains(event.target as Node)
-                );
-
-                if (!isClickInsideDropdown && !isClickInsideAnchor && !isClickInsideSubMenus) {
-                    setVisibility(false);
-                }
-            };
-            document.addEventListener("mousedown", handleClickOutside);
-            return () => {
-                document.removeEventListener("mousedown", handleClickOutside);
-            };
-        }, [dropdownRef, anchorRef, subMenuRefs]);
-
-        // Position submenus based on available space and scroll position
-        const handleSubMenuPosition = (
-            key: string,
-            itemRect: DOMRect,
-            parentRef: React.RefObject<HTMLDivElement>,
-            label: string
-        ) => {
-            setTimeout(() => {
-                const subMenuRef = subMenuRefs.current[key]?.current;
-                if (!subMenuRef) return;
-
-                const scrollTop = window.scrollY || document.documentElement.scrollTop;
-                const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
-
-                const boundaryRect = effectiveBoundaryRef.current?.getBoundingClientRect() || {
-                    top: 0,
-                    left: 0,
-                    bottom: window.innerHeight,
-                    right: window.innerWidth,
-                };
-
-                const submenuWidth = subMenuRef.offsetWidth;
-                const submenuHeight = subMenuRef.offsetHeight;
-
-                let left = itemRect.right + scrollLeft - 2; // Adjust for horizontal scroll
-                let top = itemRect.top + scrollTop; // Adjust for vertical scroll
-
-                // Adjust to the left if overflowing the right boundary
-                if (left + submenuWidth > window.innerWidth + scrollLeft) {
-                    left = itemRect.left + scrollLeft - submenuWidth;
-                }
-
-                // Adjust if the submenu overflows the bottom boundary
-                if (top + submenuHeight > window.innerHeight + scrollTop) {
-                    top = window.innerHeight + scrollTop - submenuHeight - 10;
-                }
-
-                setSubMenuPosition((prev) => ({
-                    ...prev,
-                    [key]: { top, left, label },
-                }));
-            }, 0);
-        };
-
-        const handleMouseEnterItem = (
-            event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-            parentKey: string | null,
-            index: number,
-            item: DropdownItem
-        ) => {
-            event.stopPropagation();
-
-            const key = parentKey ? `${parentKey}-${index}` : `${index}`;
-
-            setVisibleSubMenus((prev) => {
-                const updatedState = { ...prev };
-                updatedState[key] = { visible: true, label: item.label };
-
-                const ancestors = key.split("-").reduce((acc, part, idx) => {
-                    if (idx === 0) return [part];
-                    return [...acc, `${acc[idx - 1]}-${part}`];
-                }, [] as string[]);
-
-                ancestors.forEach((ancestorKey) => {
-                    if (updatedState[ancestorKey]) {
-                        updatedState[ancestorKey].visible = true;
-                    }
-                });
-
-                for (const pkey in updatedState) {
-                    if (!ancestors.includes(pkey) && pkey !== key) {
-                        updatedState[pkey].visible = false;
-                    }
-                }
-
-                return updatedState;
-            });
-
-            const newHoveredItems = key.split("-").reduce((acc, part, idx) => {
-                if (idx === 0) return [part];
-                return [...acc, `${acc[idx - 1]}-${part}`];
-            }, [] as string[]);
-
-            setHoveredItems(newHoveredItems);
-
-            const itemRect = event.currentTarget.getBoundingClientRect();
-            handleSubMenuPosition(key, itemRect, dropdownRef, item.label);
-        };
-
-        const handleOnClick = (e: React.MouseEvent<HTMLDivElement>, item: DropdownItem) => {
-            e.stopPropagation();
-            item.onClick && item.onClick(e);
-        };
-
-        const dropdownMenu = (
-            <div
-                className={clsx("dropdown", className)}
-                ref={dropdownRef}
-                style={{ top: position.top, left: position.left }}
-            >
-                {items.map((item, index) => {
-                    const key = `${index}`;
-                    const isActive = hoveredItems.includes(key);
-
-                    const menuItemProps = {
-                        className: clsx("dropdown-item", { active: isActive }),
-                        onMouseEnter: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
-                            handleMouseEnterItem(event, null, index, item),
-                        onClick: (e: React.MouseEvent<HTMLDivElement>) => handleOnClick(e, item),
-                    };
-
-                    const renderedItem = renderMenuItem ? (
-                        renderMenuItem(item, menuItemProps) // No portal here
-                    ) : (
-                        <div key={key} {...menuItemProps}>
-                            {item.label}
-                            {item.subItems && <span className="arrow">▶</span>}
-                        </div>
-                    );
-
-                    return (
-                        <React.Fragment key={key}>
-                            {renderedItem}
-                            {visibleSubMenus[key]?.visible && item.subItems && (
-                                <SubMenu
-                                    subItems={item.subItems}
-                                    parentKey={key}
-                                    subMenuPosition={subMenuPosition}
-                                    visibleSubMenus={visibleSubMenus}
-                                    hoveredItems={hoveredItems}
-                                    handleMouseEnterItem={handleMouseEnterItem}
-                                    handleOnClick={handleOnClick}
-                                    subMenuRefs={subMenuRefs}
-                                    renderMenu={renderMenu}
-                                    renderMenuItem={renderMenuItem}
-                                />
-                            )}
-                        </React.Fragment>
-                    );
-                })}
-            </div>
-        );
-
-        return ReactDOM.createPortal(
-            renderMenu ? renderMenu(dropdownMenu, { parentKey: null }) : dropdownMenu,
-            document.body
-        );
-    }
-);
-
-export { Dropdown };

frontend/app/element/quicktips.tsx

@@ -144,6 +144,17 @@ const QuickTips = () => {
                         </div>
                     </div>
                 </div>
+
+                <div className="tip-section-header">Need More Help?</div>
+                <div className="tip">
+                    <div>
+                        <div>
+                            <a target="_blank" href="https://discord.gg/XfvZ334gwU" rel="noopener">
+                                Join Our Discord
+                            </a>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     );

frontend/app/modals/tos.tsx

@@ -12,8 +12,6 @@ import { FlexiModal } from "./modal";
 import { QuickTips } from "@/app/element/quicktips";
 import { atoms } from "@/app/store/global";
 import { modalsModel } from "@/app/store/modalmodel";
-import { RpcApi } from "@/app/store/wshclientapi";
-import { WindowRpcClient } from "@/app/store/wshrpcutil";
 import { atom, PrimitiveAtom, useAtom, useAtomValue, useSetAtom } from "jotai";
 import "./tos.less";
 
@@ -34,7 +32,7 @@ const ModalPage1 = () => {
     };
 
     const setTelemetry = (value: boolean) => {
-        RpcApi.SetConfigCommand(WindowRpcClient, { "telemetry:enabled": value })
+        services.ClientService.TelemetryUpdate(value)
             .then(() => {
                 setTelemetryEnabled(value);
             })

frontend/app/store/services.ts

@@ -47,6 +47,9 @@ class ClientServiceType {
     MakeWindow(): Promise<WaveWindow> {
         return WOS.callBackendService("client", "MakeWindow", Array.from(arguments))
     }
+    TelemetryUpdate(arg2: boolean): Promise<void> {
+        return WOS.callBackendService("client", "TelemetryUpdate", Array.from(arguments))
+    }
 }
 
 export const ClientService = new ClientServiceType();

frontend/app/tab/tabbar.tsx

@@ -11,7 +11,7 @@ import React, { createRef, useCallback, useEffect, useRef, useState } from "reac
 import { debounce } from "throttle-debounce";
 import { Tab } from "./tab";
 import "./tabbar.less";
-import { UpdateStatusBanner } from "./updatestatus";
+import { UpdateStatusBanner } from "./updatebanner";
 
 const TAB_DEFAULT_WIDTH = 130;
 const TAB_MIN_WIDTH = 100;

frontend/app/tab/updatebanner.tsx

@@ -0,0 +1,71 @@
+import { Button } from "@/element/button";
+import { atoms, getApi } from "@/store/global";
+import { useAtomValue } from "jotai";
+import { memo, useEffect, useState } from "react";
+import "./updatebanner.less";
+
+const UpdateStatusBannerComponent = ({ buttonRef }: { buttonRef: React.RefObject<HTMLButtonElement> }) => {
+    const appUpdateStatus = useAtomValue(atoms.updaterStatusAtom);
+    const [updateStatusMessage, setUpdateStatusMessage] = useState<string>();
+    const [dismissBannerTimeout, setDismissBannerTimeout] = useState<NodeJS.Timeout>();
+
+    useEffect(() => {
+        let message: string;
+        let dismissBanner = false;
+        switch (appUpdateStatus) {
+            case "ready":
+                message = "Update Available";
+                break;
+            case "downloading":
+                message = "Downloading Update";
+                break;
+            case "installing":
+                message = "Installing Update";
+                break;
+            case "error":
+                message = "Updater Error: Try Checking Again";
+                dismissBanner = true;
+                break;
+            default:
+                break;
+        }
+        setUpdateStatusMessage(message);
+
+        // Clear any existing timeout
+        if (dismissBannerTimeout) {
+            clearTimeout(dismissBannerTimeout);
+        }
+
+        // If we want to dismiss the banner, set the new timeout, otherwise clear the state
+        if (dismissBanner) {
+            setDismissBannerTimeout(
+                setTimeout(() => {
+                    setUpdateStatusMessage(null);
+                    setDismissBannerTimeout(null);
+                }, 10000)
+            );
+        } else {
+            setDismissBannerTimeout(null);
+        }
+    }, [appUpdateStatus]);
+
+    function onClick() {
+        getApi().installAppUpdate();
+    }
+
+    if (updateStatusMessage) {
+        return (
+            <Button
+                ref={buttonRef}
+                className="update-available-button"
+                title={appUpdateStatus === "ready" ? "Click to Install Update" : updateStatusMessage}
+                onClick={onClick}
+                disabled={appUpdateStatus !== "ready"}
+            >
+                {updateStatusMessage}
+            </Button>
+        );
+    }
+};
+
+export const UpdateStatusBanner = memo(UpdateStatusBannerComponent) as typeof UpdateStatusBannerComponent;

frontend/app/tab/updatestatus.tsx

@@ -1,49 +0,0 @@
-import { Button } from "@/element/button";
-import { atoms, getApi } from "@/store/global";
-import { useAtomValue } from "jotai";
-import { memo } from "react";
-import "./updatestatus.less";
-
-const UpdateStatusBannerComponent = ({ buttonRef }: { buttonRef: React.RefObject<HTMLButtonElement> }) => {
-    const appUpdateStatus = useAtomValue(atoms.updaterStatusAtom);
-    function onClick() {
-        getApi().installAppUpdate();
-    }
-
-    let buttonText: string;
-    switch (appUpdateStatus) {
-        case "ready":
-            buttonText = "Update Available";
-            break;
-        case "checking":
-            buttonText = "Checking for Updates";
-            break;
-        case "downloading":
-            buttonText = "Downloading Update";
-            break;
-        case "installing":
-            buttonText = "Installing Update";
-            break;
-        case "error":
-            buttonText = "Updater Error: Try Checking Again";
-            break;
-        default:
-            break;
-    }
-
-    if (buttonText) {
-        return (
-            <Button
-                ref={buttonRef}
-                className="update-available-button"
-                title={appUpdateStatus === "ready" ? "Click to Install Update" : buttonText}
-                onClick={onClick}
-                disabled={appUpdateStatus !== "ready"}
-            >
-                {buttonText}
-            </Button>
-        );
-    }
-};
-
-export const UpdateStatusBanner = memo(UpdateStatusBannerComponent) as typeof UpdateStatusBannerComponent;