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>
2026-06-30 19:59:01 +02:00
parent ca02f40841
commit 20d51b2c15
6 changed files with 218 additions and 1 deletions
@@ -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>
+  );
+}