detached f152952

feat(styling): add CSS styling for tab rename entry widget

Add comprehensive styling for inline tab rename Entry widgets with theme support:

Changes:
- Add getEntryBg() - background color for entry (dark: #2a2a2a, light: #e0e0e0)
- Add getEntryFocusBg() - focused background (dark: #323232, light: #f5f5f5)
- Add getEntryBorderColor() - border color (dark: #555555, light: #cccccc)

CSS Rules:
- .tab-rename-entry: Base styling with inset shadow, 80px min-width
  - Respects UI scale for font-size and padding
  - Matches tab title styling for consistency
- .tab-rename-entry:focus: Enhanced focus state
  - Brighter background and active pane border color
  - Stronger inset shadow for depth
  - No outline for clean appearance

Styling integrates with existing theme system and follows the same
visual patterns as stacked pane titles and tab buttons.
commit
f152952848ec7c4d55ebc9968232e0997103ba47
author
bnema · · 2025-11-18 18:06 UTC
parent
a7784cc
signature
unsigned
1 file · +52 -0
Unified
UnifiedSplit
M internal/app/browser/workspace_css.go +52 -0
@@ -52,6 +52,30 @@ func getActiveTabBg(isDark bool) string {
5252 return "#c0c0c0" // Significantly darker gray than inactive (#f0f0f0) - similar to stacked panes
5353 }
5454
55+// getEntryBg returns the background color for text entry widgets
56+func getEntryBg(isDark bool) string {
57+ if isDark {
58+ return "#2a2a2a" // Darker background for dark theme
59+ }
60+ return "#e0e0e0" // Darker gray for light theme
61+}
62+
63+// getEntryFocusBg returns the background color for focused entry widgets
64+func getEntryFocusBg(isDark bool) string {
65+ if isDark {
66+ return "#323232" // Slightly lighter when focused
67+ }
68+ return "#f5f5f5" // Very light gray when focused
69+}
70+
71+// getEntryBorderColor returns the border color for entry widgets
72+func getEntryBorderColor(isDark bool) string {
73+ if isDark {
74+ return "#555555" // Subtle border for dark theme
75+ }
76+ return "#cccccc" // Subtle border for light theme
77+}
78+
5579 // getActivePaneBorderColor returns the border color for active panes based on config and theme
5680 func getActivePaneBorderColor(styling config.WorkspaceStylingConfig, isDark bool) string {
5781 // Use configured border color if set
@@ -254,6 +278,26 @@ func (wm *WorkspaceManager) generateWorkspaceCSS() string {
254278 font-weight: 500;
255279 }
256280
281+ /* Tab rename entry */
282+ entry.tab-rename-entry {
283+ background-color: %s;
284+ color: %s;
285+ font-size: %dpx;
286+ padding: 2px %dpx;
287+ border: 1px solid %s;
288+ border-radius: 3px;
289+ box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4);
290+ min-width: 80px;
291+ min-height: 0;
292+ }
293+
294+ entry.tab-rename-entry:focus {
295+ background-color: %s;
296+ border-color: %s;
297+ box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.5);
298+ outline: none;
299+ }
300+
257301 /* Tab content area */
258302 .tab-content-area {
259303 background-color: %s;
@@ -306,6 +350,14 @@ func (wm *WorkspaceManager) generateWorkspaceCSS() string {
306350 getStackTitleBorderColor(isDark), // tab-button-active border-right
307351 titleFontSize, // tab-title font-size
308352 getStackTitleTextColor(isDark), // tab-title color
353+ // Tab rename entry styles
354+ getEntryBg(isDark), // entry.tab-rename-entry background
355+ getStackTitleTextColor(isDark), // entry.tab-rename-entry color (text)
356+ titleFontSize, // entry.tab-rename-entry font-size
357+ titlePaddingHorizontal, // entry.tab-rename-entry padding horizontal (vertical is hardcoded 2px)
358+ getEntryBorderColor(isDark), // entry.tab-rename-entry border-color
359+ getEntryFocusBg(isDark), // entry.tab-rename-entry:focus background
360+ activeBorderColor, // entry.tab-rename-entry:focus border-color (use active pane color)
309361 windowBackgroundColor, // tab-content-area background
310362 windowBackgroundColor, // tab-workspace-container background
311363 )
@@ -52,6 +52,30 @@ func getActiveTabBg(isDark bool) string {
52 return "#c0c0c0" // Significantly darker gray than inactive (#f0f0f0) - similar to stacked panes52 return "#c0c0c0" // Significantly darker gray than inactive (#f0f0f0) - similar to stacked panes
53 }53 }
54 54
55+// getEntryBg returns the background color for text entry widgets
56+func getEntryBg(isDark bool) string {
57+ if isDark {
58+ return "#2a2a2a" // Darker background for dark theme
59+ }
60+ return "#e0e0e0" // Darker gray for light theme
61+}
62+
63+// getEntryFocusBg returns the background color for focused entry widgets
64+func getEntryFocusBg(isDark bool) string {
65+ if isDark {
66+ return "#323232" // Slightly lighter when focused
67+ }
68+ return "#f5f5f5" // Very light gray when focused
69+}
70+
71+// getEntryBorderColor returns the border color for entry widgets
72+func getEntryBorderColor(isDark bool) string {
73+ if isDark {
74+ return "#555555" // Subtle border for dark theme
75+ }
76+ return "#cccccc" // Subtle border for light theme
77+}
78+
55 // getActivePaneBorderColor returns the border color for active panes based on config and theme79 // getActivePaneBorderColor returns the border color for active panes based on config and theme
56 func getActivePaneBorderColor(styling config.WorkspaceStylingConfig, isDark bool) string {80 func getActivePaneBorderColor(styling config.WorkspaceStylingConfig, isDark bool) string {
57 // Use configured border color if set81 // Use configured border color if set
@@ -254,6 +278,26 @@ func (wm *WorkspaceManager) generateWorkspaceCSS() string {
254 font-weight: 500;278 font-weight: 500;
255 }279 }
256 280
281+ /* Tab rename entry */
282+ entry.tab-rename-entry {
283+ background-color: %s;
284+ color: %s;
285+ font-size: %dpx;
286+ padding: 2px %dpx;
287+ border: 1px solid %s;
288+ border-radius: 3px;
289+ box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4);
290+ min-width: 80px;
291+ min-height: 0;
292+ }
293+
294+ entry.tab-rename-entry:focus {
295+ background-color: %s;
296+ border-color: %s;
297+ box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.5);
298+ outline: none;
299+ }
300+
257 /* Tab content area */301 /* Tab content area */
258 .tab-content-area {302 .tab-content-area {
259 background-color: %s;303 background-color: %s;
@@ -306,6 +350,14 @@ func (wm *WorkspaceManager) generateWorkspaceCSS() string {
306 getStackTitleBorderColor(isDark), // tab-button-active border-right350 getStackTitleBorderColor(isDark), // tab-button-active border-right
307 titleFontSize, // tab-title font-size351 titleFontSize, // tab-title font-size
308 getStackTitleTextColor(isDark), // tab-title color352 getStackTitleTextColor(isDark), // tab-title color
353+ // Tab rename entry styles
354+ getEntryBg(isDark), // entry.tab-rename-entry background
355+ getStackTitleTextColor(isDark), // entry.tab-rename-entry color (text)
356+ titleFontSize, // entry.tab-rename-entry font-size
357+ titlePaddingHorizontal, // entry.tab-rename-entry padding horizontal (vertical is hardcoded 2px)
358+ getEntryBorderColor(isDark), // entry.tab-rename-entry border-color
359+ getEntryFocusBg(isDark), // entry.tab-rename-entry:focus background
360+ activeBorderColor, // entry.tab-rename-entry:focus border-color (use active pane color)
309 windowBackgroundColor, // tab-content-area background361 windowBackgroundColor, // tab-content-area background
310 windowBackgroundColor, // tab-workspace-container background362 windowBackgroundColor, // tab-workspace-container background
311 )363 )

Keyboard shortcuts

Single-key shortcuts are on. ctrl k and esc work whatever this says.

ctrl k :
go to a section, branch, tag, file or repository
?
this list
j k
move the row cursor down / up
enter
open the row under the cursor; on Files, a directory opens or closes in place
↑ ↓ ← → home end
in the file tree (focus on a row): previous / next row, close / open a directory or go to its parent / first entry, first / last row. They never open a file
l h
on Files: open a directory or a file / close a directory or go up to its parent, then to the parent page. Elsewhere: into the side panel (on a merge request, its files) / back to the content; there j k move between its controls
g g G
first / last row
/
filter the list; on Files, find a file anywhere in the repository (esc clears, enter opens the best match)
b
switch branch or tag
g s g f g c g b g m g i g r g a
tabs: summary, files, commits, branches & tags, merge requests, issues, releases, actions (when available)
g h
home
w
wide mode: use the whole width of the screen, or not (remembered)
y
copy a permalink pinned to the commit
d u x
diff: split / unified / collapse or expand all
e E
diff: the whole file in view / every file, with the lines the hunks hide
n
merge request: next note in the diff
esc
close a dialog, leave a field

Branches 8

Tags 42

↑↓ moveenter openesc close