[UI] Add search result preview (#12475)

* [UI] Add search result preview

* Updated search docs

src/frontend/src/components/nav/SearchDrawer.tsx

@@ -47,6 +47,7 @@ import {
 } from '@lib/functions/Navigation';
 import { showNotification } from '@mantine/notifications';
 import { api } from '../../App';
+import { openGlobalPreview } from '../../states/PreviewDrawerState';
 import { useUserSettingsState } from '../../states/SettingsStates';
 import { useUserState } from '../../states/UserState';
 import { RenderInstance } from '../render/Instance';
@@ -468,6 +469,17 @@ export function SearchDrawer({
       return;
     }
 
+    const showPreviewPanel =
+      userSettings.isSet('ENABLE_PREVIEW_PANEL') &&
+      userSettings.isSet('SEARCH_RESULTS_PREVIEW_PANEL');
+
+    if (showPreviewPanel && !eventModified(event)) {
+      // Open the result in the preview panel, keeping the search drawer open
+      cancelEvent(event);
+      openGlobalPreview(query, pk);
+      return;
+    }
+
     if (eventModified(event)) {
       // Keep the drawer open in this condition
     } else {

src/frontend/src/pages/Index/Settings/UserSettings.tsx

@@ -80,6 +80,7 @@ export default function UserSettings() {
               'SEARCH_WHOLE',
               'SEARCH_REGEX',
               'SEARCH_NOTES',
+              'SEARCH_RESULTS_PREVIEW_PANEL',
               'SEARCH_PREVIEW_RESULTS',
               'SEARCH_PREVIEW_SHOW_PARTS',
               'SEARCH_HIDE_INACTIVE_PARTS',