@ozdao/martyrs 0.2.585 → 0.2.586

package/src/modules/core/views/components/elements/OnlineIndicator.vue

@@ -0,0 +1,115 @@
+<template>
+  <Tooltip :text="isOnline ? 'Online' : (lastSeenAt ? formatLastSeen(lastSeenAt) : 'Offline')">
+    <div
+      class="i-medium online-indicator"
+      :class="{ 'is-online': isOnline }"
+    />
+  </Tooltip>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import Tooltip from '@martyrs/src/components/Tooltip/Tooltip.vue';
+import wsManager from '@martyrs/src/modules/core/views/classes/ws.manager.js';
+
+const props = defineProps({
+  userId: {
+    type: String,
+    required: true,
+  },
+});
+
+const isOnline = ref(false);
+const lastSeenAt = ref(null);
+let pollInterval = null;
+
+async function fetchStatus() {
+  if (!props.userId) return;
+  // Ждем подключения если еще не подключен
+  if (!wsManager.isConnected) {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    if (!wsManager.isConnected) return;
+  }
+  try {
+    const result = await wsManager.rpc('core', 'getOnlineStatus', { userId: props.userId });
+    console.log('[OnlineIndicator] status:', result);
+    isOnline.value = result.isOnline;
+    lastSeenAt.value = result.lastSeenAt;
+  } catch (err) {
+    console.error('Failed to fetch online status:', err);
+  }
+}
+
+function formatLastSeen(date) {
+  if (!date) return '';
+  const d = new Date(date);
+  const now = new Date();
+  const diff = now - d;
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+
+  if (minutes < 1) return 'Just now';
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  if (days < 7) return `${days}d ago`;
+  return d.toLocaleDateString();
+}
+
+onMounted(() => {
+  fetchStatus();
+  pollInterval = setInterval(fetchStatus, 60000);
+});
+
+onUnmounted(() => {
+  if (pollInterval) clearInterval(pollInterval);
+});
+
+watch(() => props.userId, () => {
+  fetchStatus();
+});
+</script>
+
+<style lang="scss">
+.online-indicator {
+  position: relative;
+  border-radius: 50%;
+  background: rgb(var(--grey));
+  border: 3px solid rgb(var(--light));
+  flex-shrink: 0;
+
+  &.is-online {
+    background: rgb(var(--green));
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100%;
+      height: 100%;
+      background: inherit;
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+      animation: indicator-pulse 2s infinite ease-out;
+    }
+
+    &::after {
+      animation-delay: 1s;
+    }
+  }
+
+}
+
+@keyframes indicator-pulse {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1.8);
+    opacity: 0;
+  }
+}
+</style>

package/src/modules/core/views/components/layouts/App.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup>
-  import { computed, ref, onMounted, defineAsyncComponent, onBeforeMount } from 'vue'
+  import { computed, ref, onMounted, onBeforeMount } from 'vue'
   import { Preferences } from '@capacitor/preferences';
   import { Keyboard } from '@capacitor/keyboard';
 
@@ -22,7 +22,6 @@
   import { useRoute } from 'vue-router'
 
   import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js'
-  import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
 
   const store = useStore()
 
@@ -134,6 +133,7 @@
   onMounted(() => {
     // Слушаем изменения системной темы
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    
     mediaQuery.addEventListener('change', (e) => {
       // При изменении системной темы, если режим 'system' - обновляем CSS
       if (store.core.state.theme.mode === 'system') {