Add ModeChanged event and display mode in bottom decoration

2 files changed, 79 insertions, 2 deletions

diff --git a/lua/null-browser/extras/statusline.lua b/lua/null-browser/extras/statusline.lua
new file mode 100644
index 0000000..99b82cb
--- /dev/null
+++ b/lua/null-browser/extras/statusline.lua
@@ -0,0 +1,74 @@
+local statusline = {}
+
+local mode_labels = { n = "NORMAL", i = "INSERT" }
+
+function statusline.init(opts)
+  local decoration = (opts or {}).decoration or web.decorations.bottom
+
+  web.event.add_listener('WinCreated', {
+    callback = function(event)
+      decoration.enable({ win = event.win_id })
+      statusline.show_status_in_window(event.win_id, decoration)
+    end,
+  })
+
+  web.keymap.set('n', '<space>gg', function()
+    if decoration.is_enabled({ win = 0 }) then
+      decoration.disable({ win = 0 })
+    else
+      decoration.enable({ win = 0 })
+    end
+  end)
+end
+
+function statusline.show_status_in_window(win_id, decoration)
+  local show_statusline = function()
+    local view = decoration.view({ win = win_id })
+    if view == nil then return end
+    web.view.set_html(statusline.html(), { view = view })
+  end
+
+  web.schedule(function() show_statusline() end)
+  web.event.add_listener('ModeChanged', {
+    callback = function(_) show_statusline() end,
+  })
+end
+
+local mode_styles = {
+  n = "background-color: #007070; color: white;",
+  i = "background-color: #e06c75; color: white;",
+}
+
+function statusline.html()
+  local mode = web.keymap.get_mode()
+  local mode_label = mode_labels[mode] or mode
+  local styles = '<style>' .. statusline.css() .. '</style>'
+  local mode_style = mode_styles[mode] or ""
+  local html = '<div class="status">' ..
+      '<div class="mode" style="' .. mode_style .. '">' .. mode_label .. '</div>' ..
+      '</div>'
+  return styles .. html
+end
+
+function statusline.css()
+  return [[
+  .status {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: flex-start;
+    align-items: stretch;
+    background-color: #000;
+  }
+  .mode {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 8px;
+    font-weight: bold;
+    background-color: #888;
+  }
+  ]]
+end
+
+return statusline
diff --git a/lua/null-browser/extras/tabline.lua b/lua/null-browser/extras/tabline.lua
index b0d7761..42612e9 100644
--- a/lua/null-browser/extras/tabline.lua
+++ b/lua/null-browser/extras/tabline.lua
@@ -1,6 +1,5 @@
 local tabline = {}
 
--- TODO: click interaction
 -- TODO: vertical tabs
 function tabline.init(opts)
   local decoration = (opts or {}).decoration or web.decorations.top
@@ -50,7 +49,7 @@ function tabline.tabs_html()
     local classes = 'tab'
     if web.view.current() == view.id then classes = classes .. ' current' end
     local onclick = '__nullbrowser.tab_select({ view: ' .. view.id .. ' })'
-    local html = '<div class="' .. classes .. '" onclick="' .. onclick .. '">' .. text .. '</div>'
+    local html = '<button class="' .. classes .. '" onclick="' .. onclick .. '">' .. text .. '</button>'
     views_html = views_html .. html
   end
 
@@ -69,13 +68,17 @@ function tabline.css()
       height: 100vh;
     }
     .tab {
+      all: unset;
       flex: 1;
       width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
       text-wrap: nowrap;
+      text-align: left;
       min-width: 0;
       border-left: 1px solid white;
+      vertical-align: middle;
+      padding: 0 8px;
     }
     .tab.current {
       background: #333;