From ab1937226f88c18f82456bcd0eff0a7a87ffda29 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 30 Jun 2023 23:22:01 +0530
Subject: [PATCH] chore: make "potentially out of sync" warning more visible on
 mobile

---
 .../Header/ContentListHeader.tsx              | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx b/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
index 3c819ae12..5287aa611 100644
--- a/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
@@ -55,7 +55,8 @@ const ContentListHeader = ({
   const isTablet = matchesMd && isTouchScreen
 
   const [syncSubtitle, setSyncSubtitle] = useState('')
-  const showSyncSubtitle = isMobileScreen && !!syncSubtitle
+  const [outOfSync, setOutOfSync] = useState(false)
+  const showSyncSubtitle = isMobileScreen && (!!syncSubtitle || outOfSync)
 
   useEffect(() => {
     return application.addEventObserver(async (event) => {
@@ -64,6 +65,16 @@ const ContentListHeader = ({
         return
       }
 
+      if (event === ApplicationEvent.EnteredOutOfSync) {
+        setOutOfSync(true)
+        return
+      }
+
+      if (event === ApplicationEvent.ExitedOutOfSync) {
+        setOutOfSync(false)
+        return
+      }
+
       const syncStatus = application.sync.getSyncStatus()
       const { localDataDone, localDataCurrent, localDataTotal } = syncStatus.getStats()
 
@@ -165,14 +176,18 @@ const ContentListHeader = ({
           )}
           <div className="mr-2 flex min-w-0 flex-col break-words">
             <div className="text-2xl font-semibold text-text md:text-lg">{panelTitle}</div>
-            {showSyncSubtitle && <div className="-mt-1 text-xs text-passive-0 md:mt-0">{syncSubtitle}</div>}
+            {showSyncSubtitle && (
+              <div className={classNames('-mt-1 text-xs md:mt-0', outOfSync ? 'text-warning' : 'text-passive-0')}>
+                {outOfSync ? 'Potentially Out of Sync' : syncSubtitle}
+              </div>
+            )}
             {optionsSubtitle && <div className="text-xs text-passive-0">{optionsSubtitle}</div>}
           </div>
           <ListItemVaultInfo item={selectedTag} />
         </div>
       </div>
     )
-  }, [optionsSubtitle, selectedTag, showSyncSubtitle, icon, panelTitle, syncSubtitle])
+  }, [optionsSubtitle, showSyncSubtitle, icon, panelTitle, outOfSync, syncSubtitle, selectedTag])
 
   const PhoneAndDesktopLayout = useMemo(() => {
     return (