feat: add type toggle to cue popup

res/skins/Deere/style.qss

@@ -2382,10 +2382,26 @@ WEffectChainPresetSelector::indicator:unchecked:selected,
   outline: none;
 }
 
-#CueDeleteButton:hover {
+#CueSavedLoopButton {
+/* tall button, about the same height as cue number + label edit box */
+  width: 28px;
+  height: 46px;
+  /* make the icon slightly larger than default 16px */
+  qproperty-iconSize: 20px;
+  qproperty-icon: url(skin:/../Deere/icon/ic_loop_48px.svg);
+  background-color: #3B3B3B;
+  border-radius: 2px;
+  outline: none;
+}
+
+#CueDeleteButton:hover, #CueSavedLoopButton:hover {
   background-color: #4B4B4B;
 }
 
+#CueSavedLoopButton:checked {
+  background-color: #006596;
+}
+
 WRateRange {
     font-size: 10px;
 }

res/skins/LateNight/style_classic.qss

@@ -2057,6 +2057,27 @@ QPushButton#pushButtonRepeatPlaylist:!checked {
   /* has no effect
   padding: 0px; */
 }
+#CueSavedLoopButton {  /*
+  padding: 3px 6px; */
+  qproperty-icon: url(skins:LateNight/classic/buttons/btn__loop.svg);
+  /* color buttons are 42x24 px.
+  To get the final size for the Delete button consider border width.
+  It's a tall button, about the same height as cue number + label edit box */
+  width: 24px;
+  height: 42px;
+  border-width: 2px;
+  border-image: url(skins:LateNight/classic/buttons/btn_embedded_library.svg) 2 2 2 2;
+  /* make the icon slightly larger than default 16px */
+  qproperty-iconSize: 20px;
+  /* has no effect
+  padding: 0px; */
+}
+#CueSavedLoopButton:pressed, WCueMenuPopup #CueSavedLoopButton:checked {
+  background-color: #db0000;
+  outline: none;
+  /* not applied: */
+  qproperty-icon: url(skins:LateNight/classic/buttons/btn__loop_active.svg);
+}
 
 #CueLabelEdit {
   border: 1px solid #f0bb2b;

res/skins/LateNight/style_palemoon.qss

@@ -1459,7 +1459,8 @@ WPushButton#FxAssignButton1[displayValue="0"],
 WEffectSelector:!editable,
 #fadeModeCombobox:!editable,
 #LibraryFeatureControls QPushButton:enabled,
-#CueDeleteButton {
+#CueDeleteButton,
+#CueSavedLoopButton {
   outline: none;
   border-width: 2px;
   border-image: url(skins:LateNight/palemoon/buttons/btn_embedded_library.svg) 2 2 2 2;
@@ -1488,7 +1489,9 @@ WEffectSelector:!editable,
   QPushButton#pushButtonRecording:checked,
   WEffectSelector:!editable:on,
   #fadeModeCombobox:!editable:on,
-  #CueDeleteButton[pressed="true"] {
+  #CueDeleteButton[pressed="true"],
+  #CueSavedLoopButton[pressed="true"],
+  #CueSavedLoopButton:checked {
     border-width: 2px;
     border-image: url(skins:LateNight/palemoon/buttons/btn_embedded_library_active.svg) 2 2 2 2;
   }
@@ -1636,6 +1639,7 @@ WBeatSpinBox::down-button {
   /* bright buttons in dimmed containers
   #BeatgridControls WPushButton[displayValue="0"], */
   #CueDeleteButton,
+  #CueSavedLoopButton,
   #SplitCue[displayValue="0"],
   #PlayPreview[displayValue="0"],
   /* library controls */
@@ -1689,7 +1693,9 @@ WPushButton#LoopOut[pressed="true"],
 #BeatjumpControls WPushButton[value="1"],
 #RateControls WPushButton[value="1"],
 #BeatgridControls WPushButton[pressed="true"]/*,
-#CueDeleteButton[pressed="true"]*/ {
+#CueDeleteButton[pressed="true"],
+#CueSavedLoopButton[pressed="true"],
+#CueSavedLoopButton:checked*/ {
   background-color: #7d350d;
   }
 
@@ -2505,13 +2511,27 @@ WCueMenuPopup #CueDeleteButton {
   /* make the icon slightly larger than default 16px */
   qproperty-iconSize: 20px;
 }
+WCueMenuPopup #CueSavedLoopButton {
+  qproperty-icon: url(skins:LateNight/palemoon/buttons/btn__loop.svg);
+  width: 24px;
+  height: 42px;
+  /* make the icon slightly larger than default 16px */
+  qproperty-iconSize: 20px;
+}
 
 WCueMenuPopup #CueDeleteButton:pressed {
   background-color: #b24c12;
   outline: none;
   /* not applied: */
   qproperty-icon: url(skins:LateNight/palemoon/buttons/btn__delete_active.svg);
 }
+
+WCueMenuPopup #CueSavedLoopButton:pressed, WCueMenuPopup #CueSavedLoopButton:checked {
+  background-color: #b24c12;
+  outline: none;
+  /* not applied: */
+  qproperty-icon: url(skins:LateNight/palemoon/buttons/btn__loop_active.svg);
+}
 WCueMenuPopup #CueLabelEdit {
   /*border: 1px solid #c2b3a5;*/
   border-radius: 0px;

res/skins/Shade/style.qss

@@ -430,6 +430,23 @@ WCueMenuPopup QLabel {
   qproperty-iconSize: 20px;
   outline: none;
 }
+#CueSavedLoopButton {
+  /* set any border to allow styles for other properties as well */
+  border: 1px solid #060613;
+/* To get the final size for the Delete button consider border width.
+  tall button, about the same height as cue number + label edit box */
+  width: 24px;
+  height: 43px;
+  padding: 0px;
+  background-color: #aab2b7;
+  qproperty-icon: url(skin:/btn/btn_hotcue_loop.png);
+  /* make the icon slightly larger than default 16px */
+  qproperty-iconSize: 20px;
+  outline: none;
+}
+#CueSavedLoopButton:pressed, #CueSavedLoopButton:checked {
+  background-color: #F90562;
+}
 #CueLabelEdit {
   border: 1px solid #060613;
   border-radius: 0px;

res/skins/Shade/style_dark.qss

@@ -150,6 +150,9 @@ WEffectSelector::indicator:unchecked:selected,
 #CueDeleteButton {
   background-color: #8a8a8a;
 }
+#CueSavedLoopButton:pressed, #CueSavedLoopButton:checked {
+  background-color: #b79d00;
+}
 #CueLabelEdit {
   background-color: #3F3041;
 }

res/skins/Shade/style_summer_sunset.qss

@@ -145,6 +145,12 @@ WEffectSelector::indicator:unchecked:selected,
 #CueDeleteButton {
   background-color: #cdbb5d;
 }
+#CueSavedLoopButton {
+  background-color: #cdbb5d;
+}
+#CueSavedLoopButton:pressed, #CueSavedLoopButton:checked {
+  background-color: #54fd05;
+}
 #CueLabelEdit {
   background-color: #706633;
 }

res/skins/Tango/style.qss

@@ -2478,6 +2478,32 @@ WTrackMenu QMenu QCheckBox::indicator {
   /* make the icon slightly larger than default 16px */
   qproperty-iconSize: 20px;
 }
+#CueSavedLoopButton {
+  /* color buttons are 42x24 px.
+  To get the final size for the Delete button consider border width.
+  tall button, about the same height as cue number + label edit box */
+  width: 26px;
+  height: 44px;
+  border: 1px solid #666;
+  background-color: #333;
+  border-radius: 2px;
+  qproperty-icon: url(skin:/../Tango/buttons/btn_loop_beatjump_off.svg);
+  /* make the icon slightly larger than default 16px */
+  qproperty-iconSize: 20px;
+}
+#CueSavedLoopButton:checked {
+  /* color buttons are 42x24 px.
+  To get the final size for the Delete button consider border width.
+  tall button, about the same height as cue number + label edit box */
+  width: 26px;
+  height: 44px;
+  border: 1px solid #666;
+  background-color: #ff7b00;
+  border-radius: 2px;
+  qproperty-icon: url(skin:/../Tango/buttons/btn_loop_beatjump_on.svg);
+  /* make the icon slightly larger than default 16px */
+  qproperty-iconSize: 20px;
+}
 #CueLabelEdit {
   border: 1px solid #ff6600;
   border-radius: 0px;

src/control/pollingcontrolproxy.h

@@ -56,6 +56,11 @@ class PollingControlProxy {
         return m_pControl->defaultValue();
     }
 
+    /// Return the key of the underlying control
+    const ConfigKey& getKey() const {
+        return m_pControl->getKey();
+    }
+
     /// Sets the control value to v. Thread safe, non-blocking.
     void set(double v) {
         m_pControl->set(v, nullptr);

src/waveform/renderers/waveformmark.cpp

@@ -107,9 +107,11 @@ WaveformMark::WaveformMark(const QString& group,
           m_showUntilNext{} {
     QString positionControl;
     QString endPositionControl;
+    QString typeControl;
     if (hotCue != Cue::kNoHotCue) {
         positionControl = "hotcue_" + QString::number(hotCue + 1) + "_position";
         endPositionControl = "hotcue_" + QString::number(hotCue + 1) + "_endposition";
+        typeControl = "hotcue_" + QString::number(hotCue + 1) + "_type";
         m_showUntilNext = true;
     } else {
         positionControl = context.selectString(node, "Control");
@@ -121,6 +123,7 @@ WaveformMark::WaveformMark(const QString& group,
     }
     if (!endPositionControl.isEmpty()) {
         m_pEndPositionCO = std::make_unique<ControlProxy>(group, endPositionControl);
+        m_pTypeCO = std::make_unique<ControlProxy>(group, typeControl);
     }
 
     QString visibilityControl = context.selectString(node, "VisibilityControl");

src/waveform/renderers/waveformmark.h

@@ -63,10 +63,17 @@ class WaveformMark {
         return m_pPositionCO->get();
     }
     double getSampleEndPosition() const {
-        if (m_pEndPositionCO) {
-            return m_pEndPositionCO->get();
+        if (!m_pEndPositionCO ||
+                // A hotcue may have an end position although it isn't a saved
+                // loop anymore. This happens when the user changes the cue
+                // type. However, we persist the end position if the user wants
+                // to restore the cue to a saved loop
+                (m_pTypeCO &&
+                        static_cast<mixxx::CueType>(m_pTypeCO->get()) !=
+                                mixxx::CueType::Loop)) {
+            return Cue::kNoPosition;
         }
-        return Cue::kNoPosition;
+        return m_pEndPositionCO->get();
     }
     QString getItem() const {
         return m_pPositionCO->getKey().item;
@@ -163,6 +170,7 @@ class WaveformMark {
   private:
     std::unique_ptr<ControlProxy> m_pPositionCO;
     std::unique_ptr<ControlProxy> m_pEndPositionCO;
+    std::unique_ptr<ControlProxy> m_pTypeCO;
     std::unique_ptr<ControlProxy> m_pVisibleCO;
 
     std::unique_ptr<Graphics> m_pGraphics;

src/widget/wcolorpicker.cpp

@@ -46,9 +46,6 @@ WColorPicker::WColorPicker(Options options, const ColorPalette& palette, QWidget
     QGridLayout* pLayout = new QGridLayout();
     pLayout->setContentsMargins(0, 0, 0, 0);
 
-    pLayout->setSizeConstraint(QLayout::SetFixedSize);
-    setSizePolicy(QSizePolicy());
-
     // Unfortunately, not all styles supported by Qt support setting a
     // background color for QPushButtons (see
     // https://bugreports.qt.io/browse/QTBUG-11089). For example, when using