officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

email: charset decoding, inline attachments, UI fixes

Browse Source 
- respect charset from Content-Type when decoding body and headers
- detect inline attachments with filenames (not just disposition: attachment)
- fix broken decodeQuotedPrintable reference in parseAttachments
- white background for email iframe (emails designed for light bg)
- sticky header in email list, scrollable message area
- arrow key navigation between emails with scroll-into-view
- /email/:id routing for deep linking to specific emails
- empty folder shows "No emails in this folder" instead of losing header
- fix attachment viewer header overlap with dialog close button

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-03-02 20:00:45 +00:00
co-authored by Claude Opus 4.6
parent de1baa1588
commit b963d9b7a7
5 changed files with 119 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/officer-web/Screens/Dashboard/Email/EmailList.tsx
+36 -5
View File
@@ -96,6 +96,30 @@ export const EmailList = () => {
const total = data?.total ?? 0;
const totalPages = Math.max(1, Math.ceil(total / LIMIT));
// Arrow key navigation
useEffect(() => {
const handleKeyDown = (ev: KeyboardEvent) => {
if (ev.key !== 'ArrowUp' && ev.key !== 'ArrowDown') return;
if (messages.length === 0) return;
ev.preventDefault();
const currentIndex = selectedId ? messages.findIndex((m) => m.id === selectedId) : -1;
let nextId: string | undefined;
if (ev.key === 'ArrowDown') {
const next = currentIndex + 1;
if (next < messages.length) nextId = messages[next]!.id;
} else {
const prev = currentIndex - 1;
if (prev >= 0) nextId = messages[prev]!.id;
}
if (nextId) {
setSelectedId(nextId);
document.querySelector(`[data-email-id="${nextId}"]`)?.scrollIntoView({ block: 'nearest' });
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [messages, selectedId]);
if (isLoading) {
return (
<div className="flex h-full items-center justify-center text-sm opacity-50">
@@ -104,7 +128,9 @@ export const EmailList = () => {
);
}
if (messages.length === 0 && page === 1) {
// Show onboarding empty state only when no emails exist at all
const hasNoEmails = total === 0 && folder === 'inbox' && !allCount?.total;
if (hasNoEmails && !isLoading && page === 1) {
return (
<div className="flex h-full flex-col items-center justify-center gap-3 text-sm opacity-50">
<Mail className="h-8 w-8" />
@@ -131,8 +157,8 @@ export const EmailList = () => {
}
return (
<div className="flex h-full flex-col overflow-y-auto">
<div className="flex items-center gap-2 border-b px-3 py-2">
<div className="flex h-full flex-col">
<div className="flex shrink-0 items-center gap-2 border-b px-3 py-2">
<div className="flex items-center gap-1">
{FOLDERS.map((f) => {
const Icon = f.icon;
@@ -187,12 +213,16 @@ export const EmailList = () => {
</div>
)}
</div>
<div className="flex flex-1 flex-col divide-y divide-white/10">
{messages.length === 0 ? (
<div className="flex flex-1 items-center justify-center text-sm opacity-40">No emails in this folder</div>
) : (
<div className="flex flex-1 flex-col divide-y divide-white/10 overflow-y-auto">
{messages.map((msg: EmailSummary) => (
<button
key={msg.id}
data-email-id={msg.id}
onClick={() => setSelectedId(msg.id)}
className={`flex flex-col gap-0.5 px-3 py-2.5 text-left transition-colors cursor-pointer ${
className={`flex flex-col gap-0.5 px-3 py-2.5 text-left transition-colors cursor-pointer shrink-0 ${
selectedId === msg.id ? 'bg-accent' : 'hover:bg-accent/50'
}`}
>
@@ -213,6 +243,7 @@ export const EmailList = () => {
</button>
))}
</div>
)}
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Email/EmailReader.tsx
+3 -3
View File
@@ -27,8 +27,8 @@ const HtmlBody = ({ html }: { html: string }) => {
<html>
<head>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; margin: 0; padding: 16px; color: #e0e0e0; background: transparent; }
a { color: #60a5fa; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; margin: 0; padding: 16px; color: #1a1a1a; background: #ffffff; }
a { color: #1a73e8; }
img { max-width: 100%; height: auto; }
</style>
</head>
@@ -126,7 +126,7 @@ export const EmailReader = () => {
fileName={openAttachment.fileName}
root={openAttachment.root}
>
<div className="flex shrink-0 items-center gap-2 border-b px-4 py-1.5">
<div className="flex shrink-0 items-center gap-2 border-b px-4 pr-12 py-1.5">
<FileViewerHeader />
</div>
<div className="min-h-0 flex-1">
src/apps/officer-web/Screens/Dashboard/Email/EmailScreen.tsx
+18 -1
View File
@@ -1,4 +1,5 @@
import { useMemo, useCallback } from 'react';
import { useMemo, useCallback, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router';
import type { LayoutNode, PanelComponents } from 'officerdev';
import { WorkspaceView } from 'officerdev';
import { useDashboardState } from 'state/useDashboardState';
@@ -12,7 +13,23 @@ const PROMPT_PREFIX = `You are an email assistant. The user has a local SQLite e
export const EmailScreen = () => {
const isMobile = useIsMobile();
const { emailId } = useParams<{ emailId?: string }>();
const navigate = useNavigate();
const [selectedId, setSelectedId] = useGlobal<string | null>('EMAIL_SELECTED', null);
// Sync URL param → global state
useEffect(() => {
if (emailId && emailId !== selectedId) setSelectedId(emailId);
}, [emailId]);
// Sync global state → URL
useEffect(() => {
if (selectedId && selectedId !== emailId) {
navigate(`/email/${selectedId}`, { replace: true });
} else if (!selectedId && emailId) {
navigate('/email', { replace: true });
}
}, [selectedId]);
const workspace = useDashboardState<LayoutNode>('screens/email', defaultLayout);
const components: PanelComponents = useMemo(