@initsolusidigital/worksuite-shell 0.0.0-stage → 0.3.0

package/src/components/chat/AppChatPanel.vue

@@ -0,0 +1,315 @@
+<script setup>
+// Isi popup chat saat view = 'conversation': header lawan bicara + riwayat pesan + quick reply.
+import { ref, computed, watch, nextTick, onMounted } from 'vue'
+import { ArrowLeft, Send, Loader2, ExternalLink, Check, CheckCheck, Paperclip, FileUp, MapPin } from '@lucide/vue'
+import AppChatBubble from './AppChatBubble.vue'
+import { normalizeApiError } from '@initsolusidigital/worksuite-core/api/errors.js'
+import { useI18n } from 'vue-i18n'
+import { useChat, hasGeolocation } from '@initsolusidigital/worksuite-core/composables/useChat.js'
+import { useAuthStore } from '@initsolusidigital/worksuite-core/stores/auth.js'
+import { appUrl } from '@initsolusidigital/worksuite-core/utils/appUrl.js'
+
+const { t, locale } = useI18n()
+const authStore = useAuthStore()
+const {
+  activeConversation, messages, loadingMessages, hasMoreMessages, sending,
+  backToList, fetchMoreMessages, sendMessage, sendAttachment, sendLocation, otherUser, displayName,
+} = useChat()
+
+const draft = ref('')
+const scrollArea = ref(null)
+
+// URL app Chat — tombol "Buka Percakapan" hanya muncul bila alamatnya diketahui.
+// `appUrl()` memakai env saat dev per-port dan menurunkan `${origin}/chat` saat halaman disajikan
+// di origin tunggal (proxy/produksi), sehingga satu build benar di kedua mode tanpa rebuild.
+const chatAppUrl = import.meta.env.VITE_CHAT_APP_URL
+const openConversationUrl = computed(() =>
+  activeConversation.value
+    ? appUrl('chat', chatAppUrl, `/chats/${activeConversation.value.id}`)
+    : null,
+)
+
+const partner = computed(() => (activeConversation.value ? otherUser(activeConversation.value) : null))
+
+// Kapan lawan bicara TERAKHIR membaca percakapan ini (dari backend, per participant).
+// Dipakai status centang terbaca. Field ini butuh dukungan backend (`participants[].last_read_at`);
+// selama backend belum kirim → null → pesan sendiri berhenti di centang "terkirim" (bukan biru).
+const partnerLastReadAt = computed(() => {
+  const conv = activeConversation.value
+  if (!conv) return null
+  const p = (conv.participants ?? []).find((pt) => pt.user?.id !== authStore.user?.id)
+  return p?.last_read_at ?? null
+})
+
+function isMine(msg) {
+  return msg.sender_id && msg.sender_id === authStore.user?.id
+}
+
+// Pesan kita sudah dibaca lawan bila waktu kirimnya <= waktu baca terakhir lawan.
+function isRead(msg) {
+  if (!partnerLastReadAt.value) return false
+  return new Date(msg.created_at).getTime() <= new Date(partnerLastReadAt.value).getTime()
+}
+
+// Tampilkan label "Dibaca" hanya bila pesan TERAKHIR di thread milik kita & sudah dibaca
+// (kalau lawan balas setelahnya, balasannya sendiri sudah menandakan dibaca → label tak perlu).
+const showReadLabel = computed(() => {
+  const last = messages.value[messages.value.length - 1]
+  return !!last && isMine(last) && isRead(last)
+})
+function isSystem(msg) {
+  return !msg.sender_id || msg.type === 'system'
+}
+
+function msgTime(iso) {
+  return new Date(iso).toLocaleTimeString(locale.value === 'id' ? 'id-ID' : 'en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+function initials(user) {
+  const name = displayName(user)
+  return name.split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase()).filter(Boolean).join('') || '?'
+}
+
+async function submit() {
+  const text = draft.value.trim()
+  if (!text || sending.value) return
+  draft.value = ''
+  await sendMessage(text)
+}
+
+// ── Lampiran ────────────────────────────────────────────────────────────────────────────────
+const fileEl = ref(null)
+const galatLampiran = ref('')
+const mengunggah = ref(false)
+
+async function onPilihBerkas(e) {
+  const file = e.target.files?.[0]
+  e.target.value = ''                       // supaya memilih berkas SAMA dua kali tetap memicu
+  if (!file || mengunggah.value) return
+  galatLampiran.value = ''
+  mengunggah.value = true
+  try {
+    // Caption diambil dari kotak ketik: satu tindakan, bukan dua langkah terpisah bagi pemakai.
+    const caption = draft.value.trim()
+    draft.value = ''
+    await sendAttachment(file, caption)
+  } catch (err) {
+    const info = normalizeApiError(err)
+    // 413 & 422 punya sebab yang bisa dijelaskan; sisanya jangan ditebak. Ditampilkan INLINE di
+    // atas kotak ketik, bukan toast — toast menutupi percakapan yang sedang dibaca.
+    galatLampiran.value = info.status === 413
+      ? t('chat.attachTooLarge')
+      : info.status === 422
+        ? t('chat.attachRejected')
+        : t('common.serverError')
+  } finally {
+    mengunggah.value = false
+  }
+}
+
+const menuLampir = ref(false)
+const geoAda = hasGeolocation()
+
+async function kirimLokasi() {
+  menuLampir.value = false
+  if (mengunggah.value) return
+  galatLampiran.value = ''
+  mengunggah.value = true
+  try {
+    const label = draft.value.trim()
+    draft.value = ''
+    await sendLocation(label)
+  } catch (err) {
+    // Satu-satunya kegagalan yang perlu dijelaskan: user menolak izin lokasi. Sisanya generik.
+    galatLampiran.value = err?.message === 'geolocation_denied'
+      ? t('chat.locationDenied')
+      : t('common.serverError')
+  } finally {
+    mengunggah.value = false
+  }
+}
+
+// Enter kirim, Shift+Enter baris baru
+function onKeydown(e) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault()
+    submit()
+  }
+}
+
+function scrollToBottom() {
+  nextTick(() => {
+    if (scrollArea.value) scrollArea.value.scrollTop = scrollArea.value.scrollHeight
+  })
+}
+
+// Auto-scroll ke bawah saat jumlah pesan bertambah (pesan baru masuk / kirim)
+watch(() => messages.value.length, scrollToBottom)
+onMounted(scrollToBottom)
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <!-- Header lawan bicara -->
+    <div class="px-3 py-2.5 border-b border-gray-100 dark:border-gray-700 flex items-center gap-2 bg-gray-50/60 dark:bg-gray-700/40 shrink-0">
+      <button
+        @click="backToList"
+        class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors shrink-0"
+        :aria-label="t('common.back')"
+      >
+        <ArrowLeft class="w-4 h-4" />
+      </button>
+      <div class="shrink-0 w-8 h-8 rounded-full overflow-hidden bg-blue-100 dark:bg-blue-900/40 flex items-center justify-center">
+        <img v-if="partner?.avatar" :src="partner.avatar" class="w-full h-full object-cover" alt="" />
+        <span v-else class="text-[10px] font-semibold text-blue-700 dark:text-blue-300">{{ initials(partner) }}</span>
+      </div>
+      <p class="text-sm font-semibold text-gray-800 dark:text-white flex-1 truncate">
+        {{ displayName(partner) || t('chat.unknownUser') }}
+      </p>
+      <a
+        v-if="openConversationUrl"
+        :href="openConversationUrl"
+        target="_blank"
+        rel="noopener"
+        :title="t('chat.openConversation')"
+        class="shrink-0 inline-flex items-center gap-1 text-[11px] text-blue-600 dark:text-blue-400 hover:underline"
+      >
+        <ExternalLink class="w-3.5 h-3.5" />
+        <span class="hidden sm:inline">{{ t('chat.openConversation') }}</span>
+      </a>
+    </div>
+
+    <!-- Riwayat pesan -->
+    <div ref="scrollArea" class="flex-1 overflow-y-auto scrollbar-rounded px-3 py-3 space-y-2 bg-gray-50/40 dark:bg-gray-900/20">
+      <!-- Muat pesan lebih lama -->
+      <div v-if="hasMoreMessages" class="text-center pb-1">
+        <button
+          @click="fetchMoreMessages"
+          :disabled="loadingMessages"
+          class="text-[11px] text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-50"
+        >
+          {{ loadingMessages ? t('common.loading') : t('chat.loadOlder') }}
+        </button>
+      </div>
+
+      <div v-if="loadingMessages && messages.length === 0" class="flex items-center justify-center py-12">
+        <Loader2 class="w-5 h-5 text-gray-300 dark:text-gray-600 animate-spin" />
+      </div>
+
+      <template v-for="msg in messages" :key="msg.id">
+        <!-- Pesan sistem: italic tengah -->
+        <div v-if="isSystem(msg)" class="text-center">
+          <span class="inline-block text-[11px] italic text-gray-400 dark:text-gray-500 px-2 py-0.5">{{ msg.body }}</span>
+        </div>
+        <!-- Pesan biasa -->
+        <div v-else class="flex" :class="isMine(msg) ? 'justify-end' : 'justify-start'">
+          <!-- Pesan MEDIA (gambar/peta) memakai padding rapat: isinya sudah punya bingkai sendiri,
+               jadi padding penuh menyisakan pita warna tebal di sekelilingnya — terlihat seperti
+               jarak yang salah, bukan seperti bubble. Pesan teks tetap lapang seperti semula. -->
+          <div
+            class="max-w-[75%] rounded-2xl text-sm break-words"
+            :class="[
+              ['image', 'location'].includes(msg.type) && !msg.body ? 'p-1' : 'px-3 py-2',
+              isMine(msg)
+                ? 'bg-blue-600 text-white rounded-br-sm'
+                : 'bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 border border-gray-100 dark:border-gray-600 rounded-bl-sm',
+            ]"
+          >
+            <AppChatBubble :msg="msg" :mine="isMine(msg)" />
+            <!-- Waktu + status centang (terkirim/terbaca) — centang hanya utk pesan sendiri -->
+            <div class="flex items-center justify-end gap-1 mt-0.5 text-[10px]" :class="isMine(msg) ? 'text-blue-100/80' : 'text-gray-400 dark:text-gray-500'">
+              <span>{{ msgTime(msg.created_at) }}</span>
+              <template v-if="isMine(msg)">
+                <!-- Read = centang ganda putih PENUH (kontras maksimal di bubble biru);
+                     Sent = centang tunggal redup. Beda jumlah + kecerahan = jelas terbaca. -->
+                <CheckCheck v-if="isRead(msg)" class="w-3.5 h-3.5 text-white shrink-0" :title="t('chat.status.read')" />
+                <Check v-else class="w-3.5 h-3.5 text-blue-200/60 shrink-0" :title="t('chat.status.sent')" />
+              </template>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- Label "Dibaca {jam}" di luar bubble (ala iMessage) — hanya bila pesan TERAKHIR di thread
+           adalah milik kita & sudah dibaca. Konfirmasi read yang tak ambigu, tanpa mengandalkan
+           warna centang di bubble biru. -->
+      <div v-if="showReadLabel" class="flex justify-end pr-1 -mt-1">
+        <span class="text-[10px] text-gray-400 dark:text-gray-500">
+          {{ t('chat.status.readAt', { time: msgTime(partnerLastReadAt) }) }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Quick reply -->
+    <div class="border-t border-gray-100 dark:border-gray-700 shrink-0">
+      <p v-if="galatLampiran" class="px-3 pt-2 text-xs text-red-600 dark:text-red-400" data-attach-error>
+        {{ galatLampiran }}
+      </p>
+      <div class="p-2 flex items-end gap-2 relative">
+      <input ref="fileEl" type="file" class="hidden" data-attach-input @change="onPilihBerkas" />
+      <!-- Menu lampir: berkas atau lokasi. Ditutup saat salah satu dipilih & saat klik di luar. -->
+      <div v-if="menuLampir" class="fixed inset-0 z-[58]" @click="menuLampir = false" />
+      <div
+        v-if="menuLampir"
+        class="absolute bottom-14 left-2 z-[59] w-56 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 shadow-lg py-1"
+        data-attach-menu
+      >
+        <button
+          type="button"
+          class="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
+          data-attach-file
+          @click="menuLampir = false; fileEl?.click()"
+        ><FileUp class="w-4 h-4 opacity-70" />{{ t('chat.attachFile') }}</button>
+        <button
+          type="button"
+          class="w-full flex items-start gap-2.5 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
+          data-attach-location
+          @click="kirimLokasi"
+        >
+          <MapPin class="w-4 h-4 mt-0.5 opacity-70 shrink-0" />
+          <span class="text-left">
+            {{ t('chat.attachLocation') }}
+            <!-- Dikatakan APA ADANYA saat geolokasi tak tersedia: yang terkirim koordinat contoh,
+                 bukan posisi user. Menyembunyikannya membuat orang mengira lokasinya benar. -->
+            <span v-if="!geoAda" class="block text-[11px] text-amber-600 dark:text-amber-400">
+              {{ t('chat.locationDemo') }}
+            </span>
+          </span>
+        </button>
+      </div>
+      <button
+        type="button"
+        class="shrink-0 w-10 h-10 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 flex items-center justify-center hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50"
+        :disabled="mengunggah"
+        :aria-label="t('chat.attach')"
+        :title="t('chat.attach')"
+        data-attach-btn
+        @click="menuLampir = !menuLampir"
+      >
+        <Loader2 v-if="mengunggah" class="w-4 h-4 animate-spin" />
+        <Paperclip v-else class="w-4 h-4" />
+      </button>
+      <textarea
+        v-model="draft"
+        rows="1"
+        :placeholder="t('chat.placeholder')"
+        maxlength="5000"
+        @keydown="onKeydown"
+        class="flex-1 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-3 py-2 max-h-24 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 scrollbar-rounded"
+      />
+      <button
+        @click="submit"
+        :disabled="!draft.trim() || sending"
+        class="shrink-0 w-10 h-10 rounded-lg bg-blue-600 hover:bg-blue-700 text-white flex items-center justify-center transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        :aria-label="t('chat.send')"
+      >
+        <Loader2 v-if="sending" class="w-4 h-4 animate-spin" />
+        <Send v-else class="w-4 h-4" />
+      </button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/chat/AppChatWidget.vue

@@ -0,0 +1,126 @@
+<script setup>
+// ── Widget Chat Melayang ──────────────────────────────────────────────────────
+// Tombol melayang kanan-bawah di semua halaman + popup "Pesan Terbaru" berisi daftar
+// percakapan / panel percakapan ringkas. Real-time via Laravel Echo + Reverb (lihat useChat).
+//
+// Gate permission modul `chats` dilakukan di AppLayout (widget tidak dirender bila tak boleh),
+// tapi init/teardown real-time & badge ditangani di sini karena widget = titik hidup chat.
+import { onMounted, onBeforeUnmount } from 'vue'
+import { MessageSquareText, X } from '@lucide/vue'
+import { useI18n } from 'vue-i18n'
+import { useAuthStore } from '@initsolusidigital/worksuite-core/stores/auth.js'
+import { useChat } from '@initsolusidigital/worksuite-core/composables/useChat.js'
+import AppChatList from './AppChatList.vue'
+import AppChatPanel from './AppChatPanel.vue'
+
+const { t } = useI18n()
+const authStore = useAuthStore()
+const {
+  isOpen, view, unreadTotal,
+  toggleWidget, closeWidget,
+  fetchUnreadTotal, initRealtime, teardownRealtime,
+} = useChat()
+
+onMounted(() => {
+  // Badge awal + langganan real-time channel user (sekali per sesi login)
+  fetchUnreadTotal()
+  initRealtime(authStore.user?.id)
+})
+
+onBeforeUnmount(() => {
+  // Logout / keluar area authenticated → putus socket supaya sesi berikutnya bersih
+  teardownRealtime()
+})
+</script>
+
+<template>
+  <!-- Backdrop transparan penutup saat klik di luar -->
+  <div v-if="isOpen" class="fixed inset-0 z-[44]" @click="closeWidget()" />
+
+  <!-- Popup percakapan. Tombol melayang ditumpuk satu kolom di kanan (Asisten AI di atas Chat),
+       jadi panel dibuka DI SEBELAH KIRI kolom itu pada layar ≥ sm — dibuka di atas tombol chat,
+       ia menimpa tombol Asisten AI. Di layar sempit tak ada ruang di kiri, jadi panel duduk di
+       ATAS seluruh tumpukan (24 + 56 + 12 + 48 + 12 px = 9.5rem). Semua posisi ikut `--fab-lift`
+       (AppLayout) supaya tumpukan & panelnya naik bersama saat footer terlihat.
+       ⚠️ Batas tinggi = tinggi layar − jarak bawah − ruang navbar melayang (berakhir ~88px) − jarak.
+       Batas yang terlalu longgar membuat puncak panel masuk DI BALIK navbar pada layar pendek,
+       sehingga kepalanya tak bisa dilihat maupun disentuh. -->
+  <Transition name="chat-pop">
+    <div
+      v-if="isOpen"
+      class="fixed bottom-[calc(9.5rem+var(--fab-lift,0px))] right-4 sm:bottom-[calc(1.5rem+var(--fab-lift,0px))] sm:right-24 z-[46] w-[calc(100vw-2rem)] sm:w-96 max-w-96
+             bg-white dark:bg-gray-800 rounded-2xl shadow-2xl border border-gray-100 dark:border-gray-700
+             overflow-hidden flex flex-col h-[520px] max-h-[calc(100vh-16rem-var(--fab-lift,0px))] sm:max-h-[calc(100vh-8rem-var(--fab-lift,0px))]"
+    >
+      <AppChatPanel v-if="view === 'conversation'" />
+      <AppChatList v-else />
+    </div>
+  </Transition>
+
+  <!-- Tombol melayang -->
+  <button
+    type="button"
+    :title="t('chat.button')"
+    :aria-label="t('chat.button')"
+    @click="toggleWidget()"
+    class="fixed bottom-[calc(1.5rem+var(--fab-lift,0px))] right-4 sm:right-6 z-[46] w-14 h-14 rounded-full bg-blue-600 hover:bg-blue-700
+           text-white shadow-lg shadow-blue-600/30 flex items-center justify-center transition-colors
+           focus:outline-none focus:ring-4 focus:ring-blue-500/40"
+  >
+    <!-- Cincin sonar/ripple: 2 cincin memancar keluar (stagger) saat widget tertutup —
+         merah bila ada pesan belum dibaca (penarik perhatian), biru halus bila tidak.
+         pointer-events-none supaya tak ganggu klik; berhenti otomatis saat panel terbuka. -->
+    <template v-if="!isOpen">
+      <span
+        class="chat-ripple absolute inset-0 rounded-full border-2 pointer-events-none"
+        :class="unreadTotal > 0 ? 'border-red-500' : 'border-blue-400'"
+        aria-hidden="true"
+      />
+      <span
+        class="chat-ripple chat-ripple--delay absolute inset-0 rounded-full border-2 pointer-events-none"
+        :class="unreadTotal > 0 ? 'border-red-500' : 'border-blue-400'"
+        aria-hidden="true"
+      />
+    </template>
+
+    <X v-if="isOpen" class="w-6 h-6 relative z-10" />
+    <MessageSquareText v-else class="w-6 h-6 relative z-10" />
+    <!-- Badge unread total -->
+    <span
+      v-if="!isOpen && unreadTotal > 0"
+      class="absolute -top-0.5 -right-0.5 min-w-[20px] h-5 px-1 rounded-full bg-red-500 text-white
+             text-[10px] font-bold flex items-center justify-center leading-none ring-2 ring-white dark:ring-gray-800"
+    >{{ unreadTotal > 99 ? '99+' : unreadTotal }}</span>
+  </button>
+</template>
+
+<style scoped>
+.chat-pop-enter-active,
+.chat-pop-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  transform-origin: bottom right;
+}
+.chat-pop-enter-from,
+.chat-pop-leave-to {
+  opacity: 0;
+  transform: translateY(12px) scale(0.96);
+}
+
+/* Cincin sonar/ripple tombol chat — memancar keluar sambil memudar, berulang */
+@keyframes chat-ripple {
+  0%   { transform: scale(1);    opacity: 0.55; }
+  100% { transform: scale(1.5);  opacity: 0;    }
+}
+.chat-ripple {
+  animation: chat-ripple 1.8s ease-out infinite;
+  transform-origin: center;
+}
+/* Cincin kedua di-delay setengah durasi → gelombang beruntun (2 cincin) */
+.chat-ripple--delay {
+  animation-delay: 0.9s;
+}
+/* Hormati preferensi kurangi animasi (aksesibilitas) */
+@media (prefers-reduced-motion: reduce) {
+  .chat-ripple { animation: none; opacity: 0; }
+}
+</style>

package/src/components/communications/AppChannelBadge.vue

@@ -0,0 +1,47 @@
+<script setup>
+// Badge kanal percakapan — generik per `channel`. Semua kanal (webchat/WA/IG) masuk lewat pintu
+// yang sama, jadi peta ini satu-satunya tempat yang menyebut kanal satu per satu.
+// wa/ig/fb pakai glyph brand simple-icons via Iconify (pola TaskTypeIcon — @lucide/vue tak
+// menyediakan ikon brand); warnanya IKUT warna teks chip supaya serasi light/dark.
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Icon } from '@iconify/vue'
+import { MessageSquare } from '@lucide/vue'
+import whatsapp from '@iconify-icons/simple-icons/whatsapp'
+import instagram from '@iconify-icons/simple-icons/instagram'
+import facebook from '@iconify-icons/simple-icons/facebook'
+
+const props = defineProps({
+  channel: { type: String, required: true },
+  // compact = ikon saja (baris daftar yang padat); default ikon + label
+  compact: { type: Boolean, default: false },
+})
+
+const { t } = useI18n()
+
+const MAP = {
+  webchat: { lucide: MessageSquare, cls: 'bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300' },
+  wa:      { brand: whatsapp,       cls: 'bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-300' },
+  ig:      { brand: instagram,      cls: 'bg-fuchsia-50 text-fuchsia-700 dark:bg-fuchsia-900/30 dark:text-fuchsia-300' },
+  fb:      { brand: facebook,       cls: 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300' },
+}
+
+const entry = computed(() => MAP[props.channel] ?? MAP.webchat)
+// Kanal tak dikenal (kanal baru sebelum kamus menyusul) → tampilkan slug mentahnya apa adanya,
+// jangan menyamarkannya sebagai webchat.
+const label = computed(() =>
+  MAP[props.channel] ? t(`communications.channel.${props.channel}`) : props.channel
+)
+</script>
+
+<template>
+  <span
+    class="inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[11px] font-medium shrink-0"
+    :class="entry.cls"
+    :title="label"
+  >
+    <Icon v-if="entry.brand" :icon="entry.brand" class="w-3 h-3 shrink-0" />
+    <component v-else :is="entry.lucide" class="w-3 h-3 shrink-0" />
+    <span v-if="!compact">{{ label }}</span>
+  </span>
+</template>