Enhance EcosystemUpdateIndicator with retry functionality and styling updates

- Refactored EcosystemUpdateIndicator to include a button for retrying ecosystem updates when an error occurs.
- Added tooltip support for better user guidance on retry actions.
- Updated styles for error indicators in both dark and light themes to improve visibility and user experience.
- Introduced a new action in the EcosystemUpdateModule to handle ecosystem schema updates.

Author: 8Qbit

src/components/navigation/EcosystemUpdateIndicator.vue

@@ -1,6 +1,19 @@
 <template>
     <Teleport to="#activity-bar">
-        <div :class="['status-indicator', { 'status-indicator--error': status.isError }]">
+        <button
+            v-if="status.onClick"
+            type="button"
+            :class="['activity-bar__action', 'status-indicator', { 'status-indicator--error-action': status.isError }]"
+            :title="status.tooltip"
+            @click="status.onClick"
+        >
+            <i :class="status.iconClass"></i>
+            <span class="status-indicator__text">{{ status.text }}</span>
+        </button>
+        <div
+            v-else
+            :class="['status-indicator', { 'status-indicator--error': status.isError }]"
+        >
             <i :class="status.iconClass"></i>
             <span class="status-indicator__text">{{ status.text }}</span>
         </div>
@@ -14,12 +27,18 @@ import { State } from '../../store';
 
 const store = getStore<State>();
 
+function retryEcosystemUpdate() {
+    store.dispatch('ecosystemUpdate/updateEcosystemSchema');
+}
+
 const status = computed(() => {
     if (store.state.ecosystemUpdate.isInProgress) {
         return {
             text: "Updating game list",
             iconClass: "fas fa-sync-alt fa-spin",
             isError: false,
+            onClick: undefined,
+            tooltip: undefined,
         };
     }
 
@@ -29,13 +48,17 @@ const status = computed(() => {
             text: errorMessage,
             iconClass: "fas fa-exclamation-circle",
             isError: true,
+            onClick: retryEcosystemUpdate,
+            tooltip: "Retry game list update",
         };
     }
 
     return {
         text: "You have the latest game list",
         iconClass: "fas fa-check",
         isError: false,
+        onClick: undefined,
+        tooltip: undefined,
     };
 });
 </script>
@@ -57,7 +80,20 @@ const status = computed(() => {
     line-height: 1.5;
 }
 
-.status-indicator--error {
-    color: var(--notification-danger, #cc0f35);
+.activity-bar__action .status-indicator__text {
+    padding: 0;
+}
+
+.status-indicator--error-action {
+    margin-left: auto;
+    color: var(--ecosystem-update-error-text, #a3162f);
+    background: var(--ecosystem-update-error-background, #fbe4e7);
+    border: 1px solid var(--ecosystem-update-error-border, #efc2ca);
+}
+
+.status-indicator--error-action:hover {
+    background: var(--ecosystem-update-error-background, #fbe4e7);
+    border-color: var(--ecosystem-update-error-border, #efc2ca);
+    color: var(--ecosystem-update-error-text, #a3162f);
 }
 </style>

src/css/scheme/dark.scss

@@ -72,6 +72,9 @@
 
     --code-font-color: #ffb583;
     --preview-panel-background-color: #1b2837;
+    --ecosystem-update-error-text: #ffc5cf;
+    --ecosystem-update-error-background: #4a1f2a;
+    --ecosystem-update-error-border: #6d3240;
 }
 
 html.html--dark {

src/css/scheme/light.scss

@@ -5,6 +5,9 @@
     --nav-hr-background-color: #ededed;
     --nav-active-color: rgba(132, 152, 184, 0.2);
     --nav-active-text-color: #000000;
+    --ecosystem-update-error-text: #9f1239;
+    --ecosystem-update-error-background: #fce7ec;
+    --ecosystem-update-error-border: #f6cbd5;
 }
 
 // custom vars

src/store/modules/EcosystemUpdateModule.ts

@@ -1,6 +1,7 @@
-import { GetterTree, MutationTree } from 'vuex';
+import { ActionTree, GetterTree, MutationTree } from 'vuex';
 
 import { State as RootState } from '../../store';
+import { EcosystemSchema } from '../../model/schema/ThunderstoreSchema';
 
 export interface EcosystemUpdateState {
     isInProgress: boolean;
@@ -36,4 +37,24 @@ export const EcosystemUpdateModule = {
             state.error = error instanceof Error ? error : new Error(String(error));
         },
     },
+
+    actions: <ActionTree<EcosystemUpdateState, RootState>>{
+        async updateEcosystemSchema({ commit, state }) {
+            if (state.isInProgress) {
+                return;
+            }
+
+            commit('startUpdate');
+
+            try {
+                // Re-evaluate the ecosystem schema. Future remote refresh
+                // logic should be plugged in here.
+                void EcosystemSchema.supportedGames;
+            } catch (e) {
+                commit('setError', e instanceof Error ? e : new Error(String(e)));
+            } finally {
+                commit('finishUpdate');
+            }
+        },
+    },
 };