Add DankIconPicker

Modules/Settings/WidgetsTab.qml

@@ -456,6 +456,12 @@ Item {
         width: parent.width
         sourceComponent: workspaceComponent
       }
+
+      Loader {
+        width: parent.width
+        sourceComponent: workspaceIconsComponent
+        visible: SettingsData.hasNamedWorkspaces()
+      }
     }
   }
 
@@ -779,6 +785,159 @@ Item {
     }
   }
 
+  // Workspace Icons Component
+  Component {
+    id: workspaceIconsComponent
+
+    StyledRect {
+      width: parent.width
+      height: workspaceIconsSection.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: workspaceIconsSection
+
+        anchors.fill: parent
+        anchors.margins: Theme.spacingL
+        spacing: Theme.spacingM
+
+        Row {
+          width: parent.width
+          spacing: Theme.spacingM
+
+          DankIcon {
+            name: "label"
+            size: Theme.iconSize
+            color: Theme.primary
+            anchors.verticalCenter: parent.verticalCenter
+          }
+
+          StyledText {
+            text: "Named Workspace Icons"
+            font.pixelSize: Theme.fontSizeLarge
+            font.weight: Font.Medium
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+          }
+        }
+
+        StyledText {
+          width: parent.width
+          text: "Configure icons for named workspaces. Icons take priority over numbers when both are enabled."
+          font.pixelSize: Theme.fontSizeSmall
+          color: Theme.outline
+          wrapMode: Text.WordWrap
+        }
+
+        Repeater {
+          model: SettingsData.getNamedWorkspaces()
+
+          Rectangle {
+            width: parent.width
+            height: workspaceIconRow.implicitHeight + Theme.spacingM
+            radius: Theme.cornerRadius
+            color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g,
+                           Theme.surfaceContainer.b, 0.5)
+            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
+                                  Theme.outline.b, 0.3)
+            border.width: 1
+
+            Row {
+              id: workspaceIconRow
+
+              anchors.left: parent.left
+              anchors.right: parent.right
+              anchors.verticalCenter: parent.verticalCenter
+              anchors.leftMargin: Theme.spacingM
+              anchors.rightMargin: Theme.spacingM
+              spacing: Theme.spacingM
+
+              StyledText {
+                text: "\"" + modelData + "\""
+                font.pixelSize: Theme.fontSizeMedium
+                font.weight: Font.Medium
+                color: Theme.surfaceText
+                anchors.verticalCenter: parent.verticalCenter
+                width: 150
+                elide: Text.ElideRight
+              }
+
+              DankIconPicker {
+                id: iconPicker
+                anchors.verticalCenter: parent.verticalCenter
+
+                Component.onCompleted: {
+                  var iconData = SettingsData.getWorkspaceNameIcon(modelData)
+                  if (iconData) {
+                    setIcon(iconData.value, iconData.type)
+                  }
+                }
+
+                onIconSelected: (iconName, iconType) => {
+                  SettingsData.setWorkspaceNameIcon(modelData, {
+                    type: iconType,
+                    value: iconName
+                  })
+                  setIcon(iconName, iconType)
+                }
+
+                Connections {
+                  target: SettingsData
+                  function onWorkspaceIconsUpdated() {
+                    var iconData = SettingsData.getWorkspaceNameIcon(modelData)
+                    if (iconData) {
+                      iconPicker.setIcon(iconData.value, iconData.type)
+                    } else {
+                      iconPicker.setIcon("", "icon")
+                    }
+                  }
+                }
+              }
+
+              Rectangle {
+                width: 28
+                height: 28
+                radius: Theme.cornerRadius
+                color: clearMouseArea.containsMouse ? Theme.errorHover : Theme.surfaceContainer
+                border.color: clearMouseArea.containsMouse ? Theme.error : Theme.outline
+                border.width: 1
+                anchors.verticalCenter: parent.verticalCenter
+
+                DankIcon {
+                  name: "close"
+                  size: 16
+                  color: clearMouseArea.containsMouse ? Theme.error : Theme.outline
+                  anchors.centerIn: parent
+                }
+
+                MouseArea {
+                  id: clearMouseArea
+
+                  anchors.fill: parent
+                  hoverEnabled: true
+                  cursorShape: Qt.PointingHandCursor
+                  onClicked: {
+                    SettingsData.removeWorkspaceNameIcon(modelData)
+                  }
+                }
+              }
+
+              Item {
+                width: parent.width - 150 - 240 - 28 - Theme.spacingM * 4
+                height: 1
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
   DankWidgetSelectionPopup {
     id: widgetSelectionPopup
 

Modules/TopBar/WorkspaceSwitcher.qml

@@ -118,6 +118,16 @@ Rectangle {
         property bool isPlaceholder: modelData === -1
         property bool isHovered: mouseArea.containsMouse
         property int sequentialNumber: index + 1
+        property var workspaceData: {
+          if (isPlaceholder || !NiriService.niriAvailable) return null
+          for (var i = 0; i < NiriService.allWorkspaces.length; i++) {
+            var ws = NiriService.allWorkspaces[i]
+            if (ws.idx + 1 === modelData) return ws
+          }
+          return null
+        }
+        property var iconData: workspaceData && workspaceData.name ? SettingsData.getWorkspaceNameIcon(workspaceData.name) : null
+        property bool hasIcon: iconData !== null
 
         width: isActive ? Theme.spacingXL + Theme.spacingM : Theme.spacingL + Theme.spacingXS
         height: Theme.spacingL
@@ -137,8 +147,37 @@ Rectangle {
           }
         }
 
+        // Icon display (priority over numbers)
+        DankIcon {
+          visible: hasIcon && iconData.type === "icon"
+          anchors.centerIn: parent
+          name: hasIcon && iconData.type === "icon" ? iconData.value : ""
+          size: Theme.fontSizeSmall
+          color: isActive ? Qt.rgba(
+                              Theme.surfaceContainer.r,
+                              Theme.surfaceContainer.g,
+                              Theme.surfaceContainer.b,
+                              0.95) : Theme.surfaceTextMedium
+          weight: isActive && !isPlaceholder ? 500 : 400
+        }
+
+        // Custom text display (priority over numbers)
         StyledText {
-          visible: SettingsData.showWorkspaceIndex
+          visible: hasIcon && iconData.type === "text"
+          anchors.centerIn: parent
+          text: hasIcon && iconData.type === "text" ? iconData.value : ""
+          color: isActive ? Qt.rgba(
+                              Theme.surfaceContainer.r,
+                              Theme.surfaceContainer.g,
+                              Theme.surfaceContainer.b,
+                              0.95) : Theme.surfaceTextMedium
+          font.pixelSize: Theme.fontSizeSmall
+          font.weight: isActive && !isPlaceholder ? Font.DemiBold : Font.Normal
+        }
+
+        // Number display (secondary priority, only when no icon)
+        StyledText {
+          visible: SettingsData.showWorkspaceIndex && !hasIcon
           anchors.centerIn: parent
           text: isPlaceholder ? sequentialNumber : sequentialNumber
           color: isActive ? Qt.rgba(