Configuring Status Buffer

Originally this post was a question on how to configure the status buffer by only having tabs and modes. But I figured it out so I edited the irrelevant bits away so it is easier to navigate for future curious folks. I go over what I did below.

Deleted. No longer relevant.

I did it! Thanks @jmercouris for your config I’ve been piecing together things from it and figured this out thanks to that and trial and error. For all future people I’ll have a brief explanation below.

First do note that I have a style.lisp separate from my init.lisp. So first in my init.lisp I have:

(defun my-format-status (window)
  (let ((buffer (current-buffer window)))
    (markup:markup
     (:div :id "container"
           (:div :id "tabs"
                 (markup:raw (format-status-tabs)))
           (:div :id "modes"
                 (markup:raw 
                  (format-status-load-status buffer)
                  (format-status-modes buffer window)))))))

(define-configuration window
  ((status-formatter #'my-format-status)))

This is what (by my understanding) is telling the status buffer container what to include and where. Pay attention to the arguments listed in the functions for format-status-xxxxx as those need to be included. The div id part is referencing your css; which leads me to the below in my style.lisp:

(define-configuration status-buffer
  ((style (str:concat
           %slot-default%
           (cl-css:css
            '(("#container"
                 ;; Columns: tabs, modes
                :grid-template-columns "90% 10%")
              ("#modes"
               :background-color "black"
               :border-top "1px solid white")
              (".button:hover" :color "white")
              ("#tabs"
               :background-color "black"
               :color "white"
               :border-top "1px solid white")
              (".tab:hover" :color "white"))))))))  

So obviously the colors are just what I wanted but the important bit is your #container section as using the :grid-template-columns tells the sections we defined in the init.lisp how much space to take up. I just used percentages to keep things flexible. The order of those corresponds with the order of your divs in the init file.

So if I did :grid-template-columns "10% 90%" instead then the tabs would take up 10% of what is available and the modes would have 90%.

As a further example if you just wanted to quickly customize the sizes of what is currently there (controls, url, tabs, modes) you can just add the below.

(define-configuration status-buffer
    ((style (str:concat 
             %slot-default%
             (cl-css:css
              '(("#container"
                 ;; Columns: controls, url
                 :grid-template-columns "25% 25% 25% 25%")))))))

And that would give each div a quarter of the space available. Obviously, you could of course swap those values out for other css like px and fr values. So that’s all. Image of mine below.

1 Like

Glad you figured it out! Looks super cool :slight_smile:

Also, thank you for providing the explanation! That will help people in the future hopefully!

Nice! Thanks for sharing.

Here is also a nice thing that you can try, open the Nyxt REPL, then:

(ffi-inspector-show (status-buffer (current-window)))

then you can inspect and see how things are rendered. Helps quite a bit :slight_smile:

Looks like this:

1 Like