feat: snippet sharing linked via convex

convex/_generated/api.d.ts

@@ -15,6 +15,7 @@ import type {
 } from "convex/server";
 import type * as codeExecutions from "../codeExecutions.js";
 import type * as http from "../http.js";
+import type * as snippets from "../snippets.js";
 import type * as users from "../users.js";
 
 /**
@@ -28,6 +29,7 @@ import type * as users from "../users.js";
 declare const fullApi: ApiFromModules<{
   codeExecutions: typeof codeExecutions;
   http: typeof http;
+  snippets: typeof snippets;
   users: typeof users;
 }>;
 export declare const api: FilterApi<

convex/snippets.ts

@@ -0,0 +1,32 @@
+import { v } from "convex/values";
+import { mutation } from "./_generated/server";
+
+export const createSnippet = mutation({
+  args: {
+    title: v.string(),
+    language: v.string(),
+    code: v.string(),
+  },
+  handler: async (ctx, args) => {
+    const identity = await ctx.auth.getUserIdentity();
+    if (!identity) throw new Error("Unauthenticated");
+
+    const user = await ctx.db
+      .query("users")
+      .withIndex("by_user_id")
+      .filter((q) => q.eq(q.field("userId"), identity.subject))
+      .first();
+
+    if (!user) throw new Error("User not found");
+
+    const snippetId = await ctx.db.insert("snippets", {
+      userId: identity.subject,
+      userName: user.name,
+      title: args.title,
+      language: args.language,
+      code: args.code,
+    });
+
+    return snippetId;
+  },
+});

src/app/(home)/_components/EditorPanel.tsx

@@ -10,6 +10,7 @@ import { Editor } from "@monaco-editor/react";
 import { useClerk } from "@clerk/nextjs";
 import { EditorPanelSkeleton, EditorViewSkeleton } from "./EditorPanelLoading";
 import useMounted from "@/hooks/useMounted";
+import ShareSnippetDialog from "./ShareSnippetDialog";
 
 function EditorPanel() {
   const clerk = useClerk();
@@ -152,6 +153,7 @@ function EditorPanel() {
           {!clerk.loaded && <EditorPanelSkeleton />}
         </div>
       </div>
+      {isShareDialogOpen && <ShareSnippetDialog onClose={() => setIsShareDialogOpen(false)} />}
     </div>
   );
 }

src/app/(home)/_components/ShareSnippetDialog.tsx

@@ -0,0 +1,89 @@
+import { useCodeEditorState } from "@/store/useCodeEditorStore";
+import { useMutation } from "convex/react";
+import React from "react";
+import { api } from "../../../../convex/_generated/api";
+import { X } from "lucide-react";
+import toast from "react-hot-toast";
+
+function ShareSnippetDialog({ onClose }: { onClose: () => void }) {
+  const [title, setTitle] = React.useState("");
+  const [isSharing, setIsSharing] = React.useState(false);
+  const { language, getCode } = useCodeEditorState();
+  const createSnippet = useMutation(api.snippets.createSnippet);
+
+  const handleShare = async (e: React.FormEvent)=>{
+    e.preventDefault();
+
+    setIsSharing(true);
+
+    try{
+        const code = getCode();
+        await createSnippet({ title, language, code });
+        onClose();
+        setTitle("");
+        toast.success("Snippet shared successfully");
+
+    }
+    catch(error){
+      console.error(error);
+        toast.error("Failed to share snippet");
+    }
+
+    finally{
+        setIsSharing(false);
+    }
+
+
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-[#1e1e2e] rounded-lg p-6 w-full max-w-md">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-xl font-semibold text-white">Share Snippet</h2>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-300">
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <form onSubmit={handleShare}>
+          <div className="mb-4">
+            <label htmlFor="title" className="block text-sm font-medium text-gray-400 mb-2">
+              Title
+            </label>
+            <input
+              type="text"
+              id="title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              className="w-full px-3 py-2 bg-[#181825] border border-[#313244] rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="Enter snippet title"
+              required
+            />
+          </div>
+
+          <div className="flex justify-end gap-3">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-gray-400 hover:text-gray-300"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isSharing}
+              className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 
+              disabled:opacity-50"
+            >
+              {isSharing ? "Sharing..." : "Share"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+  )
+}
+
+export default ShareSnippetDialog;

src/app/layout.tsx

@@ -5,6 +5,7 @@ import { ClerkProvider } from "@clerk/nextjs";
 import ConvexClientProvider from "@/components/providers/ConvexClientProvider";
 import { BuyMeCoffeeButton } from "@/components/ui/BuyMeCoffee";
 import Footer from "@/components/ui/Footer";
+import { Toaster } from "react-hot-toast";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -36,6 +37,7 @@ export default function RootLayout({
           <ConvexClientProvider>{children}</ConvexClientProvider>
           <BuyMeCoffeeButton />
           <Footer />
+          <Toaster />
         </body>
       </html>
     </ClerkProvider>