Split NPC counts off into its own dockable component.

src/quest_editor/ui/NpcCountsComponent.css

@@ -0,0 +1,8 @@
+.main {
+    height: 100%;
+    overflow: auto;
+}
+
+.main > table {
+    margin: 5px;
+}

src/quest_editor/ui/NpcCountsComponent.tsx

@@ -0,0 +1,43 @@
+import React, { Component, ReactNode } from "react";
+import styles from "./NpcCountsComponent.css";
+import { npc_data, NpcType } from "../../core/data_formats/parsing/quest/npc_types";
+import { quest_editor_store } from "../stores/QuestEditorStore";
+import { observer } from "mobx-react";
+
+@observer
+export class NpcCountsComponent extends Component {
+    render(): ReactNode {
+        const quest = quest_editor_store.current_quest;
+        const npc_counts = new Map<NpcType, number>();
+
+        if (quest) {
+            for (const npc of quest.npcs) {
+                const val = npc_counts.get(npc.type) || 0;
+                npc_counts.set(npc.type, val + 1);
+            }
+        }
+
+        const extra_canadines = (npc_counts.get(NpcType.Canane) || 0) * 8;
+
+        // Sort by canonical order.
+        const sorted_npc_counts = [...npc_counts].sort((a, b) => a[0] - b[0]);
+
+        const npc_count_rows = sorted_npc_counts.map(([npc_type, count]) => {
+            const extra = npc_type === NpcType.Canadine ? extra_canadines : 0;
+            return (
+                <tr key={npc_type}>
+                    <td>{npc_data(npc_type).name}:</td>
+                    <td>{count + extra}</td>
+                </tr>
+            );
+        });
+
+        return (
+            <div className={styles.main}>
+                <table>
+                    <tbody>{npc_count_rows}</tbody>
+                </table>
+            </div>
+        );
+    }
+}

src/quest_editor/ui/QuestEditorComponent.tsx

@@ -10,12 +10,14 @@ import styles from "./QuestEditorComponent.css";
 import { QuestInfoComponent } from "./QuestInfoComponent";
 import { QuestRendererComponent } from "./QuestRendererComponent";
 import { Toolbar } from "./Toolbar";
+import { NpcCountsComponent } from "./NpcCountsComponent";
 
 const logger = Logger.get("ui/quest_editor/QuestEditorComponent");
 
 // Don't change these ids, as they are persisted in the user's browser.
 const CMP_TO_NAME = new Map([
     [QuestInfoComponent, "quest_info"],
+    [NpcCountsComponent, "npc_counts"],
     [QuestRendererComponent, "quest_renderer"],
     [AssemblyEditorComponent, "assembly_editor"],
     [EntityInfoComponent, "entity_info"],
@@ -39,13 +41,24 @@ const DEFAULT_LAYOUT_CONFIG = {
 const DEFAULT_LAYOUT_CONTENT: ItemConfigType[] = [
     {
         type: "row",
+        content: [
+            {
+                type: "stack",
+                width: 3,
                 content: [
                     {
                         title: "Info",
                         type: "react-component",
                         component: CMP_TO_NAME.get(QuestInfoComponent),
                         isClosable: false,
-                width: 3,
+                    },
+                    {
+                        title: "NPC Counts",
+                        type: "react-component",
+                        component: CMP_TO_NAME.get(NpcCountsComponent),
+                        isClosable: false,
+                    },
+                ],
             },
             {
                 type: "stack",

src/quest_editor/ui/QuestInfoComponent.css

@@ -15,9 +15,3 @@
 .main textarea {
     font-family: 'Courier New', Courier, monospace
 }
-
-.npc_counts_container {
-    overflow: auto;
-    min-height: 50px;
-    margin-top: 5px;
-}

src/quest_editor/ui/QuestInfoComponent.tsx

@@ -5,7 +5,6 @@ import { quest_editor_store } from "../stores/QuestEditorStore";
 import { DisabledTextComponent } from "../../core/ui/DisabledTextComponent";
 import styles from "./QuestInfoComponent.css";
 import { Episode } from "../../core/data_formats/parsing/quest/Episode";
-import { npc_data, NpcType } from "../../core/data_formats/parsing/quest/npc_types";
 
 @observer
 export class QuestInfoComponent extends Component {
@@ -16,30 +15,8 @@ export class QuestInfoComponent extends Component {
         if (quest) {
             const episode =
                 quest.episode === Episode.IV ? "IV" : quest.episode === Episode.II ? "II" : "I";
-            const npc_counts = new Map<NpcType, number>();
-
-            for (const npc of quest.npcs) {
-                const val = npc_counts.get(npc.type) || 0;
-                npc_counts.set(npc.type, val + 1);
-            }
-
-            const extra_canadines = (npc_counts.get(NpcType.Canane) || 0) * 8;
-
-            // Sort by canonical order.
-            const sorted_npc_counts = [...npc_counts].sort((a, b) => a[0] - b[0]);
-
-            const npc_count_rows = sorted_npc_counts.map(([npc_type, count]) => {
-                const extra = npc_type === NpcType.Canadine ? extra_canadines : 0;
-                return (
-                    <tr key={npc_type}>
-                        <td>{npc_data(npc_type).name}:</td>
-                        <td>{count + extra}</td>
-                    </tr>
-                );
-            });
 
             body = (
-                <>
                 <table>
                     <tbody>
                         <tr>
@@ -97,17 +74,6 @@ export class QuestInfoComponent extends Component {
                         </tr>
                     </tbody>
                 </table>
-                    <div className={styles.npc_counts_container}>
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th colSpan={2}>NPC Counts</th>
-                                </tr>
-                            </thead>
-                            <tbody>{npc_count_rows}</tbody>
-                        </table>
-                    </div>
-                </>
             );
         } else {
             body = <DisabledTextComponent>No quest loaded.</DisabledTextComponent>;