[pomodoro] Add support for vertical bars + Add widget glyph selection to settings (#131)

* add pomodoro plugin

* add thumbnail.webp

* fix translations

* fix translation key

* add required sections to README, add deps field to manifest

* small fixes

* fix config keys

* review fixes

* fix(readme) typos

* fix widget for vertical bars

* update version

* small fix

* add glyph selection to widget settings

* sort translations

* fix indentations

---------

Co-authored-by: Kirill Sergeev <sergeev@ap-team.ru>
Co-authored-by: Lemmy <studio@quadbyte.net>

pomodoro/plugin.toml

@@ -1,6 +1,6 @@
 id           = "thepunkoff/pomodoro"
 name         = "Pomodoro Timer"
-version      = "1.0.0"
+version      = "1.1.0"
 plugin_api   = 3
 author       = "thepunkoff"
 license = "MIT"
@@ -56,6 +56,27 @@ default = false
 id = "widget"
 entry = "widget.luau"
 
+    [[widget.setting]]
+    key     = "widget-glyph-main"
+    type    = "glyph"
+    label_key = "settings.widget.glyph-main.label"
+    description_key = "settings.widget.glyph-main.description"
+    default = "brain"
+
+    [[widget.setting]]
+    key     = "widget-glyph-work"
+    type    = "glyph"
+    label_key = "settings.widget.glyph-work.label"
+    description_key = "settings.widget.glyph-work.description"
+    default = "brain"
+
+    [[widget.setting]]
+    key     = "widget-glyph-break"
+    type    = "glyph"
+    label_key = "settings.widget.glyph-break.label"
+    description_key = "settings.widget.glyph-break.description"
+    default = "coffee"
+
 [[panel]]
 id = "panel"
 entry = "panel.luau"

pomodoro/translations/en.json

@@ -35,6 +35,20 @@
       "description": "Duration of short breaks in minutes",
       "label": "Short Break Duration"
     },
+    "widget": {
+        "glyph-break": {
+            "description": "Name of the icon that appears during a break.",
+            "label": "Break Icon"
+        },
+        "glyph-main": {
+            "description": "Name of the icon that appears when idle.",
+            "label": "Main Icon"
+        },
+        "glyph-work": {
+            "description": "Name of the icon that appears when working.",
+            "label": "Work Icon"
+        }
+    },
     "work-duration": {
       "description": "Duration of each work session in minutes",
       "label": "Work Duration"

pomodoro/widget.luau

@@ -1,43 +1,62 @@
+local isVertical = barWidget.isVertical()
+local hasResetAllBeenCalled = true
+
 function onClick()
     noctalia.togglePanel("thepunkoff/pomodoro:panel")
 end
 
-local isUpdating = false
-noctalia.state.watch("pomodoro.nextCommand", function(command)
-    if command == "toggle" then
-        isUpdating = true 
-    elseif command == "resetAll" then
-        isUpdating = false
-        barWidget.setGlyph("brain")
-        barWidget.setGlyphColor("default")
-        barWidget.setColor("default")
-        barWidget.setText("")
-    end
-end)
+local function render(state)
+    local color = if state.isRunning then "primary" else "on_surface"
+    local name =
+        if hasResetAllBeenCalled then 
+            noctalia.getConfig("widget-glyph-main")
+        else
+            if state.sessionPtr.stage == 1 then
+                noctalia.getConfig("widget-glyph-work")
+            else noctalia.getConfig("widget-glyph-break")
 
---- main
-barWidget.setGlyph("brain")
-
-noctalia.state.watch("pomodoro.state", function(state)
-    if not isUpdating then
-        return
-    end
-
-    local stageIcon = if state.sessionPtr.stage == 1 then "brain" else "coffee"
-    barWidget.setGlyph(stageIcon)
-
-    if state.isRunning then
-        barWidget.setGlyphColor("primary")
-        barWidget.setColor("primary")
-    else
-        barWidget.setGlyphColor("default")
-        barWidget.setColor("default")
-    end
+    local content = { ui.glyph ({ color = color, name = name }) }
 
     local hours = math.floor(state.secondsLeft / 3600)
     local mins = math.floor((state.secondsLeft % 3600) / 60)
     local secs = state.secondsLeft % 60
 
-    local time = if hours == 0 then string.format("%02d:%02d", mins, secs) else string.format("%d:%02d:%02d", hours, mins, secs)
-    barWidget.setText(time)
+    local labelTime =
+        if not isVertical then
+            if hours == 0 then
+                string.format("%02d:%02d", mins, secs)
+            else
+                string.format("%d:%02d:%02d", hours, mins, secs)
+        else
+            if hours == 0 then
+                string.format("%02d\n%02d", mins, secs)
+            else
+                string.format("%02d\n%02d\n%02d", hours, mins, secs)
+
+    if not hasResetAllBeenCalled then
+        table.insert(content, ui.label({
+            text = labelTime,
+            textAlign = "center",
+            color = color
+        }))
+    end
+
+    local container = if isVertical then ui.column else ui.row
+    barWidget.render(container({ gap = 4, align = "center", justify = "center" }, content))
+end
+
+--- main
+render(noctalia.state.get("pomodoro.state"))
+
+noctalia.state.watch("pomodoro.nextCommand", function(command)
+    if command == "toggle" then
+        hasResetAllBeenCalled = false
+    elseif command == "resetAll" then
+        hasResetAllBeenCalled = true
+        render(noctalia.state.get("pomodoro.state"))
+    end
+end)
+
+noctalia.state.watch("pomodoro.state", function(state)
+    render(state)
 end)