From aec8393d2de1898151e8cce2fe760b1395165427 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Tue, 13 May 2025 16:08:33 +0800
Subject: [PATCH] feat(dockview): export Dockview component and create
 ProblemDockview wrapper

- Export Dockview component from src/components/dockview.tsx to make it reusable
- Create new ProblemDockview component in src/features/problems/components/dockview.tsx that:
  - Integrates with next-intl for locale handling
  - Connects to problem-dockview store
  - Wraps Dockview with problem-specific configuration
  - Adds locale-based key for proper re-rendering
- Maintain existing Dockview functionality including:
  - Layout persistence
  - Panel management
  - API handling
---
 src/components/dockview.tsx                   |  4 +--
 src/features/problems/components/dockview.tsx | 32 +++++++++++++++++++
 2 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 src/features/problems/components/dockview.tsx

diff --git a/src/components/dockview.tsx b/src/components/dockview.tsx
index 601e1be..0b6b263 100644
--- a/src/components/dockview.tsx
+++ b/src/components/dockview.tsx
@@ -62,7 +62,7 @@ const useDockviewComponents = (
   );
 };
 
-const Dockview = ({
+export const Dockview = ({
   storageKey,
   onApiReady,
   components,
@@ -139,5 +139,3 @@ const Dockview = ({
     />
   );
 };
-
-export { Dockview };
diff --git a/src/features/problems/components/dockview.tsx b/src/features/problems/components/dockview.tsx
new file mode 100644
index 0000000..5954b25
--- /dev/null
+++ b/src/features/problems/components/dockview.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useLocale } from "next-intl";
+import type { AddPanelOptions } from "dockview";
+import { Dockview, type PanelParams } from "@/components/dockview";
+import { useProblemDockviewStore } from "@/stores/problem-dockview";
+
+interface ProblemDockviewProps {
+  components: Record<string, React.ReactNode>;
+  tabComponents: Record<string, React.ReactNode>;
+  panelOptions: AddPanelOptions<PanelParams>[];
+}
+
+export const ProblemDockview = ({
+  components,
+  tabComponents,
+  panelOptions,
+}: ProblemDockviewProps) => {
+  const locale = useLocale();
+  const { setApi } = useProblemDockviewStore();
+
+  return (
+    <Dockview
+      key={locale}
+      storageKey="dockview:problem"
+      onApiReady={setApi}
+      components={components}
+      tabComponents={tabComponents}
+      panelOptions={panelOptions}
+    />
+  );
+};