@@ -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**:
_All shortcuts can be modified via `Settings > Keyboard Shortcuts`._
diff --git a/content/docs/user-manual/extensions.mdx b/content/docs/user-manual/extensions.mdx
index d0ed7a2..41ad744 100644
--- a/content/docs/user-manual/extensions.mdx
+++ b/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 .
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.
diff --git a/content/docs/user-manual/glance.mdx b/content/docs/user-manual/glance.mdx
index 14cbd1c..0984f2f 100644
--- a/content/docs/user-manual/glance.mdx
+++ b/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 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.
{
@@ -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 to or ) 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.
diff --git a/content/docs/user-manual/pip.mdx b/content/docs/user-manual/pip.mdx
index c43c882..c0d2d8b 100644
--- a/content/docs/user-manual/pip.mdx
+++ b/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 or **double right-click** to access Zen’s native menu.
@@ -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 | |
+| Mute / Unmute | / |
+| Volume Control | / |
+| Seek 5s Back / Forward | / |
+| Seek 10% Back / Forward | / |
+| Jump to Start / End | / |
+| Pause / Play | |
+| Fullscreen Toggle | or |
+| Close PiP Window | |
## 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 */}
\ No newline at end of file
+{/* TODO: enter video */}
+
diff --git a/content/docs/user-manual/split-view.mdx b/content/docs/user-manual/split-view.mdx
index 3290172..7b1d10c 100644
--- a/content/docs/user-manual/split-view.mdx
+++ b/content/docs/user-manual/split-view.mdx
@@ -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 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**:
+- **Toggle Split View Vertical**:
+- **Toggle Split View Grid**:
{ /* TODO: insert gif/video of horizontal, vertical, and grid toggling split view here */}
diff --git a/content/docs/user-manual/urlbar.mdx b/content/docs/user-manual/urlbar.mdx
index 2f193fa..8a84589 100644
--- a/content/docs/user-manual/urlbar.mdx
+++ b/content/docs/user-manual/urlbar.mdx
@@ -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,13 +24,13 @@ 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 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.
### Setting default search engine
-By default, Zen provides **Google**, **DuckDuckGo**, and **Wikipedia** (English) as default search engine providers. You can choose between Google and DuckDuckGo in the onboarding process after installing Zen.
+By default, Zen provides **Google**, **DuckDuckGo**, and **Wikipedia** (English) as default search engine providers. You can choose between Google, DuckDuckGo and *[Ecosia*](https://blog.ecosia.org/ecosia-firefox-switch/)* in the onboarding process after installing Zen.
diff --git a/src/components/KeyboardShortcut.tsx b/src/components/KeyboardShortcut.tsx
new file mode 100644
index 0000000..4c0cd6c
--- /dev/null
+++ b/src/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 = ({
+ 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(/(?
+ {keys.map((key, index) => (
+
+
+ {key.toLowerCase() === "shift" ? "⇧" : key}
+
+ {index < keys.length - 1 && +}
+
+ ))}
+
+ );
+};
+
+export default KeyboardShortcut;