fix(service-portal): Add error toast to overveiw (#16021)

* Add error toast to overveiw

* Remove console log

* Fix focus on checkmark inbox

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

libs/service-portal/documents/src/components/DocumentLine/DocumentLineV2.tsx

@@ -3,7 +3,7 @@ import format from 'date-fns/format'
 import { FC, useEffect, useRef, useState } from 'react'
 
 import { DocumentV2, DocumentV2Content } from '@island.is/api/schema'
-import { Box, Text, LoadingDots, Icon } from '@island.is/island-ui/core'
+import { Box, Text, LoadingDots, Icon, toast } from '@island.is/island-ui/core'
 import { dateFormat } from '@island.is/shared/constants'
 import { m } from '@island.is/service-portal/core'
 import * as styles from './DocumentLine.css'
@@ -75,7 +75,7 @@ export const DocumentLine: FC<Props> = ({
   const avatarRef = useRef(null)
 
   const isFocused = useIsChildFocusedorHovered(wrapperRef)
-  const isAvatarFocused = useIsChildFocusedorHovered(avatarRef)
+  const isAvatarFocused = useIsChildFocusedorHovered(avatarRef, false)
 
   useEffect(() => {
     setHasFocusOrHover(isFocused)
@@ -135,11 +135,14 @@ export const DocumentLine: FC<Props> = ({
         }
       },
       onError: () => {
-        setDocumentDisplayError(
-          formatMessage(messages.documentFetchError, {
-            senderName: documentLine.sender?.name ?? '',
-          }),
-        )
+        const errorMessage = formatMessage(messages.documentFetchError, {
+          senderName: documentLine.sender?.name ?? '',
+        })
+        if (asFrame) {
+          toast.error(errorMessage, { toastId: 'overview-doc-error' })
+        } else {
+          setDocumentDisplayError(errorMessage)
+        }
       },
     })
 

libs/service-portal/documents/src/hooks/useIsChildFocused.ts

@@ -1,6 +1,9 @@
 import { RefObject, useEffect, useState } from 'react'
 
-export const useIsChildFocusedorHovered = (ref: RefObject<HTMLElement>) => {
+export const useIsChildFocusedorHovered = (
+  ref: RefObject<HTMLElement>,
+  focus = true,
+) => {
   const [isFocused, setIsFocused] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
 
@@ -21,11 +24,15 @@ export const useIsChildFocusedorHovered = (ref: RefObject<HTMLElement>) => {
       }
     }
 
-    document.addEventListener('focusin', handleFocus)
+    if (focus) {
+      document.addEventListener('focusin', handleFocus)
+    }
     document.addEventListener('mouseover', handleHover)
 
     return () => {
-      document.removeEventListener('focusin', handleFocus)
+      if (focus) {
+        document.removeEventListener('focusin', handleFocus)
+      }
       document.removeEventListener('mouseover', handleHover)
     }
   }, [ref])