Warp/apps/web/src/components/JoinRoomDialog.vue

<script setup lang="ts">
import type { IPublicRoomsChunkRoom } from 'matrix-js-sdk'
import { computed, ref, watch } from 'vue'
import { WBanner, WButton, WDialog, WSpinner, WTextField } from '@warp/ui'
import MxcAvatar from '@/components/MxcAvatar.vue'
import { errorMessage } from '@/lib/format'
import { client } from '@/matrix/client'
import { useChat } from '@/stores/chat'

// Join by address or ID, or pick from this homeserver's room directory.

const open = defineModel<boolean>('open', { default: false })
const emit = defineEmits<{ joined: [roomId: string] }>()

const chat = useChat()
const address = ref('')
const busy = ref('')
const error = ref('')
const directory = ref<IPublicRoomsChunkRoom[]>()
const directoryError = ref('')
const search = ref('')

const joined = computed(() => new Set([...chat.rooms, ...chat.spaces].map((r) => r.roomId)))

async function loadDirectory() {
  directoryError.value = ''
  try {
    const res = await client().publicRooms({ limit: 50, filter: search.value.trim() ? { generic_search_term: search.value.trim() } : undefined })
    directory.value = res.chunk
  } catch (e) {
    directoryError.value = errorMessage(e)
  }
}

watch(open, (v) => {
  if (!v) return
  address.value = ''
  error.value = ''
  search.value = ''
  directory.value = undefined
  loadDirectory()
})

let searchTimer = 0
watch(search, () => {
  window.clearTimeout(searchTimer)
  searchTimer = window.setTimeout(loadDirectory, 300)
})

async function join(target: string) {
  const t = target.trim()
  if (!t) return
  if (joined.value.has(t)) {
    open.value = false
    emit('joined', t)
    return
  }
  busy.value = t
  error.value = ''
  try {
    const roomId = await chat.join(t)
    open.value = false
    emit('joined', roomId)
  } catch (e) {
    error.value = errorMessage(e)
  } finally {
    busy.value = ''
  }
}

const validAddress = computed(() => /^[#!][^:\s]+:\S+$/.test(address.value.trim()))
</script>

<template>
  <WDialog v-model:open="open" title="Join room" wide :persistent="busy !== ''">
    <form class="flex items-end gap-2" @submit.prevent="join(address)">
      <WTextField
        v-model="address"
        class="flex-1"
        wide
        mono
        label="Room address or ID"
        placeholder="#homelab-ops:warp.example"
        autocomplete="off"
        autocapitalize="off"
        spellcheck="false"
        autofocus
      />
      <WButton type="submit" variant="primary" :loading="busy === address.trim() && busy !== ''" :disabled="!validAddress">Join</WButton>
    </form>
    <WBanner v-if="error" tone="danger">{{ error }}</WBanner>

    <div class="flex flex-col gap-2">
      <div class="flex items-center gap-2">
        <h3 class="body-strong m-0 flex-1">Room directory</h3>
      </div>
      <WTextField v-model="search" wide label="Search the directory" type="search" />
      <WBanner v-if="directoryError" tone="warning">{{ directoryError }}</WBanner>
      <div v-else-if="!directory" class="flex justify-center py-6"><WSpinner /></div>
      <p v-else-if="!directory.length" class="body py-4 text-center text-ink-muted">
        {{ search ? 'No public rooms match.' : 'There are no public rooms on this homeserver yet.' }}
      </p>
      <ul v-else class="m-0 flex max-h-80 list-none flex-col overflow-y-auto p-0">
        <li v-for="r in directory" :key="r.room_id" class="flex items-center gap-3 rounded-md px-2 py-2">
          <MxcAvatar :name="r.name ?? r.canonical_alias ?? r.room_id" :mxc="r.avatar_url" :size="36" />
          <div class="min-w-0 flex-1">
            <p class="body-strong m-0 truncate">{{ r.name ?? r.canonical_alias ?? r.room_id }}</p>
            <p class="small m-0 truncate text-ink-muted">
              <span v-if="r.canonical_alias" class="mxid">{{ r.canonical_alias }} · </span>{{ r.num_joined_members }}
              {{ r.num_joined_members === 1 ? 'member' : 'members' }}<template v-if="r.topic"> · {{ r.topic }}</template>
            </p>
          </div>
          <WButton size="sm" :variant="joined.has(r.room_id) ? 'ghost' : 'secondary'" :loading="busy === r.room_id" @click="join(r.room_id)">
            {{ joined.has(r.room_id) ? 'Open' : 'Join' }}
          </WButton>
        </li>
      </ul>
    </div>
  </WDialog>
</template>