feat: folder view — clicking sidebar items shows filtered email list
- New FolderView page at /app/folder/:slug renders a paginated email table - Sidebar links now route to their respective folder views - Extended SearchRequestDto with IsInInbox, IsStarred, IsTrashed, GmailLabel, Category, MinSizeBytes - SearchService applies the new filters; GmailLabel does a label-id lookup (SENT/DRAFT/SPAM) - Frontend folderToRequest() maps every slug to the correct search payload - Email rows show sender, subject+snippet, attachment icon, size, date; bold for unread - Pagination controls for large folders Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
cesnimda
@@ -62,6 +62,40 @@ export const LayoutApi = {
|
||||
save: (layout) => api.put('/widgetlayout', layout)
|
||||
};
|
||||
|
||||
export const SearchApi = {
|
||||
folder: (slug, page = 1, pageSize = 50) =>
|
||||
api.post('/search', folderToRequest(slug, page, pageSize)).then((r) => r.data),
|
||||
};
|
||||
|
||||
function folderToRequest(slug, page, pageSize) {
|
||||
const base = { page, pageSize };
|
||||
switch (slug) {
|
||||
// ── Mailbox ──
|
||||
case 'inbox': return { ...base, isInInbox: true, isTrashed: false };
|
||||
case 'allmail': return { ...base };
|
||||
case 'unread': return { ...base, isUnread: true };
|
||||
case 'starred': return { ...base, isStarred: true };
|
||||
case 'sent': return { ...base, gmailLabel: 'SENT' };
|
||||
case 'drafts': return { ...base, gmailLabel: 'DRAFT' };
|
||||
case 'archive': return { ...base, isInInbox: false, isTrashed: false };
|
||||
case 'spam': return { ...base, gmailLabel: 'SPAM' };
|
||||
case 'trash': return { ...base, isTrashed: true };
|
||||
// ── Special filters ──
|
||||
case 'large': return { ...base, minSizeBytes: 5_000_000 };
|
||||
case 'old': {
|
||||
const d = new Date(); d.setFullYear(d.getFullYear() - 1);
|
||||
return { ...base, to: d.toISOString().slice(0, 10) };
|
||||
}
|
||||
// ── Smart folders ──
|
||||
case 'automated': return { ...base, category: 'Notification' };
|
||||
case 'finance': return { ...base, category: 'Finance' };
|
||||
case 'social': return { ...base, category: 'Social' };
|
||||
case 'shopping': return { ...base, category: 'Promotional' };
|
||||
case 'noreply': return { ...base, query: 'from:noreply' };
|
||||
default: return { ...base };
|
||||
}
|
||||
}
|
||||
|
||||
export const ExportApi = {
|
||||
reportUrl: (format) => `/api/v1/export/report?format=${format}`
|
||||
};
|
||||
|
||||
@@ -6,6 +6,7 @@ import Dashboard from './pages/Dashboard.jsx';
|
||||
import Senders from './pages/Senders.jsx';
|
||||
import Cleanup from './pages/Cleanup.jsx';
|
||||
import Unsubscribe from './pages/Unsubscribe.jsx';
|
||||
import FolderView from './pages/FolderView.jsx';
|
||||
import Layout from './components/Layout.jsx';
|
||||
import './styles.css';
|
||||
|
||||
@@ -22,6 +23,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<Route path="senders" element={<Senders />} />
|
||||
<Route path="cleanup" element={<Cleanup />} />
|
||||
<Route path="unsubscribe" element={<Unsubscribe />} />
|
||||
<Route path="folder/:slug" element={<FolderView />} />
|
||||
</Route>
|
||||
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { SearchApi } from '../api/client.js';
|
||||
|
||||
const FOLDER_META = {
|
||||
inbox: { icon: '📥', label: 'Inbox' },
|
||||
allmail: { icon: '📬', label: 'All Mail' },
|
||||
unread: { icon: '🔵', label: 'Unread' },
|
||||
starred: { icon: '⭐', label: 'Starred' },
|
||||
sent: { icon: '📤', label: 'Sent' },
|
||||
drafts: { icon: '✏️', label: 'Drafts' },
|
||||
archive: { icon: '📦', label: 'Archive' },
|
||||
spam: { icon: '🚫', label: 'Spam' },
|
||||
trash: { icon: '🗑️', label: 'Trash' },
|
||||
unlabeled: { icon: '🏷️', label: 'Unlabeled' },
|
||||
pinned: { icon: '📌', label: 'Pinned' },
|
||||
readlater: { icon: '🔖', label: 'Read Later' },
|
||||
large: { icon: '📎', label: 'Large Mail' },
|
||||
old: { icon: '🕰️', label: 'Old Mail' },
|
||||
automated: { icon: '🤖', label: 'Automated' },
|
||||
noreply: { icon: '🔇', label: 'No-Reply' },
|
||||
shopping: { icon: '🛍️', label: 'Online Shopping' },
|
||||
gaming: { icon: '🎮', label: 'Gaming' },
|
||||
finance: { icon: '💳', label: 'Finance & Insurance' },
|
||||
sales: { icon: '🏷️', label: 'Seasonal Sales' },
|
||||
ridesharing:{ icon: '🚗', label: 'Ride Sharing' },
|
||||
food: { icon: '🍕', label: 'Food Delivery' },
|
||||
social: { icon: '📱', label: 'Social Notifications' },
|
||||
wellness: { icon: '🏃', label: 'Wellness & Sport' },
|
||||
};
|
||||
|
||||
const PAGE_SIZE = 50;
|
||||
|
||||
const fmtDate = (iso) => {
|
||||
const d = new Date(iso);
|
||||
const now = new Date();
|
||||
const diffDays = (now - d) / 86400000;
|
||||
if (diffDays < 1) return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
if (diffDays < 7) return d.toLocaleDateString([], { weekday: 'short' });
|
||||
return d.toLocaleDateString([], { month: 'short', day: 'numeric' });
|
||||
};
|
||||
|
||||
const fmtSize = (b) => {
|
||||
if (b < 1024) return `${b} B`;
|
||||
if (b < 1048576) return `${(b / 1024).toFixed(0)} KB`;
|
||||
return `${(b / 1048576).toFixed(1)} MB`;
|
||||
};
|
||||
|
||||
export default function FolderView() {
|
||||
const { slug } = useParams();
|
||||
const meta = FOLDER_META[slug] ?? { icon: '📁', label: slug };
|
||||
|
||||
const [result, setResult] = useState(null);
|
||||
const [page, setPage] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const load = useCallback((p) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
SearchApi.folder(slug, p, PAGE_SIZE)
|
||||
.then((r) => { setResult(r); setPage(p); })
|
||||
.catch(() => setError('Failed to load emails.'))
|
||||
.finally(() => setLoading(false));
|
||||
}, [slug]);
|
||||
|
||||
useEffect(() => { load(1); }, [load]);
|
||||
|
||||
const emails = result?.items ?? [];
|
||||
const totalPages = result?.totalPages ?? 1;
|
||||
|
||||
return (
|
||||
<div className="folder-view">
|
||||
<div className="folder-view-head">
|
||||
<h2 className="folder-view-title">{meta.icon} {meta.label}</h2>
|
||||
{result && (
|
||||
<span className="folder-view-count">{result.totalCount.toLocaleString()} email{result.totalCount !== 1 ? 's' : ''}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loading && <div className="fv-loading">Loading…</div>}
|
||||
{error && <div className="fv-error">{error}</div>}
|
||||
|
||||
{!loading && !error && emails.length === 0 && (
|
||||
<div className="fv-empty">No emails in this folder.</div>
|
||||
)}
|
||||
|
||||
{!loading && emails.length > 0 && (
|
||||
<>
|
||||
<table className="email-list">
|
||||
<tbody>
|
||||
{emails.map((e) => (
|
||||
<tr key={e.id} className={`email-row${e.isUnread ? ' email-row--unread' : ''}`}>
|
||||
<td className="el-unread">{e.isUnread && <span className="unread-dot" />}</td>
|
||||
<td className="el-sender" title={e.senderAddress}>
|
||||
{e.senderDisplayName || e.senderAddress}
|
||||
</td>
|
||||
<td className="el-subject">
|
||||
<span className="el-subj-text">{e.subject || '(no subject)'}</span>
|
||||
{e.snippet && <span className="el-snippet"> — {e.snippet}</span>}
|
||||
</td>
|
||||
<td className="el-meta">
|
||||
{e.hasAttachments && <span className="el-attach" title="Has attachment">📎</span>}
|
||||
{e.sizeEstimateBytes > 1048576 && <span className="el-size">{fmtSize(e.sizeEstimateBytes)}</span>}
|
||||
</td>
|
||||
<td className="el-date">{fmtDate(e.sentAtUtc)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className="fv-pagination">
|
||||
<button disabled={page <= 1} onClick={() => load(page - 1)}>← Prev</button>
|
||||
<span>Page {page} of {totalPages}</span>
|
||||
<button disabled={page >= totalPages} onClick={() => load(page + 1)}>Next →</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -200,6 +200,35 @@ input, select { background: var(--panel-2); border: 1px solid #2c3550; color: va
|
||||
.closing h2 { font-size: 28px; margin-bottom: 18px; }
|
||||
.landing-footer { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #2c3550; }
|
||||
|
||||
/* ── Folder view ── */
|
||||
.folder-view { max-width: 960px; }
|
||||
.folder-view-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
|
||||
.folder-view-title { margin: 0; font-size: 20px; font-weight: 700; }
|
||||
.folder-view-count { color: var(--muted); font-size: 13px; }
|
||||
.fv-loading, .fv-empty { color: var(--muted); font-size: 14px; padding: 32px 0; }
|
||||
.fv-error { color: var(--danger); font-size: 14px; padding: 12px 0; }
|
||||
|
||||
.email-list { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
.email-row { border-bottom: 1px solid #2c3550; cursor: default; }
|
||||
.email-row:hover { background: var(--panel); }
|
||||
.email-row--unread .el-sender,
|
||||
.email-row--unread .el-subj-text { font-weight: 700; color: var(--text); }
|
||||
|
||||
.el-unread { width: 14px; padding: 10px 4px 10px 0; }
|
||||
.unread-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
|
||||
.el-sender { width: 180px; padding: 10px 12px 10px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
|
||||
.el-subject { padding: 10px 8px; overflow: hidden; }
|
||||
.el-subj-text { color: var(--text); }
|
||||
.el-snippet { color: var(--muted); }
|
||||
.el-meta { width: 80px; padding: 10px 8px; text-align: right; white-space: nowrap; }
|
||||
.el-attach { margin-right: 4px; font-size: 12px; }
|
||||
.el-size { font-size: 11px; color: var(--muted); }
|
||||
.el-date { width: 70px; padding: 10px 0 10px 8px; text-align: right; color: var(--muted); white-space: nowrap; font-size: 12px; }
|
||||
|
||||
.fv-pagination { display: flex; align-items: center; gap: 14px; margin-top: 16px; font-size: 13px; color: var(--muted); }
|
||||
.fv-pagination button { background: var(--panel); border: 1px solid #2c3550; color: var(--text); padding: 6px 12px; }
|
||||
.fv-pagination button:disabled { opacity: 0.35; cursor: default; }
|
||||
|
||||
/* ── Sync splash ── */
|
||||
.splash {
|
||||
position: fixed; inset: 0; z-index: 1000;
|
||||
|
||||
Reference in New Issue
Block a user