Merge pull request #701 from XimoCP/main

feat(hyprland-visual-editor): add icon/color settings and i18n support

Author: spiros132

hyprland-visual-editor/BarWidget.qml

@@ -1,3 +1,4 @@
+import QtQuick
 import Quickshell
 import qs.Commons
 import qs.Services.UI
@@ -6,39 +7,59 @@ import qs.Widgets
 NIconButton {
   id: root
 
+  // ── Injected Properties ──────────────────────────────────────────────
   property var pluginApi: null
-
   property ShellScreen screen
   property string widgetId: ""
   property string section: ""
   property int sectionWidgetIndex: -1
   property int sectionWidgetsCount: 0
 
+  // ── Configuration Logic (Fallback Pattern) ──────────────────────────
   property var cfg: pluginApi?.pluginSettings || ({})
   property var defaults: pluginApi?.manifest?.metadata?.defaultSettings || ({})
 
-  readonly property string iconColorKey: cfg.iconColor ?? defaults.iconColor ?? "onSurface"
-
-  icon: "adjustments-horizontal"
+  readonly property string iconKey: cfg.icon ?? defaults.icon ?? "adjustments-horizontal"
+  readonly property string iconColorKey: cfg.iconColor ?? defaults.iconColor ?? "primary"
+  
+  // ── Visual Configuration ─────────────────────────────────────────────────
+  icon: iconKey
+  
+  // NIconButton already manages tooltips automatically with these two properties:
   tooltipText: pluginApi?.tr("widget.tooltip")
-
   tooltipDirection: BarService.getTooltipDirection(screen?.name)
-  baseSize: Style.getCapsuleHeightForScreen(screen?.name)
 
+  baseSize: Style.getCapsuleHeightForScreen(screen?.name)
   customRadius: Style.radiusM 
 
   colorBg: Style.capsuleColor
-  colorFg: Color.resolveColorKey(iconColorKey)
+  
+  // Color resolution with transparency protection (Alpha check)
+  colorFg: {
+    let resolved = Color.resolveColorKeyOptional(iconColorKey);
+    if (root.containsMouse) return Color.mOnHover;
+    return resolved.a > 0 ? resolved : Color.mOnSurface;
+  }
 
   border.color: Style.capsuleBorderColor
   border.width: Style.borderS
 
+  // Color transition smoothing
+  Behavior on colorFg {
+    ColorAnimation { 
+      duration: Style.animationFast
+      easing.type: Easing.InOutQuad 
+    }
+  }
+
+  // ── Interacciones ────────────────────────────────────────────────────────
   onClicked: {
     if (pluginApi) {
       pluginApi.openPanel(root.screen, this);
     }
   }
 
+  // Context menu (Right click)
   NPopupContextMenu {
     id: contextMenu
 

hyprland-visual-editor/Main.qml

@@ -0,0 +1,25 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import qs.Commons
+
+Item {
+  id: root
+  property var pluginApi: null
+
+  // Shared state accessible from other components via pluginApi.mainInstance
+  property bool isActive: false
+
+  // IPC handler for CLI control (qs ipc call plugin:my-plugin commandName)
+  IpcHandler {
+    target: "plugin:hyprland-visual-editor"
+
+    function toggle() {
+      if (pluginApi) {
+        pluginApi.withCurrentScreen(screen => {
+          pluginApi.togglePanel(screen);
+        });
+      }
+    }
+  }
+}

hyprland-visual-editor/Settings.qml

@@ -1,57 +1,100 @@
 import QtQuick
 import QtQuick.Layouts
+import Quickshell
 import qs.Commons
 import qs.Widgets
 
 ColumnLayout {
   id: root
-
   property var pluginApi: null
 
-  property var cfg: pluginApi?.pluginSettings || ({})
-  property var defaults: pluginApi?.manifest?.metadata?.defaultSettings || ({})
+  // Settings and default values (Official Noctalia pattern)
+  readonly property var cfg: pluginApi?.pluginSettings || ({})
+  readonly property var defaults: pluginApi?.manifest?.metadata?.defaultSettings || ({})
+
+  // 1. Local state ('edit' convention to avoid unnecessary disk writes)
+  property string editOverlayPath: cfg.overlayPath ?? defaults.overlayPath ?? "~/.cache/noctalia/HVE/overlay.conf"
+  property bool editAutoApply: cfg.autoApply ?? defaults.autoApply ?? true
+  property string editIcon: cfg.icon ?? defaults.icon ?? "adjustments-horizontal"
+  property string editIconColor: cfg.iconColor ?? defaults.iconColor ?? "primary"
 
-  property string valueOverlayPath: cfg.overlayPath ?? defaults.overlayPath ?? "~/.cache/noctalia/HVE/overlay.conf"
-  property bool valueAutoApply: cfg.autoApply ?? defaults.autoApply ?? true
+  spacing: Style.marginM
 
-  spacing: Style.marginL
+  // ── Preview ──────────────────────────────────────────────────────────
+  RowLayout {
+    spacing: Style.marginM
+    Layout.alignment: Qt.AlignHCenter
+    Layout.topMargin: Style.marginL
+    Layout.bottomMargin: Style.marginL
 
-  Component.onCompleted: {
-    Logger.d("HVE", "Settings UI loaded");
+    NIcon {
+      icon: root.editIcon
+      pointSize: Style.fontSizeXXL * 2
+      color: {
+        let res = Color.resolveColorKeyOptional(root.editIconColor);
+        return res.a > 0 ? res : Color.mOnSurface;
+      }
+    }
+    
+    NText {
+      text: pluginApi?.tr("settings.preview_label")
+      font.weight: Font.Bold
+    }
   }
 
-  ColumnLayout {
-    spacing: Style.marginM
+  // ── Icon Configuration ────────────────────────────────────────────────
+  NButton {
     Layout.fillWidth: true
+    text: pluginApi?.tr("settings.change_icon_button")
+    icon: "search"
+    onClicked: iconPicker.open()
+  }
 
-    NTextInput {
-      Layout.fillWidth: true
-      label: pluginApi?.tr("settings.path.label")
-      description: pluginApi?.tr("settings.path.desc")
-      text: root.valueOverlayPath
-      onTextChanged: root.valueOverlayPath = text
-      readOnly: true
+  NIconPicker {
+    id: iconPicker
+    initialIcon: root.editIcon
+    onIconSelected: iconName => {
+      root.editIcon = iconName
     }
+  }
 
-    NToggle {
-      Layout.fillWidth: true
-      label: pluginApi?.tr("settings.autoapply.label")
-      description: pluginApi?.tr("settings.autoapply.desc")
-      checked: root.valueAutoApply
-      onToggled: root.valueAutoApply = !root.valueAutoApply
-    }
+  NColorChoice {
+    label: pluginApi?.tr("settings.icon_color_label")
+    currentKey: root.editIconColor
+    onSelected: key => { root.editIconColor = key }
+    defaultValue: defaults.iconColor || "primary"
   }
 
-  function saveSettings() {
-    if (!pluginApi) {
-      Logger.e("HVE", "Cannot save settings: pluginApi is null");
-      return;
-    }
+  NDivider { Layout.fillWidth: true }
+
+  // ── Files and Application Configuration ────────────────────────────────
+  NTextInput {
+    Layout.fillWidth: true
+    label: pluginApi?.tr("settings.path_label")
+    description: pluginApi?.tr("settings.path_desc")
+    text: root.editOverlayPath
+    onTextChanged: root.editOverlayPath = text
+    readOnly: true
+  }
 
-    pluginApi.pluginSettings.overlayPath = root.valueOverlayPath;
-    pluginApi.pluginSettings.autoApply = root.valueAutoApply;
-    pluginApi.saveSettings();
+  NToggle {
+    Layout.fillWidth: true
+    label: pluginApi?.tr("settings.autoapply_label")
+    description: pluginApi?.tr("settings.autoapply_description")
+    checked: root.editAutoApply
+    onToggled: checked => { root.editAutoApply = checked }
+  }
 
-    Logger.d("HVE", "Settings saved successfully");
+  // ── Save Function (Required by the Shell) ──────────────────────────
+  function saveSettings() {
+    if (!pluginApi) return
+    
+    pluginApi.pluginSettings.overlayPath = root.editOverlayPath
+    pluginApi.pluginSettings.autoApply = root.editAutoApply
+    pluginApi.pluginSettings.icon = root.editIcon
+    pluginApi.pluginSettings.iconColor = root.editIconColor
+    
+    pluginApi.saveSettings()
+    Logger.i("HVE", "Settings saved")
   }
 }

hyprland-visual-editor/i18n/de.json

@@ -239,13 +239,12 @@
     }
   },
   "settings": {
-    "path": {
-      "label": "Konfigurationspfad",
-      "desc": "Absoluter Pfad für die Satelliten-Konfigurationsdatei."
-    },
-    "autoapply": {
-      "label": "Automatisch anwenden",
-      "desc": "Hyprland automatisch neu laden, wenn sich die Einstellungen ändern."
-    }
+    "preview_label": "Vorschau",
+    "change_icon_button": "Widget-Icon ändern",
+    "icon_color_label": "Icon-Farbe",
+    "autoapply_label": "Automatisch anwenden",
+    "autoapply_description": "Hyprland sofort neu laden beim Speichern",
+    "path_label": "Konfigurationspfad",
+    "path_desc": "Absoluter Pfad für die Satelliten-Konfigurationsdatei."
   }
 }

hyprland-visual-editor/i18n/en.json

@@ -239,13 +239,12 @@
     }
   },
   "settings": {
-    "path": {
-      "label": "Config Path",
-      "desc": "Absolute path for the satellite configuration file."
-    },
-    "autoapply": {
-      "label": "Auto Apply",
-      "desc": "Automatically reload Hyprland when settings change."
-    }
+    "preview_label": "Preview",
+    "change_icon_button": "Change Widget Icon",
+    "icon_color_label": "Icon Color",
+    "autoapply_label": "Auto Apply",
+    "autoapply_description": "Instantly reload Hyprland when saving",
+    "path_label": "Config Path",
+    "path_desc": "Absolute path for the satellite configuration file."
   }
 }

hyprland-visual-editor/i18n/es.json

@@ -239,13 +239,12 @@
     }
   },
   "settings": {
-    "path": {
-      "label": "Ruta de Configuración",
-      "desc": "Ruta absoluta para el archivo de configuración satélite."
-    },
-    "autoapply": {
-      "label": "Aplicación Automática",
-      "desc": "Recargar Hyprland automáticamente al cambiar los ajustes."
-    }
+    "preview_label": "Vista previa",
+    "change_icon_button": "Cambiar icono del widget",
+    "icon_color_label": "Color del icono",
+    "autoapply_label": "Aplicar automáticamente",
+    "autoapply_description": "Actualiza Hyprland al instante al guardar",
+    "path_label": "Ruta de Configuración",
+    "path_desc": "Ruta absoluta para el archivo de configuración satélite."
   }
 }

hyprland-visual-editor/i18n/fr.json

@@ -239,13 +239,12 @@
     }
   },
   "settings": {
-    "path": {
-      "label": "Chemin de configuration",
-      "desc": "Chemin absolu pour le fichier de configuration satellite."
-    },
-    "autoapply": {
-      "label": "Application automatique",
-      "desc": "Recharger automatiquement Hyprland lorsque les paramètres changent."
-    }
+    "preview_label": "Aperçu",
+    "change_icon_button": "Changer l'icône du widget",
+    "icon_color_label": "Couleur de l'icône",
+    "autoapply_label": "Application automatique",
+    "autoapply_description": "Recharger instantanément Hyprland lors de la sauvegarde",
+    "path_label": "Chemin de configuration",
+    "path_desc": "Chemin absolu pour le fichier de configuration satellite."
   }
 }