From c9cc1db3adf89668a61d990262a9dcb835536c0e Mon Sep 17 00:00:00 2001
From: ~latter-bolden <brian@tlon.io>
Date: Thu, 8 Feb 2024 12:53:16 -0500
Subject: [PATCH 1/2] talk sunset: correctly track settings store seen talk
 sunset state and prevent the modal flashing on page load

---
 ui/src/nav/TalkNav.tsx   | 14 ++++++++++++--
 ui/src/state/settings.ts |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/ui/src/nav/TalkNav.tsx b/ui/src/nav/TalkNav.tsx
index 5720591831..de6b6bd8b9 100644
--- a/ui/src/nav/TalkNav.tsx
+++ b/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>
   );
 }
diff --git a/ui/src/state/settings.ts b/ui/src/state/settings.ts
index af584dcbe1..951e3f17f6 100644
--- a/ui/src/state/settings.ts
+++ b/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;
     }

From b337fe4609c8740f74d45b8133465321fd68321b Mon Sep 17 00:00:00 2001
From: ~latter-bolden <brian@tlon.io>
Date: Thu, 8 Feb 2024 13:01:08 -0500
Subject: [PATCH 2/2] talk sunset: indicate in header and allow sunset sheet to
 be manually shown on mobile

---
 ui/src/dms/MobileMessagesSidebar.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/ui/src/dms/MobileMessagesSidebar.tsx b/ui/src/dms/MobileMessagesSidebar.tsx
index f85e19d597..6fa78b8443 100644
--- a/ui/src/dms/MobileMessagesSidebar.tsx
+++ b/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>
+  );
+}