42 lines
1.4 KiB
Vue
42 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { selectTarget } from '@open-pencil/vue'
|
|
import AppInput from '@/components/ui/AppInput.vue'
|
|
import { useCollabPanelContext } from '@/components/CollabPanel/context'
|
|
|
|
const collab = useCollabPanelContext()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mb-3 text-xs font-medium text-surface">{{ collab.dialogs.roomLink }}</div>
|
|
<div class="mb-3 flex items-center gap-1.5">
|
|
<AppInput
|
|
:model-value="collab.shareUrl"
|
|
readonly
|
|
test-id="collab-room-link"
|
|
:ui="{ base: 'min-w-0 flex-1' }"
|
|
@focus="selectTarget($event)"
|
|
/>
|
|
<button
|
|
data-test-id="collab-copy-link"
|
|
class="flex h-7 cursor-pointer items-center gap-1 rounded border-none bg-accent px-2 text-xs text-white hover:bg-accent/90"
|
|
@click="collab.copyLink"
|
|
>
|
|
<icon-lucide-check v-if="collab.copied" class="size-3" />
|
|
<icon-lucide-copy v-else class="size-3" />
|
|
{{ collab.copied ? 'Copied' : 'Copy' }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mb-2 text-xs font-medium text-surface">
|
|
{{ collab.peers.length + 1 }} {{ collab.peers.length === 0 ? 'person' : 'people' }} in this room
|
|
</div>
|
|
|
|
<button
|
|
data-test-id="collab-disconnect"
|
|
class="flex h-7 w-full cursor-pointer items-center justify-center rounded border border-border bg-transparent text-xs text-muted hover:bg-hover hover:text-surface"
|
|
@click="collab.disconnect"
|
|
>
|
|
Disconnect
|
|
</button>
|
|
</template>
|