simple styling

src/core/gfx.odin

@@ -107,6 +107,13 @@ free_font_atlas :: proc(font_atlas: FontAtlas) {
     }
 }
 
+draw_line :: proc(state: ^State, x1,y1,x2,y2: int, color: theme.PaletteColor) {
+    color := theme.get_palette_color(color)
+
+    sdl2.SetRenderDrawColor(state.sdl_renderer, color.r, color.g, color.b, color.a)
+    sdl2.RenderDrawLine(state.sdl_renderer, i32(x1), i32(y1), i32(x2), i32(y2))
+}
+
 draw_rect_outline :: proc(state: ^State, x,y,w,h: int, color: theme.PaletteColor) {
     color := theme.get_palette_color(color);
 

src/panels/panels.odin

@@ -63,7 +63,7 @@ register_default_leader_actions :: proc(input_map: ^core.InputActions) {
     }, "close this help");
 
     core.register_key_action(input_map, .R, proc(state: ^core.State) {
-        open(state, make_grep_panel(state))
+        open_grep_panel(state)
     }, "Grep Workspace")
 }
 
@@ -163,19 +163,39 @@ render_file_buffer :: proc(state: ^core.State, s: ^ui.State, buffer: ^core.FileB
 
     relative_file_path, _ := filepath.rel(state.directory, buffer.file_path, context.temp_allocator)
 
-    ui.open_element(s, nil, {
+    ui.open_element(s, nil,
-        dir = .TopToBottom,
+        {
-        kind = {ui.Grow{}, ui.Grow{}},
+            dir = .TopToBottom,
-    })
+            kind = {ui.Grow{}, ui.Grow{}},
+        },
+        style = {
+            border = {.Left, .Right, .Top, .Bottom},
+            border_color = .Background4,
+            background_color = .Background1,
+        }
+    )
     {
-        ui.open_element(s, ui.UI_Element_Kind_Custom{fn = draw_func, user_data = transmute(rawptr)buffer}, {
+        ui.open_element(s,
-            kind = {ui.Grow{}, ui.Grow{}}
+            ui.UI_Element_Kind_Custom{fn = draw_func, user_data = transmute(rawptr)buffer},
-        })
+            {
+                kind = {ui.Grow{}, ui.Grow{}}
+            },
+            style = {
+                border = {.Left, .Right, .Top, .Bottom},
+                border_color = .Background4,
+                background_color = .Background1,
+            }
+        )
         ui.close_element(s)
 
         ui.open_element(s, nil, {
             kind = {ui.Grow{}, ui.Exact(state.source_font_height)}
-        })
+            },
+            style = {
+                border = {.Left, .Right, .Top, .Bottom},
+                border_color = .Background4,
+            }
+        )
         {
             ui.open_element(s, fmt.tprintf("%s", state.mode), {})
             ui.close_element(s)
@@ -274,6 +294,13 @@ make_file_buffer_panel :: proc(buffer_index: int) -> core.Panel {
     }
 }
 
+open_grep_panel :: proc(state: ^core.State) {
+    open(state, make_grep_panel(state))
+
+    state.mode = .Insert
+    sdl2.StartTextInput()
+}
+
 make_grep_panel :: proc(state: ^core.State) -> core.Panel {
     query_arena: mem.Arena
     mem.arena_init(&query_arena, make([]u8, 1024*1024*2, state.ctx.allocator))
@@ -419,10 +446,16 @@ make_grep_panel :: proc(state: ^core.State) -> core.Panel {
                     {
                         if panel_state.query_results != nil {
                             // query results
-                            query_result_container := ui.open_element(s, nil, {
+                            query_result_container := ui.open_element(s, nil,
-                                dir = .TopToBottom,
+                                {
-                                kind = {ui.Grow{}, ui.Grow{}}
+                                    dir = .TopToBottom,
-                            })
+                                    kind = {ui.Grow{}, ui.Grow{}}
+                                },
+                                style = {
+                                    border = {.Left, .Right, .Top, .Bottom},
+                                    border_color = .Background4
+                                }
+                            )
                             {
                                 container_height := query_result_container.layout.size.y
                                 max_results := container_height / 16
@@ -442,14 +475,15 @@ make_grep_panel :: proc(state: ^core.State) -> core.Panel {
                                         ui.open_element(s, fmt.tprintf("%v:%v: ", result.line, result.col), {})
                                         ui.close_element(s)
 
-                                        // TODO: when styling is implemented, make this look better
+
+                                        style := ui.UI_Style{}
+
                                         if panel_state.selected_result == i {
-                                            ui.open_element(s, fmt.tprintf("%s <--", result.file_path), {})
+                                            style.background_color = .Background2
-                                            ui.close_element(s)
-                                        } else {
-                                            ui.open_element(s, result.file_path, {})
-                                            ui.close_element(s)
                                         }
+
+                                        ui.open_element(s, result.file_path, {}, style)
+                                        ui.close_element(s)
                                     }
                                 }
                             }

src/ui/ui.odin

@@ -26,6 +26,7 @@ UI_Element :: struct {
 
     kind: UI_Element_Kind,
     layout: UI_Layout,
+    style: UI_Style,
 }
 
 UI_Element_Kind :: union {
@@ -59,6 +60,15 @@ Exact :: distinct i32
 Grow :: struct {}
 Fit :: struct {}
 
+UI_Style :: struct {
+    border: UI_Border_Set,
+
+    border_color: theme.PaletteColor,
+    background_color: theme.PaletteColor,
+}
+UI_Border_Set :: bit_set[UI_Border]
+UI_Border :: enum{Left, Right, Top, Bottom}
+
 UI_Direction :: enum {
     LeftToRight,
     RightToLeft,
@@ -66,10 +76,11 @@ UI_Direction :: enum {
     BottomToTop,
 }
 
-open_element :: proc(state: ^State, kind: UI_Element_Kind, layout: UI_Layout) -> UI_Element {
+open_element :: proc(state: ^State, kind: UI_Element_Kind, layout: UI_Layout, style: UI_Style = {}) -> UI_Element {
     e := UI_Element {
         kind = kind,
         layout = layout,
+        style = style,
     }
     e.layout.pos = state.curr_elements[state.num_curr].layout.pos
     e.layout.size = state.curr_elements[state.num_curr].layout.size
@@ -108,7 +119,7 @@ close_element :: proc(state: ^State, loc := #caller_location) -> UI_Layout {
                 switch v in e.kind {
                     case UI_Element_Kind_Text: {
                         // FIXME: properly use font size
-                        e.layout.size.x = len(v) * 10
+                        e.layout.size.x = len(v) * 12
                     }
                     case UI_Element_Kind_Image: {
                         // TODO
@@ -354,24 +365,33 @@ draw :: proc(state: ^State, core_state: ^core.State) {
     for i in 0..<state.num_curr {
         e := &state.curr_elements[i]
 
+        core.draw_rect(
+            core_state,
+            e.layout.pos.x,
+            e.layout.pos.y,
+            e.layout.size.x,
+            e.layout.size.y,
+            e.style.background_color,
+        );
+
         switch v in e.kind {
             case nil: {
-                core.draw_rect(
+                // core.draw_rect(
-                    core_state,
+                //     core_state,
-                    e.layout.pos.x,
+                //     e.layout.pos.x,
-                    e.layout.pos.y,
+                //     e.layout.pos.y,
-                    e.layout.size.x,
+                //     e.layout.size.x,
-                    e.layout.size.y,
+                //     e.layout.size.y,
-                    .Background1
+                //     e.style.background_color,
-                );
+                // );
-                core.draw_rect_outline(
+                // core.draw_rect_outline(
-                    core_state,
+                //     core_state,
-                    e.layout.pos.x,
+                //     e.layout.pos.x,
-                    e.layout.pos.y,
+                //     e.layout.pos.y,
-                    e.layout.size.x,
+                //     e.layout.size.x,
-                    e.layout.size.y,
+                //     e.layout.size.y,
-                    .Background4
+                //     .Background4
-                );
+                // );
             }
             case UI_Element_Kind_Text: {
                 core.draw_text(core_state, string(v), e.layout.pos.x, e.layout.pos.y);
@@ -385,5 +405,51 @@ draw :: proc(state: ^State, core_state: ^core.State) {
         }
     }
 
+    // Separate loop done to draw border over elements
+    for i in 0..<state.num_curr {
+        e := &state.curr_elements[i]
+
+        if .Left in e.style.border {
+            core.draw_line(
+                core_state,
+                e.layout.pos.x,
+                e.layout.pos.y,
+                e.layout.pos.x,
+                e.layout.pos.y + e.layout.size.y,
+                e.style.border_color,
+            )
+        }
+        if .Right in e.style.border {
+            core.draw_line(
+                core_state,
+                e.layout.pos.x + e.layout.size.x,
+                e.layout.pos.y,
+                e.layout.pos.x + e.layout.size.x,
+                e.layout.pos.y + e.layout.size.y,
+                e.style.border_color,
+            )
+        }
+        if .Top in e.style.border {
+            core.draw_line(
+                core_state,
+                e.layout.pos.x,
+                e.layout.pos.y,
+                e.layout.pos.x + e.layout.size.x,
+                e.layout.pos.y,
+                e.style.border_color,
+            )
+        }
+        if .Bottom in e.style.border {
+            core.draw_line(
+                core_state,
+                e.layout.pos.x,
+                e.layout.pos.y + e.layout.size.y,
+                e.layout.pos.x + e.layout.size.x,
+                e.layout.pos.y + e.layout.size.y,
+                e.style.border_color,
+            )
+        }
+    }
+
     state.num_curr = 0
 }

todo.md

@@ -4,6 +4,9 @@
 - Odd scrolling behavior on small screen heights
 - Closing the only panel crashes
 
+# Visual QOL
+- Split grep search results into a table to avoid funky unaligned text
+
 # Planned Features
 - [ ] Highlight which panel is currently active
 - [ ] Persist end of line cursor position
@@ -42,10 +45,13 @@
     - [x] New UI
     - [ ] Styling
 - Undo/Redo
+    - [x] Basic/Naive Undo/Redo
+    - [ ] Interface for undo-able actions
     - [ ] Edit History Tree
     - [ ] Undo history saved to disk
 - Finish selections
     - [x] Guarantee that start and end are always ordered
+    - [ ] Whole Line Selections
     - Add in text actions
         - [x] Yank
         - [x] Delete