Added KeyboardShortcut component for consistent key display

This commit is contained in:
Jonas List 2025-05-21 16:39:50 +02:00
parent fa5987d995
commit 9a4765c23b
12 changed files with 110 additions and 33 deletions

View file

@ -0,0 +1,64 @@
"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);
const [isMac, setIsMac] = useState(false);
useEffect(() => {
// OS detection should run only on the client-side
const isMacUser = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
setIsMac(isMacUser);
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;

View file

@ -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.

View file

@ -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

View file

@ -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.

View file

@ -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)

View file

@ -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`._

View file

@ -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.

View file

@ -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.

View file

@ -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 Zens native menu.
In that case, use <KeyboardShortcut shortcut="Shift + Right-Click" /> or **double right-click** to access Zens native menu.
![PIP context menu](/assets/user-manual/pip/pip-context-menu.png)
@ -46,16 +47,16 @@ 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` |
|------------------------------|-------------------------------------------------------------------------------------------|
| 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
@ -139,3 +140,4 @@ More platforms are being added.
To hide the Media Player, just click the “X” on the controller. Zen will take the hint.
{/* TODO: enter video */}

View file

@ -2,6 +2,7 @@
title: Split View
description: Open multiple tabs side by side easily
---
import KeyboardShortcut from '../../../components/KeyboardShortcut';
Zen's Split View lets you view up to 4 tabs side by side, so you can compare information or multitask easily.
@ -25,15 +26,15 @@ When split view is enabled, the active tab will have an overlay on its top side,
- With **Drag Handle** `:::` button, you can move a split tab to various directions (left, bottom, right, or top side of another tabs).
- Meanwhile, clicking **Unsplit Tab** `` button will remove the tab and expand it outside the previous split view.
- Currently, you can **unsplit all tabs within a split view** by pressing `Alt + Ctrl/Cmd + U` shortcut.
- Currently, you can **unsplit all tabs within a split view** by pressing <KeyboardShortcut shortcut="Alt + Ctrl + U" /> shortcut.
### Toggle Split View shortcuts
Zen also provide keyboard shortcuts to help you rearrange the split tabs automatically into a horizontal, vertical, or grid layout.
- **Toggle Split View Horizontal**: `Alt + Ctrl/Cmd + H`
- **Toggle Split View Vertical**: `Alt + Ctrl/Cmd + V`
- **Toggle Split View Grid**: `Alt + Ctrl/Cmd + G`
- **Toggle Split View Horizontal**: <KeyboardShortcut shortcut="Alt + Ctrl + H" />
- **Toggle Split View Vertical**: <KeyboardShortcut shortcut="Alt + Ctrl + V" />
- **Toggle Split View Grid**: <KeyboardShortcut shortcut="Alt + Ctrl + G" />
{ /* TODO: insert gif/video of horizontal, vertical, and grid toggling split view here */}

View file

@ -2,6 +2,7 @@
title: URL Bar & Search Functions
description: Smart navigation with persistent input memory
---
import KeyboardShortcut from '@components/KeyboardShortcut';
Different from most browsers, Zen uses the **URL bar** as a quick and efficient way to navigate the web, eliminating the need for a dedicated new tab page.
@ -23,7 +24,7 @@ If you close the URL bar after typing a URL or search query, the text will still
### Toggle floating behavior of the URL bar
Zen has several floating behaviors for its URL bar, which can be changed in `Settings` > `Look and Feel` > `Zen URL Bar`:
- **Floating only when typing** (Default) The URL bar will float in the center when you access it from the New Tab button or the `Ctrl + L`/ keyboard shortcut. But, if you open the URL bar by clicking, it will stick to its regular position at the top.
- **Floating only when typing** (Default) The URL bar will float in the center when you access it from the New Tab button or the <KeyboardShortcut shortcut="Ctrl + L" /> keyboard shortcut. But, if you open the URL bar by clicking, it will stick to its regular position at the top.
- **Always floating** The URL bar will always float in the center, both from clicking directly, New Tab button, and keyboard shortcuts.
- **Normal** The position of the opened URL bar will always be attached to the top, whether accessed by clicking directly, using the New Tab button, or via keyboard shortcuts.

View file

@ -25,6 +25,9 @@
],
"@/*": [
"./src/*"
],
"@components/*": [
"./components/*"
]
},
"plugins": [