new classic hand style , settings layout change (are there any better ways?)

.config/quickshell/ii/modules/background/CookieClock.qml

@@ -202,30 +202,22 @@ Item {
         anchors.fill: parent
         z: Config.options.background.clock.cookie.hourHandStyle === "fill" ? 3 : 1
         rotation: -90 + (360 / 12) * (root.clockHour + root.clockMinute / 60)
-        // Using two different rectangle for animation. Can be used only one with border.color && border.width
         Rectangle {
-            // fill
+            opacity: Config.options.background.clock.cookie.hourHandStyle !== "hide" ? 1.0 : 0
-            opacity: Config.options.background.clock.cookie.hourHandStyle === "fill" ? 1.0 : 0
             anchors.verticalCenter: parent.verticalCenter
-            x: parent.width / 2 - hourHandWidth / 2
+            x: Config.options.background.clock.cookie.hourHandStyle === "classic" ? (parent.width / 2 - minuteHandWidth / 2) - 15 : parent.width / 2 - minuteHandWidth / 2
             width: hourHandLength
-            height: hourHandWidth
+            height: Config.options.background.clock.cookie.hourHandStyle === "classic" ? 8 : hourHandWidth
-            radius: hourHandWidth / 2
+            radius: Config.options.background.clock.cookie.hourHandStyle === "classic" ? 2 : hourHandWidth / 2
-            color : root.colHourHand
+            color : Config.options.background.clock.cookie.hourHandStyle === "stroke" ? "transparent" : root.colHourHand
+            border.color: root.colHourHand
+            border.width: 4
             Behavior on opacity {
                 animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
             }
-        }
+            Behavior on x{
-        Rectangle {
+                animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-            // border
+            }
-            anchors.verticalCenter: parent.verticalCenter
-            x: parent.width / 2 - hourHandWidth / 2
-            width: hourHandLength
-            height: hourHandWidth
-            radius: hourHandWidth / 2
-            color: "transparent"
-            border.color: root.colHourHand
-            border.width: 4 
         }
     }
 
@@ -240,14 +232,17 @@ Item {
         }
         Rectangle {
             anchors.verticalCenter: parent.verticalCenter
-            x: parent.width / 2 - minuteHandWidth / 2
+            x: Config.options.background.clock.cookie.minuteHandStyle === "classic" ? (parent.width / 2 - minuteHandWidth / 2) - 15 : parent.width / 2 - minuteHandWidth / 2
             width: minuteHandLength
             height: minuteHandWidth
-            radius: minuteHandWidth / 2
+            radius: Config.options.background.clock.cookie.minuteHandStyle === "classic" ? 2 : minuteHandWidth / 2
             color: root.colMinuteHand
             Behavior on height {
                 animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
             }
+            Behavior on x{
+                animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+            }
         }
     }
 
@@ -291,7 +286,7 @@ Item {
     Item {
         id: secondHand
         z: Config.options.background.clock.cookie.secondHandStyle === "line" ? 2 : 3
-        opacity: Config.options.background.clock.cookie.secondHandStyle === "dot" || Config.options.background.clock.cookie.secondHandStyle === "line" ? 1.0 : 0 // Not using visible to allow smooth transition
+        opacity: Config.options.background.clock.cookie.secondHandStyle !== "hide" ? 1.0 : 0
         rotation: (360 / 60 * clockSecond) + 90 // +90 degrees to align with minute hand
         anchors.fill: parent
         Behavior on opacity {
@@ -317,6 +312,22 @@ Item {
                 leftMargin: 10
             }
         }
+        Rectangle{
+            // Dot on the classic style
+            opacity: Config.options.background.clock.cookie.secondHandStyle === "classic" ? 1.0 : 0.0
+            implicitHeight: 14
+            implicitWidth: 14
+            color: root.colSeconds
+            radius: Appearance.rounding.small
+            anchors {
+                left: parent.left
+                verticalCenter: parent.verticalCenter
+                leftMargin: 40
+            }
+            Behavior on opacity {
+                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+            }
+        }
     }
 
     // Date (the rotating one with the second hand)

.config/quickshell/ii/modules/common/Config.qml

@@ -132,8 +132,8 @@ Singleton {
                     property int clockSides: 12
                     property JsonObject cookie: JsonObject {
                         property string dialNumberStyle: "dots" // Options:   "dots" , "numbers", "full" , "none"
-                        property string hourHandStyle: "fill" // Options:     "fill", "stroke", "hide"
+                        property string hourHandStyle: "fill" // Options:     "classic", "fill", "stroke", "hide"
-                        property string minuteHandStyle: "medium" // Options: "medium", "bold", "hide"
+                        property string minuteHandStyle: "medium" // Options: "classic", "thin", "medium", "bold", "hide"
                         property string secondHandStyle: "dot" // Options:    "dot", "line" , "none" 
                         property string dateStyle: "rotating" // Options:     "rotating", "square", "none"
                         property bool timeIndicators: true

.config/quickshell/ii/modules/settings/InterfaceConfig.qml

@@ -115,37 +115,44 @@ ContentPage {
                     ]
                 }
             }
+            
+        }
+
+        
             ContentSubsection {
                 enabled: Config.options.background.clock.style === "cookie"
-                title: Translation.tr("Seconds indicator style")
                 visible: Config.options.background.clock.style === "cookie"
+                title: Translation.tr("Hour hand style")
                 ConfigSelectionArray {
-                    currentValue: Config.options.background.clock.cookie.secondHandStyle
+                    currentValue: Config.options.background.clock.cookie.hourHandStyle
                     onSelected: newValue => {
-                        Config.options.background.clock.cookie.secondHandStyle = newValue;
+                        Config.options.background.clock.cookie.hourHandStyle = newValue;
                     }
                     options: [
                         {
-                            displayName: Translation.tr("None"),
+                            displayName: Translation.tr("Classic"),
+                            icon: "radio",
+                            value: "classic"
+                        },
+                        {
+                            displayName: Translation.tr("Fill"),
+                            icon: "stroke_full",
+                            value: "fill"
+                        },
+                        {
+                            displayName: Translation.tr("Stroke"),
+                            icon: "stroke_partial",
+                            value: "stroke"
+                        },
+                        {
+                            displayName: Translation.tr("Hide"),
                             icon: "deselect",
-                            value: "none"
+                            value: "hide"
-                        },
-                        {
-                            displayName: Translation.tr("Dot"),
-                            icon: "adjust",
-                            value: "dot"
-                        },
-                        {
-                            displayName: Translation.tr("Line"),
-                            icon: "line_end",
-                            value: "line"
                         }
                     ]
                 }
             }
-        }
+       
-
-        ConfigRow{
             ContentSubsection {
                 enabled: Config.options.background.clock.style === "cookie"
                 visible: Config.options.background.clock.style === "cookie"
@@ -156,6 +163,11 @@ ContentPage {
                         Config.options.background.clock.cookie.minuteHandStyle = newValue;
                     }
                     options: [
+                        {
+                            displayName: Translation.tr("Classic"),
+                            icon: "radio",
+                            value: "classic"
+                        },
                         {
                             displayName: Translation.tr("Thin"),
                             icon: "pen_size_1",
@@ -173,12 +185,50 @@ ContentPage {
                         },
                         {
                             displayName: Translation.tr("Hide"),
-                            icon: "hide_image",
+                            icon: "deselect",
                             value: "hide"
                         }
                     ]
                 }
             }
+            ContentSubsection {
+                enabled: Config.options.background.clock.style === "cookie"
+                title: Translation.tr("Seconds hand style")
+                visible: Config.options.background.clock.style === "cookie"
+                ConfigSelectionArray {
+                    currentValue: Config.options.background.clock.cookie.secondHandStyle
+                    onSelected: newValue => {
+                        Config.options.background.clock.cookie.secondHandStyle = newValue;
+                    }
+                    options: [
+                        {
+                            displayName: Translation.tr("Classic"),
+                            icon: "radio",
+                            value: "classic"
+                        },
+                        {
+                            displayName: Translation.tr("Line"),
+                            icon: "line_end",
+                            value: "line"
+                        },
+                        {
+                            displayName: Translation.tr("Dot"),
+                            icon: "adjust",
+                            value: "dot"
+                        },
+                        {
+                            displayName: Translation.tr("Hide"),
+                            icon: "deselect",
+                            value: "hide"
+                        }
+
+                    ]
+                }
+            }
+        
+
+        
+            
             ContentSubsection {
                 enabled: Config.options.background.clock.style === "cookie" && Config.options.background.clock.cookie.dialNumberStyle === "none"
                 visible: Config.options.background.clock.style === "cookie"
@@ -207,36 +257,7 @@ ContentPage {
                     ]
                 }
             }
-        }
+        
-
-        ContentSubsection {
-            enabled: Config.options.background.clock.style === "cookie"
-            visible: Config.options.background.clock.style === "cookie"
-            title: Translation.tr("Hour hand style")
-            ConfigSelectionArray {
-                currentValue: Config.options.background.clock.cookie.hourHandStyle
-                onSelected: newValue => {
-                    Config.options.background.clock.cookie.hourHandStyle = newValue;
-                }
-                options: [
-                    {
-                        displayName: Translation.tr("Fill"),
-                        icon: "stroke_full",
-                        value: "fill"
-                    },
-                    {
-                        displayName: Translation.tr("Stroke"),
-                        icon: "stroke_partial",
-                        value: "stroke"
-                    },
-                    {
-                        displayName: Translation.tr("Hide"),
-                        icon: "hide_image",
-                        value: "hide"
-                    }
-                ]
-            }
-        }
 
         ConfigSpinBox {
             enabled: Config.options.background.clock.style === "cookie"