gami-web/app/composables/useImPopup.ts

import { reactive, readonly } from 'vue'

export interface ImPopupState {
  visible: boolean
  /**
   * When provided, IM popup should open conversation detail for this userId (C2C).
   * This value is consumed by `components/popup/Im.vue`.
   */
  targetUserId: string | null
}

const state = reactive<ImPopupState>({
  visible: false,
  targetUserId: null,
})

const open = () => {
  state.visible = true
  state.targetUserId = null
}

const openConversation = (userId: string) => {
  state.targetUserId = userId ? String(userId) : null
  state.visible = true
}

const clearTarget = () => {
  state.targetUserId = null
}

const close = () => {
  state.visible = false
  state.targetUserId = null
}

export const useImPopup = () => {
  return {
    state: readonly(state),
    open,
    openConversation,
    clearTarget,
    close,
  }
}