feat: TTD dialog tweaks (#7346)

* tweaks to TTD dialog ~ prepping for settings dialog

* tweaks to ttd parsing & error logging

src/components/TTDDialog/TTDDialogTabs.tsx

@@ -1,34 +1,60 @@
 import * as RadixTabs from "@radix-ui/react-tabs";
-import { ReactNode } from "react";
+import { ReactNode, useRef } from "react";
 import { useExcalidrawSetAppState } from "../App";
+import { isMemberOf } from "../../utils";
 
-const TTDDialogTabs = ({
-  children,
-  tab,
-  ...rest
-}: {
-  children: ReactNode;
-  tab: string;
-}) => {
+const TTDDialogTabs = (
+  props: {
+    children: ReactNode;
+  } & (
+    | { dialog: "ttd"; tab: "text-to-diagram" | "mermaid" }
+    | { dialog: "settings"; tab: "text-to-diagram" | "diagram-to-code" }
+  ),
+) => {
   const setAppState = useExcalidrawSetAppState();
 
+  const rootRef = useRef<HTMLDivElement>(null);
+  const minHeightRef = useRef<number>(0);
+
   return (
     <RadixTabs.Root
+      ref={rootRef}
       className="ttd-dialog-tabs-root"
-      value={tab}
+      value={props.tab}
       onValueChange={(
         // at least in test enviros, `tab` can be `undefined`
         tab: string | undefined,
       ) => {
-        if (tab) {
+        if (!tab) {
+          return;
+        }
+        const modalContentNode =
+          rootRef.current?.closest<HTMLElement>(".Modal__content");
+        if (modalContentNode) {
+          const currHeight = modalContentNode.offsetHeight || 0;
+          if (currHeight > minHeightRef.current) {
+            minHeightRef.current = currHeight;
+            modalContentNode.style.minHeight = `min(${minHeightRef.current}px, 100%)`;
+          }
+        }
+        if (
+          props.dialog === "settings" &&
+          isMemberOf(["text-to-diagram", "diagram-to-code"], tab)
+        ) {
           setAppState({
-            openDialog: { name: "ttd", tab },
+            openDialog: { name: props.dialog, tab, source: "settings" },
+          });
+        } else if (
+          props.dialog === "ttd" &&
+          isMemberOf(["text-to-diagram", "mermaid"], tab)
+        ) {
+          setAppState({
+            openDialog: { name: props.dialog, tab },
           });
         }
       }}
-      {...rest}
     >
-      {children}
+      {props.children}
     </RadixTabs.Root>
   );
 };