REFACTOR: Move theory select dialog to same module as widget.

Author: epatters

packages/frontend/src/document/model_document_editor.tsx

@@ -1,16 +1,7 @@
 import type { ChangeFn, DocHandle } from "@automerge/automerge-repo";
-import Dialog from "@corvu/dialog";
 import { MultiProvider } from "@solid-primitives/context";
 import { useNavigate, useParams } from "@solidjs/router";
-import {
-    type Accessor,
-    Match,
-    Switch,
-    createMemo,
-    createResource,
-    createSignal,
-    useContext,
-} from "solid-js";
+import { type Accessor, Match, Switch, createMemo, createResource, useContext } from "solid-js";
 import invariant from "tiny-invariant";
 
 import type { JsonValue, Permissions } from "catcolab-api";
@@ -44,7 +35,7 @@ import { type TheoryLibrary, TheoryLibraryContext } from "../stdlib";
 import type { Theory } from "../theory";
 import { PermissionsButton } from "../user";
 import { type IndexedMap, indexMap } from "../util/indexing";
-import { TheorySelector } from "./theory_selector";
+import { TheorySelectorDialog } from "./theory_selector";
 import { type ModelDocument, newAnalysisDocument } from "./types";
 
 import "./model_document_editor.css";
@@ -223,7 +214,6 @@ export function ModelPane(props: {
 }) {
     const theories = useContext(TheoryLibraryContext);
     invariant(theories, "Library of theories should be provided as context");
-    const [theorySelectorOpen, setTheorySelectorOpen] = createSignal(false);
 
     const liveDoc = () => props.liveDoc;
     const doc = () => props.liveDoc.doc;
@@ -242,26 +232,16 @@ export function ModelPane(props: {
                         placeholder="Untitled"
                     />
                 </div>
-                <Dialog open={theorySelectorOpen()} onOpenChange={setTheorySelectorOpen}>
-                    <Dialog.Trigger class="theory-selector-button">
-                        {liveDoc().theory()?.name || "Theory"}
-                    </Dialog.Trigger>
-                    <Dialog.Portal>
-                        <Dialog.Overlay class="overlay" />
-                        <Dialog.Content class="popup">
-                            <TheorySelector
-                                theory={props.liveDoc.theory()?.id}
-                                setTheory={(id) => {
-                                    changeDoc((model) => {
-                                        model.theory = id;
-                                    });
-                                    setTheorySelectorOpen(false);
-                                }}
-                                theories={theories}
-                            />
-                        </Dialog.Content>
-                    </Dialog.Portal>
-                </Dialog>
+                <TheorySelectorDialog
+                    theory={props.liveDoc.theory()}
+                    setTheory={(id) => {
+                        changeDoc((model) => {
+                            model.theory = id;
+                        });
+                    }}
+                    theories={theories}
+                    disabled={doc().notebook.cells.some((cell) => cell.tag === "formal")}
+                />
             </div>
             <MultiProvider
                 values={[

packages/frontend/src/document/theory_selector.css

@@ -7,15 +7,21 @@
     cursor: pointer;
     font-weight: 500;
 
-    &:hover {
+    & .placeholder {
+        color: darkgray;
+    }
+
+    &:hover,
+    & .placeholder:hover {
         color: var(--topos-color);
     }
 }
 
 .theory-selector {
     display: flex;
     flex-direction: column;
-    margin: 5px;
+    gap: 10px;
+
     background-color: transparent;
     text-align: left;
     border-top: transparent;
@@ -27,20 +33,25 @@
         opacity: 0;
     }
 
+    & label:hover {
+        color: var(--topos-color);
+        cursor: pointer;
+    }
+
     & .division {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+    }
+
+    & .division-name {
         font-weight: 600;
         padding-bottom: 1px;
         opacity: 35%;
     }
 
     & .theory {
-        margin: 5px;
-        padding: 5px;
-    }
-
-    & .theory:hover {
-        color: var(--topos-color);
-        cursor: pointer;
+        margin-left: 2ex;
     }
 
     & .description {

packages/frontend/src/document/theory_selector.tsx

@@ -1,17 +1,52 @@
-import { For, createMemo } from "solid-js";
+import Dialog from "@corvu/dialog";
+import { For, Show, createMemo, createSignal } from "solid-js";
 
 import type { TheoryLibrary, TheoryMeta } from "../stdlib";
 import type { TheoryId } from "../theory";
 
 import "./theory_selector.css";
 
 type TheorySelectorProps = {
-    theory: TheoryId | undefined;
+    theory: TheoryMeta | undefined;
     setTheory: (theory: TheoryId | undefined) => void;
     theories: TheoryLibrary;
 };
 
-export const TheorySelector = (props: TheorySelectorProps) => {
+export function TheorySelectorDialog(
+    props: {
+        disabled?: boolean;
+    } & TheorySelectorProps,
+) {
+    const [theorySelectorOpen, setTheorySelectorOpen] = createSignal(false);
+
+    return (
+        <Dialog open={theorySelectorOpen()} onOpenChange={setTheorySelectorOpen}>
+            <Dialog.Trigger class="theory-selector-button" disabled={props.disabled}>
+                <Show
+                    when={props.theory}
+                    fallback={<span class="placeholder">Choose a logic</span>}
+                >
+                    {props.theory?.name}
+                </Show>
+            </Dialog.Trigger>
+            <Dialog.Portal>
+                <Dialog.Overlay class="overlay" />
+                <Dialog.Content class="popup">
+                    <TheorySelector
+                        theory={props.theory}
+                        setTheory={(id) => {
+                            props.setTheory(id);
+                            setTheorySelectorOpen(false);
+                        }}
+                        theories={props.theories}
+                    />
+                </Dialog.Content>
+            </Dialog.Portal>
+        </Dialog>
+    );
+}
+
+export function TheorySelector(props: TheorySelectorProps) {
     const groupedTheories = createMemo(() => {
         const grouped = new Map<string, TheoryMeta[]>();
 
@@ -29,8 +64,8 @@ export const TheorySelector = (props: TheorySelectorProps) => {
         <div class="theory-selector">
             <For each={groupedTheories()}>
                 {([category, theories]) => (
-                    <>
-                        <h4 class="division">{category}</h4>
+                    <div class="division">
+                        <h4 class="division-name">{category}</h4>
                         <For each={theories}>
                             {(meta) => (
                                 <div class="theory">
@@ -51,9 +86,9 @@ export const TheorySelector = (props: TheorySelectorProps) => {
                                 </div>
                             )}
                         </For>
-                    </>
+                    </div>
                 )}
             </For>
         </div>
     );
-};
+}