improve keybinding docs. platform switcher, styling, fonts, etc (#1227)

docs/docs/index.mdx

@@ -12,9 +12,13 @@ import { Card, CardGroup } from "@site/src/components/card.tsx";
 
 Wave is an [open-source](https://github.com/wavetermdev/waveterm) terminal that adds the ability to launch graphical widgets, controlled and integrated directly with the CLI. We support MacOS, Linux, and Windows ([Downloads](https://waveterm.dev/download)).
 
+:::info
+
 **These docs are incomplete**, but we're working on them. If you have a question, please feel free to ask us in [Discord](https://discord.gg/XfvZ334gwU). If you'd like to file a bug/enchancement, please
 use [Github Issues](https://github.com/wavetermdev/waveterm/issues). These docs are also open-source and we do accept PRs for docs [here](https://github.com/wavetermdev/waveterm/blob/main/docs). You can click the "Edit this page" link at the bottom of the page to get taken directly to the editor page for that document in GitHub.
 
+:::
+
 References:
 
 - [Widgets](./widgets)
@@ -40,10 +44,10 @@ References:
 
 ## Links
 
-- Homepage -- https://waveterm.dev
-- Download -- https://waveterm.dev/download
-- Discord -- https://discord.gg/XfvZ334gwU
-- GitHub -- https://github.com/wavetermdev/waveterm/
+- **Homepage** https://waveterm.dev
+- **Download** https://waveterm.dev/download
+- **Discord** https://discord.gg/XfvZ334gwU
+- **GitHub** https://github.com/wavetermdev/waveterm/
 
 ## Looking for WaveLegacy documentation?
 

docs/docs/keybindings.mdx

@@ -4,52 +4,62 @@ id: "keybindings"
 title: "Key Bindings"
 ---
 
-Here's the set of default keybindings available in Wave.  It is split into sections.
-Some keybindings are always active.  Others are only active for certain types of blocks.
+import { Kbd } from "@site/src/components/kbd.tsx";
+import { PlatformProvider, PlatformToggleButton } from "@site/src/components/platformcontext.tsx";
 
-Note that these are the MacOS keybindings (they use "Cmd").  For Windows and Linux
+<PlatformProvider>
+
+Here's the set of default keybindings available in Wave. It is split into sections.
+Some keybindings are always active. Others are only active for certain types of blocks.
+
+Note that these are the MacOS keybindings (they use "Cmd"). For Windows and Linux,
 replace "Cmd" with "Alt" (note that "Ctrl" is "Ctrl" on both Mac, Windows, and Linux).
 
 ## Global Keybindings
 
-| Key | Function |
-|-----|----------|
-| Cmd:t | Open a new tab |
-| Cmd:n | Open a new terminal block (defaults to the same connection and working directory) |
-| Cmd:w | Close the current block |
-| Cmd:m | Magnify / Un-Magnify the current block |
-| Cmd:g | Open the "connection" switcher |
-| Cmd:i | Refocus the current block (useful if the block has lost input focus) |
-| Ctrl:Shift | Show block numbers |
-| Ctrl:Shift:[number] | Switch to block number |
-| Ctrl:Shift:Arrows | Move left, right, up, down between blocks |
-| Cmd:[number] | Switch to tab number |
-| Cmd:[ | Switch tab left |
-| Cmd:] | Siwtch tab right |
-| Cmd:Shift:r | Refresh the UI |
+<PlatformToggleButton />
+<div style={{ marginBottom: 20 }}></div>
+
+| Key                          | Function                                                                          |
+| ---------------------------- | --------------------------------------------------------------------------------- |
+| <Kbd k="Cmd:t"/>             | Open a new tab                                                                    |
+| <Kbd k="Cmd:n"/>             | Open a new terminal block (defaults to the same connection and working directory) |
+| <Kbd k="Cmd:w"/>             | Close the current block                                                           |
+| <Kbd k="Cmd:m"/>             | Magnify / Un-Magnify the current block                                            |
+| <Kbd k="Cmd:g"/>             | Open the "connection" switcher                                                    |
+| <Kbd k="Cmd:i"/>             | Refocus the current block (useful if the block has lost input focus)              |
+| <Kbd k="Ctrl:Shift"/>        | Show block numbers                                                                |
+| <Kbd k="Ctrl:Shift:1-9"/>    | Switch to block number                                                            |
+| <Kbd k="Ctrl:Shift:Arrows"/> | Move left, right, up, down between blocks                                         |
+| <Kbd k="Cmd:1-9"/>           | Switch to tab number                                                              |
+| <Kbd k="Cmd:["/>             | Switch tab left                                                                   |
+| <Kbd k="Cmd:]"/>             | Switch tab right                                                                  |
+| <Kbd k="Cmd:Shift:r"/>       | Refresh the UI                                                                    |
 
 ## File Preview Keybindings
 
-| Key | Function |
-|-----|----------|
-| [any character] | any regular character (e.g. "a", "b") will filter the file list |
-| Escape | will clear the filter |
-| Up/Down Arrow | change file selection up/down |
-| Enter | Open the currently selected file/directory |
-| Cmd:ArrowUp | move "up" a directory (parent directory) |
-| Cmd:ArrowLeft | back, move to the previously selected file/directory |
-| Cmd:ArrowRight | forward (opposite of back) |
-| Cmd:o | Open a new file (accepts relative paths to the current directory) |
-| Cmd:s | When file editor is open, save file |
-| Cmd:e | For files that can be previewed or edited (markdown, CSVs), switches between preview and edit mode |
-| Cmd:r | When file editor is open, revert changes |
+| Key                                       | Function                                                                                           |
+| ----------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| <Kbd k="[text]"/>                         | Any regular character (e.g. "a", "b") will filter the file list                                    |
+| <Kbd k="Escape"/>                         | Clears the filter                                                                                  |
+| <Kbd k="ArrowUp"/> / <Kbd k="ArrowDown"/> | Change file selection up/down                                                                      |
+| <Kbd k="Enter"/>                          | Open the currently selected file/directory                                                         |
+| <Kbd k="Cmd:ArrowUp"/>                    | Move "up" a directory (parent directory)                                                           |
+| <Kbd k="Cmd:ArrowLeft"/>                  | Back, move to the previously selected file/directory                                               |
+| <Kbd k="Cmd:ArrowRight"/>                 | Forward (opposite of back)                                                                         |
+| <Kbd k="Cmd:o"/>                          | Open a new file (accepts relative paths to the current directory)                                  |
+| <Kbd k="Cmd:s"/>                          | When file editor is open, save file                                                                |
+| <Kbd k="Cmd:e"/>                          | For files that can be previewed or edited (markdown, CSVs), switches between preview and edit mode |
+| <Kbd k="Cmd:r"/>                          | When file editor is open, revert changes                                                           |
 
 ## Web Keybindings
 
-| Key | Function |
-|-----|----------|
-| Cmd:l | focus the URL input bar |
-| Escape | when the URL input bar is focused, will focus the web content |
-| Cmd:r | reload webpage |
-| Cmd:ArrowLeft | back |
-| Cmd:ArrowRight | forward |
+| Key                       | Function                                                      |
+| ------------------------- | ------------------------------------------------------------- |
+| <Kbd k="Cmd:l"/>          | Focus the URL input bar                                       |
+| <Kbd k="Escape"/>         | When the URL input bar is focused, will focus the web content |
+| <Kbd k="Cmd:r"/>          | Reload webpage                                                |
+| <Kbd k="Cmd:ArrowLeft"/>  | Back                                                          |
+| <Kbd k="Cmd:ArrowRight"/> | Forward                                                       |
+
+</PlatformProvider>

docs/src/components/kbd.css

@@ -0,0 +1,46 @@
+@font-face {
+    font-family: "JetBrains Mono";
+    src: url("/static/fonts/JetBrainsMono-Regular.woff2") format("woff2");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "JetBrains Mono";
+    src: url("/static/fonts/JetBrainsMono-Bold.woff2") format("woff2");
+    font-weight: bold;
+    font-style: normal;
+}
+
+.kbd-group {
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+}
+
+kbd {
+    background-color: #f4f4f4;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    padding: 2px 6px;
+    font-size: 0.8em; /* Base font size */
+    font-family: "JetBrains Mono", monospace;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    height: 24px; /* Consistent height */
+    line-height: 24px; /* Consistent line height */
+
+    .bold {
+        font-weight: bold;
+    }
+
+    .spaced {
+        letter-spacing: 0.1em;
+    }
+}
+
+.kbd-group kbd.symbol {
+    font-size: 0.8em; /* Slightly larger font size for symbols */
+    line-height: 24px; /* Same line height as base to keep alignment */
+}

docs/src/components/kbd.tsx

@@ -0,0 +1,59 @@
+import { useContext } from "react";
+import "./kbd.css";
+import type { Platform } from "./platformcontext";
+import { PlatformContext } from "./platformcontext";
+
+function convertKey(platform: Platform, key: string): [any, string, boolean] {
+    if (key == "Arrows") {
+        return [<span className="spaced">↑→↓←</span>, "Arrow Keys", true];
+    }
+    if (key == "ArrowUp") {
+        return ["↑", "Arrow Up", true];
+    }
+    if (key == "ArrowRight") {
+        return ["→", "Arrow Right", true];
+    }
+    if (key == "ArrowDown") {
+        return ["↓", "Arrow Down", true];
+    }
+    if (key == "ArrowLeft") {
+        return ["←", "Arrow Left", true];
+    }
+    if (key == "Cmd") {
+        if (platform === "mac") {
+            return ["⌘", "Command", true];
+        } else {
+            return ["Alt", "Alt", false];
+        }
+    }
+    if (key == "Ctrl") {
+        return ["⌃", "Control", true];
+    }
+    if (key == "Shift") {
+        return ["⇧", "Shift", true];
+    }
+    if (key == "Escape") {
+        return ["Esc", null, false];
+    }
+    return [key, null, false];
+}
+
+// Custom KBD component
+export const Kbd = ({ k }) => {
+    const { platform } = useContext(PlatformContext);
+    const keys = k.split(":");
+    const keyElems = keys.map((key, i) => {
+        const [displayKey, title, symbol] = convertKey(platform, key);
+        return (
+            <kbd key={i} title={title} className={symbol ? "symbol" : null}>
+                {displayKey}
+            </kbd>
+        );
+    });
+    return <div className="kbd-group">{keyElems}</div>;
+
+    // const { platform } = useContext(PlatformContext);
+    // const keyLabel = platform === "mac" && k === "Cmd" ? "Cmd" : k === "Cmd" ? "Alt" : k;
+
+    // return <kbd>{k}</kbd>;
+};

docs/src/components/platformcontext.css

@@ -0,0 +1,30 @@
+.pill-toggle {
+    display: inline-flex;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    overflow: hidden;
+    background-color: #f1f1f5;
+}
+
+.pill-option {
+    padding: 8px 16px;
+    font-size: 0.9em;
+    font-weight: 500;
+    color: #555;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    transition:
+        background-color 0.2s ease,
+        color 0.2s ease;
+    outline: none;
+}
+
+.pill-option.active {
+    background-color: #0073e6; /* Highlight color for active option */
+    color: #fff; /* White text on active side */
+}
+
+.pill-option:not(.active):hover {
+    background-color: #e0e0e0; /* Slight hover effect on inactive side */
+}

docs/src/components/platformcontext.tsx

@@ -0,0 +1,61 @@
+import { createContext, ReactNode, useContext, useState } from "react";
+
+import "./platformcontext.css";
+
+export type Platform = "mac" | "linux";
+
+interface PlatformContextProps {
+    platform: Platform;
+    togglePlatform: () => void;
+}
+
+export const PlatformContext = createContext<PlatformContextProps | undefined>(undefined);
+
+const detectPlatform = (): Platform => {
+    const savedPlatform = localStorage.getItem("platform") as Platform | null;
+    if (savedPlatform && (savedPlatform === "mac" || savedPlatform === "linux")) {
+        return savedPlatform;
+    }
+    return /Mac|iPhone|iPad|iPod/.test(navigator.userAgent) ? "mac" : "linux";
+};
+
+export const PlatformProvider = ({ children }: { children: ReactNode }) => {
+    const [platform, setPlatform] = useState<Platform>(detectPlatform());
+
+    const togglePlatform = () => {
+        const newPlatform = platform === "mac" ? "linux" : "mac";
+        setPlatform(newPlatform);
+        localStorage.setItem("platform", newPlatform); // Store in localStorage
+    };
+
+    return <PlatformContext.Provider value={{ platform, togglePlatform }}>{children}</PlatformContext.Provider>;
+};
+
+export const usePlatform = (): PlatformContextProps => {
+    const context = useContext(PlatformContext);
+    if (!context) {
+        throw new Error("usePlatform must be used within a PlatformProvider");
+    }
+    return context;
+};
+
+export const PlatformToggleButton: React.FC = () => {
+    const { platform, togglePlatform } = usePlatform();
+
+    return (
+        <div className="pill-toggle">
+            <button
+                className={`pill-option ${platform === "mac" ? "active" : ""}`}
+                onClick={() => platform !== "mac" && togglePlatform()}
+            >
+                MacOS
+            </button>
+            <button
+                className={`pill-option ${platform === "linux" ? "active" : ""}`}
+                onClick={() => platform !== "linux" && togglePlatform()}
+            >
+                Linux/Windows
+            </button>
+        </div>
+    );
+};