New message indicator in compact mode

[gkatev]

Hi, when the window is made small enough that the conversation names on the left sidebar disappear, and only the conversations' icons remain visible, the blue dot indicating a new unread message also becomes hidden.

In this mode, conversations with unread messages are in no way highlighted, and the only way to tell that there's a new message is by looking at ordering of the conversation list, which I consider to not be a clear-enough indication.

I remember at some point the background of the conversation icon changed when there was a new message? But this seems to have gone away now (?), and it appears to be the same way on the website as well.

I'm not the only one encountering this, right? Can we add some more prominent type of indicator (or bring back the background color-changing)?

[Ariane-B]

I tried to do this. I really tried. But I think there's literally no way to do it.

See, Facebook has a really idiotic approach to HTML/CSS. I can't stress this enough. I have never seen HTML/CSS this stupid in my whole life.

In "wide" mode, you have bolded text and a blue dot to indicate unread messages. They are entirely removed from existence in compact mode. Normally, when you have a brain, you do these sorts of things with CSS. They did not.

To be clear, none of this is Caprine's doing. The author has somehow managed to make SOMETHING with this piece of crap, and that's extremely impressive.

Here is what the (absolutely stupid) HTML for a contact looks like, once un-minified. I got it for read and unread contacts, and they're exactly identical save for the links, names and images.

<div data-testid="mwthreadlist-item-open">
	<div class="x1n2onr6 xsyo7zv x16hj40l" role="row" data-testid="mwthreadlist-item">
		<div role="gridcell">
			<a aria-current="false" class="x1i10hfl x1qjc9v5 xjbqb8w xjqpnuy xa49m3k xqeqjp1 x2hbi6w x13fuv20 xu3j5b3 x1q0q8m5 x26u7qi x972fbf xcfux6l x1qhh985 xm0m39n x9f619 x1ypdohk xdl72j9 x2lah0s xe8uvvx x2lwn1j xeuugli x1n2onr6 x16tdsg8 x1hl2dhg xggy1nq x1ja2u2z x1t137rt x1q0g3np x87ps6o x1lku1pv x1a2a7pz x1lq5wgf xgqcy7u x30kzoy x9jhf4c x1lliihq xdj266r x11i5rnm xat24cr x1mh8g0r x889kno x1iji9kk x1a8lsjc x1sln4lm" href="/t/999999999/" role="link" tabindex="0">
				<div class="x9f619 x1n2onr6 x1ja2u2z x1qjc9v5 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli">
					<div class="x9f619 x1n2onr6 x1ja2u2z x78zum5 x2lah0s x1qughib x6s0dn4 xozqiw3 x1q0g3np">
						<div class="x9f619 x1n2onr6 x1ja2u2z xdt5ytf x2lah0s x193iq5w xeuugli x78zum5">
							<div class="x78zum5 x1iji9kk">
								<div data-visualcompletion="ignore-dynamic" class="x9f619 x1n2onr6 x1ja2u2z x1rg5ohu">
									<div role="img" class="x9f619 x1n2onr6 x1ja2u2z xsdox4t x1useyqa">
										<div class="x9f619 x1ja2u2z x10l6tqk x5yr21d xh8yej3">
											<div class="x9f619 x1n2onr6 x1ja2u2z x1jx94hy x1lliihq x6ikm8r x10wlt62 x14yjl9h xudhj91 x18nykt9 xww2gxu">
												<div class="x9f619 x1n2onr6 x1ja2u2z">
													<div class="xqtp20y x1n2onr6 xh8yej3" style="padding-top: 100%;">
														<div class="x1qjc9v5 x1q0q8m5 x1qhh985 xu3j5b3 xcfux6l x26u7qi xm0m39n x13fuv20 x972fbf x1ey2m1c x9f619 x78zum5 xds687c xdt5ytf x1iyjqo2 xs83m0k x1qughib xat24cr x11i5rnm x1mh8g0r xdj266r x2lwn1j xeuugli x18d9i69 x4uap5 xkhd6sd xexx8yu x10l6tqk x17qophe x13vifvy x1ja2u2z">
															<img alt="Some Person" class="x1lliihq x193iq5w x1us19tq xl1xv1r" referrerpolicy="origin-when-cross-origin" src="https://example.com/image.jpg">
															<div class="x9f619 x1ja2u2z x1ey2m1c xlg9a9y xds687c x10l6tqk x17qophe x13vifvy x14yjl9h xudhj91 x18nykt9 xww2gxu">
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="x9f619 x1ja2u2z x78zum5 xdt5ytf xypfpte x10l6tqk x1ey2m1c xds687c">
										<span class="x3nfvp2 xv9rvxn x13fuv20 xu3j5b3 x1q0q8m5 x26u7qi xamhcws xol2nv xlxy82 x19p7ews x170jfvy x1fsd2vl x6zyg47 x1xm1mqw xpn8fn3 xtct9fg x14yjl9h xudhj91 x18nykt9 xww2gxu" data-visualcompletion="ignore">
										</span>
									</div>
								</div>
							</div>
						</div>
						<div class="x9f619 x1n2onr6 x1ja2u2z x78zum5 x1iyjqo2 xs83m0k xeuugli x1qughib x6s0dn4 x1a02dak x1q0g3np xdl72j9">
							<div class="x9f619 x1n2onr6 x1ja2u2z x78zum5 xdt5ytf x2lah0s x193iq5w xeuugli x1iyjqo2">
								<div class="">
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="x1o1ewxj x3x9cwd x1e5q0jg x13rtm0m x1ey2m1c xds687c xg01cxk x47corl x10l6tqk x17qophe x13vifvy x1ebt8du x19991ni x1dhq9h" data-visualcompletion="ignore">
				</div>
			</a>
		</div>
	</div>
</div>