Add ModListUpdateBanner

The banner will show on top of an empty online mod list, explaining
that the list is empty because splash screen failed to load it. A
one-click option for trying to update the mod list is offered.

This change is adjustment to the fact that the splash screen no longer
stops on errors and user is more likely to reach the manager view with
no mod list loaded into Vuex.

Author: anttimaki

src/components/ModListUpdateBanner.vue

@@ -0,0 +1,78 @@
+<script lang="ts">
+import { mixins } from 'vue-class-component';
+import { Component, Watch } from 'vue-property-decorator';
+
+import UtilityMixin from './mixins/UtilityMixin.vue';
+import ManagerInformation from '../_managerinf/ManagerInformation';
+
+@Component({})
+export default class ModListUpdateBanner extends mixins(UtilityMixin) {
+    updateError = '';
+
+    get appName(): string {
+        return ManagerInformation.APP_NAME;
+    }
+
+    get isModListLoaded(): boolean {
+        return this.$store.state.tsMods.modsLastUpdated !== undefined;
+    }
+
+    get isUpdateInProgress(): boolean {
+        return this.$store.state.tsMods.isBackgroundUpdateInProgress;
+    }
+
+    @Watch('isUpdateInProgress')
+    onLoadingProgressChange(newVal: boolean, oldVal: boolean) {
+        // React to background update as well as the manual update from the banner.
+        if (!oldVal && newVal) {
+            this.updateError = '';
+        }
+    }
+
+    async updateModList() {
+        if (this.isUpdateInProgress) {
+            return;
+        }
+
+        this.$store.commit('tsMods/startBackgroundUpdate');
+        this.updateError = '';
+
+        try {
+            // Invalidate hash to force a refresh. Otherwise a scenario where
+            // the latest index hash is already present in IndexedDB but loading
+            // the package list into Vuex store has failed would cause the banner
+            // to just disappear when refreshThunderstoreModList skips the actual
+            // update but updates the timestamp of the hash.
+            await this.$store.dispatch('tsMods/updateIndexHash', 'invalidated');
+            await this.refreshThunderstoreModList();
+        } catch (e) {
+            this.updateError = `${e}`;
+        } finally {
+            this.$store.commit('tsMods/finishBackgroundUpdate');
+        }
+    }
+}
+</script>
+
+<template>
+    <div v-if="!isModListLoaded" id="mod-list-update-banner" class="margin-bottom">
+        <div class="notification is-warning margin-right">
+            <span v-if="isUpdateInProgress">
+                Updating mod list from Thunderstore...
+            </span>
+            <span v-else-if="updateError">
+                Error updating the mod list: {{ updateError }}<br />
+                {{ appName }} will keep trying to update the mod list in the background.
+            </span>
+            <span v-else>
+                It seems like the latest mod list hasn't been loaded from Thunderstore yet.
+                Would you like to
+                <a @click="updateModList">update now</a>?
+            </span>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/components/views/OnlineModView.vue

@@ -43,6 +43,7 @@
                 </div>
             </div>
         </div>
+        <ModListUpdateBanner />
         <OnlineModList
             :local-mod-list="localModList"
             :paged-mod-list="pagedThunderstoreModList"
@@ -78,10 +79,12 @@ import OnlineModListProvider from '../../providers/components/loaders/OnlineModL
 import SearchUtils from '../../utils/SearchUtils';
 import PaginationButtons from "../navigation/PaginationButtons.vue";
 import { DeferredInput } from "../all";
+import ModListUpdateBanner from "../ModListUpdateBanner.vue";
 
 @Component({
     components: {
         DeferredInput,
+        ModListUpdateBanner,
         OnlineModList: OnlineModListProvider.provider,
         PaginationButtons,
     }