From a88fcc68d11006bb0fc4cb8bdcac3239e3e77f7c Mon Sep 17 00:00:00 2001
From: mmrbnjd <mehdi.rabienzhad@gmail.com>
Date: Thu, 31 Jul 2025 20:46:09 +0330
Subject: [PATCH] ...

---
 Presentation/HushianWebApp/Pages/Chat.razor | 400 +++++++++++++++++---
 1 file changed, 342 insertions(+), 58 deletions(-)

diff --git a/Presentation/HushianWebApp/Pages/Chat.razor b/Presentation/HushianWebApp/Pages/Chat.razor
index 6aa36d5..7bc803f 100644
--- a/Presentation/HushianWebApp/Pages/Chat.razor
+++ b/Presentation/HushianWebApp/Pages/Chat.razor
@@ -12,61 +12,66 @@
 <div class="container-fluid">
     <div class="row" style="height:85vh">
         <!-- Sidebar (A) -->
-        <div class="col-md-3 bg-light d-flex flex-column p-2 rounded-end" id="A">
+        <div class="col-md-3 sidebar-container" id="A">
             <!-- A1: Header -->
-            <div class="border mb-2 p-2" id="A1">
-                گفتگو های اخیر
+            <div class="sidebar-header" id="A1">
+                <div class="header-content">
+                    <Icon Name="IconName.ChatDots" Class="header-icon" />
+                    <span class="header-text">گفتگو های اخیر</span>
+                </div>
             </div>
 
-
             <!-- A2: Buttons -->
-            <div class="d-flex justify-content-between mb-2" id="A2">
-
-
-
+            <div class="sidebar-tabs" id="A2">
                 <!-- Inbox1 -->
-                <Button Outline="@isSelectedInbox1" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(1);}" Size=ButtonSize.ExtraSmall Color="ButtonColor.Secondary">
-                    پیام های آمده <Badge Color="BadgeColor.Warning">@Inbox1Items.Count()</Badge>
+                <Button Outline="@isSelectedInbox1" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(1);}" Size=ButtonSize.Small Color="ButtonColor.Primary"
+                    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>
                 </Button>
 
                 <!-- Inbox2 -->
-                <Button Outline="@isSelectedInbox2" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(2);}" Size=ButtonSize.ExtraSmall Color="ButtonColor.Secondary">
-                    پیام های من <Badge Color="BadgeColor.Warning">@Inbox2Items.Count()</Badge>
+                <Button Outline="@isSelectedInbox2" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(2);}" Size=ButtonSize.Small Color="ButtonColor.Primary"
+                        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>
                 </Button>
 
                 <!-- Inbox3 -->
-                <Button Outline="@isSelectedInbox3" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(3);}" Size=ButtonSize.ExtraSmall Color="ButtonColor.Secondary">
-                    پیام های بسته
+                <Button Outline="@isSelectedInbox3" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(3);}" Size=ButtonSize.Small Color="ButtonColor.Primary"
+                        class=@($"tab-button {(isSelectedInbox3 ? "active-tab" : "")}")>
+                    <Icon Name="IconName.Archive" Class="tab-icon" />
+                    <span class="tab-text">پیام های بسته</span>
                 </Button>
-
-
-
             </div>
 
             <!-- A3: Chat list -->
-            <div class="flex-fill border p-2 overflow-auto" id="A3" style="height: 300px; overflow-y: auto;">
+            <div class="sidebar-chat-list" id="A3">
                 <Spinner Class="me-3" Type="SpinnerType.Dots" Color="SpinnerColor.Primary" Visible="@chatloading" Size="SpinnerSize.Small" />
                 @if (isSelectedInbox1)
                 {
                     @foreach (var item in Inbox1Items)
                     {
-                        <div class="d-flex align-items-center p-3 border-bottom message-item hover-bg"
-                        style="cursor: pointer;    margin-top: -10px;margin-bottom: -10px;" @onclick="async()=>await onClickSelectedChat(1,item)">
-
-                            <div class="flex-grow-1">
-                                <div class="d-flex justify-content-between">
-                                    <strong>@item.UserFullName</strong>
-                                    <small class="text-muted">@item.LastMsgdate</small>
-                                    <small class="text-muted">@item.LastMsgtime</small>
-                                </div>
-                                <div class="text-muted small text-truncate">@item.LastText</div>
+                        <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>
+                                    <div class="item-time">
+                                        <small class="time-text">@item.LastMsgdate</small>
+                                        <small class="time-text">@item.LastMsgtime</small>
+                                    </div>
+                                </div>
+                                <div class="item-message">@item.LastText</div>
+                            </div>
+                            <div class="item-badge">
+                                <Badge Color="BadgeColor.Danger" Class="unread-badge">@item.Responses.Count()</Badge>
                             </div>
-
-                            <Badge Style="margin-top:25px" Color="BadgeColor.Danger">@item.Responses.Count()</Badge>
                         </div>
-
-
-
                     }
                 }
 
@@ -74,25 +79,27 @@
                 {
                     @foreach (var item in Inbox2Items)
                     {
-                        <div class="d-flex align-items-center p-3 border-bottom message-item hover-bg"
-                        style="cursor: pointer;    margin-top: -10px;margin-bottom: -10px;" @onclick="async()=>await onClickSelectedChat(2,item)">
-
-                            <div class="flex-grow-1">
-                                <div class="d-flex justify-content-between">
-                                    <strong>@item.UserFullName</strong>
-                                    <small class="text-muted">@item.LastMsgdate</small>
-                                    <small class="text-muted">@item.LastMsgtime</small>
+                        <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>
+                                    <div class="item-time">
+                                        <small class="time-text">@item.LastMsgdate</small>
+                                        <small class="time-text">@item.LastMsgtime</small>
+                                    </div>
                                 </div>
-                                <div class="text-muted small text-truncate">@item.LastText</div>
+                                <div class="item-message">@item.LastText</div>
                             </div>
                             @if (item.Responses.Count(c => !c.IsRead && c.Type == ConversationType.UE) > 0)
                             {
-                                <Badge Style="margin-top:25px" Color="BadgeColor.Danger">@item.Responses.Count(c => !c.IsRead && c.Type == ConversationType.UE)</Badge>
+                                <div class="item-badge">
+                                    <Badge Color="BadgeColor.Danger" Class="unread-badge">@item.Responses.Count(c => !c.IsRead && c.Type == ConversationType.UE)</Badge>
+                                </div>
                             }
-
-
                         </div>
-
                     }
                 }
 
@@ -100,20 +107,21 @@
                 {
                     @foreach (var item in Inbox3Items)
                     {
-                        <div class="d-flex align-items-center p-3 border-bottom message-item hover-bg"
-                        style="cursor: pointer;    margin-top: -10px;margin-bottom: -10px;" @onclick="async()=>await onClickSelectedChat(3,item)">
-
-                            <div class="flex-grow-1">
-                                <div class="d-flex justify-content-between">
-                                    <strong>@item.UserFullName</strong>
-                                    <small class="text-muted">@item.LastMsgdate</small>
-                                    <small class="text-muted">@item.LastMsgtime</small>
-                                </div>
-                                <div class="text-muted small text-truncate">@item.LastText</div>
+                        <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>
+                                    <div class="item-time">
+                                        <small class="time-text">@item.LastMsgdate</small>
+                                        <small class="time-text">@item.LastMsgtime</small>
+                                    </div>
+                                </div>
+                                <div class="item-message">@item.LastText</div>
                             </div>
-
                         </div>
-
                     }
                 }
 
@@ -340,6 +348,282 @@
 }
 
 <style>
+    /* Enhanced Sidebar Styling */
+    .sidebar-container {
+        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+        border: 2px solid #e9ecef;
+        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;
+        height: 85vh;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .sidebar-header {
+        background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
+        border-radius: 15px;
+        padding: 1rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
+        position: relative;
+        overflow: hidden;
+    }
+
+    .sidebar-header::before {
+        content: '';
+        position: absolute;
+        top: -50%;
+        left: -50%;
+        width: 200%;
+        height: 200%;
+        background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
+        animation: shimmer 3s infinite;
+    }
+
+    @@keyframes shimmer {
+        0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
+        100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
+    }
+
+    .header-content {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        position: relative;
+        z-index: 2;
+    }
+
+    .header-icon {
+        font-size: 1.5rem;
+        color: white;
+        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+    }
+
+    .header-text {
+        color: white;
+        font-size: 1.1rem;
+        font-weight: 700;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    }
+
+    .sidebar-tabs {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .tab-button {
+        border-radius: 12px;
+        padding: 0.75rem 1rem;
+        transition: all 0.3s ease;
+        border: 2px solid transparent;
+        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        position: relative;
+        overflow: hidden;
+    }
+
+    .tab-button::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+        transition: left 0.5s ease;
+    }
+
+    .tab-button:hover::before {
+        left: 100%;
+    }
+
+    .tab-button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px rgba(13, 110, 253, 0.2);
+        border-color: #0d6efd;
+    }
+
+    .tab-button.active-tab {
+        background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
+        color: white;
+        border-color: #0d6efd;
+        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
+    }
+
+    .tab-icon {
+        margin-right: 0.5rem;
+        font-size: 1.1rem;
+    }
+
+    .tab-text {
+        font-weight: 600;
+        font-size: 0.9rem;
+    }
+
+    .tab-badge {
+        margin-left: auto;
+        font-size: 0.75rem;
+        padding: 0.25rem 0.5rem;
+        border-radius: 10px;
+    }
+
+    .sidebar-chat-list {
+        flex: 1;
+        overflow-y: auto;
+        border-radius: 15px;
+        background: rgba(255, 255, 255, 0.8);
+        backdrop-filter: blur(10px);
+        padding: 1rem;
+        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+    }
+
+    .sidebar-chat-list::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    .sidebar-chat-list::-webkit-scrollbar-track {
+        background: rgba(241, 241, 241, 0.5);
+        border-radius: 10px;
+    }
+
+    .sidebar-chat-list::-webkit-scrollbar-thumb {
+        background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
+        border-radius: 10px;
+        transition: all 0.3s ease;
+    }
+
+    .sidebar-chat-list::-webkit-scrollbar-thumb:hover {
+        background: linear-gradient(135deg, #0b5ed7 0%, #0a4b9e 100%);
+    }
+
+    .chat-list-item {
+        display: flex;
+        align-items: center;
+        padding: 1rem;
+        margin-bottom: 0.75rem;
+        border-radius: 12px;
+        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+        border: 1px solid #e9ecef;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        transition: all 0.3s ease;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .chat-list-item::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(13, 110, 253, 0.1), transparent);
+        transition: left 0.5s ease;
+    }
+
+    .chat-list-item:hover::before {
+        left: 100%;
+    }
+
+    .chat-list-item:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px rgba(13, 110, 253, 0.15);
+        border-color: #0d6efd;
+    }
+
+    .item-avatar {
+        width: 45px;
+        height: 45px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 1rem;
+        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
+        flex-shrink: 0;
+    }
+
+    .avatar-icon {
+        color: white;
+        font-size: 1.2rem;
+    }
+
+    .item-content {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .item-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: 0.5rem;
+    }
+
+    .item-name {
+        color: #333;
+        font-size: 0.95rem;
+        font-weight: 600;
+        margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .item-time {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 0.25rem;
+        flex-shrink: 0;
+    }
+
+    .time-text {
+        color: #6c757d;
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+
+    .item-message {
+        color: #6c757d;
+        font-size: 0.85rem;
+        line-height: 1.4;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin: 0;
+    }
+
+    .item-badge {
+        margin-left: 0.75rem;
+        flex-shrink: 0;
+    }
+
+    .unread-badge {
+        font-size: 0.75rem;
+        padding: 0.25rem 0.5rem;
+        border-radius: 10px;
+        animation: pulse 2s infinite;
+    }
+
+    @@keyframes pulse {
+        0%, 100% {
+            transform: scale(1);
+            box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
+        }
+        50% {
+            transform: scale(1.05);
+            box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
+        }
+    }
+
     /* Improved input group styling */
     .input-group {
         margin-bottom: 1rem;