From e668dd9c5767b94ce4e85b41b36abe65acbff32e Mon Sep 17 00:00:00 2001
From: JohnDoe6345789 <john.doe6345789@gmail.com>
Date: Fri, 26 Dec 2025 00:32:44 +0000
Subject: [PATCH] code: tsx,nextjs,frontends (3 files)

---
 .../nextjs/src/components/CssClassBuilder.tsx |  6 --
 .../nerd-mode-ide/NerdModeEmptyState.tsx      | 12 +++
 .../nerd-mode-ide/NerdModeGitPanel.tsx        | 83 +++++++++++++++++++
 3 files changed, 95 insertions(+), 6 deletions(-)
 create mode 100644 frontends/nextjs/src/components/nerd-mode-ide/NerdModeEmptyState.tsx
 create mode 100644 frontends/nextjs/src/components/nerd-mode-ide/NerdModeGitPanel.tsx

diff --git a/frontends/nextjs/src/components/CssClassBuilder.tsx b/frontends/nextjs/src/components/CssClassBuilder.tsx
index aaa4f2808..4672a3889 100644
--- a/frontends/nextjs/src/components/CssClassBuilder.tsx
+++ b/frontends/nextjs/src/components/CssClassBuilder.tsx
@@ -97,12 +97,6 @@ export function CssClassBuilder({ open, onClose, initialValue = '', onSave }: Cs
     }
   }, [activeTab, filteredCategories, open])
 
-  const loadCssClasses = async () => {
-    const classes = await Database.getCssClasses()
-    const sorted = classes.slice().sort((a, b) => a.name.localeCompare(b.name))
-    setCategories(sorted)
-  }
-
   const toggleClass = (cssClass: string) => {
     setSelectedClasses(current => {
       if (current.includes(cssClass)) {
diff --git a/frontends/nextjs/src/components/nerd-mode-ide/NerdModeEmptyState.tsx b/frontends/nextjs/src/components/nerd-mode-ide/NerdModeEmptyState.tsx
new file mode 100644
index 000000000..3f0847aa7
--- /dev/null
+++ b/frontends/nextjs/src/components/nerd-mode-ide/NerdModeEmptyState.tsx
@@ -0,0 +1,12 @@
+import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined'
+
+export function NerdModeEmptyState() {
+  return (
+    <div className="flex items-center justify-center h-full text-muted-foreground">
+      <div className="text-center">
+        <DescriptionOutlinedIcon fontSize="large" className="mx-auto mb-3 opacity-50" />
+        <p>Select a file to edit</p>
+      </div>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/nerd-mode-ide/NerdModeGitPanel.tsx b/frontends/nextjs/src/components/nerd-mode-ide/NerdModeGitPanel.tsx
new file mode 100644
index 000000000..692bbf3d0
--- /dev/null
+++ b/frontends/nextjs/src/components/nerd-mode-ide/NerdModeGitPanel.tsx
@@ -0,0 +1,83 @@
+import CallSplitIcon from '@mui/icons-material/CallSplit'
+import CloudDownloadIcon from '@mui/icons-material/CloudDownload'
+import CloudUploadIcon from '@mui/icons-material/CloudUpload'
+import SettingsIcon from '@mui/icons-material/Settings'
+import { Badge } from '@/components/ui'
+import { Button } from '@/components/ui'
+import { Input } from '@/components/ui'
+import { Label } from '@/components/ui'
+import { Separator } from '@/components/ui'
+import type { GitConfig } from './types'
+
+interface NerdModeGitPanelProps {
+  gitConfig: GitConfig | null
+  gitCommitMessage: string
+  onCommitMessageChange: (value: string) => void
+  onGitPush: () => void
+  onGitPull: () => void
+  onOpenConfig: () => void
+}
+
+export function NerdModeGitPanel({
+  gitConfig,
+  gitCommitMessage,
+  onCommitMessageChange,
+  onGitPush,
+  onGitPull,
+  onOpenConfig,
+}: NerdModeGitPanelProps) {
+  return (
+    <div className="h-[calc(100%-40px)] m-0 p-4">
+      <div className="space-y-4">
+        <div>
+          <h3 className="font-semibold mb-2">Git Operations</h3>
+          {gitConfig ? (
+            <div className="space-y-2 text-sm">
+              <div className="flex items-center gap-2">
+                <Badge variant="outline">{gitConfig.provider}</Badge>
+                <span className="text-muted-foreground">{gitConfig.repoUrl}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CallSplitIcon fontSize="inherit" />
+                <span>{gitConfig.branch}</span>
+              </div>
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground">No Git configuration found</p>
+          )}
+        </div>
+
+        <Separator />
+
+        <div className="space-y-3">
+          <div>
+            <Label htmlFor="commit-message">Commit Message</Label>
+            <Input
+              id="commit-message"
+              placeholder="Update files"
+              value={gitCommitMessage}
+              onChange={(e) => onCommitMessageChange(e.target.value)}
+              className="mt-1"
+            />
+          </div>
+
+          <div className="flex gap-2">
+            <Button onClick={onGitPush} className="flex-1">
+              <CloudUploadIcon className="mr-2" fontSize="small" />
+              Push
+            </Button>
+            <Button onClick={onGitPull} variant="outline" className="flex-1">
+              <CloudDownloadIcon className="mr-2" fontSize="small" />
+              Pull
+            </Button>
+          </div>
+
+          <Button variant="outline" className="w-full" onClick={onOpenConfig}>
+            <SettingsIcon className="mr-2" fontSize="small" />
+            Configure Git
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}