From 3011a9cffa59a54a12a22eb9455069e944cdab93 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 26 Nov 2025 21:52:30 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA=D0=B0?=
 =?UTF-8?q?=20=D1=81=D0=B1=D0=BE=D1=80=D0=BA=D0=B8=20=D0=B8=20=D0=BF=D0=BE?=
 =?UTF-8?q?=D0=BB=D0=BD=D0=BE=D1=81=D1=82=D1=8C=D1=8E=20=D0=BF=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B5=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=D0=BD=20=D0=B8=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B5=D1=80=D1=84=D0=B5=D0=B9=D1=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Устранены две основные проблемы:
1.  Ошибка сборки в Windows, связанная с созданием символических ссылок `winCodeSign`. Проблема решена путем добавления конфигурации `build` в `package.json`, которая отключает создание ненужных ресурсов для macOS.
2.  Многочисленные проблемы с версткой пользовательского интерфейса. Проведен значительный рефакторинг:
    -   Все инлайн-стили перенесены в `index.css`.
    -   Высота и выравнивание верхней панели (Title Bar) исправлены.
    -   Компонент карточки репозитория (`RepoCard`) полностью переделан с использованием CSS Grid для надежного и адаптивного отображения.
    -   Улучшены отступы и выравнивание в других элементах интерфейса.
---
 package.json      |  10 ++
 src/Dashboard.tsx |  22 ++--
 src/index.css     | 261 ++++++++++++++++++----------------------------
 3 files changed, 121 insertions(+), 172 deletions(-)

diff --git a/package.json b/package.json
index 278e228..6f87bb1 100644
--- a/package.json
+++ b/package.json
@@ -28,5 +28,15 @@
     "vite": "^5.0.8",
     "vite-plugin-electron": "^0.15.4",
     "vite-plugin-electron-renderer": "^0.14.5"
+  },
+  "build": {
+    "appId": "com.electron.git-watcher-pro",
+    "productName": "Git Watcher Pro",
+    "win": {
+      "target": "nsis"
+    },
+    "mac": {
+      "identity": null
+    }
   }
 }
diff --git a/src/Dashboard.tsx b/src/Dashboard.tsx
index 3ae1e61..3eda320 100644
--- a/src/Dashboard.tsx
+++ b/src/Dashboard.tsx
@@ -27,7 +27,7 @@ export const Dashboard: React.FC<DashboardProps> = ({
 }) => (
   <div className="dashboard-container">
     {/* Repos Section */}
-    <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+    <div className="repo-section">
       <div className="section-header">
         <h3 className="section-title">Watched Repositories ({repos.length})</h3>
         <button className="btn-primary" onClick={onAddRepo}>+ Add Repository</button>
@@ -49,14 +49,14 @@ export const Dashboard: React.FC<DashboardProps> = ({
 
     {/* Timeline Logs Section */}
     <ResizablePanel>
-      <div className="logs-container" style={{ height: '100%' }}>
+      <div className="logs-container">
          <div className="logs-header">
            <span>Activity Timeline</span>
-           <span style={{ cursor: 'pointer', opacity: 0.7 }} onClick={onClearLogs}>Clear Logs</span>
+           <span className="clear-logs-btn" onClick={onClearLogs}>Clear Logs</span>
          </div>
          <div className="logs-scroll-area">
             {logs.length === 0 && (
-              <div style={{ color: '#444', textAlign: 'center', marginTop: '40px', fontStyle: 'italic' }}>
+              <div className="logs-empty-state">
                 No activity recorded yet...
               </div>
             )}
@@ -106,16 +106,16 @@ const RepoCard = ({ repo, onToggle, onPull, onPush, onDelete }: { repo: Repo, on
             </div>
         </div>
 
-        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '8px', textAlign: 'right' }}>
-            <button onClick={onDelete} className="delete-btn" title="Remove Repository">
-              🗑️
-            </button>
-            <label style={{ display: 'flex', alignItems: 'center', fontSize: '12px', cursor: 'pointer', color: '#ccc' }}>
-              <input type="checkbox" checked={repo.autoPull} onChange={onToggle} style={{ marginRight: '8px' }} />
+        <div className="repo-controls">
+            <label className="autopull-label">
+              <input type="checkbox" checked={repo.autoPull} onChange={onToggle} />
               Auto-Pull
             </label>
             <ActionButton repo={repo} onPull={onPull} onPush={onPush} />
-            <div style={{ fontSize: '11px', color: '#666', marginTop: 'auto' }}>
+             <button onClick={onDelete} className="delete-btn" title="Remove Repository">
+              🗑️
+            </button>
+            <div className="repo-last-checked">
               Last checked: {repo.lastCheck}
             </div>
         </div>
diff --git a/src/index.css b/src/index.css
index 113bef5..a0050ad 100644
--- a/src/index.css
+++ b/src/index.css
@@ -28,12 +28,12 @@ body {
   height: 100vh;
 }
 
-/* --- Custom Title Bar --- */
+/* --- Custom Title Bar (FIXED) --- */
 .title-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 32px;
+  height: 40px; /* Increased for better touch */
   background-color: var(--background);
   border-bottom: 1px solid var(--border-color);
   user-select: none;
@@ -46,17 +46,17 @@ body {
   -webkit-app-region: drag;
   display: flex;
   align-items: center;
-  padding-left: 12px;
+  padding: 0 12px;
   gap: 8px;
   font-weight: 600;
   font-size: 13px;
 }
 
-.window-controls {
-  display: flex;
-  height: 100%;
+.app-icon {
+  font-size: 18px;
 }
 
+.window-controls { display: flex; height: 100%; }
 .control {
   width: 46px;
   display: flex;
@@ -72,13 +72,13 @@ body {
 .main-layout {
   display: flex;
   flex-grow: 1;
-  height: calc(100vh - 32px);
+  height: calc(100vh - 40px); /* Adjusted for title bar */
 }
 
 .sidebar {
   width: 200px;
   background-color: var(--background);
-  padding: 16px;
+  padding: 12px;
   border-right: 1px solid var(--border-color);
   display: flex;
   flex-direction: column;
@@ -89,7 +89,7 @@ body {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 10px 14px;
+  padding: 8px 12px; /* Reduced vertical padding */
   border-radius: 6px;
   cursor: pointer;
   font-size: 14px;
@@ -102,48 +102,51 @@ body {
   background-color: var(--background-light);
   color: var(--text-primary);
 }
-
 .sidebar-item.active {
   background-color: var(--accent-primary);
   color: white;
 }
+.sidebar-footer { margin-top: auto; font-size: 12px; }
+.status-indicator { display: flex; align-items: center; gap: 8px; color: #ccc; }
+.dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--accent-secondary); }
+.version { color: #666; margin-top: 4px; }
+
 
 .content-area {
-  flex: 1;
+  flex-grow: 1;
   padding: 24px;
   overflow-y: auto;
+  display: flex; /* Needed for child flex to work */
 }
 
 /* --- Dashboard --- */
 .dashboard-container {
   display: flex;
   flex-direction: column;
-  height: 100%; /* Ensure it fills the content area */
+  width: 100%;
+  gap: 16px;
+}
+
+.repo-section {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
 }
 
 .section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-bottom: 16px;
+  padding-bottom: 12px;
   margin-bottom: 16px;
   border-bottom: 1px solid var(--border-color);
 }
-.section-title {
-  font-size: 18px;
-  font-weight: 600;
-  margin: 0;
-}
+.section-title { font-size: 18px; font-weight: 600; margin: 0; }
+
 .btn-primary {
-  background-color: var(--accent-primary);
-  color: white;
-  border: none;
-  padding: 8px 14px;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.2s;
+  background-color: var(--accent-primary); color: white; border: none; padding: 8px 14px;
+  border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.2s;
 }
 .btn-primary:hover { background-color: #2563eb; }
 
@@ -153,11 +156,11 @@ body {
   padding-right: 8px; /* For scrollbar */
   display: grid;
   grid-template-columns: 1fr;
-  gap: 16px;
+  gap: 12px;
   align-content: start;
 }
 
-/* --- Repo Card --- */
+/* --- Repo Card (FIXED) --- */
 .repo-card {
   background-color: var(--background-light);
   border: 1px solid var(--border-color);
@@ -165,11 +168,11 @@ body {
   padding: 16px;
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
-  position: relative;
+  align-items: center; /* Vertically center left/right sections */
   gap: 16px;
 }
 
+.repo-info { flex-grow: 1; }
 .repo-info h4 {
   margin: 0 0 4px 0;
   font-size: 16px;
@@ -177,49 +180,65 @@ body {
   align-items: center;
   gap: 8px;
 }
+.repo-path { font-size: 12px; color: var(--text-secondary); font-family: monospace; }
+.quick-actions { display: flex; gap: 8px; margin-top: 16px; }
 
-.repo-path {
-  font-size: 12px;
-  color: var(--text-secondary);
-  font-family: monospace;
+.action-btn {
+  background: var(--background-lighter); border: 1px solid var(--border-color); color: var(--text-secondary);
+  padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px;
+  display: flex; align-items: center; gap: 6px; transition: all 0.2s;
 }
+.action-btn span { font-size: 14px; }
+.action-btn:hover { background: #3a3a3d; color: var(--text-primary); border-color: #555; }
 
-.quick-actions {
-  display: flex;
+
+.repo-controls {
+  flex-shrink: 0;
+  width: 150px;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  grid-template-areas:
+    "autopull delete"
+    "action   action"
+    "status   status";
   gap: 8px;
-  margin-top: 12px;
+  align-items: center;
 }
 
-.action-btn {
-  background: var(--background-lighter);
-  border: 1px solid var(--border-color);
-  color: var(--text-secondary);
-  padding: 4px 10px;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 12px;
+.autopull-label {
+  grid-area: autopull;
   display: flex;
   align-items: center;
+  font-size: 12px;
+  cursor: pointer;
+  color: #ccc;
   gap: 6px;
-  transition: all 0.2s;
 }
-.action-btn span {
-  font-size: 14px;
+
+.delete-btn {
+  grid-area: delete;
+  background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px;
+  border-radius: 50%; width: 28px; height: 28px; font-size: 16px;
+  display: flex; align-items: center; justify-content: center; transition: all 0.2s;
 }
-.action-btn:hover {
-  background: #3a3a3d;
-  color: var(--text-primary);
-  border-color: #555;
+.delete-btn:hover { background-color: var(--background-lighter); color: var(--accent-error); }
+
+.repo-controls .pull-btn, .repo-controls .push-btn {
+  grid-area: action;
+  width: 100%;
+}
+.repo-last-checked {
+  grid-area: status;
+  font-size: 11px;
+  color: #666;
+  text-align: right;
+  margin-top: 4px;
 }
 
 .pull-btn, .push-btn {
-  padding: 6px 12px;
-  border-radius: 6px;
-  font-size: 13px;
-  font-weight: 500;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: background-color 0.2s;
+  padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500;
+  border: 1px solid transparent; cursor: pointer; transition: background-color 0.2s;
 }
 .pull-btn { background-color: #2da44e; color: white; border-color: rgba(255,255,255,0.1); }
 .pull-btn:hover { background-color: #238636; }
@@ -227,35 +246,11 @@ body {
 .push-btn:hover { background-color: #2563eb; }
 .pull-btn:disabled { background-color: #333; color: #777; cursor: not-allowed; border-color: #444;}
 
-.delete-btn {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 50%;
-  width: 28px;
-  height: 28px;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-}
-.delete-btn:hover { background-color: var(--background-lighter); color: var(--accent-error); }
-
 
 /* --- Status Badges --- */
 .badge {
-  font-size: 10px;
-  padding: 3px 8px;
-  border-radius: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  font-size: 10px; padding: 3px 8px; border-radius: 12px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.5px;
 }
 .badge.clean { background-color: #238636; color: white; }
 .badge.behind { background-color: var(--accent-warn); color: white; }
@@ -265,100 +260,44 @@ body {
 .badge.error { background-color: var(--accent-error); color: white; }
 .badge.process { background-color: #444; color: #ccc; }
 
-.sidebar-footer {
-  margin-top: auto;
-  font-size: 12px;
-}
-.status-indicator {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #ccc;
-}
-.dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: var(--accent-secondary);
-}
-.version {
-  color: #666;
-  margin-top: 4px;
-}
-
-/* --- Logs --- */
+/* --- Logs (FIXED) --- */
 .logs-container {
-  flex-shrink: 0; /* Prevent shrinking */
-  background-color: var(--background-light);
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
+  background-color: var(--background-light); border: 1px solid var(--border-color);
+  border-radius: 8px; display: flex; flex-direction: column; height: 100%;
 }
 .logs-header {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-color);
-  font-weight: 600;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.logs-scroll-area {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px 16px;
+  padding: 12px 16px; border-bottom: 1px solid var(--border-color); font-weight: 600;
+  display: flex; justify-content: space-between; align-items: center;
 }
+.clear-logs-btn { cursor: pointer; opacity: 0.7; font-size: 12px; }
+.clear-logs-btn:hover { opacity: 1; color: var(--accent-warn); }
+
+.logs-scroll-area { flex: 1; overflow-y: auto; padding: 8px 16px; }
+.logs-empty-state { color: #666; text-align: center; margin-top: 40px; font-style: italic; }
 
 .timeline-item {
-  display: flex;
-  gap: 12px;
-  padding: 8px 0;
+  display: flex; gap: 12px; margin: 8px 0; /* Added margin */
 }
 .timeline-icon {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: bold;
-  color: white;
+  width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center;
+  justify-content: center; font-size: 12px; font-weight: bold; color: white; flex-shrink: 0;
 }
 .timeline-icon.info { background-color: #555; }
 .timeline-icon.success { background-color: var(--accent-secondary); }
 .timeline-icon.warn { background-color: var(--accent-warn); }
 .timeline-icon.error { background-color: var(--accent-error); }
 
-.timeline-content {
-  flex: 1;
-}
+.timeline-content { flex: 1; }
 .timeline-msg { font-size: 13px; }
 .timeline-meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
 
 /* --- Settings Page --- */
-.settings-container {
-  max-width: 600px;
-}
-.settings-group {
-  margin-bottom: 24px;
-  padding-bottom: 24px;
-  border-bottom: 1px solid var(--border-color);
-}
-.settings-group h4 {
-  margin-top: 0;
-  margin-bottom: 16px;
-  font-size: 16px;
-}
+.settings-container { max-width: 600px; }
+.settings-group { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border-color); }
+.settings-group h4 { margin-top: 0; margin-bottom: 16px; font-size: 16px; }
 
 /* --- Footer --- */
 .footer {
-  border-top: 1px solid var(--border-color);
-  padding: 8px 16px;
-  font-size: 12px;
-  color: var(--text-secondary);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
+  border-top: 1px solid var(--border-color); padding: 8px 16px; font-size: 12px;
+  color: var(--text-secondary); display: flex; align-items: center; gap: 8px; flex-shrink: 0;
 }