Skip to content

Commit 4ce7fb6

Browse files
mateofmateof
committed
feat: improve chat messages
1 parent f1c3773 commit 4ce7fb6

9 files changed

Lines changed: 1056 additions & 123 deletions

‎TelegramDownloader/Pages/FetchData.razor‎

Lines changed: 46 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,34 +9,65 @@
99
@inject NavigationManager NavManager;
1010
@inject PreloadService PreloadService;
1111

12-
<PageTitle>Chat</PageTitle>
12+
<PageTitle>Chat Messages</PageTitle>
1313

1414
@if (m == null)
1515
{
16-
<p><em>Seleciona un canal</em></p>
16+
<div class="chat-page">
17+
<div class="empty-state">
18+
<i class="bi bi-chat-dots"></i>
19+
<h3>Select a channel</h3>
20+
<p>Choose a channel from the sidebar to view messages</p>
21+
</div>
22+
</div>
1723
}
1824
else
1925
{
20-
21-
<div>
22-
@if(m != null)
26+
<div class="chat-page">
27+
<!-- Header -->
28+
<div class="chat-header">
29+
<div class="chat-header-left">
30+
<h2><i class="bi bi-chat-text"></i> Messages</h2>
31+
@if(m.Count > 0)
32+
{
33+
<span class="message-count">@m.Count loaded</span>
34+
}
35+
</div>
36+
<div class="toggle-container">
37+
<Switch @bind-Value="showAll" @ref="allMessageSwitch" @oninput="ShowAllChanged" Label="Load all messages" />
38+
</div>
39+
</div>
40+
41+
<!-- Messages List -->
42+
@if(m.Count > 0)
2343
{
24-
<Switch @bind-Value="showAll" @ref="allMessageSwitch" @oninput="ShowAllChanged" Label="Show all messages" />
25-
@foreach (var mess in m)
26-
{
27-
28-
<TelegramDownloader.Pages.Partials.ChatMessage mess="@mess" modal="Modal" />
44+
<div class="messages-list">
45+
@foreach (var mess in m)
46+
{
47+
<TelegramDownloader.Pages.Partials.ChatMessage mess="@mess" modal="Modal" />
48+
}
49+
</div>
2950

30-
}
3151
@if (!showAll)
3252
{
33-
<button type="button" class="btn btn-outline-secondary" @onclick="moreElements"> More elements </button>
53+
<div class="load-more-container">
54+
<button type="button" class="btn-load-more" @onclick="moreElements">
55+
<i class="bi bi-arrow-down-circle"></i>
56+
Load more messages
57+
</button>
58+
</div>
3459
}
35-
3660
}
37-
61+
else
62+
{
63+
<div class="empty-state">
64+
<i class="bi bi-inbox"></i>
65+
<h3>No messages</h3>
66+
<p>This channel doesn't have any messages yet</p>
67+
</div>
68+
}
3869
</div>
39-
70+
4071
<TelegramDownloader.Pages.Modals.DownloadModal @ref="Modal"></TelegramDownloader.Pages.Modals.DownloadModal>
4172
}
4273

‎TelegramDownloader/Pages/FetchData.razor.css‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
/* ===== Chat Messages Page Styles ===== */
2+
3+
.chat-page {
4+
max-width: 900px;
5+
margin: 0 auto;
6+
padding: 1rem;
7+
}
8+
9+
/* Header */
10+
.chat-header {
11+
display: flex;
12+
align-items: center;
13+
justify-content: space-between;
14+
padding: 1rem 1.25rem;
15+
background: #1e1e2e;
16+
border: 1px solid rgba(255, 255, 255, 0.1);
17+
border-radius: 1rem;
18+
margin-bottom: 1.5rem;
19+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
20+
}
21+
22+
.chat-header-left {
23+
display: flex;
24+
align-items: center;
25+
gap: 1rem;
26+
}
27+
28+
.chat-header h2 {
29+
margin: 0;
30+
font-size: 1.25rem;
31+
font-weight: 600;
32+
color: #fff;
33+
}
34+
35+
.message-count {
36+
background: rgba(0, 136, 204, 0.2);
37+
color: #0088cc;
38+
padding: 0.25rem 0.75rem;
39+
border-radius: 1rem;
40+
font-size: 0.8rem;
41+
font-weight: 500;
42+
}
43+
44+
/* Toggle Switch Container */
45+
.toggle-container {
46+
display: flex;
47+
align-items: center;
48+
gap: 0.75rem;
49+
}
50+
51+
.toggle-container ::deep .form-check-label {
52+
color: rgba(255, 255, 255, 0.7);
53+
font-size: 0.85rem;
54+
}
55+
56+
/* Messages List */
57+
.messages-list {
58+
display: flex;
59+
flex-direction: column;
60+
gap: 1rem;
61+
}
62+
63+
/* Empty State */
64+
.empty-state {
65+
text-align: center;
66+
padding: 4rem 2rem;
67+
background: #1e1e2e;
68+
border: 1px dashed rgba(255, 255, 255, 0.2);
69+
border-radius: 1rem;
70+
}
71+
72+
.empty-state i {
73+
font-size: 4rem;
74+
color: rgba(255, 255, 255, 0.2);
75+
margin-bottom: 1rem;
76+
}
77+
78+
.empty-state h3 {
79+
color: rgba(255, 255, 255, 0.6);
80+
font-size: 1.25rem;
81+
font-weight: 500;
82+
margin-bottom: 0.5rem;
83+
}
84+
85+
.empty-state p {
86+
color: rgba(255, 255, 255, 0.4);
87+
font-size: 0.9rem;
88+
margin: 0;
89+
}
90+
91+
/* Load More Button */
92+
.load-more-container {
93+
display: flex;
94+
justify-content: center;
95+
padding: 1.5rem 0;
96+
}
97+
98+
.btn-load-more {
99+
display: flex;
100+
align-items: center;
101+
gap: 0.5rem;
102+
padding: 0.75rem 2rem;
103+
background: linear-gradient(135deg, #0088cc 0%, #0066aa 100%);
104+
border: none;
105+
border-radius: 2rem;
106+
color: #fff;
107+
font-size: 0.9rem;
108+
font-weight: 500;
109+
cursor: pointer;
110+
transition: all 0.2s ease;
111+
box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
112+
}
113+
114+
.btn-load-more:hover {
115+
background: linear-gradient(135deg, #0099dd 0%, #0077bb 100%);
116+
transform: translateY(-2px);
117+
box-shadow: 0 6px 20px rgba(0, 136, 204, 0.4);
118+
}
119+
120+
.btn-load-more i {
121+
font-size: 1.1rem;
122+
}
123+
124+
/* Scroll to top button */
125+
.scroll-top-btn {
126+
position: fixed;
127+
bottom: 2rem;
128+
right: 2rem;
129+
width: 48px;
130+
height: 48px;
131+
border-radius: 50%;
132+
background: linear-gradient(135deg, #0088cc 0%, #0066aa 100%);
133+
border: none;
134+
color: #fff;
135+
font-size: 1.25rem;
136+
cursor: pointer;
137+
box-shadow: 0 4px 15px rgba(0, 136, 204, 0.4);
138+
transition: all 0.2s ease;
139+
display: flex;
140+
align-items: center;
141+
justify-content: center;
142+
z-index: 100;
143+
}
144+
145+
.scroll-top-btn:hover {
146+
transform: translateY(-3px);
147+
box-shadow: 0 6px 20px rgba(0, 136, 204, 0.5);
148+
}

‎TelegramDownloader/Pages/Modals/DownloadModal.razor‎

Lines changed: 72 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,49 +4,76 @@
44
@using TelegramDownloader.Services
55
@using TelegramDownloader.Shared
66

7-
87
@inject ITelegramService ts
98
@inject IFileService fs
109

1110
<div class="modal @ModalClass" tabindex="-1" role="dialog" style="display:@ModalDisplay">
12-
<div class="modal-dialog" role="document">
13-
<div class="modal-content">
14-
<div class="modal-header">
15-
<h5 class="modal-title">Select Folder</h5>
16-
<button type="button" class="close" data-dismiss="modal" @onclick="() => Close()" aria-label="Close" style="border-color: transparent;background-color: transparent;">
17-
<span aria-hidden="true">&times;</span>
11+
<div class="modal-dialog modal-dialog-centered" role="document">
12+
<div class="modal-content download-modal">
13+
<!-- Header -->
14+
<div class="modal-header download-modal-header">
15+
<div class="modal-title-wrapper">
16+
<div class="modal-icon">
17+
<i class="bi bi-download"></i>
18+
</div>
19+
<div>
20+
<h5 class="modal-title">Download File</h5>
21+
<p class="modal-subtitle">Choose destination folder and file name</p>
22+
</div>
23+
</div>
24+
<button type="button" class="btn-close-modal" @onclick="() => Close()" aria-label="Close">
25+
<i class="bi bi-x-lg"></i>
1826
</button>
1927
</div>
20-
<div class="modal-body">
28+
29+
<!-- Body -->
30+
<div class="modal-body download-modal-body">
2131
@if (ShowBackdrop)
2232
{
23-
<EditForm class="form-signin mb-4" Model="model" OnSubmit="Submit" FormName="downloadModelForm">
24-
<div class="form-floating mb-3">
25-
<input class="form-control" type="text" id="filename" value="@filename" aria-label="file name" disabled readonly>
26-
<label for="filename">File Name</label>
33+
<EditForm class="download-form" Model="model" OnSubmit="Submit" FormName="downloadModelForm">
34+
<!-- File Info Card -->
35+
<div class="file-info-card">
36+
<div class="file-icon-wrapper">
37+
<i class="bi @GetFileIcon()"></i>
38+
</div>
39+
<div class="file-info-details">
40+
<div class="file-info-name" title="@filename">@filename</div>
41+
<div class="file-info-size">
42+
<i class="bi bi-hdd"></i>
43+
@size
44+
</div>
45+
</div>
2746
</div>
2847

29-
<div class="form-floating mb-3">
30-
<input class="form-control" type="text" id="filename" value="@size" aria-label="size" disabled readonly>
31-
<label for="filename">Size</label>
32-
</div>
33-
<div>
34-
<TelegramDownloader.Shared.Ddtree idTree="dmtree"
35-
@ref="ddtree"></TelegramDownloader.Shared.Ddtree>
48+
<!-- New Name -->
49+
<div class="form-section">
50+
<label class="section-label" for="newFileName">
51+
<i class="bi bi-pencil"></i>
52+
File Name
53+
</label>
54+
<div class="input-wrapper">
55+
<InputText type="text" class="form-control custom-input" id="newFileName" @bind-Value="model!.newName" placeholder="Enter new file name..." />
56+
</div>
3657
</div>
3758

38-
39-
40-
<div class="form-floating mb-3">
41-
<InputText type="text" class="form-control" id="floatingInput" @bind-Value="model!.newName" />
42-
<label for="floatingInput">New Name</label>
59+
<!-- Destination Folder (at the end so dropdown has room to expand) -->
60+
<div class="form-section folder-section">
61+
<TelegramDownloader.Shared.Ddtree idTree="dmtree" @ref="ddtree" />
4362
</div>
4463
</EditForm>
4564
}
4665
</div>
47-
<div class="modal-footer">
48-
<button type="button" class="btn btn-primary" @onclick="() => Submit()">Save</button>
49-
<button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="() => Close()">Close</button>
66+
67+
<!-- Footer -->
68+
<div class="modal-footer download-modal-footer">
69+
<button type="button" class="btn btn-cancel" @onclick="() => Close()">
70+
<i class="bi bi-x"></i>
71+
Cancel
72+
</button>
73+
<button type="button" class="btn btn-download" @onclick="() => Submit()">
74+
<i class="bi bi-download"></i>
75+
Download
76+
</button>
5077
</div>
5178
</div>
5279
</div>
@@ -104,6 +131,24 @@
104131
fs.DownloadFileFromChat(mc, model?.newName == "" ? null : model.newName, ddtree.selectedNode == null ? null : ddtree.selectedNode.FirstOrDefault());
105132
Close();
106133
}
134+
135+
private string GetFileIcon()
136+
{
137+
if (string.IsNullOrWhiteSpace(filename)) return "bi-file-earmark";
138+
var ext = System.IO.Path.GetExtension(filename)?.ToLower();
139+
return ext switch
140+
{
141+
".mp4" or ".mkv" or ".avi" or ".mov" or ".webm" or ".wmv" => "bi-film",
142+
".mp3" or ".flac" or ".wav" or ".ogg" or ".m4a" or ".aac" => "bi-music-note-beamed",
143+
".jpg" or ".jpeg" or ".png" or ".gif" or ".webp" or ".bmp" => "bi-image",
144+
".zip" or ".rar" or ".7z" or ".tar" or ".gz" => "bi-file-zip",
145+
".pdf" => "bi-file-pdf",
146+
".doc" or ".docx" => "bi-file-word",
147+
".xls" or ".xlsx" => "bi-file-excel",
148+
".txt" => "bi-file-text",
149+
_ => "bi-file-earmark"
150+
};
151+
}
107152
}
108153

109154
@if (ShowBackdrop)

0 commit comments

Comments
 (0)