Velo
Email at the
speed of thought
speed of thought
AI-powered, keyboard-first, privacy-focused desktop email.
122+Features
30+Shortcuts
3AI Providers
0Tracking
velomail.app
Velo
Email at the speed of thought.
A blazing-fast, keyboard-first desktop email client built with Tauri, React, and Rust.
Local-first. Privacy-focused. AI-powered.
Features • Installation • Shortcuts • Architecture • Development • Contributing
---
Built with Rust and React.
Made by Avihay.
Velo is a fast and beautiful desktop email client, built with modern web technologies.
{/* Background glow */}
{/* Footer */}
Everything you'd expect, and more
130+ features built for people who live in their inbox.
{FEATURES.map((feature, i) => (
))}
{feature.title}
{feature.description}
{/* Label */}
Open source desktop email client
{/* Headline */}
The email client
you'd build for yourself
{/* Subline */}
Keyboard-first, AI-powered, and completely private.
Free forever because it's open source.
{/* CTAs */}
{/* App mockup with glow behind */}
{/* Glow behind mockup */}
Open source desktop email client
you'd build for yourself
Free forever because it's open source.
{FEATURES.map((feature, i) => {
const reversed = i % 2 !== 0
return (
{/* Text */}
{/* Mockup */}
)
})}
{feature.title}
{feature.description}
{feature.mockup}
{DIFFERENTIATORS.map((item, i) => (
))}
{item.title}
{item.description}
{/* Thread header */}
{/* AI Summary */}
)
}
================================================
FILE: landing/src/components/mockups/AppMockup.tsx
================================================
/** Full app layout mockup for the hero section — sidebar + email list + reading pane */
import {
Inbox, Send, FileText, Trash2, Archive, Star, AlertTriangle,
Keyboard, Brain, Sparkles, Paperclip, ChevronDown, Search,
Settings, HelpCircle, PanelLeftClose, Plus,
} from 'lucide-react'
const SIDEBAR_ITEMS = [
{ icon: Inbox, label: 'Inbox', count: 12, active: true },
{ icon: Star, label: 'Starred', count: 3 },
{ icon: Send, label: 'Sent' },
{ icon: FileText, label: 'Drafts', count: 1 },
{ icon: Archive, label: 'Archive' },
{ icon: AlertTriangle, label: 'Spam' },
{ icon: Trash2, label: 'Trash' },
]
const LABELS = [
{ name: 'Work', color: '#6366F1' },
{ name: 'Personal', color: '#34D399' },
{ name: 'Finance', color: '#FBBF24' },
]
const THREADS = [
{ sender: 'Alex Chen', subject: 'Q1 product roadmap review', snippet: 'Hey team, here are the updated milestones for...', time: '10:32 AM', unread: true, avatar: 'A', starred: true },
{ sender: 'Sarah Kim', subject: 'Design system updates', snippet: 'The new component library is ready for review...', time: '9:15 AM', unread: true, avatar: 'S', category: 'Updates' },
{ sender: 'GitHub', subject: 'PR #142 merged successfully', snippet: 'Your pull request has been merged into main...', time: '8:45 AM', unread: false, avatar: 'G', category: 'Updates' },
{ sender: 'David Park', subject: 'Re: Weekend plans', snippet: 'Sounds great! Let me check my calendar and...', time: 'Yesterday', unread: false, avatar: 'D' },
{ sender: 'Stripe', subject: 'Your monthly invoice', snippet: 'Your invoice for January 2026 is ready...', time: 'Yesterday', unread: false, avatar: 'S', category: 'Promotions' },
{ sender: 'Maria Lopez', subject: 'Client presentation feedback', snippet: 'Great job on the deck! A few suggestions...', time: 'Yesterday', unread: false, avatar: 'M', attachment: true },
{ sender: 'Newsletter', subject: 'This Week in Tech', snippet: 'The biggest stories in technology this week...', time: 'Jan 28', unread: false, avatar: 'N', category: 'Newsletters' },
]
const MESSAGE_BODY = `Hi team,
I've put together the updated roadmap for Q1. Here are the key milestones:
1. Component library v2 — Feb 15
2. API redesign rollout — Mar 1
3. Mobile app beta — Mar 20
Let me know your thoughts on the timeline. I think we can hit all three if we prioritize the API work first.
Best,
Alex`
export function AppMockup() {
return (
Re: Partnership proposal — Acme Corp
J
Julia Martinez
· 3 messages
Julia proposes a partnership with Acme Corp for Q2. Key terms: 15% revenue share, 12-month commitment, joint marketing campaign. She's requesting a meeting next week to discuss details.
Hi Alex,
Following up on our conversation at the conference. I'd love to schedule a call to discuss the partnership terms in detail. Would Thursday or Friday work for you?
I've attached the proposed agreement for your review.
Best,
Julia
{[
'Thursday works! Let\'s meet at 2pm.',
'I\'ll review the agreement and get back to you.',
'Can we also invite the legal team?',
].map((reply) => (
))}
Hi Julia,
Thursday at 2pm works perfectly. I'll review the proposed agreement before our call so we can dive right into the details.
Would it be alright if I include our legal counsel? It would help streamline the process.
{/* Title bar */}
Velo
)
}
================================================
FILE: landing/src/components/mockups/MultiProviderMockup.tsx
================================================
/** Multi-provider mockup showing account switcher + provider logos */
import { Check, ChevronDown, Plus, Mail, Globe } from 'lucide-react'
const ACCOUNTS = [
{ name: 'Alex Chen', email: 'alex@company.com', provider: 'Gmail', avatar: 'A', color: 'bg-indigo-500/20 text-indigo-400', active: true },
{ name: 'Alex Chen', email: 'alex.chen@outlook.com', provider: 'Outlook', avatar: 'A', color: 'bg-sky-500/20 text-sky-400' },
{ name: 'Alex Personal', email: 'alex@icloud.com', provider: 'iCloud', avatar: 'A', color: 'bg-zinc-500/20 text-zinc-400' },
]
const PROVIDERS = [
{ name: 'Gmail', desc: 'Google OAuth', icon: Mail },
{ name: 'Outlook', desc: 'IMAP/SMTP', icon: Mail },
{ name: 'Yahoo', desc: 'IMAP/SMTP', icon: Mail },
{ name: 'iCloud', desc: 'IMAP/SMTP', icon: Mail },
{ name: 'Fastmail', desc: 'IMAP/SMTP', icon: Mail },
{ name: 'Any IMAP', desc: 'Custom server', icon: Globe },
]
export function MultiProviderMockup() {
return (
{/* Sidebar */}
{/* Account */}
{/* Email list */}
A
Alex Chen
alex@company.com
{SIDEBAR_ITEMS.map((item) => (
{/* Labels */}
Labels
{LABELS.map((label) => (
{label.name}
))}
{/* Search */}
{/* Reading pane */}
{THREADS.map((thread, i) => (
))}
{thread.avatar}
{thread.sender}
{thread.time}
{thread.subject}
{thread.snippet}
{thread.starred &&
{/* Action bar */}
{/* AI Summary */}
{[Archive, Trash2, Star, Keyboard, Brain].map((Icon, i) => (
))}
{/* Thread header */}
Q1 product roadmap review
A
Alex Chen
to me
10:32 AM
Alex shares the Q1 roadmap with 3 milestones: component library v2 (Feb 15), API redesign (Mar 1), and mobile beta (Mar 20). Suggests prioritizing API work.
{MESSAGE_BODY}
{['Looks good, let\'s proceed!', 'Can we discuss the timeline?', 'I have a few concerns'].map((reply) => (
))}
{/* Left: Account switcher */}
{/* Current account */}
{/* Right: Supported providers */}
A
Alex Chen
alex@company.com
Accounts
{ACCOUNTS.map((account) => (
{account.avatar}
{account.name}
{account.provider}
{account.email}
Supported providers
Auto-discovery for major providers
{PROVIDERS.map((provider) => (
{provider.name}
{provider.desc}
{/* Category tabs */}
)
}
================================================
FILE: landing/src/index.css
================================================
@import "tailwindcss";
@theme {
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--color-bg-primary: #09090b;
--color-bg-secondary: #18181b;
--color-text-primary: #fafafa;
--color-text-secondary: #a1a1aa;
--color-text-muted: #71717a;
--color-accent: #6366F1;
--color-accent-hover: #818CF8;
--color-border: rgba(255, 255, 255, 0.08);
}
/* ── Base ── */
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-sans);
overflow-x: hidden;
background-color: var(--color-bg-primary);
color: var(--color-text-primary);
}
::selection {
background-color: rgba(99, 102, 241, 0.3);
color: #fff;
}
/* ── Scrollbar ── */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
/* ── Dot grid background ── */
.dot-grid {
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: 32px 32px;
}
/* ── Gradient text ── */
.gradient-text {
background: linear-gradient(135deg, #e0e7ff 0%, #818CF8 50%, #6366F1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Primary Button ── */
.btn-primary {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--color-accent);
border-radius: 10px;
padding: 12px 28px;
font-weight: 500;
font-size: 15px;
color: white;
cursor: pointer;
border: none;
text-decoration: none;
transition: all 0.25s ease;
}
.btn-primary::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 11px;
background: var(--color-accent);
z-index: -1;
filter: blur(16px);
opacity: 0.35;
transition: opacity 0.25s ease;
}
.btn-primary:hover {
background: var(--color-accent-hover);
transform: translateY(-1px);
box-shadow: 0 4px 24px rgba(99, 102, 241, 0.25);
}
.btn-primary:hover::before {
opacity: 0.5;
}
.btn-primary:active {
transform: translateY(0);
}
/* ── Secondary Button ── */
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
font-weight: 500;
font-size: 15px;
color: var(--color-text-secondary);
background: transparent;
border: 1px solid var(--color-border);
border-radius: 10px;
cursor: pointer;
text-decoration: none;
transition: all 0.25s ease;
}
.btn-secondary:hover {
color: var(--color-text-primary);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
}
.btn-secondary:active {
transform: translateY(0);
}
/* ── Nav ── */
.nav-blur {
backdrop-filter: blur(16px) saturate(180%);
background: rgba(9, 9, 11, 0.85);
border-bottom: 1px solid var(--color-border);
}
/* ── Mockup hover lift ── */
.mockup-hover {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.mockup-hover:hover {
transform: translateY(-4px);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.4),
0 0 80px rgba(99, 102, 241, 0.08);
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
================================================
FILE: landing/src/main.tsx
================================================
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
{TABS.map((tab) => (
))}
{/* Thread list */}
{THREADS.map((thread, i) => (
))}
{thread.avatar}
{thread.sender}
{thread.time}
{thread.subject}
{thread.snippet}
{thread.starred &&
{syncStatus}
)}
{showAddAccount && (
Loading composer...
);
}
if (error) {
return (
{error}
);
}
return (
Loading thread...
);
}
if (error || !thread) {
return (
{error ?? "Thread not found"}
);
}
return (
{/* Trigger button */}
{/* Dropdown */}
{open && (
);
}
/** The main avatar shown in the trigger — slightly larger */
function ActiveAvatar({ account }: { account: Account | undefined }) {
const [imgError, setImgError] = useState(false);
if (!account) return null;
const initial = (
account.displayName?.[0] ?? account.email[0] ?? "?"
).toUpperCase();
const showImg = account.avatarUrl && !imgError;
return (
{accounts.length > 1 && (
)}
Accounts
)}
{accounts.map((account) => {
const isActive = account.id === activeAccountId;
return (
);
})}
{showImg ? (
setImgError(true)}
/>
) : (
initial
)}
);
}
/** Smaller avatar used inside the dropdown list */
function AccountAvatarSmall({
account,
isActive,
}: {
account: Account;
isActive: boolean;
}) {
const [imgError, setImgError] = useState(false);
const initial = (
account.displayName?.[0] ?? account.email[0] ?? "?"
).toUpperCase();
const showImg = account.avatarUrl && !imgError;
return (
{showImg ? (
setImgError(true)}
/>
) : (
initial
)}
);
}
================================================
FILE: src/components/accounts/AddAccount.tsx
================================================
import { useState } from "react";
import { Mail, Calendar } from "lucide-react";
import { startOAuthFlow } from "@/services/gmail/auth";
import { insertAccount } from "@/services/db/accounts";
import { getClientId, getClientSecret } from "@/services/gmail/tokenManager";
import { useAccountStore } from "@/stores/accountStore";
import { Modal } from "@/components/ui/Modal";
import { SetupClientId } from "./SetupClientId";
import { AddImapAccount } from "./AddImapAccount";
import { AddCalDavAccount } from "./AddCalDavAccount";
import { getCurrentUnixTimestamp } from "@/utils/timestamp";
interface AddAccountProps {
onClose: () => void;
onSuccess: () => void;
}
type View = "select-provider" | "gmail" | "imap" | "caldav";
export function AddAccount({ onClose, onSuccess }: AddAccountProps) {
const [view, setView] = useStateSign in with your Google account to connect it to Velo.
{error && (
{error}
)}
{status === "authenticating" && (
Waiting for Google sign-in...
Complete the sign-in in your browser, then return here.
Choose how you want to connect your email account.
{step === "basic" && (
setEmail(e.target.value)}
placeholder="your@email.com"
autoFocus
/>
setDisplayName(e.target.value)}
placeholder="My Calendar"
/>
)}
{step === "server" && (
)}
{step === "done" && (
CalDAV Calendar Account
Connect to iCloud, Fastmail, Nextcloud, or any CalDAV server
{providerName && (
setCaldavUrl(e.target.value)}
placeholder="https://caldav.example.com/"
/>
setUsername(e.target.value)}
placeholder="your@email.com"
/>
setPassword(e.target.value)}
placeholder={needsAppPassword ? "App-specific password" : "Password"}
/>
)}
{step === "test" && (
Detected: {providerName}
)}
{needsAppPassword && (
This provider requires an app-specific password. Generate one in your provider's security settings.
)}
{testing && (
<>
Testing connection...
)} {!testing && testResult?.success && ( <>{testResult.message}
{calendarCount > 0 && (Found {calendarCount} calendar{calendarCount !== 1 ? "s" : ""}
)} )} {!testing && testResult && !testResult.success && ( <>Connection failed
{testResult.message}
)}
{testResult?.success ? (
) : !testing ? (
) : null}
CalDAV account added!
Your calendars will sync automatically.
{steps.map((step, i) => {
const isActive = i === currentStepIndex;
const isCompleted = i < currentStepIndex;
return (
);
const renderAuthModeSelector = () => {
const showOAuth = detectedAuthMethods.includes("oauth2") || form.authMode === "oauth2";
if (!showOAuth) return null;
return (
{i > 0 && (
)}
);
})}
{stepIcons[step]}
{stepLabels[step]}
{detectedAuthMethods.includes("password") && (
)}
updateForm("oauthClientId", e.target.value)}
placeholder={`${providerName} app Client ID`}
className={inputClass}
disabled={hasOAuthTokens}
/>
updateForm("oauthClientSecret", e.target.value)}
placeholder="Leave blank for public clients"
className={inputClass}
disabled={hasOAuthTokens}
/>
{hasOAuthTokens ? (
Connected as {form.oauthEmail}
{oauthError}
)}
You need to register an app with {providerName} to get a Client ID.{" "}
{providerId === "microsoft" && (
<>Register at the Azure Portal (App Registrations) with redirect URI http://127.0.0.1:17248.
)}
{providerId === "yahoo" && (
<>Register at the Yahoo Developer Network with redirect URI http://127.0.0.1:17248.
)}
updateForm("email", e.target.value)}
onBlur={handleEmailBlur}
placeholder="you@example.com"
className={inputClass}
autoFocus
disabled={isOAuth && hasOAuthTokens}
/>
{renderAuthModeSelector()}
{isOAuth ? (
renderOAuthSection()
) : (
<>
updateForm("displayName", e.target.value)}
placeholder="Your Name"
className={inputClass}
/>
updateForm("imapUsername", e.target.value)}
placeholder="Leave blank to use your email address"
className={inputClass}
/>
Only needed if your login username differs from your email address.
updateForm("password", e.target.value)}
placeholder="Enter your email password or app password"
className={inputClass}
/>
)}
{isOAuth && hasOAuthTokens && (
If your provider requires it, use an app-specific password.
updateForm("displayName", e.target.value)}
placeholder="Your Name"
className={inputClass}
/>
)}
{isOAuth && (
);
const renderSmtpStep = () => (
Server settings have been auto-configured for your provider. You can adjust them if needed.
)}
updateForm("imapHost", e.target.value)}
placeholder="imap.example.com"
className={inputClass}
autoFocus
/>
updateForm("imapPort", parseInt(e.target.value, 10) || 0)
}
className={inputClass}
/>
updateForm("acceptInvalidCerts", e.target.checked)}
className="rounded border-border-primary text-accent focus:ring-accent"
/>
Enable for local mail bridges like ProtonMail Bridge
{isOAuth && (
{!isOAuth && (
<>
);
const renderTestResult = (label: string, status: TestStatus) => {
const icon =
status.state === "testing" ? (
Server settings have been auto-configured for your provider. You can adjust them if needed.
)}
updateForm("smtpHost", e.target.value)}
placeholder="smtp.example.com"
className={inputClass}
autoFocus
/>
updateForm("smtpPort", parseInt(e.target.value, 10) || 0)
}
className={inputClass}
/>
updateForm("samePassword", e.target.checked)}
className="rounded border-border-primary text-accent focus:ring-accent"
/>
{!form.samePassword && (
updateForm("smtpPassword", e.target.value)}
placeholder="SMTP password"
className={inputClass}
/>
)}
)}
{icon}
{label}
{status.message && (
{status.message}
)}
Test your connection settings before adding the account.
{renderTestResult("IMAP Connection", imapTest)}
{renderTestResult("SMTP Connection", smtpTest)}
{saveError && (
{saveError}
)}
{renderStepIndicator()}
{renderStepContent()}
{currentStep === "test" ? (
) : (
)}
To connect Gmail accounts, you need a Google Cloud OAuth Client ID.
- Go to the{" "} Google Cloud Console
- Create a project (or use an existing one)
- Enable the Gmail API
- Create OAuth 2.0 credentials (Web application type)
-
Add
http://127.0.0.1:17248{" "} as an authorized redirect URI - Copy the Client ID and Client Secret below
Required for Web application credentials
{/* Icon area */}
{/* Info */}
);
}
================================================
FILE: src/components/attachments/AttachmentLibrary.test.tsx
================================================
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react";
import { AttachmentLibrary } from "./AttachmentLibrary";
import type { AttachmentWithContext, AttachmentSender } from "@/services/db/attachments";
// Mock dependencies
vi.mock("@/stores/accountStore", () => ({
useAccountStore: vi.fn((selector: (s: { accounts: { id: string; isActive: boolean }[] }) => unknown) =>
selector({ accounts: [{ id: "acc-1", isActive: true }] }),
),
}));
vi.mock("@/services/db/attachments", () => ({
getAttachmentsForAccount: vi.fn(() => Promise.resolve([])),
getAttachmentSenders: vi.fn(() => Promise.resolve([])),
}));
vi.mock("@/services/email/providerFactory", () => ({
getEmailProvider: vi.fn(),
}));
vi.mock("@/components/email/AttachmentList", () => ({
AttachmentPreview: vi.fn(() => null),
}));
vi.mock("@tauri-apps/plugin-dialog", () => ({
save: vi.fn(),
}));
vi.mock("@tauri-apps/plugin-fs", () => ({
writeFile: vi.fn(),
}));
vi.mock("@/router/navigate", () => ({
navigateToLabel: vi.fn(),
}));
import { getAttachmentsForAccount, getAttachmentSenders } from "@/services/db/attachments";
const mockAttachments: AttachmentWithContext[] = [
{
id: "att-1",
message_id: "msg-1",
account_id: "acc-1",
filename: "report.pdf",
mime_type: "application/pdf",
size: 2_000_000,
gmail_attachment_id: "gid-1",
content_id: null,
is_inline: 0,
local_path: null,
from_address: "alice@example.com",
from_name: "Alice",
date: Date.now() - 3600000,
subject: "Q4 Report",
thread_id: "thread-1",
},
{
id: "att-2",
message_id: "msg-2",
account_id: "acc-1",
filename: "photo.png",
mime_type: "image/png",
size: 500_000,
gmail_attachment_id: "gid-2",
content_id: null,
is_inline: 0,
local_path: null,
from_address: "bob@example.com",
from_name: "Bob",
date: Date.now() - 86400000,
subject: "Photos",
thread_id: "thread-2",
},
];
const mockSenders: AttachmentSender[] = [
{ from_address: "alice@example.com", from_name: "Alice", count: 3 },
{ from_address: "bob@example.com", from_name: "Bob", count: 1 },
];
describe("AttachmentLibrary", () => {
beforeEach(() => {
vi.clearAllMocks();
});
it("renders empty state when no attachments", async () => {
vi.mocked(getAttachmentsForAccount).mockResolvedValue([]);
vi.mocked(getAttachmentSenders).mockResolvedValue([]);
render(
{attachment.filename ?? "Unnamed"}
{senderName}
{/* Hover actions */}
{attachment.size != null && {formatFileSize(attachment.size)}}
{attachment.date && {formatRelativeDate(attachment.date)}}
{previewable && (
)}
{/* Header */}
setPreviewAttachment(null)}
/>
)}
);
}
================================================
FILE: src/components/attachments/AttachmentListItem.tsx
================================================
import { Download, Eye, ExternalLink } from "lucide-react";
import { formatFileSize, getFileIcon, canPreview } from "@/utils/fileTypeHelpers";
import type { AttachmentWithContext } from "@/services/db/attachments";
interface AttachmentListItemProps {
attachment: AttachmentWithContext;
onPreview: () => void;
onDownload: () => void;
onJumpToEmail: () => void;
}
function formatShortDate(timestamp: number | null): string {
if (!timestamp) return "";
return new Date(timestamp).toLocaleDateString(undefined, {
month: "short",
day: "numeric",
year: "numeric",
});
}
export function AttachmentListItem({ attachment, onPreview, onDownload, onJumpToEmail }: AttachmentListItemProps) {
const previewable = canPreview(attachment.mime_type, attachment.filename);
const senderName = attachment.from_name || attachment.from_address || "Unknown";
return (
Attachments
({filtered.length})
{loading ? (
) : filtered.length === 0 ? (
{/* Preview modal */}
{previewAttachment && (
Loading attachments...
{filtered.map((att) => (
setPreviewAttachment(att)}
onDownload={() => handleDownload(att)}
onJumpToEmail={() => handleJumpToEmail(att)}
/>
))}
) : (
{filtered.map((att) => (
setPreviewAttachment(att)}
onDownload={() => handleDownload(att)}
onJumpToEmail={() => handleJumpToEmail(att)}
/>
))}
)}
{/* Icon */}
{getFileIcon(attachment.mime_type)}
{/* Filename */}
{attachment.filename ?? "Unnamed"}
{/* Sender */}
{senderName}
{/* Date */}
{formatShortDate(attachment.date)}
{/* Size */}
{attachment.size != null ? formatFileSize(attachment.size) : ""}
{/* Actions */}
);
}
================================================
FILE: src/components/calendar/CalendarList.test.tsx
================================================
import { render, screen, fireEvent } from "@testing-library/react";
import { vi } from "vitest";
import { CalendarList } from "./CalendarList";
import type { DbCalendar } from "@/services/db/calendars";
function makeCalendar(overrides: Partial
{previewable && (
)}
Calendars
{calendars.map((cal) => (
))}
Connect an account to use Calendar
);
}
if (!hasCalendar) {
return (
Calendar is not configured for this account.
For IMAP accounts, configure CalDAV in Settings.
Calendar access error
{calendarError}
Loading calendar...
)}
{showCalendarList && calendars.length > 1 && (
{
const { setCalendarVisibility } = await import("@/services/db/calendars");
await setCalendarVisibility(calendarId, visible);
await loadCalendars();
loadEvents();
}}
/>
)}
{showCreate && (
{view === "month" && (
Calendar requires re-authorization
Your account was connected before calendar permissions were added. Re-authorize to grant calendar access — your emails and data will not be affected.
{error && ({error}
)}{title}
{showCalendarListButton && onToggleCalendarList && (
)}
{(["day", "week", "month"] as CalendarView[]).map((v) => (
))}
{/* Header */}
{/* All-day events */}
{allDayEvents.length > 0 && (
);
}
================================================
FILE: src/components/calendar/EventCard.tsx
================================================
import type { DbCalendarEvent } from "@/services/db/calendarEvents";
interface EventCardProps {
event: DbCalendarEvent;
compact?: boolean;
onClick?: () => void;
}
export function EventCard({ event, compact, onClick }: EventCardProps) {
const startDate = new Date(event.start_time * 1000);
const timeStr = event.is_all_day
? "All day"
: startDate.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
if (compact) {
return (
);
}
return (
);
}
================================================
FILE: src/components/calendar/EventCreateModal.tsx
================================================
import { useState, useCallback } from "react";
import { Button } from "@/components/ui/Button";
import { Modal } from "@/components/ui/Modal";
import { TextField } from "@/components/ui/TextField";
import type { DbCalendar } from "@/services/db/calendars";
interface EventCreateModalProps {
calendars?: DbCalendar[];
onClose: () => void;
onCreate: (event: {
summary: string;
description: string;
location: string;
startTime: string;
endTime: string;
calendarId?: string;
}) => void;
}
export function EventCreateModal({ calendars, onClose, onCreate }: EventCreateModalProps) {
const [summary, setSummary] = useState("");
const [description, setDescription] = useState("");
const [location, setLocation] = useState("");
const [startTime, setStartTime] = useState(getDefaultStart());
const [endTime, setEndTime] = useState(getDefaultEnd());
const [calendarId, setCalendarId] = useState
{currentDate.getDate()}
{currentDate.toLocaleDateString(undefined, { weekday: "long" })}
{allDayEvents.map((e) => (
))}
)}
{/* Time grid */}
{HOURS.map((hour) => {
const hourEvents = hourEventMap.get(hour) ?? [];
return (
);
})}
{hour === 0 ? "" : `${hour % 12 || 12}${hour < 12 ? "am" : "pm"}`}
{hourEvents.map((e) => (
))}