UI minor brush ups

2026-10-04 00:23:52 +05:30 · 2026-10-04 00:23:52 +05:30 · 67ccf91e6f
commit 67ccf91e6f
parent 1a15409b2d
7 changed files with 303 additions and 109 deletions
--- a/frontend/src/components/AgAgentPanel.jsx
+++ b/frontend/src/components/AgAgentPanel.jsx
@ -5,6 +5,7 @@ import {
  ChevronRight,
  FileSearch,
  ListChecks,
+  Paperclip,
  PenLine,
  Receipt,
  Send,
@ -12,6 +13,7 @@ import {
 } from "lucide-react";
 import AgentInsight from "./AgentInsight";
 import AgentSpark from "./AgentSpark";
+import SenderAvatar from "./SenderAvatar";
 import { inboxContext } from "../utils/inboxSignals";

 const ICON = { size: 14, strokeWidth: 1.75 };
@ -19,10 +21,16 @@ const ICON = { size: 14, strokeWidth: 1.75 };
 const cards = [
  { key: "important", label: "Important emails", captionKey: "importantFromClients", captionSuffix: "from clients", icon: Star, tone: "rose" },
  { key: "actionItems", label: "Action items", hint: "Need response", icon: ListChecks, tone: "blue" },
-  { key: "meetings", label: "Meetings mentioned", hint: "On calendar", icon: Calendar, tone: "green" },
+  { key: "meetings", label: "Meetings mentioned", hint: "In your emails", icon: Calendar, tone: "green" },
  { key: "invoices", label: "Invoices & bills", hint: "This week", icon: Receipt, tone: "amber" },
 ];

+function greeting(name) {
+  const hour = new Date().getHours();
+  const period = hour < 12 ? "Good morning" : hour < 17 ? "Good afternoon" : "Good evening";
+  return `${period}, ${name}`;
+}
+
 export default function AgAgentPanel({
  account,
  emails,
@ -34,6 +42,7 @@ export default function AgAgentPanel({
 }) {
  const { stats, needsReply, today, deadlines } = inboxContext(emails);
  const [agentQuery, setAgentQuery] = useState("");
+  const firstName = account?.first_name || "there";
  const hasSignals = stats.important + stats.actionItems + stats.meetings + stats.invoices > 0;

  function submitAgentQuery(event) {
@ -56,9 +65,16 @@ export default function AgAgentPanel({

      <AgentInsight insight={insight} />

+      {!insight && hasSignals && (
+        <div className="agent-panel-hello">
+          <strong>{greeting(firstName)}</strong>
+          <span>Here&apos;s what needs your attention today.</span>
+        </div>
+      )}
+
      {!insight && !hasSignals && (
        <div className="agent-caught-up">
-          <p className="agent-caught-up-lead"><Check size={14} strokeWidth={2} /> You&apos;re all caught up.</p>
+          <p className="agent-caught-up-lead"><Check size={15} strokeWidth={2} /> You&apos;re all caught up.</p>
          <p>No urgent messages or outstanding actions.</p>
          <small>Inbox is quiet right now.</small>
        </div>
@ -79,7 +95,7 @@ export default function AgAgentPanel({
                className={`agent-stat agent-stat-${card.tone}`}
                onClick={() => onQuickAction(card.key)}
              >
-                <Icon {...ICON} />
+                <span className="agent-stat-icon"><Icon {...ICON} /></span>
                <strong>{count}</strong>
                <span>{card.label}</span>
                <small>{caption}</small>
@ -95,16 +111,20 @@ export default function AgAgentPanel({
        <h3>Quick actions</h3>
        <div>
          <button type="button" className="agent-quick-btn agent-quick-btn-agent" onClick={() => onQuickAction("summarize")}>
-            <AgentSpark /> Summarize inbox
+            <span className="agent-quick-icon"><AgentSpark /></span>
+            <span>Summarize inbox</span>
          </button>
          <button type="button" className="agent-quick-btn agent-quick-btn-agent" onClick={() => onQuickAction("draft")}>
-            <PenLine {...ICON} /> Draft replies
+            <span className="agent-quick-icon"><PenLine {...ICON} /></span>
+            <span>Draft replies</span>
          </button>
          <button type="button" className="agent-quick-btn" onClick={() => onQuickAction("attachments")}>
-            <FileSearch {...ICON} /> Find attachments
+            <span className="agent-quick-icon"><FileSearch {...ICON} /></span>
+            <span>Find attachments</span>
          </button>
          <button type="button" className="agent-quick-btn" onClick={() => onQuickAction("actions")}>
-            <ListChecks {...ICON} /> Show action items
+            <span className="agent-quick-icon"><ListChecks {...ICON} /></span>
+            <span>Show action items</span>
          </button>
        </div>
      </div>
@ -138,8 +158,12 @@ export default function AgAgentPanel({
            {needsReply.slice(0, 3).map((item) => (
              <li key={item.id}>
                <button type="button" onClick={() => onOpenEmail?.(item.id)}>
-                  <span className="agent-attention-name">{item.name}</span>
-                  <span className="agent-attention-meta">{item.status} · {item.age}</span>
+                  <SenderAvatar email={emails.find((entry) => entry.id === item.id) || { sender: { name: item.name } }} className="agent-attention-avatar" />
+                  <span className="agent-attention-copy">
+                    <span className="agent-attention-name">{item.name}</span>
+                    <span className="agent-attention-meta">{item.status}</span>
+                  </span>
+                  <em>{item.age}</em>
                </button>
              </li>
            ))}
@ -167,8 +191,11 @@ export default function AgAgentPanel({
          onChange={(event) => setAgentQuery(event.target.value)}
          placeholder="Ask about your emails..."
        />
-        <button type="submit" aria-label="Send to agent" disabled={!agentQuery.trim()}>
-          <Send size={16} strokeWidth={1.75} />
+        <button type="button" className="agent-ask-attach" aria-label="Attach context" title="Attach context">
+          <Paperclip size={15} strokeWidth={1.75} />
+        </button>
+        <button type="submit" className="agent-ask-send" aria-label="Send to agent" disabled={!agentQuery.trim()}>
+          <Send size={15} strokeWidth={1.75} />
        </button>
      </form>
    </section>
--- a/frontend/src/components/DashboardPage.jsx
+++ b/frontend/src/components/DashboardPage.jsx
@ -63,9 +63,9 @@ function SidebarSection({ title, children, className = "" }) {
  );
 }

-function NavBadge({ value }) {
+function NavBadge({ value, variant = "coral" }) {
  if (!value || value <= 0) return null;
-  return <em>{value}</em>;
+  return <em className={variant === "neutral" ? "nav-badge-neutral" : "nav-badge-coral"}>{value}</em>;
 }

 export default function DashboardPage() {
@ -81,6 +81,7 @@ export default function DashboardPage() {
  const [mailRefreshKey, setMailRefreshKey] = useState(0);
  const [lens, setLens] = useState("all");
  const [agentNav, setAgentNav] = useState(null);
+  const [labelsExpanded, setLabelsExpanded] = useState(false);
  const [mailStats, setMailStats] = useState({
    unread: 0,
    starred: 0,
@ -223,11 +224,17 @@ export default function DashboardPage() {
          <button aria-label="Close navigation" type="button" onClick={() => setMenuOpen(false)}><X size={19} /></button>
        </div>

-        <button className="dashboard-compose" type="button" onClick={() => setComposeOpen(true)}>
-          <Mail size={17} />
-          <span>Compose</span>
-          <ChevronDown size={14} className="dashboard-compose-caret" />
-        </button>
+        <div className="dashboard-compose-wrap">
+          <button className="dashboard-compose" type="button" onClick={() => setComposeOpen(true)}>
+            <span className="dashboard-compose-main">
+              <Mail size={16} strokeWidth={1.75} />
+              <span>Compose</span>
+            </span>
+          </button>
+          <button className="dashboard-compose-menu" type="button" aria-label="Compose options">
+            <ChevronDown size={14} strokeWidth={1.75} />
+          </button>
+        </div>

        <SidebarSection title="Mail" className="dashboard-sidebar-mail">
          <nav aria-label="Mail">
@ -257,9 +264,17 @@ export default function DashboardPage() {
              >
                <i className={`label-dot label-dot-${tone}`} />
                <span>{name}</span>
-                <NavBadge value={mailStats.labels?.[countKey]} />
+                <NavBadge variant="neutral" value={mailStats.labels?.[countKey]} />
              </button>
            ))}
+            <button
+              type="button"
+              className="dashboard-nav-item dashboard-label-more"
+              onClick={() => setLabelsExpanded((open) => !open)}
+            >
+              <ChevronDown size={14} strokeWidth={1.75} className={labelsExpanded ? "open" : ""} />
+              <span>{labelsExpanded ? "Less" : "More"}</span>
+            </button>
          </nav>
        </SidebarSection>

--- a/frontend/src/components/MailRow.jsx
+++ b/frontend/src/components/MailRow.jsx
@ -2,6 +2,7 @@ import {
  Archive,
  Clock3,
  MailOpen,
+  MoreHorizontal,
  Paperclip,
  Star,
  Trash2,
@ -11,7 +12,7 @@ import SenderAvatar from "./SenderAvatar";
 import { senderDisplayName } from "../utils/senderAvatar";
 import { attachmentCount, emailLabels } from "../utils/inboxSignals";

-const ICON = { size: 14, strokeWidth: 1.75 };
+const ICON = { size: 15, strokeWidth: 1.75 };

 function formatTimestamp(value) {
  if (!value) return "";
@ -101,10 +102,13 @@ export default function MailRow({
        title={starred ? "Unstar" : "Star"}
        aria-pressed={starred}
      >
-        <Star size={16} strokeWidth={1.75} fill={starred ? "currentColor" : "none"} />
+        <Star size={15} strokeWidth={1.75} fill={starred ? "currentColor" : "none"} />
      </button>
      <SenderAvatar email={email} className="mailbox-avatar" />
-      <span className="mailbox-sender">{senderName}</span>
+      <span className="mailbox-sender-wrap">
+        {unread && <i className="mailbox-unread-pip" aria-hidden="true" />}
+        <span className="mailbox-sender">{senderName}</span>
+      </span>
      <span className="mailbox-subject-line">
        <span className="mailbox-subject">{subject}</span>
        {snippet && (
@ -114,43 +118,36 @@ export default function MailRow({
          </>
        )}
      </span>
-      {labels.length > 0 && (
-        <div className="mailbox-row-labels">
-          {labels.map((label) => (
-            <em key={label.name} className={`mail-label mail-label-${label.tone}`}>{label.name}</em>
-          ))}
+      <div className="mailbox-row-labels" aria-hidden={labels.length === 0}>
+        {labels.map((label) => (
+          <em key={label.name} className={`mail-label mail-label-${label.tone}`}>{label.name}</em>
+        ))}
+      </div>
+      <span className={`mailbox-attachment-icon${files > 0 ? "" : " empty"}`} title={files > 0 ? `${files} attachment${files === 1 ? "" : "s"}` : undefined}>
+        {files > 0 && <Paperclip size={14} strokeWidth={1.75} />}
+      </span>
+      <div className="mailbox-row-rail">
+        <time className="mailbox-time" dateTime={timestamp || undefined}>{formatTimestamp(timestamp)}</time>
+        <div className="mailbox-hover-actions" aria-label="Message actions">
+          <button type="button" title="Archive" aria-label="Archive" onClick={(event) => stop(event, () => onArchive?.(email))}>
+            <Archive {...ICON} />
+          </button>
+          <button type="button" title="Delete" aria-label="Delete" onClick={(event) => stop(event, () => onTrash?.(email))}>
+            <Trash2 {...ICON} />
+          </button>
+          <button type="button" title="Mark unread" aria-label="Mark unread" onClick={(event) => stop(event, () => onMarkUnread?.(email))}>
+            <MailOpen {...ICON} />
+          </button>
+          <button type="button" title="Snooze" aria-label="Snooze" onClick={(event) => stop(event, () => onSnooze?.(email))}>
+            <Clock3 {...ICON} />
+          </button>
+          <button type="button" className="agent-action-icon" title="Summarize" aria-label="Summarize" onClick={(event) => stop(event, () => onSummarize?.(email))}>
+            <AgentSpark />
+          </button>
+          <button type="button" title="More" aria-label="More actions" onClick={(event) => event.stopPropagation()}>
+            <MoreHorizontal {...ICON} />
+          </button>
        </div>
-      )}
-      {files > 0 ? (
-        <span className="mailbox-attachment-icon" title={`${files} attachment${files === 1 ? "" : "s"}`}>
-          <Paperclip {...ICON} />
-        </span>
-      ) : (
-        <span className="mailbox-attachment-icon empty" aria-hidden="true" />
-      )}
-      <time className="mailbox-time" dateTime={timestamp || undefined}>{formatTimestamp(timestamp)}</time>
-      <div className="mailbox-hover-actions" aria-label="Message actions">
-        <button type="button" title="Archive" aria-label="Archive" onClick={(event) => stop(event, () => onArchive?.(email))}>
-          <Archive {...ICON} />
-        </button>
-        <button type="button" title="Delete" aria-label="Delete" onClick={(event) => stop(event, () => onTrash?.(email))}>
-          <Trash2 {...ICON} />
-        </button>
-        <button type="button" title="Mark unread" aria-label="Mark unread" onClick={(event) => stop(event, () => onMarkUnread?.(email))}>
-          <MailOpen {...ICON} />
-        </button>
-        <button type="button" title="Snooze" aria-label="Snooze" onClick={(event) => stop(event, () => onSnooze?.(email))}>
-          <Clock3 {...ICON} />
-        </button>
-        <button
-          type="button"
-          className="agent-action-icon"
-          title="Summarize"
-          aria-label="Summarize"
-          onClick={(event) => stop(event, () => onSummarize?.(email))}
-        >
-          <AgentSpark />
-        </button>
      </div>
    </div>
  );
--- a/frontend/src/components/MailboxView.jsx
+++ b/frontend/src/components/MailboxView.jsx
@ -7,6 +7,7 @@ import {
  Filter,
  Inbox,
  LayoutGrid,
+  List,
  Mail,
  RefreshCw,
  Search,
@ -592,9 +593,6 @@ export default function MailboxView({
                      )}
                    </button>
                  ))}
-                  <small className="mailbox-range">
-                    {listedEmails.length ? `${rangeStart}–${rangeEnd}` : title}
-                  </small>
                </div>
              )}

@ -657,11 +655,24 @@ export default function MailboxView({
                ))}
              </div>

-              {(cursorHistory.length > 0 || nextCursor) && (
+              {!status.loading && listedEmails.length > 0 && (
                <footer className="mailbox-pagination">
-                  <button type="button" disabled={!cursorHistory.length} onClick={previousPage}><ChevronLeft size={16} /> Previous</button>
-                  <span>Page {cursorHistory.length + 1}</span>
-                  <button type="button" disabled={!nextCursor} onClick={nextPage}>Next <ChevronRight size={16} /></button>
+                  <span className="mailbox-pagination-range">
+                    {`${rangeStart}–${rangeEnd}`}
+                    {nextCursor ? "" : ` · ${rangeEnd} loaded`}
+                  </span>
+                  <div className="mailbox-pagination-controls">
+                    <button type="button" title="Previous page" aria-label="Previous page" disabled={!cursorHistory.length} onClick={previousPage}>
+                      <ChevronLeft size={16} strokeWidth={1.75} />
+                    </button>
+                    <button type="button" title="Next page" aria-label="Next page" disabled={!nextCursor} onClick={nextPage}>
+                      <ChevronRight size={16} strokeWidth={1.75} />
+                    </button>
+                  </div>
+                  <div className="mailbox-pagination-density" aria-label="List density">
+                    <button type="button" className="active" title="Comfortable density" aria-label="Comfortable density"><List size={15} strokeWidth={1.75} /></button>
+                    <button type="button" title="Compact density" aria-label="Compact density"><LayoutGrid size={15} strokeWidth={1.75} /></button>
+                  </div>
                </footer>
              )}

--- a/frontend/src/components/StickyNotesPanel.jsx
+++ b/frontend/src/components/StickyNotesPanel.jsx
@ -204,7 +204,7 @@ export default function StickyNotesPanel({ compact = false, contextEmail = null
  const contextLabel = contextEmail ? senderDisplayName(contextEmail) : null;

  return (
-    <aside className={`mailbox-notes-pane${compact ? " compact" : ""}${expanded ? " expanded" : ""}`} aria-label="Sticky notes">
+    <aside className={`mailbox-notes-pane${compact ? " compact" : ""}${expanded ? " expanded" : ""}${notes.length === 0 ? " empty" : ""}`} aria-label="Sticky notes">
      <button
        type="button"
        className="sticky-notes-toggle"