28 |
29 |
31 |
38 |
45 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/app/f/[name]/page.tsx:
--------------------------------------------------------------------------------
1 | import { ThreadHeader, ThreadList } from '@/app/components/thread-list';
2 | import { getThreadsForFolder } from '@/lib/db/queries';
3 | import { Suspense } from 'react';
4 |
5 | export function generateStaticParams() {
6 | const folderNames = [
7 | 'inbox',
8 | 'starred',
9 | 'drafts',
10 | 'sent',
11 | 'archive',
12 | 'trash',
13 | ];
14 |
15 | return folderNames.map((name) => ({ name }));
16 | }
17 |
18 | export default function ThreadsPage({
19 | params,
20 | searchParams,
21 | }: {
22 | params: Promise<{ name: string }>;
23 | searchParams: Promise<{ q?: string; id?: string }>;
24 | }) {
25 | return (
26 |
27 |
31 | );
32 | }
33 |
34 | function ThreadsSkeleton({ folderName }: { folderName: string }) {
35 | return (
36 |
37 |
39 | );
40 | }
41 |
42 | async function Threads({
43 | params,
44 | searchParams,
45 | }: {
46 | params: Promise<{ name: string }>;
47 | searchParams: Promise<{ q?: string; id?: string }>;
48 | }) {
49 | let { name } = await params;
50 | let { q } = await searchParams;
51 | let threads = await getThreadsForFolder(name);
52 |
53 | return
20 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/app/components/menu.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Sheet,
3 | SheetContent,
4 | SheetTitle,
5 | SheetTrigger,
6 | } from '@/components/ui/sheet';
7 | import { Check, FileText, Menu, Send, Star, Trash } from 'lucide-react';
8 | import Link from 'next/link';
9 |
10 | export function NavMenu() {
11 | return (
12 |
22 |
54 |
23 |
53 |
24 |
34 | 25 | {thread.subject} 26 |
27 |
28 |
31 |
33 |
35 | {thread.emails.map((email) => (
36 |
52 |
37 |
50 | ))}
51 |
38 |
48 |
39 | {email.sender.firstName} {email.sender.lastName} to{' '}
40 | {email.recipientId === thread.emails[0].sender.id
41 | ? 'Me'
42 | : 'All'}
43 |
44 |
45 | {new Date(email.sentDate!).toLocaleString()}
46 |
47 | {email.body}
49 |
13 |
90 | );
91 | }
92 |
--------------------------------------------------------------------------------
/public/placeholder.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/components/thread-actions.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import {
4 | Tooltip,
5 | TooltipContent,
6 | TooltipProvider,
7 | TooltipTrigger,
8 | } from '@/components/ui/tooltip';
9 | import { moveThreadToDone, moveThreadToTrash } from '@/lib/db/actions';
10 | import { Archive, Check, Clock } from 'lucide-react';
11 | import { useActionState } from 'react';
12 |
13 | interface ThreadActionsProps {
14 | threadId: number;
15 | }
16 |
17 | export function ThreadActions({ threadId }: ThreadActionsProps) {
18 | const initialState = {
19 | error: null,
20 | success: false,
21 | };
22 |
23 | const [doneState, doneAction, donePending] = useActionState(
24 | moveThreadToDone,
25 | initialState,
26 | );
27 | const [trashState, trashAction, trashPending] = useActionState(
28 | moveThreadToTrash,
29 | initialState,
30 | );
31 |
32 | const isProduction = process.env.NEXT_PUBLIC_VERCEL_ENV === 'production';
33 |
34 | return (
35 |
14 | Mail
29 |
89 | {`${user.firstName} ${user.lastName}`}
15 |
16 | 
21 |
26 |
22 |
25 | {user.email}
23 |{user.location}
24 |{`${user.jobTitle} at ${user.company}`}
27 | 28 |-
30 | {user.latestThreads.map((thread, index) => (
31 |
- {thread.subject} 32 | ))} 33 |
36 | {user.linkedin && (
37 |
43 |
88 |
37 |
38 |
39 |
49 |
50 | {isProduction && (
51 |
52 |
54 | )}
55 |
56 |
57 |
58 |
64 |
65 |
66 |
68 |
69 |
70 |
71 |
81 |
82 | {isProduction && (
83 |
84 |
86 | )}
87 |
88 |
89 | Marking as done is disabled in production
53 |This feature is not yet implemented
67 |Moving to trash is disabled in production
85 |
19 | {threads.map((thread) => {
20 | const latestEmail = thread.latestEmail;
21 | return (
22 |
26 |
54 | );
55 | }
56 |
57 | export default async function SearchPage({
58 | searchParams,
59 | }: {
60 | searchParams: Promise<{ q?: string; id?: string }>;
61 | }) {
62 | return (
63 |
29 |
50 |
51 | );
52 | })}
53 |
30 |
44 |
31 |
32 | {highlightText(formatEmailString(latestEmail.sender), q)}
33 |
34 |
35 |
36 |
37 | {highlightText(thread.subject, q)}
38 |
39 |
40 | {highlightText(latestEmail.body, q)}
41 |
42 |
43 |
45 |
46 | {new Date(thread.lastActivityDate).toLocaleDateString()}
47 |
48 |
49 |
64 |
88 | );
89 | }
90 |
--------------------------------------------------------------------------------
/lib/db/setup.ts:
--------------------------------------------------------------------------------
1 | import { exec } from 'node:child_process';
2 | import { promises as fs } from 'node:fs';
3 | import path from 'node:path';
4 | import readline from 'node:readline';
5 | import { promisify } from 'node:util';
6 |
7 | const execAsync = promisify(exec);
8 |
9 | function question(query: string): Promise
65 |
84 |
86 |
87 |
66 |
83 |
67 |
69 |
71 |
72 |
73 |
74 |
80 |
81 |
82 |
38 |
60 | );
61 | }
62 |
63 | export function ThreadList({ folderName, threads }: ThreadListProps) {
64 | const [hoveredThread, setHoveredThread] = useState
39 |
45 | 41 | {folderName} 42 | {count} 43 |
44 |
46 |
50 |
59 |
94 |
140 | );
141 | }
142 |
--------------------------------------------------------------------------------
/lib/db/actions.ts:
--------------------------------------------------------------------------------
1 | 'use server';
2 |
3 | import { eq } from 'drizzle-orm';
4 | import { revalidatePath } from 'next/cache';
5 | import { redirect } from 'next/navigation';
6 | import { z } from 'zod';
7 | import { db } from './drizzle';
8 | import { emails, folders, threadFolders, threads, users } from './schema';
9 |
10 | const sendEmailSchema = z.object({
11 | subject: z.string().min(1, 'Subject is required'),
12 | body: z.string().min(1, 'Body is required'),
13 | recipientEmail: z.string().email('Invalid email address'),
14 | });
15 |
16 | export async function sendEmailAction(_: any, formData: FormData) {
17 | let newThread;
18 | let rawFormData = {
19 | subject: formData.get('subject'),
20 | body: formData.get('body'),
21 | recipientEmail: formData.get('recipientEmail'),
22 | };
23 |
24 | if (process.env.VERCEL_ENV === 'production') {
25 | return {
26 | error: 'Only works on localhost for now',
27 | previous: rawFormData,
28 | };
29 | }
30 |
31 | try {
32 | let validatedFields = sendEmailSchema.parse({
33 | subject: formData.get('subject'),
34 | body: formData.get('body'),
35 | recipientEmail: formData.get('recipientEmail'),
36 | });
37 |
38 | let { subject, body, recipientEmail } = validatedFields;
39 |
40 | let [recipient] = await db
41 | .select()
42 | .from(users)
43 | .where(eq(users.email, recipientEmail));
44 |
45 | if (!recipient) {
46 | [recipient] = await db
47 | .insert(users)
48 | .values({ email: recipientEmail })
49 | .returning();
50 | }
51 |
52 | let result = await db
53 | .insert(threads)
54 | .values({
55 | subject,
56 | lastActivityDate: new Date(),
57 | })
58 | .returning();
59 | newThread = result[0];
60 |
61 | await db.insert(emails).values({
62 | threadId: newThread.id,
63 | senderId: 1, // Assuming the current user's ID is 1. Replace this with the actual user ID.
64 | recipientId: recipient.id,
65 | subject,
66 | body,
67 | sentDate: new Date(),
68 | });
69 |
70 | let [sentFolder] = await db
71 | .select()
72 | .from(folders)
73 | .where(eq(folders.name, 'Sent'));
74 |
75 | await db.insert(threadFolders).values({
76 | threadId: newThread.id,
77 | folderId: sentFolder.id,
78 | });
79 | } catch (error) {
80 | if (error instanceof z.ZodError) {
81 | return { error: error.errors[0].message, previous: rawFormData };
82 | }
83 | return {
84 | error: 'Failed to send email. Please try again.',
85 | previous: rawFormData,
86 | };
87 | }
88 |
89 | revalidatePath('/', 'layout');
90 | redirect(`/f/sent/${newThread.id}`);
91 | }
92 |
93 | export async function moveThreadToDone(_: any, formData: FormData) {
94 | if (process.env.VERCEL_ENV === 'production') {
95 | return {
96 | error: 'Only works on localhost for now',
97 | };
98 | }
99 |
100 | let threadId = formData.get('threadId');
101 |
102 | if (!threadId || typeof threadId !== 'string') {
103 | return { error: 'Invalid thread ID', success: false };
104 | }
105 |
106 | try {
107 | let doneFolder = await db.query.folders.findFirst({
108 | where: eq(folders.name, 'Archive'),
109 | });
110 |
111 | if (!doneFolder) {
112 | return { error: 'Done folder not found', success: false };
113 | }
114 |
115 | let parsedThreadId = parseInt(threadId, 10);
116 |
117 | await db
118 | .delete(threadFolders)
119 | .where(eq(threadFolders.threadId, parsedThreadId));
120 |
121 | await db.insert(threadFolders).values({
122 | threadId: parsedThreadId,
123 | folderId: doneFolder.id,
124 | });
125 |
126 | revalidatePath('/f/[name]');
127 | revalidatePath('/f/[name]/[id]');
128 | return { success: true, error: null };
129 | } catch (error) {
130 | console.error('Failed to move thread to Done:', error);
131 | return { success: false, error: 'Failed to move thread to Done' };
132 | }
133 | }
134 |
135 | export async function moveThreadToTrash(_: any, formData: FormData) {
136 | if (process.env.VERCEL_ENV === 'production') {
137 | return {
138 | error: 'Only works on localhost for now',
139 | };
140 | }
141 |
142 | let threadId = formData.get('threadId');
143 |
144 | if (!threadId || typeof threadId !== 'string') {
145 | return { error: 'Invalid thread ID', success: false };
146 | }
147 |
148 | try {
149 | let trashFolder = await db.query.folders.findFirst({
150 | where: eq(folders.name, 'Trash'),
151 | });
152 |
153 | if (!trashFolder) {
154 | return { error: 'Trash folder not found', success: false };
155 | }
156 |
157 | let parsedThreadId = parseInt(threadId, 10);
158 |
159 | await db
160 | .delete(threadFolders)
161 | .where(eq(threadFolders.threadId, parsedThreadId));
162 |
163 | await db.insert(threadFolders).values({
164 | threadId: parsedThreadId,
165 | folderId: trashFolder.id,
166 | });
167 |
168 | revalidatePath('/f/[name]');
169 | revalidatePath('/f/[name]/[id]');
170 | return { success: true, error: null };
171 | } catch (error) {
172 | console.error('Failed to move thread to Trash:', error);
173 | return { success: false, error: 'Failed to move thread to Trash' };
174 | }
175 | }
176 |
--------------------------------------------------------------------------------
/lib/db/seed.ts:
--------------------------------------------------------------------------------
1 | import { db } from './drizzle';
2 | import {
3 | emails,
4 | folders,
5 | threadFolders,
6 | threads,
7 | userFolders,
8 | users,
9 | } from './schema';
10 |
11 | async function seed() {
12 | console.log('Starting seed process...');
13 | await seedUsers();
14 | await seedFolders();
15 | await seedThreadsAndEmails();
16 | console.log('Seed process completed successfully.');
17 | }
18 |
19 | async function seedUsers() {
20 | await db.insert(users).values([
21 | {
22 | firstName: 'Lee',
23 | lastName: 'Robinson',
24 | email: 'lee@leerob.com',
25 | jobTitle: 'VP of Product',
26 | company: 'Vercel',
27 | location: 'Des Moines, Iowa',
28 | avatarUrl: 'https://github.com/leerob.png',
29 | linkedin: 'https://www.linkedin.com/in/leeerob/',
30 | twitter: 'https://x.com/leerob',
31 | github: 'https://github.com/leerob',
32 | },
33 | {
34 | firstName: 'Guillermo',
35 | lastName: 'Rauch',
36 | email: 'rauchg@vercel.com',
37 | jobTitle: 'CEO',
38 | company: 'Vercel',
39 | location: 'San Francisco, California',
40 | avatarUrl: 'https://github.com/rauchg.png',
41 | },
42 | {
43 | firstName: 'Delba',
44 | lastName: 'de Oliveira',
45 | email: 'delba.oliveira@vercel.com',
46 | jobTitle: 'Staff DX Engineer',
47 | company: 'Vercel',
48 | location: 'London, UK',
49 | avatarUrl: 'https://github.com/delbaoliveira.png',
50 | },
51 | {
52 | firstName: 'Tim',
53 | lastName: 'Neutkens',
54 | email: 'tim@vercel.com',
55 | jobTitle: 'Next.js Lead',
56 | company: 'Vercel',
57 | location: 'Amsterdam, Netherlands',
58 | avatarUrl: 'https://github.com/timneutkens.png',
59 | },
60 | ]);
61 | }
62 |
63 | async function seedFolders() {
64 | await db
65 | .insert(folders)
66 | .values([
67 | { name: 'Inbox' },
68 | { name: 'Flagged' },
69 | { name: 'Sent' },
70 | { name: 'Archive' },
71 | { name: 'Spam' },
72 | { name: 'Trash' },
73 | ]);
74 |
75 | const userFolderValues = [];
76 | for (let userId = 1; userId <= 4; userId++) {
77 | for (let folderId = 1; folderId <= 6; folderId++) {
78 | userFolderValues.push({ userId, folderId });
79 | }
80 | }
81 | await db.insert(userFolders).values(userFolderValues);
82 | }
83 |
84 | async function seedThreadsAndEmails() {
85 | // Thread 1: Guillermo talking about Vercel customer feedback
86 | const thread1 = await db
87 | .insert(threads)
88 | .values({
89 | subject: 'Vercel Customer Feedback',
90 | lastActivityDate: new Date('2023-05-15T10:00:00'),
91 | })
92 | .returning();
93 |
94 | await db.insert(emails).values([
95 | {
96 | threadId: thread1[0].id,
97 | senderId: 2, // Guillermo
98 | recipientId: 1, // Lee
99 | subject: 'Vercel Customer Feedback',
100 | body: 'Met with Daniel today. He had some great feedback. After you make a change to your environment variables, he wants to immediately redeploy the application. We should make a toast that has a CTA to redeploy. Thoughts?',
101 | sentDate: new Date('2023-05-15T10:00:00'),
102 | },
103 | {
104 | threadId: thread1[0].id,
105 | senderId: 1, // Lee
106 | recipientId: 2, // Guillermo
107 | subject: 'Re: Vercel Customer Feedback',
108 | body: "Good call. I've seen this multiple times now. Let's do it.",
109 | sentDate: new Date('2023-05-15T11:30:00'),
110 | },
111 | {
112 | threadId: thread1[0].id,
113 | senderId: 2, // Guillermo
114 | recipientId: 1, // Lee
115 | subject: 'Re: Vercel Customer Feedback',
116 | body: "Amazing. Let me know when it shipped and I'll follow up.",
117 | sentDate: new Date('2023-05-15T13:45:00'),
118 | },
119 | ]);
120 |
121 | // Thread 2: Delba talking about Next.js and testing out new features
122 | const thread2 = await db
123 | .insert(threads)
124 | .values({
125 | subject: 'New Next.js RFC',
126 | lastActivityDate: new Date('2023-05-16T09:00:00'),
127 | })
128 | .returning();
129 |
130 | await db.insert(emails).values([
131 | {
132 | threadId: thread2[0].id,
133 | senderId: 3, // Delba
134 | recipientId: 1, // Lee
135 | subject: 'New Next.js RFC',
136 | body: "I'm working on the first draft of the Dynamic IO docs and examples. Do you want to take a look?",
137 | sentDate: new Date('2023-05-16T09:00:00'),
138 | },
139 | {
140 | threadId: thread2[0].id,
141 | senderId: 1, // Lee
142 | recipientId: 3, // Delba
143 | subject: 'Re: New Next.js RFC',
144 | body: "Absolutely. Let me take a look later tonight and I'll send over feedback.",
145 | sentDate: new Date('2023-05-16T10:15:00'),
146 | },
147 | {
148 | threadId: thread2[0].id,
149 | senderId: 3, // Delba
150 | recipientId: 1, // Lee
151 | subject: 'Re: New Next.js RFC',
152 | body: 'Thank you!',
153 | sentDate: new Date('2023-05-16T11:30:00'),
154 | },
155 | ]);
156 |
157 | // Thread 3: Tim with steps to test out Turbopack
158 | const thread3 = await db
159 | .insert(threads)
160 | .values({
161 | subject: 'Turbopack Testing',
162 | lastActivityDate: new Date('2023-05-17T14:00:00'),
163 | })
164 | .returning();
165 |
166 | await db.insert(emails).values([
167 | {
168 | threadId: thread3[0].id,
169 | senderId: 4, // Tim
170 | recipientId: 1, // Lee
171 | subject: 'Turbopack Testing Steps',
172 | body: `Hi Lee,
173 |
174 | Here are the steps to test out Turbopack:
175 |
176 | 1. npx create-next-app@canary
177 | 2. Select Turbopack when prompted
178 | 3. Run 'npm install' to install dependencies
179 | 4. Start the development server with 'npm run dev -- --turbo'
180 | 5. That's it!
181 |
182 | Let me know if you encounter any issues or have any questions.
183 |
184 | Best,
185 | Tim`,
186 | sentDate: new Date('2023-05-17T14:00:00'),
187 | },
188 | ]);
189 |
190 | // Add threads to folders
191 | await db.insert(threadFolders).values([
192 | { threadId: thread1[0].id, folderId: 1 }, // Inbox
193 | { threadId: thread2[0].id, folderId: 1 }, // Inbox
194 | { threadId: thread3[0].id, folderId: 1 }, // Inbox
195 | ]);
196 | }
197 |
198 | seed()
199 | .catch((error) => {
200 | console.error('Seed process failed:', error);
201 | process.exit(1);
202 | })
203 | .finally(async () => {
204 | console.log('Seed process finished. Exiting...');
205 | process.exit(0);
206 | });
207 |
--------------------------------------------------------------------------------
/app/f/[name]/new/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { LeftSidebar } from '@/app/components/left-sidebar';
4 | import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
5 | import {
6 | Tooltip,
7 | TooltipContent,
8 | TooltipProvider,
9 | TooltipTrigger,
10 | } from '@/components/ui/tooltip';
11 | import { sendEmailAction } from '@/lib/db/actions';
12 | import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
13 | import { Paperclip, Trash2 } from 'lucide-react';
14 | import Link from 'next/link';
15 | import { useParams } from 'next/navigation';
16 | import { Suspense, useActionState } from 'react';
17 |
18 | function DiscardDraftLink() {
19 | let { name } = useParams();
20 |
21 | return (
22 |
23 |
96 | {threads.map((thread) => {
97 | const latestEmail = thread.emails[0];
98 |
99 | return (
100 |
105 |
139 | handleMouseEnter(thread.id)}
108 | onMouseLeave={handleMouseLeave}
109 | >
110 |
135 |
136 | );
137 | })}
138 |
111 |
125 |
112 |
113 | {formatEmailString(latestEmail.sender)}
114 |
115 |
116 |
117 |
118 | {thread.subject}
119 |
120 |
121 | {latestEmail.body}
122 |
123 |
124 |
126 | {!isMobile && hoveredThread === thread.id ? (
127 |
134 |
41 |
49 |
50 | );
51 | }
52 |
53 | export default function ComposePage() {
54 | let [state, formAction] = useActionState(sendEmailAction, {
55 | error: '',
56 | previous: {
57 | recipientEmail: '',
58 | subject: '',
59 | body: '',
60 | },
61 | });
62 |
63 | const isProduction = process.env.NEXT_PUBLIC_VERCEL_ENV === 'production';
64 |
65 | return (
66 |
67 |
175 | );
176 | }
177 |
--------------------------------------------------------------------------------
/lib/db/queries.ts:
--------------------------------------------------------------------------------
1 | import { and, desc, eq, ilike, or, sql } from 'drizzle-orm';
2 | import { toTitleCase } from '../utils';
3 | import { db } from './drizzle';
4 | import { emails, folders, threadFolders, threads, users } from './schema';
5 |
6 | type Folder = {
7 | name: string;
8 | thread_count: number;
9 | };
10 |
11 | export async function getFoldersWithThreadCount() {
12 | 'use cache';
13 |
14 | let foldersWithCount = await db
15 | .select({
16 | name: folders.name,
17 | thread_count: sql
69 |
174 | New Message
70 | {state.error && ( 71 |
72 |
73 | Error
75 | {state.error}
76 |
77 |
78 | )}
79 |
173 |