link to viewer

src/langs/fa.json

@@ -5,7 +5,8 @@
     "catalog": "کاتالوگ"
   },
   "header": {
-    "search": "جستجو"
+    "search": "جستجو",
+    "open_viewer": "مشاهده در حالت نمایش"
   },
   "view": {
     "title": "نمایش کاتالوگ",

src/pages/editor/Editor.tsx

@@ -47,7 +47,7 @@ const Editor: FC = () => {
             isLayersPanelOpen ? "xl:pl-[296px]" : "xl:pl-[80px]"
         )}>
             {isSaving ? (
-                <div className="fixed top-10 left-10 z-50 rounded-full  shadow-sm">
+                <div className="fixed bottom-10 left-10 z-50 rounded-full  shadow-sm">
                     <div className="flex items-center gap-2 text-sm text-gray-700">
                         <span className="h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-black" />
                         {/* <span>در حال ذخیره ...</span> */}

src/shared/Header.tsx

@@ -3,9 +3,10 @@ import Input from '@/components/Input'
 // import { ArrowDown2, CloseCircle, HambergerMenu, Logout, Wallet } from 'iconsax-react'
 // import AvatarImage from '../assets/images/avatar_image.png'
 import { useTranslation } from 'react-i18next'
-import { useLocation } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
+import { Paths } from '@/config/Paths'
 import { useSharedStore } from '@/shared/store/sharedStore'
-import { HambergerMenu } from 'iconsax-react'
+import { Eye, HambergerMenu } from 'iconsax-react'
 import { clx } from '@/helpers/utils'
 
 type SidebarSize = 'default' | 'wide'
@@ -33,6 +34,13 @@ const Header: FC<HeaderProps> = ({ hasMainSidebar = true, sidebarSize = 'default
     const { t } = useTranslation('global')
     const { setOpenSidebar, openSidebar, hasSubMenu, setSearch } = useSharedStore()
     const location = useLocation()
+    const editorPathPrefix = `${Paths.editor}/`
+    const isEditorRoute =
+        location.pathname.startsWith(editorPathPrefix) &&
+        location.pathname.length > editorPathPrefix.length
+    const editorDocumentId = isEditorRoute
+        ? (location.pathname.slice(editorPathPrefix.length).split('/')[0] ?? '')
+        : ''
 
     // useEffect(() => {
     //     setPopoverKey((prevKey) => prevKey + 1);
@@ -71,6 +79,17 @@ const Header: FC<HeaderProps> = ({ hasMainSidebar = true, sidebarSize = 'default
             </div>
             {/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
             <div className='flex xl:gap-6 gap-4 items-center'>
+                {isEditorRoute && editorDocumentId ? (
+                    <Link
+                        to={`${Paths.viewer}/${editorDocumentId}`}
+                        className='flex items-center'
+                        aria-label={t('header.open_viewer')}
+                        title={t('header.open_viewer')}
+                    >
+                        <Eye size={20} color='black' />
+                    </Link>
+                ) : null}
+
                 {/* <Link className='xl:hidden' to={Paths.wallet}>
                     <Wallet className='xl:size-[18px] size-[17px]' color='#da2129' />
                 </Link> */}