{"version":3,"file":"CommentViewer-5bd96560.js","sources":["../../../app/javascript/components/CommentViewer.vue"],"sourcesContent":["<template>\n  <div :id=\"`comment-${comment['id']}`\">\n    <div class=\"flex space-x-2.5\">\n      <div class=\"flex-shrink-0\">\n        <profile-popover :profile=\"comment['author']\">\n          <a :href=\"comment['author']['path']\">\n            <avatar-viewer :url=\"comment['author']['avatar_url']\"\n                           :classes='\"inline-block bg-gray-100 h-8 w-8\"'></avatar-viewer>\n          </a>\n        </profile-popover>\n      </div>\n      <div class=\"flex-1\">\n        <div>\n          <div class=\"flex items-center space-x-2\">\n            <profile-popover :profile=\"comment['author']\">\n              <div class=\"flex items-center space-x-1\">\n                <a :href=\"comment['author']['path']\">\n                  <span class=\"text-sm text-black font-medium\">{{ comment['author']['user_name'] }}</span>\n                </a>\n                <div v-if=\"comment['author']['verified']\">\n                  <svg\n                      class=\"text-blue-600 h-4 w-4\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 20 20\"\n                      fill=\"currentColor\"\n                      aria-hidden=\"true\"\n                  >\n                    <path\n                        fill-rule=\"evenodd\"\n                        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\n                        clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </div>\n              </div>\n            </profile-popover>\n            <tippy placement=\"top\">\n              <span class=\"text-gray-500 text-xs\">{{ timeAgoInWords(comment['created_at']) }}</span>\n              <template v-slot:content>\n                <div class=\"whitespace-nowrap bg-black text-xs text-white px-2 py-1 rounded-sm\">\n                  <span>{{ formatDatetime(comment['created_at']) }}</span>\n                </div>\n              </template>\n            </tippy>\n          </div>\n          <div class=\"py-1 text-sm text-gray-700\" v-html=\"comment['content']\"></div>\n          <div class=\"py-1 flex items-center space-x-3\">\n            <div class=\"flex items-center space-x-1 text-gray-500\">\n              <auth-gate :notice=\"authGateMessage\">\n                <button class=\"block\" @click.stop=\"onUpvote\">\n                  <!-- outline up icon -->\n                  <svg v-if=\"!upvoted\" class=\"hover:text-gray-600\" :class=\"svgClasses\" fill=\"currentColor\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 490.4 490.4\" style=\"enable-background:new 0 0 490.4 490.4;\" xml:space=\"preserve\"><g><path d=\"M245.2,490.4c135.2,0,245.2-110,245.2-245.2S380.4,0,245.2,0S0,110,0,245.2S110,490.4,245.2,490.4z M245.2,24.5c121.7,0,220.7,99,220.7,220.7s-99,220.7-220.7,220.7s-220.7-99-220.7-220.7S123.5,24.5,245.2,24.5z\"/><path d=\"M185,216.2l48-48v183.4c0,6.8,5.5,12.3,12.3,12.3c6.8,0,12.3-5.5,12.3-12.3V168.3l48,48c2.4,2.4,5.5,3.6,8.7,3.6s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-68.9-68.9c-4.8-4.8-12.5-4.8-17.3,0L167.9,199c-4.8,4.8-4.8,12.5,0,17.3C172.4,221,180.2,221,185,216.2z\"/></g></svg>\n                  <!-- filled up icon -->\n                  <svg v-if=\"upvoted\" class=\"text-green-600\" :class=\"svgClasses\" aria-hidden=\"true\" fill=\"currentColor\" height=\"512\" viewBox=\"0 0 24 24\" width=\"512\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"Glyph\"><path d=\"m12 1a11 11 0 1 0 11 11 11.013 11.013 0 0 0 -11-11zm4.707 9.707a1 1 0 0 1 -1.414 0l-2.293-2.293v9.586a1 1 0 0 1 -2 0v-9.586l-2.293 2.293a1 1 0 1 1 -1.414-1.414l4-4a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414z\"/></g></svg>\n                </button>\n              </auth-gate>\n\n              <span class=\"text-sm text-gray-900\"\n                    :class=\"{ 'text-green-600': upvoted, 'text-red-600': downvoted }\">\n                <span v-if=\"upvotes\">{{ upvotes }}</span>\n                <span v-else>&nbsp;</span>\n              </span>\n              <span class=\"sr-only\">upvotes</span>\n\n              <auth-gate :notice=\"authGateMessage\">\n                <button class=\"block\" @click.stop=\"onDownvote\">\n                  <!-- outline down icon -->\n                  <svg v-if=\"!downvoted\" class=\"hover:text-gray-600\" :class=\"svgClasses\" fill=\"currentColor\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 490.4 490.4\" style=\"enable-background:new 0 0 490.4 490.4;\" xml:space=\"preserve\"><g><path d=\"M490.4,245.2C490.4,110,380.4,0,245.2,0S0,110,0,245.2s110,245.2,245.2,245.2S490.4,380.4,490.4,245.2z M24.5,245.2c0-121.7,99-220.7,220.7-220.7s220.7,99,220.7,220.7s-99,220.7-220.7,220.7S24.5,366.9,24.5,245.2z\"/><path d=\"M253.9,360.4l68.9-68.9c4.8-4.8,4.8-12.5,0-17.3s-12.5-4.8-17.3,0l-48,48V138.7c0-6.8-5.5-12.3-12.3-12.3s-12.3,5.5-12.3,12.3v183.4l-48-48c-4.8-4.8-12.5-4.8-17.3,0s-4.8,12.5,0,17.3l68.9,68.9c2.4,2.4,5.5,3.6,8.7,3.6S251.5,362.8,253.9,360.4z\"/></g></svg>\n                  <!-- filled down icon -->\n                  <svg v-if=\"downvoted\" class=\"text-red-600\" :class=\"svgClasses\" fill=\"currentColor\" aria-hidden=\"true\" height=\"512\" viewBox=\"0 0 24 24\" width=\"512\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"Glyph\"><path d=\"m12 1a11 11 0 1 0 11 11 11.013 11.013 0 0 0 -11-11zm4.707 13.707-4 4a1 1 0 0 1 -1.414 0l-4-4a1 1 0 1 1 1.414-1.414l2.293 2.293v-9.586a1 1 0 0 1 2 0v9.586l2.293-2.293a1 1 0 0 1 1.414 1.414z\"/></g></svg>\n                </button>\n              </auth-gate>\n            </div>\n\n            <button @click=\"toggleReplies\" class=\"text-sm text-purple-600 hover:text-purple-700\">\n              <span v-if=\"comment['replies'].length\">{{ comment['replies'].length }} Replies</span>\n              <span v-else>Reply</span>\n            </button>\n          </div>\n          <transition enter-active-class=\"transition-all ease-out duration-300\"\n                      enter-from-class=\"max-h-0\"\n                      enter-to-class=\"max-h-96\"\n                      leave-active-class=\"transition-all ease-out duration-300\"\n                      leave-from-class=\"max-h-96\"\n                      leave-to-class=\"max-h-0\">\n            <div v-if=\"showReplies\" class=\"overflow-y-scroll text-sm text-black\">\n              <div class=\"py-2 space-y-2\">\n                <div v-for=\"reply in comment['replies']\" :key=\"comment['id']\">\n                  <comment-viewer :comment=\"reply\"\n                                  :commentable-digest=\"commentableDigest\"\n                                  :commenter-avatar-url=\"commenterAvatarUrl\"\n                                  :comments-url=\"commentsUrl\"\n                                  :nesting-level='nestingLevel + 1'\n                                  @post-comment=\"$emit('post-comment', $event.target.value)\"\n                  ></comment-viewer>\n                </div>\n              </div>\n              <comment-form :is-reply=\"true\" :parent-id=\"comment['id']\"\n                            :commentable-digest=\"commentableDigest\"\n                            :commenter-avatar-url=\"commenterAvatarUrl\"\n                            :comments-url=\"commentsUrl\"\n                            :nesting-level='nestingLevel + 1'\n                            @post-comment=\"onPostComment\">\n              </comment-form>\n            </div>\n          </transition>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { ref } from 'vue'\n\nimport { formatDatetime, timeAgoInWords } from '../lib/utils'\nimport AvatarViewer from './AvatarViewer.vue'\nimport ProfilePopover from './profile/ProfilePopover.vue'\nimport CommentForm from \"./CommentForm.vue\"\nimport { post } from \"@rails/request.js\";\n\nexport default {\n  components: {\n    CommentForm,\n    AvatarViewer,\n    ProfilePopover\n  },\n\n  emits: ['postComment'],\n\n  props: {\n    comment: Object,\n    commentableDigest: String,\n    commentsUrl: String,\n    commenterAvatarUrl: String,\n    nestingLevel: Number\n  },\n\n  setup(props) {\n    const authGateMessage = 'You must be logged in to vote.'\n    const svgClasses = 'h-4 w-5'\n    const { comment, nestingLevel } = props\n    const showReplies = ref(false)\n    const isReply = nestingLevel > 0\n    const upvotes = ref(comment['upvotes'])\n    const upvoted = ref(comment['upvoted'])\n    const downvoted = ref(comment['downvoted'])\n\n    const toggleReplies = () => {\n      if (isReply) {\n        // Focus reply form with mention of comment author\n        console.debug(`TODO: Focus on reply form mentioning @${comment['author']['user_name']}`)\n      } else {\n        showReplies.value = !showReplies.value\n      }\n    }\n    const onPostComment = (reply) => {\n      comment.replies = [...comment.replies, reply]\n    }\n    const vote = async (value) => {\n      const { response } = await post(\n          `/v1/comments/${comment.id}/vote`,\n          { responseKind: 'json', body: { value } }\n      )\n      if (response.ok) {\n        const { upvotes: newUpvotesTally } = await response.json()\n        upvotes.value = newUpvotesTally\n      } else {\n        throw new Error(`Something went wrong: ${response}`)\n      }\n    }\n    const onUpvote = async () => {\n      console.debug('onUpvote', comment)\n      if (upvoted.value) {\n        await vote(0)\n        upvoted.value = false\n      } else {\n        await vote(1)\n        upvoted.value = true\n        downvoted.value = false\n      }\n    }\n    const onDownvote = async () => {\n      console.debug('onDownvote', comment)\n      if (downvoted.value) {\n        await vote(0)\n        downvoted.value = false\n      } else {\n        await vote(-1)\n        downvoted.value = true\n        upvoted.value = false\n      }\n    }\n    return {\n      comment,\n      upvotes,\n      upvoted,\n      downvoted,\n      onUpvote,\n      onDownvote,\n      onPostComment,\n      toggleReplies,\n      isReply,\n      showReplies,\n      timeAgoInWords,\n      formatDatetime,\n      authGateMessage,\n      svgClasses\n    }\n  }\n}\n</script>"],"names":["_sfc_main","CommentForm","AvatarViewer","ProfilePopover","props","authGateMessage","svgClasses","comment","nestingLevel","showReplies","ref","isReply","upvotes","upvoted","downvoted","toggleReplies","onPostComment","reply","vote","value","response","post","newUpvotesTally","timeAgoInWords","formatDatetime","_hoisted_2","_hoisted_3","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_9","_createElementVNode","_hoisted_11","_hoisted_13","_hoisted_14","_hoisted_16","_hoisted_17","_hoisted_18","_hoisted_20","_hoisted_24","_hoisted_25","_hoisted_27","_hoisted_32","_createElementBlock","$setup","_createVNode","_component_profile_popover","_component_avatar_viewer","_toDisplayString","_hoisted_10","_hoisted_12","_component_tippy","_component_auth_gate","args","_normalizeClass","_openBlock","_hoisted_29","_Transition","_hoisted_31","_Fragment","_renderList","_component_comment_viewer","$props","_ctx","$event","_component_comment_form"],"mappings":"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"}