@ozdao/martyrs 0.2.581 → 0.2.583

package/src/modules/notifications/components/sections/NotificationPreferences.vue

@@ -1,51 +1,49 @@
 <template>
-  <div class="notification-preferences">
-    <h2 class="mn-b-small">Notification Preferences</h2>
-    <p class="description">Choose how you want to receive notifications</p>
-    
-    <div v-if="loading" class="preferences-loading">
-      <div class="loading-spinner">🔄</div>
-      <p>Loading preferences...</p>
+  <div>
+    <p class="t-transp mn-b-small">Choose how you want to receive notifications</p>
+
+    <div v-if="loading" class="pd-large t-center t-transp">
+      <Loader />
     </div>
-    
-    <div v-else class="preferences-form">
-      <div 
-        v-for="(enabled, channelType) in preferences" 
-        :key="channelType" 
-        class="preference-item"
+
+    <div v-else class="gap-thin flex-column flex">
+      <div
+        v-for="(enabled, channelType) in preferences"
+        :key="channelType"
+        class="flex flex-v-center flex-between bg-light radius-small pd-small"
       >
-        <div class="preference-info">
-          <div class="preference-icon">{{ getChannelIcon(channelType) }}</div>
-          <div class="preference-details">
-            <h3>{{ getChannelName(channelType) }}</h3>
-            <p>{{ getChannelDescription(channelType) }}</p>
+        <div class="flex w-100 flex-v-center gap-small mn-r-small">
+          <div class="h4">{{ getChannelIcon(channelType) }}</div>
+          <div class="flex-column flex gap-micro">
+            <p class="fw-medium lh-1">{{ getChannelName(channelType) }}</p>
+            <p class="p-small t-transp lh-1">{{ getChannelDescription(channelType) }}</p>
           </div>
         </div>
-        <label class="toggle-switch">
-          <input
-            type="checkbox"
-            :checked="enabled"
-            @change="updatePreference(channelType, $event.target.checked)"
-          >
-          <span class="toggle-slider"></span>
-        </label>
+        <Checkbox
+          mode="switch"
+          :radio="enabled"
+          @update:radio="updatePreference(channelType, $event)"
+          class="flex-shrink-0"
+        />
       </div>
-      
-      <div class="form-actions">
-        <button 
-          class="save-btn" 
-          :disabled="!hasChanges || saving" 
-          @click="savePreferences"
-        >
-          {{ saving ? 'Saving...' : 'Save Changes' }}
-        </button>
-        <button 
-          v-if="hasChanges" 
-          class="cancel-btn" 
-          @click="resetChanges"
+
+      <div class="flex flex-end gap-small mn-t-thin">
+        <Button
+          v-if="hasChanges"
+          :submit="resetChanges"
+          :showLoader="false"
+          :showSucces="false"
+          class="bg-white t-dark"
         >
           Cancel
-        </button>
+        </Button>
+        <Button
+          :submit="savePreferences"
+          :validation="!hasChanges || saving"
+          class="bg-main t-white"
+        >
+          {{ saving ? 'Saving...' : 'Save Changes' }}
+        </Button>
       </div>
     </div>
   </div>
@@ -53,6 +51,9 @@
 
 <script setup>
 import { ref, reactive, computed, onMounted, inject } from 'vue';
+import Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import Loader from '@martyrs/src/components/Loader/Loader.vue';
 
 // Get notification preferences functionality
 const { 
@@ -154,143 +155,3 @@ onMounted(async () => {
 });
 </script>
 
-<style scoped>
-
-.description {
-  color: #666;
-  margin-bottom: 24px;
-}
-
-.preferences-loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 48px 0;
-}
-
-.loading-spinner {
-  font-size: 2rem;
-  margin-bottom: 16px;
-  animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.preference-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  border-bottom: 1px solid #eee;
-}
-
-.preference-item:last-child {
-  border-bottom: none;
-}
-
-.preference-info {
-  display: flex;
-  align-items: center;
-  flex: 1;
-}
-
-.preference-icon {
-  font-size: 1.5rem;
-  margin-right: 16px;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.preference-details h3 {
-  margin: 0 0 4px 0;
-  font-size: 1rem;
-}
-
-.preference-details p {
-  margin: 0;
-  color: #666;
-  font-size: 0.875rem;
-}
-
-/* Toggle switch styles */
-.toggle-switch {
-  position: relative;
-  display: inline-block;
-  width: 50px;
-  height: 24px;
-}
-
-.toggle-switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.toggle-slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  transition: .4s;
-  border-radius: 24px;
-}
-
-.toggle-slider:before {
-  position: absolute;
-  content: "";
-  height: 16px;
-  width: 16px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  transition: .4s;
-  border-radius: 50%;
-}
-
-input:checked + .toggle-slider {
-  background-color: #2196F3;
-}
-
-input:checked + .toggle-slider:before {
-  transform: translateX(26px);
-}
-
-.form-actions {
-  margin-top: 24px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 16px;
-}
-
-.save-btn, .cancel-btn {
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.save-btn {
-  background-color: #2196F3;
-  border: none;
-  color: white;
-}
-
-.save-btn:disabled {
-  background-color: #ccc;
-  cursor: not-allowed;
-}
-
-.cancel-btn {
-  background-color: white;
-  border: 1px solid #ccc;
-}
-</style>

package/src/modules/notifications/components/sections/NotificationsList.vue

@@ -1,111 +1,52 @@
 <template>
-  <div class="notifications-list-container">
-    <div v-if="!MOBILE_APP" class="notifications-header">
-      <h2>Notifications</h2>
-   <!--    <div class="notifications-controls">
-        <div class="notifications-filter">
-          <label for="filter-type">Filter: </label>
-          <select id="filter-type" v-model="filterType">
-            <option value="all">All</option>
-            <option value="unread">Unread</option>
-            <option value="read">Read</option>
-            <option value="info">Info</option>
-            <option value="success">Success</option>
-            <option value="warning">Warning</option>
-            <option value="error">Error</option>
-          </select>
-        </div>
-        <button 
-          v-if="unreadCount > 0" 
-          class="mark-all-read-btn"
-          @click="markAllAsRead"
-        >
-          Mark all as read
-        </button>
-      </div> -->
-    </div>
-    
-    <div v-if="loading" class="notifications-loading">
-      <div class="loading-spinner">🔄</div>
-      <p>Loading notifications...</p>
-    </div>
-    
-    <div v-else-if="filteredNotifications.length === 0" class="notifications-empty">
-      <p>{{ emptyMessage }}</p>
-    </div>
-    
-    <div v-else class="notifications-items">
-      <notification-item 
-        v-for="notification in filteredNotifications" 
-        :key="notification._id" 
-        :notification="notification"
-        @click="handleNotificationClick(notification)"
-      />
-    </div>
-    
-    <div v-if="!loading && notifications.length > 0" class="notifications-footer">
-      <button v-if="lastSync" class="refresh-btn" @click="refreshNotifications">
-        🔄 Last updated: {{ formatTime(lastSync) }}
-      </button>
-    </div>
-  </div>
+  <Feed
+    :states="{
+      empty: {
+        title: 'No Notifications',
+        description: 'You have no notifications yet'
+      }
+    }"
+    :store="{
+      read: fetchNotifications
+    }"
+    :options="{
+      limit: 20
+    }"
+    :skeleton="{
+      structure: [
+        { block: 'text', size: 'small' },
+        { block: 'text', size: 'large' }
+      ]
+    }"
+    v-slot="{ items }"
+    class="gap-thin cols-1"
+  >
+    <NotificationItem
+      v-for="notification in items"
+      :key="notification._id"
+      :notification="notification"
+      @click="handleNotificationClick(notification)"
+    />
+  </Feed>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, inject } from 'vue';
-import { useRouter } from 'vue-router';
+import { inject } from 'vue';
+import Feed from '@martyrs/src/components/Feed/Feed.vue';
 import NotificationItem from '../blocks/NotificationItem.vue';
 import * as auth from '@martyrs/src/modules/auth/views/store/auth.js';
+import { actions } from '@martyrs/src/modules/notifications/store/notifications.store.js';
 
-// Get router and notification functionality
-const router = useRouter();
-const { 
-  notifications, 
-  unreadCount, 
-  loading, 
-  lastSync,
-  markAllAsRead, 
-  getNotifications,
-  handleNotificationAction
-} = inject('useNotifications')();
+const { handleNotificationAction } = inject('useNotifications')();
 
-// Local state
-const filterType = ref('all');
-
-// Computed properties
-const filteredNotifications = computed(() => {
-  let filtered = [...notifications.value];
-  
-  // Apply filters
-  if (filterType.value === 'unread') {
-    filtered = filtered.filter(n => n.status !== 'read');
-  } else if (filterType.value === 'read') {
-    filtered = filtered.filter(n => n.status === 'read');
-  } else if (filterType.value !== 'all') {
-    // Filter by notification type
-    filtered = filtered.filter(n => n.type === filterType.value);
-  }
-  
-  // Sort by creation date (newest first)
-  return filtered.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
-});
+const fetchNotifications = async (options) => {
+  const userId = auth.state.user._id;
+  if (!userId) return [];
 
-const emptyMessage = computed(() => {
-  if (notifications.value.length === 0) {
-    return 'You have no notifications';
-  }
-  
-  switch (filterType.value) {
-    case 'unread':
-      return 'You have no unread notifications';
-    case 'read':
-      return 'You have no read notifications';
-    default:
-      return `You have no ${filterType.value} notifications`;
-  }
-});
+  const data = await actions.getNotifications(userId);
+  return data || [];
+};
 
-// Methods
 const handleNotificationClick = (notification) => {
   if (notification._id) {
     handleNotificationAction({
@@ -114,125 +55,4 @@ const handleNotificationClick = (notification) => {
     });
   }
 };
-
-const refreshNotifications = () => {
-  const userId = auth.state.user._id;
-  if (userId) {
-    getNotifications(userId);
-  }
-};
-
-// Format relative time without external libraries
-const formatTime = (timestamp) => {
-  if (!timestamp) return '';
-  
-  const now = new Date();
-  const date = new Date(timestamp);
-  const diffSeconds = Math.floor((now - date) / 1000);
-  
-  // Format based on how long ago
-  if (diffSeconds < 60) {
-    return 'Just now';
-  } else if (diffSeconds < 3600) {
-    const minutes = Math.floor(diffSeconds / 60);
-    return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'} ago`;
-  } else if (diffSeconds < 86400) {
-    const hours = Math.floor(diffSeconds / 3600);
-    return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`;
-  } else {
-    // Format date string
-    return date.toLocaleDateString(undefined, {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit'
-    });
-  }
-};
-
-// Lifecycle
-onMounted(() => {
-  const userId = auth.state.user._id;
-  if (userId && notifications.value.length === 0 && !loading.value) {
-    getNotifications(userId);
-  }
-});
 </script>
-
-<style scoped>
-.notifications-list-container {
-  width: 100%;
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.notifications-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.notifications-controls {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.notifications-filter select {
-  padding: 6px 12px;
-  border-radius: 4px;
-  border: 1px solid #ddd;
-}
-
-.mark-all-read-btn {
-  background-color: #2196f3;
-  color: white;
-  border: none;
-  padding: 6px 12px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.notifications-loading,
-.notifications-empty {
-  padding: 40px 0;
-  text-align: center;
-  color: #666;
-}
-
-.loading-spinner {
-  font-size: 2rem;
-  margin-bottom: 10px;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.notifications-items {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.notifications-footer {
-  margin-top: 20px;
-  text-align: center;
-}
-
-.refresh-btn {
-  background: none;
-  border: none;
-  color: #666;
-  cursor: pointer;
-  padding: 6px 12px;
-}
-
-.refresh-btn:hover {
-  color: #2196f3;
-}
-</style>

package/src/modules/notifications/notifications.client.js

@@ -439,29 +439,30 @@ function initializeNotifications(app, store, router, options = {}) {
   const autoInit = !isServer && options.autoInit !== false;
 
   if (autoInit) {
-    // Initialize immediately (supports both authenticated and anonymous users)
-    notificationManager.initialize();
-
-    // Watch for user login/logout using store.core.state.session
+    // Watch for user login/logout using store.core.state.session.userId
+    // immediate: true — сработает сразу после применения initialState (гидратация)
     watch(
-      () => store.core.state.session.token,
-      async (token, oldToken) => {
-        const isAuthenticated = !!token;
-        const wasAuthenticated = !!oldToken;
-
-        if (isAuthenticated && !wasAuthenticated) {
-          // Re-register device for authenticated user
-          console.log('[Notifications] User logged in, re-registering device...');
+      () => store.core.state.session.userId,
+      async (userId, oldUserId) => {
+        console.log('[Notifications] Watch triggered, userId:', userId, 'oldUserId:', oldUserId);
+        if (userId && !oldUserId) {
+          // Пользователь залогинен (либо при гидратации, либо при логине)
+          console.log('[Notifications] User authenticated, initializing WebSocket...', userId);
           await store.notifications.actions.reregisterDeviceAfterLogin();
-          // Reinitialize notifications for authenticated user
           notificationManager.disconnect();
           await notificationManager.initialize();
-        } else if (!isAuthenticated && wasAuthenticated) {
-          // Keep notifications active for anonymous users, just reset user-specific data
+        } else if (!userId && oldUserId) {
+          // Пользователь разлогинился
           console.log('[Notifications] User logged out, resetting notifications...');
+          notificationManager.disconnect();
           store.notifications.mutations.resetNotifications();
+        } else if (!userId && !oldUserId) {
+          // Анонимный пользователь — инициализируем без WebSocket
+          console.log('[Notifications] Anonymous user, initializing without WebSocket...');
+          await notificationManager.initialize();
         }
-      }
+      },
+      { immediate: true }
     );
   }