You are an AI assistant tasked with building a single-page Software as a Service (SaaS) application called 'Kod Ortamı Sihirbazı' (Code Environment Wizard). The primary goal of this application is to help developers manage and optimize their code editor configurations (like Emacs, Vim, or VS Code) by minimizing external package dependencies and promoting self-contained solutions. This application aims to solve the problem of configuration fragility, dependency hell, and the maintenance overhead associated with complex package ecosystems.
**1. PROJECT OVERVIEW:**
The 'Kod Ortamı Sihirbazı' is a web application designed for developers who want to build and maintain stable, efficient, and self-sufficient coding environments. It addresses the pain points of package management issues, build failures, and the time lost debugging external dependencies. The core value proposition is to empower developers to create robust configurations that are less prone to breakage across editor updates and reduce reliance on potentially unstable third-party repositories. The application will provide tools to analyze existing configurations, suggest optimizations by replacing external packages with built-in features or custom Elisp/Vimscript code, and manage these optimized configurations through version control.
**2. TECH STACK:**
- **Frontend Framework:** React (using Vite for a fast development experience).
- **Styling:** Tailwind CSS for rapid UI development and a consistent, modern look.
- **State Management:** Zustand for simple and efficient global state management.
- **Routing:** React Router DOM for handling navigation within the single-page application.
- **UI Components:** A lightweight component library or custom-built components adhering to Tailwind CSS principles.
- **Local Storage:** Utilize localStorage for persisting user preferences and temporary state.
- **Potential API (for future expansion):** A simple REST API could be integrated later for user accounts, cloud storage, and collaboration features, but the MVP will focus on client-side functionality.
**3. CORE FEATURES:**
- **Configuration Uploader/Editor:**
- **User Flow:** Users can either upload their existing configuration file (e.g., `init.el`, `.vimrc`) or use a built-in code editor to write/paste their configuration.
- **Functionality:** The system parses the uploaded/written configuration.
- **Dependency Analyzer:**
- **User Flow:** After configuration is loaded, the application scans the code to identify lines or blocks related to external package loading (e.g., `package-install`, `use-package :ensure`, `PlugInstall`).
- **Functionality:** It generates a list of detected external packages and the lines of code responsible for their installation/management.
- **Optimization Suggester:**
- **User Flow:** For each detected external package, the application attempts to find and suggest equivalent functionalities using built-in editor features or common Elisp/Vimscript patterns. It might link to documentation or provide simple code snippets.
- **Functionality:** Presents suggestions in a clear, actionable format. Users can accept or reject suggestions.
- **Configuration Manager & Version Control:**
- **User Flow:** Users can save their optimized configurations. Each save creates a new version. Users can view historical versions and revert to previous states.
- **Functionality:** Implements a simplified versioning system using timestamps and potentially Git-like diffing (client-side) stored in localStorage or object URLs.
- **Feedback & Reporting:**
- **User Flow:** The application provides summaries of detected dependencies, optimizations applied, and the 'self-sufficiency' score of the configuration.
- **Functionality:** Displays statistics and reports on the configuration's health.
**4. UI/UX DESIGN:**
- **Layout:** A clean, two-column layout. The left sidebar will contain navigation (Upload/Editor, Analysis, History) and configuration management. The main content area will display the editor, analysis results, or version history.
- **Color Palette:** A modern, developer-friendly palette. Primary colors: Dark `#1a1a1a` (background), Secondary: `#2d2d2d` (sidebar, cards), Accent: `#4CAF50` (success states, primary actions), Warning: `#FFC107` (potential issues), Danger: `#F44336` (critical errors). Text: `#e0e0e0`.
- **Typography:** Use a clean, readable sans-serif font like Inter or Roboto for UI elements and a monospace font like Fira Code or Source Code Pro for code blocks.
- **Responsive Design:** Mobile-first approach. The layout should adapt gracefully to different screen sizes. On smaller screens, the sidebar might collapse into a hamburger menu.
- **Interactions:** Subtle hover effects on buttons and links. Smooth transitions for panel expansions/collapses. Clear loading indicators.
**5. DATA MODEL:**
- **Configuration State:** An object to hold the current configuration content, parsed dependencies, and optimization suggestions.
```javascript
{
id: string; // Unique ID for the configuration session
originalContent: string;
processedContent: string;
dependencies: Array<{ name: string; line: number; type: 'external' | 'built-in'; suggestion?: string; }>;
optimizations: Array<{ original: string; replacedWith: string; line: number; }>;
selfSufficiencyScore: number;
createdAt: string; // ISO date string
}
```
- **History State:** An array of `ConfigurationState` objects, representing saved versions.
- **User Preferences:** An object for UI settings (e.g., theme, font size) stored in localStorage.
**6. COMPONENT BREAKDOWN:**
- **`App.jsx`:** Main application component, sets up routing and global layout.
- **`Header.jsx`:** Top navigation bar (App title, maybe user profile placeholder).
- **`Sidebar.jsx`:** Left-hand navigation panel (Upload, Editor, History, Settings links).
- **`CodeEditor.jsx`:**
- Props: `initialValue`, `onChange`, `language` (e.g., 'elisp', 'vimscript').
- Responsibilities: Renders a code editor (e.g., using Monaco Editor or CodeMirror) for inputting/editing configurations.
- **`FileUpload.jsx`:**
- Props: `onFileSelect`.
- Responsibilities: Handles file input for uploading configuration files.
- **`DependencyList.jsx`:**
- Props: `dependencies` (array).
- Responsibilities: Displays the list of detected external dependencies.
- **`OptimizationSuggestions.jsx`:**
- Props: `suggestions` (array), `onAccept`.
- Responsibilities: Shows optimization suggestions and allows users to accept them.
- **`ConfigManager.jsx`:**
- Props: `currentConfig`, `onSave`, `onRevert`.
- Responsibilities: Handles saving configurations and managing versions.
- **`ReportCard.jsx`:**
- Props: `score`, `dependencyCount`, `optimizationCount`.
- Responsibilities: Displays summary statistics and the self-sufficiency score.
**7. ANIMATIONS & INTERACTIONS:**
- **Hover Effects:** Subtle background color changes or slight scaling on interactive elements (buttons, links, list items).
- **Transitions:** Smooth transitions for sidebar collapsing/expanding, modal popups, and content area changes. Use Tailwind CSS's transition utilities.
- **Loading States:** Use skeleton loaders or simple spinners (e.g., using `react-spinners`) when processing configuration uploads or fetching data (if APIs were involved).
- **Micro-interactions:** Visual feedback when adding/removing items, accepting/rejecting suggestions (e.g., a brief highlight or animation).
**8. EDGE CASES:**
- **Empty State:** Display informative messages when there are no configurations loaded, no dependencies found, or no history available.
- **Error Handling:** Gracefully handle file upload errors, parsing errors (e.g., malformed config files), and display user-friendly error messages.
- **Validation:** Implement basic validation for file types. For syntax highlighting and potential basic linting, rely on the chosen code editor library.
- **Accessibility (a11y):** Ensure proper ARIA attributes, keyboard navigation support, sufficient color contrast, and semantic HTML structure.
- **Large Configurations:** Consider performance implications when handling very large configuration files. Debounce editor input and optimize parsing logic.
**9. SAMPLE DATA:**
- **Mock Configuration (Emacs Elisp):**
```elisp
;; init.el - Emacs Solo v2.0
;; No external packages
(require 'package)
(add-to-list 'package-archives '("melpa" . "http://melpa.org/packages/"))
(package-initialize)
;; Example of a package that should be flagged
(use-package which-key
:ensure t
:config
(which-key-mode))
;; Built-in functionality example
(global-set-key (kbd "C-c C-f") 'find-file)
;; Custom module example
(load-file "lisp/my-custom-module.el")
```
- **Mock Dependency Object:**
```javascript
{
name: "which-key",
line: 15,
type: "external",
suggestion: "Consider using built-in keybinding navigation or a custom Elisp solution to display keybindings."
}
```
- **Mock Configuration State:**
```javascript
{
id: "cfg-12345",
originalContent: "(global-set-key (kbd \"C-c C-f\") 'find-file)\n(use-package which-key :ensure t)",
processedContent: "(global-set-key (kbd \"C-c C-f\") 'find-file)\n;; Original: (use-package which-key :ensure t)\n;; Suggestion: Replace with custom keybinding display logic.",
dependencies: [
{ name: "which-key", line: 2, type: "external", suggestion: "Consider using built-in keybinding navigation or a custom Elisp solution to display keybindings." }
],
optimizations: [
{ original: "(use-package which-key :ensure t)", replacedWith: ";; Original: (use-package which-key :ensure t)\n;; Suggestion: Replace with custom keybinding display logic.", line: 2 }
],
selfSufficiencyScore: 75,
createdAt: "2023-10-27T10:00:00Z"
}
```
- **Mock History Array:** An array containing multiple `ConfigurationState` objects.
**10. DEPLOYMENT NOTES:**
- **Build Tool:** Vite (`npm run build`).
- **Environment Variables:** Primarily use client-side logic. If an API is introduced, use `.env` files for `REACT_APP_API_URL` etc.
- **Performance Optimizations:** Code splitting (handled by Vite), memoization for expensive computations, efficient state updates, lazy loading components where appropriate.
- **Static Hosting:** The application can be deployed on static hosting platforms like Netlify, Vercel, or GitHub Pages.
- **HTTPS:** Always use HTTPS for deployment.
- **Caching:** Leverage browser caching for static assets.