Choice branch UI working!

app/imports/client/ui/creature/actions/ActionDialog.vue

@@ -14,19 +14,16 @@
       </v-toolbar-title>
     </v-toolbar>
     <div class="action-dialog-content">
-      <div class="layout d-flex">
-        <div
-          class="input d-flex justify-center align-center"
-        >
-          <component
-            :is="activeInput"
-            v-if="activeInput"
-            v-model="userInput"
-            v-bind="activeInputParams"
-            @continue="continueAction"
-            @set-input-ready="setInputReady"
-          />
-        </div>
+      <div class="action-dialog-layout d-flex">
+        <component
+          :is="activeInput"
+          v-if="activeInput"
+          v-model="userInput"
+          class="action-input"
+          v-bind="activeInputParams"
+          @continue="continueAction"
+          @set-input-ready="setInputReady"
+        />
         <div
           class="log-preview card-raised-background d-flex flex-column align-end justify-end"
           style="flex-basis: 256px;"
@@ -80,22 +77,25 @@
 </template>
 
 <script lang="js">
-import DialogBase from '/imports/client/ui/dialogStack/DialogBase.vue';
-import EngineActions from '/imports/api/engine/action/EngineActions';
 import applyAction from '/imports/api/engine/action/functions/applyAction';
+import getDeterministicDiceRoller from '/imports/api/engine/action/functions/userInput/getDeterministicDiceRoller';
+
 import AdvantageInput from '/imports/client/ui/creature/actions/input/AdvantageInput.vue';
 import CheckInput from '/imports/client/ui/creature/actions/input/CheckInput.vue';
-import RollInput from '/imports/client/ui/creature/actions/input/RollInput.vue';
-import getDeterministicDiceRoller from '/imports/api/engine/action/functions/userInput/getDeterministicDiceRoller';
+import ChoiceInput from '/imports/client/ui/creature/actions/input/ChoiceInput.vue';
+import DialogBase from '/imports/client/ui/dialogStack/DialogBase.vue';
+import EngineActions from '/imports/api/engine/action/EngineActions';
 import LogContent from '/imports/client/ui/log/LogContent.vue';
+import RollInput from '/imports/client/ui/creature/actions/input/RollInput.vue';
 
 export default {
   components: {
-    DialogBase,
     AdvantageInput,
     CheckInput,
-    RollInput,
+    ChoiceInput,
+    DialogBase,
     LogContent,
+    RollInput,
   },
   props: {
     actionId: {
@@ -218,6 +218,12 @@ export default {
       return this.promiseInput();
     },
     async choose(choices, quantity) {
+      this.userInput = [];
+      this.activeInputParams = {
+        choices,
+        quantity
+      };
+      this.activeInput = 'choice-input'
       return this.promiseInput();
     },
     async advantage(suggestedAdvantage) {
@@ -247,11 +253,11 @@ export default {
   overflow: auto;
 }
 
-.action-dialog-content, .layout {
+.action-dialog-content, .action-dialog-layout {
   height: 100%;
 }
 
-.input {
+.action-input {
   flex-grow: 1;
   height: 100%;
   overflow-y: auto;
@@ -264,10 +270,10 @@ export default {
 }
 
 @container (max-width: 600px) {
-  .layout {
+  .action-dialog-layout {
     flex-direction: column;
   }
-  .input {
+  .action-input {
     height: unset;
   }
   .log-preview {

app/imports/client/ui/creature/actions/input/ChoiceInput.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="choice-input">
+    <v-expansion-panels
+      accordion
+      tile
+      multiple
+      hover
+    >
+      <v-expansion-panel
+        v-for="prop in choices"
+        :key="prop._id"
+        :model="prop"
+        :data-id="prop._id"
+      >
+        <v-expansion-panel-header>
+          <template #default="{ open }">
+            <v-checkbox
+              v-model="selectedItems"
+              class="my-0 py-0 mr-2 flex-grow-0"
+              hide-details
+              :value="prop._id"
+              :disabled="!selectedItems.includes(prop._id) && selectedItems.length >= quantity.max"
+              @click.stop
+            />
+            <tree-node-view :model="prop" />
+            <template v-if="open">
+              <v-spacer />
+              <v-btn
+                icon
+                class="flex-grow-0"
+                @click.stop="openPropertyDetails(prop._id)"
+              >
+                <v-icon>mdi-window-restore</v-icon>
+              </v-btn>
+            </template>
+          </template>
+        </v-expansion-panel-header>
+        <v-expansion-panel-content class="py-4">
+          <property-viewer :model="prop" />
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
+    <v-btn
+      :disabled="!canContinue"
+      @click="$emit('continue');"
+    >
+      Done
+    </v-btn>
+  </div>
+</template>
+
+<script lang="js">
+import TreeNodeView from '/imports/client/ui/properties/treeNodeViews/TreeNodeView.vue';
+import PropertyViewer from '/imports/client/ui/properties/shared/PropertyViewer.vue';
+
+export default {
+  components: {
+    TreeNodeView,
+    PropertyViewer,
+  },
+  props: {
+    choices: {
+      type: Array,
+      required: true
+    },
+    quantity: {
+      type: Object,
+      default: () => ({min: 0, max: 1}),
+    },
+  },
+  data() {
+    return {
+      selectedItems: [],
+    };
+  },
+  computed: {
+    canContinue() {
+      return this.selectedItems.length >= this.quantity.min;
+    }
+  },
+  watch: {
+    selectedItems(val) {
+      this.$emit('input', val)
+    },
+  },
+};
+</script>

app/imports/client/ui/creature/creatureProperties/DescendantPropertiesTree.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <tree-node-list
-    v-if="model"
+    v-if="model && model.root"
     :children="children"
     :group="group"
     :organize="organize"
@@ -41,6 +41,7 @@ export default {
   },
   meteor: {
     children() {
+      if (!this.model?.root) return [];
       const collection = getCollectionByName(this.collection);
       const docs = collection.find({
         removed: { $ne: true },