feat: global progress bar

Also fix me having no foresight and executing things
inside log::debug! macros

src/components/App.vue

@@ -88,6 +88,60 @@ listen<string>('launch-error', (event) => {
     errorMessage.value = event.payload;
     errorHeader.value = 'Launch error';
 });
+
+interface DownloadingStatus {
+    ratio: number;
+    pkg_key: string;
+}
+const downloading_status: Ref<DownloadingStatus[]> = ref([]);
+
+const download_value = computed(() => {
+    return (
+        downloading_status.value.map((v) => v.ratio).reduce((a, v) => a * v) *
+        100
+    );
+});
+
+const downloadProgressText = computed(() => {
+    if (download_value.value < 7) {
+        return '';
+    }
+    let pkgs = `${downloading_status.value.length} package${downloading_status.value.length === 1 ? '' : 's'}`;
+    if (download_value.value < 14) {
+        return pkgs;
+    } else {
+        return `${pkgs} (${Math.floor(download_value.value)}%)`;
+    }
+});
+
+listen<DownloadingStatus>('download-progress', (event) => {
+    let status = downloading_status.value.find(
+        (v) => v.pkg_key === event.payload.pkg_key
+    );
+
+    if (status === undefined) {
+        status = {
+            ratio: 0,
+            pkg_key: event.payload.pkg_key,
+        };
+        downloading_status.value.push(status);
+    }
+    status.ratio = event.payload.ratio;
+
+    const remove = () => {
+        if (status !== undefined) {
+            downloading_status.value = downloading_status.value.filter(
+                (v) => v.pkg_key !== event.payload.pkg_key
+            );
+        }
+    };
+
+    if (status.ratio === 1.0) {
+        remove();
+    }
+
+    setTimeout(() => remove, 10_000);
+});
 </script>
 
 <template>
@@ -102,6 +156,16 @@ listen<string>('launch-error', (event) => {
                     : 'main-scale-xl'
         "
     >
+        <div
+            v-if="downloading_status.length > 0"
+            class="download-progress-bg"
+        ></div>
+        <ProgressBar
+            v-if="downloading_status.length > 0"
+            :value="download_value"
+            class="download-progress"
+            >{{ downloadProgressText }}</ProgressBar
+        >
         <ConfirmDialog>
             <template #message="{ message }">
                 <ScrollPanel
@@ -353,4 +417,23 @@ body {
 .p-progressbar-label {
     transition-duration: 0s !important;
 }
+
+.download-progress {
+    position: fixed !important;
+    bottom: 0;
+    left: 5vw;
+    width: 90vw;
+    z-index: 10000 !important;
+    margin: 20px auto;
+}
+.download-progress-bg {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100vw;
+    height: 60px;
+    background-color: var(--p-surface-900);
+    border-top: 1px solid var(--p-surface-600);
+    z-index: 998;
+}
 </style>

src/components/InstallButton.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import Button from 'primevue/button';
 import { invoke } from '../invoke';
 import { usePkgStore } from '../stores';
@@ -11,20 +12,26 @@ const props = defineProps({
     pkg: Object as () => Package,
 });
 
+const deleting = ref(false);
+
 const remove = async () => {
     if (props.pkg === undefined) {
         return;
     }
 
+    deleting.value = true;
+
     await invoke('delete_package', {
         key: pkgKey(props.pkg),
     });
+
+    deleting.value = false;
 };
 </script>
 
 <template>
     <Button
-        v-if="pkg?.loc && !pkg?.js.busy"
+        v-if="pkg?.loc && !pkg?.js.downloading"
         rounded
         icon="pi pi-trash"
         severity="danger"
@@ -32,7 +39,7 @@ const remove = async () => {
         size="small"
         class="self-center ml-4"
         style="width: 2rem; height: 2rem"
-        :loading="pkg?.js.busy"
+        :loading="deleting"
         v-on:click="remove()"
     />
 
@@ -45,7 +52,7 @@ const remove = async () => {
         size="small"
         class="self-center ml-4"
         style="width: 2rem; height: 2rem"
-        :loading="pkg?.js.busy"
+        :loading="pkg?.js.downloading"
         v-on:click="async () => await pkgs.install(pkg)"
     />
 </template>

src/components/ModList.vue

@@ -15,7 +15,6 @@ const props = defineProps({
 
 const pkgs = usePkgStore();
 const prf = usePrfStore();
-const groupCallIndex = ref(0);
 const empty = ref(false);
 const gameSublist: Ref<string[]> = ref([]);
 
@@ -46,10 +45,7 @@ const group = computed(() => {
             ({ namespace }) => namespace
         )
     );
-    if (groupCallIndex.value > 0) {
-        empty.value = Object.keys(res).length === 0;
-    }
-    groupCallIndex.value += 1;
+    empty.value = Object.keys(res).length === 0;
     return res;
 });
 

src/components/UpdateButton.vue

@@ -20,17 +20,15 @@ const install = async () => {
         });
     } catch (err) {
         if (props.pkg !== undefined) {
-            props.pkg.js.busy = false;
+            props.pkg.js.downloading = false;
         }
     }
-
-    //if (rv === 'Deferred') { /* download progress */ }
 };
 </script>
 
 <template>
     <Button
-        v-if="needsUpdate(pkg) && !pkg?.js.busy"
+        v-if="needsUpdate(pkg) && !pkg?.js.downloading"
         rounded
         icon="pi pi-download"
         severity="success"

src/components/options/Startliner.vue

@@ -76,7 +76,7 @@ const themeModel = computed({
         >
             <ToggleSwitch v-model="verboseModel" />
         </OptionRow>
-        <OptionRow title="Light theme">
+        <OptionRow title="Theme">
             <SelectButton
                 v-model="themeModel"
                 :options="[

src/stores.ts

@@ -119,13 +119,13 @@ export const usePkgStore = defineStore('pkg', {
             listen<InstallStatus>('install-start', async (ev) => {
                 const key = ev.payload.pkg;
                 await this.reload(key);
-                this.pkg[key].js.busy = true;
+                this.pkg[key].js.downloading = true;
             });
 
             listen<InstallStatus>('install-end', async (ev) => {
                 const key = ev.payload.pkg;
                 await this.reload(key);
-                this.pkg[key].js.busy = false;
+                this.pkg[key].js.downloading = false;
             });
         },
 
@@ -152,17 +152,22 @@ export const usePkgStore = defineStore('pkg', {
 
         async reloadWith(key: string, pkg: Package) {
             if (this.pkg[key] === undefined) {
-                this.pkg[key] = { js: { busy: false } } as Package;
+                this.pkg[key] = { js: { downloading: false } } as Package;
             } else {
                 this.pkg[key].loc = null;
                 this.pkg[key].rmt = null;
             }
             Object.assign(this.pkg[key], pkg);
 
+            if (!pkg.js) {
+                pkg.js = { downloading: false };
+            }
+
             if (pkg.rmt !== null) {
                 pkg.rmt.categories.forEach((c) =>
                     this.availableCategories.add(c)
                 );
+                pkg.js.downloading = false;
             }
         },
 
@@ -193,9 +198,8 @@ export const usePkgStore = defineStore('pkg', {
                     force: true,
                 });
             } catch (err) {
-                console.error(err);
                 if (pkg !== undefined) {
-                    pkg.js.busy = false;
+                    pkg.js.downloading = false;
                 }
             }
         },

src/types.ts

@@ -19,7 +19,7 @@ export interface Package {
         icon: string;
     } | null;
     js: {
-        busy: boolean;
+        downloading: boolean;
     };
 }