Merge pull request #3221 from tloncorp/lb/fix-talk-sunset

talk sunset: correctly register if you've already seen the sunset banner & add passive indicator on mobile

ui/src/dms/MobileMessagesSidebar.tsx

@@ -17,6 +17,8 @@ import MobileHeader from '@/components/MobileHeader';
 import AddIconMobileNav from '@/components/icons/AddIconMobileNav';
 import FilterIconMobileNav from '@/components/icons/FilterIconMobileNav';
 import useAppName from '@/logic/useAppName';
+import CautionIcon from '@/components/icons/CautionIcon';
+import { useLocalState } from '@/state/local';
 import ActionMenu, { Action } from '@/components/ActionMenu';
 import MessagesList from './MessagesList';
 import MessagesSidebarItem from './MessagesSidebarItem';
@@ -80,7 +82,7 @@ export default function MobileMessagesSidebar() {
   return (
     <div className="flex h-full w-full flex-col">
       <MobileHeader
-        title="Messages"
+        title={appName === 'Talk' ? <TalkSunsetHeader /> : 'Messages'}
         action={
           <div className="flex h-12 items-center justify-end space-x-2">
             <ReconnectingSpinner />
@@ -133,3 +135,14 @@ export default function MobileMessagesSidebar() {
     </div>
   );
 }
+
+function TalkSunsetHeader() {
+  const onClick = () =>
+    useLocalState.setState({ manuallyShowTalkSunset: true });
+
+  return (
+    <div className="flex items-center justify-center py-1" onClick={onClick}>
+      Messages <CautionIcon className="ml-2 h-5 w-5 text-indigo" />
+    </div>
+  );
+}

ui/src/nav/TalkNav.tsx

@@ -5,7 +5,7 @@ import MessagesSidebar from '@/dms/MessagesSidebar';
 import Dialog from '@/components/Dialog';
 import CautionIcon from '@/components/icons/CautionIcon';
 import WidgetDrawer from '@/components/WidgetDrawer';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   usePutEntryMutation,
   useSeenTalkSunset,
@@ -14,15 +14,25 @@ import {
 import { useLocalState, useManuallyShowTalkSunset } from '@/state/local';
 
 export default function TalkNav() {
+  const [timedDelay, setTimedDelay] = useState(false);
   const isMobile = useIsMobile();
   const seenSunset = useSeenTalkSunset();
   const manuallyShowSunset = useManuallyShowTalkSunset();
 
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setTimedDelay(true);
+    }, 3000);
+    return () => clearTimeout(timeout);
+  }, [setTimedDelay]);
+
   return (
     <div className={cn('fixed flex h-full w-full')}>
       {isMobile ? null : <MessagesSidebar />}
       <Outlet />
-      {(!seenSunset || manuallyShowSunset) && <TalkSunsetNotification />}
+      {timedDelay && (!seenSunset || manuallyShowSunset) && (
+        <TalkSunsetNotification />
+      )}
     </div>
   );
 }

ui/src/state/settings.ts

@@ -511,7 +511,7 @@ export function useSeenTalkSunset() {
   const { data, isLoading } = useMergedSettings();
 
   return useMemo(() => {
-    if (isLoading || data === undefined || data.groups === undefined) {
+    if (isLoading || data === undefined || data.talk === undefined) {
       console.log('returning sunset default');
       return false;
     }