Vertical tabs for extra fanciness

4 files changed, 51 insertions, 24 deletions

diff --git a/init.lua b/init.lua
index 4b84113..ae1f181 100644
--- a/init.lua
+++ b/init.lua
@@ -56,15 +56,9 @@ web.event.add_listener('NotificationReceived', {
 
 -- Tabline
 require 'null-browser.extras.tabline'.init {
-  decoration = web.decorations.left,
+  decoration = web.decorations.top,
 }
 
-web.event.add_listener('WinCreated', {
-  callback = function(event)
-    web.decorations.left.set_size(200, { win = event.win_id })
-  end,
-})
-
 -- Statusline
 require 'null-browser.extras.statusline'.init {
   decoration = web.decorations.bottom,
diff --git a/lua/null-browser/api.lua b/lua/null-browser/api.lua
index 670de3a..4054895 100644
--- a/lua/null-browser/api.lua
+++ b/lua/null-browser/api.lua
@@ -315,10 +315,14 @@ function web.view.scroll_to_top(view_id) return __internals.view_scroll_to_top(v
 --- TODO: Document
 function web.view.scroll_to_bottom(view_id) return __internals.view_scroll_to_bottom(view_id) end
 
+--- Maps to values defined in ./src/widgets/Decorations.hpp
+local DecorationType = { top = 1, bottom = 2, left = 3, right = 4 }
+
 --- @class DecorationOpts
 --- @field win? number
 
 --- @class Decoration
+--- @field type fun(): 'left'|'right'|'top'|'bottom'
 --- @field enable fun(opts?: DecorationOpts): nil
 --- @field disable fun(opts?: DecorationOpts): nil
 --- @field set_enabled fun(enabled: boolean, opts?: DecorationOpts): nil
@@ -326,34 +330,30 @@ function web.view.scroll_to_bottom(view_id) return __internals.view_scroll_to_bo
 --- @field view fun(opts?: DecorationOpts): number|nil
 --- @field set_size fun(size: number, opts?: DecorationOpts): nil
 
---- @class DecorationType: number
-
 --- Decoration api
 ---
---- @param type DecorationType
+--- @param type 'left'|'right'|'top'|'bottom'
 --- @return Decoration
 local function create_decoration_api(type)
+  local type_id = DecorationType[type]
   local set_enabled = function(enabled, opts)
-    __internals.decorations_set_enabled(type, enabled, (opts or {}).win)
+    __internals.decorations_set_enabled(type_id, enabled, (opts or {}).win)
   end;
   return {
     type = function() return type end,
     enable = function(opts) set_enabled(true, opts) end,
     disable = function(opts) set_enabled(false, opts) end,
     is_enabled = function(opts)
-      return __internals.decorations_get_enabled(type, (opts or {}).win)
+      return __internals.decorations_get_enabled(type_id, (opts or {}).win)
     end,
     view = function(opts)
-      return __internals.decorations_get_view(type, (opts or {}).win)
+      return __internals.decorations_get_view(type_id, (opts or {}).win)
     end,
-    set_size = function(size, opts) __internals.decorations_set_size(type, size, (opts or {}).win) end,
+    set_size = function(size, opts) __internals.decorations_set_size(type_id, size, (opts or {}).win) end,
   }
 end
 
---- Maps to values defined in ./src/widgets/Decorations.hpp
-local DecorationType = { top = 1, bottom = 2, left = 3, right = 4 }
-
-web.decorations.top = create_decoration_api(DecorationType.top)
-web.decorations.bottom = create_decoration_api(DecorationType.bottom)
-web.decorations.left = create_decoration_api(DecorationType.left)
-web.decorations.right = create_decoration_api(DecorationType.right)
+web.decorations.top = create_decoration_api('top')
+web.decorations.bottom = create_decoration_api('bottom')
+web.decorations.left = create_decoration_api('left')
+web.decorations.right = create_decoration_api('right')
diff --git a/lua/null-browser/extras/tabline.lua b/lua/null-browser/extras/tabline.lua
index 9c53f41..81983a8 100644
--- a/lua/null-browser/extras/tabline.lua
+++ b/lua/null-browser/extras/tabline.lua
@@ -1,14 +1,23 @@
 local html = require 'null-browser.extras.html'
-local tabline = {}
+local tabline = {
+  config = { decoration = web.decorations.top }
+}
 
 -- TODO: vertical tabs
 function tabline.init(opts)
-  local decoration = (opts or {}).decoration or web.decorations.top
+  tabline.config = web.utils.table_merge(tabline.config, opts)
+  local decoration = tabline.config.decoration
 
   web.event.add_listener('WinCreated', {
     callback = function(event)
       decoration.enable({ win = event.win_id })
       tabline.show_tabs_in_window(event.win_id, decoration);
+
+      if tabline.is_vertical() then
+        tabline.config.decoration.set_size(200, { win = event.win_id })
+      else
+        tabline.config.decoration.set_size(20, { win = event.win_id })
+      end
     end,
   })
 
@@ -56,12 +65,16 @@ function tabline.tabs_html()
 
   local tabs_html = html.div({}, {
     html.style({}, { html.raw(tabline.css()) }),
-    html.div({ class = 'tabs' }, tab_list)
+    html.div({ class = 'tabs' .. (tabline.is_vertical() and ' vertical' or '') }, tab_list)
   })
 
   return html.to_string(tabs_html)
 end
 
+function tabline.is_vertical()
+  return web.utils.table_contains({ 'left', 'right' }, tabline.config.decoration.type())
+end
+
 function tabline.css()
   return [[
     html, body {
@@ -74,6 +87,13 @@ function tabline.css()
     }
     .tabs.vertical {
       flex-direction: column;
+      justify-contents: flex-start;
+      align-items: flex-start;
+    }
+    .tabs.vertical .tab {
+      border-left: none;
+      padding: 6px 3px;
+      flex: none;
     }
     .tab {
       all: unset;
diff --git a/lua/null-browser/utils.lua b/lua/null-browser/utils.lua
index 77ed60f..2e42edb 100644
--- a/lua/null-browser/utils.lua
+++ b/lua/null-browser/utils.lua
@@ -79,3 +79,16 @@ end
 function web.utils.equals(a, b)
   return is_deep_equal_helper(a, b, {})
 end
+
+--- Check if table contains given value
+--- @param tbl table
+--- @param value any
+--- @return boolean
+function web.utils.table_contains(tbl, value)
+  for _, tbl_val in ipairs(tbl) do
+    if tbl_val == value then
+      return true
+    end
+  end
+  return false
+end