367 add support for scheduling for later send of emails (#374)

* added ability to schedule and send emails

* docs(changeset): added ability to schedule and send emails

Author: krokhale

.changeset/good-papers-visit.md

@@ -0,0 +1,9 @@
+---
+"@kurrier/schema": patch
+"@kurrier/worker": patch
+"@kurrier/db": patch
+"@kurrier/web": patch
+"@kurrier/repo": patch
+---
+
+added ability to schedule and send emails

README.md

@@ -1,7 +1,6 @@
 # Kurrier
 The self-hosted open-source workspace for **email, calendars, contacts and storage**.
 
----
 
 ## ✨ What's New
 

apps/web/app/dashboard/(unified)/(mail)/layout.tsx

@@ -1,10 +1,10 @@
 import { SidebarInset } from "@/components/ui/sidebar";
 import { AppSidebar } from "@/components/ui/dashboards/unified/default/app-sidebar";
 import {
-	fetchIdentityMailboxList,
-	fetchMailboxUnreadCounts,
+    fetchIdentityMailboxList,
+    fetchMailboxUnreadCounts, fetchScheduledCount,
 } from "@/lib/actions/mailbox";
-import { fetchLabelsWithCounts } from "@/lib/actions/labels";
+import {fetchLabelsWithCounts} from "@/lib/actions/labels";
 import { getPublicEnv, LabelScope } from "@schema";
 import { isSignedIn } from "@/lib/actions/auth";
 import { DynamicContextProvider } from "@/hooks/use-dynamic-context";
@@ -19,12 +19,13 @@ export default async function DashboardLayout({
 	children: React.ReactNode;
 }) {
 	const publicConfig = getPublicEnv();
-	const [identityMailboxes, unreadCounts, user, globalLabels] =
+	const [identityMailboxes, unreadCounts, user, globalLabels, scheduledCounts] =
 		await Promise.all([
 			fetchIdentityMailboxList(),
 			fetchMailboxUnreadCounts(),
 			isSignedIn(),
 			fetchLabelsWithCounts(),
+            fetchScheduledCount()
 		]);
 
 	return (
@@ -34,7 +35,7 @@ export default async function DashboardLayout({
 				user={user}
 				identityMailboxes={identityMailboxes}
 				sidebarTopContent={
-					<div className={"-mt-1"}>
+					<div className={"-mt-1"} key={"mail-sidebar-compose"}>
 						{identityMailboxes.length > 0 && (
 							<ComposeMail publicConfig={publicConfig} />
 						)}
@@ -45,6 +46,7 @@ export default async function DashboardLayout({
 						<IdentityMailboxesList
 							identityMailboxes={identityMailboxes}
 							unreadCounts={unreadCounts}
+                            scheduledCounts={scheduledCounts}
 						/>
 						<DynamicContextProvider
 							initialState={{

apps/web/app/dashboard/(unified)/(mail)/mail/[identityPublicId]/scheduled/layout.tsx

@@ -0,0 +1,39 @@
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { Separator } from "@/components/ui/separator";
+import MailboxSearch from "@/components/mailbox/default/mailbox-search";
+import React, { ReactNode } from "react";
+import { isSignedIn } from "@/lib/actions/auth";
+
+type LayoutProps = {
+	children: ReactNode;
+	params: Promise<Record<string, string>>;
+};
+
+export default async function DashboardLayout({
+	children,
+	params,
+}: LayoutProps) {
+	const { identityPublicId, mailboxSlug } = await params;
+
+	const user = await isSignedIn();
+
+	return (
+		<>
+			<header className="bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4">
+				<SidebarTrigger className="-ml-1" />
+				<Separator
+					orientation="vertical"
+					className="mr-2 data-[orientation=vertical]:h-4"
+				/>
+
+				<MailboxSearch
+					user={user}
+					publicId={identityPublicId}
+					mailboxSlug={mailboxSlug}
+				/>
+			</header>
+
+			{children}
+		</>
+	);
+}

apps/web/app/dashboard/(unified)/(mail)/mail/[identityPublicId]/scheduled/page.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ScheduledList from "@/components/mailbox/default/scheduled-list";
+import {fetchScheduledDrafts} from "@/lib/actions/mailbox";
+
+async function Page() {
+    const scheduledDrafts = await fetchScheduledDrafts()
+    return <>
+
+        <div className="p-4">
+            <ul role="list" className="divide-y rounded-4xl">
+                <ScheduledList drafts={scheduledDrafts} />
+            </ul>
+        </div>
+
+
+    </>
+}
+
+export default Page;

apps/web/components/dashboard/identity-mailboxes-list.tsx

@@ -25,6 +25,7 @@ import { IdentityEntity, MailboxEntity } from "@db";
 import AddNewFolder from "@/components/mailbox/default/add-new-folder";
 import { Menu } from "@mantine/core";
 import DeleteMailboxFolder from "@/components/mailbox/default/delete-folder";
+import {IconMailFast} from "@tabler/icons-react";
 
 const ORDER: MailboxKind[] = [
 	"inbox",
@@ -114,17 +115,23 @@ function buildTree(
 export default function IdentityMailboxesList({
 	identityMailboxes,
 	unreadCounts,
+    scheduledCounts,
 	onComplete,
 }: {
 	identityMailboxes: FetchIdentityMailboxListResult;
 	unreadCounts: FetchMailboxUnreadCountsResult;
+    scheduledCounts: number;
 	onComplete?: () => void;
 }) {
 	const pathname = usePathname();
 	const params = useParams() as {
 		identityPublicId?: string;
 		mailboxSlug?: string;
 	};
+    const currentSlug = React.useMemo(() => {
+        const parts = pathname.split("/").filter(Boolean);
+        return parts.at(-1) ?? "inbox";
+    }, [pathname]);
 
 	const Item = ({
 		m,
@@ -140,10 +147,9 @@ export default function IdentityMailboxesList({
 		const Icon = ICON[m.kind] ?? Folder;
 		const slug = m.slug ?? "inbox";
 		const href = `/dashboard/mail/${identityPublicId}/${slug}`;
-		const isActive =
-			pathname === href ||
-			(params.identityPublicId === identityPublicId &&
-				(params.mailboxSlug ?? "inbox") === slug);
+        const isActive =
+            pathname === href ||
+            (params.identityPublicId === identityPublicId && currentSlug === slug);
 
 		const [open, setOpen] = React.useState(true);
 		const hasChildren = m.children.length > 0;
@@ -257,6 +263,11 @@ export default function IdentityMailboxesList({
 								/>
 							))}
 						</div>
+                        <Link href={`/dashboard/mail/${params.identityPublicId}/scheduled`} className={`my-4 rounded hover:dark:bg-neutral-800 ${currentSlug === "scheduled" ? "dark:bg-neutral-800 dark:text-brand-foreground bg-brand-200 text-brand" : ""} flex justify-start gap-1 w-full p-1.5`}>
+                            <IconMailFast size={22}/>
+                            <span className={"font-normal text-sm"}>Scheduled ({scheduledCounts})</span>
+                        </Link>
+
 					</div>
 				);
 			})}

apps/web/components/mailbox/default/compose-mail.tsx

@@ -151,7 +151,7 @@ export default function ComposeMail({
 							aria-modal="true"
 							className={[
 								"fixed z-[1000] bg-background border shadow-xl rounded-lg overflow-hidden",
-								"right-4 bottom-4",
+								"right-12 bottom-4",
 								// expanded ? "w-[720px] h-[70vh]" : "w-[520px] h-auto",
 								expanded ? "w-[720px] h-[70vh]" : "w-[520px] h-auto",
 								"transition-[width,height] duration-200 ease-out",
@@ -195,9 +195,6 @@ export default function ComposeMail({
 										ref={editorRef}
 										publicConfig={publicConfig}
 										message={null}
-										// onReady={() =>
-										// 	requestAnimationFrame(() => editorRef.current?.focus())
-										// }
 										showEditorMode={showEditorMode}
 										handleClose={handleClose}
 									/>

apps/web/components/mailbox/default/editor/editor-footer.tsx

@@ -1,13 +1,14 @@
 import React, { useRef, useState } from "react";
 import { ActionIcon, Button, Popover, Progress } from "@mantine/core";
-import { Baseline, Paperclip, X as IconX } from "lucide-react";
+import {Baseline, Paperclip, X as IconX} from "lucide-react";
 import { RichTextEditor } from "@mantine/tiptap";
 import { useDynamicContext } from "@/hooks/use-dynamic-context";
 import { createClient } from "@/lib/supabase/client";
 import type { PublicConfig } from "@schema";
 import { v4 as uuidv4 } from "uuid";
 import { extension } from "mime-types";
 import { MessageEntity } from "@db";
+import ScheduleSend from "@/components/mailbox/default/editor/schedule-send";
 
 type UploadItem = {
 	name: string;
@@ -240,15 +241,16 @@ export default function EditorFooter() {
 			)}
 
 			<div className="border-t items-center flex py-2 px-2">
-				<div className="mx-2">
+				<div className="mx-2 flex items-center gap-[1px]">
 					<Button
 						loading={!!state.isPending}
-						size="xs"
-						radius="xl"
+						size="sm"
 						type="submit"
+                        className={"!rounded-l-4xl !rounded-r-xs"}
 					>
 						Send
 					</Button>
+                    <ScheduleSend />
 				</div>
 
 				<Popover position="top-start" withArrow shadow="md">