message: feat(comments): unread filter
diff: <!-- Comment bubbles -->
  <div
  v-for="comment in activeComments"
  + v-show="isVisible(comment)"
  :key="comment.id"
  :ref="`comment-${comment.id}`"
  :class="`absolute-pos rounded-xl no-mouse `"
  <!-- Comment Threads -->
  <div
  v-for="comment in activeComments"
  + v-show="isVisible(comment)"
  :key="comment.id + '-card'"
  :ref="`commentcard-${comment.id}`"
  :class="`hover-bg absolute-pos rounded-xl overflow-y-auto ${
  <portal to="viewercontrols" :order="5">
  <v-btn
  key="comment-toggle-button"
  - v-tooltip="`Toggle comments (${activeComments.length})`"
  + v-tooltip="currentCommentVisStatus"
  rounded
  icon
  class="mr-2"
  @click="toggleComments()"
  >
  - <v-icon v-if="showComments" small>mdi-comment-outline</v-icon>
  - <v-icon v-if="!showComments" small>mdi-comment-off-outline</v-icon>
  + <v-icon v-if="commentsFilter === 'all'" small>mdi-comment-outline</v-icon>
  + <v-icon v-if="commentsFilter === 'unread'" small class="primary--text">
  + mdi-comment-alert-outline
  + </v-icon>
  + <v-icon v-if="commentsFilter === 'none'" small>mdi-comment-off-outline</v-icon>
  + <!-- {{ commentsFilter }} -->
  + <!-- <v-icon v-if="!showComments" small>mdi-comment-off-outline</v-icon> -->
  </v-btn>
  </portal>
  </div>
  @@ -270,6 +277,7 @@ export default {
  return {
  localComments: [],
  showComments: true,
  + commentsFilter: 'all', // 'unread', 'none'
  openCommentOnInit: null
  }
  },
  @@ -279,6 +287,17 @@ export default {
  },
  hasExpandedComment() {
  return this.localComments.filter((c) => c.expanded).length !== 0
  + },
  + currentCommentVisStatus() {
  + switch (this.commentsFilter) {
  + case 'all':
  + return 'Showing all comments'
  + case 'unread':
  + return 'Showing unread comments only'
  + case 'none':
  + return 'Comments hidden'
  + }
  + return ''
  }
  },
  mounted() {
  @@ -326,8 +345,31 @@ export default {
  isUnread(comment) {
  return new Date(comment.updatedAt) - new Date(comment.viewedAt) > 0
  },
  + isVisible(comment) {
  + if (comment.expanded) return true
  + switch (this.commentsFilter) {
  + case 'all':
  + return true
  + case 'unread':
  + return this.isUnread(comment)
  + case 'none':
  + return false
  + }
  + return true
  + },
  toggleComments() {
  - this.showComments = !this.showComments
  + // this.showComments = !this.showComments
  + switch (this.commentsFilter) {
  + case 'all':
  + this.commentsFilter = 'unread'
  + break
  + case 'unread':
  + this.commentsFilter = 'none'
  + break
  + case 'none':
  + this.commentsFilter = 'all'
  + break
  + }
  },
  expandComment(comment) {
  for (const c of this.localComments) {
  