@@ -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..0ef0fff 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..6325576 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..759e071 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..c9790a2 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..28df2ce 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/tsconfig.json b/tsconfig.json
index 504b291..8e51c0e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,6 +25,9 @@
],
"@/*": [
"./src/*"
+ ],
+ "@components/*": [
+ "./components/*"
]
},
"plugins": [
From 33799819ab4789fe912b5750a4135a22e8f32444 Mon Sep 17 00:00:00 2001
From: Jonas List
Date: Wed, 21 May 2025 21:35:32 +0200
Subject: [PATCH 3/3] Moved KeyboardShortcut component to src directory (#191)
---
content/docs/contribute/docs/editing-with-vscode.mdx | 2 +-
content/docs/faq.mdx | 2 +-
content/docs/guides/about-config-flags.mdx | 2 +-
content/docs/guides/live-editing.mdx | 2 +-
content/docs/user-manual/bookmarks.mdx | 2 +-
content/docs/user-manual/compact-mode.mdx | 2 +-
content/docs/user-manual/extensions.mdx | 2 +-
content/docs/user-manual/glance.mdx | 2 +-
content/docs/user-manual/pip.mdx | 2 +-
content/docs/user-manual/split-view.mdx | 2 +-
content/docs/user-manual/urlbar.mdx | 2 +-
{components => src/components}/KeyboardShortcut.tsx | 0
tsconfig.json | 3 ---
13 files changed, 11 insertions(+), 14 deletions(-)
rename {components => src/components}/KeyboardShortcut.tsx (100%)
diff --git a/content/docs/contribute/docs/editing-with-vscode.mdx b/content/docs/contribute/docs/editing-with-vscode.mdx
index caedf68..1b7fba6 100644
--- a/content/docs/contribute/docs/editing-with-vscode.mdx
+++ b/content/docs/contribute/docs/editing-with-vscode.mdx
@@ -2,7 +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';
+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.
diff --git a/content/docs/faq.mdx b/content/docs/faq.mdx
index 8316719..f89b39a 100644
--- a/content/docs/faq.mdx
+++ b/content/docs/faq.mdx
@@ -2,7 +2,7 @@
title: FAQ
icon: CircleHelp
---
-import KeyboardShortcut from '@components/KeyboardShortcut';
+import KeyboardShortcut from '@/components/KeyboardShortcut';
import { Callout } from 'fumadocs-ui/components/callout';
import { InlineTOC } from 'fumadocs-ui/components/inline-toc';
diff --git a/content/docs/guides/about-config-flags.mdx b/content/docs/guides/about-config-flags.mdx
index 08b7780..518ae9d 100644
--- a/content/docs/guides/about-config-flags.mdx
+++ b/content/docs/guides/about-config-flags.mdx
@@ -1,5 +1,5 @@
---
-title: List of Hidden/Advanced Preferences
+title: Hidden/Advanced Preferences
description: A list of useful flags in Zen Browser's Advanced Preferences page (about:config).
---
These are a variety of settings that can change Zen's appearance, behavior, and more. To access them, go to `about:config` in Zen Browser, and search for the title of the flag. Some of these flags may require a restart to work.
diff --git a/content/docs/guides/live-editing.mdx b/content/docs/guides/live-editing.mdx
index 9dfc2d9..d077705 100644
--- a/content/docs/guides/live-editing.mdx
+++ b/content/docs/guides/live-editing.mdx
@@ -2,7 +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 KeyboardShortcut from '@/components/KeyboardShortcut';
import { Callout } from 'fumadocs-ui/components/callout';
diff --git a/content/docs/user-manual/bookmarks.mdx b/content/docs/user-manual/bookmarks.mdx
index 65d175d..187a878 100644
--- a/content/docs/user-manual/bookmarks.mdx
+++ b/content/docs/user-manual/bookmarks.mdx
@@ -3,7 +3,7 @@ title: Bookmarks
description: Managing bookmarks in Zen
---
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
-import KeyboardShortcut from '@components/KeyboardShortcut';
+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.
diff --git a/content/docs/user-manual/compact-mode.mdx b/content/docs/user-manual/compact-mode.mdx
index dbe241c..5cfa46c 100644
--- a/content/docs/user-manual/compact-mode.mdx
+++ b/content/docs/user-manual/compact-mode.mdx
@@ -2,7 +2,7 @@
title: Compact Mode
description: Minimalistic interface for focused browsing
---
-import KeyboardShortcut from '@components/KeyboardShortcut';
+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.
diff --git a/content/docs/user-manual/extensions.mdx b/content/docs/user-manual/extensions.mdx
index 0ef0fff..41ad744 100644
--- a/content/docs/user-manual/extensions.mdx
+++ b/content/docs/user-manual/extensions.mdx
@@ -2,7 +2,7 @@
title: Extensions
description: Get to know how extensions work in Zen
---
-import KeyboardShortcut from '@components/KeyboardShortcut';
+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.
diff --git a/content/docs/user-manual/glance.mdx b/content/docs/user-manual/glance.mdx
index 6325576..0984f2f 100644
--- a/content/docs/user-manual/glance.mdx
+++ b/content/docs/user-manual/glance.mdx
@@ -2,7 +2,7 @@
title: Glance
description: Preview websites on top of your current tab
---
-import KeyboardShortcut from '@components/KeyboardShortcut';
+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 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.
diff --git a/content/docs/user-manual/pip.mdx b/content/docs/user-manual/pip.mdx
index 759e071..c0d2d8b 100644
--- a/content/docs/user-manual/pip.mdx
+++ b/content/docs/user-manual/pip.mdx
@@ -2,7 +2,7 @@
title: Picture-in-Picture
description: Watch videos in a separate window
---
-import KeyboardShortcut from '@components/KeyboardShortcut';
+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.
diff --git a/content/docs/user-manual/split-view.mdx b/content/docs/user-manual/split-view.mdx
index c9790a2..7b1d10c 100644
--- a/content/docs/user-manual/split-view.mdx
+++ b/content/docs/user-manual/split-view.mdx
@@ -2,7 +2,7 @@
title: Split View
description: Open multiple tabs side by side easily
---
-import KeyboardShortcut from '../../../components/KeyboardShortcut';
+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.
diff --git a/content/docs/user-manual/urlbar.mdx b/content/docs/user-manual/urlbar.mdx
index 28df2ce..8a84589 100644
--- a/content/docs/user-manual/urlbar.mdx
+++ b/content/docs/user-manual/urlbar.mdx
@@ -2,7 +2,7 @@
title: URL Bar & Search Functions
description: Smart navigation with persistent input memory
---
-import KeyboardShortcut from '@components/KeyboardShortcut';
+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.
diff --git a/components/KeyboardShortcut.tsx b/src/components/KeyboardShortcut.tsx
similarity index 100%
rename from components/KeyboardShortcut.tsx
rename to src/components/KeyboardShortcut.tsx
diff --git a/tsconfig.json b/tsconfig.json
index 8e51c0e..504b291 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,9 +25,6 @@
],
"@/*": [
"./src/*"
- ],
- "@components/*": [
- "./components/*"
]
},
"plugins": [