Merge pull request #16 from Javaec/fix-design-build-crash

Design Polish, Crash Fixes, and Build Repairs

Author: Javaec

DESIGN_ANALYSIS.md

@@ -0,0 +1,53 @@
+# Design Analysis & Hypotheses
+
+Based on the user feedback ("ugly", "needs soft dark/light themes") and code inspection, here are 10 identified design problems and hypotheses.
+
+## 1. Harsh Contrast in Dark Mode
+*   **Problem**: The current background is `#0a0a0a` (very dark) with white text. This creates high eye strain.
+*   **Hypothesis 1**: Pure black backgrounds lack depth and feel "old school" rather than modern/soft.
+*   **Hypothesis 2**: High contrast without softening elements makes the UI feel "sharp" and unpolished.
+
+## 2. Lack of Visual Hierarchy in Cards
+*   **Problem**: Repository cards in `Dashboard.tsx` look flat or have generic borders.
+*   **Hypothesis 1**: Lack of subtle shadows or distinct background colors for cards makes them blend too much with the main background.
+*   **Hypothesis 2**: Information density is high but not grouped effectively, making it hard to scan.
+
+## 3. Generic Typography
+*   **Problem**: The UI likely uses the default system sans-serif without careful weight/tracking adjustments.
+*   **Hypothesis 1**: Default fonts lack the "personality" or "softness" requested.
+*   **Hypothesis 2**: Heading sizes and weights are not distinct enough from body text.
+
+## 4. Unpolished Scrollbars
+*   **Problem**: Windows default scrollbars are blocky and grey, clashing with a custom dark UI.
+*   **Hypothesis 1**: The lack of custom scrollbar styling breaks the immersion of the custom window frame.
+*   **Hypothesis 2**: Scrollbars take up too much visual space in a "compact" layout.
+
+## 5. "Ugly" Window Controls (Title Bar)
+*   **Problem**: The custom title bar elements (minimize/close) are likely just text characters or basic SVGs without hover effects or proper sizing.
+*   **Hypothesis 1**: Using standard characters like "□" or "✕" looks amateurish compared to proper icons.
+*   **Hypothesis 2**: The hit area for dragging is broken (confirmed bug), making the bar feel "dead".
+
+## 6. Sidebar Too Plain
+*   **Problem**: The sidebar is just a list of links with basic hover states.
+*   **Hypothesis 1**: It lacks separation from the main content (no distinct background or too harsh border).
+*   **Hypothesis 2**: The active state highlight is likely the default "primary" color which might not fit a "soft" theme.
+
+## 7. Button Styles
+*   **Problem**: Buttons use default Tailwind radiuses and colors.
+*   **Hypothesis 1**: Sharp corners or default rounding doesn't feel "soft".
+*   **Hypothesis 2**: Secondary buttons (grey) might look disabled rather than actionable.
+
+## 8. Status Indicators
+*   **Problem**: The "In Sync", "Behind" badges are functional but might be visually noisy.
+*   **Hypothesis 1**: Using full background colors for badges adds too much visual weight.
+*   **Hypothesis 2**: The colors (standard red/green/blue) are likely too saturated for a "soft" look.
+
+## 9. Whitespace/Padding Issues
+*   **Problem**: "Compact" layouts often suffer from elements touching or uneven gaps.
+*   **Hypothesis 1**: Inconsistent padding inside cards makes them look cluttered.
+*   **Hypothesis 2**: Lack of breathing room between the list items and the container edges.
+
+## 10. Missing Light Mode / Theme System
+*   **Problem**: The UI is hardcoded to dark values in `index.css`.
+*   **Hypothesis 1**: Users expecting a "soft" look often associate it with low-contrast light themes (like paper).
+*   **Hypothesis 2**: Forcing dark mode makes the app feel alien on a Light Mode Windows desktop.

electron/main.ts

@@ -2,10 +2,19 @@ import { app, BrowserWindow, ipcMain, Tray, Menu, nativeImage, shell, clipboard,
 import { join, basename } from 'node:path'
 import { existsSync } from 'node:fs'
 import { exec } from 'node:child_process'
+import { webcrypto } from 'node:crypto'
 import simpleGit from 'simple-git'
 import notifier from 'node-notifier'
 import Store from 'electron-store'
 
+if (!globalThis.crypto) {
+  Object.defineProperty(globalThis, 'crypto', {
+    value: webcrypto,
+    writable: true,
+    configurable: true
+  });
+}
+
 const ROOT_PATH = app.getAppPath()
 const DIST_PATH = join(ROOT_PATH, 'dist')
 const PRELOAD_PATH = join(ROOT_PATH, 'dist-electron/preload.cjs')
@@ -91,11 +100,11 @@ async function checkRepos() {
         updateData.commitsAhead = status.ahead;
       }
 
-      if (mainWindow) mainWindow.webContents.send('repo-update', updateData)
+      if (mainWindow && !mainWindow.isDestroyed()) mainWindow.webContents.send('repo-update', updateData)
 
     } catch (err: any) {
       console.error(`Error checking ${repo.name}:`, err)
-      if (mainWindow) {
+      if (mainWindow && !mainWindow.isDestroyed()) {
         mainWindow.webContents.send('repo-error', { id: repo.id, message: err.message || 'Unknown error' })
         mainWindow.webContents.send('repo-update', { id: repo.id, status: 'error' })
       }
@@ -115,7 +124,7 @@ function notifyUser(title: string, message: string, clickToOpen = false) {
     wait: clickToOpen,
     appID: 'com.gitwatcher.app',
   }, (_, response) => {
-    if (clickToOpen && response === 'activate' && mainWindow) {
+    if (clickToOpen && response === 'activate' && mainWindow && !mainWindow.isDestroyed()) {
       mainWindow.show()
     }
   })
@@ -135,7 +144,7 @@ function startClipboardWatcher() {
 
     if (text.startsWith('ghp_') || text.startsWith('github_pat_')) {
       if (text.length > 20) {
-        if (mainWindow) {
+        if (mainWindow && !mainWindow.isDestroyed()) {
           mainWindow.webContents.send('smart-auth-token-found', text)
           store.set('settings.githubToken', text)
         }
@@ -211,6 +220,8 @@ function createTray() {
     { type: 'separator' },
     { label: 'Exit', click: () => {
         (app as any).quitByTray = true
+        if (checkIntervalTimer) clearInterval(checkIntervalTimer)
+        if (smartAuthInterval) clearInterval(smartAuthInterval)
         app.quit() 
       } 
     }

package.json

@@ -9,6 +9,13 @@
     "build": "tsc && vite build && electron-builder --win --x64",
     "preview": "vite preview"
   },
+  "build": {
+    "win": {
+      "target": "nsis",
+      "sign": null,
+      "forceCodeSigning": false
+    }
+  },
   "dependencies": {
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
@@ -29,8 +36,8 @@
     "@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",
+    "electron": "^29.1.0",
+    "electron-builder": "^24.13.3",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.9.3",

src/App.tsx

@@ -2,16 +2,28 @@ import { useState, useEffect, useRef } from 'react';
 import { Repo, LogEntry } from './types';
 import { Dashboard } from './Dashboard';
 import { Settings } from './Settings';
+import { Logs } from './Logs';
 import { Sidebar } from './components/Sidebar';
 import { Footer } from './components/Footer';
 
+import { Moon, Sun } from 'lucide-react';
+import { Button } from './components/ui/Button';
+
 const App = () => {
-  const [activeTab, setActiveTab] = useState<'dashboard' | 'settings'>('dashboard');
+  const [activeTab, setActiveTab] = useState<'dashboard' | 'logs' | 'settings'>('dashboard');
   const [repos, setRepos] = useState<Repo[]>([]);
   const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [theme, setTheme] = useState<'dark' | 'light'>('dark');
 
   const logsEndRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    document.documentElement.classList.toggle('light', theme === 'light');
+    document.documentElement.classList.toggle('dark', theme === 'dark');
+  }, [theme]);
+
+  const toggleTheme = () => setTheme(prev => prev === 'dark' ? 'light' : 'dark');
+
   const addLog = (msg: string, type: LogEntry['type'] = 'info') => {
     const entry: LogEntry = {
       id: Date.now() + Math.random(),
@@ -141,15 +153,18 @@ const App = () => {
   return (
     <div className="flex flex-col h-screen bg-background text-foreground">
       {/* Custom Title Bar */}
-      <div className="flex items-center justify-between h-8 border-b border-border flex-shrink-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <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-4 h-4"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
-          <span className="font-semibold text-xs">Git Watcher Pro</span>
+      <div className="flex items-center justify-between h-9 border-b border-border flex-shrink-0 bg-muted/20 backdrop-blur supports-[backdrop-filter]:bg-background/60 select-none">
+        <div className="flex items-center px-4 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-4 h-4 text-primary"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
+          <span className="font-medium text-xs tracking-wide opacity-80">Git Watcher Pro</span>
         </div>
-        <div className="flex items-center h-full no-drag-region">
-          <div className="w-10 h-full flex items-center justify-center text-sm hover:bg-accent transition-colors cursor-default" onClick={() => window.electronAPI?.minimize()}>─</div>
-          <div className="w-10 h-full flex items-center justify-center text-sm hover:bg-accent transition-colors cursor-default" onClick={() => window.electronAPI?.maximize()}>□</div>
-          <div className="w-10 h-full flex items-center justify-center text-sm hover:bg-destructive hover:text-destructive-foreground transition-colors cursor-default" onClick={() => window.electronAPI?.close()}>✕</div>
+        <div className="flex items-center h-full no-drag-region pr-1">
+          <Button variant="ghost" size="icon" onClick={toggleTheme} className="w-7 h-7 mr-2 hover:bg-accent/50">
+             {theme === 'dark' ? <Sun className="w-3.5 h-3.5" /> : <Moon className="w-3.5 h-3.5" />}
+          </Button>
+          <div className="w-10 h-7 rounded-sm flex items-center justify-center text-xs hover:bg-accent transition-colors cursor-default" onClick={() => window.electronAPI?.minimize()}>─</div>
+          <div className="w-10 h-7 rounded-sm flex items-center justify-center text-xs hover:bg-accent transition-colors cursor-default" onClick={() => window.electronAPI?.maximize()}>□</div>
+          <div className="w-10 h-7 rounded-sm flex items-center justify-center text-xs hover:bg-destructive hover:text-destructive-foreground transition-colors cursor-default" onClick={() => window.electronAPI?.close()}>✕</div>
         </div>
       </div>
 
@@ -159,16 +174,20 @@ const App = () => {
            {activeTab === 'dashboard' && (
             <Dashboard 
               repos={repos} 
-              logs={logs} 
-              logsEndRef={logsEndRef}
               onToggleAutoPull={toggleAutoPull}
               onManualPull={handleManualPull}
               onManualPush={handleManualPush}
               onDeleteRepo={handleDeleteRepo}
-              onClearLogs={handleClearLogs}
               onAddRepo={handleAddRepo}
             />
           )}
+           {activeTab === 'logs' && (
+             <Logs
+               logs={logs}
+               logsEndRef={logsEndRef}
+               onClearLogs={handleClearLogs}
+             />
+           )}
            {activeTab === 'settings' && <Settings />}
         </main>
       </div>