feat(web): navigate to pinned message (#1561)

Author: nikkothari22

frontend/src/components/feature/pinned-messages/PinnedMessageModalContent.tsx

@@ -1,6 +1,6 @@
-import { Dialog, Flex, IconButton, Text } from '@radix-ui/themes'
+import { Dialog, Flex, IconButton, Text, VisuallyHidden } from '@radix-ui/themes'
 import { useFrappeGetCall } from 'frappe-react-sdk'
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import { Message } from '../../../../../types/Messaging/Message'
 import { ErrorBanner } from '@/components/layout/AlertBanner/ErrorBanner'
 import { MessageBox } from '../GlobalSearch/MessageBox'
@@ -14,6 +14,29 @@ export const PinnedMessageModalContent = ({ onClose }: { onClose: () => void })
         revalidateOnFocus: false
     })
 
+    const navigate = useNavigate()
+
+    const { workspaceID } = useParams()
+
+    const handleNavigateToChannel = (channelID: string, workspace?: string, baseMessage?: string) => {
+        let baseRoute = ''
+        if (workspace) {
+            baseRoute = `/${workspace}`
+        } else {
+            baseRoute = `/${workspaceID}`
+        }
+
+        navigate({
+            pathname: `${baseRoute}/${channelID}`,
+            search: `message_id=${baseMessage}`
+        })
+    }
+
+    const handleScrollToMessage = (messageName: string, channelID: string, workspace?: string) => {
+        handleNavigateToChannel(channelID, workspace, messageName)
+        onClose()
+    }
+
     return (
         <>
             <Dialog.Title>
@@ -24,11 +47,16 @@ export const PinnedMessageModalContent = ({ onClose }: { onClose: () => void })
                     </IconButton>
                 </Flex>
             </Dialog.Title>
+            <VisuallyHidden>
+                <Dialog.Description>
+                    Pinned Messages
+                </Dialog.Description>
+            </VisuallyHidden>
             <ErrorBanner error={error} />
             <Flex direction='column' gap='3' justify='start'>
                 {data?.message?.map((message) => {
                     return (
-                        <MessageBox key={message.name} message={message} />
+                        <MessageBox key={message.name} message={message} handleScrollToMessage={handleScrollToMessage} />
                     )
                 })}
             </Flex>