Hid silenced content from the logs

app/imports/client/ui/log/LogContent.vue

@@ -1,7 +1,7 @@
 <template lang="html">
   <div class="log-content">
     <div
-      v-for="(content, index) in model"
+      v-for="(content, index) in filteredModel"
       :key="index"
       class="content-line"
     >
@@ -36,7 +36,16 @@ export default {
       type: Array,
       default: () => [],
     },
+    showSilenced: {
+      type: Boolean,
+      default: false,
+    },
   },
+  computed: {
+    filteredModel() {
+      return this.model.filter(content => !content.silenced || this.showSilenced);
+    }
+  }
 }
 </script>
 

app/imports/client/ui/log/TabletopLogContent.vue

@@ -64,6 +64,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    showSilenced: {
+      type: Boolean,
+      default: false,
+    },
   },
   meteor: {
     contentByTargetId() {
@@ -76,7 +80,9 @@ export default {
         });
       };
       let currentContent = undefined;
-      for (const contentItem of this.model) {
+      const filteredModel = this.model
+        .filter(contentItem => !contentItem.silenced || this.showSilenced);
+      for (const contentItem of filteredModel) {
         if (!currentContent || !isEqual(currentContent.targetIds, contentItem.targetIds)) {
           if (currentContent) {
             content.push(currentContent);
@@ -90,7 +96,7 @@ export default {
           currentContent.content.push(contentItem);
         }
       }
-      content.push(currentContent);
+      currentContent && content.push(currentContent);
       return content;
     }
   }

app/imports/client/ui/log/TabletopLogEntry.vue

@@ -30,7 +30,10 @@
       v-if="model.text || (model.content && model.content.length)"
       class="px-2 pt-0 pb-2"
     >
-      <tabletop-log-content :model="model.content" />
+      <tabletop-log-content
+        :model="model.content"
+        :show-silenced="showSilenced"
+      />
     </v-card-text>
   </v-card>
 </template>
@@ -39,6 +42,9 @@
 import TabletopLogContent from '/imports/client/ui/log/TabletopLogContent.vue';
 import Creatures from '/imports/api/creature/creatures/Creatures';
 
+// TODO move content filtering to this component so we can determine if any content was hidden 
+// then show a button to reveal silenced content at a lower opacity
+
 export default {
   components: {
     TabletopLogContent,
@@ -50,6 +56,11 @@ export default {
     },
     showName: Boolean,
   },
+  data() {
+    return {
+      showSilenced: false,
+    };
+  },
   meteor: {
     creature() {
       return Creatures.findOne(this.model.creatureId);