From 1efa21c998e6ff4bb9dc84d9e8027a0657e226b4 Mon Sep 17 00:00:00 2001
From: mmrbnjd <mehdi.rabienzhad@gmail.com>
Date: Fri, 1 Aug 2025 14:47:05 +0330
Subject: [PATCH] ...

---
 Presentation/HushianWebApp/Pages/Chat.razor | 139 +++++++++++++++++---
 1 file changed, 120 insertions(+), 19 deletions(-)

diff --git a/Presentation/HushianWebApp/Pages/Chat.razor b/Presentation/HushianWebApp/Pages/Chat.razor
index 7bc803f..f4d930a 100644
--- a/Presentation/HushianWebApp/Pages/Chat.razor
+++ b/Presentation/HushianWebApp/Pages/Chat.razor
@@ -8,7 +8,7 @@
 @inject GroupService groupService
 @inject UserService userService
 @inject IJSRuntime JS
-
+<PageTitle>گفتمان</PageTitle>
 <div class="container-fluid">
     <div class="row" style="height:85vh">
         <!-- Sidebar (A) -->
@@ -25,7 +25,7 @@
             <div class="sidebar-tabs" id="A2">
                 <!-- Inbox1 -->
                 <Button Outline="@isSelectedInbox1" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(1);}" Size=ButtonSize.Small Color="ButtonColor.Primary"
-                    class=@($"tab-button {(isSelectedInbox1 ? "active-tab" : "")}")>
+                class=@($"tab-button {(isSelectedInbox1 ? "active-tab" : "")}")>
                     <Icon Name="IconName.Inbox" Class="tab-icon" />
                     <span class="tab-text">پیام های آمده</span>
                     <Badge Color="BadgeColor.Warning" Class="tab-badge">@Inbox1Items.Count()</Badge>
@@ -33,7 +33,7 @@
 
                 <!-- Inbox2 -->
                 <Button Outline="@isSelectedInbox2" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(2);}" Size=ButtonSize.Small Color="ButtonColor.Primary"
-                        class=@($"tab-button {(isSelectedInbox2 ? "active-tab" : "")}")>
+                class=@($"tab-button {(isSelectedInbox2 ? "active-tab" : "")}")>
                     <Icon Name="IconName.Send" Class="tab-icon" />
                     <span class="tab-text">پیام های من</span>
                     <Badge Color="BadgeColor.Warning" Class="tab-badge">@Inbox2Items.Count()</Badge>
@@ -41,7 +41,7 @@
 
                 <!-- Inbox3 -->
                 <Button Outline="@isSelectedInbox3" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(3);}" Size=ButtonSize.Small Color="ButtonColor.Primary"
-                        class=@($"tab-button {(isSelectedInbox3 ? "active-tab" : "")}")>
+                class=@($"tab-button {(isSelectedInbox3 ? "active-tab" : "")}")>
                     <Icon Name="IconName.Archive" Class="tab-icon" />
                     <span class="tab-text">پیام های بسته</span>
                 </Button>
@@ -55,9 +55,7 @@
                     @foreach (var item in Inbox1Items)
                     {
                         <div class="chat-list-item" @onclick="async()=>await onClickSelectedChat(1,item)">
-                            <div class="item-avatar">
-                                <Icon Name="IconName.Person" Class="avatar-icon" />
-                            </div>
+
                             <div class="item-content">
                                 <div class="item-header">
                                     <strong class="item-name">@item.UserFullName</strong>
@@ -80,9 +78,7 @@
                     @foreach (var item in Inbox2Items)
                     {
                         <div class="chat-list-item" @onclick="async()=>await onClickSelectedChat(2,item)">
-                            <div class="item-avatar">
-                                <Icon Name="IconName.Person" Class="avatar-icon" />
-                            </div>
+
                             <div class="item-content">
                                 <div class="item-header">
                                     <strong class="item-name">@item.UserFullName</strong>
@@ -108,9 +104,7 @@
                     @foreach (var item in Inbox3Items)
                     {
                         <div class="chat-list-item" @onclick="async()=>await onClickSelectedChat(3,item)">
-                            <div class="item-avatar">
-                                <Icon Name="IconName.Person" Class="avatar-icon" />
-                            </div>
+
                             <div class="item-content">
                                 <div class="item-header">
                                     <strong class="item-name">@item.UserFullName</strong>
@@ -135,7 +129,7 @@
                 @if (ChatCurrent != null)
                 {
                     <p type="text" class="form-control fw-bold text-primary" style="border:none;align-self: center;" aria-describedby="basic-addon1">@SelectedChatUserName</p>
-                      <div class="d-flex gap-2 ms-auto">
+                    <div class="d-flex gap-2 ms-auto">
                         @if (ChatCurrent.status == Common.Enums.ConversationStatus.InProgress)
                         {
                             <Button Color="ButtonColor.Danger" Size=ButtonSize.ExtraSmall Outline="true" Class="finish-conversation-btn"
@@ -162,6 +156,18 @@
                     </div>
                 }
 
+                else if (isSelectedInbox3)
+                {
+                    <div class="warning-note">
+                        <div class="warning-icon">
+                            <Icon Name="IconName.ExclamationTriangle" Color="IconColor.Warning" Size="IconSize.x3" />
+                        </div>
+                        <div class="warning-content">
+                            <h6 class="warning-title">نکته مهم</h6>
+                            <p class="warning-text">از انتخاب گفتگو مطمئن شوید، بعد از انتخاب شما مسئول بررسی می‌باشد</p>
+                        </div>
+                    </div>
+                }
             </div>
             <!-- B1: Chat area -->
             <div class="flex-fill chat-area-container" id="B1">
@@ -355,7 +361,7 @@
         border-radius: 20px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
         backdrop-filter: blur(10px);
-        padding: 1.5rem;
+        padding: 0.5rem;
         height: 85vh;
         display: flex;
         flex-direction: column;
@@ -365,8 +371,7 @@
     .sidebar-header {
         background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
         border-radius: 15px;
-        padding: 1rem;
-        margin-bottom: 1.5rem;
+        margin-bottom: 0.5rem;
         box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
         position: relative;
         overflow: hidden;
@@ -411,7 +416,6 @@
 
     .sidebar-tabs {
         display: flex;
-        flex-direction: column;
         gap: 0.75rem;
         margin-bottom: 1.5rem;
     }
@@ -478,7 +482,7 @@
         border-radius: 15px;
         background: rgba(255, 255, 255, 0.8);
         backdrop-filter: blur(10px);
-        padding: 1rem;
+        padding: 0.5rem;
         box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
     }
 
@@ -502,6 +506,7 @@
     }
 
     .chat-list-item {
+        height:75px;
         display: flex;
         align-items: center;
         padding: 1rem;
@@ -1001,6 +1006,102 @@
         box-shadow: 0 6px 16px rgba(255, 193, 7, 0.5);
         background: linear-gradient(135deg, #e0a800 0%, #d39e00 100%);
     }
+
+    /* Beautiful Warning Note Styling */
+    .warning-note {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
+        border: 2px solid #ffc107;
+        border-radius: 20px;
+        padding: 1.25rem;
+        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
+        position: relative;
+        overflow: hidden;
+        animation: warningGlow 3s ease-in-out infinite;
+    }
+
+    .warning-note::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.1), transparent);
+        animation: warningShimmer 4s infinite;
+    }
+
+    @@keyframes warningGlow {
+        0%, 100% {
+            box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        50% {
+            box-shadow: 0 6px 16px rgba(255, 193, 7, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
+        }
+    }
+
+    @@keyframes warningShimmer {
+        0% { left: -100%; }
+        100% { left: 100%; }
+    }
+
+    .warning-icon {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 50px;
+        height: 50px;
+        background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
+        border-radius: 50%;
+        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
+        animation: warningPulse 2s ease-in-out infinite;
+    }
+
+    @@keyframes warningPulse {
+        0%, 100% {
+            transform: scale(1);
+            box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
+        }
+        50% {
+            transform: scale(1.05);
+            box-shadow: 0 6px 16px rgba(255, 193, 7, 0.6);
+        }
+    }
+
+    .warning-content {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .warning-title {
+        color: #856404;
+        font-weight: 700;
+        font-size: 1.1rem;
+        margin: 0 0 0.5rem 0;
+        text-shadow: 0 1px 2px rgba(133, 100, 4, 0.1);
+    }
+
+    .warning-text {
+        color: #856404;
+        font-size: 0.95rem;
+        line-height: 1.5;
+        margin: 0;
+        font-weight: 500;
+    }
+
+    .warning-note:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px rgba(255, 193, 7, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
+        transition: all 0.3s ease;
+    }
+
+    .warning-note:hover .warning-icon {
+        animation: warningPulse 1s ease-in-out infinite;
+    }
+
     /* Enhanced button styling */
     .finish-conversation-btn {
         border-radius: 20px;