{"version":3,"mappings":";w4HA2BMA,EAAoBC,EAEpBC,EAA4BC,IAC5B,CAAEC,sCAAqC,EAAIC,EAAYH,CAAyB,EAEhFI,EAAuBC,IACvB,CAAEC,iBAAgB,EAAIH,EAAYC,CAAoB,EAEtDG,EAASC,IAETC,EAA2BC,EAAkB,IAAMC,EAAMC,eAAiB,kBAAkB,EAE5FC,EAAWH,EAAiB,IAC5BD,EAAyBK,MACpBZ,EAAqCY,MAAQ,GAAK,GAEpD,EACR,EAEKC,EAAqBL,EAAiB,IACtCM,EAAW,mBAAmB,EACJL,EAAMM,WAAWC,OAC1CC,GAAO,CAACb,EAAgBQ,MAAMK,CAAY,EAAEC,oBAC/C,EAC2BC,OAEtBV,EAAMM,WAAWI,MACzB,EAEKC,EAAoBA,IAAY,SAC/BX,EAAMY,YACPhB,OAAOO,QAAPP,cAAciB,QAAQ,mBAAtBjB,QAAwCkB,UAAUC,SAAS,YAI/DC,EAAK,qBAAqB,IAGtBC,EAAiBlB,EAAS,IACvBC,EAAMY,SAAW,SAAW,KACpC,EACKM,EAAwBnB,EAAS,IAAOC,EAAMY,SAAWO,EAAS,iBAAiB,EAAI,EAAG,y9DC1C1FC,EAAsBC,EAAqB,UAAM,OAAO,mCAA0C,+RAAC,EAEnGC,EAAgBC,IAChBC,EAAkBC,IAClBC,EAAoBC,IACpBC,EAAiBC,IACjBC,EAAeC,IACfC,EAAuBC,IAEvBnC,EAA2BC,EAAS,IAAMC,EAAMC,eAAiB,kBAAkB,EAEnFiC,EAAcnC,EAAS,IACvBD,EAAyBK,MACpBmB,EAAca,WAAa,OAAS,QAEtCL,EAAaI,WACrB,EAKKE,EAAsBvC,IACtBwC,EAAatC,EAAS,IAAM,OAChC,GAAI+B,EAAaQ,kBAAoB,CAACR,EAAaS,2BAC1C,SAKT,MAAMC,IAAgBZ,IAAea,6BAA6BzC,EAAM0C,KAAKlC,EAAE,IAAzDoB,cAA4De,sBAAuB,EAEtG,OAAAX,EAAqBY,aAAe5C,EAAM6C,gBAAgBnC,OAAS,GAAK8B,EAAgB,IACzF,CAAC,CAACZ,EAAekB,oBAErB,CAAC,EAEKC,EAAiBhD,EAAS,IAAM6B,EAAeoB,uBAAyBhD,EAAM0C,KAAKlC,EAAE,EACrFyC,EAAeA,IAAM,OACzB,GAAIzB,EAAgB0B,QAAS,CAC3BtB,EAAeuB,qBAAqB,CAAEC,OAAQpD,EAAM0C,KAAKlC,EAAG,CAAC,EAC7D,MACF,CAGI,GADA,CAAC4B,EAAoBjC,QACrBiC,IAAoBjC,MAAMU,QAAQ,eAAe,IAAjDuB,QAAoDtB,UAAUC,SAAS,WAEzE,OAGF,KAAM,CAAEsC,OAAMC,MAAKC,OAAM,EAAInB,EAAoBjC,MAAMqD,wBAEvD5B,EAAeuB,qBAAqB,CAClCC,OAAQpD,EAAM0C,KAAKlC,GACnBiD,aAAcJ,EACdK,YAAaJ,EACbK,cAAeJ,CACjB,CAAC,GAOGK,EAAY7D,EAAS,IACrB+B,EAAaQ,kBAAoB,CAACR,EAAa+B,0BAC1C,GAEF7D,EAAM0C,KAAKoB,YAAc,KAAS9B,EAAqB+B,eAAiB/D,EAAMgE,eAAetD,OAAS,EAC9G,kSAEoBuD,IAAM,CACrBnE,EAAyBK,OAC7BuB,EAAkBwC,WAAW,CAC3BC,QAASnE,EAAM0C,KAAK0B,IACpBC,WAAY,GACZC,iBAAkB,CAAC9C,EAAgB0B,OACrC,CAAC","names":["vEmitClickOnTouch","emitClickOnTouch","surfaceContainerSizeStore","useSurfaceContainerSizeStore","isContainerSmallerThanTabletPortrait","storeToRefs","surfaceCommentsStore","useCommentsStore","commentEntities","rootEl","ref","isUsedInPostExpandedView","computed","props","usageContext","iconSize","value","commentsListLength","isAppUsing","commentIds","filter","id","is_awaiting_approval","length","showCommentsPanel","isButton","closest","classList","contains","emit","wrapperElement","buttonAriaDescribedby","uniqueId","SurfacePostReaction","defineAsyncComponent","darkModeStore","useDarkModeStore","windowSizeStore","useWindowSizeStore","expandedPostStore","useExpandedPostStore","reactionsStore","useReactionsStore","surfaceStore","useSurfaceStore","surfaceSettingsStore","useSurfaceSettingsStore","colorScheme","isDarkMode","socialContentTopBar","xReactions","isScreenshotMode","xReactionsInScreenshotMode","reactionCount","accumulatedReactionsByWishId","post","totalReactionsCount","isReactable","postReactionIds","originalReactionData","isBeingReacted","postIdBeingReactedTo","editReaction","isPhone","startEditingReaction","postId","left","top","width","getBoundingClientRect","dropdownLeft","dropdownTop","dropdownWidth","xComments","xCommentsInScreenshotMode","published","isCommentable","postCommentIds","showComments","expandPost","postCid","cid","xTextPanel","shouldFocusInput"],"ignoreList":[],"sources":["../../../app/javascript/vuecomponents/SurfacePostCommentsIcon.vue","../../../app/javascript/vuecomponents/SurfacePostSocialContentTopBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isAppUsing } from '@@/bits/flip'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport { useCommentsStore } from '@@/pinia/surface_comments'\nimport { useSurfaceContainerSizeStore } from '@@/pinia/surface_container_size'\nimport type { CommentId } from '@@/types'\nimport emitClickOnTouch from '@@/vuedirectives/emit_click_on_touch'\nimport { uniqueId } from 'lodash-es'\nimport { storeToRefs } from 'pinia'\nimport { computed, ref } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    commentIds: CommentId[]\n    colorScheme: 'light' | 'dark'\n    isButton: boolean\n    usageContext?: 'postView' | 'postExpandedView'\n  }>(),\n  {\n    usageContext: 'postView',\n  },\n)\n\nconst emit = defineEmits<{\n  (name: 'show-comments-panel'): void\n}>()\n\nconst vEmitClickOnTouch = emitClickOnTouch\n\nconst surfaceContainerSizeStore = useSurfaceContainerSizeStore()\nconst { isContainerSmallerThanTabletPortrait } = storeToRefs(surfaceContainerSizeStore)\n\nconst surfaceCommentsStore = useCommentsStore()\nconst { commentEntities } = storeToRefs(surfaceCommentsStore)\n\nconst rootEl = ref<HTMLDivElement>()\n\nconst isUsedInPostExpandedView = computed<boolean>(() => props.usageContext === 'postExpandedView')\n\nconst iconSize = computed<number>(() => {\n  if (isUsedInPostExpandedView.value) {\n    return isContainerSmallerThanTabletPortrait.value ? 24 : 20\n  }\n  return 18\n})\n\nconst commentsListLength = computed<number>(() => {\n  if (isAppUsing('commentModeration')) {\n    const publishedCommentIds = props.commentIds.filter(\n      (id) => !commentEntities.value[id as number].is_awaiting_approval,\n    )\n    return publishedCommentIds.length\n  }\n  return props.commentIds.length\n})\n\nconst showCommentsPanel = (): void => {\n  if (!props.isButton) return\n  if (rootEl.value?.closest('.surface-post')?.classList.contains('noclick')) {\n    // Prevent popping out the comment panel when the post is being dragged\n    return\n  }\n  emit('show-comments-panel')\n}\n\nconst wrapperElement = computed(() => {\n  return props.isButton ? 'button' : 'div'\n})\nconst buttonAriaDescribedby = computed(() => (props.isButton ? uniqueId('comment-button-') : ''))\n</script>\n\n<template>\n  <component\n    :is=\"wrapperElement\"\n    ref=\"rootEl\"\n    v-emit-click-on-touch\n    :class=\"[\n      // reset button styles\n      'm-0 p-0 bg-transparent border-none outline-none',\n      // focus-visible styles\n      'focus-visible:ring-2 rounded focus-visible:ring-offset-2',\n      colorScheme === 'light' && 'focus-visible:ring-grape',\n      colorScheme === 'dark' && 'focus-visible:ring-canary',\n    ]\"\n    :aria-label=\"isButton ? __('Show comments for this post') : undefined\"\n    :aria-describedby=\"isButton ? buttonAriaDescribedby : undefined\"\n    @click=\"showCommentsPanel\"\n  >\n    <div\n      :class=\"[\n        'flex',\n        {\n          'items-end': !isUsedInPostExpandedView,\n          'items-center': isUsedInPostExpandedView,\n        },\n        {\n          'text-dark-text-200': colorScheme === 'light',\n          'text-light-text-200': colorScheme === 'dark',\n        },\n      ]\"\n    >\n      <OzIcon name=\"comment_outline\" :size=\"iconSize\" />\n      <span\n        aria-hidden=\"true\"\n        :class=\"[\n          {\n            'ms-0.5': !isUsedInPostExpandedView,\n            'ms-1': isUsedInPostExpandedView,\n          },\n          {\n            'text-12-16 font-sans': !isUsedInPostExpandedView,\n            'text-body-small': isUsedInPostExpandedView,\n          },\n          {\n            'text-dark-text-200': colorScheme === 'light',\n            'text-light-text-200': colorScheme === 'dark',\n          },\n        ]\"\n        >{{ commentsListLength }}</span\n      >\n      <span :id=\"buttonAriaDescribedby\" class=\"sr-only\">{{\n        np__(\n          'Amount of comments in a post',\n          'This post has %{commentsListLength} comment',\n          'This post has %{commentsListLength} comments',\n          commentsListLength,\n          { commentsListLength },\n        )\n      }}</span>\n    </div>\n  </component>\n</template>\n","<script lang=\"ts\" setup>\nimport { defineAsyncComponent } from '@@/bits/vue'\nimport { useDarkModeStore } from '@@/pinia/dark_mode'\nimport { useExpandedPostStore } from '@@/pinia/expanded_post'\nimport { useSurfaceStore } from '@@/pinia/surface'\nimport { useReactionsStore } from '@@/pinia/surface_reactions'\nimport { useSurfaceSettingsStore } from '@@/pinia/surface_settings'\nimport { useWindowSizeStore } from '@@/pinia/window_size'\nimport type { CommentId, Id, Post } from '@@/types'\nimport SurfacePostCommentsIcon from '@@/vuecomponents/SurfacePostCommentsIcon.vue'\nimport { computed, ref } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    post: Post & { id: Id }\n    usageContext?: 'postView' | 'postExpandedView'\n    postReactionIds?: Id[]\n    postCommentIds?: CommentId[]\n  }>(),\n  {\n    usageContext: 'postView',\n    postReactionIds: () => [],\n    postCommentIds: () => [],\n  },\n)\n\nconst SurfacePostReaction = defineAsyncComponent(() => import('@@/vuecomponents/SurfacePostReaction.vue'))\n\nconst darkModeStore = useDarkModeStore()\nconst windowSizeStore = useWindowSizeStore()\nconst expandedPostStore = useExpandedPostStore()\nconst reactionsStore = useReactionsStore()\nconst surfaceStore = useSurfaceStore()\nconst surfaceSettingsStore = useSurfaceSettingsStore()\n\nconst isUsedInPostExpandedView = computed(() => props.usageContext === 'postExpandedView')\n\nconst colorScheme = computed(() => {\n  if (isUsedInPostExpandedView.value) {\n    return darkModeStore.isDarkMode ? 'dark' : 'light'\n  }\n  return surfaceStore.colorScheme\n})\n\n/**\n * REACTIONS\n */\nconst socialContentTopBar = ref<HTMLDivElement>()\nconst xReactions = computed(() => {\n  if (surfaceStore.isScreenshotMode && !surfaceStore.xReactionsInScreenshotMode) {\n    return false\n  }\n  // when a user is viewing a wall with reaction disabled and then reaction is enabled + someone react to something\n  // the realtime message for new reaction may come before the reaction enable message\n  // => wait for reactionData to be available before showing reactions\n  const reactionCount = reactionsStore.accumulatedReactionsByWishId[props.post.id]?.totalReactionsCount ?? 0\n  return (\n    (surfaceSettingsStore.isReactable || props.postReactionIds.length > 0 || reactionCount > 0) &&\n    !!reactionsStore.originalReactionData\n  )\n})\n\nconst isBeingReacted = computed(() => reactionsStore.postIdBeingReactedTo === props.post.id)\nconst editReaction = () => {\n  if (windowSizeStore.isPhone) {\n    reactionsStore.startEditingReaction({ postId: props.post.id })\n    return\n  }\n\n  if (!socialContentTopBar.value) return\n  if (socialContentTopBar.value.closest('.surface-post')?.classList.contains('noclick')) {\n    // Prevent reaction event when the post is being dragged\n    return\n  }\n\n  const { left, top, width } = socialContentTopBar.value.getBoundingClientRect()\n\n  reactionsStore.startEditingReaction({\n    postId: props.post.id,\n    dropdownLeft: left,\n    dropdownTop: top,\n    dropdownWidth: width,\n  })\n}\n\n/**\n * COMMENTS\n */\n\nconst xComments = computed(() => {\n  if (surfaceStore.isScreenshotMode && !surfaceStore.xCommentsInScreenshotMode) {\n    return false\n  }\n  return props.post.published === true && (surfaceSettingsStore.isCommentable || props.postCommentIds.length > 0)\n})\n\nconst showComments = () => {\n  if (isUsedInPostExpandedView.value) return\n  expandedPostStore.expandPost({\n    postCid: props.post.cid,\n    xTextPanel: true,\n    shouldFocusInput: !windowSizeStore.isPhone,\n  })\n}\n</script>\n\n<template>\n  <div\n    ref=\"socialContentTopBar\"\n    data-testid=\"socialContentTopBar\"\n    :class=\"['flex flex-row justify-between', !isUsedInPostExpandedView && 'flex-1']\"\n  >\n    <SurfacePostReaction\n      v-if=\"xReactions\"\n      :post=\"post\"\n      :is-reacting=\"isBeingReacted\"\n      :current-user-id=\"surfaceStore.user.id\"\n      :color-scheme=\"colorScheme\"\n      :reaction-data=\"reactionsStore.originalReactionData\"\n      :usage-context=\"usageContext\"\n      :data-pepin-id=\"isUsedInPostExpandedView && 'expanded-view-react'\"\n      :data-pepin-trigger=\"isUsedInPostExpandedView && 'click'\"\n      @edit=\"editReaction\"\n    />\n    <div v-else />\n    <SurfacePostCommentsIcon\n      v-if=\"xComments\"\n      :comment-ids=\"postCommentIds\"\n      :color-scheme=\"colorScheme\"\n      :is-button=\"!(surfaceStore.xCommentsUnderPosts || isUsedInPostExpandedView)\"\n      :usage-context=\"usageContext\"\n      :data-pepin-id=\"!isUsedInPostExpandedView && 'post-comment-expand-post'\"\n      :data-pepin-trigger=\"!isUsedInPostExpandedView && 'click'\"\n      @show-comments-panel=\"showComments\"\n    />\n  </div>\n</template>\n"],"file":"assets/SurfacePostSocialContentTopBar-BVVrg3Qz.js"}