modify styles

layout.go

@@ -2,12 +2,13 @@ package main
 
 // layout constants
 const (
-	minFsTreeWidth    = 5
+	minFsTreeWidth     = 5
-	minNoteViewWidth  = 10
+	minNoteViewWidth   = 10
-	dividerWidth      = 1
+	dividerWidth       = 1
-	dragHitArea       = 2 // +/- chars around divider
+	dragHitArea        = 2 // +/- chars around divider
-	fsTreeStartOffset = 0 // there's bug when this is not 0 and the terminal height is small; I don't want to bother
+	fsTreeStartOffset  = 0 // there's bug when this is not 0 and the terminal height is small; I don't want to bother
-	statusBarHeight   = 3
+	statusBarHeight    = 3
+	fsTreeWidthPercent = 15
 )
 
 // calculateLayout computes the widths for the file tree and note view
@@ -16,7 +17,7 @@ func calculateLayout(totalWidth, requestedTreeWidth int) (treeWidth, noteWidth i
 	treeWidth = requestedTreeWidth
 
 	if treeWidth == 0 {
-		treeWidth = totalWidth / 4
+		treeWidth = totalWidth * fsTreeWidthPercent / 100
 	}
 
 	maxTreeWidth := totalWidth - dividerWidth - minNoteViewWidth

notes.go

@@ -16,6 +16,7 @@ import (
 	"github.com/charmbracelet/bubbles/viewport"
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/glamour"
+	glStyles "github.com/charmbracelet/glamour/styles"
 	"github.com/charmbracelet/lipgloss"
 	"github.com/yuin/goldmark"
 	"github.com/yuin/goldmark/ast"
@@ -66,7 +67,7 @@ type loadedNote struct {
 
 func NewNoteView() *NoteView {
 	mdRenderer, _ := glamour.NewTermRenderer(
-		glamour.WithAutoStyle(),
+		glamour.WithStylePath(glStyles.TokyoNightStyle),
 		glamour.WithWordWrap(80),
 	)
 	ta := textarea.New()

styles/styles.go

@@ -12,21 +12,12 @@ import "github.com/charmbracelet/lipgloss"
 // ==================== colors ====================
 var (
 	Primary        = lipgloss.Color("#7D56F4")
-	Secondary      = lipgloss.Color("#FF5C8F")
+	Highlight      = lipgloss.Color("#89DDFF")
-	Background     = lipgloss.Color("#1E1E2E")
+	HoverHighlight = lipgloss.Color("#91B4D5")
-	Highlight      = lipgloss.Color("#FFA500") // Orange highlight for selected node
-	HoverHighlight = lipgloss.Color("#4ECDC4") // Teal highlight for hovered node
 	// TODO: to extend as needed, right now this is just a
 	// placeholder
 )
 
-// ==================== lipgloss styles ====================
-var (
-	DividerStyle = lipgloss.NewStyle().
-		Width(1).
-		Background(Primary)
-)
-
 // ==================== icons ====================
 var (
 	VerticalLine   = "│"