fix: improve sidebar scroll and node install progress

Author: thachvd-tfo

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tauri-app",
   "private": true,
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "tauri-app"
-version = "1.0.5"
+version = "1.0.6"
 description = "A Tauri App"
 authors = ["you"]
 edition = "2021"

src-tauri/Cargo.toml

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "DevStack",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "identifier": "com.devstack.desktop",
   "build": {
     "beforeDevCommand": "npm run dev",

src-tauri/tauri.conf.json

@@ -101,10 +101,10 @@ function App() {
         <div className="w-16" />
       </div>
 
-      <div className="flex-1 flex overflow-hidden">
+      <div className="flex-1 min-h-0 flex overflow-hidden">
         <Sidebar />
 
-        <main className="flex-1 flex flex-col bg-[#13151a] overflow-hidden">
+        <main className="flex-1 min-h-0 flex flex-col bg-[#13151a] overflow-hidden">
           {activePage === 'services' && <PageServices />}
           {activePage === 'sites' && <PageSites />}
           {activePage === 'database' && <PageDatabase />}

src/App.jsx

@@ -22,15 +22,15 @@ const Sidebar = () => {
   const ramPct = systemStats.ramTotal ? Math.round((systemStats.ram / systemStats.ramTotal) * 100) : 0;
 
   return (
-    <div className="w-[200px] bg-bg border-r border-[#1a1c22] flex flex-col p-4 pt-4 gap-0.5 flex-shrink-0">
+    <div className="w-[200px] min-h-0 overflow-hidden bg-bg border-r border-[#1a1c22] flex flex-col p-4 pt-4 gap-0.5 flex-shrink-0">
       <div className="px-3 pb-5">
         <div className="text-xl font-extrabold tracking-tighter text-text">
           dev<span className="text-accent">stack</span>
         </div>
         <div className="text-[10px] text-muted font-mono mt-0.5">v1.0.0</div>
       </div>
 
-      <nav className="flex flex-col gap-0.5 flex-1">
+      <nav className="flex flex-col gap-0.5 flex-1 min-h-0 overflow-y-auto overflow-x-hidden pr-1">
         {navItems.map((item) => {
           const Icon = item.icon;
           return (
@@ -80,7 +80,7 @@ const Sidebar = () => {
       </nav>
 
       {/* System Status Bar */}
-      <div className="p-3.5 bg-surface rounded-xl mt-auto">
+      <div className="p-3.5 bg-surface rounded-xl mt-4 flex-shrink-0">
         <div className="text-[10px] text-muted font-bold tracking-widest uppercase mb-2.5">{t('system')}</div>
         <div className="mb-2">
           <div className="flex justify-between text-[11px] mb-1">

src/components/Sidebar.jsx

@@ -78,16 +78,19 @@ export const createNodeSlice = (set, get) => ({
             nodeInstallProgress: { pct: 0, downloaded: 0, total: 0 }
         }));
 
+        let unlistenLogs = null;
+        let unlistenProgress = null;
+
         try {
             const { invoke } = await import('@tauri-apps/api/core');
             const { listen } = await import('@tauri-apps/api/event');
 
-            const unlistenLogs = await listen('node-install-log', (event) => {
+            unlistenLogs = await listen('node-install-log', (event) => {
                 const line = event.payload;
                 set(s => ({ nodeInstallLogs: [...s.nodeInstallLogs, { t: new Date().toLocaleTimeString(), m: line, l: 'info' }] }));
             });
 
-            const unlistenProgress = await listen('download-progress', (event) => {
+            unlistenProgress = await listen('download-progress', (event) => {
                 const { svcType, pct, downloaded, total } = event.payload || {};
                 if (svcType === 'node') {
                     set({
@@ -108,10 +111,15 @@ export const createNodeSlice = (set, get) => ({
                 expectedSizeMb: null
             });
 
-            unlistenLogs();
-            unlistenProgress();
-
             if (result === 'SUCCESS') {
+                set(s => ({
+                    nodeInstallProgress: {
+                        pct: 100,
+                        downloaded: s.nodeInstallProgress.total || s.nodeInstallProgress.downloaded,
+                        total: s.nodeInstallProgress.total || s.nodeInstallProgress.downloaded
+                    },
+                    nodeInstallLogs: [...s.nodeInstallLogs, { t: new Date().toLocaleTimeString(), m: 'Progress complete.', l: 'info' }]
+                }));
                 await get().scanInstalledNode();
                 const activeNode = get().nodeVersions.find(v => v.active);
                 if (!activeNode) {
@@ -128,6 +136,13 @@ export const createNodeSlice = (set, get) => ({
                 nodeInstallLogs: [...s.nodeInstallLogs, { t: new Date().toLocaleTimeString(), m: `Error: ${e}`, l: 'err' }]
             }));
             get().showToast(get().t('nodeInstallFailed', { error: `${e}` }), 'danger');
+        } finally {
+            if (typeof unlistenLogs === 'function') {
+                unlistenLogs();
+            }
+            if (typeof unlistenProgress === 'function') {
+                unlistenProgress();
+            }
         }
     },