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

@@ -62,7 +62,7 @@ const useDockviewComponents = (
   );
 };
 
-const Dockview = ({
+export const Dockview = ({
   storageKey,
   onApiReady,
   components,
@@ -139,5 +139,3 @@ const Dockview = ({
     />
   );
 };
-
-export { Dockview };

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}
+    />
+  );
+};