feat(docs): highlight zellij pane mode in README and homepage shortcuts

commit: 3b4fc682ca8fcbf430886ce3cf79dff2ca73e2b6
author: bamen · 13mo ago · 2025-09-19 05:25 UTC
parent: a6d0e00
signature: unsigned

2 files · +127 -24

M README.md +69 -4


@@ -23,6 +23,7 @@ Dumber is a minimalist browser and launcher companion focused on speed and simpl
23	23		- `0.8.0` (2025-09-17): Migrated injected UI from inline scripts to structured Svelte components with a shared shadow host, plus Tailwind v4 theming, GTK color sync, and refreshed omnibox/find flows.
24	24
25	25		## Features
	26	+	- Zellij-inspired pane management: Split browser into multiple panes with keyboard shortcuts (Ctrl+P to enter pane mode)
26	27		- Built‑in browser window (no external browser needed)
27	28		- Content filtering system (early stage UBlock-based filtering with EasyList integration)
28	29		- Hardware video acceleration with automatic GPU detection (VA-API/VDPAU)

@@ -35,6 +36,8 @@ Dumber is a minimalist browser and launcher companion focused on speed and simpl
35	36		## Controls & Shortcuts
36	37
37	38		### Keyboard Shortcuts
	39	+
	40	+	#### Browser Controls
38	41		\| Shortcut \| Action \| Notes \|
39	42		\|----------\|--------\|-------\|
40	43		\| F12 \| Open Developer Tools \| WebKit inspector \|

@@ -45,11 +48,23 @@ Dumber is a minimalist browser and launcher companion focused on speed and simpl
45	48		\| Ctrl/Cmd+- \| Zoom Out \| Works across keyboard layouts \|
46	49		\| Ctrl/Cmd+0 \| Reset Zoom \| Return to 100% zoom \|
47	50		\| Ctrl/Cmd+Shift+C \| Copy URL \| Copy current URL to clipboard with toast \|
48		-	\| Ctrl/Cmd+R \| Reload Page \| Refresh current page \|
	51	+	\| Ctrl/Cmd+R / F5 \| Reload Page \| Refresh current page \|
49	52		\| Ctrl/Cmd+Shift+R \| Hard Reload \| Refresh ignoring cache \|
50		-	\| F5 \| Reload Page \| Alternative reload key \|
51		-	\| Alt+← \| Navigate Back \| Go to previous page \|
52		-	\| Alt+→ \| Navigate Forward \| Go to next page \|
	53	+	\| Ctrl+← / Ctrl+→ \| Navigate Back/Forward \| Browser history navigation \|
	54	+
	55	+	#### Zellij-Inspired Pane Management
	56	+	\| Shortcut \| Action \| Notes \|
	57	+	\|----------\|--------\|-------\|
	58	+	\| Ctrl/Cmd+P \| Enter Pane Mode \| Modal mode for pane operations \|
	59	+	\| → / R (in pane mode) \| Split Right \| Create new pane to the right \|
	60	+	\| ← / L (in pane mode) \| Split Left \| Create new pane to the left \|
	61	+	\| ↑ / U (in pane mode) \| Split Up \| Create new pane above \|
	62	+	\| ↓ / D (in pane mode) \| Split Down \| Create new pane below \|
	63	+	\| X (in pane mode) \| Close Pane \| Close current pane \|
	64	+	\| Enter (in pane mode) \| Confirm Action \| Confirm pane operation \|
	65	+	\| Escape (in pane mode) \| Exit Pane Mode \| Return to normal navigation \|
	66	+	\| Alt+Arrow Keys \| Navigate Panes \| Move focus between panes \|
	67	+	\| Ctrl/Cmd+↑ / Ctrl/Cmd+↓ \| Navigate Panes Up/Down \| Vertical pane navigation \|
53	68
54	69		### Mouse Controls
55	70		\| Action \| Result \| Notes \|

@@ -140,6 +155,54 @@ Note: The root flag path only generates options; for processing a selection (`--
140	155
141	156		In GUI mode the app serves an embedded homepage via `dumb://homepage`, and frontend assets under `dumb://app/...`.
142	157
	158	+	## Pane Management (Zellij-Inspired)
	159	+
	160	+	Dumber features a Zellij-inspired pane management system that allows you to split your browser window into multiple panes, each running independent web sessions.
	161	+
	162	+	### How it Works
	163	+	1. Enter Pane Mode: Press `Ctrl+P` to enter pane mode (modal interface with timeout)
	164	+	2. Split Panes: Use arrow keys or letter shortcuts to split:
	165	+	- `→` or `R` - Split right
	166	+	- `←` or `L` - Split left
	167	+	- `↑` or `U` - Split up
	168	+	- `↓` or `D` - Split down
	169	+	3. Navigate: Use `Alt+Arrow Keys` to move focus between panes
	170	+	4. Close: Press `X` in pane mode to close the current pane
	171	+
	172	+	### Features
	173	+	- Binary tree layout: Panes are organized in a binary tree structure for optimal space usage
	174	+	- Focus management: Visual borders and hover-to-focus for intuitive navigation
	175	+	- Independent sessions: Each pane maintains its own browsing session, history, and zoom level
	176	+	- Popup handling: Configurable popup placement (new pane, same pane, etc.)
	177	+	- Keyboard-driven: All operations accessible via keyboard shortcuts
	178	+
	179	+	### Configuration
	180	+	The pane system is fully configurable via `config.json`:
	181	+	```json
	182	+	"workspace": {
	183	+	"enable_zellij_controls": true,
	184	+	"pane_mode": {
	185	+	"activation_shortcut": "cmdorctrl+p",
	186	+	"timeout_ms": 3000,
	187	+	"action_bindings": {
	188	+	"arrowright": "split-right",
	189	+	"r": "split-right",
	190	+	"x": "close-pane",
	191	+	// ... full key mappings
	192	+	}
	193	+	},
	194	+	"popups": {
	195	+	"placement": "right",
	196	+	"open_in_new_pane": true
	197	+	},
	198	+	"styling": {
	199	+	"border_width": 2,
	200	+	"border_color": "@theme_selected_bg_color",
	201	+	"transition_duration": 120
	202	+	}
	203	+	}
	204	+	```
	205	+
143	206		## Configuration
144	207
145	208		Dumber follows the XDG Base Directory spec:

@@ -309,8 +372,10 @@ WebKitGTK uses GStreamer for media playback. Dumber includes automatic hardware
309	372		## Roadmap
310	373		- ✅ WebKitGTK 6 (GTK4) migration (GPU/Vulkan path complete)
311	374		- ✅ GPU rendering (Vulkan via GTK4 renderer) with graceful CPU fallback
	375	+	- ✅ Zellij-inspired pane management with binary tree layout and keyboard-driven workflow
312	376		- 🚧 UBlock-based content filtering (early stage - network blocking works, cosmetic filtering needs work)
313	377		- Full Vim-style motion and keyboard navigation across pages and UI
	378	+	- Tab management system (browser tabs in addition to panes)
314	379		- Performance work: faster startup, lower memory, snappier UI
315	380		- Other shiny things I'm not yet aware of
316	381


@@ -23,6 +23,7 @@ Dumber is a minimalist browser and launcher companion focused on speed and simpl
23		- `0.8.0` (2025-09-17): Migrated injected UI from inline scripts to structured Svelte components with a shared shadow host, plus Tailwind v4 theming, GTK color sync, and refreshed omnibox/find flows.	23		- `0.8.0` (2025-09-17): Migrated injected UI from inline scripts to structured Svelte components with a shared shadow host, plus Tailwind v4 theming, GTK color sync, and refreshed omnibox/find flows.
24			24
25		## Features	25		## Features
			26	+	- Zellij-inspired pane management: Split browser into multiple panes with keyboard shortcuts (Ctrl+P to enter pane mode)
26		- Built‑in browser window (no external browser needed)	27		- Built‑in browser window (no external browser needed)
27		- Content filtering system (early stage UBlock-based filtering with EasyList integration)	28		- Content filtering system (early stage UBlock-based filtering with EasyList integration)
28		- Hardware video acceleration with automatic GPU detection (VA-API/VDPAU)	29		- Hardware video acceleration with automatic GPU detection (VA-API/VDPAU)

@@ -35,6 +36,8 @@ Dumber is a minimalist browser and launcher companion focused on speed and simpl
35		## Controls & Shortcuts	36		## Controls & Shortcuts
36			37
37		### Keyboard Shortcuts	38		### Keyboard Shortcuts
			39	+
			40	+	#### Browser Controls
38		\| Shortcut \| Action \| Notes \|	41		\| Shortcut \| Action \| Notes \|
39		\|----------\|--------\|-------\|	42		\|----------\|--------\|-------\|
40		\| F12 \| Open Developer Tools \| WebKit inspector \|	43		\| F12 \| Open Developer Tools \| WebKit inspector \|

@@ -45,11 +48,23 @@ Dumber is a minimalist browser and launcher companion focused on speed and simpl
45		\| Ctrl/Cmd+- \| Zoom Out \| Works across keyboard layouts \|	48		\| Ctrl/Cmd+- \| Zoom Out \| Works across keyboard layouts \|
46		\| Ctrl/Cmd+0 \| Reset Zoom \| Return to 100% zoom \|	49		\| Ctrl/Cmd+0 \| Reset Zoom \| Return to 100% zoom \|
47		\| Ctrl/Cmd+Shift+C \| Copy URL \| Copy current URL to clipboard with toast \|	50		\| Ctrl/Cmd+Shift+C \| Copy URL \| Copy current URL to clipboard with toast \|
48	-	\| Ctrl/Cmd+R \| Reload Page \| Refresh current page \|	51	+	\| Ctrl/Cmd+R / F5 \| Reload Page \| Refresh current page \|
49		\| Ctrl/Cmd+Shift+R \| Hard Reload \| Refresh ignoring cache \|	52		\| Ctrl/Cmd+Shift+R \| Hard Reload \| Refresh ignoring cache \|
50	-	\| F5 \| Reload Page \| Alternative reload key \|	53	+	\| Ctrl+← / Ctrl+→ \| Navigate Back/Forward \| Browser history navigation \|
51	-	\| Alt+← \| Navigate Back \| Go to previous page \|	54	+
52	-	\| Alt+→ \| Navigate Forward \| Go to next page \|	55	+	#### Zellij-Inspired Pane Management
			56	+	\| Shortcut \| Action \| Notes \|
			57	+	\|----------\|--------\|-------\|
			58	+	\| Ctrl/Cmd+P \| Enter Pane Mode \| Modal mode for pane operations \|
			59	+	\| → / R (in pane mode) \| Split Right \| Create new pane to the right \|
			60	+	\| ← / L (in pane mode) \| Split Left \| Create new pane to the left \|
			61	+	\| ↑ / U (in pane mode) \| Split Up \| Create new pane above \|
			62	+	\| ↓ / D (in pane mode) \| Split Down \| Create new pane below \|
			63	+	\| X (in pane mode) \| Close Pane \| Close current pane \|
			64	+	\| Enter (in pane mode) \| Confirm Action \| Confirm pane operation \|
			65	+	\| Escape (in pane mode) \| Exit Pane Mode \| Return to normal navigation \|
			66	+	\| Alt+Arrow Keys \| Navigate Panes \| Move focus between panes \|
			67	+	\| Ctrl/Cmd+↑ / Ctrl/Cmd+↓ \| Navigate Panes Up/Down \| Vertical pane navigation \|
53			68
54		### Mouse Controls	69		### Mouse Controls
55		\| Action \| Result \| Notes \|	70		\| Action \| Result \| Notes \|

@@ -140,6 +155,54 @@ Note: The root flag path only generates options; for processing a selection (`--
140			155
141		In GUI mode the app serves an embedded homepage via `dumb://homepage`, and frontend assets under `dumb://app/...`.	156		In GUI mode the app serves an embedded homepage via `dumb://homepage`, and frontend assets under `dumb://app/...`.
142			157
			158	+	## Pane Management (Zellij-Inspired)
			159	+
			160	+	Dumber features a Zellij-inspired pane management system that allows you to split your browser window into multiple panes, each running independent web sessions.
			161	+
			162	+	### How it Works
			163	+	1. Enter Pane Mode: Press `Ctrl+P` to enter pane mode (modal interface with timeout)
			164	+	2. Split Panes: Use arrow keys or letter shortcuts to split:
			165	+	- `→` or `R` - Split right
			166	+	- `←` or `L` - Split left
			167	+	- `↑` or `U` - Split up
			168	+	- `↓` or `D` - Split down
			169	+	3. Navigate: Use `Alt+Arrow Keys` to move focus between panes
			170	+	4. Close: Press `X` in pane mode to close the current pane
			171	+
			172	+	### Features
			173	+	- Binary tree layout: Panes are organized in a binary tree structure for optimal space usage
			174	+	- Focus management: Visual borders and hover-to-focus for intuitive navigation
			175	+	- Independent sessions: Each pane maintains its own browsing session, history, and zoom level
			176	+	- Popup handling: Configurable popup placement (new pane, same pane, etc.)
			177	+	- Keyboard-driven: All operations accessible via keyboard shortcuts
			178	+
			179	+	### Configuration
			180	+	The pane system is fully configurable via `config.json`:
			181	+	```json
			182	+	"workspace": {
			183	+	"enable_zellij_controls": true,
			184	+	"pane_mode": {
			185	+	"activation_shortcut": "cmdorctrl+p",
			186	+	"timeout_ms": 3000,
			187	+	"action_bindings": {
			188	+	"arrowright": "split-right",
			189	+	"r": "split-right",
			190	+	"x": "close-pane",
			191	+	// ... full key mappings
			192	+	}
			193	+	},
			194	+	"popups": {
			195	+	"placement": "right",
			196	+	"open_in_new_pane": true
			197	+	},
			198	+	"styling": {
			199	+	"border_width": 2,
			200	+	"border_color": "@theme_selected_bg_color",
			201	+	"transition_duration": 120
			202	+	}
			203	+	}
			204	+	```
			205	+
143		## Configuration	206		## Configuration
144			207
145		Dumber follows the XDG Base Directory spec:	208		Dumber follows the XDG Base Directory spec:

@@ -309,8 +372,10 @@ WebKitGTK uses GStreamer for media playback. Dumber includes automatic hardware
309		## Roadmap	372		## Roadmap
310		- ✅ WebKitGTK 6 (GTK4) migration (GPU/Vulkan path complete)	373		- ✅ WebKitGTK 6 (GTK4) migration (GPU/Vulkan path complete)
311		- ✅ GPU rendering (Vulkan via GTK4 renderer) with graceful CPU fallback	374		- ✅ GPU rendering (Vulkan via GTK4 renderer) with graceful CPU fallback
			375	+	- ✅ Zellij-inspired pane management with binary tree layout and keyboard-driven workflow
312		- 🚧 UBlock-based content filtering (early stage - network blocking works, cosmetic filtering needs work)	376		- 🚧 UBlock-based content filtering (early stage - network blocking works, cosmetic filtering needs work)
313		- Full Vim-style motion and keyboard navigation across pages and UI	377		- Full Vim-style motion and keyboard navigation across pages and UI
			378	+	- Tab management system (browser tabs in addition to panes)
314		- Performance work: faster startup, lower memory, snappier UI	379		- Performance work: faster startup, lower memory, snappier UI
315		- Other shiny things I'm not yet aware of	380		- Other shiny things I'm not yet aware of
316			381

M gui/src/pages/Homepage.svelte +58 -20


@@ -44,6 +44,7 @@
44	44		// Initialize shortcuts (these are browser shortcuts, not dynamic from API)
45	45		const initializeShortcuts = () => {
46	46		shortcuts = [
	47	+	// Browser shortcuts
47	48		{
48	49		key: 'Ctrl+L',
49	50		description: 'Focus address bar',

@@ -60,7 +61,7 @@
60	61		action: () => console.log('Ctrl+Shift+C triggered')
61	62		},
62	63		{
63		-	key: 'Ctrl+R',
	64	+	key: 'Ctrl+R / F5',
64	65		description: 'Reload page',
65	66		action: () => window.location.reload()
66	67		},

@@ -69,25 +70,15 @@
69	70		description: 'Hard reload',
70	71		action: () => console.log('Ctrl+Shift+R triggered')
71	72		},
72		-	{
73		-	key: 'F5',
74		-	description: 'Reload page',
75		-	action: () => window.location.reload()
76		-	},
77	73		{
78	74		key: 'F12',
79	75		description: 'DevTools',
80	76		action: () => console.log('F12 triggered')
81	77		},
82	78		{
83		-	key: 'Alt+←',
84		-	description: 'Navigate back',
85		-	action: () => console.log('Alt+← triggered')
86		-	},
87		-	{
88		-	key: 'Alt+→',
89		-	description: 'Navigate forward',
90		-	action: () => console.log('Alt+→ triggered')
	79	+	key: 'Alt+← / Alt+→',
	80	+	description: 'Navigate back/forward',
	81	+	action: () => console.log('Alt+Arrow triggered')
91	82		},
92	83		{
93	84		key: 'Ctrl+0',

@@ -95,14 +86,61 @@
95	86		action: () => console.log('Ctrl+0 triggered')
96	87		},
97	88		{
98		-	key: 'Ctrl++',
99		-	description: 'Zoom in',
100		-	action: () => console.log('Ctrl++ triggered')
	89	+	key: 'Ctrl++ / Ctrl+-',
	90	+	description: 'Zoom in/out',
	91	+	action: () => console.log('Ctrl+Zoom triggered')
	92	+	},
	93	+	// Workspace pane mode
	94	+	{
	95	+	key: 'Ctrl+P',
	96	+	description: 'Enter pane mode',
	97	+	action: () => console.log('Ctrl+P triggered')
	98	+	},
	99	+	{
	100	+	key: '→ / R (pane mode)',
	101	+	description: 'Split pane right',
	102	+	action: () => console.log('Split right triggered')
	103	+	},
	104	+	{
	105	+	key: '← / L (pane mode)',
	106	+	description: 'Split pane left',
	107	+	action: () => console.log('Split left triggered')
	108	+	},
	109	+	{
	110	+	key: '↑ / U (pane mode)',
	111	+	description: 'Split pane up',
	112	+	action: () => console.log('Split up triggered')
	113	+	},
	114	+	{
	115	+	key: '↓ / D (pane mode)',
	116	+	description: 'Split pane down',
	117	+	action: () => console.log('Split down triggered')
	118	+	},
	119	+	{
	120	+	key: 'X (pane mode)',
	121	+	description: 'Close current pane',
	122	+	action: () => console.log('Close pane triggered')
	123	+	},
	124	+	{
	125	+	key: 'Enter (pane mode)',
	126	+	description: 'Confirm action',
	127	+	action: () => console.log('Confirm triggered')
	128	+	},
	129	+	{
	130	+	key: 'Escape (pane mode)',
	131	+	description: 'Exit pane mode',
	132	+	action: () => console.log('Exit pane mode triggered')
	133	+	},
	134	+	// Workspace navigation
	135	+	{
	136	+	key: 'Alt+Arrow Keys',
	137	+	description: 'Navigate between panes',
	138	+	action: () => console.log('Navigate panes triggered')
101	139		},
102	140		{
103		-	key: 'Ctrl+-',
104		-	description: 'Zoom out',
105		-	action: () => console.log('Ctrl+- triggered')
	141	+	key: 'Ctrl+↑ / Ctrl+↓',
	142	+	description: 'Navigate panes up/down',
	143	+	action: () => console.log('Navigate vertical triggered')
106	144		}
107	145		];
108	146		shortcutsLoading = false;

   // Initialize shortcuts (these are browser shortcuts, not dynamic from API)
   const initializeShortcuts = () => {
     shortcuts = [
+      // Browser shortcuts
       {
         key: 'Ctrl+L',
         description: 'Focus address bar',
         action: () => console.log('Ctrl+Shift+C triggered')
       },
       {
-        key: 'Ctrl+R',
+        key: 'Ctrl+R / F5',
         description: 'Reload page',
         action: () => window.location.reload()
       },
         description: 'Hard reload',
         action: () => console.log('Ctrl+Shift+R triggered')
       },
-      {
-        key: 'F5',
-        description: 'Reload page',
-        action: () => window.location.reload()
-      },
       {
         key: 'F12',
         description: 'DevTools',
         action: () => console.log('F12 triggered')
       },
       {
-        key: 'Alt+←',
+        key: 'Alt+← / Alt+→',
-        description: 'Navigate back',
+        description: 'Navigate back/forward',
-        action: () => console.log('Alt+← triggered')
+        action: () => console.log('Alt+Arrow triggered')
-      },
-      {
-        key: 'Alt+→',
-        description: 'Navigate forward',
-        action: () => console.log('Alt+→ triggered')
       },
       {
         key: 'Ctrl+0',
         action: () => console.log('Ctrl+0 triggered')
       },
       {
-        key: 'Ctrl++',
+        key: 'Ctrl++ / Ctrl+-',
-        description: 'Zoom in',
+        description: 'Zoom in/out',
-        action: () => console.log('Ctrl++ triggered')
+        action: () => console.log('Ctrl+Zoom triggered')
+      },
+      // Workspace pane mode
+      {
+        key: 'Ctrl+P',
+        description: 'Enter pane mode',
+        action: () => console.log('Ctrl+P triggered')
+      },
+      {
+        key: '→ / R (pane mode)',
+        description: 'Split pane right',
+        action: () => console.log('Split right triggered')
+      },
+      {
+        key: '← / L (pane mode)',
+        description: 'Split pane left',
+        action: () => console.log('Split left triggered')
+      },
+      {
+        key: '↑ / U (pane mode)',
+        description: 'Split pane up',
+        action: () => console.log('Split up triggered')
+      },
+      {
+        key: '↓ / D (pane mode)',
+        description: 'Split pane down',
+        action: () => console.log('Split down triggered')
+      },
+      {
+        key: 'X (pane mode)',
+        description: 'Close current pane',
+        action: () => console.log('Close pane triggered')
+      },
+      {
+        key: 'Enter (pane mode)',
+        description: 'Confirm action',
+        action: () => console.log('Confirm triggered')
+      },
+      {
+        key: 'Escape (pane mode)',
+        description: 'Exit pane mode',
+        action: () => console.log('Exit pane mode triggered')
+      },
+      // Workspace navigation
+      {
+        key: 'Alt+Arrow Keys',
+        description: 'Navigate between panes',
+        action: () => console.log('Navigate panes triggered')
       },
       {
-        key: 'Ctrl+-',
+        key: 'Ctrl+↑ / Ctrl+↓',
-        description: 'Zoom out',
+        description: 'Navigate panes up/down',
-        action: () => console.log('Ctrl+- triggered')
+        action: () => console.log('Navigate vertical triggered')
       }
     ];
     shortcutsLoading = false;