Added KeyboardShortcut component for consistent key display (#190)

* Updated user manual and themes marketplace documentation

* Added KeyboardShortcut component for consistent key display

* Removed unnecessary state for isMac

Author: list-jonas

components/KeyboardShortcut.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+
+interface KeyboardShortcutProps {
+  shortcut: string;
+  macosShortcut?: string;
+  className?: string;
+}
+
+const KeyboardShortcut: React.FC<KeyboardShortcutProps> = ({
+  shortcut,
+  macosShortcut,
+  className,
+}) => {
+  const [displayShortcut, setDisplayShortcut] = useState(shortcut);
+
+  useEffect(() => {
+    // OS detection should run only on the client-side
+    const isMacUser = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+
+    if (isMacUser) {
+      if (macosShortcut) {
+        setDisplayShortcut(macosShortcut);
+      } else {
+        // Convert common Windows/Linux keys to macOS equivalents
+        let convertedShortcut = shortcut;
+        convertedShortcut = convertedShortcut.replace(/Ctrl\s*\+\s*/gi, "⌘ + ");
+        convertedShortcut = convertedShortcut.replace(/Alt\s*\+\s*/gi, "⌥ + ");
+        convertedShortcut = convertedShortcut.replace(/Cmd\s*\+\s*/gi, "⌘ + "); // In case Cmd was used in the base shortcut
+        convertedShortcut = convertedShortcut.replace(
+          /Option\s*\+\s*/gi,
+          "⌥ + "
+        ); // In case Option was used
+        // Replace individual keys if not part of a combo already handled
+        convertedShortcut = convertedShortcut.replace(/(?<!⌘ )Ctrl/gi, "⌘");
+        convertedShortcut = convertedShortcut.replace(/(?<!⌥ )Alt/gi, "⌥");
+        setDisplayShortcut(convertedShortcut);
+      }
+    } else {
+      // For non-Mac users, display the original shortcut or Windows/Linux specific if ever needed
+      setDisplayShortcut(shortcut);
+    }
+  }, [shortcut, macosShortcut]);
+
+  const keys = displayShortcut.split(/\s*\+\s*/);
+
+  return (
+    <span className={`inline-flex items-center ${className || ""}`}>
+      {keys.map((key, index) => (
+        <React.Fragment key={index}>
+          <kbd className="px-1 py-0.5 text-xs font-semibold text-fd-foreground bg-fd-card border border-fd-border rounded-sm">
+            {key.toLowerCase() === "shift" ? "⇧" : key}
+          </kbd>
+          {index < keys.length - 1 && <span className="mx-1">+</span>}
+        </React.Fragment>
+      ))}
+    </span>
+  );
+};
+
+export default KeyboardShortcut;

content/docs/contribute/docs/editing-with-vscode.mdx

@@ -2,6 +2,7 @@
 title: Editing with VS Code
 description: How to use Visual Studio Code to contribute to the Zen Browser documentation.
 ---
+import KeyboardShortcut from '@components/KeyboardShortcut';
 
 Visual Studio Code (VS Code) is a popular and powerful code editor that works well for editing Zen Browser documentation, especially with the right extensions.
 
@@ -27,7 +28,7 @@ To get the best experience editing `.mdx` files in VS Code, we recommend install
 ### Installation
 
 1.  Open VS Code.
-2.  Go to the Extensions view by clicking the Extensions icon in the Activity Bar on the side of the window or by pressing `Ctrl+Shift+X` (Windows/Linux) or `Cmd+Shift+X` (macOS).
+2.  Go to the Extensions view by clicking the Extensions icon in the Activity Bar on the side of the window or by pressing <KeyboardShortcut shortcut="Ctrl + Shift + X" />.
 3.  Search for `mdx`.
 4.  Click **Install** on the MDX extension by unifiedjs.
 

content/docs/faq.mdx

@@ -2,7 +2,7 @@
 title: FAQ
 icon: CircleHelp
 ---
-
+import KeyboardShortcut from '@components/KeyboardShortcut';
 import { Callout } from 'fumadocs-ui/components/callout';
 import { InlineTOC } from 'fumadocs-ui/components/inline-toc';
 
@@ -70,7 +70,7 @@ Your support helps the team maintain and enhance Zen Browser for everyone!
   Use shortcuts to perform Split View actions faster!
 </Callout>
 
-1. Select multiple tabs by left-clicking them while holding the `Ctrl` key, or left-click 2 tabs while holding the `Shift` key to select all tabs in between
+1. Select multiple tabs by left-clicking them while holding the <KeyboardShortcut shortcut="Ctrl" /> key, or left-click 2 tabs while holding the <KeyboardShortcut shortcut="Shift" /> key to select all tabs in between
 2. Right click a tab, and select `Split x Tabs`
 3. Change the view mode by pressing the `[|]` button in the top address bar
 

content/docs/guides/live-editing.mdx

@@ -2,6 +2,7 @@
 title: Live Editing Zen Theme
 description: Learn how to live edit the appearance of Zen Browser by editing the userChrome.css file.
 ---
+import KeyboardShortcut from '@components/KeyboardShortcut';
 
 import { Callout } from 'fumadocs-ui/components/callout';
 
@@ -34,7 +35,7 @@ This Guide will help you customize the appearance of Zen Browser by live editing
   3. Search for `devtools.chrome.enabled` and toggle it to `true`.
 </Callout>
 
-1. In Zen Browser, press `Ctrl + Shift + Alt + I` to open the Developer Tools.
+1. In Zen Browser, press <KeyboardShortcut shortcut="Ctrl + Shift + Alt + I" /> to open the Developer Tools.
 2. Navigate to the **Style Editor** tab.
 3. In the filter/search bar, type `userChrome` to locate the `userChrome.css` file you created earlier.
 
@@ -52,7 +53,7 @@ This Guide will help you customize the appearance of Zen Browser by live editing
 2. You can start editing the file directly within the Style Editor.
    ![inspect button](/assets/live-editing/inspect.png)
    - **Note:** You can use the **Inspect** button to hover over and select elements on the page. This allows you to learn about the `id`, `class`, or other attributes of elements, which you can then target in your `userChrome.css` file.
-3. To apply your changes, save the file by clicking **Save** or by pressing `Ctrl + S`.
+3. To apply your changes, save the file by clicking **Save** or by pressing <KeyboardShortcut shortcut="Ctrl + S" />.
 
 Any changes you make to the `userChrome.css` file will be applied immediately to Zen Browser.
 Use this file to customize various UI elements, such as colors, fonts, and the layout.

content/docs/themes-store/themes-marketplace-preferences.mdx

@@ -244,7 +244,7 @@ You can also have negative conditions
 
 <Callout type="warn" title="Attention">
   `property` fields defined in `preferences.json` using the `"dropdown"` type will have one key difference when used in your mod's CSS: <strong>dots (`.`) in the `property` name are replaced with hyphens (`-`)</strong>.
-  <br/><br/>
+
   E.g. `mod.mymod.background_color` becomes `mod-mymod-background_color` in the CSS file.
   This transformation ensures that the property can be used as an attribute selector or inside a media query.
 </Callout>
@@ -358,7 +358,7 @@ String preferences can be detected in your CSS using the `var(--property)` opera
 
 <Callout type="warn" title="Attention">
   `property` fields defined in `preferences.json` using the `"string"` type will have one key difference when used in your mod's CSS: <strong>dots (`.`) in the `property` name are replaced with hyphens (`-`)</strong>.
-  <br/><br/>
+
   E.g. `mod.mymod.background_color` becomes `mod-mymod-background_color` in the CSS file.
   This transformation ensures that the property can be used as an attribute selector or inside a media query.
 </Callout>

content/docs/user-manual/bookmarks.mdx

@@ -3,6 +3,7 @@ title: Bookmarks
 description: Managing bookmarks in Zen
 ---
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import KeyboardShortcut from '@components/KeyboardShortcut';
 
 Zen, as a fork of Firefox, inherits its webpage bookmarking system primarily from Firefox itself, with some additional Zen enhancements. Zen offers two vertical tab layouts: **Single toolbar layout**, which integrates a compact address bar into the vertical tabs toolbar, and **Multiple toolbars layout**, featuring a traditional, full-size address bar in a separate horizontal toolbar. This guide covers the basics of creating and managing bookmarks, tailored to your chosen Zen layout.
 
@@ -29,7 +30,7 @@ To bookmark a page, find and click on the bookmark icon in the address bar. A po
 
 
 <Callout type="info" title="Tips:">
-    While you could use your mouse to click the bookmark icon, we recommend using the keyboard shortcut `Ctrl/Cmd + D` for bookmarking, especially in **Single toolbar layout**.
+    While you could use your mouse to click the bookmark icon, we recommend using the keyboard shortcut <KeyboardShortcut shortcut="Ctrl + D" /> for bookmarking, especially in **Single toolbar layout**.
 </Callout>
 
 Alternatively, you can bookmark a single tab by right-clicking it and selecting `"Bookmark Tab..."` from the context menu, which opens a detailed bookmarking dialog with options for *tagging* and *keywords*. 
@@ -47,7 +48,7 @@ You can find your recently added bookmarks through Zen's application menu. Click
 ### Bookmarks Toolbar and Bookmarks Menu
 
 Taken from the default behavior of Gecko, Zen offers 3 locations (or, groups) for bookmarks:
-- **Bookmarks Toolbar**: This can be considered a public location for bookmarks, displayed in the browser's [chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome). You typically find it beneath the main browser toolbar, which is featured in **Multiple toolbars layout** in Zen, while in **Single toolbar layout**, hovering your cursor to the top edge will display the hidden Bookmarks Toolbar, next to your window controls. To toggle the visibility of your Bookmarks Toolbar, use the shortcut `Ctrl/Cmd + Shift + B`
+- **Bookmarks Toolbar**: This can be considered a public location for bookmarks, displayed in the browser's [chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome). You typically find it beneath the main browser toolbar, which is featured in **Multiple toolbars layout** in Zen, while in **Single toolbar layout**, hovering your cursor to the top edge will display the hidden Bookmarks Toolbar, next to your window controls. To toggle the visibility of your Bookmarks Toolbar, use the shortcut <KeyboardShortcut shortcut="Ctrl + Shift + B" />
 
 {/* TODO: *insert video* */}
 ![Bookmarks Toolbar](/assets/user-manual/bookmarks/bookmarks-toolbar.png)
@@ -64,14 +65,14 @@ Taken from the default behavior of Gecko, Zen offers 3 locations (or, groups) fo
 
 ### Bookmarks Sidebar
 
-Your bookmarks are also available via what is known as the [Firefox Sidebar](https://support.mozilla.org/kb/use-firefox-sidebar-access-bookmarks-history-synced). The Sidebar can be opened by adding a Sidebar button to your controls, or preferably by using the shortcut `Ctr/Cmd + B` to open the Bookmarks Sidebar. You can find all of your bookmarks here including entries from both Bookmarks Toolbar and Bookmarks Menu, in the form of a tree structure explorer with access to a searching function at the top.
+Your bookmarks are also available via what is known as the [Firefox Sidebar](https://support.mozilla.org/kb/use-firefox-sidebar-access-bookmarks-history-synced). The Sidebar can be opened by adding a Sidebar button to your controls, or preferably by using the shortcut <KeyboardShortcut shortcut="Ctrl + B" /> to open the Bookmarks Sidebar. You can find all of your bookmarks here including entries from both Bookmarks Toolbar and Bookmarks Menu, in the form of a tree structure explorer with access to a searching function at the top.
 
 {/* TODO: *insert video/image* */}
 ![Bookmarks Sidebar](/assets/user-manual/bookmarks/bookmarks-sidebar.png)
 
 ### Bookmarks Library
 
-The Firefox Library is a unified manager for Bookmarks, History, and Downloads. You can access the Library by the shortcut `Ctrl/Cmd + Shift + O` or from the application menu `"Bookmarks"`>`"Manage bookmarks"`. While most of its functions here have already been offered via the Bookmarks Sidebar, the Library is important for your purpose of Importing and Backing up Zen's bookmarks.
+The Firefox Library is a unified manager for Bookmarks, History, and Downloads. You can access the Library by the shortcut <KeyboardShortcut shortcut="Ctrl + Shift + O" /> or from the application menu `"Bookmarks"`>`"Manage bookmarks"`. While most of its functions here have already been offered via the Bookmarks Sidebar, the Library is important for your purpose of Importing and Backing up Zen's bookmarks.
 
 ![Bookmarks Library](/assets/user-manual/bookmarks/bookmarks-library.png)
 

content/docs/user-manual/compact-mode.mdx

@@ -2,10 +2,11 @@
 title: Compact Mode
 description: Minimalistic interface for focused browsing
 ---
+import KeyboardShortcut from '@components/KeyboardShortcut';
 
 Compact Mode is one of Zen's main feature that let you hide all browser toolbars and give wider view for the website you're currently visit.
 
-You can activate this feature by right click on empty area on the `toolbar > "Compact Mode" > "Enable compact mode"`, or use `Alt + Ctrl/Cmd + C` keyboard shortcut.
+You can activate this feature by right click on empty area on the `toolbar > "Compact Mode" > "Enable compact mode"`, or use <KeyboardShortcut shortcut="Alt + Ctrl + C" /> keyboard shortcut.
 
 {
 <div align="center">
@@ -28,8 +29,8 @@ In Multiple Toolbar or Collapsed Toolbar mode, you can choose which bar to hide.
 
 You can also use these extra shortcuts to show the hidden bars, suitable for heavy keyboard users. Unlike usual hovering gesture, showing sidebar/toolbar using these shortcuts is done persistently, until you pressed the shortcut again to hide it.
 
-- **Toggle Floating Sidebar**: `Alt + Ctrl/Cmd + S` - Show the tab sidebar for all toolbar modes
-- **Toggle Floating Toolbar**: `Alt + Ctrl/Cmd + W` - Show the top toolbar for Multiple & Collapsed Toolbar mode
+- **Toggle Floating Sidebar**: <KeyboardShortcut shortcut="Alt + Ctrl + S" /> - Show the tab sidebar for all toolbar modes
+- **Toggle Floating Toolbar**: <KeyboardShortcut shortcut="Alt + Ctrl + W" /> - Show the top toolbar for Multiple & Collapsed Toolbar mode
 
 <Callout>
 _All shortcuts can be modified via `Settings > Keyboard Shortcuts`._

content/docs/user-manual/extensions.mdx

@@ -2,6 +2,7 @@
 title: Extensions
 description: Get to know how extensions work in Zen
 ---
+import KeyboardShortcut from '@components/KeyboardShortcut';
 
 Extensions are a small software piece that enhance and personalize a browser by adding or modifying browser function and features. Example of commonly installed extensions includes ad blockers, easy reader mode, privacy and tracking managers, media downloaders, password managers, and tweaks for commonly used websites.
 
@@ -25,7 +26,7 @@ If you haven't installed any extensions yet, clicking the Extensions button will
 Add-Ons Manager is a page that primarily let you see extension details, manage its preferences, assign shortcuts, disable and remove extensions. You can access Add-Ons Manager by:
 - Open the extension button > Click `Manage extensions`.
 - Open the main menu > Click "Add-ons and themes".
-- Press the default keyboard shortcut `Ctrl/Cmd + Shift + A`.
+- Press the default keyboard shortcut <KeyboardShortcut shortcut="Ctrl + Shift + A" />.
 
 Select "Extensions" and you can see the list of your installed extensions. You can click on each extensions name to expand the details, or click toggle in each extensions to disable or enable it.
 

content/docs/user-manual/glance.mdx

@@ -2,8 +2,9 @@
 title: Glance
 description: Preview websites on top of your current tab
 ---
+import KeyboardShortcut from '@components/KeyboardShortcut';
 
-Zen's Glance lets you preview websites on top of your current tab, without fully switching to it. By default, you can create a Glance view by holding `Alt` as trigger key when clicking a link in a regular tab. In Essentials and pinned tabs, Glance will be automatically created when clicking a link outside current website, without having to pressing the trigger key.
+Zen's Glance lets you preview websites on top of your current tab, without fully switching to it. By default, you can create a Glance view by holding <KeyboardShortcut shortcut="Alt" /> as trigger key when clicking a link in a regular tab. In Essentials and pinned tabs, Glance will be automatically created when clicking a link outside current website, without having to pressing the trigger key.
 
 {
 <div align="center">
@@ -20,6 +21,6 @@ Once Glance appeared, there's three buttons on its top left side:
 - Expand button to move the website into a new tab.
 - Split button to add the website as a split tab.
 
-You can disable/enable Glance and change the trigger method (from `Alt + Click` to `Ctrl + Click` or `Shift + Click`) by opening `Settings` > `Look and Feel` > `Glance`.
+You can disable/enable Glance and change the trigger method (from <KeyboardShortcut shortcut="Alt + Click" /> to <KeyboardShortcut shortcut="Ctrl + Click" /> or <KeyboardShortcut shortcut="Shift + Click" />) by opening `Settings` > `Look and Feel` > `Glance`.
 
 With Glance, you can take a quick look of websites, move on if you're done with the site, and go back to your previous surfing activities easily.

content/docs/user-manual/pip.mdx

@@ -2,6 +2,7 @@
 title: Picture-in-Picture
 description: Watch videos in a separate window
 ---
+import KeyboardShortcut from '@components/KeyboardShortcut';
 
 With **Picture-in-Picture (PiP)** in **Zen**, you can pop videos out of webpages into a clean, always-on-top floating window. Whether you're working, browsing, or just casually scrolling, PiP keeps your video visible without disrupting your flow.
 
@@ -30,7 +31,7 @@ On pages with a single video, Zen displays a PiP icon in the **address bar**.
 You can also launch PiP by **right-clicking** on the video.
 
 - Some platforms like YouTube use custom menus.  
-  In that case, use **Shift + Right-Click** or **double right-click** to access Zen’s native menu.
+  In that case, use <KeyboardShortcut shortcut="Shift + Right-Click" /> or **double right-click** to access Zen’s native menu.
 
 ![PIP context menu](/assets/user-manual/pip/pip-context-menu.png)
 
@@ -45,17 +46,17 @@ Enable it by setting the property below in about:config to TRUE
 
 ## Keyboard Shortcuts
 
-| Action                        | Shortcut                    |
-|------------------------------|-----------------------------|
-| Launch/Close PiP             | `Ctrl + Shift + ]`          |
-| Mute / Unmute                | `Ctrl + ↓ / Ctrl + ↑`       |
-| Volume Control               | `↑ / ↓`                     |
-| Seek 5s Back / Forward       | `← / →`                     |
-| Seek 10% Back / Forward      | `Ctrl + ← / Ctrl + →`       |
-| Jump to Start / End          | `Home / End`                |
-| Pause / Play                 | `Space`                     |
-| Fullscreen Toggle            | `Double-click` or `F`       |
-| Close PiP Window             | `Ctrl + W`                  |
+| Action                       | Shortcut                                                                                  |
+|------------------------------|-------------------------------------------------------------------------------------------|
+| Launch/Close PiP             | <KeyboardShortcut shortcut="Ctrl + Shift + ]" />                                          |
+| Mute / Unmute                | <KeyboardShortcut shortcut="Ctrl + ↓" /> / <KeyboardShortcut shortcut="Ctrl + ↑" />       |
+| Volume Control               | <KeyboardShortcut shortcut="↑" /> / <KeyboardShortcut shortcut="↓" />                     |
+| Seek 5s Back / Forward       | <KeyboardShortcut shortcut="←" /> / <KeyboardShortcut shortcut="→" />                     |
+| Seek 10% Back / Forward      | <KeyboardShortcut shortcut="Ctrl + ←" /> / <KeyboardShortcut shortcut="Ctrl + →" />       |
+| Jump to Start / End          | <KeyboardShortcut shortcut="Home" /> / <KeyboardShortcut shortcut="End" />                |
+| Pause / Play                 | <KeyboardShortcut shortcut="Space" />                                                     |
+| Fullscreen Toggle            | <KeyboardShortcut shortcut="Double-click" /> or <KeyboardShortcut shortcut="F" />         |
+| Close PiP Window             | <KeyboardShortcut shortcut="Ctrl + W" />                                                  |
 
 
 ## How to Disable Picture-in-Picture
@@ -138,4 +139,5 @@ More platforms are being added.
 - **Simple Dismissal**  
   To hide the Media Player, just click the “X” on the controller. Zen will take the hint.
 
-{/* TODO: enter video */}
+{/* TODO: enter video */}
+