polish ui controls and lock layout against overflow

restyled window controls with clearer spacing and themed hover states
prevented layout shifts from long paths/log lines with min-width and overflow fixes
improved terminal wrapping/scrolling to keep UI stable

Author: ArYaN-X404

electron/main.js

@@ -44,12 +44,16 @@ function createWindow() {
     minHeight: 680,
     backgroundColor: '#0b1020',
     title: 'RoboCopy Pro',
+    frame: false,
+    titleBarStyle: 'hidden',
     webPreferences: {
       contextIsolation: true,
       preload: path.join(__dirname, 'preload.js'),
     },
   });
 
+  mainWindow.setMenuBarVisibility(false);
+
   if (isDev) {
     mainWindow.loadURL(process.env.VITE_DEV_SERVER_URL);
     mainWindow.webContents.openDevTools({ mode: 'detach' });
@@ -90,6 +94,26 @@ ipcMain.on('robocopy:ui-progress', (event, value) => {
   window.setProgressBar(value);
 });
 
+ipcMain.on('window:minimize', (event) => {
+  const window = BrowserWindow.fromWebContents(event.sender);
+  if (window) window.minimize();
+});
+
+ipcMain.on('window:maximize', (event) => {
+  const window = BrowserWindow.fromWebContents(event.sender);
+  if (!window) return;
+  if (window.isMaximized()) {
+    window.unmaximize();
+  } else {
+    window.maximize();
+  }
+});
+
+ipcMain.on('window:close', (event) => {
+  const window = BrowserWindow.fromWebContents(event.sender);
+  if (window) window.close();
+});
+
 ipcMain.handle('robocopy:run', async (event, payload) => {
   const { args, command } = payload;
   const window = BrowserWindow.fromWebContents(event.sender);

electron/preload.js

@@ -4,6 +4,12 @@ contextBridge.exposeInMainWorld('electron', {
   selectFolder: () => ipcRenderer.invoke('robocopy:select-folder'),
 });
 
+contextBridge.exposeInMainWorld('windowControls', {
+  minimize: () => ipcRenderer.send('window:minimize'),
+  maximize: () => ipcRenderer.send('window:maximize'),
+  close: () => ipcRenderer.send('window:close'),
+});
+
 contextBridge.exposeInMainWorld('robocopy', {
   run: ({ args, command, onProgress }) => {
     const logListener = (_, line) => {

src/App.jsx

@@ -3,7 +3,7 @@
     'inline-flex items-center justify-center gap-2 rounded-xl px-5 py-3 text-sm font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/70 disabled:cursor-not-allowed';
   const variants = {
     primary:
-      'accent-gradient text-white shadow-card hover:shadow-card-hover hover:-translate-y-0.5 disabled:opacity-60',
+      'accent-gradient text-white shadow-card hover:shadow-card-hover hover:-translate-y-0.5 disabled:opacity-60 relative before:absolute before:inset-0 before:rounded-xl before:border before:border-white/20 before:opacity-60 before:pointer-events-none',
     ghost:
       'border border-white/10 bg-white/5 text-white/80 hover:border-cyan-400/60 hover:text-white',
   };

src/components/Button.jsx

@@ -1,17 +1,20 @@
-export default function ConsoleOutput({ lines }) {
+export default function ConsoleOutput({ lines, highlightedLines }) {
   return (
-    <div className="crystal-shell h-52 overflow-hidden">
+    <div className="terminal-surface h-64 min-w-0 overflow-hidden rounded-2xl">
       <div className="flex items-center justify-between border-b border-white/10 px-4 py-2">
         <span className="text-xs font-semibold text-white/60">Robocopy Output</span>
         <span className="glass-pill">Live</span>
       </div>
-      <div className="h-full overflow-y-auto px-4 py-3 font-mono text-xs text-emerald-200/90">
+      <div className="terminal-text h-[calc(100%-40px)] overflow-y-auto overflow-x-auto px-4 py-3 text-xs">
         {lines.length === 0 ? (
           <p className="text-white/50">Waiting for run...</p>
         ) : (
-          lines.map((line, index) => (
-            <p key={`${line}-${index}`} className="leading-relaxed">
-              {line}
+          (highlightedLines || lines).map((line, index) => (
+            <p
+              key={`${line.text || line}-${index}`}
+              className={`leading-relaxed whitespace-pre ${line.className || ''}`}
+            >
+              {line.text || line}
             </p>
           ))
         )}

src/components/ConsoleOutput.jsx

@@ -1,13 +1,20 @@
 import { useState } from 'react';
-import { ArrowDownTrayIcon } from '@heroicons/react/24/outline';
+import { ArrowDownTrayIcon, FolderOpenIcon, InboxArrowDownIcon } from '@heroicons/react/24/outline';
 
-export default function DropZone({ label, description, value, onDropPath, onBrowse }) {
+const ICONS = {
+  source: FolderOpenIcon,
+  destination: InboxArrowDownIcon,
+};
+
+export default function DropZone({ label, description, value, onDropPath, onBrowse, kind }) {
   const [active, setActive] = useState(false);
+  const Icon = kind ? ICONS[kind] : null;
+  const displayText = active ? `Drop to set as ${label}` : value || 'Drop a folder here';
 
   return (
     <div
-      className={`crystal-item relative flex h-full min-h-[150px] flex-col justify-between gap-3 p-4 transition ${
-        active ? 'border-cyan-400/60 shadow-card-hover' : ''
+      className={`crystal-item squircle relative flex min-h-[240px] min-w-0 flex-col justify-between gap-4 p-6 text-center transition ${
+        active ? 'drop-magnet' : ''
       }`}
       onDragEnter={(event) => {
         event.preventDefault();
@@ -26,14 +33,21 @@ export default function DropZone({ label, description, value, onDropPath, onBrow
         const path = file.path || file.name;
         if (path) onDropPath(path);
       }}
+      tabIndex={0}
     >
-      <div className="space-y-2">
-        <p className="text-sm font-semibold text-white">{label}</p>
+      <div className="space-y-3">
+        <div className="flex items-center justify-center gap-2 text-sm font-semibold text-white">
+          {Icon ? <Icon className="h-5 w-5 text-cyan-200" /> : null}
+          <span>{label}</span>
+        </div>
         <p className="text-xs text-white/60">{description}</p>
       </div>
-      <div className="space-y-3">
-        <div className="rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-xs text-white/70 break-all">
-          {value || 'Drop a folder here'}
+      <div className="min-w-0 space-y-4">
+        {Icon ? <Icon className="mx-auto h-12 w-12 text-cyan-200/80" /> : null}
+        <div className="min-w-0 rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-xs text-white/70">
+          <p className="truncate" title={displayText}>
+            {displayText}
+          </p>
         </div>
         <button type="button" className="glass-btn w-full" onClick={onBrowse}>
           <ArrowDownTrayIcon className="h-4 w-4" />

src/components/DropZone.jsx

@@ -1,14 +1,14 @@
 export default function Panel({ title, description, children, actions }) {
   return (
-    <section className="crystal-shell space-y-4 p-5 sm:p-6">
-      <div className="flex flex-wrap items-start justify-between gap-3">
-        <div>
+    <section className="crystal-shell squircle shadow-float min-w-0 space-y-5 p-6">
+      <div className="flex min-w-0 flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
           <h2 className="text-base font-semibold text-white">{title}</h2>
           {description ? <p className="text-sm text-white/60">{description}</p> : null}
         </div>
-        {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
+        {actions ? <div className="flex min-w-0 items-center gap-2">{actions}</div> : null}
       </div>
-      <div>{children}</div>
+      <div className="min-w-0">{children}</div>
     </section>
   );
 }

src/components/Panel.jsx

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
 
 @tailwind base;
 @tailwind components;
@@ -90,34 +90,45 @@
     box-shadow: var(--shadow-card-hover);
   }
 
+  .shadow-float {
+    box-shadow:
+      0 4px 12px -8px hsl(0 0% 0% / 0.45),
+      0 18px 36px -20px hsl(232 95% 66% / 0.25),
+      0 36px 60px -30px hsl(196 89% 62% / 0.2);
+  }
+
+  .squircle {
+    border-radius: 28px;
+  }
+
   .glass-crystal {
     background:
-      linear-gradient(135deg, hsl(var(--card) / 0.7), hsl(var(--card) / 0.45)),
+      linear-gradient(135deg, hsl(var(--card) / 0.55), hsl(var(--card) / 0.35)),
       radial-gradient(120% 140% at 0% 0%, hsl(var(--primary) / 0.2), transparent 45%),
       radial-gradient(120% 140% at 100% 100%, hsl(var(--accent) / 0.18), transparent 50%);
-    backdrop-filter: blur(20px) saturate(135%);
-    -webkit-backdrop-filter: blur(20px) saturate(135%);
-    border: 1px solid hsl(var(--border) / 0.7);
+    backdrop-filter: blur(22px) saturate(140%);
+    -webkit-backdrop-filter: blur(22px) saturate(140%);
+    border: 1px solid hsl(var(--border) / 0.65);
     box-shadow:
       inset 0 1px 0 hsl(0 0% 100% / 0.12),
       0 18px 40px -24px hsl(var(--primary) / 0.45);
   }
 
   .crystal-shell {
     background:
-      linear-gradient(145deg, hsl(var(--card) / 0.82), hsl(var(--card) / 0.6)),
+      linear-gradient(145deg, hsl(var(--card) / 0.7), hsl(var(--card) / 0.45)),
       radial-gradient(160% 120% at 0% 0%, hsl(var(--primary) / 0.16), transparent 48%),
       radial-gradient(160% 120% at 100% 100%, hsl(var(--accent) / 0.12), transparent 54%);
     backdrop-filter: blur(22px) saturate(140%);
     -webkit-backdrop-filter: blur(22px) saturate(140%);
-    border: 1px solid hsl(var(--border) / 0.72);
+    border: 1px solid hsl(var(--border) / 0.7);
     box-shadow:
       inset 0 1px 0 hsl(0 0% 100% / 0.1),
       0 22px 46px -26px hsl(var(--primary) / 0.4);
   }
 
   .crystal-item {
-    @apply rounded-2xl border border-white/10 bg-white/5 backdrop-blur-xl transition-all duration-300;
+    @apply border border-white/10 bg-white/5 backdrop-blur-xl transition-all duration-200;
     box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.08);
   }
 
@@ -126,22 +137,29 @@
     box-shadow:
       inset 0 1px 0 hsl(0 0% 100% / 0.14),
       0 18px 44px -26px hsl(var(--primary) / 0.42);
+    transform: translateY(-2px);
   }
 
   .glass-input {
-    @apply w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white/90 outline-none transition;
+    @apply w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white/90 outline-none transition duration-150;
   }
 
   .glass-input:focus {
     @apply border-cyan-400/60 ring-1 ring-cyan-400/30;
+    box-shadow: 0 0 0 3px hsl(var(--accent) / 0.18);
   }
 
   .glass-btn {
-    @apply inline-flex items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/10 px-4 py-3 text-sm font-semibold text-white/80 transition;
+    @apply inline-flex items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/10 px-4 py-3 text-sm font-semibold text-white/80 transition duration-150;
   }
 
   .glass-btn:hover {
     @apply border-cyan-400/60 text-white;
+    transform: translateY(-1px);
+  }
+
+  .glass-btn:active {
+    transform: translateY(0);
   }
 
   .glass-chip {
@@ -152,36 +170,113 @@
     @apply inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/10 px-3 py-1 text-xs font-semibold text-white/70;
   }
 
+  .window-controls {
+    @apply rounded-2xl border border-white/10 bg-white/10 p-2;
+    box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.08), 0 10px 24px -18px hsl(0 0% 0% / 0.5);
+  }
+
+  .window-btn {
+    @apply flex h-9 w-9 items-center justify-center rounded-xl border border-white/15 bg-white/10 text-white/70 transition duration-150;
+  }
+
+  .window-btn:hover {
+    @apply border-cyan-400/60 text-white;
+    box-shadow: 0 6px 18px -12px hsl(var(--accent) / 0.6);
+  }
+
+  .window-btn:active {
+    transform: translateY(0);
+  }
+
+  .window-btn-close:hover {
+    @apply border-rose-400/70 text-rose-200;
+    box-shadow: 0 6px 18px -12px hsl(0 84% 60% / 0.5);
+  }
+
   .accent-gradient {
     background: var(--gradient-primary);
   }
 
-  .fade-in {
-    animation: fadeIn 0.6s ease both;
+  .focus-glow:focus-visible {
+    box-shadow: 0 0 0 3px hsl(var(--accent) / 0.25);
   }
 
-  .float-slow {
-    animation: floatSlow 6s ease-in-out infinite;
+  .drop-magnet {
+    border-style: dashed;
+    border-color: hsl(var(--accent) / 0.6);
+    box-shadow: 0 0 30px hsl(var(--accent) / 0.25);
+    transform: scale(1.02);
   }
 
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(8px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+  .gradient-ring {
+    position: relative;
+    isolation: isolate;
   }
 
-  @keyframes floatSlow {
-    0%,
-    100% {
-      transform: translateY(0px);
+  .gradient-ring::before {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    border-radius: inherit;
+    padding: 1px;
+    background: linear-gradient(120deg, rgba(56, 189, 248, 0.7), rgba(139, 92, 246, 0.7), rgba(56, 189, 248, 0.7));
+    background-size: 200% 200%;
+    animation: ringFlow 6s linear infinite;
+    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    z-index: -1;
+  }
+
+  @keyframes ringFlow {
+    0% {
+      background-position: 0% 50%;
     }
-    50% {
-      transform: translateY(-10px);
+    100% {
+      background-position: 200% 50%;
     }
   }
+
+  .terminal-surface {
+    position: relative;
+    background: linear-gradient(180deg, rgba(7, 12, 24, 0.9), rgba(4, 8, 18, 0.95));
+    border: 1px solid rgba(56, 189, 248, 0.2);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 18px 40px -30px rgba(56, 189, 248, 0.5);
+  }
+
+  .terminal-surface::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: repeating-linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0.03) 0px,
+      rgba(255, 255, 255, 0.03) 1px,
+      transparent 1px,
+      transparent 3px
+    );
+    opacity: 0.2;
+    pointer-events: none;
+  }
+
+  .terminal-text {
+    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    font-variant-ligatures: contextual;
+  }
+
+  .log-success {
+    color: #7ee787;
+  }
+
+  .log-skip {
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  .log-error {
+    color: #ff7b72;
+  }
+
+  .log-folder {
+    color: #79c0ff;
+  }
 }