Show the bank-sync notice only when Synci is behind, and make it more visible

Author: rollecode

src/components/dashboard/synci-status.tsx

@@ -6,8 +6,11 @@ import { Clock } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
 import { fi as fiFns, enUS } from "date-fns/locale";
 
-// Passive heads-up when Synci is the data source (local mode): how long ago the bank last synced,
-// plus weekend context, since bank postings lag and the displayed balances can trail reality.
+// Heads-up when Synci is the data source (local mode) and the bank sync is actually behind. Synci
+// normally runs every 30 minutes and a no-op sync still refreshes the timestamp, so this stays
+// hidden while syncing works - it only appears when transactions genuinely are not coming in.
+const STALE_HOURS = 3;
+
 export function SynciStatus() {
   const { locale } = useLocale();
   const [info, setInfo] = useState<{ mode: string; synci: boolean; lastSync: string | null } | null>(null);
@@ -23,27 +26,19 @@ export function SynciStatus() {
 
   if (!info || info.mode !== "local" || !info.synci) return null;
 
-  const day = new Date().getDay();
-  const isWeekend = day === 0 || day === 6;
   const last = info.lastSync ? new Date(info.lastSync) : null;
   const hoursSince = last ? (Date.now() - last.getTime()) / 3600000 : Infinity;
-
-  // Only surface this when it's actually informative: on weekends (bank postings lag) or when the
-  // last sync is getting old. On a normal weekday with the 30-minute timer it stays hidden.
-  if (!isWeekend && hoursSince < 6) return null;
+  if (hoursSince < STALE_HOURS) return null;
 
   const ago = last ? formatDistanceToNow(last, { addSuffix: false, locale: locale === "fi" ? fiFns : enUS }) : null;
-  const syncLine = ago
-    ? (locale === "fi" ? `Viimeisin pankkisynkronointi ${ago} sitten.` : `Last bank sync was ${ago} ago.`)
+  const text = ago
+    ? (locale === "fi" ? `Pankki synkronoitu viimeksi ${ago} sitten. Tapahtumia voi puuttua, tarkista että kaikki on lisätty.` : `Bank last synced ${ago} ago. Some transactions may be missing - check everything is added.`)
     : (locale === "fi" ? "Pankkia ei ole vielä synkronoitu." : "No bank sync yet.");
-  const weekendLine = isWeekend
-    ? (locale === "fi" ? " Viikonloppu - osa tapahtumista voi olla vielä kirjautumatta pankissa." : " It's the weekend, so some transactions may still be pending at the bank.")
-    : "";
 
   return (
     <div className="synci-status">
       <Clock className="synci-status-icon" />
-      <p className="synci-status-text">{syncLine}{weekendLine}</p>
+      <p className="synci-status-text">{text}</p>
     </div>
   );
 }

src/styles/modules/entry-reminder.css

@@ -100,8 +100,8 @@
   gap: 0.625rem;
   padding: 0.625rem 0.75rem;
   border-radius: var(--radius);
-  background: color-mix(in srgb, var(--muted) 35%, transparent);
-  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+  background: color-mix(in srgb, var(--muted) 85%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
 }
 
 .synci-status-icon {