DankMaterialShell/Modules/Settings/DockTab.qml

import QtQuick
import QtQuick.Controls
import Quickshell.Widgets
import qs.Common
import qs.Widgets

Item {
  id: dockTab

  DankFlickable {
    anchors.fill: parent
    anchors.topMargin: Theme.spacingL
    clip: true
    contentHeight: mainColumn.height
    contentWidth: width

    Column {
      id: mainColumn
      width: parent.width
      spacing: Theme.spacingXL


      // Enable Dock
      StyledRect {
        width: parent.width
        height: enableDockSection.implicitHeight + Theme.spacingL * 2
        radius: Theme.cornerRadius
        color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
                       Theme.surfaceVariant.b, 0.3)
        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                              Theme.outline.b, 0.2)
        border.width: 1

        Column {
          id: enableDockSection

          anchors.fill: parent
          anchors.margins: Theme.spacingL
          spacing: Theme.spacingM

          Row {
            width: parent.width
            spacing: Theme.spacingM

            DankIcon {
              name: "dock_to_bottom"
              size: Theme.iconSize
              color: Theme.primary
              anchors.verticalCenter: parent.verticalCenter
            }

            Column {
              width: parent.width - Theme.iconSize - Theme.spacingM - enableToggle.width - Theme.spacingM
              spacing: Theme.spacingXS
              anchors.verticalCenter: parent.verticalCenter

              StyledText {
                text: "Show Dock"
                font.pixelSize: Theme.fontSizeLarge
                font.weight: Font.Medium
                color: Theme.surfaceText
              }

              StyledText {
                text: "Display a dock at the bottom of the screen with pinned and running applications"
                font.pixelSize: Theme.fontSizeSmall
                color: Theme.surfaceVariantText
                wrapMode: Text.WordWrap
                width: parent.width
              }

            }

            DankToggle {
              id: enableToggle

              anchors.verticalCenter: parent.verticalCenter
              checked: SettingsData.showDock
              onToggled: checked => {
                           SettingsData.setShowDock(checked)
                         }
            }

          }

        }

      }

      // Auto-hide Dock
      StyledRect {
        width: parent.width
        height: autoHideSection.implicitHeight + Theme.spacingL * 2
        radius: Theme.cornerRadius
        color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
                       Theme.surfaceVariant.b, 0.3)
        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                              Theme.outline.b, 0.2)
        border.width: 1
        visible: SettingsData.showDock
        opacity: visible ? 1 : 0

        Column {
          id: autoHideSection

          anchors.fill: parent
          anchors.margins: Theme.spacingL
          spacing: Theme.spacingM

          Row {
            width: parent.width
            spacing: Theme.spacingM

            DankIcon {
              name: "visibility_off"
              size: Theme.iconSize
              color: Theme.primary
              anchors.verticalCenter: parent.verticalCenter
            }

            Column {
              width: parent.width - Theme.iconSize - Theme.spacingM - autoHideToggle.width - Theme.spacingM
              spacing: Theme.spacingXS
              anchors.verticalCenter: parent.verticalCenter

              StyledText {
                text: "Auto-hide Dock"
                font.pixelSize: Theme.fontSizeLarge
                font.weight: Font.Medium
                color: Theme.surfaceText
              }

              StyledText {
                text: "Hide the dock when not in use and reveal it when hovering near the bottom of the screen"
                font.pixelSize: Theme.fontSizeSmall
                color: Theme.surfaceVariantText
                wrapMode: Text.WordWrap
                width: parent.width
              }

            }

            DankToggle {
              id: autoHideToggle

              anchors.verticalCenter: parent.verticalCenter
              checked: SettingsData.dockAutoHide
              onToggled: checked => {
                           SettingsData.setDockAutoHide(checked)
                         }
            }

          }

        }

        Behavior on opacity {
          NumberAnimation {
            duration: Theme.mediumDuration
            easing.type: Theme.emphasizedEasing
          }
        }

      }

      // Dock Transparency Section
      StyledRect {
        width: parent.width
        height: transparencySection.implicitHeight + Theme.spacingL * 2
        radius: Theme.cornerRadius
        color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
                       Theme.surfaceVariant.b, 0.3)
        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
                              Theme.outline.b, 0.2)
        border.width: 1
        visible: SettingsData.showDock
        opacity: visible ? 1 : 0

        Column {
          id: transparencySection

          anchors.fill: parent
          anchors.margins: Theme.spacingL
          spacing: Theme.spacingM

          Row {
            width: parent.width
            spacing: Theme.spacingM

            DankIcon {
              name: "opacity"
              size: Theme.iconSize
              color: Theme.primary
              anchors.verticalCenter: parent.verticalCenter
            }

            StyledText {
              text: "Dock Transparency"
              font.pixelSize: Theme.fontSizeLarge
              font.weight: Font.Medium
              color: Theme.surfaceText
              anchors.verticalCenter: parent.verticalCenter
            }
          }

          DankSlider {
            width: parent.width
            height: 32
            value: Math.round(SettingsData.dockTransparency * 100)
            minimum: 0
            maximum: 100
            unit: "%"
            showValue: true
            onSliderValueChanged: newValue => {
                                    SettingsData.setDockTransparency(
                                      newValue / 100)
                                  }
          }
        }

        Behavior on opacity {
          NumberAnimation {
            duration: Theme.mediumDuration
            easing.type: Theme.emphasizedEasing
          }
        }
      }

    }
  }

}