Merge pull request #2 from johndoe6345789/copilot/organize-components-folder

[WIP] Organize components folder for better structure

src/App.tsx

@@ -1,8 +1,8 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import { motion } from 'framer-motion'
 import { Code } from '@phosphor-icons/react'
-import { Navigation, NavigationProvider, NavigationSidebar, useNavigation } from '@/components/Navigation'
-import { BackendIndicator } from '@/components/BackendIndicator'
+import { Navigation, NavigationProvider, NavigationSidebar, useNavigation } from '@/components/layout/Navigation'
+import { BackendIndicator } from '@/components/layout/BackendIndicator'
 import { HomePage } from '@/pages/HomePage'
 import { DemoPage } from '@/pages/DemoPage'
 import { AtomsPage } from '@/pages/AtomsPage'

src/components/SnippetManagerRedux.tsx

@@ -1,7 +1,7 @@
-import { SnippetDialog } from '@/components/SnippetDialog'
-import { SnippetViewer } from '@/components/SnippetViewer'
-import { EmptyState } from '@/components/EmptyState'
-import { NamespaceSelector } from '@/components/NamespaceSelector'
+import { SnippetDialog } from '@/components/features/snippet-editor/SnippetDialog'
+import { SnippetViewer } from '@/components/features/snippet-viewer/SnippetViewer'
+import { EmptyState } from '@/components/features/snippet-display/EmptyState'
+import { NamespaceSelector } from '@/components/features/namespace-manager/NamespaceSelector'
 import { SnippetTemplate } from '@/lib/types'
 import templatesData from '@/data/templates.json'
 import { useSnippetManager } from '@/hooks/useSnippetManager'

src/components/atoms/AtomsSection.tsx

@@ -13,7 +13,7 @@ import {
   Minus,
   MagnifyingGlass,
 } from '@phosphor-icons/react'
-import { ComponentShowcase } from '@/components/ComponentShowcase'
+import { ComponentShowcase } from '@/components/demo/ComponentShowcase'
 import { atomsCodeSnippets } from '@/lib/component-code-snippets'
 import { Snippet } from '@/lib/types'
 

src/components/demo/ComponentShowcase.tsx

@@ -3,7 +3,7 @@ import { Card } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { FloppyDisk } from '@phosphor-icons/react'
 import { Snippet } from '@/lib/types'
-import { SnippetDialog } from '@/components/SnippetDialog'
+import { SnippetDialog } from '@/components/features/snippet-editor/SnippetDialog'
 
 interface ComponentShowcaseProps {
   children: React.ReactNode

src/components/error/ErrorFallback.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
-import { Alert, AlertTitle, AlertDescription } from "./ui/alert";
-import { AIErrorHelper } from "./AIErrorHelper";
-import { Button } from "./ui/button";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible";
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import { AIErrorHelper } from "@/components/error/AIErrorHelper";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { AlertTriangleIcon, RefreshCwIcon, ChevronDownIcon, ChevronUpIcon, CopyIcon, CheckIcon } from "lucide-react";
 
 interface ErrorFallbackProps {

src/components/features/python-runner/PythonOutput.tsx

@@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { runPythonCode, getPyodide, isPyodideReady } from '@/lib/pyodide-runner'
-import { PythonTerminal } from '@/components/PythonTerminal'
+import { PythonTerminal } from '@/components/features/python-runner/PythonTerminal'
 import { toast } from 'sonner'
 
 interface PythonOutputProps {

src/components/features/python-runner/PythonTerminal.tsx

@@ -1,8 +1,8 @@
 import { useRef, useEffect } from 'react'
 import { usePythonTerminal } from '@/hooks/usePythonTerminal'
-import { TerminalHeader } from '@/components/python-terminal/TerminalHeader'
-import { TerminalOutput } from '@/components/python-terminal/TerminalOutput'
-import { TerminalInput } from '@/components/python-terminal/TerminalInput'
+import { TerminalHeader } from '@/components/features/python-runner/TerminalHeader'
+import { TerminalOutput } from '@/components/features/python-runner/TerminalOutput'
+import { TerminalInput } from '@/components/features/python-runner/TerminalInput'
 
 interface PythonTerminalProps {
   code: string

src/components/features/snippet-editor/CodeEditorSection.tsx

@@ -1,7 +1,7 @@
 import { Label } from '@/components/ui/label'
 import { Checkbox } from '@/components/ui/checkbox'
-import { MonacoEditor } from '@/components/MonacoEditor'
-import { SplitScreenEditor } from '@/components/SplitScreenEditor'
+import { MonacoEditor } from '@/components/features/snippet-editor/MonacoEditor'
+import { SplitScreenEditor } from '@/components/features/snippet-editor/SplitScreenEditor'
 import { InputParameter } from '@/lib/types'
 import { appConfig } from '@/lib/config'
 

src/components/features/snippet-editor/ReactPreview.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useMemo } from 'react'
 import * as React from 'react'
 import { Alert, AlertDescription } from '@/components/ui/alert'
-import { AIErrorHelper } from '@/components/AIErrorHelper'
+import { AIErrorHelper } from '@/components/error/AIErrorHelper'
 import { WarningCircle } from '@phosphor-icons/react'
 import { InputParameter } from '@/lib/types'
 import { transformReactCode } from '@/lib/react-transform'

src/components/features/snippet-editor/SnippetDialog.tsx

@@ -10,9 +10,9 @@ import { Button } from '@/components/ui/button'
 import { Snippet } from '@/lib/types'
 import { strings, appConfig } from '@/lib/config'
 import { useSnippetForm } from '@/hooks/useSnippetForm'
-import { SnippetFormFields } from '@/components/snippet-dialog/SnippetFormFields'
-import { CodeEditorSection } from '@/components/snippet-dialog/CodeEditorSection'
-import { InputParameterList } from '@/components/snippet-dialog/InputParameterList'
+import { SnippetFormFields } from '@/components/features/snippet-editor/SnippetFormFields'
+import { CodeEditorSection } from '@/components/features/snippet-editor/CodeEditorSection'
+import { InputParameterList } from '@/components/features/snippet-editor/InputParameterList'
 
 interface SnippetDialogProps {
   open: boolean

src/components/features/snippet-editor/SplitScreenEditor.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
-import { MonacoEditor } from '@/components/MonacoEditor'
-import { ReactPreview } from '@/components/ReactPreview'
-import { PythonOutput } from '@/components/PythonOutput'
+import { MonacoEditor } from '@/components/features/snippet-editor/MonacoEditor'
+import { ReactPreview } from '@/components/features/snippet-editor/ReactPreview'
+import { PythonOutput } from '@/components/features/python-runner/PythonOutput'
 import { Button } from '@/components/ui/button'
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
 import { Code, Eye, SplitHorizontal } from '@phosphor-icons/react'

src/components/features/snippet-viewer/SnippetViewer.tsx

@@ -8,9 +8,9 @@ import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Copy, Pencil, Check, SplitVertical } from '@phosphor-icons/react'
 import { Snippet } from '@/lib/types'
-import { MonacoEditor } from '@/components/MonacoEditor'
-import { ReactPreview } from '@/components/ReactPreview'
-import { PythonOutput } from '@/components/PythonOutput'
+import { MonacoEditor } from '@/components/features/snippet-editor/MonacoEditor'
+import { ReactPreview } from '@/components/features/snippet-editor/ReactPreview'
+import { PythonOutput } from '@/components/features/python-runner/PythonOutput'
 import { cn } from '@/lib/utils'
 import { useState } from 'react'
 import { strings, appConfig, LANGUAGE_COLORS } from '@/lib/config'

src/components/layout/Navigation.tsx

@@ -96,43 +96,25 @@ export function NavigationSidebar() {
                       variant={isActive ? 'secondary' : 'ghost'}
                       className={cn(
                         'w-full justify-start gap-3',
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-                        isActive && 'bg-accent text-accent-foreground'
-                      )}
-                    >
-                      <Icon className="h-5 w-5" />
-                      {item.label}
-                    </Button>
-                  </Link>
-                </li>
-              )
-            })}
-          </ul>
-        </nav>
-
-        <div className="p-6 border-t border-border">
-          <p className="text-sm text-muted-foreground">
-            CodeSnippet Library
-          </p>
-        </div>
-      </div>
-    </motion.aside>
-  )
-}
+                        isActive && 'bg-accent text-accent-foreground'
+                      )}
+                    >
+                      <Icon className="h-5 w-5" />
+                      {item.label}
+                    </Button>
+                  </Link>
+                </li>
+              )
+            })}
+          </ul>
+        </nav>
+
+        <div className="p-6 border-t border-border">
+          <p className="text-sm text-muted-foreground">
+            CodeSnippet Library
+          </p>
+        </div>
+      </div>
+    </motion.aside>
+  )
+}

src/components/molecules/MoleculesSection.tsx

@@ -16,7 +16,7 @@ import {
   Lock,
   Calendar,
 } from '@phosphor-icons/react'
-import { ComponentShowcase } from '@/components/ComponentShowcase'
+import { ComponentShowcase } from '@/components/demo/ComponentShowcase'
 import { moleculesCodeSnippets } from '@/lib/component-code-snippets'
 import { Snippet } from '@/lib/types'
 

src/components/organisms/OrganismsSection.tsx

@@ -32,7 +32,7 @@ import {
   Plus,
 } from '@phosphor-icons/react'
 import { useState } from 'react'
-import { ComponentShowcase } from '@/components/ComponentShowcase'
+import { ComponentShowcase } from '@/components/demo/ComponentShowcase'
 import { organismsCodeSnippets } from '@/lib/component-code-snippets'
 import { Snippet } from '@/lib/types'
 

src/components/snippet-manager/SnippetGrid.tsx

@@ -1,4 +1,4 @@
-import { SnippetCard } from '@/components/SnippetCard'
+import { SnippetCard } from '@/components/features/snippet-display/SnippetCard'
 import { Snippet } from '@/lib/types'
 
 interface SnippetGridProps {

src/components/templates/TemplatesSection.tsx

@@ -17,7 +17,7 @@ import {
   Users,
   ShoppingCart,
 } from '@phosphor-icons/react'
-import { ComponentShowcase } from '@/components/ComponentShowcase'
+import { ComponentShowcase } from '@/components/demo/ComponentShowcase'
 import { templatesCodeSnippets } from '@/lib/component-code-snippets'
 import { Snippet } from '@/lib/types'
 

src/main.tsx

@@ -7,7 +7,7 @@ import { loadStorageConfig } from '@/lib/storage'
 import { store } from '@/store'
 
 import App from './App.tsx'
-import { ErrorFallback } from './components/ErrorFallback.tsx'
+import { ErrorFallback } from './components/error/ErrorFallback.tsx'
 
 import "./main.css"
 import "./styles/theme.css"

src/pages/DemoPage.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { motion } from 'framer-motion'
-import { SplitScreenEditor } from '@/components/SplitScreenEditor'
+import { SplitScreenEditor } from '@/components/features/snippet-editor/SplitScreenEditor'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Sparkle } from '@phosphor-icons/react'
 

src/pages/SettingsPage.tsx

@@ -16,7 +16,7 @@ import {
   type StorageBackend 
 } from '@/lib/storage'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
-import { PersistenceSettings } from '@/components/PersistenceSettings'
+import { PersistenceSettings } from '@/components/demo/PersistenceSettings'
 
 export function SettingsPage() {
   const [stats, setStats] = useState<{