Port modular app notifications, pargar date display, and closed-store product UX.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/views/base/home/components/AppHeader.vue

@@ -10,6 +10,20 @@
       </div>
 
       <div class="flex items-center gap-2">
+        <button
+          v-if="notificationEnabled"
+          type="button"
+          class="mhome-header-btn mhome-header-btn--notify"
+          aria-label="اعلان"
+          @click.stop="goNotifications"
+        >
+          <span class="mhome-header-btn__icon-wrap">
+            <Icon icon="vuesax-linear:notification-bing" size="18" />
+            <span v-if="unreadCount > 0" class="mhome-header-btn__badge">
+              {{ unreadCount > 99 ? '99+' : unreadCount }}
+            </span>
+          </span>
+        </button>
         <button
           type="button"
           class="mhome-header-btn"
@@ -36,12 +50,27 @@ import { useRoute } from 'vue-router'
 import router from '@/router'
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
 import { getProjectMobileNavLogo } from '@/utils/config'
+import { useAppNotificationBadge } from '@/composables/useAppNotificationBadge'
+import { canRequestBrowserNotification, requestBrowserNotificationPermission } from '@/utils/browserNotification'
 
 const headerRef = ref<HTMLElement | null>(null)
 const isHeaderScrolled = ref(false)
 const route = useRoute()
 
 const projectLogo = computed(() => getProjectMobileNavLogo())
+const {
+  enabled: notificationEnabled,
+  unreadCount,
+  clearUnreadLocally,
+} = useAppNotificationBadge()
+
+async function goNotifications() {
+  clearUnreadLocally()
+  if (canRequestBrowserNotification()) {
+    await requestBrowserNotificationPermission()
+  }
+  void router.push({ name: 'appNotifications' })
+}
 
 let intersectionObserver: IntersectionObserver | null = null
 let scrollTarget: HTMLElement | Window | null = null
@@ -177,7 +206,7 @@ defineEmits<{
 .app-header {
   z-index: 1999;
   box-sizing: border-box;
-  padding-top: calc(0.5rem + var(--app-safe-top, env(safe-area-inset-top, 0px)));
+  padding-top: calc(0.5rem + var(--app-safe-top, 0px));
   background-color: transparent;
 }
 
@@ -209,4 +238,30 @@ defineEmits<{
   border-color: #fecaca;
   background: #fef2f2;
 }
+
+.mhome-header-btn--notify {
+  color: #0a1b37;
+  border-color: #e5e7eb;
+  background: #fff;
+}
+
+.mhome-header-btn__icon-wrap {
+  @apply relative inline-flex;
+}
+
+.mhome-header-btn__badge {
+  position: absolute;
+  top: -8px;
+  left: -8px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: #dc2626;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+}
 </style>