@abraca/nuxt 0.2.0 → 1.5.0

package/dist/runtime/components/chat/AChatInput.vue

@@ -0,0 +1,219 @@
+<script setup>
+import { ref, computed, nextTick, onMounted } from "vue";
+const props = defineProps({
+  autofocus: { type: Boolean, required: false, default: false },
+  placeholder: { type: String, required: false, default: "Type a message\u2026" },
+  canSend: { type: Boolean, required: false, default: true },
+  mentionUsers: { type: Array, required: false, default: () => [] }
+});
+const emit = defineEmits(["send", "typing", "doc-drop"]);
+const messageInput = ref("");
+const inputRef = ref(null);
+const isDraggingDoc = ref(false);
+const showMentions = ref(false);
+const mentionQuery = ref("");
+const mentionIndex = ref(0);
+const filteredMentionUsers = computed(() => {
+  if (!showMentions.value) return [];
+  const q = mentionQuery.value.toLowerCase();
+  return props.mentionUsers.filter((u) => u.name.toLowerCase().includes(q)).slice(0, 8);
+});
+function onInputChange(e) {
+  const value = e.target.value;
+  messageInput.value = value;
+  if (!typingTimeout) {
+    emit("typing");
+  }
+  if (typingTimeout) clearTimeout(typingTimeout);
+  typingTimeout = setTimeout(() => {
+    typingTimeout = null;
+  }, 2e3);
+  const textarea = inputRef.value;
+  if (!textarea) return;
+  const pos = textarea.selectionStart ?? value.length;
+  const textBeforeCursor = value.slice(0, pos);
+  const mentionMatch = textBeforeCursor.match(/@(\w*)$/);
+  if (mentionMatch) {
+    showMentions.value = true;
+    mentionQuery.value = mentionMatch[1] ?? "";
+    mentionIndex.value = 0;
+  } else {
+    showMentions.value = false;
+  }
+}
+function selectMention(name) {
+  const textarea = inputRef.value;
+  if (!textarea) return;
+  const pos = textarea.selectionStart ?? messageInput.value.length;
+  const textBeforeCursor = messageInput.value.slice(0, pos);
+  const mentionMatch = textBeforeCursor.match(/@(\w*)$/);
+  if (mentionMatch) {
+    const start = pos - mentionMatch[0].length;
+    const before = messageInput.value.slice(0, start);
+    const after = messageInput.value.slice(pos);
+    messageInput.value = `${before}@${name} ${after}`;
+    showMentions.value = false;
+    nextTick(() => {
+      const newPos = start + name.length + 2;
+      textarea.setSelectionRange(newPos, newPos);
+      textarea.focus();
+    });
+  }
+}
+function onKeydown(e) {
+  if (showMentions.value && filteredMentionUsers.value.length > 0) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      mentionIndex.value = (mentionIndex.value + 1) % filteredMentionUsers.value.length;
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      mentionIndex.value = (mentionIndex.value - 1 + filteredMentionUsers.value.length) % filteredMentionUsers.value.length;
+      return;
+    }
+    if (e.key === "Tab" || e.key === "Enter") {
+      e.preventDefault();
+      e.stopPropagation();
+      selectMention(filteredMentionUsers.value[mentionIndex.value].name);
+      return;
+    }
+    if (e.key === "Escape") {
+      showMentions.value = false;
+      return;
+    }
+  }
+  if (e.key === "Enter" && !e.shiftKey) {
+    e.preventDefault();
+    handleSend();
+  }
+}
+let typingTimeout = null;
+function handleSend() {
+  const content = messageInput.value.trim();
+  if (!content) return;
+  emit("send", content);
+  messageInput.value = "";
+  showMentions.value = false;
+}
+function focus() {
+  nextTick(() => {
+    inputRef.value?.focus();
+  });
+}
+function onDragOver(e) {
+  e.preventDefault();
+  if (e.dataTransfer) e.dataTransfer.dropEffect = "link";
+  isDraggingDoc.value = true;
+}
+function onDragLeave() {
+  isDraggingDoc.value = false;
+}
+function onDrop(e) {
+  isDraggingDoc.value = false;
+  const text = e.dataTransfer?.getData("application/x-abracadabra-doc");
+  if (text) {
+    e.preventDefault();
+    try {
+      const payload = JSON.parse(text);
+      if (payload.id) {
+        emit("doc-drop", { docId: payload.id, label: payload.label ?? "" });
+      }
+    } catch {
+    }
+  }
+}
+onMounted(() => {
+  if (props.autofocus) focus();
+});
+defineExpose({ focus });
+</script>
+
+<template>
+  <div
+    v-if="canSend"
+    class="shrink-0 border-t border-(--ui-border) px-4 sm:px-6 py-3 relative"
+    @dragover="onDragOver"
+    @dragleave.self="onDragLeave"
+    @drop="onDrop"
+  >
+    <!-- Drop zone overlay -->
+    <Transition
+      enter-active-class="transition-opacity duration-150"
+      enter-from-class="opacity-0"
+      leave-active-class="transition-opacity duration-150"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="isDraggingDoc"
+        class="absolute inset-0 z-10 flex items-center justify-center bg-(--ui-bg)/80 border-2 border-dashed border-(--ui-color-primary-400) rounded-lg m-1 pointer-events-none"
+      >
+        <div class="flex items-center gap-2 text-(--ui-color-primary-500) text-sm font-medium">
+          <UIcon
+            name="i-lucide-file-plus"
+            class="size-5"
+          />
+          Drop to share
+        </div>
+      </div>
+    </Transition>
+
+    <!-- @Mention autocomplete popover -->
+    <Transition
+      enter-active-class="transition-all duration-150 ease-out"
+      enter-from-class="opacity-0 translate-y-1"
+      leave-active-class="transition-all duration-100 ease-in"
+      leave-to-class="opacity-0 translate-y-1"
+    >
+      <div
+        v-if="showMentions && filteredMentionUsers.length"
+        class="absolute bottom-full left-4 right-4 mb-1 bg-(--ui-bg-elevated) border border-(--ui-border) rounded-lg shadow-lg overflow-hidden z-20"
+      >
+        <button
+          v-for="(user, i) in filteredMentionUsers"
+          :key="user.id"
+          class="flex items-center gap-2 w-full px-3 py-1.5 text-sm text-left hover:bg-(--ui-bg-accented) transition-colors"
+          :class="i === mentionIndex ? 'bg-(--ui-bg-accented)' : ''"
+          @mousedown.prevent="selectMention(user.name)"
+        >
+          <UAvatar
+            :alt="user.name"
+            size="2xs"
+          />
+          <span class="text-(--ui-text-highlighted)">{{ user.name }}</span>
+          <UBadge
+            v-if="user.isAgent"
+            label="Bot"
+            size="xs"
+            color="info"
+            variant="subtle"
+          />
+        </button>
+      </div>
+    </Transition>
+
+    <div class="flex items-end gap-2">
+      <textarea
+        ref="inputRef"
+        v-model="messageInput"
+        :placeholder="placeholder"
+        rows="1"
+        class="flex-1 resize-none bg-transparent text-sm text-(--ui-text) placeholder:text-(--ui-text-dimmed) outline-none max-h-32 overflow-y-auto border border-(--ui-border) rounded-lg px-3 py-2 focus:ring-1 focus:ring-(--ui-color-primary-500)"
+        @input="onInputChange"
+        @keydown="onKeydown"
+      />
+      <UButton
+        icon="i-lucide-send"
+        size="sm"
+        :disabled="!messageInput.trim()"
+        @click="handleSend"
+      />
+    </div>
+  </div>
+  <div
+    v-else
+    class="shrink-0 border-t border-(--ui-border) p-3 text-center text-sm text-(--ui-text-muted)"
+  >
+    Read only
+  </div>
+</template>

package/dist/runtime/components/chat/AChatInput.vue.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Chat message input with @mention autocomplete and document drop support.
+ *
+ * Ported from cou-sh/app/components/chat/ChatInput.vue — decoupled from
+ * useChat/useChatUsers/usePermissions. App provides handlers via emits.
+ */
+export interface ChatMentionUser {
+    id: string;
+    name: string;
+    isAgent?: boolean;
+}
+type __VLS_Props = {
+    /** Whether to auto-focus the input on mount */
+    autofocus?: boolean;
+    placeholder?: string;
+    /** Whether the user can send messages (false = read-only) */
+    canSend?: boolean;
+    /** Online users for @mention autocomplete */
+    mentionUsers?: ChatMentionUser[];
+};
+declare function focus(): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    focus: typeof focus;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    send: (content: string) => any;
+    typing: () => any;
+    "doc-drop": (payload: {
+        docId: string;
+        label: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSend?: ((content: string) => any) | undefined;
+    onTyping?: (() => any) | undefined;
+    "onDoc-drop"?: ((payload: {
+        docId: string;
+        label: string;
+    }) => any) | undefined;
+}>, {
+    placeholder: string;
+    autofocus: boolean;
+    canSend: boolean;
+    mentionUsers: ChatMentionUser[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/AChatList.d.vue.ts

@@ -0,0 +1,59 @@
+/**
+ * Chat channel / notification list.
+ *
+ * Supports two modes: 'chat' (channel list with unread) and 'notifications'.
+ * Ported from cou-sh/app/components/chat/ChatList.vue — decoupled from
+ * useChat/useNotifications.
+ */
+export interface ChatChannelItem {
+    id: string;
+    label: string;
+    type: 'dm' | 'group';
+    unreadCount: number;
+    lastMessage?: {
+        senderName: string;
+        content: string;
+        createdAt: number;
+    };
+}
+export interface NotificationItem {
+    id: string;
+    title: string;
+    body?: string;
+    type?: string;
+    icon?: string;
+    read: boolean;
+    createdAt: number;
+    sourceId?: string;
+    link?: string;
+}
+type __VLS_Props = {
+    mode?: 'chat' | 'notifications';
+    channels?: ChatChannelItem[];
+    notifications?: NotificationItem[];
+    notificationUnreadCount?: number;
+};
+type __VLS_ModelProps = {
+    'selectedChannelId'?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "select-channel": (channelId: string) => any;
+    "select-notification": (notification: NotificationItem) => any;
+    "mark-all-read": () => any;
+    "load-more": () => any;
+    "update:selectedChannelId": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onSelect-channel"?: ((channelId: string) => any) | undefined;
+    "onSelect-notification"?: ((notification: NotificationItem) => any) | undefined;
+    "onMark-all-read"?: (() => any) | undefined;
+    "onLoad-more"?: (() => any) | undefined;
+    "onUpdate:selectedChannelId"?: ((value: string | null) => any) | undefined;
+}>, {
+    notifications: NotificationItem[];
+    mode: "chat" | "notifications";
+    channels: ChatChannelItem[];
+    notificationUnreadCount: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/AChatList.vue

@@ -0,0 +1,184 @@
+<script setup>
+const _props = defineProps({
+  mode: { type: String, required: false, default: "chat" },
+  channels: { type: Array, required: false, default: () => [] },
+  notifications: { type: Array, required: false, default: () => [] },
+  notificationUnreadCount: { type: Number, required: false, default: 0 }
+});
+const emit = defineEmits(["select-channel", "select-notification", "mark-all-read", "load-more"]);
+const selectedChannelId = defineModel("selectedChannelId", { type: [String, null], ...{ default: null } });
+function channelIcon(ch) {
+  return ch.type === "dm" ? "i-lucide-user" : "i-lucide-users";
+}
+function formatTimestamp(ts) {
+  if (!ts) return "";
+  const d = new Date(ts);
+  const now = /* @__PURE__ */ new Date();
+  const isToday = d.toDateString() === now.toDateString();
+  return isToday ? d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false }) : d.toLocaleDateString("en-US", { day: "2-digit", month: "short" });
+}
+function notificationIcon(n) {
+  if (n.icon) return n.icon;
+  switch (n.type) {
+    case "chat":
+      return "i-lucide-message-circle";
+    case "agent":
+      return "i-lucide-bot";
+    case "mention":
+      return "i-lucide-at-sign";
+    default:
+      return "i-lucide-bell";
+  }
+}
+function onClickNotification(n) {
+  emit("select-notification", n);
+}
+</script>
+
+<template>
+  <!-- Notifications mode -->
+  <div
+    v-if="mode === 'notifications'"
+    class="overflow-y-auto"
+  >
+    <div
+      v-if="notificationUnreadCount > 0"
+      class="px-4 sm:px-6 py-2 flex justify-end"
+    >
+      <UButton
+        label="Mark all as read"
+        variant="link"
+        size="xs"
+        @click="emit('mark-all-read')"
+      />
+    </div>
+
+    <div
+      v-if="notifications.length === 0"
+      class="flex flex-col items-center justify-center py-16 text-(--ui-text-dimmed)"
+    >
+      <UIcon
+        name="i-lucide-bell"
+        class="size-12 mb-3"
+      />
+      <p class="text-sm">
+        No notifications
+      </p>
+    </div>
+
+    <div class="divide-y divide-(--ui-border)">
+      <div
+        v-for="n in notifications"
+        :key="n.id"
+        class="p-4 sm:px-6 text-sm cursor-pointer border-l-2 transition-colors"
+        :class="[
+  !n.read ? 'text-(--ui-text-highlighted) border-(--ui-color-primary-500) bg-(--ui-color-primary-500)/5' : 'text-(--ui-text-muted) border-transparent hover:border-(--ui-color-primary-500) hover:bg-(--ui-color-primary-500)/5'
+]"
+        @click="onClickNotification(n)"
+      >
+        <div
+          class="flex items-center justify-between"
+          :class="[!n.read && 'font-semibold']"
+        >
+          <div class="flex items-center gap-2.5">
+            <UIcon
+              :name="notificationIcon(n)"
+              class="size-4 text-(--ui-text-dimmed) shrink-0"
+            />
+            <span class="truncate">{{ n.title }}</span>
+            <UBadge
+              v-if="n.type === 'mention'"
+              label="@"
+              size="xs"
+              color="primary"
+              variant="subtle"
+            />
+          </div>
+          <span class="text-xs text-(--ui-text-dimmed) shrink-0">
+            {{ formatTimestamp(n.createdAt) }}
+          </span>
+        </div>
+        <p
+          v-if="n.body"
+          class="mt-0.5 pl-6.5 text-xs text-(--ui-text-dimmed) truncate"
+        >
+          {{ n.body }}
+        </p>
+      </div>
+    </div>
+
+    <div
+      v-if="notifications.length >= 10"
+      class="p-4 flex justify-center"
+    >
+      <UButton
+        label="Load more"
+        variant="ghost"
+        size="xs"
+        icon="i-lucide-chevron-down"
+        @click="emit('load-more')"
+      />
+    </div>
+  </div>
+
+  <!-- Chat mode (default) -->
+  <div
+    v-else
+    class="overflow-y-auto divide-y divide-(--ui-border)"
+  >
+    <div
+      v-if="channels.length === 0"
+      class="flex flex-col items-center justify-center py-16 text-(--ui-text-dimmed)"
+    >
+      <UIcon
+        name="i-lucide-message-circle"
+        class="size-12 mb-3"
+      />
+      <p class="text-sm">
+        No conversations yet
+      </p>
+      <p class="text-xs mt-1">
+        Start a chat from the editor
+      </p>
+    </div>
+
+    <div
+      v-for="ch in channels"
+      :key="ch.id"
+      class="p-4 sm:px-6 text-sm cursor-pointer border-l-2 transition-colors"
+      :class="[
+  ch.unreadCount > 0 ? 'text-(--ui-text-highlighted)' : 'text-(--ui-text-muted)',
+  selectedChannelId === ch.id ? 'border-(--ui-color-primary-500) bg-(--ui-color-primary-500)/10' : 'border-transparent hover:border-(--ui-color-primary-500) hover:bg-(--ui-color-primary-500)/5'
+]"
+      @click="selectedChannelId = ch.id;
+  emit('select-channel', ch.id)"
+    >
+      <div
+        class="flex items-center justify-between"
+        :class="[ch.unreadCount > 0 && 'font-semibold']"
+      >
+        <div class="flex items-center gap-2.5">
+          <UIcon
+            :name="channelIcon(ch)"
+            class="size-4 text-(--ui-text-dimmed) shrink-0"
+          />
+          <span class="truncate">{{ ch.label }}</span>
+          <span
+            v-if="ch.unreadCount > 0"
+            class="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-(--ui-color-error-500) text-white text-[11px] font-bold leading-none"
+          >{{ ch.unreadCount }}</span>
+        </div>
+        <span class="text-xs text-(--ui-text-dimmed) shrink-0">
+          {{ formatTimestamp(ch.lastMessage?.createdAt) }}
+        </span>
+      </div>
+      <div
+        v-if="ch.lastMessage"
+        class="flex items-center gap-1 mt-0.5 pl-6.5 min-w-0"
+      >
+        <span class="text-xs text-(--ui-text-dimmed) font-medium shrink-0">{{ ch.lastMessage.senderName }}:</span>
+        <span class="text-xs text-(--ui-text-dimmed) truncate flex-1">{{ ch.lastMessage.content }}</span>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/chat/AChatList.vue.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Chat channel / notification list.
+ *
+ * Supports two modes: 'chat' (channel list with unread) and 'notifications'.
+ * Ported from cou-sh/app/components/chat/ChatList.vue — decoupled from
+ * useChat/useNotifications.
+ */
+export interface ChatChannelItem {
+    id: string;
+    label: string;
+    type: 'dm' | 'group';
+    unreadCount: number;
+    lastMessage?: {
+        senderName: string;
+        content: string;
+        createdAt: number;
+    };
+}
+export interface NotificationItem {
+    id: string;
+    title: string;
+    body?: string;
+    type?: string;
+    icon?: string;
+    read: boolean;
+    createdAt: number;
+    sourceId?: string;
+    link?: string;
+}
+type __VLS_Props = {
+    mode?: 'chat' | 'notifications';
+    channels?: ChatChannelItem[];
+    notifications?: NotificationItem[];
+    notificationUnreadCount?: number;
+};
+type __VLS_ModelProps = {
+    'selectedChannelId'?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "select-channel": (channelId: string) => any;
+    "select-notification": (notification: NotificationItem) => any;
+    "mark-all-read": () => any;
+    "load-more": () => any;
+    "update:selectedChannelId": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onSelect-channel"?: ((channelId: string) => any) | undefined;
+    "onSelect-notification"?: ((notification: NotificationItem) => any) | undefined;
+    "onMark-all-read"?: (() => any) | undefined;
+    "onLoad-more"?: (() => any) | undefined;
+    "onUpdate:selectedChannelId"?: ((value: string | null) => any) | undefined;
+}>, {
+    notifications: NotificationItem[];
+    mode: "chat" | "notifications";
+    channels: ChatChannelItem[];
+    notificationUnreadCount: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/AChatMemberList.d.vue.ts

@@ -0,0 +1,24 @@
+export interface ChatMember {
+    id: string;
+    name: string;
+    color?: string;
+    avatarStyle?: string;
+    isAgent?: boolean;
+    status?: string;
+    /** Doc ID where the user currently is */
+    docId?: string;
+}
+type __VLS_Props = {
+    members: ChatMember[];
+    /** Map of docId -> label for group headers */
+    docLabels?: Record<string, string>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "start-dm": (member: ChatMember) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onStart-dm"?: ((member: ChatMember) => any) | undefined;
+}>, {
+    docLabels: Record<string, string>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/chat/AChatMemberList.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  members: { type: Array, required: true },
+  docLabels: { type: Object, required: false, default: () => ({}) }
+});
+const emit = defineEmits(["start-dm"]);
+function docLabel(docId) {
+  return props.docLabels[docId] || docId.slice(0, 8) + "\u2026";
+}
+const grouped = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const m of props.members) {
+    const key = m.docId;
+    if (!map.has(key)) map.set(key, []);
+    map.get(key).push(m);
+  }
+  return map;
+});
+</script>
+
+<template>
+  <div class="overflow-y-auto py-2">
+    <div class="px-3 py-1 flex items-center justify-between">
+      <p class="text-xs font-semibold text-(--ui-text-muted) uppercase tracking-wider">
+        Members
+      </p>
+      <UBadge
+        :label="members.length"
+        color="success"
+        variant="subtle"
+        size="xs"
+      />
+    </div>
+
+    <div
+      v-if="members.length === 0"
+      class="px-4 py-10 text-center"
+    >
+      <UIcon
+        name="i-lucide-users"
+        class="size-8 text-(--ui-text-dimmed) mx-auto mb-2"
+      />
+      <p class="text-xs text-(--ui-text-dimmed)">
+        No users online
+      </p>
+    </div>
+
+    <template
+      v-for="[docId, users] in grouped"
+      :key="docId ?? '__root__'"
+    >
+      <p
+        v-if="docId"
+        class="px-3 pt-2 pb-1 text-[10px] font-semibold text-(--ui-text-dimmed) uppercase tracking-wide truncate"
+      >
+        {{ docLabel(docId) }}
+      </p>
+
+      <div
+        v-for="user in users"
+        :key="user.id"
+        class="group flex items-center gap-2.5 px-3 py-1.5 mx-1 rounded cursor-pointer hover:bg-(--ui-bg-elevated) transition-colors"
+        @click="emit('start-dm', user)"
+      >
+        <UChip
+          :color="user.isAgent ? 'info' : 'success'"
+          size="xs"
+          inset
+        >
+          <UAvatar
+            :alt="user.name"
+            size="xs"
+            :style="user.avatarStyle"
+          />
+        </UChip>
+        <div class="flex-1 min-w-0">
+          <span class="text-sm text-(--ui-text) truncate block">{{ user.name }}</span>
+          <span
+            v-if="user.isAgent && user.status"
+            class="text-[10px] text-(--ui-text-dimmed) truncate block"
+          >
+            {{ user.status }}
+          </span>
+        </div>
+        <UButton
+          icon="i-lucide-message-circle"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          class="opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+          @click.stop="emit('start-dm', user)"
+        />
+      </div>
+    </template>
+  </div>
+</template>