feat(workspace): add visual border feedback for pane mode

Zellij-style visual feedback when pane mode is active. Adds prominent
orange border around the entire workspace root container.

Changes:
- New CSS class .workspace-pane-mode-active with 4px orange border
- Smooth transitions (150ms ease-in-out) for border appearance
- Applied/removed by backend via CSS class manipulation
- Normal state uses transparent border for smooth transition

Provides clear visual indication that pane mode is active and awaiting
user action, matching Zellij's UX patterns.

commit: 4c6ae6a83a91819f2e5ca1e380145f5e847ce1b3
author: bamen · 12mo ago · 2025-10-13 21:58 UTC
committer: bamen · 12mo ago · 2025-10-13 17:06 UTC
parent: d2d9ad1
signature: unsigned

1 file · +18 -0

M internal/app/browser/workspace_css.go +18 -0


@@ -73,12 +73,29 @@ func (wm *WorkspaceManager) generateWorkspaceCSS() string {
73	73
74	74		activeBorderColor := getActivePaneBorderColor(styling, isDark)
75	75
	76	+	// Pane mode border color (brighter/more prominent than active pane border)
	77	+	paneModeColor := "#FFA500" // Orange for pane mode
	78	+	if styling.BorderColor != "" && strings.HasPrefix(styling.BorderColor, "@") {
	79	+	paneModeColor = styling.BorderColor // Use theme variable if configured
	80	+	}
	81	+
76	82		css := fmt.Sprintf(`window {
77	83		background-color: %s;
78	84		padding: 0;
79	85		margin: 0;
80	86		}
81	87
	88	+	/* Workspace root container - normal state */
	89	+	paned, box {
	90	+	border: 0px solid transparent;
	91	+	transition: border-width 150ms ease-in-out, border-color 150ms ease-in-out;
	92	+	}
	93	+
	94	+	/* Pane mode active - thick orange border around workspace root */
	95	+	.workspace-pane-mode-active {
	96	+	border: 4px solid %s !important;
	97	+	}
	98	+
82	99		/* Base pane styling - subtle border for inactive panes */
83	100		.workspace-pane, .stacked-pane-container {
84	101		border: 2px solid %s;

@@ -132,6 +149,7 @@ func (wm *WorkspaceManager) generateWorkspaceCSS() string {
132	149		/* Collapsed panes are hidden - handled in code via widget visibility */
133	150		}`,
134	151		windowBackgroundColor, // window background
	152	+	paneModeColor, // workspace-pane-mode-active border color
135	153		inactiveBorderColor, // base pane border color (inactive)
136	154		styling.BorderRadius, // base pane border radius
137	155		styling.TransitionDuration, // base pane border transition


@@ -73,12 +73,29 @@ func (wm *WorkspaceManager) generateWorkspaceCSS() string {
73		73
74	activeBorderColor := getActivePaneBorderColor(styling, isDark)	74		activeBorderColor := getActivePaneBorderColor(styling, isDark)
75		75
		76	+	// Pane mode border color (brighter/more prominent than active pane border)
		77	+	paneModeColor := "#FFA500" // Orange for pane mode
		78	+	if styling.BorderColor != "" && strings.HasPrefix(styling.BorderColor, "@") {
		79	+	paneModeColor = styling.BorderColor // Use theme variable if configured
		80	+	}
		81	+
76	css := fmt.Sprintf(`window {	82		css := fmt.Sprintf(`window {
77	background-color: %s;	83		background-color: %s;
78	padding: 0;	84		padding: 0;
79	margin: 0;	85		margin: 0;
80	}	86		}
81		87
		88	+	/* Workspace root container - normal state */
		89	+	paned, box {
		90	+	border: 0px solid transparent;
		91	+	transition: border-width 150ms ease-in-out, border-color 150ms ease-in-out;
		92	+	}
		93	+
		94	+	/* Pane mode active - thick orange border around workspace root */
		95	+	.workspace-pane-mode-active {
		96	+	border: 4px solid %s !important;
		97	+	}
		98	+
82	/* Base pane styling - subtle border for inactive panes */	99		/* Base pane styling - subtle border for inactive panes */
83	.workspace-pane, .stacked-pane-container {	100		.workspace-pane, .stacked-pane-container {
84	border: 2px solid %s;	101		border: 2px solid %s;

@@ -132,6 +149,7 @@ func (wm *WorkspaceManager) generateWorkspaceCSS() string {
132	/* Collapsed panes are hidden - handled in code via widget visibility */	149		/* Collapsed panes are hidden - handled in code via widget visibility */
133	}`,	150		}`,
134	windowBackgroundColor, // window background	151		windowBackgroundColor, // window background
		152	+	paneModeColor, // workspace-pane-mode-active border color
135	inactiveBorderColor, // base pane border color (inactive)	153		inactiveBorderColor, // base pane border color (inactive)
136	styling.BorderRadius, // base pane border radius	154		styling.BorderRadius, // base pane border radius
137	styling.TransitionDuration, // base pane border transition	155		styling.TransitionDuration, // base pane border transition