From e5bae9adcda4d4e6cf2659a67dcd7eee712267d1 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 5 Jul 2023 13:14:25 +0200
Subject: [PATCH] Global Search: Remove border for first entry (#3359)

---
 src/components/left/search/AudioResults.tsx   | 13 +++++++++++--
 src/components/left/search/FileResults.tsx    | 15 +++++++++++++--
 src/components/left/search/LeftSearch.scss    | 16 ++++++++++++----
 src/components/left/search/LinkResults.tsx    | 13 +++++++++++--
 src/components/left/search/RecentContacts.tsx |  9 ++++++++-
 src/global/actions/ui/initial.ts              |  1 +
 6 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/src/components/left/search/AudioResults.tsx b/src/components/left/search/AudioResults.tsx
index a666d6b99..5179bc42f 100644
--- a/src/components/left/search/AudioResults.tsx
+++ b/src/components/left/search/AudioResults.tsx
@@ -11,6 +11,7 @@ import { createMapStateToProps } from './helpers/createMapStateToProps';
 import { formatMonthAndYear, toYearMonth } from '../../../util/dateFormat';
 import { getSenderName } from './helpers/getSenderName';
 import { throttle } from '../../../util/schedulers';
+import buildClassName from '../../../util/buildClassName';
 
 import useAsyncRendering from '../../right/hooks/useAsyncRendering';
 import useLang from '../../../hooks/useLang';
@@ -79,7 +80,8 @@ const AudioResults: FC<OwnProps & StateProps> = ({
 
   function renderList() {
     return foundMessages.map((message, index) => {
-      const shouldDrawDateDivider = index === 0
+      const isFirst = index === 0;
+      const shouldDrawDateDivider = isFirst
         || toYearMonth(message.date) !== toYearMonth(foundMessages[index - 1].date);
       return (
         <div
@@ -87,7 +89,14 @@ const AudioResults: FC<OwnProps & StateProps> = ({
           key={message.id}
         >
           {shouldDrawDateDivider && (
-            <p className="section-heading" dir={lang.isRtl ? 'rtl' : undefined}>
+            <p
+              className={buildClassName(
+                'section-heading',
+                isFirst && 'section-heading-first',
+                !isFirst && 'section-heading-with-border',
+              )}
+              dir={lang.isRtl ? 'rtl' : undefined}
+            >
               {formatMonthAndYear(lang, new Date(message.date * 1000))}
             </p>
           )}
diff --git a/src/components/left/search/FileResults.tsx b/src/components/left/search/FileResults.tsx
index f2fd1c6ee..06c1cb267 100644
--- a/src/components/left/search/FileResults.tsx
+++ b/src/components/left/search/FileResults.tsx
@@ -15,6 +15,7 @@ import { formatMonthAndYear, toYearMonth } from '../../../util/dateFormat';
 import { getSenderName } from './helpers/getSenderName';
 import { throttle } from '../../../util/schedulers';
 import { getMessageDocument } from '../../../global/helpers';
+import buildClassName from '../../../util/buildClassName';
 
 import useAsyncRendering from '../../right/hooks/useAsyncRendering';
 import useLang from '../../../hooks/useLang';
@@ -88,7 +89,8 @@ const FileResults: FC<OwnProps & StateProps> = ({
 
   function renderList() {
     return foundMessages.map((message, index) => {
-      const shouldDrawDateDivider = index === 0
+      const isFirst = index === 0;
+      const shouldDrawDateDivider = isFirst
         || toYearMonth(message.date) !== toYearMonth(foundMessages[index - 1].date);
       return (
         <div
@@ -96,7 +98,16 @@ const FileResults: FC<OwnProps & StateProps> = ({
           key={message.id}
         >
           {shouldDrawDateDivider && (
-            <p className="section-heading">{formatMonthAndYear(lang, new Date(message.date * 1000))}</p>
+            <p
+              className={buildClassName(
+                'section-heading',
+                isFirst && 'section-heading-first',
+                !isFirst && 'section-heading-with-border',
+              )}
+              dir={lang.isRtl ? 'rtl' : undefined}
+            >
+              {formatMonthAndYear(lang, new Date(message.date * 1000))}
+            </p>
           )}
           <Document
             message={message}
diff --git a/src/components/left/search/LeftSearch.scss b/src/components/left/search/LeftSearch.scss
index 520214642..5db7a2a71 100644
--- a/src/components/left/search/LeftSearch.scss
+++ b/src/components/left/search/LeftSearch.scss
@@ -32,14 +32,18 @@
     font-size: 0.9375rem;
     color: var(--color-text-secondary);
 
-    &::before {
+    &-first {
+      padding-top: 0.75rem;
+    }
+
+    &-with-border::before {
       content: "";
       position: absolute;
-      width: 100%;
+      width: calc(100% + 1.25rem);
       height: 1px;
       background: var(--color-borders);
-      left: 0.625rem;
-      top: -1px;
+      left: 0;
+      top: 0;
     }
 
     &[dir="rtl"],
@@ -71,6 +75,10 @@
     &::before {
       display: none;
     }
+
+    &.without-border {
+      box-shadow: none;
+    }
   }
 
   .WebLink {
diff --git a/src/components/left/search/LinkResults.tsx b/src/components/left/search/LinkResults.tsx
index 350816d7d..33f4fedd2 100644
--- a/src/components/left/search/LinkResults.tsx
+++ b/src/components/left/search/LinkResults.tsx
@@ -13,6 +13,7 @@ import { createMapStateToProps } from './helpers/createMapStateToProps';
 import { formatMonthAndYear, toYearMonth } from '../../../util/dateFormat';
 import { getSenderName } from './helpers/getSenderName';
 import { throttle } from '../../../util/schedulers';
+import buildClassName from '../../../util/buildClassName';
 
 import useAsyncRendering from '../../right/hooks/useAsyncRendering';
 import useLang from '../../../hooks/useLang';
@@ -85,7 +86,8 @@ const LinkResults: FC<OwnProps & StateProps> = ({
 
   function renderList() {
     return foundMessages.map((message, index) => {
-      const shouldDrawDateDivider = index === 0
+      const isFirst = index === 0;
+      const shouldDrawDateDivider = isFirst
         || toYearMonth(message.date) !== toYearMonth(foundMessages[index - 1].date);
       return (
         <div
@@ -94,7 +96,14 @@ const LinkResults: FC<OwnProps & StateProps> = ({
           key={message.id}
         >
           {shouldDrawDateDivider && (
-            <p className="section-heading" dir={lang.isRtl ? 'rtl' : undefined}>
+            <p
+              className={buildClassName(
+                'section-heading',
+                isFirst && 'section-heading-first',
+                !isFirst && 'section-heading-with-border',
+              )}
+              dir={lang.isRtl ? 'rtl' : undefined}
+            >
               {formatMonthAndYear(lang, new Date(message.date * 1000))}
             </p>
           )}
diff --git a/src/components/left/search/RecentContacts.tsx b/src/components/left/search/RecentContacts.tsx
index 882312e15..ae18d97e9 100644
--- a/src/components/left/search/RecentContacts.tsx
+++ b/src/components/left/search/RecentContacts.tsx
@@ -9,6 +9,7 @@ import type { ApiUser } from '../../../api/types';
 import { getUserFirstOrLastName } from '../../../global/helpers';
 import renderText from '../../common/helpers/renderText';
 import { throttle } from '../../../util/schedulers';
+import buildClassName from '../../../util/buildClassName';
 import useHorizontalScroll from '../../../hooks/useHorizontalScroll';
 import useLang from '../../../hooks/useLang';
 
@@ -92,7 +93,13 @@ const RecentContacts: FC<OwnProps & StateProps> = ({
       )}
       {recentlyFoundChatIds && (
         <div className="search-section pt-1">
-          <h3 className="section-heading mt-0 recent-chats-header" dir={lang.isRtl ? 'rtl' : undefined}>
+          <h3
+            className={buildClassName(
+              'section-heading mt-0 recent-chats-header',
+              !topUserIds && 'without-border',
+            )}
+            dir={lang.isRtl ? 'rtl' : undefined}
+          >
             {lang('Recent')}
 
             <Button
diff --git a/src/global/actions/ui/initial.ts b/src/global/actions/ui/initial.ts
index 865f72eec..f98013733 100644
--- a/src/global/actions/ui/initial.ts
+++ b/src/global/actions/ui/initial.ts
@@ -27,6 +27,7 @@ import { replaceSettings } from '../../reducers';
 const HISTORY_ANIMATION_DURATION = 450;
 
 setSystemThemeChangeCallback((theme) => {
+  // eslint-disable-next-line eslint-multitab-tt/no-immediate-global
   let global = getGlobal();
 
   if (!global.settings.byKey.shouldUseSystemTheme) return;