feat(browse): modern borderless TUI redesign with UX improvements (#43)

* feat(browse): redesign TUI with borderless minimal layout

Replace bordered Miller columns with a modern borderless design:
- Breadcrumb header (project › collection › doc) with muted pastel palette
- Borderless columns separated by thin │ pipes
- ▌ cursor accent bar on active column, · bullet prefixes for items
- Merged status + keybinding hints into a single footer line
- Centered OverlayInfo dialog for multi-line command output (:help, :marks)
- Extracted shared itemViewHeight() to fix fragile height duplication
- Fixed double separator subtraction in autoScroll width calculation

* fix(browse): show tab completion suggestions without shifting command line

Replace the separator line with suggestions instead of adding an extra
footer line, so the command input stays in a fixed position.

* fix(browse): show hint instead of quitting on Esc in normal mode

Esc now flashes "Press q to quit" rather than exiting, preventing
accidental session loss in this modal app. Esc still dismisses
overlays and exits other modes as expected.

* feat(browse): add :quit command

* fix(browse): Ctrl+C in command mode returns to normal mode instead of quitting

* fix(browse): dismiss status notification on any keypress

* feat(browse): add :man command with comprehensive scrollable manual

- Add :man command with full documentation of all keybindings,
  modes, commands, and features
- Make info overlay scrollable via viewport (j/k, pgup/pgdn)
  to support long content like the manual
- Add scroll percentage indicator in overlay footer
- Update :help to reference :man for the full manual

---------

Co-authored-by: Gustavo Hoirisch <355877+gugahoi@users.noreply.github.com>

Author: gugahoi

pkg/cmd/browse/command.go

@@ -82,6 +82,20 @@ type pendingFetchCmd struct {
 func initCommandRegistry() *CommandRegistry {
 	r := NewCommandRegistry()
 
+	r.Register(Command{
+		Name:        "quit",
+		Description: "Quit the application",
+		Usage:       ":quit",
+		Handler:     cmdQuit,
+	})
+
+	r.Register(Command{
+		Name:        "man",
+		Description: "Show the full manual",
+		Usage:       ":man",
+		Handler:     cmdMan,
+	})
+
 	r.Register(Command{
 		Name:        "help",
 		Description: "List all available commands",
@@ -148,12 +162,127 @@ func initCommandRegistry() *CommandRegistry {
 	return r
 }
 
+func cmdMan(m *Model, args []string) (string, error) {
+	return `FIRESTORE BROWSE — MANUAL
+
+OVERVIEW
+  A vim-style TUI for browsing Firestore databases.
+  Navigate collections and documents using Miller columns.
+
+MODES
+  NORMAL    Default mode. Navigate, view, and operate on data.
+  VISUAL    Select multiple items for bulk operations.
+  COMMAND   Enter commands with : prefix.
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+NAVIGATION
+
+  j / ↓           Move cursor down
+  k / ↑           Move cursor up
+  g               Jump to top of column
+  G               Jump to bottom of column
+  l / → / Enter   Navigate forward (open collection/document)
+  h / ← / Bksp    Navigate back (close column / collapse node)
+  Space           Toggle expand/collapse on tree node
+
+  Ctrl+d / PgDn   Scroll down (half page)
+  Ctrl+u / PgUp   Scroll up (half page)
+
+  Ctrl+g          Go to path (opens path input dialog)
+  /               Filter current column (substring match)
+
+  Ctrl+o          Jump back in history
+  Ctrl+i          Jump forward in history
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+MARKS & BOOKMARKS
+
+  m + [a-z]       Set a mark at current location
+  ' + [a-z]       Jump to a mark
+
+  :marks          List all set marks
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+TREE VIEW CONTROLS
+
+  zM              Fold all (collapse entire tree)
+  zR              Unfold all (expand entire tree)
+  z1              Fold to depth 1
+  z2              Fold to depth 2
+  z3              Fold to depth 3
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+DOCUMENT OPERATIONS
+
+  e               Edit document (opens $EDITOR)
+  d               Delete document (with confirmation)
+  r               Refresh current column
+  p               Toggle preview pane
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+CLIPBOARD / COPY
+
+  yy              Copy selected value (field value or path)
+  ya              Copy entire document as JSON
+  Y               Copy ID or field key
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+SORT & QUERY
+
+  s               Open sort dialog
+  S               Clear sort for current collection
+
+  :sort <f> [dir]       Sort by field (asc/desc)
+  :query <f> <op> <v>   Server-side Firestore query
+                        Operators: ==  !=  <  >  <=  >=
+                                   array-contains  in
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+VISUAL MODE
+
+  v               Toggle item selection / enter visual mode
+  V               Range select (anchor + move to extend)
+  j / k           Move and extend selection
+  d               Bulk delete selected documents
+  Esc             Exit visual mode
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+COMMANDS
+
+  :help                   List available commands
+  :man                    Show this manual
+  :quit                   Quit the application
+  :goto <path>            Navigate to a Firestore path
+  :refresh                Refresh current column
+  :sort <field> [asc|desc]  Sort collection by field
+  :query <f> <op> <val>   Filter with a server-side query
+  :set limit <n>          Set pagination limit (default: 50)
+  :export json|ndjson [f] Export documents (to file or clipboard)
+  :add [id]               Create a new document
+  :marks                  List all bookmarks
+
+  Tab in command mode autocompletes command names.
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+QUITTING
+
+  q               Quit
+  :quit           Quit
+  Ctrl+c          Quit (except in command mode, where it cancels)
+  Esc             Shows "Press q to quit" hint`, nil
+}
+
+func cmdQuit(m *Model, args []string) (string, error) {
+	m.pendingQuit = true
+	return "", nil
+}
+
 func cmdHelp(m *Model, args []string) (string, error) {
 	var lines []string
 	for _, cmd := range m.commandRegistry.All() {
 		lines = append(lines, fmt.Sprintf("  %-20s %s", cmd.Usage, cmd.Description))
 	}
-	return "Commands:\n" + strings.Join(lines, "\n"), nil
+	return "Commands:\n" + strings.Join(lines, "\n") + "\n\nType :man for the full manual.", nil
 }
 
 func cmdGoto(m *Model, args []string) (string, error) {

pkg/cmd/browse/model.go

@@ -28,6 +28,7 @@ const (
 	OverlaySortDialog
 	OverlayDeleteConfirm
 	OverlayFilter
+	OverlayInfo
 )
 
 func (m Mode) String() string {
@@ -66,6 +67,7 @@ type Model struct {
 	commandResult   string
 	pendingFetch    *pendingFetchCmd
 	pendingEditor   tea.Cmd
+	pendingQuit     bool
 
 	// Sort dialog
 	sortDialog sortDialogModel
@@ -109,6 +111,10 @@ type Model struct {
 	filterInput   textinput.Model
 	filterActive  bool
 	filterPattern string
+
+	// Info overlay (for :help, :marks, etc.)
+	infoContent  string
+	infoViewport viewport.Model
 }
 
 // sortStateEntry stores sort configuration for a collection path

pkg/cmd/browse/navigation.go

@@ -135,23 +135,28 @@ func (m *Model) moveCursor(delta int) {
 	}
 }
 
+func (m *Model) itemViewHeight() int {
+	h := m.height - 7 // outer chrome(5): header, blank, separator, status, footer; column header(2): title, underline
+	if h < 1 {
+		return 10
+	}
+	return h
+}
+
 // autoScroll adjusts scroll offset to keep cursor visible
 func (m *Model) autoScroll() {
 	if m.activeColumn >= len(m.columns) {
 		return
 	}
 
 	col := &m.columns[m.activeColumn]
-	// Match height calculation in view.go: m.height - 5 (header/statusbar/footer/error/margin) - 2 (borders)
-	viewHeight := m.height - 7
-	if viewHeight < 1 {
-		viewHeight = 10
-	}
+	viewHeight := m.itemViewHeight()
 
 	// Calculate column width and inner width (same as in renderColumn)
 	visibleCols := getVisibleColumns(m.columns, m.activeColumn)
-	colWidth := calculateColumnWidth(m.width, len(visibleCols))
-	innerWidth := max(colWidth-4, 1)
+	availWidth := m.width - 4 // 2 padding on each side
+	colWidth := calculateColumnWidth(availWidth, len(visibleCols))
+	innerWidth := max(colWidth-2, 1)
 
 	// Create wrapper for measuring wrapped line lengths
 	wrapper := lipgloss.NewStyle().Width(innerWidth)
@@ -167,8 +172,10 @@ func (m *Model) autoScroll() {
 		if section.hidden {
 			continue
 		}
-		// Section header takes 1 line
-		cursorLine++
+		// Section header takes 1 line (but "Documents" is skipped for collection columns)
+		if section.title != "Documents" || col.isDoc {
+			cursorLine++
+		}
 
 		if section.title == "Data" {
 			// Tree view logic - we need to traverse the tree to find where the cursor lands
@@ -297,19 +304,14 @@ func (m *Model) scrollDown() {
 	}
 
 	col := &m.columns[m.activeColumn]
-	viewHeight := m.height - 7
-	if viewHeight < 1 {
-		viewHeight = 10
-	}
+	viewHeight := m.itemViewHeight()
 
-	pageSize := viewHeight / 2 // Half page scroll
+	pageSize := viewHeight / 2
 	if pageSize < 1 {
 		pageSize = 1
 	}
 
 	col.scrollOffset += pageSize
-	// Upper bound will be checked in renderColumn, but we can't check it here
-	// because we don't know the full content length until render time.
 }
 
 // scrollUp scrolls the active column up by half a page
@@ -319,10 +321,7 @@ func (m *Model) scrollUp() {
 	}
 
 	col := &m.columns[m.activeColumn]
-	viewHeight := m.height - 7
-	if viewHeight < 1 {
-		viewHeight = 10
-	}
+	viewHeight := m.itemViewHeight()
 
 	pageSize := viewHeight / 2 // Half page scroll
 	if pageSize < 1 {
@@ -370,7 +369,6 @@ func (m *Model) removeLastColumn() {
 
 // calculateColumnWidth calculates the width for each column
 func calculateColumnWidth(termWidth int, numColumns int) int {
-	// Show max 4 columns at a time
 	visibleCols := numColumns
 	if visibleCols > 4 {
 		visibleCols = 4
@@ -380,10 +378,11 @@ func calculateColumnWidth(termWidth int, numColumns int) int {
 		return termWidth
 	}
 
-	// Account for borders and padding
-	width := (termWidth - (visibleCols * 4)) / visibleCols
+	// Separators between columns: " │ " = 3 chars each
+	separatorWidth := (visibleCols - 1) * 3
+	width := (termWidth - separatorWidth) / visibleCols
 	if width < 10 {
-		width = 10 // Minimum width
+		width = 10
 	}
 	return width
 }