[Enhancement] Cut User Picture to Circle

[snoweuph]

It would be Nice if the User Picture would be shown as a circle and not as it's full Squarnes

[Zren]

I'm pretty sure it's already possible to clip it using a circle mask, but it's already a very tiny icon and clipping like 30% of the picture makes it pretty unrecognizable.

• New Kickoff uses PC3.RoudButton
  https://invent.kde.org/plasma/plasma-desktop/-/blob/master/applets/kickoff/package/contents/ui/Header.qml#L54-71
• Old Kickoff uses a layer.mask
  https://invent.kde.org/plasma/plasma-desktop/-/blob/Plasma/5.18/applets/kickoff/package/contents/ui/Header.qml#L88-99

[Zren]

No idea why adding this code to FlatButton.qml properly crops the icon as a circle when I add iconSize: config.flatButtonSize to FlatButton.qml. If I remove the iconSize override to make the icon larger, so that it's the normal small icon size, then it stops cropping displays a square.

// FlatButton.qml
				PlasmaCore.IconItem {
					id: icon
					source: control.iconName || control.iconSource || control.icon
					implicitWidth: control._iconSize
					implicitHeight: control._iconSize
					anchors.centerIn: parent
					colorGroup: PlasmaCore.Theme.ButtonColorGroup

					// Crop the avatar to fit in a circle, like the lock and login screens
					// but don't on software rendering where this won't render
					// layer.enabled: faceIcon.GraphicsInfo.api !== GraphicsInfo.Software
					layer.enabled: true
					layer.effect: QtGraphicalEffects.OpacityMask {
						// this Rectangle is a circle due to radius size
						maskSource: Rectangle {
							width: icon.width
							height: icon.height
							radius: height / 2
							visible: false
						}
					}
				}

// SidebarView.qml
			SidebarItem {
				iconName: kuser.hasFaceIcon ? kuser.faceIconUrl : 'user-identity'
				text: kuser.fullName
				submenu: userMenu
				iconSize: config.flatButtonSize

				SidebarContextMenu {
					id: userMenu