From 20d51b2c15bb9c42a7c7357abf4ab53603e575d7 Mon Sep 17 00:00:00 2001 From: cesnimda Date: Tue, 30 Jun 2026 19:59:01 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20folder=20view=20=E2=80=94=20clicking=20?= =?UTF-8?q?sidebar=20items=20shows=20filtered=20email=20list?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- frontend/src/api/client.js | 34 +++++ frontend/src/main.jsx | 2 + frontend/src/pages/FolderView.jsx | 123 ++++++++++++++++++ frontend/src/styles.css | 29 +++++ src/InboxIntel.Application/DTOs/SearchDtos.cs | 9 +- .../Search/SearchService.cs | 22 ++++ 6 files changed, 218 insertions(+), 1 deletion(-) create mode 100644 frontend/src/pages/FolderView.jsx diff --git a/frontend/src/api/client.js b/frontend/src/api/client.js index 4e64106..cef7c71 100644 --- a/frontend/src/api/client.js +++ b/frontend/src/api/client.js @@ -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}` }; diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index 2ecb8b3..d5bab77 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -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( } /> } /> } /> + } /> } /> diff --git a/frontend/src/pages/FolderView.jsx b/frontend/src/pages/FolderView.jsx new file mode 100644 index 0000000..6ab6b4b --- /dev/null +++ b/frontend/src/pages/FolderView.jsx @@ -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 ( +
+
+

{meta.icon} {meta.label}

+ {result && ( + {result.totalCount.toLocaleString()} email{result.totalCount !== 1 ? 's' : ''} + )} +
+ + {loading &&
Loading…
} + {error &&
{error}
} + + {!loading && !error && emails.length === 0 && ( +
No emails in this folder.
+ )} + + {!loading && emails.length > 0 && ( + <> + + + {emails.map((e) => ( + + + + + + + + ))} + +
{e.isUnread && } + {e.senderDisplayName || e.senderAddress} + + {e.subject || '(no subject)'} + {e.snippet && — {e.snippet}} + + {e.hasAttachments && 📎} + {e.sizeEstimateBytes > 1048576 && {fmtSize(e.sizeEstimateBytes)}} + {fmtDate(e.sentAtUtc)}
+ + {totalPages > 1 && ( +
+ + Page {page} of {totalPages} + +
+ )} + + )} +
+ ); +} diff --git a/frontend/src/styles.css b/frontend/src/styles.css index d242b2a..4983c98 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -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; diff --git a/src/InboxIntel.Application/DTOs/SearchDtos.cs b/src/InboxIntel.Application/DTOs/SearchDtos.cs index d31d92f..9d00d9b 100644 --- a/src/InboxIntel.Application/DTOs/SearchDtos.cs +++ b/src/InboxIntel.Application/DTOs/SearchDtos.cs @@ -16,4 +16,11 @@ public record SearchRequestDto( bool? HasAttachments, bool FuzzyMatch = false, int Page = 1, - int PageSize = 50); + int PageSize = 50, + // Folder / label filters + bool? IsInInbox = null, + bool? IsStarred = null, + bool? IsTrashed = null, + string? GmailLabel = null, // e.g. "SENT", "DRAFT", "SPAM" + string? Category = null, // EmailCategory name, e.g. "Finance" + long? MinSizeBytes = null); diff --git a/src/InboxIntel.Infrastructure/Search/SearchService.cs b/src/InboxIntel.Infrastructure/Search/SearchService.cs index c74dbc7..bb3793b 100644 --- a/src/InboxIntel.Infrastructure/Search/SearchService.cs +++ b/src/InboxIntel.Infrastructure/Search/SearchService.cs @@ -1,6 +1,7 @@ using InboxIntel.Application.Abstractions; using InboxIntel.Application.Common; using InboxIntel.Application.DTOs; +using InboxIntel.Domain.Enums; using InboxIntel.Infrastructure.Persistence; using Microsoft.EntityFrameworkCore; @@ -32,6 +33,27 @@ public class SearchService : ISearchService q = q.Where(e => e.IsUnread == unread); if (r.HasAttachments is { } att) q = q.Where(e => e.HasAttachments == att); + if (r.IsInInbox is { } inbox) + q = q.Where(e => e.IsInInbox == inbox); + if (r.IsStarred is { } starred) + q = q.Where(e => e.IsStarred == starred); + if (r.IsTrashed is { } trashed) + q = q.Where(e => e.IsTrashed == trashed); + if (r.MinSizeBytes is { } minSize) + q = q.Where(e => e.SizeEstimateBytes >= minSize); + if (!string.IsNullOrWhiteSpace(r.Category) && Enum.TryParse(r.Category, true, out var cat)) + q = q.Where(e => e.Category == cat); + if (!string.IsNullOrWhiteSpace(r.GmailLabel)) + { + var labelId = await _db.Labels + .Where(l => l.UserId == userId && l.GmailLabelId == r.GmailLabel.ToUpperInvariant()) + .Select(l => (Guid?)l.Id) + .FirstOrDefaultAsync(ct); + if (labelId.HasValue) + q = q.Where(e => e.EmailLabels.Any(el => el.LabelId == labelId.Value)); + else + return new PagedResult { Items = [], Page = r.Page, PageSize = r.PageSize, TotalCount = 0 }; + } if (!string.IsNullOrWhiteSpace(r.Query)) {