fix(app): display study not found message for all modes (#5752)

* fix(app): move study validation to ModeRoute component

- Moved validation from defaultRouteInit.ts to Mode.tsx
- Added dedicated useEffect hook for study validation

* test: add Playwright test for study not found error page across multiple modes

platform/app/src/routes/Mode/Mode.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { useParams, useLocation } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { utils } from '@ohif/core';
 import { ImageViewerProvider, DragAndDropProvider } from '@ohif/ui-next';
@@ -31,6 +32,8 @@ export default function ModeRoute({
   // The URL's query search parameters where the keys casing is maintained
   const query = useSearchParams();
 
+  const navigate = useNavigate();
+
   mode?.onModeInit?.({
     servicesManager,
     extensionManager,
@@ -130,6 +133,38 @@ export default function ModeRoute({
     };
   }, [location, ExtensionDependenciesLoaded]);
 
+  /**
+   * Validates study existence before loading the viewer.
+   * Moved from PanelStudyBrowser.tsx to ensure validation runs in all modes
+   */
+  useEffect(() => {
+    if (!ExtensionDependenciesLoaded || !studyInstanceUIDs?.length || !dataSource) {
+      return;
+    }
+
+    const validateStudies = async () => {
+      for (const studyInstanceUID of studyInstanceUIDs) {
+        try {
+          const qidoForStudyUID = await dataSource.query.studies.search({
+            studyInstanceUid: studyInstanceUID,
+          });
+
+          if (!qidoForStudyUID?.length) {
+            console.warn('Study not found:', studyInstanceUID);
+            navigate('/notfoundstudy');
+            return;
+          }
+        } catch (error) {
+          console.error('Error validating study:', studyInstanceUID, error);
+          navigate('/notfoundstudy');
+          return;
+        }
+      }
+    };
+
+    validateStudies();
+  }, [studyInstanceUIDs, ExtensionDependenciesLoaded, dataSource, navigate]);
+
   useEffect(() => {
     if (!ExtensionDependenciesLoaded || !studyInstanceUIDs?.length) {
       return;

platform/app/src/routes/index.tsx

@@ -38,12 +38,22 @@ const NotFoundStudy = () => {
   return (
     <div className="absolute flex h-full w-full items-center justify-center text-white">
       <div>
-        <h4>
+        <h4 data-cy="study-not-found-message">
           One or more of the requested studies are not available at this time.
         </h4>
         {showStudyList && (
-          <p className="mt-2">
-            Return to the <Link className="text-primary-light" to="/">study list</Link> to select a different study to view.
+          <p
+            className="mt-2"
+            data-cy="return-to-study-list-message"
+          >
+            Return to the{' '}
+            <Link
+              className="text-primary-light"
+              to="/"
+            >
+              study list
+            </Link>{' '}
+            to select a different study to view.
           </p>
         )}
       </div>