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

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

src/components/ui/AuthThemeToggle.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { useThemeStore } from '@/stores/theme'
+
+withDefaults(
+  defineProps<{
+    /** floating = auth pages; inline = header / toolbar */
+    variant?: 'floating' | 'inline'
+  }>(),
+  { variant: 'floating' },
+)
+
+const themeStore = useThemeStore()
+const { isDark } = storeToRefs(themeStore)
+
+const themeIcon = computed(() =>
+  isDark.value ? 'vuesax-linear:sun-1' : 'vuesax-linear:moon',
+)
+const themeLabel = computed(() =>
+  isDark.value ? 'تغییر به تم روشن' : 'تغییر به تم تاریک',
+)
+</script>
+
+<template>
+  <button
+    type="button"
+    class="auth-theme-toggle"
+    :class="variant === 'inline' ? 'auth-theme-toggle--inline' : 'auth-theme-toggle--floating'"
+    :aria-label="themeLabel"
+    :title="themeLabel"
+    @click="themeStore.toggleLightDark()"
+  >
+    <BasicIcon :icon="themeIcon" :size="18" :stroke-width="1.5" />
+  </button>
+</template>
+
+<style scoped>
+.auth-theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+
+.auth-theme-toggle--floating {
+  position: fixed;
+  top: calc(12px + env(safe-area-inset-top, 0px));
+  inset-inline-end: 16px;
+  z-index: 100;
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  color: var(--color-text);
+  box-shadow: none;
+}
+
+.auth-theme-toggle--inline {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.auth-theme-toggle:hover {
+  color: var(--color-primary);
+}
+</style>