From 8b7b00b7cb556dd257b2f6470c87184aa36f3940 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Mon, 8 Jun 2026 04:36:16 +0000
Subject: [PATCH] Add <GlobalPreviewDrawer> component

---
 src/frontend/src/components/nav/Layout.tsx    |  2 +
 .../previews/GlobalPreviewDrawer.tsx          | 22 +++++++++++
 .../src/components/previews/PreviewDrawer.tsx | 39 +++++++++++++++++++
 .../src/states/PreviewDrawerState.tsx         | 37 ++++++++++++++++++
 4 files changed, 100 insertions(+)
 create mode 100644 src/frontend/src/components/previews/GlobalPreviewDrawer.tsx
 create mode 100644 src/frontend/src/components/previews/PreviewDrawer.tsx
 create mode 100644 src/frontend/src/states/PreviewDrawerState.tsx

diff --git a/src/frontend/src/components/nav/Layout.tsx b/src/frontend/src/components/nav/Layout.tsx
index c3b084c835..c13e8e50b8 100644
--- a/src/frontend/src/components/nav/Layout.tsx
+++ b/src/frontend/src/components/nav/Layout.tsx
@@ -29,6 +29,7 @@ import {
   type PluginUIFeature,
   PluginUIFeatureType
 } from '../plugins/PluginUIFeature';
+import GlobalPreviewDrawer from '../previews/GlobalPreviewDrawer';
 import { Footer } from './Footer';
 import { Header } from './Header';
 
@@ -146,6 +147,7 @@ export default function LayoutComponent() {
           )}
         </Flex>
         <GlobalImporterDrawer />
+        <GlobalPreviewDrawer />
       </>
     </ProtectedRoute>
   );
diff --git a/src/frontend/src/components/previews/GlobalPreviewDrawer.tsx b/src/frontend/src/components/previews/GlobalPreviewDrawer.tsx
new file mode 100644
index 0000000000..c926fef5a3
--- /dev/null
+++ b/src/frontend/src/components/previews/GlobalPreviewDrawer.tsx
@@ -0,0 +1,22 @@
+import { usePreviewDrawerState } from '../../states/PreviewDrawerState';
+import PreviewDrawer from './PreviewDrawer';
+
+export default function GlobalPreviewDrawer() {
+  const isOpen = usePreviewDrawerState((state) => state.isOpen);
+  const modelType = usePreviewDrawerState((state) => state.modelType);
+  const instance = usePreviewDrawerState((state) => state.instance);
+  const closePreview = usePreviewDrawerState((state) => state.closePreview);
+
+  if (!isOpen || instance === null) {
+    return null;
+  }
+
+  return (
+    <PreviewDrawer
+      modelType={modelType}
+      instance={instance}
+      opened={isOpen}
+      onClose={closePreview}
+    />
+  );
+}
diff --git a/src/frontend/src/components/previews/PreviewDrawer.tsx b/src/frontend/src/components/previews/PreviewDrawer.tsx
new file mode 100644
index 0000000000..1a0be1edaa
--- /dev/null
+++ b/src/frontend/src/components/previews/PreviewDrawer.tsx
@@ -0,0 +1,39 @@
+import { t } from '@lingui/core/macro';
+import { Drawer, Stack, Text } from '@mantine/core';
+
+import { StylishText } from '@lib/components/StylishText';
+import type { ModelType } from '@lib/index';
+import { getModelInfo } from '../render/ModelType';
+
+export default function PreviewDrawer({
+  modelType,
+  instance,
+  opened,
+  onClose
+}: Readonly<{
+  modelType?: ModelType;
+  instance?: any;
+  opened: boolean;
+  onClose: () => void;
+}>) {
+  const modelInfo = getModelInfo(instance.model);
+
+  return (
+    <Drawer
+      position='right'
+      size='lg'
+      title={
+        <StylishText size='lg'>
+          TODO - implement actual preview content
+        </StylishText>
+      }
+      opened={opened}
+      onClose={onClose}
+      withCloseButton
+    >
+      <Stack gap='xs'>
+        <Text c='dimmed'>{t`Preview for ${modelInfo.label} #${instance.pk}`}</Text>
+      </Stack>
+    </Drawer>
+  );
+}
diff --git a/src/frontend/src/states/PreviewDrawerState.tsx b/src/frontend/src/states/PreviewDrawerState.tsx
new file mode 100644
index 0000000000..9ff5574c7f
--- /dev/null
+++ b/src/frontend/src/states/PreviewDrawerState.tsx
@@ -0,0 +1,37 @@
+import type { ModelType } from '@lib/enums/ModelType';
+import { create } from 'zustand';
+
+interface PreviewDrawerStateProps {
+  isOpen: boolean;
+  modelType?: ModelType;
+  instance?: any;
+  openPreview: (modelType: ModelType, instance: any) => void;
+  closePreview: () => void;
+}
+
+export const usePreviewDrawerState = create<PreviewDrawerStateProps>()(
+  (set) => ({
+    isOpen: false,
+    instance: null,
+
+    openPreview: (modelType: ModelType, instance: any) => {
+      set({ modelType, instance, isOpen: true });
+    },
+
+    closePreview: () => {
+      set({ modelType: undefined, instance: null, isOpen: false });
+    }
+  })
+);
+
+export function openGlobalPreview(modelType: ModelType, instance: any) {
+  usePreviewDrawerState.getState().openPreview(modelType, instance);
+}
+
+export function closeGlobalPreview() {
+  usePreviewDrawerState.getState().closePreview();
+}
+
+export function getGlobalPreviewState() {
+  return usePreviewDrawerState.getState();
+}