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))
{