From f6285d6ebf9f8b4cd6a063fdbaaedb13dc5ae030 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Tue, 10 Jun 2025 13:02:38 +0300
Subject: [PATCH] contacts: mark inactive contacts

---
 .../web/components/contacts/contacts-list.tsx | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/apps/web/components/contacts/contacts-list.tsx b/apps/web/components/contacts/contacts-list.tsx
index d3f890d..286ac69 100644
--- a/apps/web/components/contacts/contacts-list.tsx
+++ b/apps/web/components/contacts/contacts-list.tsx
@@ -3,7 +3,9 @@
 import { useCustomerContacts } from '@/hooks/api/contacts';
 import * as GQL from '@repo/graphql/types';
 import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
+import { Badge } from '@repo/ui/components/ui/badge';
 import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
+import { cn } from '@repo/ui/lib/utils';
 import Link from 'next/link';
 import { memo } from 'react';
 
@@ -13,18 +15,26 @@ type ContactRowProps = {
 
 const ContactRow = memo(function ({ contact }: ContactRowProps) {
   return (
-    <Link href={`/profile/${contact.telegramId}`} key={contact.telegramId}>
-      <div className="flex items-center space-x-4 rounded-lg py-2 transition-colors hover:bg-accent">
-        <Avatar>
-          <AvatarImage alt={contact.name} src={contact.photoUrl || ''} />
-          <AvatarFallback>{contact.name.charAt(0)}</AvatarFallback>
-        </Avatar>
-        <div>
-          <p className="font-medium">{contact.name}</p>
-          <p className="text-sm text-muted-foreground">
-            {contact.role === GQL.Enum_Customer_Role.Client ? 'Клиент' : 'Мастер'}
-          </p>
+    <Link href={contact.active ? `/profile/${contact.telegramId}` : ''} key={contact.telegramId}>
+      <div
+        className={cn(
+          'flex items-center justify-between',
+          contact.active ? 'hover:bg-accent' : 'opacity-50',
+        )}
+      >
+        <div className={cn('flex items-center space-x-4 rounded-lg py-2 transition-colors')}>
+          <Avatar>
+            <AvatarImage alt={contact.name} src={contact.photoUrl || ''} />
+            <AvatarFallback>{contact.name.charAt(0)}</AvatarFallback>
+          </Avatar>
+          <div>
+            <p className="font-medium">{contact.name}</p>
+            <p className="text-sm text-muted-foreground">
+              {contact.role === GQL.Enum_Customer_Role.Client ? 'Клиент' : 'Мастер'}
+            </p>
+          </div>
         </div>
+        {contact.active ? <div /> : <Badge variant="destructive">Неактивен</Badge>}
       </div>
     </Link>
   );