feat: Smart Folders sidebar, category heatmap, sidebar counts API
- Replace plain activity heatmap with CategoryHeatmapWidget on dashboard - Add collapsible Smart Folders sidebar with Favorites, Mailbox, Smart Folders sections - Favorites: customisable pinned shortcuts (default: Inbox, Unread, Large, Old, Read Later); pin/unpin smart folders via buttons; persists to localStorage - Mailbox section: 11 Gmail mailbox items with icons and live count badges - Smart Folders section: 10 category folders sorted by count desc - Live count badges via new GET /api/v1/analytics/sidebar-counts endpoint - Backend: SidebarCountsDto, GetSidebarCountsAsync with label lookups for SENT/DRAFT/SPAM, size/age filters, EmailCategory mapping - Sidebar collapses to icon-only; section states persist to localStorage Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
cesnimda
Generated
+2153
File diff suppressed because it is too large
Load Diff
@@ -39,7 +39,11 @@ export const AnalyticsApi = {
|
||||
topSenders: (take = 20) => api.get(`/analytics/top-senders?take=${take}`).then((r) => r.data),
|
||||
volume: (days = 90) => api.get(`/analytics/volume?days=${days}`).then((r) => r.data),
|
||||
heatmap: () => api.get('/analytics/heatmap').then((r) => r.data),
|
||||
attachments: () => api.get('/analytics/attachments').then((r) => r.data)
|
||||
categoryHeatmap: () => api.get('/analytics/category-heatmap').then((r) => r.data),
|
||||
attachments: () => api.get('/analytics/attachments').then((r) => r.data),
|
||||
sidebarCounts: () => api.get('/analytics/sidebar-counts').then((r) => r.data),
|
||||
// Large take to retrieve all senders for the volume-tiers page.
|
||||
allSenders: () => api.get('/analytics/top-senders?take=5000').then((r) => r.data)
|
||||
};
|
||||
|
||||
export const CleanupApi = {
|
||||
|
||||
@@ -1,31 +1,194 @@
|
||||
import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { AuthApi, SyncApi } from '../api/client.js';
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { AuthApi, SyncApi, AnalyticsApi } from '../api/client.js';
|
||||
import Logo from './Logo.jsx';
|
||||
import DevBanner from './DevBanner.jsx';
|
||||
|
||||
// ── Folder definitions ────────────────────────────────────────────────────────
|
||||
|
||||
const MAILBOX = [
|
||||
{ slug: 'inbox', icon: '📥', label: 'Inbox', countKey: 'inbox' },
|
||||
{ slug: 'allmail', icon: '📬', label: 'All Mail', countKey: 'allMail' },
|
||||
{ slug: 'starred', icon: '⭐', label: 'Starred', countKey: 'starred' },
|
||||
{ slug: 'sent', icon: '📤', label: 'Sent', countKey: 'sent' },
|
||||
{ slug: 'drafts', icon: '✏️', label: 'Drafts', countKey: 'drafts' },
|
||||
{ slug: 'archive', icon: '📦', label: 'Archive', countKey: null },
|
||||
{ slug: 'spam', icon: '🚫', label: 'Spam', countKey: 'spam' },
|
||||
{ slug: 'trash', icon: '🗑️', label: 'Trash', countKey: 'trash' },
|
||||
{ slug: 'unlabeled', icon: '🏷️', label: 'Unlabeled', countKey: null },
|
||||
{ slug: 'pinned', icon: '📌', label: 'Pinned', countKey: null },
|
||||
{ slug: 'readlater', icon: '🔖', label: 'Read Later', countKey: null },
|
||||
];
|
||||
|
||||
// Special items always available as favorites (not smart folders)
|
||||
const FAV_SPECIALS = {
|
||||
inbox: { slug: 'inbox', icon: '📥', label: 'Inbox', countKey: 'inbox', type: 'mailbox' },
|
||||
unread: { slug: 'unread', icon: '🔵', label: 'Unread Mail', countKey: 'unread', type: 'filter' },
|
||||
large: { slug: 'large', icon: '📎', label: 'Large Mail', countKey: 'large', type: 'filter' },
|
||||
old: { slug: 'old', icon: '🕰️', label: 'Old Mail', countKey: 'old', type: 'filter' },
|
||||
readlater: { slug: 'readlater', icon: '🔖', label: 'Read Later', countKey: null, type: 'filter' },
|
||||
};
|
||||
|
||||
const DEFAULT_FAV_SLUGS = ['inbox', 'unread', 'large', 'old', 'readlater'];
|
||||
|
||||
const SMART_FOLDERS = [
|
||||
{ slug: 'automated', icon: '🤖', label: 'Automated', countKey: 'automated' },
|
||||
{ slug: 'noreply', icon: '🔇', label: 'No-Reply', countKey: 'noreply' },
|
||||
{ slug: 'shopping', icon: '🛍️', label: 'Online Shopping', countKey: 'shopping' },
|
||||
{ slug: 'gaming', icon: '🎮', label: 'Gaming', countKey: 'gaming' },
|
||||
{ slug: 'finance', icon: '💳', label: 'Finance & Insurance', countKey: 'finance' },
|
||||
{ slug: 'sales', icon: '🏷️', label: 'Seasonal Sales', countKey: 'sales' },
|
||||
{ slug: 'ridesharing', icon: '🚗', label: 'Ride Sharing', countKey: 'ridesharing' },
|
||||
{ slug: 'food', icon: '🍕', label: 'Food Delivery', countKey: 'food' },
|
||||
{ slug: 'social', icon: '📱', label: 'Social Notifications',countKey: 'social' },
|
||||
{ slug: 'wellness', icon: '🏃', label: 'Wellness & Sport', countKey: 'wellness' },
|
||||
];
|
||||
|
||||
// ── Helpers ───────────────────────────────────────────────────────────────────
|
||||
|
||||
const fmtCount = (n) => {
|
||||
if (!n) return null;
|
||||
return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);
|
||||
};
|
||||
|
||||
const LS_FAV = 'ii:fav-slugs';
|
||||
const LS_OPEN = 'ii:sidebar-open';
|
||||
const LS_SECTS = 'ii:sidebar-sections';
|
||||
|
||||
const loadFavs = () => {
|
||||
try { return JSON.parse(localStorage.getItem(LS_FAV)) ?? DEFAULT_FAV_SLUGS; }
|
||||
catch { return DEFAULT_FAV_SLUGS; }
|
||||
};
|
||||
const saveFavs = (v) => localStorage.setItem(LS_FAV, JSON.stringify(v));
|
||||
|
||||
const loadSections = () => {
|
||||
try { return JSON.parse(localStorage.getItem(LS_SECTS)) ?? { fav: true, mailbox: true, smart: true }; }
|
||||
catch { return { fav: true, mailbox: true, smart: true }; }
|
||||
};
|
||||
const saveSections = (v) => localStorage.setItem(LS_SECTS, JSON.stringify(v));
|
||||
|
||||
// ── Sub-components ────────────────────────────────────────────────────────────
|
||||
|
||||
function SectionHead({ label, open, onToggle, collapsed }) {
|
||||
return (
|
||||
<button className="section-head" onClick={onToggle} title={label}>
|
||||
{!collapsed && <span className="section-title">{label}</span>}
|
||||
<span className={`section-arrow${open ? '' : ' section-arrow--closed'}`}>›</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function FolderLink({ item, active, count, collapsed, extra }) {
|
||||
return (
|
||||
<Link
|
||||
to={`/app/folder/${item.slug}`}
|
||||
className={`folder-item${active ? ' folder-item--active' : ''}`}
|
||||
title={item.label}
|
||||
>
|
||||
<span className="folder-icon">{item.icon}</span>
|
||||
{!collapsed && (
|
||||
<>
|
||||
<span className="folder-label">{item.label}</span>
|
||||
<span className="folder-spacer" />
|
||||
{count && <span className="folder-badge">{count}</span>}
|
||||
{extra}
|
||||
</>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Main Layout ───────────────────────────────────────────────────────────────
|
||||
|
||||
export default function Layout() {
|
||||
const [user, setUser] = useState(null);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(() => {
|
||||
try { return localStorage.getItem(LS_OPEN) !== 'false'; } catch { return true; }
|
||||
});
|
||||
const [sections, setSections] = useState(loadSections);
|
||||
const [favSlugs, setFavSlugs] = useState(loadFavs);
|
||||
const [counts, setCounts] = useState(null);
|
||||
|
||||
const loc = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => { AuthApi.me().then(setUser).catch(() => {}); }, []);
|
||||
|
||||
useEffect(() => {
|
||||
AuthApi.me().then(setUser).catch(() => {});
|
||||
AnalyticsApi.sidebarCounts().then(setCounts).catch(() => {});
|
||||
}, []);
|
||||
|
||||
const toggleSidebar = () => {
|
||||
setSidebarOpen((o) => {
|
||||
localStorage.setItem(LS_OPEN, String(!o));
|
||||
return !o;
|
||||
});
|
||||
};
|
||||
|
||||
const toggleSection = (key) => {
|
||||
setSections((s) => {
|
||||
const next = { ...s, [key]: !s[key] };
|
||||
saveSections(next);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const toggleFav = useCallback((slug) => {
|
||||
setFavSlugs((prev) => {
|
||||
const next = prev.includes(slug) ? prev.filter((s) => s !== slug) : [...prev, slug];
|
||||
saveFavs(next);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const nav = [
|
||||
{ to: '/app', label: 'Dashboard', end: true },
|
||||
{ to: '/app/senders', label: 'Senders' },
|
||||
{ to: '/app/cleanup', label: 'Cleanup' },
|
||||
{ to: '/app/unsubscribe', label: 'Unsubscribe' }
|
||||
];
|
||||
|
||||
const isActive = (n) => (n.end ? loc.pathname === n.to : loc.pathname.startsWith(n.to));
|
||||
const isNavActive = (n) => (n.end ? loc.pathname === n.to : loc.pathname.startsWith(n.to));
|
||||
const activeSlug = loc.pathname.startsWith('/app/folder/')
|
||||
? loc.pathname.split('/app/folder/')[1]
|
||||
: null;
|
||||
|
||||
const logout = async () => {
|
||||
try { await AuthApi.logout(); } catch { /* ignore */ }
|
||||
navigate('/');
|
||||
};
|
||||
|
||||
const startSync = async () => {
|
||||
try { await SyncApi.incremental(); } catch { /* ignore */ }
|
||||
if (loc.pathname !== '/app') navigate('/app');
|
||||
window.dispatchEvent(new Event('inboxintel:sync-started'));
|
||||
};
|
||||
|
||||
// Count getters
|
||||
const mailboxCount = (item) => fmtCount(item.countKey ? counts?.[item.countKey] : null);
|
||||
const smartCount = (item) => fmtCount(counts?.smartFolders?.[item.slug]);
|
||||
|
||||
// Build favorites list: specials first (in default order), then pinned smart folders
|
||||
const favItems = favSlugs.map((slug) => {
|
||||
if (FAV_SPECIALS[slug]) return { ...FAV_SPECIALS[slug], source: 'special' };
|
||||
const sf = SMART_FOLDERS.find((f) => f.slug === slug);
|
||||
return sf ? { ...sf, source: 'smart' } : null;
|
||||
}).filter(Boolean);
|
||||
|
||||
const favCount = (item) => {
|
||||
if (item.source === 'smart') return smartCount(item);
|
||||
return fmtCount(item.countKey ? counts?.[item.countKey] : null);
|
||||
};
|
||||
|
||||
// Smart folders sorted by count desc
|
||||
const sortedSmart = [...SMART_FOLDERS].sort((a, b) => {
|
||||
const ca = counts?.smartFolders?.[a.slug] ?? 0;
|
||||
const cb = counts?.smartFolders?.[b.slug] ?? 0;
|
||||
return cb - ca;
|
||||
});
|
||||
|
||||
const isPinnedSmart = (slug) => favSlugs.includes(slug);
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<DevBanner />
|
||||
@@ -33,17 +196,94 @@ export default function Layout() {
|
||||
<Link to="/app" className="brand-link"><Logo size={28} withWordmark /></Link>
|
||||
<nav>
|
||||
{nav.map((n) => (
|
||||
<Link key={n.to} to={n.to} className={isActive(n) ? 'active' : ''}>{n.label}</Link>
|
||||
<Link key={n.to} to={n.to} className={isNavActive(n) ? 'active' : ''}>{n.label}</Link>
|
||||
))}
|
||||
</nav>
|
||||
<div className="spacer" />
|
||||
<button onClick={() => SyncApi.incremental()}>Sync now</button>
|
||||
<button onClick={startSync}>Sync now</button>
|
||||
<span className="user">{user?.email}</span>
|
||||
<button className="ghost" onClick={logout}>Log out</button>
|
||||
</header>
|
||||
<main>
|
||||
<Outlet />
|
||||
</main>
|
||||
|
||||
<div className="app-body">
|
||||
<aside className={`sidebar${sidebarOpen ? '' : ' sidebar--collapsed'}`}>
|
||||
<div className="sidebar-header">
|
||||
{sidebarOpen && <span className="sidebar-brand">Folders</span>}
|
||||
<button className="sidebar-toggle ghost" onClick={toggleSidebar} title={sidebarOpen ? 'Collapse' : 'Expand'}>
|
||||
{sidebarOpen ? '‹' : '›'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ── Favorites ── */}
|
||||
<SectionHead label="Favorites" open={sections.fav} onToggle={() => toggleSection('fav')} collapsed={!sidebarOpen} />
|
||||
{sections.fav && (
|
||||
<ul className="folder-list">
|
||||
{favItems.map((item) => (
|
||||
<li key={item.slug}>
|
||||
<FolderLink
|
||||
item={item}
|
||||
active={activeSlug === item.slug}
|
||||
count={favCount(item)}
|
||||
collapsed={!sidebarOpen}
|
||||
extra={item.source === 'smart' && sidebarOpen && (
|
||||
<button
|
||||
className="fav-pin fav-pin--remove"
|
||||
title="Remove from Favorites"
|
||||
onClick={(e) => { e.preventDefault(); toggleFav(item.slug); }}
|
||||
>✕</button>
|
||||
)}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{/* ── Mailbox ── */}
|
||||
<SectionHead label="Mailbox" open={sections.mailbox} onToggle={() => toggleSection('mailbox')} collapsed={!sidebarOpen} />
|
||||
{sections.mailbox && (
|
||||
<ul className="folder-list">
|
||||
{MAILBOX.map((item) => (
|
||||
<li key={item.slug}>
|
||||
<FolderLink
|
||||
item={item}
|
||||
active={activeSlug === item.slug}
|
||||
count={mailboxCount(item)}
|
||||
collapsed={!sidebarOpen}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{/* ── Smart Folders ── */}
|
||||
<SectionHead label="Smart Folders" open={sections.smart} onToggle={() => toggleSection('smart')} collapsed={!sidebarOpen} />
|
||||
{sections.smart && (
|
||||
<ul className="folder-list">
|
||||
{sortedSmart.map((item) => (
|
||||
<li key={item.slug}>
|
||||
<FolderLink
|
||||
item={item}
|
||||
active={activeSlug === item.slug}
|
||||
count={smartCount(item)}
|
||||
collapsed={!sidebarOpen}
|
||||
extra={sidebarOpen && (
|
||||
<button
|
||||
className={`fav-pin${isPinnedSmart(item.slug) ? ' fav-pin--remove' : ''}`}
|
||||
title={isPinnedSmart(item.slug) ? 'Remove from Favorites' : 'Add to Favorites'}
|
||||
onClick={(e) => { e.preventDefault(); toggleFav(item.slug); }}
|
||||
>{isPinnedSmart(item.slug) ? '✕' : '⊕'}</button>
|
||||
)}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Bar, Line, Doughnut } from 'react-chartjs-2';
|
||||
import { AnalyticsApi } from '../api/client.js';
|
||||
import {
|
||||
Chart as ChartJS, CategoryScale, LinearScale, BarElement, PointElement,
|
||||
LineElement, ArcElement, Tooltip, Legend
|
||||
@@ -91,6 +93,42 @@ export function HeatmapWidget({ heatmap }) {
|
||||
);
|
||||
}
|
||||
|
||||
const DOW = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
||||
|
||||
export function CategoryHeatmapWidget() {
|
||||
const [cells, setCells] = useState(null);
|
||||
useEffect(() => { AnalyticsApi.categoryHeatmap().then(setCells).catch(() => setCells([])); }, []);
|
||||
|
||||
if (!cells) return <div className="widget"><div className="muted">Loading…</div></div>;
|
||||
if (cells.length === 0) return <div className="widget"><h3>Category Heatmap</h3><div className="muted">No data yet — run a sync.</div></div>;
|
||||
|
||||
const categories = [...new Set(cells.map((c) => c.category))].sort();
|
||||
const max = Math.max(1, ...cells.map((c) => c.count));
|
||||
const grid = {};
|
||||
cells.forEach((c) => { grid[`${c.category}-${c.dayOfWeek}`] = c.count; });
|
||||
|
||||
return (
|
||||
<div className="widget">
|
||||
<h3>Category Heatmap</h3>
|
||||
<div className="cat-heatmap">
|
||||
<div className="chm-row chm-head">
|
||||
<span className="chm-label" />
|
||||
{DOW.map((d) => <span key={d} className="chm-col">{d}</span>)}
|
||||
</div>
|
||||
{categories.map((cat) => (
|
||||
<div className="chm-row" key={cat}>
|
||||
<span className="chm-label" title={cat}>{cat}</span>
|
||||
{DOW.map((_, dow) => {
|
||||
const v = grid[`${cat}-${dow}`] || 0;
|
||||
return <span key={dow} className="chm-cell" style={{ opacity: 0.12 + 0.88 * (v / max) }} title={`${cat} · ${DOW[dow]} — ${v}`}>{v || ''}</span>;
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function AttachmentsWidget({ attachments }) {
|
||||
if (!attachments) return <Empty />;
|
||||
const data = {
|
||||
|
||||
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
||||
import Landing from './pages/Landing.jsx';
|
||||
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 Layout from './components/Layout.jsx';
|
||||
@@ -18,6 +19,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
{/* Authenticated app */}
|
||||
<Route path="/app" element={<Layout />}>
|
||||
<Route index element={<Dashboard />} />
|
||||
<Route path="senders" element={<Senders />} />
|
||||
<Route path="cleanup" element={<Cleanup />} />
|
||||
<Route path="unsubscribe" element={<Unsubscribe />} />
|
||||
</Route>
|
||||
|
||||
@@ -6,7 +6,7 @@ import { AnalyticsApi, LayoutApi, ExportApi, SyncApi } from '../api/client.js';
|
||||
import SyncSplash from '../components/SyncSplash.jsx';
|
||||
import {
|
||||
HealthWidget, StatCard, TopSendersWidget, VolumeWidget,
|
||||
HeatmapWidget, AttachmentsWidget, StorageWidget
|
||||
CategoryHeatmapWidget, AttachmentsWidget, StorageWidget
|
||||
} from '../components/widgets.jsx';
|
||||
|
||||
// Default grid geometry; overridden by the user's saved layout.
|
||||
@@ -17,8 +17,8 @@ const DEFAULT_LAYOUT = [
|
||||
{ i: 'storage', x: 7, y: 0, w: 2, h: 2 },
|
||||
{ i: 'top-senders', x: 3, y: 2, w: 3, h: 5 },
|
||||
{ i: 'volume', x: 6, y: 2, w: 6, h: 4 },
|
||||
{ i: 'heatmap', x: 0, y: 5, w: 6, h: 4 },
|
||||
{ i: 'attachments', x: 6, y: 6, w: 4, h: 4 }
|
||||
{ i: 'category-heatmap', x: 0, y: 5, w: 6, h: 5 },
|
||||
{ i: 'attachments', x: 6, y: 6, w: 4, h: 4 },
|
||||
];
|
||||
|
||||
const ALL_WIDGETS = DEFAULT_LAYOUT.map((l) => l.i);
|
||||
@@ -36,7 +36,11 @@ export default function Dashboard() {
|
||||
useEffect(() => {
|
||||
LayoutApi.get().then((saved) => {
|
||||
if (saved?.length) {
|
||||
setLayout(saved.map((w) => ({ i: w.widgetKey, x: w.x, y: w.y, w: w.w, h: w.h })));
|
||||
const savedLayout = saved.map((w) => ({ i: w.widgetKey, x: w.x, y: w.y, w: w.w, h: w.h }));
|
||||
const savedKeys = new Set(savedLayout.map((l) => l.i));
|
||||
// Append any newer default widgets the saved layout doesn't know about yet.
|
||||
const merged = [...savedLayout, ...DEFAULT_LAYOUT.filter((d) => !savedKeys.has(d.i))];
|
||||
setLayout(merged);
|
||||
setHidden(saved.filter((w) => !w.visible).map((w) => w.widgetKey));
|
||||
}
|
||||
}).catch(() => {});
|
||||
@@ -54,6 +58,13 @@ export default function Dashboard() {
|
||||
}).catch(loadData);
|
||||
}, [loadData]);
|
||||
|
||||
// Show the splash when a sync is triggered from the header "Sync now" button.
|
||||
useEffect(() => {
|
||||
const onStart = () => setSyncing(true);
|
||||
window.addEventListener('inboxintel:sync-started', onStart);
|
||||
return () => window.removeEventListener('inboxintel:sync-started', onStart);
|
||||
}, []);
|
||||
|
||||
const onSyncDone = useCallback(() => {
|
||||
setSyncing(false);
|
||||
loadData();
|
||||
@@ -83,7 +94,7 @@ export default function Dashboard() {
|
||||
case 'storage': return <StorageWidget bytes={data?.storageEstimateBytes} />;
|
||||
case 'top-senders': return <TopSendersWidget senders={data?.topSenders} />;
|
||||
case 'volume': return <VolumeWidget volume={data?.volumeOverTime} />;
|
||||
case 'heatmap': return <HeatmapWidget heatmap={data?.heatmap} />;
|
||||
case 'category-heatmap': return <CategoryHeatmapWidget />;
|
||||
case 'attachments': return <AttachmentsWidget attachments={data?.attachmentBreakdown} />;
|
||||
default: return null;
|
||||
}
|
||||
@@ -112,6 +123,11 @@ export default function Dashboard() {
|
||||
cols={12}
|
||||
rowHeight={60}
|
||||
width={1200}
|
||||
isResizable
|
||||
isDraggable
|
||||
resizeHandles={['se']}
|
||||
compactType="vertical"
|
||||
margin={[12, 12]}
|
||||
onLayoutChange={onLayoutChange}
|
||||
draggableHandle=".widget h3, .widget .stat-label"
|
||||
>
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { AnalyticsApi } from '../api/client.js';
|
||||
|
||||
// Volume tiers, highest first.
|
||||
const TIERS = [
|
||||
{ key: '1000+', label: '1000+ emails', min: 1000, max: Infinity, accent: '#eb5757' },
|
||||
{ key: '500-1000', label: '500 – 1000', min: 500, max: 999, accent: '#f2994a' },
|
||||
{ key: '250-500', label: '250 – 500', min: 250, max: 499, accent: '#f2c94c' },
|
||||
{ key: '100-250', label: '100 – 250', min: 100, max: 249, accent: '#56ccf2' },
|
||||
{ key: '<100', label: 'Under 100', min: 0, max: 99, accent: '#6fcf97' }
|
||||
];
|
||||
|
||||
const PER_TIER = 60; // cap visible blocks per tier to keep it light
|
||||
|
||||
export default function Senders() {
|
||||
const [senders, setSenders] = useState(null);
|
||||
|
||||
useEffect(() => { AnalyticsApi.allSenders().then(setSenders).catch(() => setSenders([])); }, []);
|
||||
|
||||
const buckets = useMemo(() => {
|
||||
const map = Object.fromEntries(TIERS.map((t) => [t.key, []]));
|
||||
(senders || []).forEach((s) => {
|
||||
const tier = TIERS.find((t) => s.emailCount >= t.min && s.emailCount <= t.max);
|
||||
if (tier) map[tier.key].push(s);
|
||||
});
|
||||
Object.values(map).forEach((arr) => arr.sort((a, b) => b.emailCount - a.emailCount));
|
||||
return map;
|
||||
}, [senders]);
|
||||
|
||||
if (!senders) return <div className="page"><h2>Senders by Volume</h2><p className="muted">Loading…</p></div>;
|
||||
|
||||
return (
|
||||
<div className="page senders-page">
|
||||
<h2>Senders by Volume</h2>
|
||||
<p className="muted">Who fills your inbox, grouped by how many emails they've sent you.</p>
|
||||
|
||||
{TIERS.map((tier) => {
|
||||
const list = buckets[tier.key];
|
||||
if (!list.length) return null;
|
||||
const shown = list.slice(0, PER_TIER);
|
||||
return (
|
||||
<section className="tier" key={tier.key}>
|
||||
<div className="tier-head">
|
||||
<span className="tier-dot" style={{ background: tier.accent }} />
|
||||
<h3>{tier.label}</h3>
|
||||
<span className="tier-count">{list.length} sender{list.length === 1 ? '' : 's'}</span>
|
||||
</div>
|
||||
<div className="sender-blocks">
|
||||
{shown.map((s) => (
|
||||
<div className="sender-block" key={s.senderId} style={{ borderTopColor: tier.accent }}>
|
||||
<div className="sb-name" title={s.address}>{s.displayName || s.address}</div>
|
||||
<div className="sb-domain">{s.domain}</div>
|
||||
<div className="sb-stats">
|
||||
<span className="sb-count">{s.emailCount.toLocaleString()}</span>
|
||||
{s.unreadCount > 0 && <span className="sb-unread">{s.unreadCount} unread</span>}
|
||||
{s.hasUnsubscribe && <span className="sb-unsub">unsub</span>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{list.length > PER_TIER && <div className="muted tier-more">+ {list.length - PER_TIER} more</div>}
|
||||
</section>
|
||||
);
|
||||
})}
|
||||
|
||||
{senders.length === 0 && <p className="muted">No senders yet — run a sync first.</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+104
-1
@@ -19,7 +19,73 @@ body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-
|
||||
.spacer { flex: 1; }
|
||||
.user { color: var(--muted); font-size: 13px; }
|
||||
|
||||
main { padding: 20px; }
|
||||
/* ── App body (sidebar + main) ── */
|
||||
.app-body { display: flex; min-height: calc(100vh - 53px); }
|
||||
|
||||
.sidebar {
|
||||
width: 216px; flex-shrink: 0;
|
||||
background: var(--panel); border-right: 1px solid #2c3550;
|
||||
display: flex; flex-direction: column; overflow-y: auto;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
.sidebar--collapsed { width: 48px; }
|
||||
|
||||
.sidebar-header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 8px 10px;
|
||||
border-bottom: 1px solid #2c3550;
|
||||
min-height: 42px; flex-shrink: 0;
|
||||
}
|
||||
.sidebar-brand { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding-left: 6px; }
|
||||
.sidebar-toggle { padding: 2px 6px; font-size: 17px; line-height: 1; color: var(--muted); flex-shrink: 0; }
|
||||
.sidebar-toggle:hover { color: var(--text); }
|
||||
|
||||
/* Section headings */
|
||||
.section-head {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
width: 100%; background: none; border: none; border-bottom: 1px solid #2c3550;
|
||||
padding: 7px 10px 7px 12px; cursor: pointer;
|
||||
color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
|
||||
}
|
||||
.section-head:hover { color: var(--text); }
|
||||
.section-title { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; }
|
||||
.section-arrow { font-size: 13px; transform: rotate(90deg); display: inline-block; transition: transform 0.15s; }
|
||||
.section-arrow--closed { transform: rotate(0deg); }
|
||||
|
||||
/* Folder items */
|
||||
.folder-list { list-style: none; margin: 0; padding: 2px 0; }
|
||||
.folder-item {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 6px 10px 6px 12px;
|
||||
color: var(--muted); text-decoration: none; font-size: 13px;
|
||||
border-left: 3px solid transparent;
|
||||
white-space: nowrap; overflow: hidden;
|
||||
transition: background 0.1s, color 0.1s;
|
||||
}
|
||||
.folder-item:hover { background: var(--panel-2); color: var(--text); }
|
||||
.folder-item:hover .fav-pin { opacity: 1; }
|
||||
.folder-item--active { border-left-color: var(--accent); color: var(--text); background: var(--panel-2); }
|
||||
.folder-icon { font-size: 14px; flex-shrink: 0; }
|
||||
.folder-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
|
||||
.folder-spacer { flex: 1; }
|
||||
.folder-badge {
|
||||
font-size: 10px; font-weight: 600; color: var(--muted);
|
||||
background: var(--panel-2); border-radius: 8px; padding: 1px 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.folder-item--active .folder-badge { background: #2c3550; color: var(--accent); }
|
||||
|
||||
/* Favorite pin/unpin button */
|
||||
.fav-pin {
|
||||
background: none; border: none; padding: 0 2px; cursor: pointer;
|
||||
font-size: 12px; color: var(--muted); opacity: 0;
|
||||
transition: opacity 0.1s, color 0.1s; flex-shrink: 0; line-height: 1;
|
||||
}
|
||||
.fav-pin:hover { color: var(--accent); }
|
||||
.fav-pin--remove { opacity: 1; color: var(--danger); }
|
||||
.fav-pin--remove:hover { color: #ff7070; }
|
||||
|
||||
main { padding: 20px; flex: 1; min-width: 0; }
|
||||
|
||||
button, .btn { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 8px 14px; cursor: pointer; text-decoration: none; font-size: 14px; }
|
||||
button.danger, .btn.danger { background: var(--danger); }
|
||||
@@ -54,6 +120,43 @@ table.grid th, table.grid td { padding: 8px; border-bottom: 1px solid #2c3550; t
|
||||
.hm-day { width: 30px; font-size: 10px; color: var(--muted); }
|
||||
.hm-cell { width: 10px; height: 10px; background: var(--accent); border-radius: 2px; }
|
||||
|
||||
/* Category heatmap */
|
||||
.cat-heatmap { display: flex; flex-direction: column; gap: 3px; overflow: auto; }
|
||||
.chm-row { display: grid; grid-template-columns: 92px repeat(7, 1fr); gap: 3px; align-items: stretch; }
|
||||
.chm-head .chm-col { font-size: 10px; color: var(--muted); text-align: center; }
|
||||
.chm-label { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.chm-cell { background: var(--accent); border-radius: 3px; min-height: 22px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
|
||||
|
||||
/* react-grid-layout resize handle — make it clearly visible on the dark theme */
|
||||
.react-resizable-handle {
|
||||
opacity: 0; transition: opacity 0.15s;
|
||||
}
|
||||
.grid-item:hover .react-resizable-handle { opacity: 1; }
|
||||
.react-resizable-handle::after {
|
||||
content: ''; position: absolute; right: 4px; bottom: 4px;
|
||||
width: 9px; height: 9px;
|
||||
border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
.react-grid-item.react-grid-placeholder { background: var(--accent); opacity: 0.25; border-radius: 10px; }
|
||||
|
||||
/* Senders by volume */
|
||||
.senders-page { max-width: 1100px; }
|
||||
.tier { margin-top: 22px; }
|
||||
.tier-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
|
||||
.tier-head h3 { margin: 0; font-size: 16px; }
|
||||
.tier-dot { width: 12px; height: 12px; border-radius: 50%; }
|
||||
.tier-count { color: var(--muted); font-size: 12px; }
|
||||
.sender-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
|
||||
.sender-block { background: var(--panel); border: 1px solid #2c3550; border-top: 3px solid var(--accent); border-radius: 8px; padding: 10px 12px; }
|
||||
.sb-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.sb-domain { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 6px; }
|
||||
.sb-stats { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
|
||||
.sb-count { font-size: 20px; font-weight: 700; }
|
||||
.sb-unread { font-size: 11px; color: var(--accent); }
|
||||
.sb-unsub { font-size: 10px; color: var(--muted); border: 1px solid #36405c; border-radius: 4px; padding: 0 4px; }
|
||||
.tier-more { margin-top: 8px; }
|
||||
|
||||
.page { max-width: 900px; }
|
||||
.form-row { display: flex; gap: 10px; margin: 14px 0; }
|
||||
.form-row input { flex: 1; }
|
||||
|
||||
Reference in New Issue
Block a user