Custom icon and task bar added

frontend/css/components.css

@@ -174,7 +174,15 @@
   flex: 1;
   display: flex;
   align-items: center;
+  gap: 14px;
   padding: 0 18px;
+  min-width: 0;
+}
+
+.gd-toolbar-drag-space {
+  align-self: stretch;
+  flex: 1;
+  min-width: 40px;
 }
 
 /* Right section – view toggle + utility menu */
@@ -187,6 +195,38 @@
   flex-shrink: 0;
 }
 
+.gd-window-controls {
+  display: flex;
+  align-items: stretch;
+  flex-shrink: 0;
+  border-left: 1px solid rgba(229, 161, 62, 0.12);
+}
+
+.gd-window-control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 46px;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+
+.gd-window-control:hover {
+  background: rgba(229, 161, 62, 0.1);
+  color: var(--text-main);
+}
+
+.gd-window-close:hover {
+  background: var(--danger);
+  color: #ffffff;
+}
+
 .gd-external-actions {
   display: flex;
   align-items: center;

frontend/js/app.js

@@ -66,6 +66,53 @@ const PUSH_ICON = `<svg width="15" height="15" viewBox="0 0 16 16" aria-hidden="
 const PUBLISH_ICON = `<svg width="15" height="15" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M8 1.25a.75.75 0 0 1 .75.75v1.13A3.001 3.001 0 0 1 11 6v.5h1.25A1.75 1.75 0 0 1 14 8.25v4A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-4A1.75 1.75 0 0 1 3.75 6.5H5V6a3.001 3.001 0 0 1 2.25-2.87V2A.75.75 0 0 1 8 1.25ZM6.5 6v.5h3V6a1.5 1.5 0 0 0-3 0Zm-.53 4.28 1.5-1.5a.75.75 0 0 1 1.06 0l1.5 1.5a.75.75 0 1 1-1.06 1.06l-.22-.22v1.13a.75.75 0 0 1-1.5 0v-1.13l-.22.22a.75.75 0 0 1-1.06-1.06Z"/></svg>`;
 const EXPLORER_ICON = `<svg width="15" height="15" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M1.75 2A1.75 1.75 0 0 0 0 3.75v8.5C0 13.216.784 14 1.75 14h12.5A1.75 1.75 0 0 0 16 12.25v-6.5A1.75 1.75 0 0 0 14.25 4H7.5a.25.25 0 0 1-.2-.1l-.9-1.2A1.75 1.75 0 0 0 5 2H1.75Zm0 1.5H5a.25.25 0 0 1 .2.1l.9 1.2c.331.441.85.7 1.4.7h6.75a.25.25 0 0 1 .25.25v6.5a.25.25 0 0 1-.25.25H1.75a.25.25 0 0 1-.25-.25v-8.5a.25.25 0 0 1 .25-.25Z"/></svg>`;
 const EDITOR_ICON = `<svg width="15" height="15" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-7.7 7.7a1.75 1.75 0 0 1-.744.44l-3.018.862a.75.75 0 0 1-.927-.927l.862-3.018a1.75 1.75 0 0 1 .44-.744l7.527-7.873ZM12.427 2.487a.25.25 0 0 0-.354 0l-.963.963 1.44 1.44.963-.963a.25.25 0 0 0 0-.354l-1.086-1.086ZM11.49 5.95l-1.44-1.44-5.503 5.503a.25.25 0 0 0-.063.106l-.558 1.955 1.955-.558a.25.25 0 0 0 .106-.063L11.49 5.95ZM1 14.25a.75.75 0 0 1 .75-.75h12.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1-.75-.75Z"/></svg>`;
+const WINDOW_MINIMIZE_ICON = `<svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path fill="currentColor" d="M2 6.75h8v1.5H2z"/></svg>`;
+const WINDOW_MAXIMIZE_ICON = `<svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M2.75 2h6.5c.414 0 .75.336.75.75v6.5a.75.75 0 0 1-.75.75h-6.5A.75.75 0 0 1 2 9.25v-6.5c0-.414.336-.75.75-.75Zm.75 1.5v5h5v-5h-5Z"/></svg>`;
+const WINDOW_CLOSE_ICON = `<svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path fill="currentColor" d="M3.28 2.22a.75.75 0 0 0-1.06 1.06L4.94 6 2.22 8.72a.75.75 0 1 0 1.06 1.06L6 7.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L7.06 6l2.72-2.72a.75.75 0 0 0-1.06-1.06L6 4.94 3.28 2.22Z"/></svg>`;
+
+function currentTauriWindow() {
+  const tauriWindow = window.__TAURI__?.window;
+  if (tauriWindow?.getCurrentWindow) {
+    return tauriWindow.getCurrentWindow();
+  }
+  return tauriWindow?.appWindow || null;
+}
+
+async function handleWindowAction(action) {
+  const appWindow = currentTauriWindow();
+  if (!appWindow) {
+    console.warn("Tauri window API not available");
+    return;
+  }
+
+  try {
+    if (action === "minimize") {
+      await appWindow.minimize();
+    } else if (action === "maximize") {
+      const isMaximized = await appWindow.isMaximized();
+      if (isMaximized) {
+        await appWindow.unmaximize();
+      } else {
+        await appWindow.maximize();
+      }
+    } else if (action === "close") {
+      await appWindow.close();
+    }
+  } catch (error) {
+    console.error(`Unable to ${action} window:`, error);
+  }
+}
+
+async function startWindowDrag() {
+  const appWindow = currentTauriWindow();
+  if (!appWindow) return;
+
+  try {
+    await appWindow.startDragging();
+  } catch (error) {
+    console.error("Unable to start window drag:", error);
+  }
+}
 
 function uid() {
   return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
@@ -1176,6 +1223,7 @@ function dashboardView() {
           <span class="gd-cell-label">${escapeHtml(syncCfg.subLabel)}</span>
         </span>
       </button>
+      <div class="gd-toolbar-drag-space" data-tauri-drag-region aria-hidden="true"></div>
     </div>
 
     <div class="gd-toolbar-right">
@@ -1229,6 +1277,11 @@ function dashboardView() {
         </div>` : ""}
       </div>
     </div>
+    <div class="gd-window-controls" role="group" aria-label="Window controls">
+      <button class="gd-window-control" type="button" data-window-action="minimize" title="Minimize" aria-label="Minimize window">${WINDOW_MINIMIZE_ICON}</button>
+      <button class="gd-window-control" type="button" data-window-action="maximize" title="Maximize" aria-label="Maximize window">${WINDOW_MAXIMIZE_ICON}</button>
+      <button class="gd-window-control gd-window-close" type="button" data-window-action="close" title="Close" aria-label="Close window">${WINDOW_CLOSE_ICON}</button>
+    </div>
   `;
 
   // ── Sidebar content ─────────────────────────────────────────────────────
@@ -2065,6 +2118,11 @@ function bindDashboardEvents() {
   document.getElementById("open-file-explorer-menu-btn")?.addEventListener("click", openSelectedRepoInFileExplorer);
   document.getElementById("open-code-editor-btn")?.addEventListener("click", openSelectedRepoInCodeEditor);
   document.getElementById("open-code-editor-menu-btn")?.addEventListener("click", openSelectedRepoInCodeEditor);
+  document.querySelectorAll("[data-window-action]").forEach((button) => {
+    button.addEventListener("click", () => handleWindowAction(button.dataset.windowAction || ""));
+  });
+  document.querySelector(".gd-toolbar-drag-space")?.addEventListener("mousedown", startWindowDrag);
+  document.querySelector(".gd-toolbar-drag-space")?.addEventListener("dblclick", () => handleWindowAction("maximize"));
 
   // Modal close
   document.getElementById("modal-close-btn")?.addEventListener("click", () => {

src-tauri/capabilities/default.json

@@ -5,6 +5,13 @@
   "windows": ["main"],
   "permissions": [
     "core:default",
+    "core:window:allow-minimize",
+    "core:window:allow-maximize",
+    "core:window:allow-unmaximize",
+    "core:window:allow-toggle-maximize",
+    "core:window:allow-close",
+    "core:window:allow-is-maximized",
+    "core:window:allow-start-dragging",
     "dialog:default",
     "opener:default"
   ]

src-tauri/tauri.conf.json

@@ -14,7 +14,8 @@
         "width": 1320,
         "height": 860,
         "minWidth": 1024,
-        "minHeight": 680
+        "minHeight": 680,
+        "decorations": false
       }
     ],
     "security": {
@@ -29,7 +30,7 @@
       "icons/128x128.png",
       "icons/128x128@2x.png",
       "icons/icon.icns",
-      "icons/icon.ico"
+      "../frontend/assets/icons/GitpubDesktop-Icon.ico"
     ]
   }
 }