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

---
 .../components/ComponentHierarchyEditor.tsx   | 16 +++++-
 .../nerd-mode-ide/NerdModeEditorHeader.tsx    | 46 +++++++++++++++++
 .../nerd-mode-ide/NerdModeIDEHeader.tsx       | 49 +++++++++++++++++++
 3 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 frontends/nextjs/src/components/nerd-mode-ide/NerdModeEditorHeader.tsx
 create mode 100644 frontends/nextjs/src/components/nerd-mode-ide/NerdModeIDEHeader.tsx

diff --git a/frontends/nextjs/src/components/ComponentHierarchyEditor.tsx b/frontends/nextjs/src/components/ComponentHierarchyEditor.tsx
index 09baa9ab8..a21e4a2f6 100644
--- a/frontends/nextjs/src/components/ComponentHierarchyEditor.tsx
+++ b/frontends/nextjs/src/components/ComponentHierarchyEditor.tsx
@@ -157,11 +157,25 @@ export function ComponentHierarchyEditor({ nerdMode = false }: { nerdMode?: bool
   const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set())
   const [draggingNodeId, setDraggingNodeId] = useState<string | null>(null)
   const [configNodeId, setConfigNodeId] = useState<string | null>(null)
+  const componentIdPrefix = useId()
+
+  const loadPages = useCallback(async () => {
+    const loadedPages = await Database.getPages()
+    setPages(loadedPages)
+    if (loadedPages.length > 0 && !selectedPageId) {
+      setSelectedPageId(loadedPages[0].id)
+    }
+  }, [selectedPageId])
+
+  const loadHierarchy = useCallback(async () => {
+    const allHierarchy = await Database.getComponentHierarchy()
+    setHierarchy(allHierarchy)
+  }, [])
 
   useEffect(() => {
     loadPages()
     loadHierarchy()
-  }, [])
+  }, [loadPages, loadHierarchy])
 
   useEffect(() => {
     if (selectedPageId) {
diff --git a/frontends/nextjs/src/components/nerd-mode-ide/NerdModeEditorHeader.tsx b/frontends/nextjs/src/components/nerd-mode-ide/NerdModeEditorHeader.tsx
new file mode 100644
index 000000000..1b6606a52
--- /dev/null
+++ b/frontends/nextjs/src/components/nerd-mode-ide/NerdModeEditorHeader.tsx
@@ -0,0 +1,46 @@
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
+import PlayArrowIcon from '@mui/icons-material/PlayArrow'
+import SaveIcon from '@mui/icons-material/Save'
+import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined'
+import { Badge } from '@/components/ui'
+import { Button } from '@/components/ui'
+import type { FileNode } from '@/lib/nerd-mode-ide'
+
+interface NerdModeEditorHeaderProps {
+  selectedFile: FileNode
+  isRunning: boolean
+  onRunCode: () => void
+  onSave: () => void
+  onDelete: () => void
+}
+
+export function NerdModeEditorHeader({
+  selectedFile,
+  isRunning,
+  onRunCode,
+  onSave,
+  onDelete,
+}: NerdModeEditorHeaderProps) {
+  return (
+    <div className="flex items-center justify-between p-2 bg-muted border-b border-border">
+      <div className="flex items-center gap-2">
+        <DescriptionOutlinedIcon fontSize="small" />
+        <span className="text-sm font-medium">{selectedFile.name}</span>
+        <Badge variant="outline" className="text-xs">
+          {selectedFile.language || 'text'}
+        </Badge>
+      </div>
+      <div className="flex items-center gap-1">
+        <Button size="sm" variant="ghost" onClick={onRunCode} disabled={isRunning}>
+          <PlayArrowIcon fontSize="small" />
+        </Button>
+        <Button size="sm" variant="ghost" onClick={onSave}>
+          <SaveIcon fontSize="small" />
+        </Button>
+        <Button size="sm" variant="ghost" onClick={onDelete}>
+          <DeleteOutlineIcon fontSize="small" />
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/nerd-mode-ide/NerdModeIDEHeader.tsx b/frontends/nextjs/src/components/nerd-mode-ide/NerdModeIDEHeader.tsx
new file mode 100644
index 000000000..ab42005c2
--- /dev/null
+++ b/frontends/nextjs/src/components/nerd-mode-ide/NerdModeIDEHeader.tsx
@@ -0,0 +1,49 @@
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'
+import CloudDownloadIcon from '@mui/icons-material/CloudDownload'
+import LibraryAddIcon from '@mui/icons-material/LibraryAdd'
+import SettingsIcon from '@mui/icons-material/Settings'
+import TerminalIcon from '@mui/icons-material/Terminal'
+import { Button } from '@/components/ui'
+import { CardHeader, CardTitle } from '@/components/ui'
+
+interface NerdModeIDEHeaderProps {
+  workspaceName: string
+  onOpenGitConfig: () => void
+  onOpenNewItem: () => void
+  onOpenTemplates: () => void
+  onExportZip: () => void
+}
+
+export function NerdModeIDEHeader({
+  workspaceName,
+  onOpenGitConfig,
+  onOpenNewItem,
+  onOpenTemplates,
+  onExportZip,
+}: NerdModeIDEHeaderProps) {
+  return (
+    <CardHeader className="pb-3">
+      <div className="flex items-center justify-between">
+        <CardTitle className="text-lg flex items-center gap-2">
+          <TerminalIcon fontSize="small" />
+          Nerd Mode IDE
+          <span className="text-sm text-muted-foreground">· {workspaceName}</span>
+        </CardTitle>
+        <div className="flex items-center gap-2">
+          <Button size="sm" variant="outline" onClick={onOpenGitConfig}>
+            <SettingsIcon fontSize="small" />
+          </Button>
+          <Button size="sm" variant="outline" onClick={onOpenTemplates}>
+            <AutoAwesomeIcon fontSize="small" />
+          </Button>
+          <Button size="sm" variant="outline" onClick={onOpenNewItem}>
+            <LibraryAddIcon fontSize="small" />
+          </Button>
+          <Button size="sm" variant="outline" onClick={onExportZip}>
+            <CloudDownloadIcon fontSize="small" />
+          </Button>
+        </div>
+      </div>
+    </CardHeader>
+  )
+}