init

src/components/reports/ReportModal.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { useAuthStore } from '@/stores/auth.store';
+import { useUiStore } from '@/stores/ui.store';
+import { apiClient } from '@/api/client';
+import AppModal from '@/components/common/AppModal.vue';
+import AppButton from '@/components/common/AppButton.vue';
+
+const props = defineProps<{
+  open: boolean;
+  entityId: string;
+  entityType: 'profile' | 'message';
+}>();
+
+const emit = defineEmits<{ close: [] }>();
+
+const authStore = useAuthStore();
+const uiStore = useUiStore();
+
+const form = reactive({ description: '' });
+const loading = ref(false);
+
+async function submit() {
+  const profileId = authStore.activeProfile?.id;
+  if (!profileId) return;
+  loading.value = true;
+  try {
+    await apiClient.api.reportsControllerCreate({
+      sourceProfileId: profileId,
+      entityId: props.entityId,
+      entityType: props.entityType,
+      description: form.description || undefined,
+    });
+    uiStore.addToast('Жалоба отправлена', 'success');
+    form.description = '';
+    emit('close');
+  } catch {
+    uiStore.addToast('Не удалось отправить жалобу', 'error');
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <AppModal :open="open" title="Пожаловаться" size="sm" @close="emit('close')">
+    <form class="report-form" @submit.prevent="submit">
+      <p class="report-form__label label">Опишите причину жалобы (необязательно)</p>
+      <textarea
+        v-model="form.description"
+        class="report-form__textarea"
+        placeholder="Опишите нарушение..."
+        rows="4"
+      />
+    </form>
+    <template #footer>
+      <AppButton variant="ghost" @click="emit('close')">Отмена</AppButton>
+      <AppButton variant="danger" :loading="loading" @click="submit">Отправить жалобу</AppButton>
+    </template>
+  </AppModal>
+</template>
+
+<style scoped lang="scss">
+.report-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &__label { color: var(--color-muted); }
+
+  &__textarea {
+    width: 100%;
+    padding: 10px 14px;
+    background: var(--color-surface-2);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    color: var(--color-cream);
+    font-family: var(--font-mono);
+    font-size: 0.875rem;
+    resize: vertical;
+    min-height: 80px;
+    outline: none;
+    transition: border-color var(--transition-fast);
+
+    &::placeholder { color: var(--color-muted); }
+    &:focus { border-color: var(--color-border-strong); }
+  }
+}
+</style>