68 | No pages inside 69 |
70 | {documents?.map((document) => ( 71 |
72 | - onRedirect(document._id)}
75 | label={document.title}
76 | icon={FileIcon}
77 | documentIcon={document.icon}
78 | active={params.documentId === document._id}
79 | level={level}
80 | onExpand={() => onExpand(document._id)}
81 | expanded={expanded[document._id]}
82 | />
83 | {expanded[document._id] && (
84 |
87 | ))}
88 |
89 | );
90 | };
91 |
--------------------------------------------------------------------------------
/app/(main)/_components/Item.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Skeleton } from "@/components/ui/skeleton";
4 | import { api } from "@/convex/_generated/api";
5 | import { Id } from "@/convex/_generated/dataModel";
6 | import { cn } from "@/lib/utils";
7 | import { useRouter } from "next/navigation";
8 | import { useMutation } from "convex/react";
9 | import { toast } from "sonner";
10 | import {
11 | DropdownMenu,
12 | DropdownMenuSeparator,
13 | DropdownMenuTrigger,
14 | DropdownMenuContent,
15 | DropdownMenuItem,
16 | } from "@/components/ui/dropdown-menu";
17 | import {
18 | ChevronDown,
19 | ChevronRight,
20 | LucideIcon,
21 | MoreHorizontal,
22 | Plus,
23 | Trash,
24 | } from "lucide-react";
25 | import { useUser } from "@clerk/clerk-react";
26 |
27 | interface ItemProps {
28 | id?: Id<"documents">;
29 | documentIcon?: string;
30 | active?: boolean;
31 | expanded?: boolean;
32 | isSearch?: boolean;
33 | level?: number;
34 | onExpand?: () => void;
35 | label: string;
36 | onClick?: () => void;
37 | icon: LucideIcon;
38 | }
39 |
40 | export const Item = ({
41 | id,
42 | label,
43 | onClick,
44 | icon: Icon,
45 | active,
46 | documentIcon,
47 | isSearch,
48 | level = 0,
49 | onExpand,
50 | expanded,
51 | }: ItemProps) => {
52 | const { user } = useUser();
53 | const router = useRouter();
54 | const create = useMutation(api.documents.create);
55 | const archive = useMutation(api.documents.archive);
56 |
57 | const onArchive = (event: React.MouseEvent
108 | {!!id && (
109 |
166 | );
167 | };
168 |
169 | Item.Skeleton = function ItemSkeleton({ level }: { level?: number }) {
170 | return (
171 |
114 |
116 | )}
117 | {documentIcon ? (
118 | {documentIcon}
119 | ) : (
120 |
131 |
132 | e.stopPropagation()} asChild>
133 |
140 |
146 |
147 |
150 |
155 |
156 |
164 | )}
165 |
137 |
139 |
152 | Last edited by: {user?.fullName}
153 |
154 |
161 |
163 |
175 |
178 | );
179 | };
180 |
--------------------------------------------------------------------------------
/app/(main)/_components/Menu.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useRouter } from "next/navigation";
4 | import { Id } from "@/convex/_generated/dataModel";
5 | import { useUser } from "@clerk/clerk-react";
6 | import { useMutation } from "convex/react";
7 | import { api } from "@/convex/_generated/api";
8 | import { toast } from "sonner";
9 | import {
10 | DropdownMenu,
11 | DropdownMenuContent,
12 | DropdownMenuItem,
13 | DropdownMenuSeparator,
14 | DropdownMenuTrigger,
15 | } from "@/components/ui/dropdown-menu";
16 | import { MoreHorizontal, Trash } from "lucide-react";
17 | import { Button } from "@/components/ui/button";
18 | import { Skeleton } from "@/components/ui/skeleton";
19 |
20 | interface MenuProps {
21 | documentId: Id<"documents">;
22 | }
23 |
24 | export const Menu = ({ documentId }: MenuProps) => {
25 | const router = useRouter();
26 | const { user } = useUser();
27 |
28 | const archive = useMutation(api.documents.archive);
29 |
30 | const onArchive = () => {
31 | const promise = archive({ id: documentId });
32 |
33 | toast.promise(promise, {
34 | loading: "Moving to trash...",
35 | success: "Note moved to trash!",
36 | error: "Failed to archive note.",
37 | });
38 |
39 | router.push("/documents");
40 | };
41 |
42 | return (
43 |
61 | Last edited by {user?.fullName}
62 |
63 |
192 | {!!params.documentId ? (
193 |
211 |
212 | );
213 | };
214 | export default Navigation;
215 |
--------------------------------------------------------------------------------
/app/(main)/_components/Publish.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Doc } from "@/convex/_generated/dataModel";
4 |
5 | import {
6 | Popover,
7 | PopoverTrigger,
8 | PopoverContent,
9 | } from "@/components/ui/popover";
10 | import { useOrigin } from "@/hooks/useOrigin";
11 | import { useMutation } from "convex/react";
12 | import { api } from "@/convex/_generated/api";
13 | import { useState } from "react";
14 | import { toast } from "sonner";
15 | import { Button } from "@/components/ui/button";
16 | import { Check, Copy, Divide, Globe } from "lucide-react";
17 |
18 | interface PublishProps {
19 | initialData: Doc<"documents">;
20 | }
21 |
22 | export const Publish = ({ initialData }: PublishProps) => {
23 | const origin = useOrigin();
24 | const update = useMutation(api.documents.update);
25 |
26 | const [copied, setCopied] = useState(false);
27 | const [isSubmitting, setIsSubmitting] = useState(false);
28 |
29 | const url = `${origin}/preview/${initialData._id}`;
30 |
31 | const onPublish = () => {
32 | setIsSubmitting(true);
33 |
34 | const promise = update({
35 | id: initialData._id,
36 | isPublished: true,
37 | }).finally(() => setIsSubmitting(false));
38 |
39 | toast.promise(promise, {
40 | loading: "Publishing...",
41 | success: "Note published!",
42 | error: "Failed to publish note.",
43 | });
44 | };
45 |
46 | const onUnpublish = () => {
47 | setIsSubmitting(true);
48 |
49 | const promise = update({
50 | id: initialData._id,
51 | isPublished: false,
52 | }).finally(() => setIsSubmitting(false));
53 |
54 | toast.promise(promise, {
55 | loading: "Unpublishing...",
56 | success: "Note unpublished",
57 | error: "Failed to unpublish note.",
58 | });
59 | };
60 |
61 | const onCopy = () => {
62 | navigator.clipboard.writeText(url);
63 | setCopied(true);
64 |
65 | setTimeout(() => {
66 | setCopied(false);
67 | }, 1000);
68 | };
69 |
70 | return (
71 |
83 |
116 | ) : (
117 |
84 |
89 | 86 | This note is live on the web. 87 |
88 |
90 |
95 |
106 |
107 |
115 |
118 |
132 | )}
133 | Published this note
120 | 121 | Share your work with others 122 | 123 | 131 |
51 | {!!initialData.icon &&
73 | );
74 | };
75 |
76 | Title.Skeleton = function TitleSkeleton() {
77 | return {initialData.icon}
} 52 | {isEditing ? ( 53 | 62 | ) : ( 63 | 71 | )} 72 |
66 |
68 | );
69 | }
70 |
71 | return (
72 |
74 |
83 |
84 | {filteredDocuments?.length === 0 && (
85 |
117 | 86 | No documents found. 87 |
88 | )} 89 | {filteredDocuments?.map((document) => ( 90 | 115 | ))} 116 |
26 |
36 |
27 |
28 |
30 |
31 | {user?.fullName}'s Zotion
32 |
33 |
34 |
44 |
60 | 45 | {user?.emailAddresses[0].emailAddress} 46 |
47 |
48 |
59 |
49 |
50 |
52 |
53 |
54 |
58 | 55 | {user?.fullName}'s Zotion 56 |
57 |
15 |
17 | );
18 | }
19 |
20 | if (!isAuthenticated) {
21 | return redirect("/");
22 | }
23 |
24 | return (
25 |
26 |
28 |
31 |
32 | );
33 | };
34 | export default MainLayout;
35 |
--------------------------------------------------------------------------------
/app/(public)/(routes)/preview/[documentId]/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import dynamic from "next/dynamic";
4 | import { useMemo } from "react";
5 |
6 | import { Cover } from "@/components/cover";
7 | import { Toolbar } from "@/components/toolbar";
8 | import { Skeleton } from "@/components/ui/skeleton";
9 |
10 | import { api } from "@/convex/_generated/api";
11 | import { Id } from "@/convex/_generated/dataModel";
12 | import { useMutation, useQuery } from "convex/react";
13 |
14 | interface DocumentIdPageProps {
15 | params: {
16 | documentId: Id<"documents">;
17 | };
18 | }
19 |
20 | const DocumentIdPage = ({ params }: DocumentIdPageProps) => {
21 | const Editor = useMemo(
22 | () => dynamic(() => import("@/components/editor"), { ssr: false }),
23 | [],
24 | );
25 |
26 | const document = useQuery(api.documents.getById, {
27 | documentId: params.documentId,
28 | });
29 |
30 | const update = useMutation(api.documents.update);
31 |
32 | const onChange = (content: string) => {
33 | update({
34 | id: params.documentId,
35 | content,
36 | });
37 | };
38 |
39 | if (document === undefined) {
40 | return (
41 |
42 |
52 | );
53 | }
54 |
55 | if (document === null) {
56 | return
44 |
51 |
45 |
50 | Not found
;
57 | }
58 |
59 | return (
60 |
61 |
71 | );
72 | };
73 | export default DocumentIdPage;
74 |
--------------------------------------------------------------------------------
/app/(public)/(routes)/preview/layout.tsx:
--------------------------------------------------------------------------------
1 | const PublicLayout = ({ children }: { children: React.ReactNode }) => {
2 | return
63 |
70 | {children}
;
3 | };
4 | export default PublicLayout;
5 |
--------------------------------------------------------------------------------
/app/api/edgestore/[...edgestore]/route.ts:
--------------------------------------------------------------------------------
1 | import { initEdgeStore } from "@edgestore/server";
2 | import { createEdgeStoreNextHandler } from "@edgestore/server/adapters/next/app";
3 | const es = initEdgeStore.create();
4 | /**
5 | * This is the main router for the Edge Store buckets.
6 | */
7 | const edgeStoreRouter = es.router({
8 | publicFiles: es.fileBucket().beforeDelete(() => {
9 | return true;
10 | }),
11 | });
12 | const handler = createEdgeStoreNextHandler({
13 | router: edgeStoreRouter,
14 | });
15 | export { handler as GET, handler as POST };
16 | /**
17 | * This type is used to create the type-safe client for the frontend.
18 | */
19 | export type EdgeStoreRouter = typeof edgeStoreRouter;
20 |
--------------------------------------------------------------------------------
/app/error.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Image from "next/image";
4 | import Link from "next/link";
5 |
6 | import { Button } from "@/components/ui/button";
7 |
8 | const Error = () => {
9 | return (
10 |
11 |
30 | );
31 | };
32 | export default Error;
33 |
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | html,
6 | body,
7 | :root {
8 | height: 100%;
9 | }
10 | @layer base {
11 | :root {
12 | --background: 0 0% 100%;
13 | --foreground: 0 0% 3.9%;
14 |
15 | --card: 0 0% 100%;
16 | --card-foreground: 0 0% 3.9%;
17 |
18 | --popover: 0 0% 100%;
19 | --popover-foreground: 0 0% 3.9%;
20 |
21 | --primary: 0 0% 9%;
22 | --primary-foreground: 0 0% 98%;
23 |
24 | --secondary: 0 0% 96.1%;
25 | --secondary-foreground: 0 0% 9%;
26 |
27 | --muted: 0 0% 96.1%;
28 | --muted-foreground: 0 0% 45.1%;
29 |
30 | --accent: 0 0% 96.1%;
31 | --accent-foreground: 0 0% 9%;
32 |
33 | --destructive: 0 84.2% 60.2%;
34 | --destructive-foreground: 0 0% 98%;
35 |
36 | --border: 0 0% 89.8%;
37 | --input: 0 0% 89.8%;
38 | --ring: 0 0% 3.9%;
39 |
40 | --radius: 0.5rem;
41 | }
42 |
43 | .dark {
44 | --background: 0 0% 3.9%;
45 | --foreground: 0 0% 98%;
46 |
47 | --card: 0 0% 3.9%;
48 | --card-foreground: 0 0% 98%;
49 |
50 | --popover: 0 0% 3.9%;
51 | --popover-foreground: 0 0% 98%;
52 |
53 | --primary: 0 0% 98%;
54 | --primary-foreground: 0 0% 9%;
55 |
56 | --secondary: 0 0% 14.9%;
57 | --secondary-foreground: 0 0% 98%;
58 |
59 | --muted: 0 0% 14.9%;
60 | --muted-foreground: 0 0% 63.9%;
61 |
62 | --accent: 0 0% 14.9%;
63 | --accent-foreground: 0 0% 98%;
64 |
65 | --destructive: 0 62.8% 30.6%;
66 | --destructive-foreground: 0 0% 98%;
67 |
68 | --border: 0 0% 14.9%;
69 | --input: 0 0% 14.9%;
70 | --ring: 0 0% 83.1%;
71 | }
72 | }
73 |
74 | .mantine-Menu-dropdown {
75 | max-height: 36rem !important;
76 | }
77 |
78 | @layer base {
79 | * {
80 | @apply border-border;
81 | }
82 | body {
83 | @apply bg-background text-foreground;
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from "next";
2 | import { Inter } from "next/font/google";
3 | import { Toaster } from "sonner";
4 | import "./globals.css";
5 |
6 | import { ThemeProvider } from "@/components/providers/theme-provider";
7 | import { ConvexClientProvider } from "@/components/providers/convex-provider";
8 | import { ModalProvider } from "@/components/providers/modal-provider";
9 | import { EdgeStoreProvider } from "@/lib/edgestore";
10 |
11 | const inter = Inter({ subsets: ["latin"] });
12 |
13 | export const metadata: Metadata = {
14 | title: "Zotion",
15 | description:
16 | "The seamless platform where creative and productive work happens.",
17 | icons: {
18 | icon: [
19 | {
20 | media: "(prefers-color-scheme: light)",
21 | url: "/logo.svg",
22 | href: "/logo.svg",
23 | },
24 | {
25 | media: "(prefers-color-scheme: dark)",
26 | url: "/logo-dark.svg",
27 | href: "/logo-dark.svg",
28 | },
29 | ],
30 | },
31 | };
32 |
33 | export default function RootLayout({
34 | children,
35 | }: Readonly<{
36 | children: React.ReactNode;
37 | }>) {
38 | return (
39 |
40 |
41 | Something went wrong!
26 | 29 |
46 | {!!url && (
47 |
72 | );
73 | };
74 |
75 | Cover.Skeleton = function CoverSkeleton() {
76 | return
51 |
60 |
69 |
70 | )}
71 |
43 |
50 | );
51 | };
52 |
53 | export default Editor;
54 |
--------------------------------------------------------------------------------
/components/icon-picker.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import EmojiPicker, { Theme } from "emoji-picker-react";
4 | import { useTheme } from "next-themes";
5 |
6 | import {
7 | Popover,
8 | PopoverContent,
9 | PopoverTrigger,
10 | } from "@/components/ui/popover";
11 |
12 | interface IconPickerPorps {
13 | onChange: (icon: string) => void;
14 | children: React.ReactNode;
15 | asChild?: boolean;
16 | }
17 |
18 | export const IconPicker = ({
19 | onChange,
20 | children,
21 | asChild,
22 | }: IconPickerPorps) => {
23 | const { resolvedTheme } = useTheme();
24 | const currentTheme = (resolvedTheme || "light") as keyof typeof themeMap;
25 |
26 | const themeMap = {
27 | dark: Theme.DARK,
28 | light: Theme.LIGHT,
29 | };
30 |
31 | const theme = themeMap[currentTheme];
32 |
33 | return (
34 | {document.icon}
70 | ) : ( 71 |
126 | {disabled && (
127 |
183 | );
184 | },
185 | );
186 | SingleImageDropzone.displayName = "SingleImageDropzone";
187 |
188 | const Button = React.forwardRef<
189 | HTMLButtonElement,
190 | React.ButtonHTMLAttributes
128 |
130 | )}
131 |
140 | {/* Main File Input */}
141 |
142 |
143 | {imageUrl ? (
144 | // Image Preview
145 | ![{acceptedFiles[0]?.name}]({imageUrl})
150 | ) : (
151 | // Upload Icon
152 |
179 |
180 | {/* Error Text */}
181 |
153 |
158 | )}
159 |
160 | {/* Remove Image Icon */}
161 | {imageUrl && !disabled && (
162 |
155 | Click or drag to this area to upload
156 |
157 | {
165 | e.stopPropagation();
166 | void onChange?.(undefined);
167 | }}
168 | >
169 |
177 | )}
178 |
170 |
176 | {errorMessage}
182 |
73 | {!!initialData.icon && !preview && (
74 | onInput(e.target.value)}
126 | className="resize-none break-words bg-transparent text-5xl font-bold text-[#3F3F3F] outline-none dark:text-[#CFCFCF]"
127 | />
128 | ) : (
129 |
137 | );
138 | };
139 |
--------------------------------------------------------------------------------
/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
5 |
6 | import { cn } from "@/lib/utils";
7 | import { buttonVariants } from "@/components/ui/button";
8 |
9 | const AlertDialog = AlertDialogPrimitive.Root;
10 |
11 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
12 |
13 | const AlertDialogPortal = AlertDialogPrimitive.Portal;
14 |
15 | const AlertDialogOverlay = React.forwardRef<
16 | React.ElementRef
75 |
76 |
80 |
88 |
89 | )}
90 | {!!initialData.icon && preview && (
91 | 77 | {initialData.icon} 78 |
79 |{initialData.icon}
92 | )} 93 |
94 | {!initialData.icon && !preview && (
95 |
96 |
104 |
105 | )}
106 | {!initialData.coverImage && !preview && (
107 |
116 | )}
117 |
118 | {isEditing && !preview ? (
119 |
133 | {initialData.title}
134 |
135 | )}
136 |
45 |
55 | ))
56 |
57 | CommandInput.displayName = CommandPrimitive.Input.displayName
58 |
59 | const CommandList = React.forwardRef<
60 | React.ElementRef