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

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

src/components/ui/ConfirmDialog.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import BaseButton from '@/components/ui/BaseButton.vue'
+import { resolveConfirm, useConfirmState } from '@/composables/useConfirm'
+
+const state = useConfirmState()
+
+function cancel() {
+  resolveConfirm(false)
+}
+
+function confirmAction() {
+  resolveConfirm(true)
+}
+</script>
+
+<template>
+  <div
+    v-if="state.open"
+    class="dialog-overlay confirm-dialog-overlay"
+    role="dialog"
+    aria-modal="true"
+    :aria-labelledby="'confirm-dialog-title'"
+    @click.self="cancel"
+  >
+    <div class="dialog card confirm-dialog">
+      <h3 id="confirm-dialog-title" class="confirm-dialog__title">{{ state.title }}</h3>
+      <p class="confirm-dialog__message">{{ state.message }}</p>
+      <div class="dialog-actions confirm-dialog__actions">
+        <BaseButton variant="outline" @click="cancel">{{ state.cancelLabel }}</BaseButton>
+        <BaseButton :variant="state.tone === 'danger' ? 'danger' : 'primary'" @click="confirmAction">
+          {{ state.confirmLabel }}
+        </BaseButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.confirm-dialog {
+  padding: 20px;
+}
+
+.confirm-dialog__title {
+  margin: 0 0 8px;
+  font-size: 1.0625rem;
+  font-weight: 700;
+}
+
+.confirm-dialog__message {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  line-height: 1.7;
+}
+
+.confirm-dialog__actions {
+  margin-top: 20px;
+}
+
+@media (min-width: 768px) {
+  .confirm-dialog__actions {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+</style>