WIP: Радикальный рефакторинг UI

package.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",

postcss.config.js

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

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>

src/components/ui/Button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }