apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-07-15 21:11:08 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

better cal and email block design

Browse source
This commit is contained in:
Arjun 2026-03-31 10:26:17 +05:30
parent 61e92783b2
commit 82ab0a8fe1
3 changed files with 280 additions and 239 deletions
Download patch file Download diff file Expand all files Collapse all files

26
apps/x/apps/renderer/src/extensions/calendar-block.tsx
View file

@ -9,12 +9,15 @@ function formatTime(dateStr: string): string {
return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
} }
function getDateParts(dateStr: string): { day: number; month: string; weekday: string } { function getDateParts(dateStr: string): { day: number; month: string; weekday: string; isToday: boolean } {
const d = new Date(dateStr) const d = new Date(dateStr)
const now = new Date()
const isToday = d.getDate() === now.getDate() && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()
return { return {
day: d.getDate(), day: d.getDate(),
month: d.toLocaleDateString([], { month: 'long' }), month: d.toLocaleDateString([], { month: 'short' }).toUpperCase(),
weekday: d.toLocaleDateString([], { weekday: 'short' }), weekday: d.toLocaleDateString([], { weekday: 'short' }).toUpperCase(),
isToday,
} }
} }
@ -62,7 +65,8 @@ interface ResolvedEvent {
conferenceLink?: string conferenceLink?: string
} }
const EVENT_BAR_COLOR = '#7ec8c8' const GCAL_EVENT_COLOR = '#039be5'
const GCAL_TODAY_COLOR = '#1a73e8'
function JoinMeetingSplitButton({ onJoinAndNotes, onNotesOnly }: { function JoinMeetingSplitButton({ onJoinAndNotes, onNotesOnly }: {
onJoinAndNotes: () => void onJoinAndNotes: () => void
@ -273,11 +277,8 @@ function CalendarBlockView({ node, deleteNode }: { node: { attrs: Record<string,
<div className="calendar-block-date-left"> <div className="calendar-block-date-left">
{parts ? ( {parts ? (
<> <>
<span className="calendar-block-day">{parts.day}</span> <span className="calendar-block-weekday" style={parts.isToday ? { color: GCAL_TODAY_COLOR } : undefined}>{parts.weekday}</span>
<div className="calendar-block-month-weekday"> <span className={`calendar-block-day${parts.isToday ? ' calendar-block-day-today' : ''}`}>{parts.day}</span>
<span className="calendar-block-month">{parts.month}</span>
<span className="calendar-block-weekday">{parts.weekday}</span>
</div>
</> </>
) : ( ) : (
<span className="calendar-block-day">?</span> <span className="calendar-block-day">?</span>
@ -288,16 +289,13 @@ function CalendarBlockView({ node, deleteNode }: { node: { attrs: Record<string,
<div <div
key={event._idx} key={event._idx}
className={`calendar-block-event ${event.htmlLink ? 'calendar-block-event-clickable' : ''}`} className={`calendar-block-event ${event.htmlLink ? 'calendar-block-event-clickable' : ''}`}
style={{ backgroundColor: GCAL_EVENT_COLOR }}
onMouseDown={(e) => e.stopPropagation()} onMouseDown={(e) => e.stopPropagation()}
onClick={(e) => { e.stopPropagation(); handleEventClick(event) }} onClick={(e) => { e.stopPropagation(); handleEventClick(event) }}
> >
<div
className="calendar-block-event-bar"
style={{ backgroundColor: EVENT_BAR_COLOR }}
/>
<div className="calendar-block-event-content"> <div className="calendar-block-event-content">
<div className="calendar-block-event-title"> <div className="calendar-block-event-title">
{event.summary || 'Untitled event'} {event.summary || '(No title)'}
</div> </div>
<div className="calendar-block-event-time"> <div className="calendar-block-event-time">
{getTimeRange(event)} {getTimeRange(event)}

59
apps/x/apps/renderer/src/extensions/email-block.tsx
View file

@ -17,9 +17,6 @@ function formatEmailDate(dateStr: string): string {
} }
} }
function getInitials(name: string): string {
return name.split(/\s+/).map(w => w[0]).filter(Boolean).slice(0, 2).join('').toUpperCase()
}
declare global { declare global {
interface Window { interface Window {
@ -152,29 +149,31 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
? `https://mail.google.com/mail/u/0/#all/${config.threadId}` ? `https://mail.google.com/mail/u/0/#all/${config.threadId}`
: null : null
const senderName = config.from || 'Unknown'
// --- Render: Draft mode (draft_response present) --- // --- Render: Draft mode (draft_response present) ---
if (hasDraft) { if (hasDraft) {
return ( return (
<NodeViewWrapper className="email-block-wrapper" data-type="email-block"> <NodeViewWrapper className="email-block-wrapper" data-type="email-block">
<div className="email-block-card" onMouseDown={(e) => e.stopPropagation()}> <div className="email-block-card email-block-card-gmail" onMouseDown={(e) => e.stopPropagation()}>
<button className="email-block-delete" onClick={deleteNode} aria-label="Delete email block"> <button className="email-block-delete" onClick={deleteNode} aria-label="Delete email block">
<X size={14} /> <X size={14} />
</button> </button>
{/* Draft header */} {/* Draft header – Gmail compose style */}
{config.to && ( <div className="email-draft-block-header">
<div className="email-draft-block-header"> {config.to && (
<div className="email-draft-block-field"> <div className="email-draft-block-field">
<span className="email-draft-block-label">To</span> <span className="email-draft-block-label">To</span>
<span className="email-draft-block-value">{config.to}</span> <span className="email-draft-block-value">{config.to}</span>
</div> </div>
{config.subject && ( )}
<div className="email-draft-block-field"> {config.subject && (
<span className="email-draft-block-label">Subject</span> <div className="email-draft-block-field">
<span className="email-draft-block-value">{config.subject}</span> <span className="email-draft-block-label">Subject</span>
</div> <span className="email-draft-block-value">{config.subject}</span>
)} </div>
</div> )}
)} </div>
{/* Editable draft body */} {/* Editable draft body */}
<textarea <textarea
ref={bodyRef} ref={bodyRef}
@ -185,7 +184,7 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
placeholder="Write your reply..." placeholder="Write your reply..."
rows={3} rows={3}
/> />
{/* Action buttons */} {/* Action buttons – Gmail style */}
<div className="email-draft-block-actions"> <div className="email-draft-block-actions">
{(hasPastSummary || config.latest_email) && ( {(hasPastSummary || config.latest_email) && (
<button <button
@ -198,7 +197,7 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
</button> </button>
)} )}
<button <button
className="email-block-gmail-btn" className="email-block-gmail-btn email-block-gmail-btn-primary"
onClick={() => { onClick={() => {
void navigator.clipboard.writeText(draftBody) void navigator.clipboard.writeText(draftBody)
setCopied(true) setCopied(true)
@ -210,7 +209,7 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
</button> </button>
{gmailUrl && ( {gmailUrl && (
<button <button
className="email-block-gmail-btn" className="email-block-gmail-btn email-block-gmail-btn-primary"
onClick={() => { onClick={() => {
void navigator.clipboard.writeText(draftBody) void navigator.clipboard.writeText(draftBody)
setCopied(true) setCopied(true)
@ -229,10 +228,12 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
<div className="email-block-context-section"> <div className="email-block-context-section">
<div className="email-block-message"> <div className="email-block-message">
<div className="email-block-message-header"> <div className="email-block-message-header">
{config.from && <div className="email-block-avatar">{getInitials(config.from)}</div>}
<div className="email-block-sender-info"> <div className="email-block-sender-info">
{config.from && <div className="email-block-sender-name">{config.from}</div>} <div className="email-block-sender-row">
{config.date && <div className="email-block-sender-date">{formatEmailDate(config.date)}</div>} {config.from && <div className="email-block-sender-name">{config.from}</div>}
{config.date && <div className="email-block-sender-date">{formatEmailDate(config.date)}</div>}
</div>
<div className="email-block-sender-to">to me</div>
</div> </div>
</div> </div>
<div className="email-block-message-body">{config.latest_email}</div> <div className="email-block-message-body">{config.latest_email}</div>
@ -254,7 +255,7 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
// --- Render: Read mode (no draft_response) --- // --- Render: Read mode (no draft_response) ---
return ( return (
<NodeViewWrapper className="email-block-wrapper" data-type="email-block"> <NodeViewWrapper className="email-block-wrapper" data-type="email-block">
<div className="email-block-card" onMouseDown={(e) => e.stopPropagation()}> <div className="email-block-card email-block-card-gmail" onMouseDown={(e) => e.stopPropagation()}>
<button className="email-block-delete" onClick={deleteNode} aria-label="Delete email block"> <button className="email-block-delete" onClick={deleteNode} aria-label="Delete email block">
<X size={14} /> <X size={14} />
</button> </button>
@ -262,15 +263,17 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
{/* Latest email message */} {/* Latest email message */}
<div className="email-block-message"> <div className="email-block-message">
<div className="email-block-message-header"> <div className="email-block-message-header">
{config.from && <div className="email-block-avatar">{getInitials(config.from)}</div>}
<div className="email-block-sender-info"> <div className="email-block-sender-info">
{config.from && <div className="email-block-sender-name">{config.from}</div>} <div className="email-block-sender-row">
{config.date && <div className="email-block-sender-date">{formatEmailDate(config.date)}</div>} <div className="email-block-sender-name">{senderName}</div>
{config.date && <div className="email-block-sender-date">{formatEmailDate(config.date)}</div>}
</div>
<div className="email-block-sender-to">to me</div>
</div> </div>
</div> </div>
<div className="email-block-message-body">{config.latest_email}</div> <div className="email-block-message-body">{config.latest_email}</div>
</div> </div>
{/* Action buttons */} {/* Action buttons – Gmail style */}
<div className="email-draft-block-actions"> <div className="email-draft-block-actions">
{hasPastSummary && ( {hasPastSummary && (
<button <button
@ -284,7 +287,7 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
)} )}
{responseMode === 'inline' && ( {responseMode === 'inline' && (
<button <button
className="email-block-gmail-btn email-block-generate-btn" className="email-block-gmail-btn email-block-gmail-btn-primary"
onClick={generateResponse} onClick={generateResponse}
disabled={generating} disabled={generating}
> >
@ -294,7 +297,7 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
)} )}
{responseMode === 'assistant' && ( {responseMode === 'assistant' && (
<button <button
className="email-block-gmail-btn email-block-generate-btn" className="email-block-gmail-btn email-block-gmail-btn-primary"
onClick={draftWithAssistant} onClick={draftWithAssistant}
> >
<MessageSquare size={13} /> <MessageSquare size={13} />

434
apps/x/apps/renderer/src/styles/editor.css
View file

@ -859,12 +859,13 @@
font-size: 13px; font-size: 13px;
} }
/* Calendar block */ /* Calendar block – Google Calendar style */
.tiptap-editor .ProseMirror .calendar-block-title { .tiptap-editor .ProseMirror .calendar-block-title {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 500;
margin-bottom: 8px; margin-bottom: 4px;
color: var(--foreground); color: color-mix(in srgb, var(--foreground) 70%, transparent);
letter-spacing: 0.01em;
} }
.tiptap-editor .ProseMirror .calendar-block-loading, .tiptap-editor .ProseMirror .calendar-block-loading,
@ -873,7 +874,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 60px; height: 60px;
font-size: 13px; font-size: 14px;
color: color-mix(in srgb, var(--foreground) 45%, transparent); color: color-mix(in srgb, var(--foreground) 45%, transparent);
} }
@ -897,66 +898,69 @@
.tiptap-editor .ProseMirror .calendar-block-separator { .tiptap-editor .ProseMirror .calendar-block-separator {
border: none; border: none;
border-top: 1px dashed color-mix(in srgb, var(--foreground) 20%, transparent); border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
margin: 4px 0; margin: 0;
} }
.tiptap-editor .ProseMirror .calendar-block-date-row { .tiptap-editor .ProseMirror .calendar-block-date-row {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 0; gap: 12px;
padding: 12px 0; padding: 12px 0;
} }
.tiptap-editor .ProseMirror .calendar-block-date-left { .tiptap-editor .ProseMirror .calendar-block-date-left {
display: flex;
align-items: baseline;
gap: 6px;
width: 140px;
flex-shrink: 0;
padding-top: 4px;
}
.tiptap-editor .ProseMirror .calendar-block-day {
font-size: 28px;
font-weight: 300;
line-height: 1;
color: color-mix(in srgb, var(--foreground) 70%, transparent);
}
.tiptap-editor .ProseMirror .calendar-block-month-weekday {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0; align-items: center;
} width: 56px;
flex-shrink: 0;
.tiptap-editor .ProseMirror .calendar-block-month { padding-top: 2px;
font-size: 12px;
color: color-mix(in srgb, var(--foreground) 50%, transparent);
line-height: 1.3;
} }
.tiptap-editor .ProseMirror .calendar-block-weekday { .tiptap-editor .ProseMirror .calendar-block-weekday {
font-size: 12px; font-size: 11px;
color: color-mix(in srgb, var(--foreground) 40%, transparent); font-weight: 500;
line-height: 1.3; color: color-mix(in srgb, var(--foreground) 45%, transparent);
line-height: 1;
letter-spacing: 0.05em;
margin-bottom: 2px;
}
.tiptap-editor .ProseMirror .calendar-block-day {
font-size: 26px;
font-weight: 400;
line-height: 1;
color: color-mix(in srgb, var(--foreground) 65%, transparent);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.tiptap-editor .ProseMirror .calendar-block-day-today {
background-color: #1a73e8;
color: #fff !important;
} }
.tiptap-editor .ProseMirror .calendar-block-events { .tiptap-editor .ProseMirror .calendar-block-events {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 6px;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
padding-top: 4px;
} }
.tiptap-editor .ProseMirror .calendar-block-event { .tiptap-editor .ProseMirror .calendar-block-event {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
gap: 10px; padding: 8px 12px;
padding: 4px 8px; border-radius: 4px;
border-radius: 6px; transition: filter 0.12s ease;
transition: background-color 0.12s ease; min-height: 0;
} }
.tiptap-editor .ProseMirror .calendar-block-event-clickable { .tiptap-editor .ProseMirror .calendar-block-event-clickable {
@ -964,14 +968,7 @@
} }
.tiptap-editor .ProseMirror .calendar-block-event-clickable:hover { .tiptap-editor .ProseMirror .calendar-block-event-clickable:hover {
background-color: color-mix(in srgb, var(--foreground) 5%, transparent); filter: brightness(0.9);
}
.tiptap-editor .ProseMirror .calendar-block-event-bar {
width: 3px;
border-radius: 2px;
flex-shrink: 0;
min-height: 32px;
} }
.tiptap-editor .ProseMirror .calendar-block-event-content { .tiptap-editor .ProseMirror .calendar-block-event-content {
@ -984,20 +981,22 @@
.tiptap-editor .ProseMirror .calendar-block-event-title { .tiptap-editor .ProseMirror .calendar-block-event-title {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: var(--foreground); color: #fff;
line-height: 1.3;
} }
.tiptap-editor .ProseMirror .calendar-block-event-time { .tiptap-editor .ProseMirror .calendar-block-event-time {
font-size: 12px; font-size: 12px;
color: color-mix(in srgb, var(--foreground) 45%, transparent); color: rgba(255, 255, 255, 0.85);
line-height: 1.3;
} }
.tiptap-editor .ProseMirror .calendar-block-split-btn { .tiptap-editor .ProseMirror .calendar-block-split-btn {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
align-items: stretch; align-items: stretch;
margin-top: 4px; margin-top: 6px;
border-radius: 5px; border-radius: 4px;
overflow: visible; overflow: visible;
} }
@ -1008,17 +1007,17 @@
padding: 4px 8px 4px 10px; padding: 4px 8px 4px 10px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #7ec8c8; color: #fff;
background: color-mix(in srgb, #7ec8c8 12%, transparent); background: rgba(255, 255, 255, 0.2);
border: 1px solid color-mix(in srgb, #7ec8c8 25%, transparent); border: none;
border-right: none; border-right: none;
border-radius: 5px 0 0 5px; border-radius: 4px 0 0 4px;
cursor: pointer; cursor: pointer;
transition: background-color 0.12s ease; transition: background-color 0.12s ease;
} }
.tiptap-editor .ProseMirror .calendar-block-split-main:hover { .tiptap-editor .ProseMirror .calendar-block-split-main:hover {
background: color-mix(in srgb, #7ec8c8 22%, transparent); background: rgba(255, 255, 255, 0.3);
} }
.tiptap-editor .ProseMirror .calendar-block-split-chevron-wrap { .tiptap-editor .ProseMirror .calendar-block-split-chevron-wrap {
@ -1031,21 +1030,21 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 4px 6px; padding: 4px 6px;
color: #7ec8c8; color: #fff;
background: color-mix(in srgb, #7ec8c8 12%, transparent); background: rgba(255, 255, 255, 0.2);
border: 1px solid color-mix(in srgb, #7ec8c8 25%, transparent); border: none;
border-left: 1px solid color-mix(in srgb, #7ec8c8 20%, transparent); border-left: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 0 5px 5px 0; border-radius: 0 4px 4px 0;
cursor: pointer; cursor: pointer;
transition: background-color 0.12s ease; transition: background-color 0.12s ease;
} }
.tiptap-editor .ProseMirror .calendar-block-split-chevron:hover { .tiptap-editor .ProseMirror .calendar-block-split-chevron:hover {
background: color-mix(in srgb, #7ec8c8 22%, transparent); background: rgba(255, 255, 255, 0.3);
} }
.tiptap-editor .ProseMirror .calendar-block-split-chevron-open { .tiptap-editor .ProseMirror .calendar-block-split-chevron-open {
border-radius: 0 5px 0 0; border-radius: 0 4px 0 0;
border-bottom-color: transparent; border-bottom-color: transparent;
} }
@ -1054,10 +1053,11 @@
top: calc(100% - 1px); top: calc(100% - 1px);
right: 0; right: 0;
z-index: 50; z-index: 50;
background: color-mix(in srgb, #7ec8c8 12%, transparent); background: #039be5;
border: 1px solid color-mix(in srgb, #7ec8c8 25%, transparent); border: none;
border-top: none; border-top: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 0 0 5px 5px; border-radius: 0 0 4px 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
} }
.tiptap-editor .ProseMirror .calendar-block-split-option { .tiptap-editor .ProseMirror .calendar-block-split-option {
@ -1068,7 +1068,7 @@
padding: 5px 10px; padding: 5px 10px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #7ec8c8; color: #fff;
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
@ -1076,37 +1076,48 @@
} }
.tiptap-editor .ProseMirror .calendar-block-split-option:hover { .tiptap-editor .ProseMirror .calendar-block-split-option:hover {
background: color-mix(in srgb, #7ec8c8 22%, transparent); background: rgba(255, 255, 255, 0.15);
} }
.tiptap-editor .ProseMirror .calendar-block-join-btn { .tiptap-editor .ProseMirror .calendar-block-join-btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 5px; gap: 5px;
margin-top: 4px; margin-top: 6px;
padding: 4px 10px; padding: 4px 10px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #7ec8c8; color: #fff;
background: color-mix(in srgb, #7ec8c8 12%, transparent); background: rgba(255, 255, 255, 0.2);
border: 1px solid color-mix(in srgb, #7ec8c8 25%, transparent); border: none;
border-radius: 5px; border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: background-color 0.12s ease, border-color 0.12s ease; transition: background-color 0.12s ease;
width: fit-content; width: fit-content;
} }
.tiptap-editor .ProseMirror .calendar-block-join-btn:hover { .tiptap-editor .ProseMirror .calendar-block-join-btn:hover {
background: color-mix(in srgb, #7ec8c8 22%, transparent); background: rgba(255, 255, 255, 0.3);
border-color: color-mix(in srgb, #7ec8c8 40%, transparent); }
/* Email block – Gmail style */
.tiptap-editor .ProseMirror .email-block-card-gmail {
background-color: var(--background, #fff);
border: 1px solid #dadce0;
border-radius: 8px;
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}
.tiptap-editor .ProseMirror .email-block-card-gmail:hover {
background-color: var(--background, #fff);
} }
/* Email block */
.tiptap-editor .ProseMirror .email-block-subject { .tiptap-editor .ProseMirror .email-block-subject {
font-size: 14px; font-size: 18px;
font-weight: 600; font-weight: 400;
color: var(--foreground); color: #202124;
margin-bottom: 8px; margin-bottom: 16px;
line-height: 1.4;
} }
.tiptap-editor .ProseMirror .email-block-loading, .tiptap-editor .ProseMirror .email-block-loading,
@ -1116,8 +1127,8 @@
gap: 6px; gap: 6px;
height: 50px; height: 50px;
justify-content: center; justify-content: center;
font-size: 13px; font-size: 14px;
color: color-mix(in srgb, var(--foreground) 45%, transparent); color: #5f6368;
} }
.tiptap-editor .ProseMirror .email-block-error, .tiptap-editor .ProseMirror .email-block-error,
@ -1125,13 +1136,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
color: color-mix(in srgb, var(--foreground) 55%, transparent); color: #5f6368;
font-size: 13px; font-size: 14px;
} }
.tiptap-editor .ProseMirror .email-block-error-msg { .tiptap-editor .ProseMirror .email-block-error-msg {
font-size: 13px; font-size: 13px;
color: #ef4444; color: #d93025;
padding: 8px 0; padding: 8px 0;
} }
@ -1149,17 +1160,17 @@
margin-bottom: 6px; margin-bottom: 6px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: color-mix(in srgb, var(--foreground) 50%, transparent); color: #5f6368;
background: color-mix(in srgb, var(--foreground) 5%, transparent); background: transparent;
border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); border: 1px solid #dadce0;
border-radius: 12px; border-radius: 16px;
cursor: pointer; cursor: pointer;
transition: background-color 0.12s ease; transition: background-color 0.12s ease;
width: fit-content; width: fit-content;
} }
.tiptap-editor .ProseMirror .email-block-thread-toggle:hover { .tiptap-editor .ProseMirror .email-block-thread-toggle:hover {
background: color-mix(in srgb, var(--foreground) 10%, transparent); background: #f1f3f4;
} }
.tiptap-editor .ProseMirror .email-block-toggle-chevron { .tiptap-editor .ProseMirror .email-block-toggle-chevron {
@ -1171,66 +1182,84 @@
} }
.tiptap-editor .ProseMirror .email-block-message { .tiptap-editor .ProseMirror .email-block-message {
padding: 8px 0; padding: 0 0 8px;
} }
.tiptap-editor .ProseMirror .email-block-message + .email-block-message { .tiptap-editor .ProseMirror .email-block-message + .email-block-message {
border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); border-top: 1px solid #e8eaed;
padding-top: 16px;
} }
.tiptap-editor .ProseMirror .email-block-message-header { .tiptap-editor .ProseMirror .email-block-message-header {
display: flex; display: flex;
align-items: center; align-items: flex-start;
gap: 8px; gap: 12px;
margin-bottom: 6px; margin-bottom: 12px;
} }
.tiptap-editor .ProseMirror .email-block-avatar { .tiptap-editor .ProseMirror .email-block-avatar {
width: 28px; width: 40px;
height: 28px; height: 40px;
border-radius: 50%; border-radius: 50%;
background: color-mix(in srgb, var(--primary) 20%, transparent); background: #1a73e8;
color: var(--primary); color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 11px; font-size: 14px;
font-weight: 600; font-weight: 500;
flex-shrink: 0; flex-shrink: 0;
letter-spacing: 0.02em;
} }
.tiptap-editor .ProseMirror .email-block-sender-info { .tiptap-editor .ProseMirror .email-block-sender-info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 0; min-width: 0;
flex: 1;
gap: 1px;
}
.tiptap-editor .ProseMirror .email-block-sender-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
} }
.tiptap-editor .ProseMirror .email-block-sender-name { .tiptap-editor .ProseMirror .email-block-sender-name {
font-size: 13px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: var(--foreground); color: #202124;
} }
.tiptap-editor .ProseMirror .email-block-sender-date { .tiptap-editor .ProseMirror .email-block-sender-date {
font-size: 11px; font-size: 12px;
color: color-mix(in srgb, var(--foreground) 45%, transparent); color: #5f6368;
white-space: nowrap;
flex-shrink: 0;
}
.tiptap-editor .ProseMirror .email-block-sender-to {
font-size: 12px;
color: #5f6368;
} }
.tiptap-editor .ProseMirror .email-block-message-body { .tiptap-editor .ProseMirror .email-block-message-body {
font-size: 13px; font-size: 14px;
color: color-mix(in srgb, var(--foreground) 80%, transparent); color: #3c4043;
white-space: pre-wrap; white-space: pre-wrap;
line-height: 1.5; line-height: 1.58;
padding-left: 36px; padding-left: 0;
} }
.tiptap-editor .ProseMirror .email-block-context { .tiptap-editor .ProseMirror .email-block-context {
margin-top: 8px; margin-top: 12px;
padding-top: 8px; padding-top: 12px;
border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); border-top: 1px solid #e8eaed;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 12px;
} }
.tiptap-editor .ProseMirror .email-block-context-section { .tiptap-editor .ProseMirror .email-block-context-section {
@ -1241,41 +1270,44 @@
.tiptap-editor .ProseMirror .email-block-context-label { .tiptap-editor .ProseMirror .email-block-context-label {
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.07em;
color: color-mix(in srgb, var(--foreground) 40%, transparent); color: #80868b;
} }
.tiptap-editor .ProseMirror .email-block-context-summary { .tiptap-editor .ProseMirror .email-block-context-summary {
font-size: 13px; font-size: 14px;
color: color-mix(in srgb, var(--foreground) 65%, transparent); color: #5f6368;
line-height: 1.5; line-height: 1.58;
white-space: pre-wrap; white-space: pre-wrap;
padding-left: 8px; padding-left: 12px;
border-left: 2px solid color-mix(in srgb, var(--foreground) 10%, transparent); border-left: 3px solid #e8eaed;
} }
/* Gmail-style action buttons */
.tiptap-editor .ProseMirror .email-block-gmail-btn { .tiptap-editor .ProseMirror .email-block-gmail-btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 5px; gap: 6px;
margin-top: 8px; margin-top: 0;
padding: 5px 12px; padding: 7px 16px;
font-size: 12px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: color-mix(in srgb, var(--foreground) 60%, transparent); color: #5f6368;
background: color-mix(in srgb, var(--foreground) 5%, transparent); background: transparent;
border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent); border: 1px solid #dadce0;
border-radius: 6px; border-radius: 18px;
cursor: pointer; cursor: pointer;
transition: background-color 0.12s ease, color 0.12s ease; transition: background-color 0.15s ease, box-shadow 0.15s ease;
width: fit-content; width: fit-content;
letter-spacing: 0.01em;
} }
.tiptap-editor .ProseMirror .email-block-gmail-btn:hover { .tiptap-editor .ProseMirror .email-block-gmail-btn:hover {
background: color-mix(in srgb, var(--foreground) 10%, transparent); background: #f1f3f4;
color: var(--foreground); box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
color: #202124;
} }
.tiptap-editor .ProseMirror .email-block-gmail-btn:disabled { .tiptap-editor .ProseMirror .email-block-gmail-btn:disabled {
@ -1283,14 +1315,16 @@
cursor: default; cursor: default;
} }
.tiptap-editor .ProseMirror .email-block-generate-btn { .tiptap-editor .ProseMirror .email-block-gmail-btn-primary {
color: var(--primary); color: #fff;
border-color: color-mix(in srgb, var(--primary) 25%, transparent); background: #1a73e8;
border-color: #1a73e8;
} }
.tiptap-editor .ProseMirror .email-block-generate-btn:hover:not(:disabled) { .tiptap-editor .ProseMirror .email-block-gmail-btn-primary:hover:not(:disabled) {
background: color-mix(in srgb, var(--primary) 10%, transparent); background: #1765cc;
color: var(--primary); box-shadow: 0 1px 2px 0 rgba(26, 115, 232, 0.45), 0 1px 3px 1px rgba(26, 115, 232, 0.3);
color: #fff;
} }
@keyframes email-block-spin { @keyframes email-block-spin {
@ -1301,12 +1335,12 @@
animation: email-block-spin 1s linear infinite; animation: email-block-spin 1s linear infinite;
} }
/* Email block split button (generate/assistant) */ /* Email block split button (generate/assistant) – Gmail style */
.tiptap-editor .ProseMirror .email-block-response-split { .tiptap-editor .ProseMirror .email-block-response-split {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
align-items: stretch; align-items: stretch;
margin-top: 8px; margin-top: 0;
} }
.tiptap-editor .ProseMirror .email-block-response-split > button { .tiptap-editor .ProseMirror .email-block-response-split > button {
@ -1316,21 +1350,21 @@
.tiptap-editor .ProseMirror .email-block-split-main { .tiptap-editor .ProseMirror .email-block-split-main {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 5px; gap: 6px;
padding: 5px 8px 5px 12px; padding: 7px 8px 7px 16px;
font-size: 12px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: var(--primary); color: #fff;
background: color-mix(in srgb, var(--foreground) 5%, transparent); background: #1a73e8;
border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent); border: 1px solid #1a73e8;
border-right: none; border-right: none;
border-radius: 6px 0 0 6px; border-radius: 18px 0 0 18px;
cursor: pointer; cursor: pointer;
transition: background-color 0.12s ease; transition: background-color 0.15s ease;
} }
.tiptap-editor .ProseMirror .email-block-split-main:hover:not(:disabled) { .tiptap-editor .ProseMirror .email-block-split-main:hover:not(:disabled) {
background: color-mix(in srgb, var(--foreground) 10%, transparent); background: #1765cc;
} }
.tiptap-editor .ProseMirror .email-block-split-main:disabled { .tiptap-editor .ProseMirror .email-block-split-main:disabled {
@ -1342,87 +1376,91 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 5px 6px; padding: 7px 8px;
color: color-mix(in srgb, var(--foreground) 60%, transparent); color: #fff;
background: color-mix(in srgb, var(--foreground) 5%, transparent); background: #1a73e8;
border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent); border: 1px solid #1a73e8;
border-left: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent); border-left: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 0 6px 6px 0; border-radius: 0 18px 18px 0;
cursor: pointer; cursor: pointer;
transition: background-color 0.12s ease; transition: background-color 0.15s ease;
} }
.tiptap-editor .ProseMirror .email-block-split-chevron:hover { .tiptap-editor .ProseMirror .email-block-split-chevron:hover {
background: color-mix(in srgb, var(--foreground) 10%, transparent); background: #1765cc;
} }
.tiptap-editor .ProseMirror .email-block-split-chevron-open { .tiptap-editor .ProseMirror .email-block-split-chevron-open {
border-radius: 0 6px 0 0; border-radius: 0 18px 0 0;
border-bottom-color: transparent; border-bottom-color: transparent;
} }
.tiptap-editor .ProseMirror .email-block-split-dropdown { .tiptap-editor .ProseMirror .email-block-split-dropdown {
position: absolute; position: absolute;
top: calc(100% - 1px); top: calc(100%);
right: 0; right: 0;
z-index: 50; z-index: 50;
background: color-mix(in srgb, var(--foreground) 5%, transparent); background: #fff;
border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent); border: 1px solid #dadce0;
border-top: none; border-radius: 8px;
border-radius: 0 0 6px 6px; box-shadow: 0 2px 6px 2px rgba(60, 64, 67, 0.15), 0 1px 2px 0 rgba(60, 64, 67, 0.3);
margin-top: 4px;
overflow: hidden;
} }
.tiptap-editor .ProseMirror .email-block-split-option { .tiptap-editor .ProseMirror .email-block-split-option {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 5px; gap: 8px;
white-space: nowrap; white-space: nowrap;
padding: 5px 12px; padding: 8px 16px;
font-size: 12px; font-size: 14px;
font-weight: 500; font-weight: 400;
color: color-mix(in srgb, var(--foreground) 60%, transparent); color: #202124;
background: none; background: none;
border: none; border: none;
border-radius: 0 0 6px 6px;
cursor: pointer; cursor: pointer;
transition: background-color 0.12s ease; transition: background-color 0.12s ease;
} }
.tiptap-editor .ProseMirror .email-block-split-option:hover { .tiptap-editor .ProseMirror .email-block-split-option:hover {
background: color-mix(in srgb, var(--foreground) 10%, transparent); background: #f1f3f4;
color: var(--foreground);
} }
/* Email draft block */ /* Email draft block – Gmail compose style */
.tiptap-editor .ProseMirror .email-draft-block-header { .tiptap-editor .ProseMirror .email-draft-block-header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 0;
margin-bottom: 10px; margin-bottom: 12px;
padding-bottom: 8px; padding-bottom: 0;
border-bottom: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); border-bottom: none;
} }
.tiptap-editor .ProseMirror .email-draft-block-field { .tiptap-editor .ProseMirror .email-draft-block-field {
display: flex; display: flex;
align-items: baseline; align-items: center;
gap: 8px; gap: 8px;
font-size: 13px; font-size: 14px;
padding: 6px 0;
border-bottom: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
} }
.tiptap-editor .ProseMirror .email-draft-block-label { .tiptap-editor .ProseMirror .email-draft-block-label {
font-weight: 500; font-weight: 500;
color: color-mix(in srgb, var(--foreground) 45%, transparent); color: color-mix(in srgb, var(--foreground) 45%, transparent);
min-width: 50px; min-width: 55px;
font-size: 14px;
} }
.tiptap-editor .ProseMirror .email-draft-block-value { .tiptap-editor .ProseMirror .email-draft-block-value {
color: var(--foreground); color: var(--foreground);
font-size: 14px;
} }
.tiptap-editor .ProseMirror .email-draft-block-input { .tiptap-editor .ProseMirror .email-draft-block-input {
flex: 1; flex: 1;
font-size: 13px; font-size: 14px;
color: var(--foreground); color: var(--foreground);
background: none; background: none;
border: none; border: none;
@ -1432,32 +1470,34 @@
} }
.tiptap-editor .ProseMirror .email-draft-block-input::placeholder { .tiptap-editor .ProseMirror .email-draft-block-input::placeholder {
color: color-mix(in srgb, var(--foreground) 30%, transparent); color: color-mix(in srgb, var(--foreground) 35%, transparent);
} }
.tiptap-editor .ProseMirror .email-draft-block-body-input { .tiptap-editor .ProseMirror .email-draft-block-body-input {
width: 100%; width: 100%;
font-size: 13px; font-size: 14px;
color: var(--foreground); color: var(--foreground);
background: none; background: none;
border: none; border: none;
outline: none; outline: none;
padding: 4px 0; padding: 8px 0;
font-family: inherit; font-family: inherit;
line-height: 1.6; line-height: 1.58;
resize: none; resize: none;
overflow: hidden; overflow: hidden;
} }
.tiptap-editor .ProseMirror .email-draft-block-body-input::placeholder { .tiptap-editor .ProseMirror .email-draft-block-body-input::placeholder {
color: color-mix(in srgb, var(--foreground) 30%, transparent); color: color-mix(in srgb, var(--foreground) 35%, transparent);
} }
.tiptap-editor .ProseMirror .email-draft-block-actions { .tiptap-editor .ProseMirror .email-draft-block-actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 8px;
margin-top: 8px; margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #e8eaed;
} }
.tiptap-editor .ProseMirror .email-draft-block-reply { .tiptap-editor .ProseMirror .email-draft-block-reply {
@ -1468,26 +1508,26 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
padding: 4px 8px; padding: 4px 12px;
margin-bottom: 6px; margin-bottom: 6px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: color-mix(in srgb, var(--foreground) 50%, transparent); color: #5f6368;
background: color-mix(in srgb, var(--foreground) 5%, transparent); background: transparent;
border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent); border: 1px solid #dadce0;
border-radius: 12px; border-radius: 16px;
cursor: pointer; cursor: pointer;
transition: background-color 0.12s ease; transition: background-color 0.12s ease;
width: fit-content; width: fit-content;
} }
.tiptap-editor .ProseMirror .email-draft-block-reply-toggle:hover { .tiptap-editor .ProseMirror .email-draft-block-reply-toggle:hover {
background: color-mix(in srgb, var(--foreground) 10%, transparent); background: #f1f3f4;
} }
.tiptap-editor .ProseMirror .email-draft-block-reply-thread { .tiptap-editor .ProseMirror .email-draft-block-reply-thread {
padding: 4px 0 0 8px; padding: 4px 0 0 12px;
border-left: 2px solid color-mix(in srgb, var(--foreground) 10%, transparent); border-left: 3px solid #e8eaed;
margin-left: 4px; margin-left: 4px;
} }