feat(dockview): support dynamic Lucide icons via string in tab headers

src/app/(app)/problems/[id]/page.tsx

@@ -1,14 +1,5 @@
 "use client";
 
-import {
-  BotIcon,
-  CircleCheckBigIcon,
-  FileTextIcon,
-  FlaskConicalIcon,
-  SquareCheckIcon,
-  SquarePenIcon,
-  TerminalIcon,
-} from "lucide-react";
 import {
   Bot,
   Code,
@@ -38,16 +29,16 @@ export default function ProblemPage() {
           id: "Description",
           component: "Description",
           title: "Description",
-          params: { icon: FileTextIcon },
+          params: { icon: "FileTextIcon" },
         },
         {
           id: "Solutions",
           component: "Solutions",
           title: "Solutions",
-          params: { icon: FlaskConicalIcon },
+          params: { icon: "FlaskConicalIcon" },
           position: {
             referencePanel: "Description",
-            direction: "within"
+            direction: "within",
           },
           inactive: true,
         },
@@ -55,10 +46,10 @@ export default function ProblemPage() {
           id: "Submissions",
           component: "Submissions",
           title: "Submissions",
-          params: { icon: CircleCheckBigIcon },
+          params: { icon: "CircleCheckBigIcon" },
           position: {
             referencePanel: "Solutions",
-            direction: "within"
+            direction: "within",
           },
           inactive: true,
         },
@@ -66,40 +57,40 @@ export default function ProblemPage() {
           id: "Code",
           component: "Code",
           title: "Code",
-          params: { icon: SquarePenIcon },
+          params: { icon: "SquarePenIcon" },
           position: {
             referencePanel: "Submissions",
-            direction: "right"
+            direction: "right",
           },
         },
         {
           id: "Bot",
           component: "Bot",
           title: "Bot",
-          params: { icon: BotIcon },
+          params: { icon: "BotIcon" },
           position: {
             referencePanel: "Code",
-            direction: "right"
+            direction: "right",
           },
         },
         {
           id: "Testcase",
           component: "Testcase",
           title: "Testcase",
-          params: { icon: SquareCheckIcon },
+          params: { icon: "SquareCheckIcon" },
           position: {
             referencePanel: "Code",
-            direction: "below"
+            direction: "below",
           },
         },
         {
           id: "TestResult",
           component: "TestResult",
           title: "Test Result",
-          params: { icon: TerminalIcon },
+          params: { icon: "TerminalIcon" },
           position: {
             referencePanel: "Testcase",
-            direction: "within"
+            direction: "within",
           },
           inactive: true,
         },

src/components/dockview.tsx

@@ -8,6 +8,7 @@ import type {
   IDockviewPanelProps,
 } from "dockview";
 import "@/styles/dockview.css";
+import * as Icons from "lucide-react";
 import { useEffect, useState } from "react";
 import type { LucideIcon } from "lucide-react";
 import { DockviewReact, themeAbyssSpaced } from "dockview";
@@ -21,9 +22,13 @@ interface DockviewProps {
 }
 
 const DefaultTab = (
-  props: IDockviewPanelHeaderProps<{ icon?: LucideIcon }>
+  props: IDockviewPanelHeaderProps<{ icon?: string }>
 ) => {
-  const { icon: Icon } = props.params;
+  const { icon } = props.params;
+  const Icon =
+    icon && icon in Icons
+      ? (Icons[icon as keyof typeof Icons] as LucideIcon)
+      : null;
 
   return (
     <div className="flex items-center px-1 text-sm font-medium">

src/components/features/dashboard/admin/problemset/new/components/description-form.tsx

@@ -42,6 +42,7 @@ export default function NewProblemDescriptionForm() {
     description,
     setData,
   } = useNewProblemStore();
+
   const router = useRouter();
   const [dockApi, setDockApi] = useState<DockviewApi>();
 
@@ -144,7 +145,7 @@ export default function NewProblemDescriptionForm() {
                       id: "MdxPreview",
                       component: "MdxPreview",
                       title: "Mdx Preview",
-                      params: { source: field.value },
+                      params: { source: field.value, icon: "FileTextIcon" },
                     },
                     {
                       id: "MarkdownEditor",
@@ -155,6 +156,7 @@ export default function NewProblemDescriptionForm() {
                         onChange: (value: string | undefined) => {
                           field.onChange(value);
                         },
+                        icon: "SquarePenIcon",
                       },
                       position: {
                         referencePanel: "MdxPreview",