added sketchybar config

dot_config/sketchybar/items/apple.lua

@@ -0,0 +1,36 @@
+local colors = require("colors")
+local icons = require("icons")
+local settings = require("settings")
+
+-- Padding item required because of bracket
+sbar.add("item", { width = 5 })
+
+local apple = sbar.add("item", {
+  icon = {
+    font = { size = 16.0 },
+    string = icons.apple,
+    padding_right = 8,
+    padding_left = 8,
+  },
+  label = { drawing = false },
+  background = {
+    color = colors.bg2,
+    border_color = colors.black,
+    border_width = 1
+  },
+  padding_left = 1,
+  padding_right = 1,
+  click_script = "$CONFIG_DIR/helpers/menus/bin/menus -s 0"
+})
+
+-- Double border for apple using a single item bracket
+sbar.add("bracket", { apple.name }, {
+  background = {
+    color = colors.transparent,
+    height = 30,
+    border_color = colors.grey,
+  }
+})
+
+-- Padding item required because of bracket
+sbar.add("item", { width = 7 })

dot_config/sketchybar/items/calendar.lua

@@ -0,0 +1,49 @@
+local settings = require("settings")
+local colors = require("colors")
+
+-- Padding item required because of bracket
+sbar.add("item", { position = "right", width = settings.group_paddings })
+
+local cal = sbar.add("item", {
+  icon = {
+    color = colors.white,
+    padding_left = 8,
+    font = {
+      style = settings.font.style_map["Black"],
+      size = 12.0,
+    },
+  },
+  label = {
+    color = colors.white,
+    padding_right = 8,
+    width = 49,
+    align = "right",
+    font = { family = settings.font.numbers },
+  },
+  position = "right",
+  update_freq = 30,
+  padding_left = 1,
+  padding_right = 1,
+  background = {
+    color = colors.bg2,
+    border_color = colors.black,
+    border_width = 1
+  },
+  click_script = "open -a 'Calendar'"
+})
+
+-- Double border for calendar using a single item bracket
+sbar.add("bracket", { cal.name }, {
+  background = {
+    color = colors.transparent,
+    height = 30,
+    border_color = colors.grey,
+  }
+})
+
+-- Padding item required because of bracket
+sbar.add("item", { position = "right", width = settings.group_paddings })
+
+cal:subscribe({ "forced", "routine", "system_woke" }, function(env)
+  cal:set({ icon = os.date("%a. %d %b."), label = os.date("%H:%M") })
+end)

dot_config/sketchybar/items/front_app.lua

@@ -0,0 +1,22 @@
+local colors = require("colors")
+local settings = require("settings")
+
+local front_app = sbar.add("item", "front_app", {
+  display = "active",
+  icon = { drawing = false },
+  label = {
+    font = {
+      style = settings.font.style_map["Black"],
+      size = 12.0,
+    },
+  },
+  updates = true,
+})
+
+front_app:subscribe("front_app_switched", function(env)
+  front_app:set({ label = { string = env.INFO } })
+end)
+
+front_app:subscribe("mouse.clicked", function(env)
+  sbar.trigger("swap_menus_and_spaces")
+end)

dot_config/sketchybar/items/init.lua

@@ -0,0 +1,7 @@
+require("items.apple")
+require("items.menus")
+require("items.spaces")
+require("items.front_app")
+require("items.calendar")
+require("items.widgets")
+require("items.media")

dot_config/sketchybar/items/media.lua

@@ -0,0 +1,118 @@
+local icons = require("icons")
+local colors = require("colors")
+
+local whitelist = { ["Spotify"] = true,
+                    ["Music"] = true    };
+
+local media_cover = sbar.add("item", {
+  position = "right",
+  background = {
+    image = {
+      string = "media.artwork",
+      scale = 0.85,
+    },
+    color = colors.transparent,
+  },
+  label = { drawing = false },
+  icon = { drawing = false },
+  drawing = false,
+  updates = true,
+  popup = {
+    align = "center",
+    horizontal = true,
+  }
+})
+
+local media_artist = sbar.add("item", {
+  position = "right",
+  drawing = false,
+  padding_left = 3,
+  padding_right = 0,
+  width = 0,
+  icon = { drawing = false },
+  label = {
+    width = 0,
+    font = { size = 9 },
+    color = colors.with_alpha(colors.white, 0.6),
+    max_chars = 18,
+    y_offset = 6,
+  },
+})
+
+local media_title = sbar.add("item", {
+  position = "right",
+  drawing = false,
+  padding_left = 3,
+  padding_right = 0,
+  icon = { drawing = false },
+  label = {
+    font = { size = 11 },
+    width = 0,
+    max_chars = 16,
+    y_offset = -5,
+  },
+})
+
+sbar.add("item", {
+  position = "popup." .. media_cover.name,
+  icon = { string = icons.media.back },
+  label = { drawing = false },
+  click_script = "nowplaying-cli previous",
+})
+sbar.add("item", {
+  position = "popup." .. media_cover.name,
+  icon = { string = icons.media.play_pause },
+  label = { drawing = false },
+  click_script = "nowplaying-cli togglePlayPause",
+})
+sbar.add("item", {
+  position = "popup." .. media_cover.name,
+  icon = { string = icons.media.forward },
+  label = { drawing = false },
+  click_script = "nowplaying-cli next",
+})
+
+local interrupt = 0
+local function animate_detail(detail)
+  if (not detail) then interrupt = interrupt - 1 end
+  if interrupt > 0 and (not detail) then return end
+
+  sbar.animate("tanh", 30, function()
+    media_artist:set({ label = { width = detail and "dynamic" or 0 } })
+    media_title:set({ label = { width = detail and "dynamic" or 0 } })
+  end)
+end
+
+media_cover:subscribe("media_change", function(env)
+  if whitelist[env.INFO.app] then
+    local drawing = (env.INFO.state == "playing")
+    media_artist:set({ drawing = drawing, label = env.INFO.artist, })
+    media_title:set({ drawing = drawing, label = env.INFO.title, })
+    media_cover:set({ drawing = drawing })
+
+    if drawing then
+      animate_detail(true)
+      interrupt = interrupt + 1
+      sbar.delay(5, animate_detail)
+    else
+      media_cover:set({ popup = { drawing = false } })
+    end
+  end
+end)
+
+media_cover:subscribe("mouse.entered", function(env)
+  interrupt = interrupt + 1
+  animate_detail(true)
+end)
+
+media_cover:subscribe("mouse.exited", function(env)
+  animate_detail(false)
+end)
+
+media_cover:subscribe("mouse.clicked", function(env)
+  media_cover:set({ popup = { drawing = "toggle" }})
+end)
+
+media_title:subscribe("mouse.exited.global", function(env)
+  media_cover:set({ popup = { drawing = false }})
+end)

dot_config/sketchybar/items/menus.lua

@@ -0,0 +1,76 @@
+local colors = require("colors")
+local icons = require("icons")
+local settings = require("settings")
+
+local menu_watcher = sbar.add("item", {
+  drawing = false,
+  updates = false,
+})
+local space_menu_swap = sbar.add("item", {
+  drawing = false,
+  updates = true,
+})
+sbar.add("event", "swap_menus_and_spaces")
+
+local max_items = 15
+local menu_items = {}
+for i = 1, max_items, 1 do
+  local menu = sbar.add("item", "menu." .. i, {
+    padding_left = settings.paddings,
+    padding_right = settings.paddings,
+    drawing = false,
+    icon = { drawing = false },
+    label = {
+      font = {
+        style = settings.font.style_map[i == 1 and "Heavy" or "Semibold"]
+      },
+      padding_left = 6,
+      padding_right = 6,
+    },
+    click_script = "$CONFIG_DIR/helpers/menus/bin/menus -s " .. i,
+  })
+
+  menu_items[i] = menu
+end
+
+sbar.add("bracket", { '/menu\\..*/' }, {
+  background = { color = colors.bg1 }
+})
+
+local menu_padding = sbar.add("item", "menu.padding", {
+  drawing = false,
+  width = 5
+})
+
+local function update_menus(env)
+  sbar.exec("$CONFIG_DIR/helpers/menus/bin/menus -l", function(menus)
+    sbar.set('/menu\\..*/', { drawing = false })
+    menu_padding:set({ drawing = true })
+    id = 1
+    for menu in string.gmatch(menus, '[^\r\n]+') do
+      if id < max_items then
+        menu_items[id]:set( { label = menu, drawing = true } )
+      else break end
+      id = id + 1
+    end
+  end)
+end
+
+menu_watcher:subscribe("front_app_switched", update_menus)
+
+space_menu_swap:subscribe("swap_menus_and_spaces", function(env)
+  local drawing = menu_items[1]:query().geometry.drawing == "on"
+  if drawing then
+    menu_watcher:set( { updates = false })
+    sbar.set("/menu\\..*/", { drawing = false })
+    sbar.set("/space\\..*/", { drawing = true })
+    sbar.set("front_app", { drawing = true })
+  else
+    menu_watcher:set( { updates = true })
+    sbar.set("/space\\..*/", { drawing = false })
+    sbar.set("front_app", { drawing = false })
+    update_menus()
+  end
+end)
+
+return menu_watcher

dot_config/sketchybar/items/spaces.lua

@@ -0,0 +1,177 @@
+local colors = require("colors")
+local icons = require("icons")
+local settings = require("settings")
+local app_icons = require("helpers.app_icons")
+
+local spaces = {}
+
+for i = 1, 10, 1 do
+  local space = sbar.add("space", "space." .. i, {
+    space = i,
+    icon = {
+      font = { family = settings.font.numbers },
+      string = i,
+      padding_left = 15,
+      padding_right = 8,
+      color = colors.white,
+      highlight_color = colors.red,
+    },
+    label = {
+      padding_right = 20,
+      color = colors.grey,
+      highlight_color = colors.white,
+      font = "sketchybar-app-font:Regular:16.0",
+      y_offset = -1,
+    },
+    padding_right = 1,
+    padding_left = 1,
+    background = {
+      color = colors.bg1,
+      border_width = 1,
+      height = 26,
+      border_color = colors.black,
+    },
+    popup = { background = { border_width = 5, border_color = colors.black } }
+  })
+
+  spaces[i] = space
+
+  -- Single item bracket for space items to achieve double border on highlight
+  local space_bracket = sbar.add("bracket", { space.name }, {
+    background = {
+      color = colors.transparent,
+      border_color = colors.bg2,
+      height = 28,
+      border_width = 2
+    }
+  })
+
+  -- Padding space
+  sbar.add("space", "space.padding." .. i, {
+    space = i,
+    script = "",
+    width = settings.group_paddings,
+  })
+
+  local space_popup = sbar.add("item", {
+    position = "popup." .. space.name,
+    padding_left= 5,
+    padding_right= 0,
+    background = {
+      drawing = true,
+      image = {
+        corner_radius = 9,
+        scale = 0.2
+      }
+    }
+  })
+
+  space:subscribe("space_change", function(env)
+    local selected = env.SELECTED == "true"
+    local color = selected and colors.grey or colors.bg2
+    space:set({
+      icon = { highlight = selected, },
+      label = { highlight = selected },
+      background = { border_color = selected and colors.black or colors.bg2 }
+    })
+    space_bracket:set({
+      background = { border_color = selected and colors.grey or colors.bg2 }
+    })
+  end)
+
+  space:subscribe("mouse.clicked", function(env)
+    if env.BUTTON == "other" then
+      space_popup:set({ background = { image = "space." .. env.SID } })
+      space:set({ popup = { drawing = "toggle" } })
+    else
+      local op = (env.BUTTON == "right") and "--destroy" or "--focus"
+      sbar.exec("yabai -m space " .. op .. " " .. env.SID)
+    end
+  end)
+
+  space:subscribe("mouse.exited", function(_)
+    space:set({ popup = { drawing = false } })
+  end)
+end
+
+local space_window_observer = sbar.add("item", {
+  drawing = false,
+  updates = true,
+})
+
+local spaces_indicator = sbar.add("item", {
+  padding_left = -3,
+  padding_right = 0,
+  icon = {
+    padding_left = 8,
+    padding_right = 9,
+    color = colors.grey,
+    string = icons.switch.on,
+  },
+  label = {
+    width = 0,
+    padding_left = 0,
+    padding_right = 8,
+    string = "Spaces",
+    color = colors.bg1,
+  },
+  background = {
+    color = colors.with_alpha(colors.grey, 0.0),
+    border_color = colors.with_alpha(colors.bg1, 0.0),
+  }
+})
+
+space_window_observer:subscribe("space_windows_change", function(env)
+  local icon_line = ""
+  local no_app = true
+  for app, count in pairs(env.INFO.apps) do
+    no_app = false
+    local lookup = app_icons[app]
+    local icon = ((lookup == nil) and app_icons["Default"] or lookup)
+    icon_line = icon_line .. icon
+  end
+
+  if (no_app) then
+    icon_line = " —"
+  end
+  sbar.animate("tanh", 10, function()
+    spaces[env.INFO.space]:set({ label = icon_line })
+  end)
+end)
+
+spaces_indicator:subscribe("swap_menus_and_spaces", function(env)
+  local currently_on = spaces_indicator:query().icon.value == icons.switch.on
+  spaces_indicator:set({
+    icon = currently_on and icons.switch.off or icons.switch.on
+  })
+end)
+
+spaces_indicator:subscribe("mouse.entered", function(env)
+  sbar.animate("tanh", 30, function()
+    spaces_indicator:set({
+      background = {
+        color = { alpha = 1.0 },
+        border_color = { alpha = 1.0 },
+      },
+      icon = { color = colors.bg1 },
+      label = { width = "dynamic" }
+    })
+  end)
+end)
+
+spaces_indicator:subscribe("mouse.exited", function(env)
+  sbar.animate("tanh", 30, function()
+    spaces_indicator:set({
+      background = {
+        color = { alpha = 0.0 },
+        border_color = { alpha = 0.0 },
+      },
+      icon = { color = colors.grey },
+      label = { width = 0, }
+    })
+  end)
+end)
+
+spaces_indicator:subscribe("mouse.clicked", function(env)
+  sbar.trigger("swap_menus_and_spaces")
+end)

dot_config/sketchybar/items/widgets/battery.lua

@@ -0,0 +1,100 @@
+local icons = require("icons")
+local colors = require("colors")
+local settings = require("settings")
+
+local battery = sbar.add("item", "widgets.battery", {
+  position = "right",
+  icon = {
+    font = {
+      style = settings.font.style_map["Regular"],
+      size = 19.0,
+    }
+  },
+  label = { font = { family = settings.font.numbers } },
+  update_freq = 180,
+  popup = { align = "center" }
+})
+
+local remaining_time = sbar.add("item", {
+  position = "popup." .. battery.name,
+  icon = {
+    string = "Time remaining:",
+    width = 100,
+    align = "left"
+  },
+  label = {
+    string = "??:??h",
+    width = 100,
+    align = "right"
+  },
+})
+
+
+battery:subscribe({"routine", "power_source_change", "system_woke"}, function()
+  sbar.exec("pmset -g batt", function(batt_info)
+    local icon = "!"
+    local label = "?"
+
+    local found, _, charge = batt_info:find("(%d+)%%")
+    if found then
+      charge = tonumber(charge)
+      label = charge .. "%"
+    end
+
+    local color = colors.green
+    local charging, _, _ = batt_info:find("AC Power")
+
+    if charging then
+      icon = icons.battery.charging
+    else
+      if found and charge > 80 then
+        icon = icons.battery._100
+      elseif found and charge > 60 then
+        icon = icons.battery._75
+      elseif found and charge > 40 then
+        icon = icons.battery._50
+      elseif found and charge > 20 then
+        icon = icons.battery._25
+        color = colors.orange
+      else
+        icon = icons.battery._0
+        color = colors.red
+      end
+    end
+
+    local lead = ""
+    if found and charge < 10 then
+      lead = "0"
+    end
+
+    battery:set({
+      icon = {
+        string = icon,
+        color = color
+      },
+      label = { string = lead .. label },
+    })
+  end)
+end)
+
+battery:subscribe("mouse.clicked", function(env)
+  local drawing = battery:query().popup.drawing
+  battery:set( { popup = { drawing = "toggle" } })
+
+  if drawing == "off" then
+    sbar.exec("pmset -g batt", function(batt_info)
+      local found, _, remaining = batt_info:find(" (%d+:%d+) remaining")
+      local label = found and remaining .. "h" or "No estimate"
+      remaining_time:set( { label = label })
+    end)
+  end
+end)
+
+sbar.add("bracket", "widgets.battery.bracket", { battery.name }, {
+  background = { color = colors.bg1 }
+})
+
+sbar.add("item", "widgets.battery.padding", {
+  position = "right",
+  width = settings.group_paddings
+})

dot_config/sketchybar/items/widgets/cpu.lua

@@ -0,0 +1,69 @@
+local icons = require("icons")
+local colors = require("colors")
+local settings = require("settings")
+
+-- Execute the event provider binary which provides the event "cpu_update" for
+-- the cpu load data, which is fired every 2.0 seconds.
+sbar.exec("killall cpu_load >/dev/null; $CONFIG_DIR/helpers/event_providers/cpu_load/bin/cpu_load cpu_update 2.0")
+
+local cpu = sbar.add("graph", "widgets.cpu" , 42, {
+  position = "right",
+  graph = { color = colors.blue },
+  background = {
+    height = 22,
+    color = { alpha = 0 },
+    border_color = { alpha = 0 },
+    drawing = true,
+  },
+  icon = { string = icons.cpu },
+  label = {
+    string = "cpu ??%",
+    font = {
+      family = settings.font.numbers,
+      style = settings.font.style_map["Bold"],
+      size = 9.0,
+    },
+    align = "right",
+    padding_right = 0,
+    width = 0,
+    y_offset = 4
+  },
+  padding_right = settings.paddings + 6
+})
+
+cpu:subscribe("cpu_update", function(env)
+  -- Also available: env.user_load, env.sys_load
+  local load = tonumber(env.total_load)
+  cpu:push({ load / 100. })
+
+  local color = colors.blue
+  if load > 30 then
+    if load < 60 then
+      color = colors.yellow
+    elseif load < 80 then
+      color = colors.orange
+    else
+      color = colors.red
+    end
+  end
+
+  cpu:set({
+    graph = { color = color },
+    label = "cpu " .. env.total_load .. "%",
+  })
+end)
+
+cpu:subscribe("mouse.clicked", function(env)
+  sbar.exec("open -a 'Activity Monitor'")
+end)
+
+-- Background around the cpu item
+sbar.add("bracket", "widgets.cpu.bracket", { cpu.name }, {
+  background = { color = colors.bg1 }
+})
+
+-- Background around the cpu item
+sbar.add("item", "widgets.cpu.padding", {
+  position = "right",
+  width = settings.group_paddings
+})

dot_config/sketchybar/items/widgets/init.lua

@@ -0,0 +1,4 @@
+require("items.widgets.battery")
+require("items.widgets.volume")
+require("items.widgets.wifi")
+require("items.widgets.cpu")

dot_config/sketchybar/items/widgets/volume.lua

@@ -0,0 +1,152 @@
+local colors = require("colors")
+local icons = require("icons")
+local settings = require("settings")
+
+local popup_width = 250
+
+local volume_percent = sbar.add("item", "widgets.volume1", {
+  position = "right",
+  icon = { drawing = false },
+  label = {
+    string = "??%",
+    padding_left = -1,
+    font = { family = settings.font.numbers }
+  },
+})
+
+local volume_icon = sbar.add("item", "widgets.volume2", {
+  position = "right",
+  padding_right = -1,
+  icon = {
+    string = icons.volume._100,
+    width = 0,
+    align = "left",
+    color = colors.grey,
+    font = {
+      style = settings.font.style_map["Regular"],
+      size = 14.0,
+    },
+  },
+  label = {
+    width = 25,
+    align = "left",
+    font = {
+      style = settings.font.style_map["Regular"],
+      size = 14.0,
+    },
+  },
+})
+
+local volume_bracket = sbar.add("bracket", "widgets.volume.bracket", {
+  volume_icon.name,
+  volume_percent.name
+}, {
+  background = { color = colors.bg1 },
+  popup = { align = "center" }
+})
+
+sbar.add("item", "widgets.volume.padding", {
+  position = "right",
+  width = settings.group_paddings
+})
+
+local volume_slider = sbar.add("slider", popup_width, {
+  position = "popup." .. volume_bracket.name,
+  slider = {
+    highlight_color = colors.blue,
+    background = {
+      height = 6,
+      corner_radius = 3,
+      color = colors.bg2,
+    },
+    knob= {
+      string = "􀀁",
+      drawing = true,
+    },
+  },
+  background = { color = colors.bg1, height = 2, y_offset = -20 },
+  click_script = 'osascript -e "set volume output volume $PERCENTAGE"'
+})
+
+volume_percent:subscribe("volume_change", function(env)
+  local volume = tonumber(env.INFO)
+  local icon = icons.volume._0
+  if volume > 60 then
+    icon = icons.volume._100
+  elseif volume > 30 then
+    icon = icons.volume._66
+  elseif volume > 10 then
+    icon = icons.volume._33
+  elseif volume > 0 then
+    icon = icons.volume._10
+  end
+
+  local lead = ""
+  if volume < 10 then
+    lead = "0"
+  end
+
+  volume_icon:set({ label = icon })
+  volume_percent:set({ label = lead .. volume .. "%" })
+  volume_slider:set({ slider = { percentage = volume } })
+end)
+
+local function volume_collapse_details()
+  local drawing = volume_bracket:query().popup.drawing == "on"
+  if not drawing then return end
+  volume_bracket:set({ popup = { drawing = false } })
+  sbar.remove('/volume.device\\.*/')
+end
+
+local current_audio_device = "None"
+local function volume_toggle_details(env)
+  if env.BUTTON == "right" then
+    sbar.exec("open /System/Library/PreferencePanes/Sound.prefpane")
+    return
+  end
+
+  local should_draw = volume_bracket:query().popup.drawing == "off"
+  if should_draw then
+    volume_bracket:set({ popup = { drawing = true } })
+    sbar.exec("SwitchAudioSource -t output -c", function(result)
+      current_audio_device = result:sub(1, -2)
+      sbar.exec("SwitchAudioSource -a -t output", function(available)
+        current = current_audio_device
+        local color = colors.grey
+        local counter = 0
+
+        for device in string.gmatch(available, '[^\r\n]+') do
+          local color = colors.grey
+          if current == device then
+            color = colors.white
+          end
+          sbar.add("item", "volume.device." .. counter, {
+            position = "popup." .. volume_bracket.name,
+            width = popup_width,
+            align = "center",
+            label = { string = device, color = color },
+            click_script = 'SwitchAudioSource -s "' .. device .. '" && sketchybar --set /volume.device\\.*/ label.color=' .. colors.grey .. ' --set $NAME label.color=' .. colors.white
+
+          })
+          counter = counter + 1
+        end
+      end)
+    end)
+  else
+    volume_collapse_details()
+  end
+end
+
+local function volume_scroll(env)
+  local delta = env.INFO.delta
+  if not (env.INFO.modifier == "ctrl") then delta = delta * 10.0 end
+
+  sbar.exec('osascript -e "set volume output volume (output volume of (get volume settings) + ' .. delta .. ')"')
+end
+
+volume_icon:subscribe("mouse.clicked", volume_toggle_details)
+volume_icon:subscribe("mouse.scrolled", volume_scroll)
+volume_percent:subscribe("mouse.clicked", volume_toggle_details)
+volume_percent:subscribe("mouse.exited.global", volume_collapse_details)
+volume_percent:subscribe("mouse.scrolled", volume_scroll)
+

dot_config/sketchybar/items/widgets/wifi.lua

@@ -0,0 +1,234 @@
+local icons = require("icons")
+local colors = require("colors")
+local settings = require("settings")
+
+-- Execute the event provider binary which provides the event "network_update"
+-- for the network interface "en0", which is fired every 2.0 seconds.
+sbar.exec("killall network_load >/dev/null; $CONFIG_DIR/helpers/event_providers/network_load/bin/network_load en0 network_update 2.0")
+
+local popup_width = 250
+
+local wifi_up = sbar.add("item", "widgets.wifi1", {
+  position = "right",
+  padding_left = -5,
+  width = 0,
+  icon = {
+    padding_right = 0,
+    font = {
+      style = settings.font.style_map["Bold"],
+      size = 9.0,
+    },
+    string = icons.wifi.upload,
+  },
+  label = {
+    font = {
+      family = settings.font.numbers,
+      style = settings.font.style_map["Bold"],
+      size = 9.0,
+    },
+    color = colors.red,
+    string = "??? Bps",
+  },
+  y_offset = 4,
+})
+
+local wifi_down = sbar.add("item", "widgets.wifi2", {
+  position = "right",
+  padding_left = -5,
+  icon = {
+    padding_right = 0,
+    font = {
+      style = settings.font.style_map["Bold"],
+      size = 9.0,
+    },
+    string = icons.wifi.download,
+  },
+  label = {
+    font = {
+      family = settings.font.numbers,
+      style = settings.font.style_map["Bold"],
+      size = 9.0,
+    },
+    color = colors.blue,
+    string = "??? Bps",
+  },
+  y_offset = -4,
+})
+
+local wifi = sbar.add("item", "widgets.wifi.padding", {
+  position = "right",
+  label = { drawing = false },
+})
+
+-- Background around the item
+local wifi_bracket = sbar.add("bracket", "widgets.wifi.bracket", {
+  wifi.name,
+  wifi_up.name,
+  wifi_down.name
+}, {
+  background = { color = colors.bg1 },
+  popup = { align = "center", height = 30 }
+})
+
+local ssid = sbar.add("item", {
+  position = "popup." .. wifi_bracket.name,
+  icon = {
+    font = {
+      style = settings.font.style_map["Bold"]
+    },
+    string = icons.wifi.router,
+  },
+  width = popup_width,
+  align = "center",
+  label = {
+    font = {
+      size = 15,
+      style = settings.font.style_map["Bold"]
+    },
+    max_chars = 18,
+    string = "????????????",
+  },
+  background = {
+    height = 2,
+    color = colors.grey,
+    y_offset = -15
+  }
+})
+
+local hostname = sbar.add("item", {
+  position = "popup." .. wifi_bracket.name,
+  icon = {
+    align = "left",
+    string = "Hostname:",
+    width = popup_width / 2,
+  },
+  label = {
+    max_chars = 20,
+    string = "????????????",
+    width = popup_width / 2,
+    align = "right",
+  }
+})
+
+local ip = sbar.add("item", {
+  position = "popup." .. wifi_bracket.name,
+  icon = {
+    align = "left",
+    string = "IP:",
+    width = popup_width / 2,
+  },
+  label = {
+    string = "???.???.???.???",
+    width = popup_width / 2,
+    align = "right",
+  }
+})
+
+local mask = sbar.add("item", {
+  position = "popup." .. wifi_bracket.name,
+  icon = {
+    align = "left",
+    string = "Subnet mask:",
+    width = popup_width / 2,
+  },
+  label = {
+    string = "???.???.???.???",
+    width = popup_width / 2,
+    align = "right",
+  }
+})
+
+local router = sbar.add("item", {
+  position = "popup." .. wifi_bracket.name,
+  icon = {
+    align = "left",
+    string = "Router:",
+    width = popup_width / 2,
+  },
+  label = {
+    string = "???.???.???.???",
+    width = popup_width / 2,
+    align = "right",
+  },
+})
+
+sbar.add("item", { position = "right", width = settings.group_paddings })
+
+wifi_up:subscribe("network_update", function(env)
+  local up_color = (env.upload == "000 Bps") and colors.grey or colors.red
+  local down_color = (env.download == "000 Bps") and colors.grey or colors.blue
+  wifi_up:set({
+    icon = { color = up_color },
+    label = {
+      string = env.upload,
+      color = up_color
+    }
+  })
+  wifi_down:set({
+    icon = { color = down_color },
+    label = {
+      string = env.download,
+      color = down_color
+    }
+  })
+end)
+
+wifi:subscribe({"wifi_change", "system_woke"}, function(env)
+  sbar.exec("ipconfig getifaddr en0", function(ip)
+    local connected = not (ip == "")
+    wifi:set({
+      icon = {
+        string = connected and icons.wifi.connected or icons.wifi.disconnected,
+        color = connected and colors.white or colors.red,
+      },
+    })
+  end)
+end)
+
+local function hide_details()
+  wifi_bracket:set({ popup = { drawing = false } })
+end
+
+local function toggle_details()
+  local should_draw = wifi_bracket:query().popup.drawing == "off"
+  if should_draw then
+    wifi_bracket:set({ popup = { drawing = true }})
+    sbar.exec("networksetup -getcomputername", function(result)
+      hostname:set({ label = result })
+    end)
+    sbar.exec("ipconfig getifaddr en0", function(result)
+      ip:set({ label = result })
+    end)
+    sbar.exec("ipconfig getsummary en0 | awk -F ' SSID : '  '/ SSID : / {print $2}'", function(result)
+      ssid:set({ label = result })
+    end)
+    sbar.exec("networksetup -getinfo Wi-Fi | awk -F 'Subnet mask: ' '/^Subnet mask: / {print $2}'", function(result)
+      mask:set({ label = result })
+    end)
+    sbar.exec("networksetup -getinfo Wi-Fi | awk -F 'Router: ' '/^Router: / {print $2}'", function(result)
+      router:set({ label = result })
+    end)
+  else
+    hide_details()
+  end
+end
+
+wifi_up:subscribe("mouse.clicked", toggle_details)
+wifi_down:subscribe("mouse.clicked", toggle_details)
+wifi:subscribe("mouse.clicked", toggle_details)
+wifi:subscribe("mouse.exited.global", hide_details)
+
+local function copy_label_to_clipboard(env)
+  local label = sbar.query(env.NAME).label.value
+  sbar.exec("echo \"" .. label .. "\" | pbcopy")
+  sbar.set(env.NAME, { label = { string = icons.clipboard, align="center" } })
+  sbar.delay(1, function()
+    sbar.set(env.NAME, { label = { string = label, align = "right" } })
+  end)
+end
+
+ssid:subscribe("mouse.clicked", copy_label_to_clipboard)
+hostname:subscribe("mouse.clicked", copy_label_to_clipboard)
+ip:subscribe("mouse.clicked", copy_label_to_clipboard)
+mask:subscribe("mouse.clicked", copy_label_to_clipboard)
+router:subscribe("mouse.clicked", copy_label_to_clipboard)