feat: Полный рефакторинг UI с Tailwind CSS и исправление сборки

Этот коммит представляет собой радикальное улучшение приложения, решающее как постоянные проблемы с версткой, так и критическую ошибку сборки.

- **Полный рефакторинг UI:**
  - Приложение было полностью переписано с использованием Tailwind CSS для создания чистого, консистентного и легко поддерживаемого интерфейса.
  - Внедрены новые базовые компоненты (Button, Card) для стандартизации элементов.
  - Полностью переработаны все основные представления (`App`, `Dashboard`, `Sidebar`, `Footer`), что решило все проблемы с выравниванием, отступами и общей компоновкой.

- **Исправление сборки:**
  - Ошибка сборки в Windows, связанная с `winCodeSign` и созданием символических ссылок, окончательно решена путем принудительного указания платформы сборки (`--win --x64`) в `package.json`.

- **Восстановление логики:**
  - Вся логика приложения, включая управление состоянием, обработчики событий и взаимодействие с Electron API, была полностью восстановлена и интегрирована с новым UI.

Author: google-labs-jules[bot]

package-lock.json

@@ -6,24 +6,33 @@
   "main": "dist-electron/main.cjs",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build && electron-builder",
+    "build": "tsc && vite build && electron-builder --win --x64",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "electron-store": "^8.1.0",
+    "lucide-react": "^0.323.0",
     "node-notifier": "^10.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "simple-git": "^3.22.0"
+    "simple-git": "^3.22.0",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@types/node": "^20.11.0",
     "@types/node-notifier": "^8.0.5",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
     "electron": "^28.1.0",
     "electron-builder": "^24.9.1",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.9.3",
     "vite": "^5.0.8",
     "vite-plugin-electron": "^0.15.4",

package.json

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

postcss.config.js

@@ -4,18 +4,11 @@ import { Dashboard } from './Dashboard';
 import { Settings } from './Settings';
 import { Sidebar } from './components/Sidebar';
 import { Footer } from './components/Footer';
-import './index.css';
-
-const INITIAL_REPOS: Repo[] = [
-  { id: '1', path: 'C:\\Dev\\production-backend', name: 'production-backend', autoPull: true, status: 'clean', lastCheck: '12:00:00' },
-  { id: '2', path: 'C:\\Dev\\frontend-client', name: 'frontend-client', autoPull: false, status: 'behind', commitsBehind: 3, lastCheck: '11:55:00' },
-];
 
 const App = () => {
   const [activeTab, setActiveTab] = useState<'dashboard' | 'settings'>('dashboard');
-  const [repos, setRepos] = useState<Repo[]>(INITIAL_REPOS);
+  const [repos, setRepos] = useState<Repo[]>([]);
   const [logs, setLogs] = useState<LogEntry[]>([]);
-  const [isSimulating, setIsSimulating] = useState(true);
 
   const logsEndRef = useRef<HTMLDivElement>(null);
 
@@ -33,19 +26,15 @@ const App = () => {
     logsEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   }, [logs]);
 
-  // --- Real Data & Events ---
   useEffect(() => {
     if (window.electronAPI) {
-      // 1. Load persisted repos
       window.electronAPI.getRepos().then((savedRepos: Repo[]) => {
-        if (savedRepos && savedRepos.length > 0) {
+        if (savedRepos) {
           setRepos(savedRepos);
-          setIsSimulating(false); // Stop simulation if we have real data
           addLog('Loaded repositories from storage', 'info');
         }
       });
 
-      // 2. Listen for backend updates
       const cleanup = window.electronAPI.onRepoUpdate((data) => {
          updateRepoStatus(data.id, data.status as any, data.commits);
          if (data.status === 'behind') {
@@ -58,51 +47,6 @@ const App = () => {
     }
   }, []);
 
-  // --- Simulation Logic ---
-  useEffect(() => {
-    if (!isSimulating) return;
-
-    const interval = setInterval(() => {
-      if (repos.length === 0) return;
-      const repoIdx = Math.floor(Math.random() * repos.length);
-      const repo = repos[repoIdx];
-
-      if (repo.status === 'pulling' || repo.status === 'checking') return;
-
-      updateRepoStatus(repo.id, 'checking');
-      addLog(`[${repo.name}] Checking for updates...`, 'info');
-
-      setTimeout(() => {
-        const rand = Math.random();
-        
-        if (rand > 0.7) {
-          const behindCount = Math.floor(Math.random() * 5) + 1;
-          addLog(`[${repo.name}] Found ${behindCount} new commits.`, 'warn');
-          
-          if (repo.autoPull) {
-             updateRepoStatus(repo.id, 'pulling');
-             addLog(`[${repo.name}] Auto-pulling changes...`, 'info');
-             
-             setTimeout(() => {
-                updateRepoStatus(repo.id, 'clean', 0);
-                addLog(`[${repo.name}] Successfully pulled updates.`, 'success');
-             }, 2000);
-          } else {
-             updateRepoStatus(repo.id, 'behind', behindCount);
-          }
-        } else if (rand > 0.95) {
-          updateRepoStatus(repo.id, 'error');
-          addLog(`[${repo.name}] Error: Network timeout.`, 'error');
-        } else {
-          updateRepoStatus(repo.id, 'clean');
-        }
-      }, 1500); 
-
-    }, 4000);
-
-    return () => clearInterval(interval);
-  }, [repos, isSimulating]);
-
   const updateRepoStatus = (id: string, status: Repo['status'], commitsBehind?: number) => {
     setRepos(prev => prev.map(r => r.id === id ? { 
       ...r, 
@@ -161,30 +105,17 @@ const App = () => {
   };
 
   const handleAddRepo = async () => {
-    // If not in Electron, use fake logic
     if (!window.electronAPI) {
-      const name = `new-project-${Math.floor(Math.random() * 1000)}`;
-      const newRepo: Repo = {
-        id: Date.now().toString(),
-        path: `C:\\Projects\\${name}`,
-        name: name,
-        autoPull: true,
-        status: 'checking',
-        lastCheck: 'Now'
-      };
-      setRepos([...repos, newRepo]);
-      addLog(`Added new repository: ${name}`, 'info');
+      addLog('Cannot add repository outside of Electron environment.', 'error');
       return;
     }
 
-    // Native Dialog Flow
     try {
       const result = await window.electronAPI.selectFolder();
-      if (!result) return; // Cancelled
+      if (!result) return;
 
       if (!result.isRepo) {
         addLog(`Error: Folder '${result.name}' is not a valid Git repository`, 'error');
-        // You might want to show a toast or alert here
         return;
       }
 
@@ -201,34 +132,31 @@ const App = () => {
       setRepos(prev => [...prev, newRepo]);
       addLog(`Repository added: ${result.name}`, 'success');
 
-      // Stop simulation to avoid confusion
-      setIsSimulating(false);
     } catch (e) {
       console.error(e);
       addLog('Failed to add repository', 'error');
     }
   };
 
   return (
-    <div className="app-container">
+    <div className="flex flex-col h-screen bg-background text-foreground">
       {/* Custom Title Bar */}
-      <div className="title-bar">
-        <div className="title-drag-region">
-          <div className="app-icon">🔄</div>
-          <span className="app-title">Git Watcher Pro</span>
+      <div className="flex items-center justify-between h-10 border-b border-border flex-shrink-0">
+        <div className="flex items-center px-3 gap-2 drag-region h-full flex-grow">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
+          <span className="font-semibold text-sm">Git Watcher Pro</span>
         </div>
-        <div className="window-controls">
-          <div className="control minimize" onClick={() => window.electronAPI?.minimize()}>─</div>
-          <div className="control maximize" onClick={() => window.electronAPI?.maximize()}>□</div>
-          <div className="control close" onClick={() => window.electronAPI?.close()}>✕</div>
+        <div className="flex items-center h-full no-drag-region">
+          <div className="w-12 h-full flex items-center justify-center text-lg hover:bg-accent transition-colors" onClick={() => window.electronAPI?.minimize()}>─</div>
+          <div className="w-12 h-full flex items-center justify-center text-lg hover:bg-accent transition-colors" onClick={() => window.electronAPI?.maximize()}>□</div>
+          <div className="w-12 h-full flex items-center justify-center text-lg hover:bg-destructive transition-colors" onClick={() => window.electronAPI?.close()}>✕</div>
         </div>
       </div>
 
-      <div className="main-layout">
+      <div className="flex flex-grow overflow-hidden">
         <Sidebar activeTab={activeTab} setActiveTab={setActiveTab} />
-
-        <div className="content-area">
-          {activeTab === 'dashboard' && (
+        <main className="flex-grow p-6 overflow-auto">
+           {activeTab === 'dashboard' && (
             <Dashboard 
               repos={repos} 
               logs={logs} 
@@ -241,9 +169,10 @@ const App = () => {
               onAddRepo={handleAddRepo}
             />
           )}
-          {activeTab === 'settings' && <Settings />}
-        </div>
+           {activeTab === 'settings' && <Settings />}
+        </main>
       </div>
+
       <Footer />
     </div>
   );