SEO and message notification in title

.github/workflows/publish.yml

@@ -19,6 +19,7 @@ jobs:
               X-Frame-Options: DENY
               Access-Control-Allow-Origin: ${DUO_API_URL}
           EOF
+          sed -i 's|<meta charset="utf-8"/>|&<meta name="description" content="Free dating online. Zero ads. Unlimited messages. Over 2000 match questions from anime to life goals. Fall in love and find a relationship at Duolicious."/>|g' web-build/index.html
         env:
           NODE_OPTIONS: --openssl-legacy-provider
           DUO_API_URL:            https://api.duolicious.app

App.tsx

@@ -42,6 +42,7 @@ import { delay } from './util/util';
 import { ReportModal } from './components/report-modal';
 import { ImageCropper } from './components/image-cropper';
 import { StreamErrorModal } from './components/stream-error-modal';
+import { Inbox, inboxStats, observeInbox } from './xmpp/xmpp';
 
 // TODO: iOS UI testing
 // TODO: Add the ability to reply to things (e.g. pictures, quiz responses) from people's profiles. You'll need to change the navigation to make it easier to reply to things. Consider breaking profiles into sections which can be replied to, each having one image or block of text. Letting people reply to specific things on the profile will improve intro quality.
@@ -131,6 +132,7 @@ let signedInUser: SignedInUser | undefined;
 let setSignedInUser: React.Dispatch<React.SetStateAction<typeof signedInUser>>;
 
 const App = () => {
+  const [numUnreadTitle, setNumUnreadTitle] = useState(0);
   const [numUsers, setNumUsers] = useState(-1);
   const [isLoading, setIsLoading] = useState(true);
   const [serverStatus, setServerStatus] = useState<ServerStatus>("ok");
@@ -276,6 +278,15 @@ const App = () => {
     history.pushState((history?.state ?? 0) + 1, "", "#");
   }, []);
 
+  const onChangeInbox = useCallback((inbox: Inbox | null) => {
+    const stats = inbox ? inboxStats(inbox) : undefined;
+    const num = stats?.numChats ?
+      stats?.numUnreadChats :
+      stats?.numUnreadIntros;
+
+    setNumUnreadTitle(num ?? 0);
+  }, [inboxStats, setNumUnreadTitle]);
+
   if (Platform.OS === 'web') {
     useEffect(() => {
       const handlePopstate = (ev) => {
@@ -290,6 +301,10 @@ const App = () => {
 
       window.addEventListener('popstate', handlePopstate);
     }, []);
+
+    useEffect(() => {
+      return observeInbox(onChangeInbox);
+    }, [observeInbox, onChangeInbox]);
   }
 
   const onLayoutRootView = useCallback(async () => {
@@ -317,7 +332,8 @@ const App = () => {
           }}
           onReady={onLayoutRootView}
           documentTitle={{
-            formatter: () => "Duolicious"
+            formatter: () =>
+              (numUnreadTitle ? `(${numUnreadTitle}) ` : '') + 'Duolicious'
           }}
         >
           <StatusBar

components/conversation-screen.tsx

@@ -4,11 +4,12 @@ import {
   Image,
   ImageBackground,
   ListRenderItemInfo,
+  Platform,
   Pressable,
   ScrollView,
   Text,
-  TextStyle,
   TextInput,
+  TextStyle,
   View,
   ViewStyle,
 } from 'react-native';
@@ -29,6 +30,7 @@ import {
   Message,
   MessageStatus,
   fetchConversation,
+  markDisplayed,
   onReceiveMessage,
   refreshInbox,
   sendMessage,
@@ -243,11 +245,15 @@ const ConversationScreen = ({navigation, route}) => {
   const hasFetchedAll = useRef(false);
   const hasFinishedFirstLoad = useRef(false);
   const isFetchingNextPage = useRef(false);
+  const [isFocused, setIsFocused] = useState(true);
 
   const personId: number = route?.params?.personId;
   const name: string = route?.params?.name;
   const imageUuid: number = route?.params?.imageUuid;
   const isAvailableUser: boolean = route?.params?.isAvailableUser ?? true;
+  const lastMessage = (messages && messages.length) ?
+    messages[messages.length - 1] :
+    null;
 
   const listRef = useRef<ScrollView>(null)
 
@@ -265,9 +271,9 @@ const ConversationScreen = ({navigation, route}) => {
   const scrollToEnd = useCallback(() => {
     if (listRef.current && !hasScrolled.current) {
       listRef.current.scrollToEnd({animated: true});
-      hasScrolled.current = true;
     }
   }, [listRef.current]);
+  scrollToEnd();
 
   const onPressSend = useCallback(async (text: string): Promise<MessageStatus> => {
     const isFirstMessage = messages === null || messages.length === 0;
@@ -348,6 +354,9 @@ const ConversationScreen = ({navigation, route}) => {
     return layoutMeasurement.height + contentOffset.y >=
       contentSize.height - paddingToBottom;
   };
+  const isAtBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
+    return layoutMeasurement.height + contentOffset.y >= contentSize.height;
+  };
 
   const onScroll = useCallback(({nativeEvent}) => {
     if (isCloseToTop(nativeEvent) && hasFinishedFirstLoad.current) {
@@ -356,24 +365,64 @@ const ConversationScreen = ({navigation, route}) => {
     if (isCloseToBottom(nativeEvent)) {
       hasFinishedFirstLoad.current = true;
     }
+    if (isAtBottom(nativeEvent)) {
+      hasScrolled.current = true;
+    }
   }, [maybeLoadNextPage]);
 
   useEffect(() => {
     maybeLoadNextPage();
 
-    return onReceiveMessage(_onReceiveMessage, personId);
-  }, []);
+    return onReceiveMessage(_onReceiveMessage, personId, isFocused);
+  }, [
+    maybeLoadNextPage,
+    onReceiveMessage,
+    _onReceiveMessage,
+    personId,
+    isFocused,
+  ]);
 
   const toggleMenu = useCallback(() => {
     setShowMenu(x => !x);
   }, []);
 
+  const markLastMessageRead = useCallback(async () => {
+    if (!lastMessage) {
+      return;
+    }
+
+    await markDisplayed(lastMessage);
+  }, [lastMessage]);
+
   useEffect(() => {
     return listen(`skip-profile-${personId}`, () => {
       navigation.popToTop();
     });
   }, [navigation, personId]);
 
+  if (Platform.OS === 'web') {
+    useEffect(() => {
+      const handleFocus = () => {
+        markLastMessageRead();
+        setIsFocused(true);
+      };
+
+      const handleBlur = () => {
+        setIsFocused(false);
+      };
+
+      // Add event listeners
+      window.addEventListener('focus', handleFocus);
+      window.addEventListener('blur', handleBlur);
+
+      // Clean up
+      return () => {
+        window.removeEventListener('focus', handleFocus);
+        window.removeEventListener('blur', handleBlur);
+      };
+    }, [markLastMessageRead]);
+  }
+
   return (
     <>
       <TopNavBar>