mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-05-03 04:12:38 +02:00
Daily5 (#457)
* better cal and email block design * modified email block and draft with copilot
This commit is contained in:
arkml
GitHub
parent
0e362cc763
commit
903fecc5f5
4 changed files with 366 additions and 634 deletions
|
|
@ -9,12 +9,15 @@ function formatTime(dateStr: string): string {
|
|||
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 now = new Date()
|
||||
const isToday = d.getDate() === now.getDate() && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()
|
||||
return {
|
||||
day: d.getDate(),
|
||||
month: d.toLocaleDateString([], { month: 'long' }),
|
||||
weekday: d.toLocaleDateString([], { weekday: 'short' }),
|
||||
month: d.toLocaleDateString([], { month: 'short' }).toUpperCase(),
|
||||
weekday: d.toLocaleDateString([], { weekday: 'short' }).toUpperCase(),
|
||||
isToday,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -62,7 +65,8 @@ interface ResolvedEvent {
|
|||
conferenceLink?: string
|
||||
}
|
||||
|
||||
const EVENT_BAR_COLOR = '#7ec8c8'
|
||||
const GCAL_EVENT_COLOR = '#039be5'
|
||||
const GCAL_TODAY_COLOR = '#1a73e8'
|
||||
|
||||
function JoinMeetingSplitButton({ onJoinAndNotes, onNotesOnly }: {
|
||||
onJoinAndNotes: () => void
|
||||
|
|
@ -273,11 +277,8 @@ function CalendarBlockView({ node, deleteNode }: { node: { attrs: Record<string,
|
|||
<div className="calendar-block-date-left">
|
||||
{parts ? (
|
||||
<>
|
||||
<span className="calendar-block-day">{parts.day}</span>
|
||||
<div className="calendar-block-month-weekday">
|
||||
<span className="calendar-block-month">{parts.month}</span>
|
||||
<span className="calendar-block-weekday">{parts.weekday}</span>
|
||||
</div>
|
||||
<span className="calendar-block-weekday" style={parts.isToday ? { color: GCAL_TODAY_COLOR } : undefined}>{parts.weekday}</span>
|
||||
<span className={`calendar-block-day${parts.isToday ? ' calendar-block-day-today' : ''}`}>{parts.day}</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="calendar-block-day">?</span>
|
||||
|
|
@ -288,16 +289,13 @@ function CalendarBlockView({ node, deleteNode }: { node: { attrs: Record<string,
|
|||
<div
|
||||
key={event._idx}
|
||||
className={`calendar-block-event ${event.htmlLink ? 'calendar-block-event-clickable' : ''}`}
|
||||
style={{ backgroundColor: GCAL_EVENT_COLOR }}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
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-title">
|
||||
{event.summary || 'Untitled event'}
|
||||
{event.summary || '(No title)'}
|
||||
</div>
|
||||
<div className="calendar-block-event-time">
|
||||
{getTimeRange(event)}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { mergeAttributes, Node } from '@tiptap/react'
|
||||
import { ReactNodeViewRenderer, NodeViewWrapper } from '@tiptap/react'
|
||||
import { X, Mail, ChevronDown, ExternalLink, Copy, Check, Sparkles, Loader2, MessageSquare } from 'lucide-react'
|
||||
import { X, Mail, ChevronDown, ExternalLink, Copy, Check, MessageSquare } from 'lucide-react'
|
||||
import { blocks } from '@x/shared'
|
||||
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||
import { useTheme } from '@/contexts/theme-context'
|
||||
|
||||
// --- Helpers ---
|
||||
|
||||
|
|
@ -17,8 +18,10 @@ 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()
|
||||
/** Extract just the name part from "Name <email>" format */
|
||||
function senderFirstName(from: string): string {
|
||||
const name = from.replace(/<.*>/, '').trim()
|
||||
return name.split(/\s+/)[0] || name
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
|
@ -45,27 +48,15 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
|
|||
|
||||
const hasDraft = !!config?.draft_response
|
||||
const hasPastSummary = !!config?.past_summary
|
||||
const responseMode = config?.response_mode || 'both'
|
||||
|
||||
const { resolvedTheme } = useTheme()
|
||||
|
||||
// Local draft state for editing
|
||||
const [draftBody, setDraftBody] = useState(config?.draft_response || '')
|
||||
const [contextExpanded, setContextExpanded] = useState(false)
|
||||
const [emailExpanded, setEmailExpanded] = useState(false)
|
||||
const [copied, setCopied] = useState(false)
|
||||
const [generating, setGenerating] = useState(false)
|
||||
const [responseSplitOpen, setResponseSplitOpen] = useState(false)
|
||||
const responseSplitRef = useRef<HTMLDivElement>(null)
|
||||
const bodyRef = useRef<HTMLTextAreaElement>(null)
|
||||
|
||||
// Close split dropdown on outside click
|
||||
useEffect(() => {
|
||||
if (!responseSplitOpen) return
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (responseSplitRef.current && !responseSplitRef.current.contains(e.target as globalThis.Node)) setResponseSplitOpen(false)
|
||||
}
|
||||
document.addEventListener('mousedown', handler)
|
||||
return () => document.removeEventListener('mousedown', handler)
|
||||
}, [responseSplitOpen])
|
||||
|
||||
// Sync draft from external changes
|
||||
useEffect(() => {
|
||||
try {
|
||||
|
|
@ -89,53 +80,23 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
|
|||
} catch { /* ignore */ }
|
||||
}, [raw, updateAttributes])
|
||||
|
||||
const generateResponse = useCallback(async () => {
|
||||
if (!config || generating) return
|
||||
setGenerating(true)
|
||||
try {
|
||||
const ipc = (window as unknown as { ipc: { invoke: (channel: string, args: Record<string, unknown>) => Promise<{ response?: string }> } }).ipc
|
||||
// Build context for the agent
|
||||
let noteContent = `# Email: ${config.subject || 'No subject'}\n\n`
|
||||
noteContent += `**From:** ${config.from || 'Unknown'}\n`
|
||||
noteContent += `**Date:** ${config.date || 'Unknown'}\n\n`
|
||||
noteContent += `## Latest email\n\n${config.latest_email}\n\n`
|
||||
if (config.past_summary) {
|
||||
noteContent += `## Earlier conversation summary\n\n${config.past_summary}\n\n`
|
||||
}
|
||||
|
||||
const result = await ipc.invoke('inline-task:process', {
|
||||
instruction: `Draft a concise, professional response to this email. Return only the email body text, no subject line or headers.`,
|
||||
noteContent,
|
||||
notePath: '',
|
||||
})
|
||||
|
||||
if (result.response) {
|
||||
// Clean up the response — strip any markdown headers the agent may add
|
||||
const cleaned = result.response.replace(/^#+\s+.*\n*/gm, '').trim()
|
||||
setDraftBody(cleaned)
|
||||
// Update the block data to include the draft
|
||||
const current = JSON.parse(raw) as Record<string, unknown>
|
||||
updateAttributes({ data: JSON.stringify({ ...current, draft_response: cleaned }) })
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[email-block] Failed to generate response:', err)
|
||||
} finally {
|
||||
setGenerating(false)
|
||||
}
|
||||
}, [config, generating, raw, updateAttributes])
|
||||
|
||||
const draftWithAssistant = useCallback(() => {
|
||||
if (!config) return
|
||||
let prompt = `Help me draft a response to this email`
|
||||
let prompt = draftBody
|
||||
? `Help me refine this draft response to an email`
|
||||
: `Help me draft a response to this email`
|
||||
if (config.threadId) {
|
||||
prompt += `. Read the full thread at gmail_sync/${config.threadId}.md for context`
|
||||
}
|
||||
prompt += `.\n\n`
|
||||
prompt += `**From:** ${config.from || 'Unknown'}\n`
|
||||
prompt += `**Subject:** ${config.subject || 'No subject'}\n`
|
||||
if (draftBody) {
|
||||
prompt += `\n**Current draft:**\n${draftBody}\n`
|
||||
}
|
||||
window.__pendingEmailDraft = { prompt }
|
||||
window.dispatchEvent(new Event('email-block:draft-with-assistant'))
|
||||
}, [config])
|
||||
}, [config, draftBody])
|
||||
|
||||
if (!config) {
|
||||
return (
|
||||
|
|
@ -152,185 +113,112 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
|
|||
? `https://mail.google.com/mail/u/0/#all/${config.threadId}`
|
||||
: null
|
||||
|
||||
// --- Render: Draft mode (draft_response present) ---
|
||||
if (hasDraft) {
|
||||
return (
|
||||
<NodeViewWrapper className="email-block-wrapper" data-type="email-block">
|
||||
<div className="email-block-card" onMouseDown={(e) => e.stopPropagation()}>
|
||||
<button className="email-block-delete" onClick={deleteNode} aria-label="Delete email block">
|
||||
<X size={14} />
|
||||
</button>
|
||||
{/* Draft header */}
|
||||
{config.to && (
|
||||
<div className="email-draft-block-header">
|
||||
<div className="email-draft-block-field">
|
||||
<span className="email-draft-block-label">To</span>
|
||||
<span className="email-draft-block-value">{config.to}</span>
|
||||
</div>
|
||||
{config.subject && (
|
||||
<div className="email-draft-block-field">
|
||||
<span className="email-draft-block-label">Subject</span>
|
||||
<span className="email-draft-block-value">{config.subject}</span>
|
||||
// Build summary: use explicit summary, or auto-generate from sender + subject
|
||||
const summary = config.summary
|
||||
|| (config.from && config.subject
|
||||
? `${senderFirstName(config.from)} reached out about ${config.subject}`
|
||||
: config.subject || 'New email')
|
||||
|
||||
return (
|
||||
<NodeViewWrapper className="email-block-wrapper" data-type="email-block">
|
||||
<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">
|
||||
<X size={14} />
|
||||
</button>
|
||||
|
||||
{/* Header: Email badge */}
|
||||
<div className="email-block-badge">
|
||||
<Mail size={13} />
|
||||
Email
|
||||
</div>
|
||||
|
||||
{/* Summary */}
|
||||
<div className="email-block-summary">{summary}</div>
|
||||
|
||||
{/* Expandable email details */}
|
||||
<button
|
||||
className="email-block-expand-btn"
|
||||
onClick={(e) => { e.stopPropagation(); setEmailExpanded(!emailExpanded) }}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<ChevronDown size={13} className={`email-block-toggle-chevron ${emailExpanded ? 'email-block-toggle-chevron-open' : ''}`} />
|
||||
{emailExpanded ? 'Hide email' : 'Show email'}
|
||||
{config.from && <span className="email-block-expand-meta">· From {senderFirstName(config.from)}</span>}
|
||||
{config.date && <span className="email-block-expand-meta">· {formatEmailDate(config.date)}</span>}
|
||||
</button>
|
||||
|
||||
{emailExpanded && (
|
||||
<div className="email-block-email-details">
|
||||
<div className="email-block-message">
|
||||
<div className="email-block-message-header">
|
||||
<div className="email-block-sender-info">
|
||||
<div className="email-block-sender-row">
|
||||
<div className="email-block-sender-name">{config.from || 'Unknown'}</div>
|
||||
{config.date && <div className="email-block-sender-date">{formatEmailDate(config.date)}</div>}
|
||||
</div>
|
||||
{config.subject && <div className="email-block-subject-line">Subject: {config.subject}</div>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="email-block-message-body">{config.latest_email}</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Editable draft body */}
|
||||
<textarea
|
||||
ref={bodyRef}
|
||||
className="email-draft-block-body-input"
|
||||
value={draftBody}
|
||||
onChange={(e) => setDraftBody(e.target.value)}
|
||||
onBlur={() => commitDraft(draftBody)}
|
||||
placeholder="Write your reply..."
|
||||
rows={3}
|
||||
/>
|
||||
{/* Action buttons */}
|
||||
<div className="email-draft-block-actions">
|
||||
{(hasPastSummary || config.latest_email) && (
|
||||
<button
|
||||
className="email-block-gmail-btn"
|
||||
onClick={(e) => { e.stopPropagation(); setContextExpanded(!contextExpanded) }}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<ChevronDown size={13} className={`email-block-toggle-chevron ${contextExpanded ? 'email-block-toggle-chevron-open' : ''}`} />
|
||||
{contextExpanded ? 'Hide' : 'Show'} context
|
||||
</button>
|
||||
{hasPastSummary && (
|
||||
<div className="email-block-context-section">
|
||||
<div className="email-block-context-label">Earlier conversation</div>
|
||||
<div className="email-block-context-summary">{config.past_summary}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Draft section */}
|
||||
{hasDraft && (
|
||||
<div className="email-block-draft-section">
|
||||
<div className="email-block-draft-label">Draft reply</div>
|
||||
<textarea
|
||||
key={resolvedTheme}
|
||||
ref={bodyRef}
|
||||
className="email-draft-block-body-input"
|
||||
value={draftBody}
|
||||
onChange={(e) => setDraftBody(e.target.value)}
|
||||
onBlur={() => commitDraft(draftBody)}
|
||||
placeholder="Write your reply..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="email-block-actions">
|
||||
<button
|
||||
className="email-block-gmail-btn email-block-gmail-btn-primary"
|
||||
onClick={draftWithAssistant}
|
||||
>
|
||||
<MessageSquare size={13} />
|
||||
{hasDraft ? 'Refine with Rowboat' : 'Draft with Rowboat'}
|
||||
</button>
|
||||
{hasDraft && (
|
||||
<button
|
||||
className="email-block-gmail-btn"
|
||||
className="email-block-gmail-btn email-block-gmail-btn-primary"
|
||||
onClick={() => {
|
||||
void navigator.clipboard.writeText(draftBody)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
navigator.clipboard.writeText(draftBody).then(() => {
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}).catch(() => {
|
||||
// Fallback for Electron contexts where clipboard API may fail
|
||||
const textarea = document.createElement('textarea')
|
||||
textarea.value = draftBody
|
||||
document.body.appendChild(textarea)
|
||||
textarea.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(textarea)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
})
|
||||
}}
|
||||
>
|
||||
{copied ? <Check size={13} /> : <Copy size={13} />}
|
||||
{copied ? 'Copied!' : 'Copy draft'}
|
||||
</button>
|
||||
{gmailUrl && (
|
||||
<button
|
||||
className="email-block-gmail-btn"
|
||||
onClick={() => {
|
||||
void navigator.clipboard.writeText(draftBody)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
window.open(gmailUrl, '_blank')
|
||||
}}
|
||||
>
|
||||
<ExternalLink size={13} />
|
||||
Reply in Gmail
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{/* Context: latest email + past summary */}
|
||||
{contextExpanded && (
|
||||
<div className="email-block-context">
|
||||
<div className="email-block-context-section">
|
||||
<div className="email-block-message">
|
||||
<div className="email-block-message-header">
|
||||
{config.from && <div className="email-block-avatar">{getInitials(config.from)}</div>}
|
||||
<div className="email-block-sender-info">
|
||||
{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>
|
||||
<div className="email-block-message-body">{config.latest_email}</div>
|
||||
</div>
|
||||
</div>
|
||||
{hasPastSummary && (
|
||||
<div className="email-block-context-section">
|
||||
<div className="email-block-context-label">Earlier conversation</div>
|
||||
<div className="email-block-context-summary">{config.past_summary}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</NodeViewWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Render: Read mode (no draft_response) ---
|
||||
return (
|
||||
<NodeViewWrapper className="email-block-wrapper" data-type="email-block">
|
||||
<div className="email-block-card" onMouseDown={(e) => e.stopPropagation()}>
|
||||
<button className="email-block-delete" onClick={deleteNode} aria-label="Delete email block">
|
||||
<X size={14} />
|
||||
</button>
|
||||
{config.subject && <div className="email-block-subject">{config.subject}</div>}
|
||||
{/* Latest email message */}
|
||||
<div className="email-block-message">
|
||||
<div className="email-block-message-header">
|
||||
{config.from && <div className="email-block-avatar">{getInitials(config.from)}</div>}
|
||||
<div className="email-block-sender-info">
|
||||
{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>
|
||||
<div className="email-block-message-body">{config.latest_email}</div>
|
||||
</div>
|
||||
{/* Action buttons */}
|
||||
<div className="email-draft-block-actions">
|
||||
{hasPastSummary && (
|
||||
<button
|
||||
className="email-block-gmail-btn"
|
||||
onClick={(e) => { e.stopPropagation(); setContextExpanded(!contextExpanded) }}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<ChevronDown size={13} className={`email-block-toggle-chevron ${contextExpanded ? 'email-block-toggle-chevron-open' : ''}`} />
|
||||
{contextExpanded ? 'Hide' : 'Show'} context
|
||||
</button>
|
||||
)}
|
||||
{responseMode === 'inline' && (
|
||||
<button
|
||||
className="email-block-gmail-btn email-block-generate-btn"
|
||||
onClick={generateResponse}
|
||||
disabled={generating}
|
||||
>
|
||||
{generating ? <Loader2 size={13} className="email-block-spinner" /> : <Sparkles size={13} />}
|
||||
{generating ? 'Generating...' : 'Generate response'}
|
||||
</button>
|
||||
)}
|
||||
{responseMode === 'assistant' && (
|
||||
<button
|
||||
className="email-block-gmail-btn email-block-generate-btn"
|
||||
onClick={draftWithAssistant}
|
||||
>
|
||||
<MessageSquare size={13} />
|
||||
Draft with assistant
|
||||
</button>
|
||||
)}
|
||||
{responseMode === 'both' && (
|
||||
<div className="email-block-response-split" ref={responseSplitRef}>
|
||||
<button
|
||||
className="email-block-split-main"
|
||||
onClick={generateResponse}
|
||||
disabled={generating}
|
||||
>
|
||||
{generating ? <Loader2 size={13} className="email-block-spinner" /> : <Sparkles size={13} />}
|
||||
{generating ? 'Generating...' : 'Generate response'}
|
||||
</button>
|
||||
<button
|
||||
className={`email-block-split-chevron ${responseSplitOpen ? 'email-block-split-chevron-open' : ''}`}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
onClick={(e) => { e.stopPropagation(); setResponseSplitOpen(!responseSplitOpen) }}
|
||||
>
|
||||
<ChevronDown size={12} />
|
||||
</button>
|
||||
{responseSplitOpen && (
|
||||
<div className="email-block-split-dropdown">
|
||||
<button
|
||||
className="email-block-split-option"
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
onClick={(e) => { e.stopPropagation(); setResponseSplitOpen(false); draftWithAssistant() }}
|
||||
>
|
||||
<MessageSquare size={13} />
|
||||
Draft with assistant
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{gmailUrl && (
|
||||
<button
|
||||
|
|
@ -342,15 +230,6 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
|
|||
</button>
|
||||
)}
|
||||
</div>
|
||||
{/* Past summary context */}
|
||||
{contextExpanded && hasPastSummary && (
|
||||
<div className="email-block-context">
|
||||
<div className="email-block-context-section">
|
||||
<div className="email-block-context-label">Earlier conversation</div>
|
||||
<div className="email-block-context-summary">{config.past_summary}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</NodeViewWrapper>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -859,12 +859,13 @@
|
|||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Calendar block */
|
||||
/* Calendar block – Google Calendar style */
|
||||
.tiptap-editor .ProseMirror .calendar-block-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: var(--foreground);
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
color: color-mix(in srgb, var(--foreground) 70%, transparent);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .calendar-block-loading,
|
||||
|
|
@ -873,7 +874,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
color: color-mix(in srgb, var(--foreground) 45%, transparent);
|
||||
}
|
||||
|
||||
|
|
@ -897,66 +898,69 @@
|
|||
|
||||
.tiptap-editor .ProseMirror .calendar-block-separator {
|
||||
border: none;
|
||||
border-top: 1px dashed color-mix(in srgb, var(--foreground) 20%, transparent);
|
||||
margin: 4px 0;
|
||||
border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .calendar-block-date-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .calendar-block-month {
|
||||
font-size: 12px;
|
||||
color: color-mix(in srgb, var(--foreground) 50%, transparent);
|
||||
line-height: 1.3;
|
||||
align-items: center;
|
||||
width: 56px;
|
||||
flex-shrink: 0;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .calendar-block-weekday {
|
||||
font-size: 12px;
|
||||
color: color-mix(in srgb, var(--foreground) 40%, transparent);
|
||||
line-height: 1.3;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .calendar-block-event {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
transition: background-color 0.12s ease;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
transition: filter 0.12s ease;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .calendar-block-event-clickable {
|
||||
|
|
@ -964,14 +968,7 @@
|
|||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .calendar-block-event-clickable:hover {
|
||||
background-color: color-mix(in srgb, var(--foreground) 5%, transparent);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .calendar-block-event-bar {
|
||||
width: 3px;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
min-height: 32px;
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .calendar-block-event-content {
|
||||
|
|
@ -984,20 +981,22 @@
|
|||
.tiptap-editor .ProseMirror .calendar-block-event-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--foreground);
|
||||
color: #fff;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .calendar-block-event-time {
|
||||
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 {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
margin-top: 4px;
|
||||
border-radius: 5px;
|
||||
margin-top: 6px;
|
||||
border-radius: 4px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
|
@ -1008,17 +1007,17 @@
|
|||
padding: 4px 8px 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #7ec8c8;
|
||||
background: color-mix(in srgb, #7ec8c8 12%, transparent);
|
||||
border: 1px solid color-mix(in srgb, #7ec8c8 25%, transparent);
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
border-right: none;
|
||||
border-radius: 5px 0 0 5px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.12s ease;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
@ -1031,21 +1030,21 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px 6px;
|
||||
color: #7ec8c8;
|
||||
background: color-mix(in srgb, #7ec8c8 12%, transparent);
|
||||
border: 1px solid color-mix(in srgb, #7ec8c8 25%, transparent);
|
||||
border-left: 1px solid color-mix(in srgb, #7ec8c8 20%, transparent);
|
||||
border-radius: 0 5px 5px 0;
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.25);
|
||||
border-radius: 0 4px 4px 0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.12s ease;
|
||||
}
|
||||
|
||||
.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 {
|
||||
border-radius: 0 5px 0 0;
|
||||
border-radius: 0 4px 0 0;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -1054,10 +1053,11 @@
|
|||
top: calc(100% - 1px);
|
||||
right: 0;
|
||||
z-index: 50;
|
||||
background: color-mix(in srgb, #7ec8c8 12%, transparent);
|
||||
border: 1px solid color-mix(in srgb, #7ec8c8 25%, transparent);
|
||||
border-top: none;
|
||||
border-radius: 0 0 5px 5px;
|
||||
background: #039be5;
|
||||
border: none;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 0 0 4px 4px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .calendar-block-split-option {
|
||||
|
|
@ -1068,7 +1068,7 @@
|
|||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #7ec8c8;
|
||||
color: #fff;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
|
@ -1076,90 +1076,86 @@
|
|||
}
|
||||
|
||||
.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 {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
margin-top: 4px;
|
||||
margin-top: 6px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #7ec8c8;
|
||||
background: color-mix(in srgb, #7ec8c8 12%, transparent);
|
||||
border: 1px solid color-mix(in srgb, #7ec8c8 25%, transparent);
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.12s ease, border-color 0.12s ease;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .calendar-block-join-btn:hover {
|
||||
background: color-mix(in srgb, #7ec8c8 22%, transparent);
|
||||
border-color: color-mix(in srgb, #7ec8c8 40%, transparent);
|
||||
}
|
||||
|
||||
/* Email block */
|
||||
.tiptap-editor .ProseMirror .email-block-subject {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--foreground);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-loading,
|
||||
.tiptap-editor .ProseMirror .email-block-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 50px;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
color: color-mix(in srgb, var(--foreground) 45%, transparent);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-error,
|
||||
.tiptap-editor .ProseMirror .email-draft-block-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: color-mix(in srgb, var(--foreground) 55%, transparent);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-error-msg {
|
||||
font-size: 13px;
|
||||
color: #ef4444;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-thread {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-thread-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: color-mix(in srgb, var(--foreground) 50%, transparent);
|
||||
background: color-mix(in srgb, var(--foreground) 5%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.12s ease;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-thread-toggle:hover {
|
||||
background: color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
.tiptap-editor .ProseMirror .calendar-block-join-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Email block – Gmail style */
|
||||
.tiptap-editor .ProseMirror .email-block-card-gmail {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-card-gmail:hover {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
/* Email badge */
|
||||
.tiptap-editor .ProseMirror .email-block-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: color-mix(in srgb, var(--foreground) 45%, transparent);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Summary */
|
||||
.tiptap-editor .ProseMirror .email-block-summary {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--foreground);
|
||||
line-height: 1.4;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Expand button */
|
||||
.tiptap-editor .ProseMirror .email-block-expand-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: color-mix(in srgb, var(--foreground) 50%, transparent);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.12s ease;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-expand-btn:hover {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-expand-meta {
|
||||
color: color-mix(in srgb, var(--foreground) 35%, transparent);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-toggle-chevron {
|
||||
|
|
@ -1170,111 +1166,156 @@
|
|||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-message {
|
||||
padding: 8px 0;
|
||||
/* Email details (expanded) */
|
||||
.tiptap-editor .ProseMirror .email-block-email-details {
|
||||
margin-top: 10px;
|
||||
padding: 12px;
|
||||
background: color-mix(in srgb, var(--foreground) 4%, transparent);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-message + .email-block-message {
|
||||
border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
.tiptap-editor .ProseMirror .email-block-message {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-message-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: color-mix(in srgb, var(--primary) 20%, transparent);
|
||||
color: var(--primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-sender-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-sender-date {
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
color: color-mix(in srgb, var(--foreground) 50%, transparent);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-subject-line {
|
||||
font-size: 12px;
|
||||
color: color-mix(in srgb, var(--foreground) 45%, transparent);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-message-body {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
color: color-mix(in srgb, var(--foreground) 80%, transparent);
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.5;
|
||||
padding-left: 36px;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-context {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
line-height: 1.58;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-context-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-context-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
letter-spacing: 0.07em;
|
||||
color: color-mix(in srgb, var(--foreground) 40%, transparent);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-context-summary {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
color: color-mix(in srgb, var(--foreground) 65%, transparent);
|
||||
line-height: 1.5;
|
||||
line-height: 1.58;
|
||||
white-space: pre-wrap;
|
||||
padding-left: 8px;
|
||||
border-left: 2px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
padding-left: 12px;
|
||||
border-left: 3px solid color-mix(in srgb, var(--foreground) 12%, transparent);
|
||||
}
|
||||
|
||||
/* Draft section */
|
||||
.tiptap-editor .ProseMirror .email-block-draft-section {
|
||||
margin-top: 10px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-draft-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: color-mix(in srgb, var(--foreground) 40%, transparent);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-draft-block-body-input {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: var(--foreground);
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 4px 0;
|
||||
font-family: inherit;
|
||||
line-height: 1.58;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-draft-block-body-input::placeholder {
|
||||
color: color-mix(in srgb, var(--foreground) 35%, transparent);
|
||||
}
|
||||
|
||||
/* Action buttons */
|
||||
.tiptap-editor .ProseMirror .email-block-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-gmail-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
margin-top: 8px;
|
||||
padding: 5px 12px;
|
||||
font-size: 12px;
|
||||
gap: 6px;
|
||||
padding: 7px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: color-mix(in srgb, var(--foreground) 60%, transparent);
|
||||
background: color-mix(in srgb, var(--foreground) 5%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 18px;
|
||||
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;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-gmail-btn:hover {
|
||||
background: color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
background: color-mix(in srgb, var(--foreground) 8%, transparent);
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 1px rgba(0, 0, 0, 0.06);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
|
|
@ -1283,212 +1324,25 @@
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-generate-btn {
|
||||
color: var(--primary);
|
||||
border-color: color-mix(in srgb, var(--primary) 25%, transparent);
|
||||
.tiptap-editor .ProseMirror .email-block-gmail-btn-primary {
|
||||
color: #fff;
|
||||
background: #1a73e8;
|
||||
border-color: #1a73e8;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-generate-btn:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--primary) 10%, transparent);
|
||||
color: var(--primary);
|
||||
.tiptap-editor .ProseMirror .email-block-gmail-btn-primary:hover:not(:disabled) {
|
||||
background: #1765cc;
|
||||
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 {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-spinner {
|
||||
animation: email-block-spin 1s linear infinite;
|
||||
}
|
||||
|
||||
/* Email block split button (generate/assistant) */
|
||||
.tiptap-editor .ProseMirror .email-block-response-split {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-response-split > button {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-split-main {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px 8px 5px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--primary);
|
||||
background: color-mix(in srgb, var(--foreground) 5%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
|
||||
border-right: none;
|
||||
border-radius: 6px 0 0 6px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.12s ease;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-split-main:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-split-main:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-split-chevron {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px 6px;
|
||||
color: color-mix(in srgb, var(--foreground) 60%, transparent);
|
||||
background: color-mix(in srgb, var(--foreground) 5%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
|
||||
border-left: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
|
||||
border-radius: 0 6px 6px 0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.12s ease;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-split-chevron:hover {
|
||||
background: color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-split-chevron-open {
|
||||
border-radius: 0 6px 0 0;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-split-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% - 1px);
|
||||
right: 0;
|
||||
z-index: 50;
|
||||
background: color-mix(in srgb, var(--foreground) 5%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
|
||||
border-top: none;
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-split-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
white-space: nowrap;
|
||||
padding: 5px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: color-mix(in srgb, var(--foreground) 60%, transparent);
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 0 0 6px 6px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.12s ease;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-block-split-option:hover {
|
||||
background: color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
/* Email draft block */
|
||||
.tiptap-editor .ProseMirror .email-draft-block-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-draft-block-field {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-draft-block-label {
|
||||
font-weight: 500;
|
||||
color: color-mix(in srgb, var(--foreground) 45%, transparent);
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-draft-block-value {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-draft-block-input {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: var(--foreground);
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 2px 0;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-draft-block-input::placeholder {
|
||||
color: color-mix(in srgb, var(--foreground) 30%, transparent);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-draft-block-body-input {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
color: var(--foreground);
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 4px 0;
|
||||
font-family: inherit;
|
||||
line-height: 1.6;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-draft-block-body-input::placeholder {
|
||||
color: color-mix(in srgb, var(--foreground) 30%, transparent);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-draft-block-actions {
|
||||
.tiptap-editor .ProseMirror .email-block-error,
|
||||
.tiptap-editor .ProseMirror .email-draft-block-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-draft-block-reply {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-draft-block-reply-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: color-mix(in srgb, var(--foreground) 50%, transparent);
|
||||
background: color-mix(in srgb, var(--foreground) 5%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.12s ease;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-draft-block-reply-toggle:hover {
|
||||
background: color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
}
|
||||
|
||||
.tiptap-editor .ProseMirror .email-draft-block-reply-thread {
|
||||
padding: 4px 0 0 8px;
|
||||
border-left: 2px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
margin-left: 4px;
|
||||
color: color-mix(in srgb, var(--foreground) 55%, transparent);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Transcript block */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue