Skip to content

Commit 7db4b08

Browse files
MrgSubMrgSub
authored
Fixes (Mail-0#1397)
# READ CAREFULLY THEN REMOVE Remove bullet points that are not relevant. PLEASE REFRAIN FROM USING AI TO WRITE YOUR CODE AND PR DESCRIPTION. IF YOU DO USE AI TO WRITE YOUR CODE PLEASE PROVIDE A DESCRIPTION AND REVIEW IT CAREFULLY. MAKE SURE YOU UNDERSTAND THE CODE YOU ARE SUBMITTING USING AI. - Pull requests that do not follow these guidelines will be closed without review or comment. - If you use AI to write your PR description your pr will be close without review or comment. - If you are unsure about anything, feel free to ask for clarification. ## Description Please provide a clear description of your changes. --- ## Type of Change Please delete options that are not relevant. - [ ] 🐛 Bug fix (non-breaking change which fixes an issue) - [ ] ✨ New feature (non-breaking change which adds functionality) - [ ] 💥 Breaking change (fix or feature with breaking changes) - [ ] 📝 Documentation update - [ ] 🎨 UI/UX improvement - [ ] 🔒 Security enhancement - [ ] ⚡ Performance improvement ## Areas Affected Please check all that apply: - [ ] Email Integration (Gmail, IMAP, etc.) - [ ] User Interface/Experience - [ ] Authentication/Authorization - [ ] Data Storage/Management - [ ] API Endpoints - [ ] Documentation - [ ] Testing Infrastructure - [ ] Development Workflow - [ ] Deployment/Infrastructure ## Testing Done Describe the tests you've done: - [ ] Unit tests added/updated - [ ] Integration tests added/updated - [ ] Manual testing performed - [ ] Cross-browser testing (if UI changes) - [ ] Mobile responsiveness verified (if UI changes) ## Security Considerations For changes involving data or authentication: - [ ] No sensitive data is exposed - [ ] Authentication checks are in place - [ ] Input validation is implemented - [ ] Rate limiting is considered (if applicable) ## Checklist - [ ] I have read the [CONTRIBUTING](../CONTRIBUTING.md) document - [ ] My code follows the project's style guidelines - [ ] I have performed a self-review of my code - [ ] I have commented my code, particularly in complex areas - [ ] I have updated the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix/feature works - [ ] All tests pass locally - [ ] Any dependent changes are merged and published ## Additional Notes Add any other context about the pull request here. ## Screenshots/Recordings Add screenshots or recordings here if applicable. --- _By submitting this pull request, I confirm that my contribution is made under the terms of the project's license._
1 parent c5d5479 commit 7db4b08

8 files changed

Lines changed: 952 additions & 96 deletions

File tree

‎apps/mail/components/mail/mail-display.tsx‎

Lines changed: 48 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {
22
Bell,
3-
Calendar,
43
Docx,
54
Figma,
65
Forward,
@@ -13,7 +12,6 @@ import {
1312
Tag,
1413
User,
1514
ChevronDown,
16-
Check,
1715
Printer,
1816
} from '../icons/icons';
1917
import {
@@ -22,59 +20,41 @@ import {
2220
StickyNote,
2321
Users,
2422
Lock,
25-
Download,
26-
MoreVertical,
2723
HardDriveDownload,
28-
Paperclip,
2924
Loader2,
3025
CopyIcon,
3126
SearchIcon,
3227
} from 'lucide-react';
33-
import {
34-
Dialog,
35-
DialogTitle,
36-
DialogHeader,
37-
DialogContent,
38-
DialogTrigger,
39-
DialogDescription,
40-
} from '../ui/dialog';
4128
import {
4229
DropdownMenu,
4330
DropdownMenuContent,
4431
DropdownMenuItem,
4532
DropdownMenuTrigger,
4633
} from '../ui/dropdown-menu';
47-
import { memo, useEffect, useMemo, useState, useRef, useCallback, useLayoutEffect } from 'react';
34+
import { Dialog, DialogTitle, DialogHeader, DialogContent } from '../ui/dialog';
35+
import { memo, useEffect, useMemo, useState, useRef, useCallback } from 'react';
4836
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
4937
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
5038
import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
5139
import type { Sender, ParsedMessage, Attachment } from '@/types';
5240
import { useActiveConnection } from '@/hooks/use-connections';
53-
import { handleUnsubscribe } from '@/lib/email-utils.client';
54-
import { getListUnsubscribeAction } from '@/lib/email-utils';
55-
import AttachmentsAccordion from './attachments-accordion';
5641
import { cn, getEmailLogo, formatDate } from '@/lib/utils';
5742
import { useBrainState } from '../../hooks/use-summary';
5843
import { useTRPC } from '@/providers/query-provider';
5944
import { useThreadLabels } from '@/hooks/use-labels';
6045
import { useMutation } from '@tanstack/react-query';
6146
import { Markdown } from '@react-email/components';
62-
import AttachmentDialog from './attachment-dialog';
6347
import { useSummary } from '@/hooks/use-summary';
6448
import { TextShimmer } from '../ui/text-shimmer';
65-
import { useSession } from '@/lib/auth-client';
6649
import { RenderLabels } from './render-labels';
67-
import ReplyCompose from './reply-composer';
68-
import { Separator } from '../ui/separator';
6950
import { MailIframe } from './mail-iframe';
7051
import { useTranslations } from 'use-intl';
7152
import { useParams } from 'react-router';
72-
import { MailLabels } from './mail-list';
7353
import { FileText } from 'lucide-react';
74-
import { format, set } from 'date-fns';
7554
import { Button } from '../ui/button';
7655
import { useQueryState } from 'nuqs';
7756
import { Badge } from '../ui/badge';
57+
import { format } from 'date-fns';
7858

7959
// HTML escaping function to prevent XSS attacks
8060
function escapeHtml(text: string): string {
@@ -664,7 +644,7 @@ const MoreAboutPerson = ({
664644
} = useMutation(trpc.ai.webSearch.mutationOptions());
665645
const handleSearch = useCallback(() => {
666646
doSearch({
667-
query: `In 50 words or less: What is the background of ${person.name} & ${person.email}, of ${person.email.split('@')[1]}.
647+
query: `In 50 words or less: What is the background of ${person.name} & ${person.email}, of ${person.email.split('@')[1]}.
668648
This could be a phishing email address, indicate if the domain is suspicious, example: x.io is not a valid domain for x.com | example: x.com is a valid domain for x.com | example: paypalcom.com is not a valid domain for paypal.com`,
669649
});
670650
}, [person.name]);
@@ -934,7 +914,7 @@ const MailDisplay = ({ emailData, index, totalEmails, demo, threadAttachments }:
934914
padding: 0;
935915
box-sizing: border-box;
936916
}
937-
917+
938918
body {
939919
font-family: Arial, sans-serif;
940920
line-height: 1.5;
@@ -943,123 +923,123 @@ const MailDisplay = ({ emailData, index, totalEmails, demo, threadAttachments }:
943923
padding: 20px;
944924
font-size: 12px;
945925
}
946-
926+
947927
.email-container {
948928
max-width: 100%;
949929
margin: 0 auto;
950930
background: white;
951931
}
952-
932+
953933
.email-header {
954934
margin-bottom: 25px;
955935
}
956-
936+
957937
.email-title {
958938
font-size: 18px;
959939
font-weight: bold;
960940
color: #000;
961941
margin-bottom: 15px;
962942
word-wrap: break-word;
963943
}
964-
944+
965945
.email-meta {
966946
margin-bottom: 20px;
967947
}
968-
948+
969949
.meta-row {
970950
margin-bottom: 5px;
971951
display: flex;
972952
align-items: flex-start;
973953
}
974-
954+
975955
.meta-label {
976956
font-weight: bold;
977957
min-width: 60px;
978958
color: #333;
979959
margin-right: 10px;
980960
}
981-
961+
982962
.meta-value {
983963
flex: 1;
984964
word-wrap: break-word;
985965
color: #333;
986966
}
987-
967+
988968
.separator {
989969
width: 100%;
990970
height: 1px;
991971
background: #ddd;
992972
margin: 20px 0;
993973
}
994-
974+
995975
.email-body {
996976
margin: 20px 0;
997977
background: white;
998978
}
999-
979+
1000980
.email-content {
1001981
word-wrap: break-word;
1002982
overflow-wrap: break-word;
1003983
font-size: 12px;
1004984
line-height: 1.6;
1005985
}
1006-
986+
1007987
.email-content img {
1008988
max-width: 100% !important;
1009989
height: auto !important;
1010990
display: block;
1011991
margin: 10px 0;
1012992
}
1013-
993+
1014994
.email-content table {
1015995
width: 100%;
1016996
border-collapse: collapse;
1017997
margin: 10px 0;
1018998
}
1019-
999+
10201000
.email-content td, .email-content th {
10211001
padding: 6px;
10221002
text-align: left;
10231003
font-size: 11px;
10241004
}
1025-
1005+
10261006
.email-content a {
10271007
color: #0066cc;
10281008
text-decoration: underline;
10291009
}
1030-
1010+
10311011
.attachments-section {
10321012
margin-top: 25px;
10331013
background: white;
10341014
}
1035-
1015+
10361016
.attachments-title {
10371017
font-size: 14px;
10381018
font-weight: bold;
10391019
color: #000;
10401020
margin-bottom: 10px;
10411021
}
1042-
1022+
10431023
.attachment-item {
10441024
margin-bottom: 5px;
10451025
font-size: 11px;
10461026
padding: 3px 0;
10471027
}
1048-
1028+
10491029
.attachment-name {
10501030
font-weight: 500;
10511031
color: #333;
10521032
}
1053-
1033+
10541034
.attachment-size {
10551035
color: #666;
10561036
font-size: 10px;
10571037
}
1058-
1038+
10591039
.labels-section {
10601040
margin: 10px 0;
10611041
}
1062-
1042+
10631043
.label-badge {
10641044
display: inline-block;
10651045
padding: 2px 6px;
@@ -1069,7 +1049,7 @@ const MailDisplay = ({ emailData, index, totalEmails, demo, threadAttachments }:
10691049
margin-right: 5px;
10701050
margin-bottom: 3px;
10711051
}
1072-
1052+
10731053
@media print {
10741054
body {
10751055
margin: 0;
@@ -1078,46 +1058,46 @@ const MailDisplay = ({ emailData, index, totalEmails, demo, threadAttachments }:
10781058
-webkit-print-color-adjust: exact;
10791059
print-color-adjust: exact;
10801060
}
1081-
1061+
10821062
.email-container {
10831063
max-width: none;
10841064
width: 100%;
10851065
}
1086-
1087-
1066+
1067+
10881068
.separator {
10891069
background: #000 !important;
10901070
}
1091-
1071+
10921072
.email-content a {
10931073
color: #000 !important;
10941074
}
1095-
1075+
10961076
.label-badge {
10971077
background: #f0f0f0 !important;
10981078
border: 1px solid #ccc;
10991079
}
1100-
1080+
11011081
.no-print {
11021082
display: none !important;
11031083
}
1104-
1084+
11051085
/* Remove any default borders */
11061086
* {
11071087
border: none !important;
11081088
box-shadow: none !important;
11091089
}
1110-
1090+
11111091
/* Ensure clean page breaks */
11121092
.email-header {
11131093
page-break-after: avoid;
11141094
}
1115-
1095+
11161096
.attachments-section {
11171097
page-break-inside: avoid;
11181098
}
11191099
}
1120-
1100+
11211101
@page {
11221102
margin: 0.5in;
11231103
size: A4;
@@ -1129,7 +1109,7 @@ const MailDisplay = ({ emailData, index, totalEmails, demo, threadAttachments }:
11291109
<!-- Email Header -->
11301110
<div class="email-header">
11311111
<h1 class="email-title">${emailData.subject || 'No Subject'}</h1>
1132-
1112+
11331113
${
11341114
emailData?.tags && emailData.tags.length > 0
11351115
? `
@@ -1141,16 +1121,16 @@ const MailDisplay = ({ emailData, index, totalEmails, demo, threadAttachments }:
11411121
`
11421122
: ''
11431123
}
1144-
1124+
11451125
<div class="email-meta">
11461126
<div class="meta-row">
11471127
<span class="meta-label">From:</span>
11481128
<span class="meta-value">
1149-
${cleanNameDisplay(emailData.sender?.name)}
1129+
${cleanNameDisplay(emailData.sender?.name)}
11501130
${emailData.sender?.email ? `&lt;${emailData.sender.email}&gt;` : ''}
11511131
</span>
11521132
</div>
1153-
1133+
11541134
${
11551135
emailData.to && emailData.to.length > 0
11561136
? `
@@ -1168,7 +1148,7 @@ const MailDisplay = ({ emailData, index, totalEmails, demo, threadAttachments }:
11681148
`
11691149
: ''
11701150
}
1171-
1151+
11721152
${
11731153
emailData.cc && emailData.cc.length > 0
11741154
? `
@@ -1186,7 +1166,7 @@ const MailDisplay = ({ emailData, index, totalEmails, demo, threadAttachments }:
11861166
`
11871167
: ''
11881168
}
1189-
1169+
11901170
${
11911171
emailData.bcc && emailData.bcc.length > 0
11921172
? `
@@ -1204,23 +1184,23 @@ const MailDisplay = ({ emailData, index, totalEmails, demo, threadAttachments }:
12041184
`
12051185
: ''
12061186
}
1207-
1187+
12081188
<div class="meta-row">
12091189
<span class="meta-label">Date:</span>
12101190
<span class="meta-value">${formatDate(emailData.receivedOn)}</span>
12111191
</div>
12121192
</div>
12131193
</div>
1214-
1194+
12151195
<div class="separator"></div>
1216-
1196+
12171197
<!-- Email Body -->
12181198
<div class="email-body">
12191199
<div class="email-content">
12201200
${escapeHtml(emailData.decodedBody) || '<p><em>No email content available</em></p>'}
12211201
</div>
12221202
</div>
1223-
1203+
12241204
<!-- Attachments -->
12251205
${
12261206
emailData.attachments && emailData.attachments.length > 0
@@ -1229,7 +1209,7 @@ const MailDisplay = ({ emailData, index, totalEmails, demo, threadAttachments }:
12291209
<h2 class="attachments-title">Attachments (${emailData.attachments.length})</h2>
12301210
${emailData.attachments
12311211
.map(
1232-
(attachment, index) => `
1212+
(attachment) => `
12331213
<div class="attachment-item">
12341214
<span class="attachment-name">${attachment.filename}</span>
12351215
${formatFileSize(attachment.size) ? ` - <span class="attachment-size">${formatFileSize(attachment.size)}</span>` : ''}

0 commit comments

Comments
 (0)