Skip to content

Add MessageRow component, debounced search, UI theming, and fetch aborts #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CheFu-code merged 2 commits into from
Jun 20, 2026
Merged

Add MessageRow component, debounced search, UI theming, and fetch aborts #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e63ded5
Polish mail console experience
CheFu-code Jun 20, 2026
ff599e4
Merge branch 'main' into codex/find-and-fix-repo-bug-unz6mw
CheFu-code Jun 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
188 changes: 188 additions & 0 deletions src/components/FlowConsole.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1827,3 +1827,191 @@
max-width: 70vw;
}
}

@media (prefers-reduced-motion: no-preference) {
.mailShell,
.workspace,
.searchBox,
.messageRow,
.reader,
.composeDialog,
.accountMenu,
.readerMenu,
.contactCard {
transition-duration: 160ms;
transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
}

.insightBar {
display: flex;
min-width: 0;
align-items: center;
gap: 10px;
overflow-x: auto;
border-bottom: 1px solid rgba(15, 118, 110, 0.1);
background: linear-gradient(90deg, rgba(240, 253, 250, 0.9), rgba(255, 255, 255, 0.86));
padding: 10px 18px;
scrollbar-width: none;
}

.insightBar::-webkit-scrollbar {
display: none;
}

.insightBar span {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 5px;
border: 1px solid rgba(15, 118, 110, 0.12);
border-radius: 999px;
background: rgba(255, 255, 255, 0.76);
color: #475569;
font-size: 12px;
font-weight: 600;
padding: 6px 10px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.insightBar strong {
color: #0f766e;
font-size: 13px;
}

.mailShell {
background:
radial-gradient(circle at 15% 0%, rgba(20, 184, 166, 0.13), transparent 28%),
linear-gradient(135deg, #f8fafc 0%, #eefcf9 45%, #f8fafc 100%);
}

.header {
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(248, 250, 252, 0.82);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
backdrop-filter: blur(18px);
}

.searchBox {
border: 1px solid rgba(15, 118, 110, 0.12);
background: rgba(255, 255, 255, 0.76);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 24px rgba(15, 23, 42, 0.06);
}

.searchBox:focus-within {
border-color: rgba(15, 118, 110, 0.34);
box-shadow: 0 16px 34px rgba(15, 118, 110, 0.16);
}

.workspace {
background: transparent;
}

.sidebar {
background: rgba(248, 250, 252, 0.72);
border-right: 1px solid rgba(15, 23, 42, 0.07);
backdrop-filter: blur(14px);
}

.composeButton {
background: linear-gradient(135deg, #0f766e, #14b8a6);
color: #ffffff;
box-shadow: 0 14px 28px rgba(15, 118, 110, 0.26);
font-weight: 700;
}

.composeButton:hover {
transform: translateY(-1px);
box-shadow: 0 18px 32px rgba(15, 118, 110, 0.3);
}

.folderButton {
border-radius: 14px;
}

.folderActive,
.folderActive:hover {
background: rgba(15, 118, 110, 0.12);
color: #0f766e;
box-shadow: inset 3px 0 0 #0f766e;
}

.contentPane {
background: rgba(255, 255, 255, 0.72);
}

.listPane,
.reader {
margin: 12px;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 24px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
overflow: hidden;
}

@chatgpt-codex-connector chatgpt-codex-connector Bot Jun 20, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Preserve reader vertical scrolling

When a conversation is open, this rule also applies to .reader and the overflow shorthand overrides the earlier overflow-y: auto with overflow-y: hidden. Because .readerThread has no constrained height of its own, long conversations or message bodies are clipped instead of scrollable. Keep vertical overflow enabled for the reader while applying the new card styling.

Useful? React with 👍 / 👎.


.listToolbar,
.readerToolbar,
.readerHeaderLine {
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(12px);
}

.messageList {
background: linear-gradient(180deg, rgba(248, 250, 252, 0.6), #ffffff 160px);
}

.messageRow {
border-bottom-color: rgba(15, 23, 42, 0.06);
background: rgba(255, 255, 255, 0.86);
transition:
background 0.16s ease,
box-shadow 0.16s ease,
transform 0.16s ease;
}

.messageRow:hover {
background: #ffffff;
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.messageUnread {
background: linear-gradient(90deg, rgba(240, 253, 250, 0.95), rgba(255, 255, 255, 0.92));
box-shadow: inset 3px 0 0 #14b8a6;
}

.status,
.statusSuccess {
border-radius: 14px;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.accountMenu,
.readerMenu,
.composeMenu,
.emojiMenu,
.contactCard,
.confirmDialog,
.composeDialog {
border-color: rgba(15, 23, 42, 0.08);
border-radius: 18px;
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
}

.composeDialog {
border-radius: 22px 22px 0 0;
}

.composeHeader {
background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.composeHeader strong,
.composeHeader .composeIconButton {
color: #ffffff;
}

.readerMessage {
border-bottom-color: rgba(15, 23, 42, 0.06);
}
Loading
Loading