feat: editor panel & header states stable with clerk auth

README.md

@@ -1,36 +1,7 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+# CodeX
+---
+## Under Development, Support the development [Here](https://buymeacoffee.com/aryasingh) and get early access to the project.
+---
+A Fully Open Source, Fast, Modern and Helpful 
+Code Editor | Interpreter | Compiler | Online Judge 
+---

convex/users.ts

@@ -1,4 +1,4 @@
-import { mutation } from "./_generated/server";
+import { mutation, query } from "./_generated/server";
 import { v } from "convex/values";
 
 export const syncUser = mutation({
@@ -22,4 +22,21 @@ export const syncUser = mutation({
             });
         }
     }
+})
+
+
+export const getUser = query({
+    args: {userId:v.string()},
+
+    handler: async (ctx,args)=>{
+        if (!args.userId)return null;
+
+        const user = await ctx.db.query("users")
+        .withIndex("by_user_id")
+        .filter((q)=>q.eq(q.field("userId"),args.userId))
+        .first();
+
+        if (!user)return null;
+        return user;
+    }
 })

package.json

@@ -16,7 +16,7 @@
     "clsx": "^2.1.1",
     "convex": "^1.17.3",
     "eslint-config-prettier": "^9.1.0",
-    "framer-motion": "^11.13.1",
+    "framer-motion": "^11.14.4",
     "lucide-react": "^0.464.0",
     "next": "15.0.3",
     "react": "19.0.0-rc-66855b96-20241106",
@@ -26,7 +26,7 @@
     "svix": "^1.43.0",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
-    "zustand": "^5.0.1"
+    "zustand": "^5.0.2"
   },
   "devDependencies": {
     "@types/node": "^20",

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

@@ -0,0 +1,159 @@
+"use client";
+
+import { useCodeEditorState } from "@/store/useCodeEditorStore";
+import React from "react";
+import { defineMonacoThemes, LANGUAGE_CONFIG } from "../_constants";
+import { RotateCcwIcon, ShareIcon, TypeIcon } from "lucide-react";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { Editor } from "@monaco-editor/react";
+import { useClerk } from "@clerk/nextjs";
+import { EditorPanelSkeleton, EditorViewSkeleton } from "./EditorPanelLoading";
+import useMounted from "@/hooks/useMounted";
+
+function EditorPanel() {
+  const clerk = useClerk();
+
+  const [isShareDialogOpen, setIsShareDialogOpen] = React.useState(false);
+  const { language, theme, fontSize, editor, setFontSize, setEditor } =
+    useCodeEditorState();
+  const mounted = useMounted();
+
+  React.useEffect(() => {
+    const savedCode = localStorage.getItem(`editor-code-${language}`);
+    const newCode = savedCode || LANGUAGE_CONFIG[language].defaultCode;
+    if (editor) editor.setValue(newCode);
+  }, [language, editor]);
+
+  React.useEffect(() => {
+    const savedFontSize = localStorage.getItem("editor-font-size");
+    if (savedFontSize) setFontSize(parseInt(savedFontSize));
+  }, [setFontSize]);
+
+  const handleRefresh = () => {
+    const defaultCode = LANGUAGE_CONFIG[language].defaultCode;
+    if (editor) editor.setValue(defaultCode);
+    localStorage.removeItem(`editor-code-${language}`);
+  };
+  const handleEditorChange = (value:string | undefined) => {
+    if (value) localStorage.setItem(`editor-code-${language}`, value);
+
+  };
+
+
+  const handleFontSizeChange = (newSize: number) => {
+    const size = Math.min(24, Math.max(12, newSize));
+    setFontSize(size);
+    localStorage.setItem("editor-font-size", size.toString());
+  };
+
+  if (!mounted) return null;
+  return (
+    <div className="relativ">
+      <div className="relative bg-[#12121a]/90 backdrop-blur rounded-xl border border-white/[0.05] p-6">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-3">
+            <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-[#1e1e2e] ring-1 ring-white/5">
+              <Image
+                src={"/" + language + ".png"}
+                alt="Logo"
+                width={24}
+                height={24}
+              />
+            </div>
+            <div>
+              <h2 className="text-sm font-medium text-white">
+                Write and execute your code
+              </h2>
+              <p className="text-xs text-gray-500">
+                Contact immediately if you have any issues
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-3 px-3 py-2 bg-[#1e1e2e] rounded-lg ring-1 ring-white/5">
+              <TypeIcon className="size-4 text-gray-400" />
+              <div className="flex items-center gap-3">
+                <input
+                  type="range"
+                  min="12"
+                  max="24"
+                  value={fontSize}
+                  onChange={(e) =>
+                    handleFontSizeChange(parseInt(e.target.value))
+                  }
+                  className="w-20 h-1 bg-gray-600 rounded-lg cursor-pointer"
+                />
+                <span className="text-sm font-medium text-gray-400 min-w-[2rem] text-center">
+                  {fontSize}
+                </span>
+              </div>
+            </div>
+
+            <motion.button
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.95 }}
+              onClick={handleRefresh}
+              className="p-2 bg-[#1e1e2e] hover:bg-[#2a2a3a] rounded-lg ring-1 ring-white/5 transition-colors"
+              aria-label="Reset to default code"
+            >
+              <RotateCcwIcon className="size-4 text-gray-400" />
+            </motion.button>
+
+            {/* Share Button */}
+            <motion.button
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+              onClick={() => setIsShareDialogOpen(true)}
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg overflow-hidden bg-gradient-to-r
+               from-blue-500 to-blue-600 opacity-90 hover:opacity-100 transition-opacity"
+            >
+              <ShareIcon className="size-4 text-white" />
+              <span className="text-sm font-medium text-white ">Share</span>
+            </motion.button>
+          </div>
+        </div>
+
+        {/* editor */}
+        <div className="relative group roundex-xl overflow-hidden ring-1 ring-white/[0.05]">
+          {clerk.loaded && (
+            <Editor
+              height="600px"
+              language={LANGUAGE_CONFIG[language].monacoLanguage}
+              onChange={handleEditorChange}
+              theme={theme}
+              beforeMount={defineMonacoThemes}
+              onMount={(editor) => setEditor(editor)}
+              options={{
+                minimap: { enabled: true },
+                fontSize: fontSize,
+                automaticLayout: true,
+                scrollBeyondLastLine: false,
+                padding: { top: 16, bottom: 16 },
+                renderWhitespace: "selection",
+                fontFamily: '"Fira Code", "Cascadia Code", Consolas, monospace',
+                fontLigatures: true,
+                cursorBlinking: "smooth",
+                smoothScrolling: true,
+                contextmenu: true,
+                renderLineHighlight: "all",
+                lineHeight: 1.6,
+                letterSpacing: 0.5,
+                wordWrap: "on",
+                roundedSelection: true,
+                scrollbar: {
+                  verticalScrollbarSize: 8,
+                  horizontalScrollbarSize: 8,
+                },
+              }}
+            />
+          )}
+
+          {!clerk.loaded && <EditorPanelSkeleton />}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default EditorPanel;

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

@@ -0,0 +1,71 @@
+import { Terminal } from "lucide-react";
+
+export function EditorPanelSkeleton() {
+  return (
+    <div className="relative">
+      <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-transparent to-purple-500/5 rounded-xl blur-2xl" />
+      <div className="relative bg-[#12121a]/90 backdrop-blur rounded-xl border border-white/[0.05] p-6 h-[600px]">
+        {/* Editor Area Skeleton */}
+        <div className="relative rounded-xl overflow-hidden ring-1 ring-white/[0.05]">
+          <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-transparent to-purple-500/5" />
+          <div className="h-[600px] bg-[#1e1e2e]/50 backdrop-blur-sm p-4">
+            {/* Code line skeletons */}
+            {[...Array(15)].map((_, i) => (
+              <div key={i} className="flex items-center gap-4 mb-3">
+                <div className={`w-12 h-4 bg-white/5 rounded`} />
+                <div
+                  className={`h-4 bg-white/5 rounded`}
+                  style={{ width: `${Math.random() * 60 + 20}%` }}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="mt-3 flex justify-end">
+          <div className={`w-40 h-6 bg-white/5 rounded-lg`} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function OutputPanelSkeleton() {
+  return (
+    <div className="relative bg-[#181825] rounded-xl p-4 ring-1 ring-gray-800/50">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <div className="flex items-center justify-center w-6 h-6 rounded-lg bg-[#1e1e2e] ring-1 ring-gray-800/50">
+            <Terminal className="w-4 h-4 text-blue-400/50" />
+          </div>
+          <div className={`w-16 h-4 bg-white/5 rounded`} />
+        </div>
+      </div>
+
+      {/* Output Area Skeleton */}
+      <div className="relative">
+        <div className="absolute inset-0 bg-gradient-to-b from-[#1e1e2e] to-[#1a1a2e] rounded-xl -z-10" />
+        <div className="relative bg-[#1e1e2e]/50 backdrop-blur-sm border border-[#313244] rounded-xl p-4 h-[600px]">
+          <div className="flex items-center justify-center h-full">
+            <div className="text-center">
+              <div className={`w-12 h-12 mx-auto mb-4 bg-white/5 rounded-xl`} />
+              <div className={`w-48 h-4 mx-auto bg-white/5 rounded`} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Loading state for the entire editor view
+export function EditorViewSkeleton() {
+  return (
+    <div className="space-y-6 p-4">
+      <EditorPanelSkeleton />
+      <OutputPanelSkeleton />
+    </div>
+  );
+}