Expert instalation progres page revamp

src/App.vue

@@ -6,7 +6,6 @@
       <h2>ESP-IDF Installation Manager</h2>
     </header>
     <router-view></router-view>
-    <global-progress />
     <!-- Footer -->
     <footer class="footer">
       ESP-IDF Installation Manager {{ appVersion }}
@@ -18,8 +17,6 @@
 import { NConfigProvider, NLayout, NLayoutHeader, NLayoutContent, useOsTheme } from 'naive-ui'
 import { darkTheme } from 'naive-ui'
 import { ref, onMounted } from 'vue'
-import MessageDisplay from './components/MessageDisplay.vue'
-import GlobalProgress from './components/GlobalProgress.vue'
 import { attachConsole } from '@tauri-apps/plugin-log'
 import { getVersion } from '@tauri-apps/api/app';
 

src/components/wizard_steps/Complete.vue

@@ -17,27 +17,28 @@
               </n-alert>
             </div>
 
-            <div class="config-save" data-id="config-save-section">
-              <n-alert type="info" data-id="save-config-alert">
-                <template #icon>
-                  <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" data-id="save-icon">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
-                  </svg>
-                </template>
-                Save your configuration to reproduce this installation on other machines
-              </n-alert>
-            </div>
+
           </div>
 
           <div class="buttons" data-id="action-buttons">
-            <n-button @click="save_config" type="info" class="save-button" data-id="save-config-button">
+            <n-button @click="save_config" type="info" class="save-button" dashed data-id="save-config-button">
               Save Configuration
             </n-button>
-            <n-button @click="quit" type="error" data-id="exit-button">
+            <n-button @click="quit" class="exit-button" type="info" data-id="exit-button">
               Exit Installer
             </n-button>
           </div>
+          <div class="config-save" data-id="config-save-section">
+            <n-alert type="info" data-id="save-config-alert">
+              <template #icon>
+                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" data-id="save-icon">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
+                </svg>
+              </template>
+              Save your configuration to reproduce this installation on other machines
+            </n-alert>
+          </div>
         </div>
       </template>
     </n-result>
@@ -122,7 +123,27 @@ export default {
   justify-content: center;
 }
 
+.n-button {
+  background-color: white;
+}
+
+.n-button.exit-button {
+  background-color: #1290d8;
+}
+
 .save-button {
   min-width: 160px;
 }
+
+/* .exit-button {
+  color: black;
+  background-color: #1290d8;
+  border-color: #5AC8FA;
+}
+
+.exit-button:hover {
+  color: black;
+  background-color: #429acd;
+  border-color: #5AC8FA;
+} */
 </style>

src/components/wizard_steps/InstalationProgress.vue

@@ -3,7 +3,7 @@
     <h1 class="title" data-id="installation-title">Installation Progress</h1>
 
     <n-card class="progress-card" data-id="progress-card">
-      <div class="summary-section" data-id="installation-summary" v-if="!instalation_running">
+      <div class="summary-section" data-id="installation-summary" v-if="!instalation_running && !instalation_finished">
         <div class="versions-info" v-if="all_settings" data-id="versions-info">
           <h3 data-id="versions-title">Installing ESP-IDF Versions:</h3>
           <div class="version-chips" data-id="version-chips">
@@ -13,11 +13,6 @@
             </div>
           </div>
         </div>
-        <div v-if="instalation_finished" data-id="complete-button-container">
-          <n-button @click="nextstep" type="error" size="large" data-id="complete-installation-button">
-            Complete Installation
-          </n-button>
-        </div>
         <div v-else data-id="start-button-container">
           <n-button @click="startInstalation()" type="error" size="large" :loading="instalation_running"
             :disabled="instalation_running" data-id="start-installation-button">
@@ -57,6 +52,17 @@
             </n-table>
           </n-tab-pane>
         </n-tabs>
+        <div class="progress-container">
+          <div class="progress-content">
+            <span class="progress-message">{{ progressMessage }}</span>
+            <n-progress type="line" color="#E8362D" :status="progressStatus" :percentage="progressPercentage"
+              :height="10" :show-indicator="true" indicator-placement="inside" class="progress-bar" processing>
+              <template #indicator>
+                {{ progressPercentage }}%
+              </template>
+            </n-progress>
+          </div>
+        </div>
       </div>
 
       <div class="action-footer" v-if="instalation_finished" data-id="action-footer">
@@ -89,6 +95,11 @@ export default {
     tools: {},
     unlisten: undefined,
     unlistenTools: undefined,
+    unlistenProgress: undefined,
+    progressMessage: "",
+    progressStatus: "info",
+    progressPercentage: "0",
+    progressDisplay_progress: true,
     instalation_running: false,
     instalation_finished: false,
     curently_installing_version: undefined,
@@ -156,6 +167,16 @@ export default {
         }
       });
     },
+    startListeningToInstalationProgress: async function () {
+      console.log('Listening for progress messages...');
+      this.progressDisplay_progress = true;
+      this.unlistenProgress = await listen('progress-message', (event) => {
+        this.progressMessage = event.payload.message;
+        this.progressStatus = event.payload.status;
+        this.progressPercentage = event.payload.percentage;
+      })
+      this.progressDisplay_progress = false;
+    },
     get_settings: async function () {
       this.all_settings = await invoke("get_settings", {});;
     },
@@ -176,10 +197,12 @@ export default {
     this.get_os();
     this.get_settings();
     this.startListening();
+    this.startListeningToInstalationProgress();
   },
   beforeDestroy() {
     if (this.unlisten) this.unlisten();
     if (this.unlistenTools) this.unlistenTools();
+    if (this.unlistenProgress) this.unlistenProgress();
   },
 
 }
@@ -251,7 +274,6 @@ export default {
   justify-content: center;
   margin-top: 2rem;
   padding-top: 1rem;
-  border-top: 1px solid #e5e7eb;
 }
 
 .idf-version {
@@ -298,4 +320,16 @@ tr>td:first-child {
   max-height: 300px;
   overflow-y: auto;
 }
+
+.progress-container {
+  width: 75%;
+  margin: auto;
+  margin-top: 20px;
+}
+
+.progress-content {
+  display: flex;
+  vertical-align: middle;
+  justify-content: center;
+}
 </style>

src/components/wizard_steps/VersionSelect.vue

@@ -27,7 +27,7 @@
         <div class="selected-versions-summary" v-if="selected_versions.length > 0">
           Selected versions:
           <div class="selected-tags" data-id="selected-tags">
-            <n-tag v-for="version in selected_versions" :key="version" closable round="true" size="medium"
+            <n-tag v-for="version in selected_versions" :key="version" closable round size="medium"
               :data-id="`selected-tag-${version}`" @close="deselectVersion(version)">
               {{ version }}
             </n-tag>
@@ -88,7 +88,7 @@ export default {
   },
   computed: {
     hasSelectedVersions() {
-      return this.versions.some(version => version.selected);
+      return this.selected_versions.length > 0;
     },
     selectedVersions() {
       return this.selected_versions