From ce87b33c8463068fe0305294d59758e7fe81774f Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Tue, 30 Jun 2026 09:58:27 +0000
Subject: [PATCH] Add preview types

---
 .../src/components/previews/PreviewDrawer.tsx | 40 ++++++++++++++-----
 .../src/components/previews/PreviewType.tsx   | 25 ++++++++++++
 .../components/previews/models/Fallback.tsx   | 31 ++++++++++++++
 3 files changed, 87 insertions(+), 9 deletions(-)
 create mode 100644 src/frontend/src/components/previews/PreviewType.tsx
 create mode 100644 src/frontend/src/components/previews/models/Fallback.tsx

diff --git a/src/frontend/src/components/previews/PreviewDrawer.tsx b/src/frontend/src/components/previews/PreviewDrawer.tsx
index 195b3872cf..dc3173c719 100644
--- a/src/frontend/src/components/previews/PreviewDrawer.tsx
+++ b/src/frontend/src/components/previews/PreviewDrawer.tsx
@@ -1,22 +1,26 @@
-import { t } from '@lingui/core/macro';
-import { Drawer, Loader, Stack, Text } from '@mantine/core';
+import { Divider, Drawer, LoadingOverlay, Stack } from '@mantine/core';
 
 import { StylishText } from '@lib/components/StylishText';
 import { ModelInformationDict } from '@lib/enums/ModelInformation';
 import type { ModelType } from '@lib/index';
+import { useMemo } from 'react';
 import { useInstance } from '../../hooks/UseInstance';
 import { getModelInfo } from '../render/ModelType';
+import { type PreviewType, getPreviewComponentForModel } from './PreviewType';
+import { FallbackPreviewComponent } from './models/Fallback';
 
 export default function PreviewDrawer({
   modelType,
   id,
   instance: providedInstance,
+  filters,
   opened,
   onClose
 }: Readonly<{
   modelType: ModelType;
   id: number;
   instance?: any;
+  filters?: Record<string, any>;
   opened: boolean;
   onClose: () => void;
 }>) {
@@ -28,16 +32,36 @@ export default function PreviewDrawer({
     pk: id,
     hasPrimaryKey: true,
     defaultValue: {},
+    params: filters,
     disabled: !!providedInstance
   });
 
-  const instance = providedInstance ?? fetchedInstance;
+  const instance = useMemo(() => {
+    return providedInstance ?? fetchedInstance;
+  }, [providedInstance, fetchedInstance]);
+
+  const previewComponent: PreviewType = useMemo(() => {
+    const component: PreviewType | null = getPreviewComponentForModel({
+      modelType
+    });
+
+    if (component == null) {
+      return FallbackPreviewComponent({
+        modelInfo,
+        modelType,
+        modelId: id,
+        instance
+      });
+    }
+
+    return component;
+  }, [modelType]);
 
   return (
     <Drawer
       position='right'
       size='xl'
-      title={<StylishText size='lg'>{`${modelInfo.label} #${id}`}</StylishText>}
+      title={<StylishText size='lg'>{previewComponent.title}</StylishText>}
       opened={opened}
       onClose={onClose}
       withCloseButton
@@ -48,11 +72,9 @@ export default function PreviewDrawer({
       }}
     >
       <Stack gap='xs'>
-        {!instance && instanceQuery.isFetching ? (
-          <Loader />
-        ) : (
-          <Text c='dimmed'>{t`Preview for ${modelInfo.label} #${id}`}</Text>
-        )}
+        <Divider />
+        <LoadingOverlay visible={instanceQuery.isFetching} />
+        {previewComponent.preview}
       </Stack>
     </Drawer>
   );
diff --git a/src/frontend/src/components/previews/PreviewType.tsx b/src/frontend/src/components/previews/PreviewType.tsx
new file mode 100644
index 0000000000..7f63922c8e
--- /dev/null
+++ b/src/frontend/src/components/previews/PreviewType.tsx
@@ -0,0 +1,25 @@
+import type { ModelType } from '@lib/enums/ModelType';
+import type { ReactNode } from 'react';
+
+export interface PreviewType {
+  preview: ReactNode;
+  title: string;
+}
+
+export type PreviewComponentProps = {
+  instance: any;
+};
+
+export type PreviewComponent = (props: PreviewComponentProps) => PreviewType;
+
+export function getPreviewComponentForModel({
+  modelType
+}: {
+  modelType: ModelType;
+}): PreviewType | null {
+  switch (modelType) {
+    default:
+      // Return null to indicate that this model type is not supported
+      return null;
+  }
+}
diff --git a/src/frontend/src/components/previews/models/Fallback.tsx b/src/frontend/src/components/previews/models/Fallback.tsx
new file mode 100644
index 0000000000..8e7998a479
--- /dev/null
+++ b/src/frontend/src/components/previews/models/Fallback.tsx
@@ -0,0 +1,31 @@
+import type { ModelInformationInterface } from '@lib/enums/ModelInformation';
+import type { ModelType } from '@lib/enums/ModelType';
+import { t } from '@lingui/core/macro';
+import { Alert, Text } from '@mantine/core';
+import { IconExclamationCircle } from '@tabler/icons-react';
+import type { PreviewType } from '../PreviewType';
+
+export function FallbackPreviewComponent({
+  modelInfo,
+  modelType,
+  modelId,
+  instance
+}: {
+  modelInfo: ModelInformationInterface;
+  modelType: ModelType;
+  modelId: number | string;
+  instance: any;
+}): PreviewType {
+  return {
+    title: `${modelInfo.label} #${modelId}`,
+    preview: (
+      <Alert
+        color='red'
+        title={t`No preview available`}
+        icon={<IconExclamationCircle />}
+      >
+        <Text>{t`No preview available for this model.`}</Text>
+      </Alert>
+    )
+  };
+}