refactor: move footer into its own component

src/components/LandingPage.vue

@@ -34,6 +34,7 @@ import { useStashStore } from "../stores/auras";
 import type { Account, AddonConfig, AuraType, Version } from "../stores/config";
 import { useConfigStore } from "../stores/config";
 import About from "./UI/About.vue";
+import AppFooter from "./UI/AppFooter.vue";
 import Aura from "./UI/Aura.vue";
 import AuraHeaders from "./UI/AuraHeaders.vue";
 import Config from "./UI/Config.vue";
@@ -55,7 +56,7 @@ type UpdaterEventArg =
   | { status: "checking-for-update" }
   | { status: "update-available"; updateInfo: UpdateInfo };
 
-interface Updater {
+export interface Updater {
   status: string | null;
   progress: number | null;
   scheduleId: NodeJS.Timeout | null;
@@ -94,6 +95,7 @@ export default defineComponent({
     UIButton,
     Dropdown,
     StopMotion,
+    AppFooter,
   },
   setup() {
     const config = useConfigStore();
@@ -690,112 +692,12 @@ export default defineComponent({
           :wow-versions="versionOptions"
         />
       </main>
-      <footer>
-        <a
-          class="getweakauras"
-          href="https://www.curseforge.com/wow/addons/weakauras-2"
-          target="_blank"
-        >
-          <i
-            class="i-social-curse align-middle text-xl -mt-[2px]"
-            title="CurseForge"
-          />
-          {{ $t("app.footer.getweakauras" /* Get WeakAuras! */) }}
-        </a>
-        <a
-          class="browsewago"
-          href="https://wago.io/weakauras"
-          target="_blank"
-        >
-          <i
-            class="i-social-wago align-middle text-xl -mt-[2px]"
-            title="Wago"
-          />
-          {{ $t("app.footer.browsewago" /* Browse Wago for more auras! */) }}
-        </a>
-        <a
-          class="reportbug"
-          @click="toggleReport()"
-        >
-          {{ $t("app.footer.reportbug" /* Found a bug? */) }}
-          <i
-            class="i-mdi-bug align-middle text-xl -mt-[2px]"
-            title="Bug"
-          />
-        </a>
-        <div
-          v-if="stash.auras.length > 0"
-          class="ready-to-install"
-          @click="toggleUpdatedAuraList()"
-        >
-          <span>
-            {{ $t("app.footer.readytoinstall" /* Ready To Install */) }}
-            ({{ stash.auras.length }})
-          </span>
-          <i
-            v-tooltip="{
-              strategy: 'fixed',
-              theme: 'info-tooltip',
-              html: true,
-              content: `${$t(
-                'app.main.readyForInstall' /* Ready for Install */,
-              )}${readyForInstallTooltip}`,
-            }"
-            class="update-available update-auras i-mdi-download mt-[2px] align-middle text-2xl"
-          >
-            download
-          </i>
-        </div>
-        <div class="app-update">
-          <a
-            v-if="updater.status === 'update-available'"
-            :href="updater.path"
-            target="_blank"
-          >
-            <i
-              v-if="updater.status === 'update-available'"
-              v-tooltip="{
-                strategy: 'fixed',
-                theme: 'info-tooltip',
-                html: true,
-                content: `${$t(
-                  'app.main.installUpdate' /* Install client update */,
-                )}: v${updater.version} ${updater.releaseNotes}`,
-              }"
-              class="update-available i-mdi-download-box-outline mt-[2px] align-middle text-2xl"
-            >
-              download-box-outline
-            </i>
-          </a>
-          <i
-            v-if="updater.status === 'update-downloaded'"
-            v-tooltip="{
-              strategy: 'fixed',
-              theme: 'info-tooltip',
-              content: `${$t(
-                'app.main.installUpdate' /* Install client update */,
-              )}: v${updater.version}`,
-            }"
-            class="update-available i-mdi-download-box-outline mt-[2px] align-middle text-2xl"
-            @click="installUpdates"
-          >
-            download-box-outline
-          </i>
-          <div
-            v-if="updater.status === 'checking-for-update'"
-            class="updating"
-          >
-            <span class="i-mdi-sync text-2xl"></span>
-          </div>
-          <div
-            v-if="updater.status === 'download-progress'"
-            class="updating"
-          >
-            <span class="progress">{{ updater.progress }}%</span>
-            <i class="icon i-mdi-sync align-middle text-2xl">sync</i>
-          </div>
-        </div>
-      </footer>
+      <AppFooter
+        :updater="updater"
+        @toggle-report="toggleReport"
+        @toggle-updated-aura-list="toggleUpdatedAuraList"
+        @install-updates="installUpdates"
+      />
     </div>
     <Report v-if="reportIsShown" />
     <UpdatedAuraList v-if="updateAuraIsShown" />
@@ -1063,69 +965,4 @@ select {
   background-color: #e6e6e6;
   color: #010101;
 }
-
-.app-update {
-  float: right;
-  margin-right: 15px;
-  height: 25px;
-  position: relative;
-  bottom: 2px;
-}
-
-.app-update .updating {
-  display: inline;
-}
-
-.updating .icon {
-  animation: spin;
-  animation-duration: 3000ms;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-  animation-fill-mode: forwards;
-}
-
-.updating .progress {
-  font-size: 14px;
-  font-weight: 500;
-  margin: auto;
-  vertical-align: middle;
-  position: relative;
-  bottom: 7px;
-}
-
-.update-available {
-  animation: pulse 2s infinite;
-  cursor: pointer;
-  color: #51ae42 !important;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(-360deg);
-  }
-}
-
-@keyframes pulse {
-  0% {
-    text-shadow:
-      0 0 0 rgba(102, 255, 0, 1),
-      0 0 0 rgba(255, 255, 255, 0.4);
-  }
-
-  70% {
-    text-shadow:
-      0 0 40px rgba(102, 255, 0, 1),
-      0 0 40px rgba(238, 255, 4, 0);
-  }
-
-  100% {
-    text-shadow:
-      0 0 0 rgba(102, 255, 0, 1),
-      0 0 0 rgba(255, 255, 255, 0);
-  }
-}
 </style>