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

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

src/views/base/appNotifications/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="app-notifications-page-root">
+    <DesktopAppNotificationsView v-show="isDesktop" />
+    <MobileAppNotificationsView v-show="!isDesktop" />
+
+    <BasicActionSheet
+      v-model:show="detailVisible"
+      :title="selectedItem?.title || 'جزئیات اعلان'"
+      width="32rem"
+      :show-button="true"
+      :show-cancel="false"
+      :show-ok="true"
+      ok-text="بستن"
+      @ok="closeDetail"
+      @close="closeDetail"
+      @cancel="closeDetail"
+    >
+      <div v-if="selectedItem" class="app-notif-detail">
+        <div class="app-notif-detail__meta">
+          <span
+            class="app-notif-detail__badge"
+            :class="`app-notif-detail__badge--${selectedItem.severity}`"
+          >
+            {{ severityLabel(selectedItem.severity) }}
+          </span>
+        </div>
+        <p class="app-notif-detail__body">{{ selectedItem.body }}</p>
+      </div>
+    </BasicActionSheet>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { useAppNotificationsPage } from './composables/useAppNotificationsPage'
+import { severityLabel } from './composables/notificationDisplay'
+import DesktopAppNotificationsView from './desktop/DesktopAppNotificationsView.vue'
+import MobileAppNotificationsView from './mobile/MobileAppNotificationsView.vue'
+
+const isDesktop = useDesktopBreakpoint()
+const { detailVisible, selectedItem, closeDetail } = useAppNotificationsPage()
+</script>
+
+<style scoped>
+.app-notifications-page-root {
+  min-height: 100%;
+  height: 100%;
+}
+.app-notif-detail__meta {
+  @apply mb-3 flex items-center;
+}
+.app-notif-detail__badge {
+  @apply rounded-md px-2 py-0.5 text-xs font-bold;
+}
+.app-notif-detail__badge--info {
+  @apply bg-blue-50 text-blue-700;
+}
+.app-notif-detail__badge--success {
+  @apply bg-green-50 text-green-700;
+}
+.app-notif-detail__badge--warning {
+  @apply bg-orange-50 text-orange-700;
+}
+.app-notif-detail__badge--danger {
+  @apply bg-red-50 text-red-700;
+}
+.app-notif-detail__body {
+  @apply m-0 whitespace-pre-wrap text-sm leading-7 text-gray-700;
+  max-height: min(60vh, 28rem);
+  overflow-y: auto;
+}
+</style>