Merge branch 'main' into hailey/dm-push-notifs

bskyweb/cmd/bskyweb/rss.go

@@ -5,14 +5,16 @@ import (
 	"fmt"
 	"net/http"
 	"strings"
-	"time"
 
 	appbsky "github.com/bluesky-social/indigo/api/bsky"
 	"github.com/bluesky-social/indigo/atproto/syntax"
 
 	"github.com/labstack/echo/v4"
 )
 
+// time.RFC822Z, but with four digit year. used for RSS pubData.
+var FullYearRFC822Z = "02 Jan 2006 15:04 -0700"
+
 type ItemGUID struct {
 	XMLName xml.Name `xml:"guid"`
 	Value   string   `xml:",chardata"`
@@ -107,7 +109,7 @@ func (srv *Server) WebProfileRSS(c echo.Context) error {
 		pubDate := ""
 		createdAt, err := syntax.ParseDatetimeLenient(rec.CreatedAt)
 		if nil == err {
-			pubDate = createdAt.Time().Format(time.RFC822Z)
+			pubDate = createdAt.Time().Format(FullYearRFC822Z)
 		}
 		posts = append(posts, Item{
 			Link:        fmt.Sprintf("https://%s/profile/%s/post/%s", req.Host, pv.Handle, aturi.RecordKey().String()),

src/components/dms/ActionsWrapper.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import React from 'react'
 import {Keyboard, Pressable, View} from 'react-native'
 import Animated, {
   cancelAnimation,
@@ -9,6 +9,7 @@ import Animated, {
 } from 'react-native-reanimated'
 import {ChatBskyConvoDefs} from '@atproto-labs/api'
 
+import {HITSLOP_10} from 'lib/constants'
 import {useHaptics} from 'lib/haptics'
 import {atoms as a} from '#/alf'
 import {MessageMenu} from '#/components/dms/MessageMenu'
@@ -37,12 +38,12 @@ export function ActionsWrapper({
 
   // Reanimated's `runOnJS` doesn't like refs, so we can't use `runOnJS(menuControl.open)()`. Instead, we'll use this
   // function
-  const open = useCallback(() => {
+  const open = React.useCallback(() => {
     Keyboard.dismiss()
     menuControl.open()
   }, [menuControl])
 
-  const shrink = useCallback(() => {
+  const shrink = React.useCallback(() => {
     'worklet'
     cancelAnimation(scale)
     scale.value = withTiming(1, {duration: 200}, () => {
@@ -52,7 +53,7 @@ export function ActionsWrapper({
 
   const grow = React.useCallback(() => {
     'worklet'
-    scale.value = withTiming(1.05, {duration: 750}, finished => {
+    scale.value = withTiming(1.05, {duration: 450}, finished => {
       if (!finished) return
       animationDidComplete.value = true
       runOnJS(playHaptic)()
@@ -74,7 +75,8 @@ export function ActionsWrapper({
         style={animatedStyle}
         unstable_pressDelay={200}
         onPressIn={grow}
-        onTouchEnd={shrink}>
+        onTouchEnd={shrink}
+        hitSlop={HITSLOP_10}>
         {children}
       </AnimatedPressable>
       <MessageMenu message={message} control={menuControl} hideTrigger={true} />

src/components/dms/ConvoMenu.tsx

@@ -7,6 +7,7 @@ import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
 import {NavigationProp} from '#/lib/routes/types'
+import {useMarkAsReadMutation} from '#/state/queries/messages/conversation'
 import {useLeaveConvo} from '#/state/queries/messages/leave-conversation'
 import {
   useMuteConvo,
@@ -24,6 +25,7 @@ import {PersonX_Stroke2_Corner0_Rounded as PersonX} from '#/components/icons/Per
 import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker'
 import * as Menu from '#/components/Menu'
 import * as Prompt from '#/components/Prompt'
+import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '../icons/Bubble'
 
 let ConvoMenu = ({
   convo,
@@ -32,18 +34,21 @@ let ConvoMenu = ({
   control,
   hideTrigger,
   currentScreen,
+  showMarkAsRead,
 }: {
   convo: ChatBskyConvoDefs.ConvoView
   profile: AppBskyActorDefs.ProfileViewBasic
   onUpdateConvo?: (convo: ChatBskyConvoDefs.ConvoView) => void
   control?: Menu.MenuControlProps
   hideTrigger?: boolean
   currentScreen: 'list' | 'conversation'
+  showMarkAsRead?: boolean
 }): React.ReactNode => {
   const navigation = useNavigation<NavigationProp>()
   const {_} = useLingui()
   const t = useTheme()
   const leaveConvoControl = Prompt.usePromptControl()
+  const {mutate: markAsRead} = useMarkAsReadMutation()
 
   const onNavigateToProfile = useCallback(() => {
     navigation.navigate('Profile', {name: profile.did})
@@ -107,6 +112,20 @@ let ConvoMenu = ({
         )}
         <Menu.Outer>
           <Menu.Group>
+            {showMarkAsRead && (
+              <Menu.Item
+                label={_(msg`Mark as read`)}
+                onPress={() =>
+                  markAsRead({
+                    convoId: convo.id,
+                  })
+                }>
+                <Menu.ItemText>
+                  <Trans>Mark as read</Trans>
+                </Menu.ItemText>
+                <Menu.ItemIcon icon={Bubble} />
+              </Menu.Item>
+            )}
             <Menu.Item
               label={_(msg`Go to user's profile`)}
               onPress={onNavigateToProfile}>

src/components/icons/Bubble.tsx

@@ -3,3 +3,11 @@ import {createSinglePathSVG} from './TEMPLATE'
 export const BubbleQuestion_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M5.002 17.036V5h14v12.036h-3.986a1 1 0 0 0-.639.23l-2.375 1.968-2.344-1.965a1 1 0 0 0-.643-.233H5.002ZM20.002 3h-16a1 1 0 0 0-1 1v14.036a1 1 0 0 0 1 1h4.65l2.704 2.266a1 1 0 0 0 1.28.004l2.74-2.27h4.626a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Zm-7.878 3.663c-1.39 0-2.5 1.135-2.5 2.515a1 1 0 0 0 2 0c0-.294.232-.515.5-.515a.507.507 0 0 1 .489.6.174.174 0 0 1-.027.048 1.1 1.1 0 0 1-.267.226c-.508.345-1.128.923-1.286 1.978a1 1 0 1 0 1.978.297.762.762 0 0 1 .14-.359c.063-.086.155-.169.293-.262.436-.297 1.18-.885 1.18-2.013 0-1.38-1.11-2.515-2.5-2.515ZM12 15.75a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z',
 })
+
+export const Bubble_Stroke2_Corner2_Rounded = createSinglePathSVG({
+  path: 'M2.002 6a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H12.28l-4.762 2.858A1 1 0 0 1 6.002 21v-2h-1a3 3 0 0 1-3-3V6Zm3-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v1.234l3.486-2.092a1 1 0 0 1 .514-.142h7a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-14Z',
+})
+
+export const Bubble_Stroke2_Corner3_Rounded = createSinglePathSVG({
+  path: 'M2.002 7a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H12.28l-4.762 2.858A1 1 0 0 1 6.002 21v-2a4 4 0 0 1-4-4V7Zm4-2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h1a1 1 0 0 1 1 1v1.234l3.486-2.092a1 1 0 0 1 .514-.142h6a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-12Z',
+})

src/screens/Messages/Conversation/MessagesList.tsx

@@ -250,6 +250,7 @@ export function MessagesList() {
           ListHeaderComponent={
             <MaybeLoader isLoading={convo.isFetchingHistory} />
           }
+          sideBorders={false}
         />
       </ScrollProvider>
       <MessageInput onSendMessage={onSendMessage} scrollToEnd={scrollToEnd} />

src/screens/Messages/Conversation/index.tsx

@@ -19,8 +19,8 @@ import {PreviewableUserAvatar} from 'view/com/util/UserAvatar'
 import {CenteredView} from 'view/com/util/Views'
 import {MessagesList} from '#/screens/Messages/Conversation/MessagesList'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
 import {ConvoMenu} from '#/components/dms/ConvoMenu'
+import {Error} from '#/components/Error'
 import {ListMaybePlaceholder} from '#/components/Lists'
 import {Text} from '#/components/Typography'
 import {ClipClopGate} from '../gate'
@@ -54,29 +54,30 @@ export function MessagesConversationScreen({route}: Props) {
 
 function Inner() {
   const convo = useConvo()
+  const {_} = useLingui()
 
   if (
     convo.status === ConvoStatus.Uninitialized ||
     convo.status === ConvoStatus.Initializing
   ) {
-    return <ListMaybePlaceholder isLoading />
+    return (
+      <CenteredView style={a.flex_1} sideBorders>
+        <Header />
+        <ListMaybePlaceholder isLoading />
+      </CenteredView>
+    )
   }
 
   if (convo.status === ConvoStatus.Error) {
-    // TODO
     return (
-      <View>
-        <CenteredView style={{flex: 1}} sideBorders>
-          <Text>Something went wrong</Text>
-          <Button
-            label="Retry"
-            onPress={() => {
-              convo.error.retry()
-            }}>
-            <ButtonText>Retry</ButtonText>
-          </Button>
-        </CenteredView>
-      </View>
+      <CenteredView style={a.flex_1} sideBorders>
+        <Header />
+        <Error
+          title={_(msg`Something went wrong`)}
+          message={_(msg`We couldn't load this conversation`)}
+          onRetry={() => convo.error.retry()}
+        />
+      </CenteredView>
     )
   }
 
@@ -86,7 +87,7 @@ function Inner() {
 
   return (
     <KeyboardProvider>
-      <CenteredView style={{flex: 1}} sideBorders>
+      <CenteredView style={a.flex_1} sideBorders>
         <Header profile={convo.recipients[0]} />
         <MessagesList />
       </CenteredView>
@@ -97,7 +98,7 @@ function Inner() {
 let Header = ({
   profile,
 }: {
-  profile: AppBskyActorDefs.ProfileViewBasic
+  profile?: AppBskyActorDefs.ProfileViewBasic
 }): React.ReactNode => {
   const t = useTheme()
   const {_} = useLingui()
@@ -155,12 +156,34 @@ let Header = ({
         <View style={{width: 30}} />
       )}
       <View style={[a.align_center, a.gap_sm, a.flex_1]}>
-        <PreviewableUserAvatar size={32} profile={profile} />
-        <Text style={[a.text_lg, a.font_bold, a.text_center]}>
-          {profile.displayName}
-        </Text>
+        {profile ? (
+          <>
+            <PreviewableUserAvatar size={32} profile={profile} />
+            <Text style={[a.text_lg, a.font_bold, a.text_center]}>
+              {profile.displayName}
+            </Text>
+          </>
+        ) : (
+          <>
+            <View
+              style={[
+                {width: 32, height: 32},
+                a.rounded_full,
+                t.atoms.bg_contrast_25,
+              ]}
+            />
+            <View
+              style={[
+                {width: 120, height: 18},
+                a.rounded_xs,
+                t.atoms.bg_contrast_25,
+                a.mb_2xs,
+              ]}
+            />
+          </>
+        )}
       </View>
-      {convo.status === ConvoStatus.Ready ? (
+      {convo.status === ConvoStatus.Ready && profile ? (
         <ConvoMenu
           convo={convo.convo}
           profile={profile}

src/screens/Messages/List/index.tsx

@@ -275,7 +275,7 @@ function ChatListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
             a.pl_md,
             a.py_sm,
             a.gap_md,
-            a.pr_2xl,
+            a.pr_xl,
             (hovered || pressed) && t.atoms.bg_contrast_25,
           ]}>
           <View pointerEvents="none">
@@ -340,6 +340,7 @@ function ChatListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
             // tricky because it captures the mouse event
             hideTrigger
             currentScreen="list"
+            showMarkAsRead={convo.unreadCount > 0}
           />
         </View>
       )}