update

apps/frontend/components/family/family-group-view.tsx

@@ -45,6 +45,7 @@ import {
   ChatRoom,
   createChatRoom,
   deleteChatMessage,
+  deleteFamilyGroup,
   editChatMessage,
   FamilyGroup,
   FamilyInviteCandidate,
@@ -221,6 +222,8 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
   const [editingMessageId, setEditingMessageId] = useState<string | null>(null);
   const [editDraft, setEditDraft] = useState('');
   const [presenceMembers, setPresenceMembers] = useState<FamilyPresenceMember[]>([]);
+  const [deleteFamilyDialogOpen, setDeleteFamilyDialogOpen] = useState(false);
+  const [deletingFamily, setDeletingFamily] = useState(false);
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const readReceiptTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -350,9 +353,15 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
       if (event.type === 'chat_read_receipt' && activeRoomId) {
         if (readReceiptTimerRef.current) clearTimeout(readReceiptTimerRef.current);
         readReceiptTimerRef.current = setTimeout(() => void loadMessages(activeRoomId), 400);
+        return;
+      }
+
+      if (event.type === 'family_group_deleted' && payload?.groupId === groupId) {
+        showToast('Семья была удалена');
+        router.push('/family');
       }
     });
-  }, [activeRoomId, appendMessage, loadGroup, loadMessages, subscribe]);
+  }, [activeRoomId, appendMessage, groupId, loadGroup, loadMessages, router, showToast, subscribe]);
 
   const loadChatMedia = useCallback(
     async (message: ChatMessage, force = false) => {
@@ -508,6 +517,12 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
     if (!token) return;
     try {
       await removeFamilyMember(memberId, token);
+      const removedMember = group?.members?.find((item) => item.id === memberId);
+      if (removedMember?.userId === user?.id) {
+        showToast('Вы вышли из семьи');
+        router.push('/family');
+        return;
+      }
       await loadGroup();
       setMembersOpen(false);
       setFamilyMembersOpen(false);
@@ -517,6 +532,22 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
     }
   }
 
+  async function confirmDeleteFamily() {
+    if (!token) return;
+    setDeletingFamily(true);
+    try {
+      await deleteFamilyGroup(groupId, token);
+      setDeleteFamilyDialogOpen(false);
+      setFamilyMembersOpen(false);
+      showToast('Семья удалена');
+      router.push('/family');
+    } catch (error) {
+      showToast(getApiErrorMessage(error, 'Не удалось удалить семью') ?? 'Ошибка');
+    } finally {
+      setDeletingFamily(false);
+    }
+  }
+
   async function saveRename() {
     if (!token || !renameValue.trim()) return;
     try {
@@ -1268,6 +1299,45 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
             <UserPlus className="mr-2 h-4 w-4" />
             Пригласить в семью
           </Button>
+          {isFamilyOwner ? (
+            <Button
+              className="mt-2 w-full rounded-xl bg-red-600 hover:bg-red-700"
+              onClick={() => {
+                setFamilyMembersOpen(false);
+                setDeleteFamilyDialogOpen(true);
+              }}
+            >
+              <Trash2 className="mr-2 h-4 w-4" />
+              Удалить семью
+            </Button>
+          ) : null}
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={deleteFamilyDialogOpen} onOpenChange={setDeleteFamilyDialogOpen}>
+        <DialogContent className="rounded-[28px] sm:max-w-[440px]">
+          <DialogHeader>
+            <DialogTitle>Удалить семью «{group?.name}»?</DialogTitle>
+          </DialogHeader>
+          <p className="text-sm leading-relaxed text-[#667085]">
+            Все участники будут исключены из семьи, все чаты и сообщения будут удалены без возможности
+            восстановления. Это действие нельзя отменить.
+          </p>
+          <div className="mt-6 flex gap-3">
+            <Button variant="secondary" className="flex-1" disabled={deletingFamily} onClick={() => setDeleteFamilyDialogOpen(false)}>
+              Отмена
+            </Button>
+            <Button className="flex-1 bg-red-600 hover:bg-red-700" disabled={deletingFamily} onClick={() => void confirmDeleteFamily()}>
+              {deletingFamily ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Удаляем...
+                </>
+              ) : (
+                'Удалить семью'
+              )}
+            </Button>
+          </div>
         </DialogContent>
       </Dialog>