Refactor vue components

src/renderer/src/App.vue

@@ -613,13 +613,9 @@ body {
 }
 
 .wizard-sidebar .stats .card-body {
-  padding: 0.2rem;
-}
-
-.wizard-sidebar .stats .card-body h1 {
+  padding: 0.7rem 0.2rem;
   font-size: 1.5em;
   margin-bottom: 0;
-  padding: 0.5rem 0 0.5rem 0;
 }
 
 .wizard-review ul {

src/renderer/src/views/facebook/components/FacebookJobStatusComponent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FacebookJob } from "../../../../../shared_types";
-import RunningIcon from "../../shared_components/RunningIcon.vue";
+import StatusComponent from "../../shared_components/StatusComponent.vue";
 
 defineProps<{
   jobs: FacebookJob[];
@@ -17,15 +17,6 @@ const emit = defineEmits([
   "onClickingEnabled",
 ]);
 
-const getStatusIcon = (status: string) => {
-  const statusIcons: { [key: string]: string } = {
-    pending: "fa-solid fa-ellipsis text-primary",
-    finished: "fa-solid fa-square-check text-success",
-    canceled: "fa-solid fa-circle-exclamation text-danger",
-  };
-  return statusIcons[status] || "";
-};
-
 const getJobTypeText = (jobType: string) => {
   const jobTypeTexts: { [key: string]: string } = {
     login: "Logging in",
@@ -38,86 +29,16 @@ const getJobTypeText = (jobType: string) => {
 </script>
 
 <template>
-  <div class="job-status-list">
-    <div
-      v-for="job in jobs"
-      :key="job.id ?? 0"
-      class="job-status-item d-flex align-items-center"
-    >
-      <div class="status-icon me-2">
-        <i v-if="job.status !== 'running'" :class="getStatusIcon(job.status)" />
-        <i v-else-if="isPaused" class="fa-solid fa-pause" />
-        <RunningIcon v-else />
-      </div>
-      <div class="job-type">
-        {{ getJobTypeText(job.jobType) }}
-      </div>
-    </div>
-    <div class="d-flex justify-content-center mt-2">
-      <button
-        v-if="!isPaused"
-        class="btn btn-outline-secondary btn-sm"
-        @click="emit('onPause')"
-      >
-        <i class="fa-solid fa-pause" /> Pause
-      </button>
-      <button
-        v-if="isPaused"
-        class="btn btn-primary btn-sm"
-        @click="emit('onResume')"
-      >
-        <i class="fa-solid fa-play" /> Resume
-      </button>
-      <button
-        class="btn btn-outline-danger btn-sm btn-cancel"
-        @click="emit('onCancel')"
-      >
-        <i class="fa-regular fa-circle-xmark" /> Cancel
-      </button>
-    </div>
-    <div class="d-flex justify-content-center">
-      <button class="btn btn-link btn-sm" @click="emit('onReportBug')">
-        Report a Bug
-      </button>
-    </div>
-    <div class="d-flex justify-content-center">
-      <button
-        class="btn btn-link btn-sm"
-        @click="
-          clickingEnabled
-            ? emit('onClickingDisabled')
-            : emit('onClickingEnabled')
-        "
-      >
-        {{ clickingEnabled ? "Disable" : "Enable" }} Clicking in Browser
-      </button>
-    </div>
-  </div>
+  <StatusComponent
+    :jobs="jobs"
+    :get-job-type-text="getJobTypeText"
+    :is-paused="isPaused"
+    :clicking-enabled="clickingEnabled"
+    @on-pause="emit('onPause')"
+    @on-resume="emit('onResume')"
+    @on-cancel="emit('onCancel')"
+    @on-report-bug="emit('onReportBug')"
+    @on-clicking-enabled="emit('onClickingEnabled')"
+    @on-clicking-disabled="emit('onClickingDisabled')"
+  />
 </template>
-
-<style scoped>
-.job-status-list {
-  padding: 10px;
-}
-
-.job-status-item {
-  display: flex;
-  align-items: center;
-}
-
-.status-icon {
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.job-type {
-  font-size: 16px;
-}
-
-.btn-cancel {
-  margin-left: 5px;
-}
-</style>

src/renderer/src/views/facebook/wizard/FacebookWizardSidebar.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
 import {
   State,
   FacebookViewModel,
 } from "../../../view_models/FacebookViewModel";
 import SidebarArchive from "../../shared_components/SidebarArchive.vue";
+import DebugModeComponent from "../../shared_components/DebugModeComponent.vue";
 
 // Props
 defineProps<{
@@ -16,22 +16,6 @@ const emit = defineEmits<{
   setState: [value: State];
   setDebugAutopauseEndOfStep: [value: boolean];
 }>();
-
-// Debug
-const shouldOpenDevtools = ref(false);
-const debugAutopauseEndOfStep = ref(false);
-
-const debugAutopauseEndOfStepChanged = async () => {
-  emit("setDebugAutopauseEndOfStep", debugAutopauseEndOfStep.value);
-};
-
-const enableDebugMode = async () => {
-  emit("setState", State.Debug);
-};
-
-onMounted(async () => {
-  shouldOpenDevtools.value = await window.electron.shouldOpenDevtools();
-});
 </script>
 
 <template>
@@ -62,29 +46,7 @@ onMounted(async () => {
       :account-type="model.account.type"
     />
 
-    <!-- Debug mode -->
-    <div v-if="shouldOpenDevtools" class="p-3 small">
-      <hr />
-
-      <div class="mb-3">
-        <button class="btn btn-sm btn-danger" @click="enableDebugMode">
-          Debug Mode
-        </button>
-      </div>
-
-      <div class="form-check">
-        <input
-          id="debugAutopauseEndOfStep"
-          v-model="debugAutopauseEndOfStep"
-          type="checkbox"
-          class="form-check-input"
-          @change="debugAutopauseEndOfStepChanged"
-        />
-        <label class="form-check-label" for="debugAutopauseEndOfStep">
-          Automatically pause before finishing each step
-        </label>
-      </div>
-    </div>
+    <DebugModeComponent :emit="emit" :debug-state="State.Debug" />
   </div>
 </template>
 

src/renderer/src/views/shared_components/DebugModeComponent.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+// Props
+const props = defineProps<{
+  emit: Function;
+  debugState: string;
+}>();
+
+// Debug
+const shouldOpenDevtools = ref(false);
+const debugAutopauseEndOfStep = ref(false);
+
+const debugAutopauseEndOfStepChanged = async () => {
+  props.emit("setDebugAutopauseEndOfStep", debugAutopauseEndOfStep.value);
+};
+
+const enableDebugMode = async () => {
+  props.emit("setState", props.debugState);
+};
+
+onMounted(async () => {
+  shouldOpenDevtools.value = await window.electron.shouldOpenDevtools();
+});
+</script>
+
+<template>
+  <!-- Debug mode -->
+  <div v-if="shouldOpenDevtools" class="p-3 small">
+    <hr />
+
+    <div class="mb-3">
+      <button class="btn btn-sm btn-danger" @click="enableDebugMode">
+        Debug Mode
+      </button>
+    </div>
+
+    <div class="form-check">
+      <input
+        id="debugAutopauseEndOfStep"
+        v-model="debugAutopauseEndOfStep"
+        type="checkbox"
+        class="form-check-input"
+        @change="debugAutopauseEndOfStepChanged"
+      />
+      <label class="form-check-label" for="debugAutopauseEndOfStep">
+        Automatically pause before finishing each step
+      </label>
+    </div>
+  </div>
+</template>

src/renderer/src/views/shared_components/SidebarCard.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// Props
+defineProps<{
+  header: string;
+  stat: number;
+}>();
+
+// Util
+function formatStatsNumber(num: number): string {
+  if (num >= 1000) {
+    return (num / 1000).toFixed(1) + "k";
+  }
+  return num.toString();
+}
+</script>
+
+<template>
+  <div class="col-12">
+    <div class="card text-center">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div class="card-header" v-html="header"></div>
+      <div class="card-body">{{ formatStatsNumber(stat) }}</div>
+    </div>
+  </div>
+</template>

src/renderer/src/views/shared_components/StatusComponent.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { FacebookJob } from "../../../../shared_types";
+import type { XJob } from "../../../../shared_types";
+import RunningIcon from "./RunningIcon.vue";
+
+defineProps<{
+  jobs: FacebookJob[] | XJob[];
+  isPaused: boolean;
+  clickingEnabled: boolean;
+  getJobTypeText: Function;
+}>();
+
+const emit = defineEmits([
+  "onPause",
+  "onResume",
+  "onCancel",
+  "onReportBug",
+  "onClickingDisabled",
+  "onClickingEnabled",
+]);
+
+const getStatusIcon = (status: string) => {
+  const statusIcons: { [key: string]: string } = {
+    pending: "fa-solid fa-ellipsis text-primary",
+    finished: "fa-solid fa-square-check text-success",
+    canceled: "fa-solid fa-circle-exclamation text-danger",
+  };
+  return statusIcons[status] || "";
+};
+</script>
+
+<template>
+  <div class="job-status-list">
+    <div
+      v-for="job in jobs"
+      :key="job.id ?? 0"
+      class="job-status-item d-flex align-items-center"
+    >
+      <div class="status-icon me-2">
+        <i v-if="job.status !== 'running'" :class="getStatusIcon(job.status)" />
+        <i v-else-if="isPaused" class="fa-solid fa-pause" />
+        <RunningIcon v-else />
+      </div>
+      <div class="job-type">
+        {{ getJobTypeText(job.jobType) }}
+      </div>
+    </div>
+    <div class="d-flex justify-content-center mt-2">
+      <button
+        v-if="!isPaused"
+        class="btn btn-outline-secondary btn-sm"
+        @click="emit('onPause')"
+      >
+        <i class="fa-solid fa-pause" /> Pause
+      </button>
+      <button
+        v-if="isPaused"
+        class="btn btn-primary btn-sm"
+        @click="emit('onResume')"
+      >
+        <i class="fa-solid fa-play" /> Resume
+      </button>
+      <button
+        class="btn btn-outline-danger btn-sm btn-cancel"
+        @click="emit('onCancel')"
+      >
+        <i class="fa-regular fa-circle-xmark" /> Cancel
+      </button>
+    </div>
+    <div class="d-flex justify-content-center">
+      <button class="btn btn-link btn-sm" @click="emit('onReportBug')">
+        Report a Bug
+      </button>
+    </div>
+    <div class="d-flex justify-content-center">
+      <button
+        class="btn btn-link btn-sm"
+        @click="
+          clickingEnabled
+            ? emit('onClickingDisabled')
+            : emit('onClickingEnabled')
+        "
+      >
+        {{ clickingEnabled ? "Disable" : "Enable" }} Clicking in Browser
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.job-status-list {
+  padding: 10px;
+}
+
+.job-status-item {
+  display: flex;
+  align-items: center;
+}
+
+.status-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.job-type {
+  font-size: 16px;
+}
+
+.btn-cancel {
+  margin-left: 5px;
+}
+</style>