From 3041bc5d62069542fcb063b07e1c3b94f02fed85 Mon Sep 17 00:00:00 2001
From: Shreyash Gupta <48386323+shreyashkgupta@users.noreply.github.com>
Date: Mon, 2 Dec 2024 23:39:38 +0530
Subject: [PATCH] feat: Theming in editor

---
 packages/editor/src/app/editMode/page.tsx     | 10 ++++--
 packages/editor/src/app/layout.tsx            | 14 ++++++--
 .../editor/src/components/layout/TitleBar.tsx | 20 ++++++-----
 .../editor/src/components/ui/ThemeToggle.tsx  | 35 +++++++++++++++++++
 4 files changed, 66 insertions(+), 13 deletions(-)
 create mode 100644 packages/editor/src/components/ui/ThemeToggle.tsx
diff --git a/packages/editor/src/app/editMode/page.tsx b/packages/editor/src/app/editMode/page.tsx
index dd647da..e1f755a 100644
--- a/packages/editor/src/app/editMode/page.tsx
+++ b/packages/editor/src/app/editMode/page.tsx
@@ -7,6 +7,7 @@ import { Input } from "@/components/ui/input"
 import { Folder, File, Plus, X, ChevronRight, ChevronDown, Trash2 } from "lucide-react"
 import { motion, AnimatePresence } from "framer-motion"
 import { fetchAllContent } from '@/src/lib/getContents'
+import { ThemeToggle } from "@/components/ui/ThemeToggle"
 
 const API_URL = process.env.NEXT_PUBLIC_BACKEND_API_URL || 'http://localhost:3001'
 
@@ -408,9 +409,12 @@ export default function ImprovedFileTreeUI() {
 
   return (
     <div className="p-6 bg-background min-h-screen text-foreground">
-      <h1 className="text-3xl font-bold mb-6 text-foreground">
-        Project Explorer
-      </h1>
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-3xl font-bold text-foreground">
+          Project Explorer
+        </h1>
+        <ThemeToggle />
+      </div>
       <div className="bg-card rounded-lg shadow-xl p-6 border">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
diff --git a/packages/editor/src/app/layout.tsx b/packages/editor/src/app/layout.tsx
index a36cde0..c5e5d75 100644
--- a/packages/editor/src/app/layout.tsx
+++ b/packages/editor/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
+import { ThemeProvider } from "next-themes";
+import { Toaster } from "sonner";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -24,11 +26,19 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+          <Toaster position="bottom-right" />
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/packages/editor/src/components/layout/TitleBar.tsx b/packages/editor/src/components/layout/TitleBar.tsx
index 64b4ddd..b95e62e 100644
--- a/packages/editor/src/components/layout/TitleBar.tsx
+++ b/packages/editor/src/components/layout/TitleBar.tsx
@@ -4,6 +4,7 @@ import { ArrowLeft, Save } from 'lucide-react'
 import { Button } from "@/components/ui/button"
 import Link from "next/link"
 import { usePathname } from 'next/navigation'
+import { ThemeToggle } from "@/components/ui/ThemeToggle"
 
 interface TitleBarProps {
   onSave: () => void
@@ -34,14 +35,17 @@ export function TitleBar({ onSave, isSaving = false }: TitleBarProps) {
         <h1 className="text-lg font-medium">{filename}</h1>
       </div>
       
-      <Button 
-        onClick={onSave}
-        disabled={isSaving}
-        className="flex items-center space-x-2"
-      >
-        <Save className="w-4 h-4" />
-        <span>{isSaving ? 'Saving...' : 'Save'}</span>
-      </Button>
+      <div className="flex items-center space-x-4">
+        <Button 
+          onClick={onSave} 
+          disabled={isSaving}
+          className="flex items-center gap-2"
+        >
+          <Save className="w-4 h-4" />
+          {isSaving ? 'Saving...' : 'Save'}
+        </Button>
+        <ThemeToggle />
+      </div>
     </div>
   )
 }
diff --git a/packages/editor/src/components/ui/ThemeToggle.tsx b/packages/editor/src/components/ui/ThemeToggle.tsx
new file mode 100644
index 0000000..8875999
--- /dev/null
+++ b/packages/editor/src/components/ui/ThemeToggle.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import { Button } from "./button"
+import { useEffect, useState } from "react"
+
+export function ThemeToggle() {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme()
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      className="rounded-full hover:bg-muted"
+    >
+      {theme === "light" ? (
+        <Moon className="h-5 w-5" />
+      ) : (
+        <Sun className="h-5 w-5" />
+      )}
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+} 
\ No newline at end of file
