Add web app install button and step-by-step PWA guide.

src/components/InstallButton.vue

@@ -0,0 +1,42 @@
+<template>
+  <div v-if="showInstallEntry" class="mt-2 w-full">
+    <BasicButton class="!w-full" @click="onClick">
+      {{ canNativeInstall ? 'نصب وب اپلیکیشن' : 'آموزش نصب' }}
+    </BasicButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import { usePwaInstall } from '@/composables/usePwaInstall'
+import { PWA_MANIFEST_READY_EVENT } from '@/modules/pwa/manifest'
+import {
+  hasNativeInstallPrompt,
+  initPwaInstallPromptListener,
+} from '@/modules/pwa/pwaInstall'
+
+const { tryInstallOrOpenGuide, showInstallEntry } = usePwaInstall()
+const canNativeInstall = ref(false)
+
+function refreshCanInstall() {
+  canNativeInstall.value = hasNativeInstallPrompt()
+}
+
+async function onClick() {
+  await tryInstallOrOpenGuide()
+  refreshCanInstall()
+}
+
+onMounted(() => {
+  initPwaInstallPromptListener()
+  refreshCanInstall()
+  window.addEventListener(PWA_MANIFEST_READY_EVENT, refreshCanInstall)
+  window.addEventListener('appinstalled', refreshCanInstall)
+})
+
+onUnmounted(() => {
+  window.removeEventListener(PWA_MANIFEST_READY_EVENT, refreshCanInstall)
+  window.removeEventListener('appinstalled', refreshCanInstall)
+})
+</script>

src/components/pwa/PwaInstallGuideModal.vue

@@ -0,0 +1,376 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import {
+  PWA_GUIDE_STEP_LABELS,
+  PWA_INSTALL_GUIDE,
+  type PwaPlatform,
+} from '@/modules/pwa/pwaInstallGuideSteps'
+import { getDefaultPwaPlatform } from '@/modules/pwa/pwaInstall'
+import PwaInstallStepIllustration from '@/components/pwa/PwaInstallStepIllustration.vue'
+
+const props = defineProps<{
+  open: boolean
+  platform?: PwaPlatform
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  complete: []
+  close: []
+}>()
+
+const activePlatform = ref<PwaPlatform>(props.platform ?? getDefaultPwaPlatform())
+const stepIndex = ref(0)
+
+const guide = computed(() => PWA_INSTALL_GUIDE[activePlatform.value])
+const currentStep = computed(() => guide.value.steps[stepIndex.value])
+const totalSteps = computed(() => guide.value.steps.length)
+const isFirstStep = computed(() => stepIndex.value === 0)
+const isLastStep = computed(() => stepIndex.value === totalSteps.value - 1)
+const stepLabel = computed(() => PWA_GUIDE_STEP_LABELS[stepIndex.value] ?? String(stepIndex.value + 1))
+
+watch(
+  () => props.open,
+  (visible) => {
+    if (!visible) return
+    activePlatform.value = props.platform ?? getDefaultPwaPlatform()
+    stepIndex.value = 0
+  },
+)
+
+watch(
+  () => props.platform,
+  (value) => {
+    if (value) activePlatform.value = value
+  },
+)
+
+function close() {
+  emit('update:open', false)
+  emit('close')
+}
+
+function selectPlatform(next: PwaPlatform) {
+  if (activePlatform.value === next) return
+  activePlatform.value = next
+  stepIndex.value = 0
+}
+
+function goNext() {
+  if (isLastStep.value) {
+    emit('complete')
+    close()
+    return
+  }
+
+  stepIndex.value += 1
+}
+
+function goPrev() {
+  if (isFirstStep.value) return
+  stepIndex.value -= 1
+}
+
+function completeGuide() {
+  emit('complete')
+  close()
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="pwa-install-guide"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="pwa-install-guide-title"
+      @click.self="close"
+    >
+      <div class="pwa-install-guide__card">
+        <div class="pwa-install-guide__tabs">
+          <button
+            type="button"
+            class="pwa-install-guide__tab"
+            :class="{ 'pwa-install-guide__tab--active': activePlatform === 'ios' }"
+            @click="selectPlatform('ios')"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <rect x="7" y="2" width="10" height="20" rx="2.5" stroke="currentColor" stroke-width="1.5" />
+              <circle cx="12" cy="18.5" r="1" fill="currentColor" />
+            </svg>
+            <span>آیفون</span>
+          </button>
+          <button
+            type="button"
+            class="pwa-install-guide__tab"
+            :class="{ 'pwa-install-guide__tab--active': activePlatform === 'android' }"
+            @click="selectPlatform('android')"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <path d="M12 4v12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+              <path d="M8.5 8.5 12 5l3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M6 16h12v3a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-3Z" stroke="currentColor" stroke-width="1.5" />
+            </svg>
+            <span>اندروید</span>
+          </button>
+        </div>
+
+        <div class="pwa-install-guide__header">
+          <span class="pwa-install-guide__progress">
+            مرحله {{ stepLabel }} از {{ PWA_GUIDE_STEP_LABELS.length }}
+          </span>
+          <h2 id="pwa-install-guide-title" class="pwa-install-guide__title">
+            {{ guide.title }}
+          </h2>
+        </div>
+
+        <div class="pwa-install-guide__content">
+          <span class="pwa-install-guide__badge">{{ stepLabel }}</span>
+
+          <PwaInstallStepIllustration :type="currentStep.illustration" />
+
+          <p class="pwa-install-guide__text">{{ currentStep.text }}</p>
+          <p v-if="currentStep.hint" class="pwa-install-guide__hint">{{ currentStep.hint }}</p>
+        </div>
+
+        <div class="pwa-install-guide__nav">
+          <template v-if="isLastStep">
+            <BasicButton class="pwa-install-guide__primary" type="primary" @click="completeGuide">
+              متوجه شدم
+            </BasicButton>
+          </template>
+          <template v-else>
+            <button
+              type="button"
+              class="pwa-install-guide__nav-btn"
+              :disabled="isFirstStep"
+              aria-label="مرحله قبل"
+              @click="goPrev"
+            >
+              ‹
+            </button>
+
+            <div class="pwa-install-guide__dots" aria-hidden="true">
+              <span
+                v-for="(_, index) in totalSteps"
+                :key="index"
+                class="pwa-install-guide__dot"
+                :class="{ 'pwa-install-guide__dot--active': index === stepIndex }"
+              />
+            </div>
+
+            <button
+              type="button"
+              class="pwa-install-guide__nav-btn"
+              aria-label="مرحله بعد"
+              @click="goNext"
+            >
+              ›
+            </button>
+          </template>
+        </div>
+
+        <template v-if="!isLastStep">
+          <BasicButton class="pwa-install-guide__primary" type="primary" @click="goNext">
+            بعدی
+            <span class="pwa-install-guide__primary-chevron">›</span>
+          </BasicButton>
+
+          <button type="button" class="pwa-install-guide__close" @click="close">
+            بستن
+          </button>
+        </template>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped lang="less">
+.pwa-install-guide {
+  position: fixed;
+  inset: 0;
+  /* بالاتر از نوار اعتبار (۱۰۰۰۰۰۰) و FAB پشتیبانی */
+  z-index: 1000002;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(15, 23, 42, 0.45);
+}
+
+.pwa-install-guide__card {
+  width: min(100%, 360px);
+  background: #fff;
+  border-radius: 24px;
+  padding: 14px 16px 18px;
+  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
+}
+
+.pwa-install-guide__tabs {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 14px;
+  background: #f1f5f9;
+}
+
+.pwa-install-guide__tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: none;
+  border-radius: 10px;
+  padding: 10px 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #64748b;
+  background: transparent;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+
+  &--active {
+    color: #0f172a;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
+  }
+}
+
+.pwa-install-guide__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 14px 2px 10px;
+}
+
+.pwa-install-guide__progress {
+  font-size: 12px;
+  color: #94a3b8;
+  white-space: nowrap;
+}
+
+.pwa-install-guide__title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+  color: #0f172a;
+  text-align: right;
+}
+
+.pwa-install-guide__content {
+  position: relative;
+  border: 1px solid #e2e8f0;
+  border-radius: 18px;
+  background: #f8fafc;
+  padding: 14px 14px 16px;
+  min-height: 280px;
+}
+
+.pwa-install-guide__badge {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  background: #2563eb;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pwa-install-guide__text {
+  margin: 10px 0 0;
+  font-size: 13px;
+  line-height: 1.8;
+  color: #334155;
+  text-align: center;
+}
+
+.pwa-install-guide__hint {
+  margin: 8px 0 0;
+  font-size: 11px;
+  line-height: 1.7;
+  color: #64748b;
+  text-align: center;
+}
+
+.pwa-install-guide__nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin: 14px 0 12px;
+
+  .pwa-install-guide__primary {
+    width: 100%;
+    margin: 0;
+  }
+}
+
+.pwa-install-guide__nav-btn {
+  width: 34px;
+  height: 34px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: #fff;
+  color: #334155;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+  }
+}
+
+.pwa-install-guide__dots {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.pwa-install-guide__dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: #cbd5e1;
+  transition: width 0.15s ease, background 0.15s ease;
+
+  &--active {
+    width: 22px;
+    background: #2563eb;
+  }
+}
+
+.pwa-install-guide__primary {
+  width: 100%;
+  height: 44px;
+  border-radius: 14px !important;
+  font-weight: 700;
+}
+
+.pwa-install-guide__primary-chevron {
+  margin-right: 4px;
+  font-size: 16px;
+}
+
+.pwa-install-guide__close {
+  display: block;
+  width: 100%;
+  margin-top: 10px;
+  border: none;
+  background: transparent;
+  color: #64748b;
+  font-size: 13px;
+  cursor: pointer;
+}
+</style>

src/components/pwa/PwaInstallStepIllustration.vue

@@ -0,0 +1,413 @@
+<script setup lang="ts">
+import type { PwaGuideIllustration } from '@/modules/pwa/pwaInstallGuideSteps'
+import shareAppleIcon from '@/assets/img/share-apple.png'
+import addToHomeScreenIcon from '@/assets/img/Add-to-homeScreen.png'
+
+defineProps<{
+  type: PwaGuideIllustration
+}>()
+</script>
+
+<template>
+  <div
+    class="pwa-step-illustration"
+    :class="{
+      'pwa-step-illustration--android-menu': type === 'android-menu',
+      'pwa-step-illustration--ios-safari': type === 'ios-safari',
+    }"
+  >
+    <div
+      class="pwa-step-illustration__phone"
+      :class="{
+        'pwa-step-illustration__phone--android-menu': type === 'android-menu',
+        'pwa-step-illustration__phone--ios-safari': type === 'ios-safari',
+      }"
+    >
+      <div
+        class="pwa-step-illustration__screen"
+        :class="{
+          'pwa-step-illustration__screen--android-menu': type === 'android-menu',
+          'pwa-step-illustration__screen--ios-safari': type === 'ios-safari',
+        }"
+      >
+        <template v-if="type === 'android-chrome'">
+          <div class="pwa-step-illustration__browser-bar">
+            <span class="pwa-step-illustration__dot pwa-step-illustration__dot--red" />
+            <span class="pwa-step-illustration__dot pwa-step-illustration__dot--yellow" />
+            <span class="pwa-step-illustration__dot pwa-step-illustration__dot--green" />
+          </div>
+          <div class="pwa-step-illustration__chrome-body" />
+          <div class="pwa-step-illustration__chrome-label">باز در Chrome</div>
+        </template>
+
+        <template v-else-if="type === 'android-menu'">
+          <div class="android-menu-scene">
+            <div class="android-menu-scene__toolbar">
+              <div class="android-menu-scene__url-bar" />
+              <div class="android-menu-scene__menu-target" aria-hidden="true">
+                <span class="android-menu-scene__menu-dots">⋮</span>
+              </div>
+            </div>
+
+            <div class="android-menu-scene__viewport">
+              <div class="android-menu-scene__dropdown">
+                <div class="android-menu-scene__dropdown-line" />
+                <div class="android-menu-scene__dropdown-line android-menu-scene__dropdown-line--short" />
+                <div class="android-menu-scene__dropdown-install">
+                  Install app
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <template v-else-if="type === 'android-install'">
+          <div class="pwa-step-illustration__install-btn">Install</div>
+        </template>
+
+        <template v-else-if="type === 'android-confirm'">
+          <div class="pwa-step-illustration__app-icon" />
+          <div class="pwa-step-illustration__home-label">روی صفحه اصلی</div>
+        </template>
+
+        <template v-else-if="type === 'ios-safari'">
+          <div class="ios-safari-scene">
+            <div class="ios-safari-scene__toolbar">
+              <span class="ios-safari-scene__toolbar-label">Safari</span>
+            </div>
+
+            <div class="ios-safari-scene__viewport">
+              <div class="ios-safari-scene__placeholder" />
+            </div>
+
+            <div class="ios-safari-scene__caption">باز در Safari</div>
+          </div>
+        </template>
+
+        <template v-else-if="type === 'ios-share'">
+          <div class="pwa-step-illustration__share-wrap">
+            <img :src="shareAppleIcon" alt="" class="pwa-step-illustration__share-icon" />
+          </div>
+        </template>
+
+        <template v-else-if="type === 'ios-add-home'">
+          <div class="pwa-step-illustration__sheet">
+            <div class="pwa-step-illustration__sheet-item">Share</div>
+            <div class="pwa-step-illustration__sheet-item pwa-step-illustration__sheet-item--active">
+              <img :src="addToHomeScreenIcon" alt="" class="pwa-step-illustration__sheet-icon" />
+              Add to Home Screen
+            </div>
+          </div>
+        </template>
+
+        <template v-else-if="type === 'ios-confirm'">
+          <div class="pwa-step-illustration__app-icon" />
+          <div class="pwa-step-illustration__home-label">روی صفحه اصلی</div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.pwa-step-illustration {
+  display: flex;
+  justify-content: center;
+  padding: 8px 0 4px;
+}
+
+.pwa-step-illustration__phone {
+  width: 148px;
+  height: 220px;
+  border: 2px solid #cbd5e1;
+  border-radius: 22px;
+  padding: 10px 8px;
+  background: #fff;
+}
+
+.pwa-step-illustration__screen {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  background: #f8fafc;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.pwa-step-illustration__browser-bar {
+  position: absolute;
+  top: 10px;
+  left: 12px;
+  display: flex;
+  gap: 4px;
+}
+
+.pwa-step-illustration__dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+
+  &--red { background: #ef4444; }
+  &--yellow { background: #f59e0b; }
+  &--green { background: #22c55e; }
+}
+
+.pwa-step-illustration__chrome-body {
+  width: 78%;
+  height: 42%;
+  border-radius: 8px;
+  background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
+  margin-top: 18px;
+}
+
+.pwa-step-illustration__chrome-label,
+.pwa-step-illustration__home-label {
+  font-size: 10px;
+  color: #64748b;
+}
+
+.pwa-step-illustration--android-menu,
+.pwa-step-illustration--ios-safari {
+  padding: 12px 0 0;
+}
+
+.pwa-step-illustration__phone--android-menu,
+.pwa-step-illustration__phone--ios-safari {
+  width: 132px;
+  height: 208px;
+  padding: 0;
+  border-width: 1.5px;
+  border-color: #cbd5e1;
+  border-radius: 20px;
+  box-shadow: none;
+}
+
+.pwa-step-illustration__screen--android-menu,
+.pwa-step-illustration__screen--ios-safari {
+  border: none;
+  border-radius: 18px;
+  background: #fff;
+  display: block;
+  overflow: hidden;
+}
+
+.ios-safari-scene {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.ios-safari-scene__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 28px;
+  padding: 8px 10px 6px;
+  border-bottom: 1px solid #eef2f7;
+  background: #fff;
+}
+
+.ios-safari-scene__toolbar-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 72px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: #eef2f7;
+  color: #64748b;
+  font-size: 9px;
+  font-weight: 600;
+}
+
+.ios-safari-scene__viewport {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 14px 12px 8px;
+  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
+}
+
+.ios-safari-scene__placeholder {
+  width: 78%;
+  height: 58%;
+  border-radius: 12px;
+  background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
+  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
+}
+
+.ios-safari-scene__caption {
+  padding: 0 10px 10px;
+  text-align: center;
+  font-size: 9px;
+  color: #64748b;
+  background: #fff;
+}
+
+.android-menu-scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.android-menu-scene__toolbar {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  padding: 10px 8px 8px;
+  border-bottom: 1px solid #eef2f7;
+}
+
+.android-menu-scene__url-bar {
+  flex: 1;
+  height: 8px;
+  border-radius: 999px;
+  background: #e8edf5;
+}
+
+.android-menu-scene__menu-target {
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  border: 1.5px dashed #2563eb;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(37, 99, 235, 0.04);
+}
+
+.android-menu-scene__menu-dots {
+  font-size: 14px;
+  line-height: 1;
+  font-weight: 700;
+  color: #334155;
+  transform: translateY(-1px);
+}
+
+.android-menu-scene__viewport {
+  position: relative;
+  height: calc(100% - 41px);
+  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
+}
+
+.android-menu-scene__dropdown {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+  width: 78px;
+  padding: 8px 8px 10px;
+  border-radius: 10px;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
+}
+
+.android-menu-scene__dropdown-line {
+  height: 4px;
+  border-radius: 999px;
+  background: #e2e8f0;
+  margin-bottom: 6px;
+
+  &--short {
+    width: 72%;
+    margin-bottom: 8px;
+  }
+}
+
+.android-menu-scene__dropdown-install {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 22px;
+  padding: 4px 6px;
+  border-radius: 6px;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  color: #2563eb;
+  font-size: 8px;
+  font-weight: 700;
+  line-height: 1.2;
+  text-align: center;
+}
+
+.pwa-step-illustration__install-btn {
+  font-size: 11px;
+  font-weight: 600;
+  color: #2563eb;
+  border: 1px solid #2563eb;
+  border-radius: 8px;
+  padding: 6px 14px;
+  background: #eff6ff;
+}
+
+.pwa-step-illustration__app-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+}
+
+.pwa-step-illustration__share-wrap {
+  position: absolute;
+  bottom: 14px;
+  width: 34px;
+  height: 34px;
+  border: 2px dashed #2563eb;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+}
+
+.pwa-step-illustration__share-icon {
+  width: 18px;
+  height: 18px;
+  object-fit: contain;
+}
+
+.pwa-step-illustration__sheet {
+  width: 88%;
+  border-radius: 10px;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  overflow: hidden;
+}
+
+.pwa-step-illustration__sheet-item {
+  padding: 8px 10px;
+  font-size: 9px;
+  color: #64748b;
+  border-bottom: 1px solid #f1f5f9;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  &--active {
+    color: #2563eb;
+    border: 1px solid #2563eb;
+    border-radius: 8px;
+    margin: 6px;
+    font-weight: 600;
+  }
+}
+
+.pwa-step-illustration__sheet-icon {
+  width: 14px;
+  height: 14px;
+  object-fit: contain;
+}
+</style>