Skip to content

Commit 2ce2822

Browse files
hydropixhydropix
committed
Improve File Management UX
1 parent 29c97e7 commit 2ce2822

File tree

3 files changed

+136
-93
lines changed

3 files changed

+136
-93
lines changed

‎src/web/static/js/files/file-manager.js‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -134,29 +134,31 @@ export const FileManager = {
134134
const modifiedDate = new Date(file.modified_date);
135135
const formattedDate = modifiedDate.toLocaleString();
136136

137-
// Determine file icon
138-
const fileIcon = file.file_type === 'epub' ? '📚' :
139-
file.file_type === 'srt' ? '🎬' :
140-
file.file_type === 'txt' ? '📄' :
141-
file.file_type === 'opus' || file.file_type === 'mp3' ? '🎵' : '📎';
137+
// Determine file icon (Material Symbols)
138+
// Audio files that can be played (already audiobooks)
139+
const isAudioFile = file.file_type === 'opus' || file.file_type === 'mp3';
140+
const fileIconClass = file.file_type === 'epub' ? 'book' :
141+
file.file_type === 'srt' ? 'movie' :
142+
file.file_type === 'txt' ? 'description' :
143+
isAudioFile ? 'headphones' : 'attach_file';
142144

143145
// Check if file supports TTS (text-based files only, not audio files)
144146
const supportsTTS = ['epub', 'txt', 'srt'].includes(file.file_type);
145147

148+
const tooltipInfo = `${file.file_type.toUpperCase()} • ${file.size_mb} MB • ${formattedDate}`;
149+
146150
row.innerHTML = `
147-
<td>
151+
<td style="width: 36px; padding: 0.5rem;">
148152
<input type="checkbox" class="file-checkbox" data-filename="${DomHelpers.escapeHtml(file.filename)}">
149153
</td>
150-
<td>
151-
<span class="clickable-filename" data-filename="${DomHelpers.escapeHtml(file.filename)}" data-action="open" title="Click to open file">
152-
${fileIcon} ${DomHelpers.escapeHtml(file.filename)}
154+
<td style="max-width: 0;">
155+
<span class="clickable-filename" data-filename="${DomHelpers.escapeHtml(file.filename)}" data-action="open" title="${tooltipInfo}">
156+
<span class="material-symbols-outlined file-icon-cell">${fileIconClass}</span>
157+
<span class="filename-text">${DomHelpers.escapeHtml(file.filename)}</span>
153158
</span>
154159
</td>
155-
<td>${file.file_type.toUpperCase()}</td>
156-
<td>${file.size_mb} MB</td>
157-
<td>${formattedDate}</td>
158-
<td style="text-align: center; white-space: nowrap;">
159-
<div style="display: inline-flex; gap: 0.25rem; align-items: center;">${supportsTTS ? `<button class="file-action-btn audiobook" data-filename="${DomHelpers.escapeHtml(file.filename)}" data-filepath="${DomHelpers.escapeHtml(file.file_path)}" data-action="audiobook" title="Generate Audiobook (TTS)">🎧</button>` : ''}<button class="file-action-btn download" data-filename="${DomHelpers.escapeHtml(file.filename)}" data-action="download" title="Download">📥</button><button class="file-action-btn delete" data-filename="${DomHelpers.escapeHtml(file.filename)}" data-action="delete" title="Delete">🗑️</button></div>
160+
<td style="width: 100px; text-align: center; white-space: nowrap; padding: 0.5rem;">
161+
<div style="display: inline-flex; gap: 0.125rem; align-items: center; justify-content: center;">${supportsTTS ? `<button class="file-action-btn audiobook" data-filename="${DomHelpers.escapeHtml(file.filename)}" data-filepath="${DomHelpers.escapeHtml(file.file_path)}" data-action="audiobook" title="Generate Audiobook (TTS)"><span class="material-symbols-outlined" style="font-size: 0.875rem;">headphones</span></button>` : ''}<button class="file-action-btn download" data-filename="${DomHelpers.escapeHtml(file.filename)}" data-action="download" title="Download"><span class="material-symbols-outlined" style="font-size: 0.875rem;">download</span></button><button class="file-action-btn delete" data-filename="${DomHelpers.escapeHtml(file.filename)}" data-action="delete" title="Delete"><span class="material-symbols-outlined" style="font-size: 0.875rem;">delete</span></button></div>
160162
</td>
161163
`;
162164

@@ -274,12 +276,14 @@ export const FileManager = {
274276
}
275277

276278
// Update button text with count
279+
const downloadBtn = DomHelpers.getElement('batchDownloadBtn');
280+
const deleteBtn = DomHelpers.getElement('batchDeleteBtn');
277281
if (hasSelection) {
278-
DomHelpers.setText('batchDownloadBtn', `📥 Download Selected (${selectedFiles.size})`);
279-
DomHelpers.setText('batchDeleteBtn', `🗑️ Delete Selected (${selectedFiles.size})`);
282+
if (downloadBtn) downloadBtn.innerHTML = `<span class="material-symbols-outlined">download</span> Download Selected (${selectedFiles.size})`;
283+
if (deleteBtn) deleteBtn.innerHTML = `<span class="material-symbols-outlined">delete</span> Delete Selected (${selectedFiles.size})`;
280284
} else {
281-
DomHelpers.setText('batchDownloadBtn', `📥 Download Selected`);
282-
DomHelpers.setText('batchDeleteBtn', `🗑️ Delete Selected`);
285+
if (downloadBtn) downloadBtn.innerHTML = `<span class="material-symbols-outlined">download</span> Download Selected`;
286+
if (deleteBtn) deleteBtn.innerHTML = `<span class="material-symbols-outlined">delete</span> Delete Selected`;
283287
}
284288
},
285289

‎src/web/static/style.css‎

Lines changed: 103 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -844,6 +844,44 @@ input[type="checkbox"] {
844844
overflow: hidden;
845845
}
846846

847+
/* File table body with max height for 6 rows + scroll */
848+
.file-table tbody {
849+
display: block;
850+
max-height: calc(6 * 3rem); /* 6 rows * ~3rem height per row (compact) */
851+
overflow-y: auto;
852+
scrollbar-width: thin;
853+
scrollbar-color: var(--shadow-dark) transparent;
854+
}
855+
856+
.file-table thead,
857+
.file-table tbody tr {
858+
display: table;
859+
width: 100%;
860+
table-layout: fixed;
861+
}
862+
863+
/* Compact table header */
864+
.file-table thead th {
865+
padding: 0.75rem 0.5rem;
866+
}
867+
868+
.file-table tbody::-webkit-scrollbar {
869+
width: 6px;
870+
}
871+
872+
.file-table tbody::-webkit-scrollbar-track {
873+
background: transparent;
874+
}
875+
876+
.file-table tbody::-webkit-scrollbar-thumb {
877+
background: var(--shadow-dark);
878+
border-radius: 3px;
879+
}
880+
881+
.file-table tbody::-webkit-scrollbar-thumb:hover {
882+
background: var(--text-muted-light);
883+
}
884+
847885
.file-table thead tr {
848886
background: rgba(54, 118, 216, 0.05);
849887
}
@@ -868,43 +906,65 @@ input[type="checkbox"] {
868906
}
869907

870908
.file-table td {
871-
padding: 1rem;
909+
padding: 0.5rem;
872910
color: var(--text-dark);
873911
font-size: 0.875rem;
912+
vertical-align: middle;
913+
}
914+
915+
/* File icon in table cell */
916+
.file-table .file-icon-cell {
917+
font-size: 1.125rem;
918+
vertical-align: middle;
919+
margin-right: 0.5rem;
920+
flex-shrink: 0;
921+
}
922+
923+
/* Filename text with ellipsis */
924+
.file-table .filename-text {
925+
overflow: hidden;
926+
text-overflow: ellipsis;
927+
white-space: nowrap;
928+
display: block;
874929
}
875930

876931
.clickable-filename {
877932
cursor: pointer;
878933
color: var(--primary-light);
879934
font-weight: 600;
880935
transition: all 0.2s;
936+
display: flex;
937+
align-items: center;
938+
min-width: 0;
881939
}
882940

883941
.clickable-filename:hover {
884942
text-decoration: underline;
885943
}
886944

945+
/* Compact action buttons */
887946
.file-action-btn {
888947
padding: 0;
889948
background: var(--background-light);
890-
box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
949+
box-shadow: 2px 2px 4px var(--shadow-dark), -2px -2px 4px var(--shadow-light);
891950
border: 1px solid var(--border-light);
892951
color: var(--text-dark);
893-
border-radius: 0.5rem;
952+
border-radius: 0.375rem;
894953
cursor: pointer;
895-
font-size: 1.125rem;
954+
font-size: 1rem;
896955
font-weight: 600;
897956
transition: all 0.2s;
898957
display: inline-flex;
899958
align-items: center;
900959
justify-content: center;
901-
width: 2rem;
902-
height: 2rem;
960+
width: 1.625rem;
961+
height: 1.625rem;
903962
flex-shrink: 0;
904963
}
905964

906965
.file-action-btn:hover {
907966
transform: translateY(-1px);
967+
box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
908968
}
909969

910970
.file-action-btn.download {
@@ -915,6 +975,10 @@ input[type="checkbox"] {
915975
color: #ef4444;
916976
}
917977

978+
.file-action-btn.audiobook {
979+
color: #8b5cf6;
980+
}
981+
918982
/* ========================================
919983
Messages
920984
======================================== */
@@ -950,41 +1014,54 @@ input[type="checkbox"] {
9501014
======================================== */
9511015

9521016
.app-footer {
953-
text-align: center;
954-
padding: 2rem;
1017+
padding: 1.5rem 2rem;
9551018
margin-top: 3rem;
956-
color: var(--text-muted-light);
9571019
border-top: 1px solid var(--border-light);
9581020
border-radius: 2rem;
9591021
}
9601022

961-
.app-footer p {
962-
margin: 0;
963-
font-size: 0.75rem;
1023+
.footer-links {
1024+
display: flex;
1025+
justify-content: center;
1026+
align-items: center;
1027+
flex-wrap: wrap;
1028+
gap: 0.5rem 1.5rem;
1029+
}
1030+
1031+
.footer-links a {
1032+
display: inline-flex;
1033+
align-items: center;
1034+
gap: 0.4rem;
1035+
color: var(--text-muted-light);
1036+
text-decoration: none;
1037+
font-size: 0.8125rem;
9641038
font-weight: 500;
965-
text-transform: uppercase;
966-
letter-spacing: 0.1em;
1039+
transition: color 0.2s ease;
9671040
}
9681041

969-
.app-footer a {
1042+
.footer-links a:hover {
9701043
color: var(--primary-light);
971-
text-decoration: none;
972-
font-weight: 700;
973-
transition: color 0.3s;
9741044
}
9751045

976-
.app-footer a:hover {
977-
color: #5a8ee8;
1046+
.footer-links a .material-symbols-outlined {
1047+
font-size: 1rem;
1048+
}
1049+
1050+
.footer-links .sponsor-btn {
1051+
color: #db61a2;
1052+
font-weight: 600;
9781053
}
9791054

980-
.app-footer .footer-separator {
981-
margin: 0 0.75rem;
982-
color: var(--border-light);
1055+
.footer-links .sponsor-btn:hover {
1056+
color: #f472b6;
9831057
}
9841058

985-
.app-footer .heart {
986-
color: #ef4444;
987-
animation: heartbeat 1.5s ease-in-out infinite;
1059+
html.dark .footer-links .sponsor-btn {
1060+
color: #f472b6;
1061+
}
1062+
1063+
html.dark .footer-links .sponsor-btn:hover {
1064+
color: #f9a8d4;
9881065
}
9891066

9901067
@keyframes heartbeat {
@@ -1476,38 +1553,7 @@ html.dark .file-icon {
14761553
background: rgba(90, 142, 232, 0.1);
14771554
}
14781555

1479-
html.dark .sponsor-section iframe {
1480-
display: none;
1481-
}
1482-
1483-
html.dark .sponsor-section .sponsor-link {
1484-
display: inline-flex;
1485-
}
1486-
1487-
.sponsor-section .sponsor-link {
1488-
display: none;
1489-
align-items: center;
1490-
gap: 0.5rem;
1491-
padding: 1rem 2rem;
1492-
background: var(--background-light);
1493-
box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
1494-
border: 1px solid var(--border-light);
1495-
border-radius: 1rem;
1496-
color: var(--text-dark);
1497-
text-decoration: none;
1498-
font-weight: 600;
1499-
transition: all 0.3s;
1500-
}
1501-
1502-
.sponsor-section .sponsor-link:hover {
1503-
transform: translateY(-2px);
1504-
box-shadow: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
1505-
color: #db61a2;
1506-
}
15071556

1508-
.sponsor-section .sponsor-link .material-symbols-outlined {
1509-
color: #db61a2;
1510-
}
15111557

15121558
html.dark .file-info {
15131559
color: var(--text-light);

‎src/web/templates/translation_interface.html‎

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -586,12 +586,9 @@ <h2>File Management</h2>
586586
<table class="file-table">
587587
<thead>
588588
<tr>
589-
<th style="width: 40px;"></th>
589+
<th style="width: 36px;"></th>
590590
<th>Filename</th>
591-
<th>Type</th>
592-
<th>Size</th>
593-
<th>Modified</th>
594-
<th style="text-align: center;">Actions</th>
591+
<th style="width: 100px; text-align: center;">Actions</th>
595592
</tr>
596593
</thead>
597594
<tbody id="fileTableBody">
@@ -616,26 +613,22 @@ <h2>File Management</h2>
616613

617614
<!-- Footer -->
618615
<footer class="app-footer">
619-
<p>
616+
<div class="footer-links">
620617
<a href="https://github.com/hydropix/TranslateBookWithLLM" target="_blank" rel="noopener noreferrer">
621-
View on GitHub
618+
<span class="material-symbols-outlined">code</span>
619+
GitHub
622620
</a>
623-
<span class="footer-separator">|</span>
624621
<a href="https://github.com/hydropix/TranslateBookWithLLM/issues/new" target="_blank" rel="noopener noreferrer" title="Report a bug">
625-
<span class="material-symbols-outlined" style="font-size: 1rem; vertical-align: middle;">bug_report</span>
626-
Found a bug? Squash it!
622+
<span class="material-symbols-outlined">bug_report</span>
623+
Report Bug
627624
</a>
628-
<span class="footer-separator">|</span>
629625
<a href="https://github.com/hydropix/TranslateBookWithLLM/discussions/new?category=ideas" target="_blank" rel="noopener noreferrer" title="Suggest a feature">
630-
<span class="material-symbols-outlined" style="font-size: 1rem; vertical-align: middle;">lightbulb</span>
631-
Got a brilliant idea? Share it!
626+
<span class="material-symbols-outlined">lightbulb</span>
627+
Suggest Feature
632628
</a>
633-
</p>
634-
<div class="sponsor-section" style="margin-top: 1.5rem; display: flex; justify-content: center;">
635-
<iframe src="https://github.com/sponsors/hydropix/card" title="Sponsor hydropix" height="225" width="600" style="border: 0; max-width: 100%;"></iframe>
636-
<a href="https://github.com/sponsors/hydropix" target="_blank" rel="noopener noreferrer" class="sponsor-link">
629+
<a href="https://github.com/sponsors/hydropix" target="_blank" rel="noopener noreferrer" class="sponsor-btn">
637630
<span class="material-symbols-outlined">favorite</span>
638-
Sponsor this project on GitHub
631+
Sponsor
639632
</a>
640633
</div>
641634
</footer>

0 commit comments

Comments
 (0)