Tauri 2.0 Project Text Editor with Syntax Highlighting

text-editor-v1/
├── src/                           # Frontend React application
│   ├── components/               # UI Components
│   │   ├── App.tsx              # Main application component
│   │   ├── Editor.tsx           # Monaco editor integration
│   │   ├── Tabs.tsx             # Tab management UI
│   │   ├── Sidebar.tsx          # Sidebar container
│   │   ├── FileTree.tsx         # File tree navigation
│   │   └── SettingsDialog.tsx   # Settings configuration
│   ├── store/                    # State management
│   │   └── useStore.ts          # Zustand store
│   ├── main.tsx                  # React entry point
│   └── index.css                 # Global styles
├── src-tauri/                     # Rust backend
│   ├── src/
│   │   ├── main.rs              # Backend entry & commands
│   │   └── lib.rs               # Library file
│   ├── capabilities/             # Tauri permissions
│   │   └── default.json         # File system permissions
│   ├── Cargo.toml               # Rust dependencies
│   └── tauri.conf.json          # Tauri configuration
├── package.json                   # Node dependencies
├── tsconfig.json                  # TypeScript config
├── tailwind.config.js            # TailwindCSS config
├── postcss.config.js             # PostCSS config
└── vite.config.ts                # Vite bundler config

# Create new Tauri project
npm create tauri-app@latest

# During setup, choose:
# Project name: text-editor-v1
# Package manager: npm
# UI template: React
# TypeScript: Yes

cd text-editor-v1

# Install all required dependencies
npm install @monaco-editor/react monaco-editor zustand lucide-react
npm install @tauri-apps/plugin-dialog @tauri-apps/plugin-fs
npm install @tauri-apps/plugin-shell @tauri-apps/plugin-opener

# Install TailwindCSS and dev dependencies
npm install -D tailwindcss@latest @tailwindcss/postcss postcss autoprefixer

// tailwind.config.js
export default {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

// postcss.config.js
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

[package]
name = "text-editor"
version = "0.1.0"
description = "Professional text editor built with Tauri 2.0"
authors = ["Your Name"]
edition = "2021"

[build-dependencies]
tauri-build = { version = "2", features = [] }

[dependencies]
tauri = { version = "2", features = ["config-json5", "protocol-asset"] }
tauri-plugin-opener = "2"
tauri-plugin-dialog = "2"
tauri-plugin-fs = "2"
tauri-plugin-shell = "2"
serde = { version = "1", features = ["derive"] }
serde_json = "1"

[lib]
name = "text_editor_lib"
crate-type = ["staticlib", "cdylib", "lib"]

// src-tauri/src/main.rs
// Prevents additional console window on Windows in release
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

use tauri::Manager;
use std::fs;
use serde::{Deserialize, Serialize};

#[derive(Debug, Serialize, Deserialize)]
struct RecentFiles {
    files: Vec<String>,
}

// Get the path where recent files are stored
fn get_recent_files_path(app: &tauri::AppHandle) -> std::path::PathBuf {
    app.path().app_data_dir()
        .expect("Failed to get app data dir")
        .join("recent_files.json")
}

// Get list of recently opened files
#[tauri::command]
fn get_recent_files(app: tauri::AppHandle) -> Vec<String> {
    let path = get_recent_files_path(&app);
    if !path.exists() {
        return Vec::new();
    }

    match fs::read_to_string(&path) {
        Ok(content) => serde_json::from_str::<RecentFiles>(&content)
            .map(|data| data.files)
            .unwrap_or_default(),
        Err(_) => Vec::new(),
    }
}

// Add a file to recent files list
#[tauri::command]
fn add_recent_file(app: tauri::AppHandle, path: String) -> Result<(), String> {
    let recent_path = get_recent_files_path(&app);

    // Create directory if it doesn't exist
    if let Some(parent) = recent_path.parent() {
        fs::create_dir_all(parent)
            .map_err(|e| format!("Failed to create directory: {}", e))?;
    }

    // Get existing files and update list
    let mut files = get_recent_files(app.clone());
    files.retain(|f| f != &path);
    files.insert(0, path);
    files.truncate(10); // Keep only last 10 files

    // Save updated list
    let json = serde_json::to_string_pretty(&RecentFiles { files })
        .map_err(|e| format!("Serialization error: {}", e))?;

    fs::write(&recent_path, json)
        .map_err(|e| format!("Write error: {}", e))?;

    Ok(())
}

fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .plugin(tauri_plugin_dialog::init())
        .plugin(tauri_plugin_fs::init())
        .plugin(tauri_plugin_shell::init())
        .invoke_handler(tauri::generate_handler![
            get_recent_files,
            add_recent_file
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "Capability for the main window",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "opener:default",
    "dialog:default",
    "fs:allow-read-text-file",
    "fs:allow-write-text-file",
    "fs:allow-read-dir",
    "fs:allow-exists",
    "fs:allow-home-read-recursive",
    "fs:allow-home-write-recursive",
    "fs:allow-desktop-read-recursive",
    "fs:allow-desktop-write-recursive",
    "fs:allow-document-read-recursive",
    "fs:allow-document-write-recursive",
    "shell:default"
  ]
}

{
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "Text Editor",
  "version": "0.1.0",
  "identifier": "com.codershandbook.texteditor",
  "build": {
    "beforeDevCommand": "npm run dev",
    "devUrl": "http://localhost:1420",
    "beforeBuildCommand": "npm run build",
    "frontendDist": "../dist"
  },
  "app": {
    "windows": [
      {
        "title": "Text Editor - Coders Handbook",
        "width": 1200,
        "height": 800,
        "minWidth": 800,
        "minHeight": 600
      }
    ],
    "security": {
      "csp": null
    }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/[email protected]",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

// src/store/useStore.ts
import { create } from 'zustand';
import { invoke } from '@tauri-apps/api/core';
import { open, save } from '@tauri-apps/plugin-dialog';
import { readTextFile, writeTextFile } from '@tauri-apps/plugin-fs';

export interface FileTab {
  id: string;
  path: string;
  name: string;
  content: string;
  language: string;
  isDirty: boolean;
}

export interface EditorSettings {
  fontSize: number;
  tabSize: number;
  wordWrap: boolean;
  lineNumbers: boolean;
  minimap: boolean;
  autoSave: boolean;
  autoSaveInterval: number;
}

export interface StoreState {
  tabs: FileTab[];
  activeTabId: string | null;
  theme: 'dark' | 'light';
  sidebarOpen: boolean;
  sidebarTab: 'files' | 'recent';
  recentFiles: string[];
  settingsOpen: boolean;
  settings: EditorSettings;

  // Actions
  initializeApp: () => Promise<void>;
  openFile: () => Promise<void>;
  openFileByPath: (path: string) => Promise<void>;
  createNewFile: () => void;
  saveFile: () => Promise<void>;
  saveFileAs: () => Promise<void>;
  closeTab: (id: string) => void;
  updateTabContent: (id: string, content: string) => void;
  updateTabLanguage: (id: string, language: string) => void;
  setActiveTabId: (id: string) => void;
  toggleTheme: () => void;
  updateSettings: (settings: Partial<EditorSettings>) => void;
  toggleSettings: () => void;
  setSidebarTab: (tab: 'files' | 'recent') => void;
  toggleSidebar: () => void;
}

// Language mapping for syntax highlighting
export const LANGUAGE_MAP: Record<string, string> = {
  js: 'javascript', ts: 'typescript', tsx: 'typescript', jsx: 'javascript',
  py: 'python', rs: 'rust', go: 'go', java: 'java',
  html: 'html', css: 'css', json: 'json', md: 'markdown',
  yml: 'yaml', yaml: 'yaml', toml: 'toml',
  c: 'c', cpp: 'cpp', cs: 'csharp', sh: 'shell',
  sql: 'sql', xml: 'xml', php: 'php', rb: 'ruby',
  swift: 'swift', kt: 'kotlin', dart: 'dart',
};

const getLanguageFromPath = (path: string): string => {
  const ext = path.split('.').pop()?.toLowerCase() || '';
  return LANGUAGE_MAP[ext] || 'plaintext';
};

export const useStore = create<StoreState>((set, get) => ({
  tabs: [],
  activeTabId: null,
  theme: 'dark',
  sidebarOpen: true,
  sidebarTab: 'files',
  recentFiles: [],
  settingsOpen: false,
  settings: {
    fontSize: 14,
    tabSize: 2,
    wordWrap: true,
    lineNumbers: true,
    minimap: true,
    autoSave: false,
    autoSaveInterval: 5000,
  },

  initializeApp: async () => {
    try {
      const recent = await invoke<string[]>('get_recent_files');
      set({ recentFiles: recent });
    } catch (err) {
      console.error('Failed to initialize app:', err);
    }
  },

  openFile: async () => {
    const selected = await open({
      multiple: false,
      filters: [{ name: 'All Files', extensions: ['*'] }],
    });

    if (selected && typeof selected === 'string') {
      await get().openFileByPath(selected);
    }
  },

  openFileByPath: async (path: string) => {
    const existing = get().tabs.find((t) => t.path === path);
    if (existing) {
      set({ activeTabId: existing.id });
      return;
    }

    try {
      const content = await readTextFile(path);
      const name = path.split(/[\\/]/).pop() || 'untitled';

      const newTab: FileTab = {
        id: Date.now().toString(),
        path,
        name,
        content,
        language: getLanguageFromPath(path),
        isDirty: false,
      };

      set((state) => ({
        tabs: [...state.tabs, newTab],
        activeTabId: newTab.id,
        recentFiles: [path, ...state.recentFiles.filter((f) => f !== path)].slice(0, 10),
      }));

      await invoke('add_recent_file', { path });
    } catch (err) {
      console.error('Failed to open file:', err);
    }
  },

  createNewFile: () => {
    const newTab: FileTab = {
      id: Date.now().toString(),
      path: 'untitled',
      name: 'Untitled',
      content: '',
      language: 'plaintext',
      isDirty: false,
    };

    set((state) => ({
      tabs: [...state.tabs, newTab],
      activeTabId: newTab.id,
    }));
  },

  saveFile: async () => {
    const { tabs, activeTabId } = get();
    const tab = tabs.find((t) => t.id === activeTabId);
    if (!tab) return;

    if (tab.path === 'untitled') {
      await get().saveFileAs();
      return;
    }

    try {
      await writeTextFile(tab.path, tab.content);
      set((state) => ({
        tabs: state.tabs.map((t) =>
          t.id === activeTabId ? { ...t, isDirty: false } : t
        ),
      }));
    } catch (err) {
      console.error('Failed to save file:', err);
    }
  },

  saveFileAs: async () => {
    const { tabs, activeTabId } = get();
    const tab = tabs.find((t) => t.id === activeTabId);
    if (!tab) return;

    const selected = await save({
      defaultPath: tab.name === 'Untitled' ? undefined : tab.path,
    });

    if (selected) {
      try {
        await writeTextFile(selected, tab.content);
        const name = selected.split(/[\\/]/).pop() || 'untitled';

        set((state) => ({
          tabs: state.tabs.map((t) =>
            t.id === activeTabId
              ? { ...t, path: selected, name, isDirty: false, language: getLanguageFromPath(selected) }
              : t
          ),
          recentFiles: [selected, ...state.recentFiles.filter((f) => f !== selected)].slice(0, 10),
        }));

        await invoke('add_recent_file', { path: selected });
      } catch (err) {
        console.error('Failed to save file as:', err);
      }
    }
  },

  closeTab: (id: string) => {
    const { tabs, activeTabId } = get();
    const newTabs = tabs.filter((t) => t.id !== id);
    let newActiveId = activeTabId;

    if (activeTabId === id) {
      newActiveId = newTabs.length > 0 ? newTabs[newTabs.length - 1].id : null;
    }

    set({ tabs: newTabs, activeTabId: newActiveId });
  },

  updateTabContent: (id: string, content: string) => {
    set((state) => ({
      tabs: state.tabs.map((t) =>
        t.id === id ? { ...t, content, isDirty: true } : t
      ),
    }));
  },

  updateTabLanguage: (id: string, language: string) => {
    set((state) => ({
      tabs: state.tabs.map((t) =>
        t.id === id ? { ...t, language } : t
      ),
    }));
  },

  setActiveTabId: (id: string) => {
    set({ activeTabId: id });
  },

  toggleTheme: () => {
    set((state) => ({ theme: state.theme === 'dark' ? 'light' : 'dark' }));
  },

  updateSettings: (newSettings: Partial<EditorSettings>) => {
    set((state) => ({
      settings: { ...state.settings, ...newSettings },
    }));
  },

  toggleSettings: () => {
    set((state) => ({ settingsOpen: !state.settingsOpen }));
  },

  setSidebarTab: (tab: 'files' | 'recent') => {
    set({ sidebarTab: tab });
  },

  toggleSidebar: () => {
    set((state) => ({ sidebarOpen: !state.sidebarOpen }));
  },
}));

// src/components/Editor.tsx
import { useEffect, useRef } from 'react';
import MonacoEditor, { OnMount } from '@monaco-editor/react';
import { useStore } from '../store/useStore';
import { Code2, Hash, Sparkles } from 'lucide-react';

export default function Editor() {
  const { tabs, activeTabId, updateTabContent, theme, settings, saveFile } = useStore();
  const activeTab = tabs.find((t) => t.id === activeTabId);
  const editorRef = useRef<any>(null);

  const handleEditorDidMount: OnMount = (editor, monaco) => {
    editorRef.current = editor;

    // Add Ctrl+S keyboard shortcut
    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
      saveFile();
    });

    // Custom dark theme to match app design
    monaco.editor.defineTheme('custom-dark', {
      base: 'vs-dark',
      inherit: true,
      rules: [
        { token: 'comment', foreground: '6272a4', fontStyle: 'italic' },
        { token: 'keyword', foreground: 'ff79c6', fontStyle: 'bold' },
        { token: 'string', foreground: '50fa7b' },
        { token: 'variable', foreground: 'f8f8f2' },
        { token: 'type', foreground: '8be9fd', fontStyle: 'bold' },
        { token: 'function', foreground: 'bd93f9' },
        { token: 'number', foreground: 'bd93f9' },
      ],
      colors: {
        'editor.background': '#0b101e',
        'editor.lineHighlightBackground': '#1e293b50',
        'editorCursor.foreground': '#3b82f6',
        'editor.selectionBackground': '#3b82f640',
        'editor.inactiveSelectionBackground': '#3b82f620',
        'editorLineNumber.foreground': '#475569',
        'editorLineNumber.activeForeground': '#3b82f6',
        'editorIndentGuide.background': '#ffffff10',
        'editorIndentGuide.activeBackground': '#ffffff20',
      },
    });

    // Custom light theme
    monaco.editor.defineTheme('custom-light', {
      base: 'vs',
      inherit: true,
      rules: [
        { token: 'comment', foreground: '94a3b8', fontStyle: 'italic' },
        { token: 'keyword', foreground: 'd946ef', fontStyle: 'bold' },
        { token: 'string', foreground: '10b981' },
        { token: 'variable', foreground: '1e293b' },
        { token: 'type', foreground: '0ea5e9', fontStyle: 'bold' },
        { token: 'function', foreground: '8b5cf6' },
      ],
      colors: {
        'editor.background': '#f8fafc',
        'editor.lineHighlightBackground': '#f1f5f9',
        'editorCursor.foreground': '#3b82f6',
        'editor.selectionBackground': '#3b82f630',
        'editorLineNumber.foreground': '#cbd5e1',
        'editorLineNumber.activeForeground': '#3b82f6',
      },
    });

    editor.focus();
  };

  useEffect(() => {
    if (editorRef.current) {
      editorRef.current.focus();
    }
  }, [activeTabId]);

  if (!activeTab) {
    return (
      <div className="flex-1 flex flex-col items-center justify-center bg-slate-50 dark:bg-slate-900 p-8">
        <div className="max-w-md text-center space-y-6">
          <Code2 className="w-16 h-16 mx-auto text-blue-500" />
          <h2 className="text-2xl font-bold text-slate-800 dark:text-slate-100">
            Ready to Build Something?
          </h2>
          <p className="text-slate-600 dark:text-slate-400">
            Open a file or create a new one to start writing code.
            All your work is handled securely with Tauri 2.0.
          </p>
          <div className="space-y-3 text-sm">
            <ShortcutItem icon={<FilePlus />} label="New File" keybind="Ctrl+N" />
            <ShortcutItem icon={<FolderOpen />} label="Open File" keybind="Ctrl+O" />
            <ShortcutItem icon={<SettingsIcon />} label="Settings" keybind="Ctrl+," />
            <ShortcutItem icon={<Moon />} label="App Theme" keybind="Alt+T" />
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="flex-1 relative">
      <MonacoEditor
        height="100%"
        language={activeTab.language}
        value={activeTab.content}
        theme={theme === 'dark' ? 'custom-dark' : 'custom-light'}
        onChange={(value) => updateTabContent(activeTab.id, value || '')}
        onMount={handleEditorDidMount}
        options={{
          fontSize: settings.fontSize,
          tabSize: settings.tabSize,
          wordWrap: settings.wordWrap ? 'on' : 'off',
          lineNumbers: settings.lineNumbers ? 'on' : 'off',
          minimap: { enabled: settings.minimap },
          automaticLayout: true,
          scrollBeyondLastLine: false,
          padding: { top: 20 },
          fontFamily: "'Fira Code', 'Cascadia Code', Consolas, monospace",
          fontLigatures: true,
          smoothScrolling: true,
          cursorSmoothCaretAnimation: 'on',
          cursorBlinking: 'smooth',
          renderLineHighlight: 'all',
        }}
      />

      {/* Unsaved Changes Indicator */}
      {activeTab.isDirty && (
        <div className="absolute top-4 right-4 bg-yellow-500/90 text-white px-3 py-1 rounded-full text-sm font-medium shadow-lg">
          Unsaved Changes
        </div>
      )}
    </div>
  );
}

function ShortcutItem({ icon, label, keybind }: { icon: any; label: string; keybind: string }) {
  return (
    <div className="flex items-center justify-between p-2 rounded-lg bg-slate-100 dark:bg-slate-800">
      <div className="flex items-center gap-2">
        <span className="text-blue-500">{icon}</span>
        <span className="text-slate-700 dark:text-slate-300">{label}</span>
      </div>
      <kbd className="px-2 py-1 text-xs rounded bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-400">
        {keybind}
      </kbd>
    </div>
  );
}

// src/components/Tabs.tsx
import { X, FileCode2 } from 'lucide-react';
import { useStore } from '../store/useStore';

export default function Tabs() {
  const { tabs, activeTabId, setActiveTabId, closeTab } = useStore();

  if (tabs.length === 0) return null;

  return (
    <div className="flex items-center gap-1 overflow-x-auto bg-slate-100 dark:bg-slate-900 border-b border-slate-300 dark:border-slate-700 px-2 py-1">
      {tabs.map((tab) => (
        <div
          key={tab.id}
          onClick={() => setActiveTabId(tab.id)}
          className={`
            group flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer
            transition-all duration-200 min-w-[120px] max-w-[200px]
            \${activeTabId === tab.id
              ? 'bg-white dark:bg-slate-800 shadow-md text-blue-600 dark:text-blue-400 active-tab-glow'
              : 'hover:bg-slate-200 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-400'
            }
          `}
        >
          <FileCode2 className="w-4 h-4 flex-shrink-0" />
          <span className="truncate text-sm font-medium">
            {tab.name}
            {tab.isDirty && '*'}
          </span>
          <button
            onClick={(e) => {
              e.stopPropagation();
              closeTab(tab.id);
            }}
            className="ml-auto flex-shrink-0 p-0.5 rounded hover:bg-red-100 dark:hover:bg-red-900/30 
                       hover:text-red-600 dark:hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
          >
            <X className="w-3.5 h-3.5" />
          </button>
        </div>
      ))}
    </div>
  );
}

// src/components/FileTree.tsx
import { useState } from 'react';
import { ChevronRight, ChevronDown, FileCode2, Folder, FolderOpen, FolderPlus } from 'lucide-react';
import { readDir } from '@tauri-apps/plugin-fs';
import { open } from '@tauri-apps/plugin-dialog';
import { useStore } from '../store/useStore';

interface FileNode {
  name: string;
  path: string;
  isDir: boolean;
}

function FileTreeItem({ 
  node, 
  level, 
  onFileClick 
}: {
  node: FileNode;
  level: number;
  onFileClick: (path: string) => void;
}) {
  const [isExpanded, setIsExpanded] = useState(false);
  const [children, setChildren] = useState<FileNode[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  const loadChildren = async () => {
    if (!node.isDir || children.length > 0) return;
    setIsLoading(true);

    try {
      const entries = await readDir(node.path);
      const nodes = entries
        .map((e) => ({
          name: e.name || '',
          path: `\${node.path}/\${e.name}`,
          isDir: e.isDirectory || false,
        }))
        .sort((a, b) => {
          if (a.isDir === b.isDir) return a.name.localeCompare(b.name);
          return a.isDir ? -1 : 1;
        });
      setChildren(nodes);
    } catch (err) {
      console.error(err);
    } finally {
      setIsLoading(false);
    }
  };

  const handleClick = async () => {
    if (node.isDir) {
      setIsExpanded(!isExpanded);
      if (!isExpanded && !children.length) await loadChildren();
    } else {
      onFileClick(node.path);
    }
  };

  return (
    <div>
      <div
        onClick={handleClick}
        style={{ paddingLeft: `\${level * 12 + 8}px` }}
        className="flex items-center gap-2 px-2 py-1.5 hover:bg-slate-200 dark:hover:bg-slate-700 
                   cursor-pointer text-sm transition-colors rounded"
      >
        {node.isDir ? (
          isLoading ? (
            <div className="w-4 h-4 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
          ) : isExpanded ? (
            <ChevronDown className="w-4 h-4 text-slate-500" />
          ) : (
            <ChevronRight className="w-4 h-4 text-slate-500" />
          )
        ) : null}

        {node.isDir ? (
          isExpanded ? <FolderOpen className="w-4 h-4 text-blue-500" /> : <Folder className="w-4 h-4 text-blue-500" />
        ) : (
          <FileCode2 className="w-4 h-4 text-slate-400" />
        )}

        <span className="truncate text-slate-700 dark:text-slate-300">{node.name}</span>
      </div>

      {isExpanded && (
        <div>
          {children.map((c) => (
            <FileTreeItem key={c.path} node={c} level={level + 1} onFileClick={onFileClick} />
          ))}
        </div>
      )}
    </div>
  );
}

export default function FileTree() {
  const [rootNode, setRootNode] = useState<FileNode | null>(null);
  const openFileByPath = useStore((s) => s.openFileByPath);

  const handleOpenFolder = async () => {
    const selected = await open({
      directory: true,
      multiple: false,
    });

    if (selected && typeof selected === 'string') {
      const path = selected;
      setRootNode({
        name: path.split(/[\\/]/).pop() || 'Folder',
        path,
        isDir: true,
      });
    }
  };

  return (
    <div className="flex flex-col h-full">
      <div className="flex items-center justify-between p-3 border-b border-slate-300 dark:border-slate-700">
        <h3 className="font-semibold text-sm text-slate-700 dark:text-slate-300">Workspace</h3>
        <button
          onClick={handleOpenFolder}
          className="btn-icon"
          title="Open Folder"
        >
          <FolderPlus className="w-4 h-4" />
        </button>
      </div>

      {rootNode ? (
        <div className="flex-1 overflow-y-auto p-2">
          <FileTreeItem node={rootNode} level={0} onFileClick={openFileByPath} />
        </div>
      ) : (
        <div className="flex-1 flex flex-col items-center justify-center p-6 text-center">
          <Folder className="w-12 h-12 text-slate-300 dark:text-slate-600 mb-3" />
          <p className="text-sm text-slate-500 dark:text-slate-400">Workspace Empty</p>
          <p className="text-xs text-slate-400 dark:text-slate-500 mt-1">
            Open a folder to start managing your project files.
          </p>
        </div>
      )}
    </div>
  );
}

// src/components/Sidebar.tsx
import { FileText, History, X } from 'lucide-react';
import { useStore } from '../store/useStore';
import FileTree from './FileTree';

export default function Sidebar() {
  const { sidebarOpen, toggleSidebar, sidebarTab, recentFiles, openFileByPath } = useStore();

  if (!sidebarOpen) return null;

  return (
    <div className="w-64 bg-slate-100 dark:bg-slate-900 border-r border-slate-300 dark:border-slate-700 flex flex-col">
      {/* Sidebar Header */}
      <div className="flex items-center justify-between p-3 border-b border-slate-300 dark:border-slate-700">
        <h2 className="font-semibold text-slate-800 dark:text-slate-200">Explorer</h2>
        <button onClick={toggleSidebar} className="btn-icon" title="Close Sidebar">
          <X className="w-4 h-4" />
        </button>
      </div>

      {/* Tab Selector */}
      <div className="flex border-b border-slate-300 dark:border-slate-700">
        <SidebarTabButton
          icon={<FileText className="w-4 h-4" />}
          label="Files"
          active={sidebarTab === 'files'}
          onClick={() => useStore.setState({ sidebarTab: 'files' })}
        />
        <SidebarTabButton
          icon={<History className="w-4 h-4" />}
          label="Recent"
          active={sidebarTab === 'recent'}
          onClick={() => useStore.setState({ sidebarTab: 'recent' })}
        />
      </div>

      {/* Content */}
      <div className="flex-1 overflow-hidden">
        {sidebarTab === 'files' ? (
          <FileTree />
        ) : (
          <div className="p-3 space-y-1">
            {recentFiles.length === 0 ? (
              <div className="text-center py-8">
                <History className="w-12 h-12 mx-auto text-slate-300 dark:text-slate-600 mb-2" />
                <p className="text-sm text-slate-500 dark:text-slate-400">No Recent Files</p>
              </div>
            ) : (
              recentFiles.map((file) => (
                <button
                  key={file}
                  onClick={() => openFileByPath(file)}
                  className="w-full text-left px-3 py-2 text-sm rounded hover:bg-slate-200 
                             dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 truncate"
                  title={file}
                >
                  {file.split(/[\\/]/).pop()}
                </button>
              ))
            )}
          </div>
        )}
      </div>
    </div>
  );
}

function SidebarTabButton({ 
  icon, 
  label, 
  active, 
  onClick 
}: { 
  icon: React.ReactNode; 
  label: string; 
  active: boolean; 
  onClick: () => void;
}) {
  return (
    <button
      onClick={onClick}
      className={`
        flex-1 flex items-center justify-center gap-2 py-2 text-sm font-medium
        transition-colors border-b-2
        \${active 
          ? 'border-blue-500 text-blue-600 dark:text-blue-400 bg-white dark:bg-slate-800' 
          : 'border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'
        }
      `}
    >
      {icon}
      <span>{label}</span>
    </button>
  );
}

// src/components/SettingsDialog.tsx
import { X, Keyboard, Type, Layout, Save, Settings } from 'lucide-react';
import { useStore } from '../store/useStore';

export default function SettingsDialog() {
  const { settingsOpen, toggleSettings, settings, updateSettings } = useStore();

  if (!settingsOpen) return null;

  const editorOptions = [
    {
      label: 'Font Size',
      value: settings.fontSize,
      onChange: (value: number) => updateSettings({ fontSize: value }),
      type: 'number',
      min: 10,
      max: 24,
      desc: 'Editor font size in pixels',
      icon: <Type className="w-5 h-5" />,
    },
    {
      label: 'Tab Size',
      value: settings.tabSize,
      onChange: (value: number) => updateSettings({ tabSize: value }),
      type: 'number',
      min: 2,
      max: 8,
      desc: 'Number of spaces for tab indentation',
      icon: <Layout className="w-5 h-5" />,
    },
  ];

  const toggleOptions = [
    {
      label: 'Word Wrap',
      value: settings.wordWrap,
      onChange: (value: boolean) => updateSettings({ wordWrap: value }),
      desc: 'Wrap long lines to fit window',
    },
    {
      label: 'Line Numbers',
      value: settings.lineNumbers,
      onChange: (value: boolean) => updateSettings({ lineNumbers: value }),
      desc: 'Show line numbers in editor gutter',
    },
    {
      label: 'Minimap',
      value: settings.minimap,
      onChange: (value: boolean) => updateSettings({ minimap: value }),
      desc: 'Display code overview minimap',
    },
    {
      label: 'Auto Save',
      value: settings.autoSave,
      onChange: (value: boolean) => updateSettings({ autoSave: value }),
      desc: 'Automatically save changes after a set delay',
    },
  ];

  const shortcuts = [
    { key: 'Ctrl+N', action: 'New File' },
    { key: 'Ctrl+O', action: 'Open File' },
    { key: 'Ctrl+S', action: 'Save File' },
    { key: 'Ctrl+Shift+S', action: 'Save As' },
    { key: 'Ctrl+W', action: 'Close Tab' },
    { key: 'Ctrl+,', action: 'Settings' },
    { key: 'Alt+T', action: 'Toggle Theme' },
    { key: 'Ctrl+B', action: 'Toggle Sidebar' },
  ];

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <div className="bg-white dark:bg-slate-800 rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b border-slate-200 dark:border-slate-700">
          <div className="flex items-center gap-3">
            <Settings className="w-6 h-6 text-blue-500" />
            <h2 className="text-2xl font-bold text-slate-800 dark:text-slate-100">Settings</h2>
          </div>
          <button onClick={toggleSettings} className="btn-icon">
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Content */}
        <div className="overflow-y-auto max-h-[calc(90vh-140px)] p-6 space-y-8">
          {/* Editor Settings */}
          <section>
            <h3 className="text-lg font-semibold text-slate-700 dark:text-slate-300 mb-4">
              Editor Configuration
            </h3>
            <p className="text-sm text-slate-500 dark:text-slate-400 mb-4">
              Configure your workspace
            </p>
            <div className="space-y-4">
              {editorOptions.map((opt) => (
                <div
                  key={opt.label}
                  className="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-900 rounded-lg"
                >
                  <div className="flex items-center gap-3 flex-1">
                    <span className="text-blue-500">{opt.icon}</span>
                    <div>
                      <label className="font-medium text-slate-700 dark:text-slate-300">
                        {opt.label}
                      </label>
                      <p className="text-xs text-slate-500 dark:text-slate-400">{opt.desc}</p>
                    </div>
                  </div>
                  <input
                    type={opt.type}
                    value={opt.value}
                    onChange={(e) => opt.onChange(Number(e.target.value))}
                    min={opt.min}
                    max={opt.max}
                    className="w-20 px-3 py-2 bg-white dark:bg-slate-800 border border-slate-300 
                               dark:border-slate-600 rounded-lg text-slate-700 dark:text-slate-300"
                  />
                </div>
              ))}
            </div>
          </section>

          {/* Toggle Options */}
          <section>
            <h3 className="text-lg font-semibold text-slate-700 dark:text-slate-300 mb-4">
              Display Options
            </h3>
            <div className="space-y-3">
              {toggleOptions.map((opt) => (
                <div
                  key={opt.label}
                  className="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-900 rounded-lg"
                >
                  <div>
                    <label className="font-medium text-slate-700 dark:text-slate-300">
                      {opt.label}
                    </label>
                    <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">{opt.desc}</p>
                  </div>
                  <button
                    onClick={() => opt.onChange(!opt.value)}
                    className={"relative inline-flex h-6 w-11 items-center rounded-full transition-colors " + 
                               (opt.value ? "bg-blue-500" : "bg-slate-300 dark:bg-slate-600")}
                  >
                    <span
                      className={"inline-block h-4 w-4 transform rounded-full bg-white transition-transform " + 
                                 (opt.value ? "translate-x-6" : "translate-x-1")}
                    />
                  </button>
                </div>
              ))}
            </div>
          </section>

          {/* Keyboard Shortcuts */}
          <section>
            <h3 className="text-lg font-semibold text-slate-700 dark:text-slate-300 mb-4 flex items-center gap-2">
              <Keyboard className="w-5 h-5" />
              Keyboard Shortcuts
            </h3>
            <div className="bg-slate-50 dark:bg-slate-900 rounded-lg p-4">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-slate-200 dark:border-slate-700">
                    <th className="text-left pb-2 text-slate-600 dark:text-slate-400">Shortcut</th>
                    <th className="text-left pb-2 text-slate-600 dark:text-slate-400">Action</th>
                  </tr>
                </thead>
                <tbody>
                  {shortcuts.map((s) => (
                    <tr key={s.key} className="border-b border-slate-100 dark:border-slate-800 last:border-0">
                      <td className="py-2">
                        <kbd className="px-2 py-1 bg-white dark:bg-slate-800 border border-slate-300 
                                       dark:border-slate-600 rounded text-slate-700 dark:text-slate-300">
                          {s.key}
                        </kbd>
                      </td>
                      <td className="py-2 text-slate-600 dark:text-slate-400">{s.action}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </section>
        </div>

        {/* Footer */}
        <div className="flex justify-end gap-3 p-6 border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50">
          <button
            onClick={toggleSettings}
            className="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg 
                       font-medium transition-colors shadow-md"
          >
            Done
          </button>
        </div>
      </div>
    </div>
  );
}

// src/App.tsx
import { useEffect } from 'react';
import Sidebar from './components/Sidebar';
import Tabs from './components/Tabs';
import Editor from './components/Editor';
import SettingsDialog from './components/SettingsDialog';
import { useStore } from './store/useStore';
import {
  Files, History, Settings as SettingsIcon, Moon, Sun,
  FolderOpen, FilePlus, Save, ChevronLeft, ChevronRight
} from 'lucide-react';

function App() {
  const {
    theme,
    initializeApp,
    toggleSettings,
    createNewFile,
    openFile,
    saveFile,
    sidebarOpen,
    toggleSidebar,
    sidebarTab,
    setSidebarTab,
    toggleTheme,
  } = useStore();

  // Initialize app on mount
  useEffect(() => {
    initializeApp();
  }, [initializeApp]);

  // Apply theme to document
  useEffect(() => {
    document.documentElement.classList.toggle('dark', theme === 'dark');
  }, [theme]);

  // Global keyboard shortcuts
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.ctrlKey || e.metaKey) {
        switch (e.key.toLowerCase()) {
          case 'n':
            e.preventDefault();
            createNewFile();
            break;
          case 'o':
            e.preventDefault();
            openFile();
            break;
          case 's':
            e.preventDefault();
            saveFile();
            break;
          case ',':
            e.preventDefault();
            toggleSettings();
            break;
          case 'b':
            e.preventDefault();
            toggleSidebar();
            break;
        }
      } else if (e.altKey && e.key.toLowerCase() === 't') {
        e.preventDefault();
        toggleTheme();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [createNewFile, openFile, saveFile, toggleSettings, toggleSidebar, toggleTheme]);

  return (
    <div className="flex flex-col h-screen bg-slate-50 dark:bg-slate-900">
      {/* Toolbar */}
      <div className="flex items-center justify-between px-4 py-2 bg-white dark:bg-slate-800 
                      border-b border-slate-200 dark:border-slate-700 shadow-sm">
        <div className="flex items-center gap-2">
          {/* Sidebar Toggle */}
          <button
            onClick={toggleSidebar}
            className="btn-icon"
            title="Toggle Sidebar (Ctrl+B)"
          >
            {sidebarOpen ? <ChevronLeft className="w-5 h-5" /> : <ChevronRight className="w-5 h-5" />}
          </button>

          {/* File Actions */}
          <div className="flex items-center gap-1 border-l border-slate-200 dark:border-slate-700 pl-2 ml-2">
            <button
              onClick={createNewFile}
              className="btn-icon"
              title="New File (Ctrl+N)"
            >
              <FilePlus className="w-5 h-5" />
            </button>
            <button
              onClick={openFile}
              className="btn-icon"
              title="Open File (Ctrl+O)"
            >
              <FolderOpen className="w-5 h-5" />
            </button>
            <button
              onClick={saveFile}
              className="btn-icon"
              title="Save File (Ctrl+S)"
            >
              <Save className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* App Title */}
        <div className="absolute left-1/2 transform -translate-x-1/2">
          <h1 className="text-lg font-bold bg-gradient-to-r from-blue-600 to-purple-600 
                         bg-clip-text text-transparent">
            Text Editor
          </h1>
        </div>

        {/* Right Actions */}
        <div className="flex items-center gap-2">
          <button
            onClick={toggleTheme}
            className="btn-icon"
            title="Toggle Theme (Alt+T)"
          >
            {theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
          </button>
          <button
            onClick={toggleSettings}
            className="btn-icon"
            title="Settings (Ctrl+,)"
          >
            <SettingsIcon className="w-5 h-5" />
          </button>
        </div>
      </div>

      {/* Main Content */}
      <div className="flex flex-1 overflow-hidden">
        <Sidebar />

        <div className="flex-1 flex flex-col overflow-hidden">
          <Tabs />
          <Editor />
        </div>
      </div>

      {/* Settings Dialog */}
      <SettingsDialog />
    </div>
  );
}

export default App;

/* src/index.css */
@import "tailwindcss";
@config "../tailwind.config.js";

/* Custom Design Tokens */
:root {
  --bg-app: #f8fafc;
  --bg-sidebar: #f1f5f9;
  --bg-toolbar: #ffffff;
  --border-color: #e2e8f0;
  --accent-color: #3b82f6;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.5);
}

.dark {
  --bg-app: #0f172a;
  --bg-sidebar: #1e293b;
  --bg-toolbar: #1e293b;
  --border-color: #334155;
  --accent-color: #60a5fa;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --glass-bg: rgba(30, 41, 59, 0.7);
  --glass-border: rgba(255, 255, 255, 0.05);
}

@layer base {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }

  body {
    background-color: var(--bg-app);
    color: var(--text-primary);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }

  /* Custom Scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
  }

  .dark ::-webkit-scrollbar-thumb {
    background: #475569;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }
}

@layer components {
  .glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
  }

  .transition-sidebar {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .btn-icon {
    @apply p-2 rounded-lg transition-all duration-200 
           hover:bg-gray-200/50 dark:hover:bg-slate-700/50 
           active:scale-90 text-slate-500 dark:text-slate-400 
           hover:text-blue-500 dark:hover:text-blue-400;
  }

  .active-tab-glow {
    box-shadow: 0 0 20px -5px var(--accent-color);
  }
}

/* Animations */
@keyframes slideInUp {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slideInUp 0.3s ease-out forwards;
}

#root {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* Monaco Editor Customizations */
.monaco-editor,
.monaco-editor .margin,
.monaco-editor-background {
  background-color: transparent !important;
}

// src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

{
  "name": "text-editor-v1",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "tauri": "tauri"
  },
  "dependencies": {
    "@monaco-editor/react": "^4.7.0",
    "@tailwindcss/postcss": "^4.1.18",
    "@tauri-apps/api": "^2",
    "@tauri-apps/plugin-dialog": "^2.6.0",
    "@tauri-apps/plugin-fs": "^2.4.5",
    "@tauri-apps/plugin-opener": "^2",
    "@tauri-apps/plugin-shell": "^2.3.4",
    "lucide-react": "^0.563.0",
    "monaco-editor": "^0.55.1",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "zustand": "^5.0.10"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^2",
    "@types/react": "^19.1.8",
    "@types/react-dom": "^19.1.6",
    "@vitejs/plugin-react": "^4.6.0",
    "autoprefixer": "^10.4.23",
    "postcss": "^8.5.6",
    "tailwindcss": "^4.1.18",
    "typescript": "~5.8.3",
    "vite": "^7.0.4"
  }
}

# Install all dependencies
npm install

# Run in development mode
npm run tauri dev

# The application will launch with:
# - Hot reload for frontend changes
# - Rust recompilation for backend changes
# - DevTools for debugging

# Test all features:
# 1. Create new file (Ctrl+N)
# 2. Open existing file (Ctrl+O)
# 3. Edit content with syntax highlighting
# 4. Save file (Ctrl+S)
# 5. Open folder in file tree
# 6. Switch between tabs
# 7. Toggle theme (Alt+T)
# 8. Open settings (Ctrl+,)
# 9. View recent files
# 10. Check keyboard shortcuts

# Build for production
npm run tauri build

# Build outputs:
# Windows: src-tauri/target/release/bundle/nsis/*.exe (installer)
#          src-tauri/target/release/text-editor.exe (portable)
# macOS:   src-tauri/target/release/bundle/dmg/*.dmg
#          src-tauri/target/release/bundle/macos/*.app
# Linux:   src-tauri/target/release/bundle/deb/*.deb
#          src-tauri/target/release/bundle/appimage/*.AppImage

# Build size comparison:
# - Tauri bundle: ~15-25 MB (includes WebView)
# - Electron equivalent: ~100-150 MB

# Distribution:
# 1. Windows: Distribute .exe or .msi installer
# 2. macOS: Distribute .dmg or .app bundle (may need code signing)
# 3. Linux: Distribute .deb, .AppImage, or .rpm

# Code signing (for macOS):
# - Requires Apple Developer Account
# - Configure in tauri.conf.json under bundle.macOS

# Update configuration:
# Edit src-tauri/tauri.conf.json for:
# - App name and identifier
# - Window dimensions
# - Icons (place in src-tauri/icons/)
# - Bundle settings