Improve collapsed rows in small chats list.

Telegram/SourceFiles/dialogs/dialogs_inner_widget.cpp

@@ -657,17 +657,28 @@ void InnerWidget::paintCollapsedRow(
 		Painter &p,
 		not_null<const CollapsedRow*> row,
 		bool selected) const {
+	const auto smallWidth = st::dialogsPadding.x()
+		+ st::dialogsPhotoSize
+		+ st::dialogsPhotoPadding;
+	const auto narrow = (width() <= smallWidth);
 	const auto text = row->folder
 		? row->folder->chatListName()
 		: (_mode == Dialogs::Mode::Important)
-		? lang(lng_dialogs_show_all_chats)
+		? (narrow ? "Show" : lang(lng_dialogs_show_all_chats))
-		: lang(lng_dialogs_hide_muted_chats);
+		: (narrow ? "Hide" : lang(lng_dialogs_hide_muted_chats));
 	const auto unread = row->folder
 		? row->folder->chatListUnreadCount()
 		: (_mode == Dialogs::Mode::Important)
 		? session().data().unreadOnlyMutedBadge()
 		: 0;
-	Layout::PaintCollapsedRow(p, row->row, text, unread, width(), selected);
+	Layout::PaintCollapsedRow(
+		p,
+		row->row,
+		row->folder,
+		text,
+		unread,
+		width(),
+		selected);
 }
 
 bool InnerWidget::isSearchResultActive(

Telegram/SourceFiles/dialogs/dialogs_layout.cpp

@@ -22,6 +22,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "history/history.h"
 #include "data/data_channel.h"
 #include "data/data_user.h"
+#include "data/data_folder.h"
 
 namespace Dialogs {
 namespace Layout {
@@ -849,21 +850,44 @@ QRect RowPainter::sendActionAnimationRect(int animationWidth, int animationHeigh
 	return QRect(nameleft, texttop, textUpdated ? namewidth : animationWidth, animationHeight);
 }
 
-void PaintCollapsedRow(Painter &p, const RippleRow &row, const QString &text, int unread, int fullWidth, bool selected) {
+void PaintCollapsedRow(
+		Painter &p,
+		const RippleRow &row,
+		Data::Folder *folder,
+		const QString &text,
+		int unread,
+		int fullWidth,
+		bool selected) {
 	p.fillRect(0, 0, fullWidth, st::dialogsImportantBarHeight, selected ? st::dialogsBgOver : st::dialogsBg);
 
 	row.paintRipple(p, 0, 0, fullWidth);
 
-	p.setFont(st::semiboldFont);
+	const auto smallWidth = st::dialogsPadding.x()
-	p.setPen(st::dialogsNameFg);
+		+ st::dialogsPhotoSize
+		+ st::dialogsPhotoPadding;
+	const auto narrow = (fullWidth <= smallWidth);
 
 	const auto unreadTop = (st::dialogsImportantBarHeight - st::dialogsUnreadHeight) / 2;
-	const auto textBaseline = unreadTop
+	if (!narrow || !folder) {
-		+ (st::dialogsUnreadHeight - st::dialogsUnreadFont->height) / 2
+		p.setFont(st::semiboldFont);
-		+ st::dialogsUnreadFont->ascent;
+		p.setPen(st::dialogsNameFg);
-	p.drawText(st::dialogsPadding.x(), textBaseline, text);
 
-	if (unread) {
+		const auto textBaseline = unreadTop
+			+ (st::dialogsUnreadHeight - st::dialogsUnreadFont->height) / 2
+			+ st::dialogsUnreadFont->ascent;
+		const auto left = narrow
+			? ((fullWidth - st::semiboldFont->width(text)) / 2)
+			: st::dialogsPadding.x();
+		p.drawText(left, textBaseline, text);
+	} else {
+		folder->paintUserpicLeft(
+			p,
+			(fullWidth - st::dialogsUnreadHeight) / 2,
+			unreadTop,
+			fullWidth,
+			st::dialogsUnreadHeight);
+	}
+	if (!narrow && unread) {
 		const auto unreadRight = fullWidth - st::dialogsPadding.x();
 		UnreadBadgeStyle st;
 		st.muted = true;

Telegram/SourceFiles/dialogs/dialogs_layout.h

@@ -52,6 +52,7 @@ public:
 void PaintCollapsedRow(
 	Painter &p,
 	const RippleRow &row,
+	Data::Folder *folder,
 	const QString &text,
 	int unread,
 	int fullWidth,