Add filter icons to Settings -> Folders.

Telegram/SourceFiles/chat_helpers/chat_helpers.style

@@ -41,8 +41,8 @@ stickersRemove: IconButton(defaultIconButton) {
 	width: 40px;
 	height: 40px;
 
-	icon: icon {{ "stickers_remove", menuIconFg }};
-	iconOver: icon {{ "stickers_remove", menuIconFgOver }};
+	icon: icon {{ "info_media_delete", menuIconFg }};
+	iconOver: icon {{ "info_media_delete", menuIconFgOver }};
 
 	rippleAreaSize: 40px;
 	rippleAreaPosition: point(0px, 0px);

Telegram/SourceFiles/info/info.style

@@ -169,7 +169,7 @@ infoTopBarForward: IconButton(infoTopBarBack) {
 	width: 46px;
 	icon: icon {{ "info_media_forward", boxTitleCloseFg }};
 	iconOver: icon {{ "info_media_forward", boxTitleCloseFgOver }};
-	iconPosition: point(6px, -1px);
+	iconPosition: point(10px, -1px);
 	rippleAreaPosition: point(1px, 6px);
 }
 infoTopBarDelete: IconButton(infoTopBarForward) {
@@ -245,7 +245,7 @@ infoLayerTopBarForward: IconButton(infoLayerTopBarBack) {
 	width: 45px;
 	icon: icon {{ "info_media_forward", boxTitleCloseFg }};
 	iconOver: icon {{ "info_media_forward", boxTitleCloseFgOver }};
-	iconPosition: point(6px, -1px);
+	iconPosition: point(11px, -1px);
 	rippleAreaPosition: point(1px, 6px);
 }
 infoLayerTopBarDelete: IconButton(infoLayerTopBarForward) {

Telegram/SourceFiles/settings/settings.style

@@ -217,6 +217,9 @@ settingsAccentColorSize: 24px;
 settingsAccentColorSkip: 4px;
 settingsAccentColorLine: 3px;
 
+settingsFilterIconSkip: 68px;
+settingsFilterIconLeft: 17px;
+
 dictionariesSectionButton: SettingsButton(settingsUpdateToggle) {
 	font: font(14px semibold);
 }

Telegram/SourceFiles/settings/settings_folders.cpp

@@ -23,6 +23,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "ui/text/text_utilities.h"
 #include "ui/wrap/slide_wrap.h"
 #include "ui/painter.h"
+#include "ui/filter_icons.h"
 #include "settings/settings_common.h"
 #include "lang/lang_keys.h"
 #include "apiwrap.h"
@@ -88,6 +89,7 @@ private:
 
 	Ui::Text::String _title;
 	QString _status;
+	Ui::FilterIcon _icon = Ui::FilterIcon();
 
 	State _state = State::Normal;
 
@@ -192,6 +194,7 @@ void FilterRowButton::updateData(const Data::ChatFilter &filter) {
 
 	_title.setText(st::contactsNameStyle, filter.title());
 	_status = ComputeCountString(_session, filter, true);
+	_icon = Ui::ComputeFilterIcon(filter);
 	update();
 }
 
@@ -213,6 +216,7 @@ void FilterRowButton::setup(
 
 	_title.setText(st::contactsNameStyle, filter.title());
 	_status = status;
+	_icon = Ui::ComputeFilterIcon(filter);
 
 	setState(_state, true);
 
@@ -250,8 +254,9 @@ rpl::producer<> FilterRowButton::addRequests() const {
 void FilterRowButton::paintEvent(QPaintEvent *e) {
 	auto p = Painter(this);
 
+	const auto over = isOver() || isDown();
 	if (_state == State::Normal) {
-		if (isOver() || isDown()) {
+		if (over) {
 			p.fillRect(e->rect(), st::windowBgOver);
 		}
 		RippleButton::paintRipple(p, 0, 0);
@@ -259,7 +264,9 @@ void FilterRowButton::paintEvent(QPaintEvent *e) {
 		p.setOpacity(st::stickersRowDisabledOpacity);
 	}
 
-	const auto left = st::settingsSubsectionTitlePadding.left();
+	const auto left = (_state == State::Suggested)
+		? st::settingsSubsectionTitlePadding.left()
+		: st::settingsFilterIconSkip;
 	const auto buttonsLeft = std::min(
 		_add.x(),
 		std::min(_remove.x(), _restore.x()));
@@ -280,6 +287,16 @@ void FilterRowButton::paintEvent(QPaintEvent *e) {
 		st::contactsPadding.top() + st::contactsStatusTop,
 		width(),
 		_status);
+
+	if (_state != State::Suggested) {
+		const auto icon = Ui::LookupFilterIcon(_icon).normal;
+		icon->paint(
+			p,
+			st::settingsFilterIconLeft,
+			(height() - icon->height()) / 2,
+			width(),
+			(over ? st::menuIconFgOver : st::menuIconFg)->c);
+	}
 }
 
 [[nodiscard]] Fn<void()> SetupFoldersContent(

Telegram/SourceFiles/window/window.style

@@ -293,14 +293,14 @@ windwoFilterIconPanelPosition: point(-2px, -1px);
 windowFilterIconSingle: size(44px, 42px);
 windowFilterIconPadding: margins(10px, 36px, 10px, 8px);
 windowFilterIconHeaderPosition: point(18px, 14px);
-windowFilterTypeContacts: icon {{ "filters_type_contacts", historyPeerUserpicFg }};
-windowFilterTypeNonContacts: icon {{ "filters_type_noncontacts", historyPeerUserpicFg }};
-windowFilterTypeGroups: icon {{ "filters_type_groups", historyPeerUserpicFg }};
-windowFilterTypeChannels: icon {{ "filters_type_channels", historyPeerUserpicFg }};
-windowFilterTypeBots: icon {{ "filters_type_bots", historyPeerUserpicFg }};
-windowFilterTypeNoMuted: icon {{ "filters_type_muted", historyPeerUserpicFg }};
-windowFilterTypeNoArchived: icon {{ "filters_type_archived", historyPeerUserpicFg }};
-windowFilterTypeNoRead: icon {{ "filters_type_read", historyPeerUserpicFg }};
+windowFilterTypeContacts: icon {{ "filters/filters_type_contacts", historyPeerUserpicFg }};
+windowFilterTypeNonContacts: icon {{ "filters/filters_type_noncontacts", historyPeerUserpicFg }};
+windowFilterTypeGroups: icon {{ "filters/filters_type_groups", historyPeerUserpicFg }};
+windowFilterTypeChannels: icon {{ "filters/filters_type_channels", historyPeerUserpicFg }};
+windowFilterTypeBots: icon {{ "filters/filters_type_bots", historyPeerUserpicFg }};
+windowFilterTypeNoMuted: icon {{ "filters/filters_type_muted", historyPeerUserpicFg }};
+windowFilterTypeNoArchived: icon {{ "filters/filters_type_archived", historyPeerUserpicFg }};
+windowFilterTypeNoRead: icon {{ "filters/filters_type_read", historyPeerUserpicFg }};
 windowFilterChatsSectionSubtitle: FlatLabel(defaultFlatLabel) {
 	style: TextStyle(defaultTextStyle) {
 		font: searchedBarFont;