Initialize the user app and load home banners from the API.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-09 17:08:45 +03:30
commit a7f9c66514
190 changed files with 36160 additions and 0 deletions
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import IconChevronBack from '@/components/icons/IconChevronBack.vue'
+import AuthThemeToggle from '@/components/ui/AuthThemeToggle.vue'
+
+defineProps<{
+  title: string
+  subtitle?: string
+  showBack?: boolean
+  centered?: boolean
+}>()
+
+defineEmits<{
+  back: []
+}>()
+</script>
+
+<template>
+  <template v-if="centered">
+    <header class="page-nav">
+      <button
+        v-if="showBack"
+        type="button"
+        class="nav-btn"
+        aria-label="بازگشت"
+        @click="$emit('back')"
+      >
+        <IconChevronBack :size="20" />
+      </button>
+      <span v-else class="nav-btn" />
+      <h1 class="page-nav__title">{{ title }}</h1>
+      <div class="page-nav__trailing">
+        <slot name="trailing" />
+        <AuthThemeToggle variant="inline" class="mobile-only" />
+      </div>
+    </header>
+    <p v-if="subtitle" class="page-nav__subtitle">{{ subtitle }}</p>
+  </template>
+
+  <header v-else class="page-header">
+    <button
+      v-if="showBack"
+      type="button"
+      class="back-btn"
+      aria-label="بازگشت"
+      @click="$emit('back')"
+    >
+      <IconChevronBack :size="20" />
+    </button>
+    <div class="header-text">
+      <h1 class="page-title">{{ title }}</h1>
+      <p v-if="subtitle" class="page-subtitle">{{ subtitle }}</p>
+    </div>
+    <div class="page-header__trailing">
+      <slot name="trailing" />
+      <AuthThemeToggle variant="inline" class="mobile-only" />
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.page-nav {
+  display: grid;
+  grid-template-columns: 40px 1fr auto;
+  align-items: center;
+  margin-bottom: 8px;
+  padding-inline: var(--page-padding);
+  padding-top: 8px;
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+
+.page-nav__title {
+  margin: 0;
+  font-size: 1.0625rem;
+  font-weight: 700;
+  text-align: center;
+  color: var(--color-text);
+}
+
+.page-nav__subtitle {
+  margin: 0 0 16px;
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  text-align: center;
+  line-height: 1.5;
+}
+
+.page-nav__trailing {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0;
+  min-height: 40px;
+}
+
+.nav-btn {
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.page-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding-inline: var(--page-padding);
+  padding-top: 8px;
+  color: var(--color-text);
+}
+
+.page-header__trailing {
+  margin-inline-start: auto;
+  display: flex;
+  align-items: center;
+  gap: 0;
+  color: inherit;
+}
+
+.back-btn {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text);
+  transition:
+    border-color 0.15s,
+    background 0.15s;
+}
+
+.back-btn:hover {
+  border-color: var(--color-border);
+  background: var(--color-summary-bg);
+}
+
+.header-text {
+  flex: 1;
+  min-width: 0;
+  padding-top: 2px;
+}
+
+.page-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1.35;
+  margin: 0;
+  color: var(--color-text);
+}
+
+.page-subtitle {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  margin: 4px 0 0;
+  line-height: 1.5;
+}
+</style>