From 8c74c326bc3199d5b69488ef199c38a8a6103a83 Mon Sep 17 00:00:00 2001
From: Saptak S <saptak013@gmail.com>
Date: Tue, 4 Nov 2025 19:33:46 +0530
Subject: [PATCH 1/5] Makes jobStatus component reusable

---
 .../components/FacebookJobStatusComponent.vue | 105 ++--------------
 .../shared_components/StatusComponent.vue     | 115 ++++++++++++++++++
 .../x/components/XJobStatusComponent.vue      | 105 ++--------------
 3 files changed, 141 insertions(+), 184 deletions(-)
 create mode 100644 src/renderer/src/views/shared_components/StatusComponent.vue

diff --git a/src/renderer/src/views/facebook/components/FacebookJobStatusComponent.vue b/src/renderer/src/views/facebook/components/FacebookJobStatusComponent.vue
index 4e4fc2c1..0298d810 100644
--- a/src/renderer/src/views/facebook/components/FacebookJobStatusComponent.vue
+++ b/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>
diff --git a/src/renderer/src/views/shared_components/StatusComponent.vue b/src/renderer/src/views/shared_components/StatusComponent.vue
new file mode 100644
index 00000000..aaad03ee
--- /dev/null
+++ b/src/renderer/src/views/shared_components/StatusComponent.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import RunningIcon from "./RunningIcon.vue";
+
+const props = defineProps<{
+  jobs: [];
+  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] || "";
+};
+console.error("Am I even loaded?")
+console.error(props.jobs);
+</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>
diff --git a/src/renderer/src/views/x/components/XJobStatusComponent.vue b/src/renderer/src/views/x/components/XJobStatusComponent.vue
index dc49e3f8..f9d2400e 100644
--- a/src/renderer/src/views/x/components/XJobStatusComponent.vue
+++ b/src/renderer/src/views/x/components/XJobStatusComponent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { XJob } from "../../../../../shared_types";
-import RunningIcon from "../../shared_components/RunningIcon.vue";
+import StatusComponent from "../../shared_components/StatusComponent.vue";
 
 defineProps<{
   jobs: XJob[];
@@ -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",
@@ -53,86 +44,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>

From 46f56e584e15bea5c976cdd2f36bad893a36e2dc Mon Sep 17 00:00:00 2001
From: Saptak S <saptak013@gmail.com>
Date: Wed, 5 Nov 2025 14:25:56 +0530
Subject: [PATCH 2/5] Makes DebugModeComponent and SidebarCard reusable

---
 src/renderer/src/App.vue                      |   6 +-
 .../facebook/wizard/FacebookWizardSidebar.vue |  42 +---
 .../shared_components/DebugModeComponent.vue  |  51 +++++
 .../views/shared_components/SidebarCard.vue   |  25 +++
 .../src/views/x/wizard/XWizardSidebar.vue     | 194 ++++++------------
 5 files changed, 143 insertions(+), 175 deletions(-)
 create mode 100644 src/renderer/src/views/shared_components/DebugModeComponent.vue
 create mode 100644 src/renderer/src/views/shared_components/SidebarCard.vue

diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue
index 55c75f8e..a42b9e59 100644
--- a/src/renderer/src/App.vue
+++ b/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 {
diff --git a/src/renderer/src/views/facebook/wizard/FacebookWizardSidebar.vue b/src/renderer/src/views/facebook/wizard/FacebookWizardSidebar.vue
index b7e35442..7d9aba38 100644
--- a/src/renderer/src/views/facebook/wizard/FacebookWizardSidebar.vue
+++ b/src/renderer/src/views/facebook/wizard/FacebookWizardSidebar.vue
@@ -5,6 +5,7 @@ import {
   FacebookViewModel,
 } from "../../../view_models/FacebookViewModel";
 import SidebarArchive from "../../shared_components/SidebarArchive.vue";
+import DebugModeComponent from "../../shared_components/DebugModeComponent.vue";
 
 // Props
 defineProps<{
@@ -17,21 +18,7 @@ const emit = defineEmits<{
   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 +49,10 @@ 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>
 
diff --git a/src/renderer/src/views/shared_components/DebugModeComponent.vue b/src/renderer/src/views/shared_components/DebugModeComponent.vue
new file mode 100644
index 00000000..190e4956
--- /dev/null
+++ b/src/renderer/src/views/shared_components/DebugModeComponent.vue
@@ -0,0 +1,51 @@
+<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>
diff --git a/src/renderer/src/views/shared_components/SidebarCard.vue b/src/renderer/src/views/shared_components/SidebarCard.vue
new file mode 100644
index 00000000..092baf6b
--- /dev/null
+++ b/src/renderer/src/views/shared_components/SidebarCard.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// Props
+const 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">
+      <div class="card-header" v-html="header"></div>
+      <div class="card-body">{{ formatStatsNumber(stat) }}</div>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/src/views/x/wizard/XWizardSidebar.vue b/src/renderer/src/views/x/wizard/XWizardSidebar.vue
index 9aaaad03..e628b4c8 100644
--- a/src/renderer/src/views/x/wizard/XWizardSidebar.vue
+++ b/src/renderer/src/views/x/wizard/XWizardSidebar.vue
@@ -6,6 +6,8 @@ import {
   emptyXDatabaseStats,
 } from "../../../../../shared_types";
 import SidebarArchive from "../../shared_components/SidebarArchive.vue";
+import SidebarCard from "../../shared_components/SidebarCard.vue";
+import DebugModeComponent from "../../shared_components/DebugModeComponent.vue";
 import { xGetLastImportArchive } from "../../../util_x";
 
 // Get the global emitter
@@ -49,18 +51,6 @@ emitter?.on(`x-update-database-stats-${props.model.account.id}`, async () => {
   );
 });
 
-// Debug
-const shouldOpenDevtools = ref(false);
-const debugAutopauseEndOfStep = ref(false);
-
-const debugAutopauseEndOfStepChanged = async () => {
-  emit("setDebugAutopauseEndOfStep", debugAutopauseEndOfStep.value);
-};
-
-const enableDebugMode = async () => {
-  emit("setState", State.Debug);
-};
-
 // Check if sidebar should be hidden
 const shouldHideSidebar = ref(false);
 
@@ -74,7 +64,6 @@ const updateSidebarVisibility = async () => {
 };
 
 onMounted(async () => {
-  shouldOpenDevtools.value = await window.electron.shouldOpenDevtools();
   databaseStats.value = await window.electron.X.getDatabaseStats(
     props.model.account.id,
   );
@@ -132,129 +121,68 @@ emitter?.on("account-updated", async () => {
 
     <div class="stats container mt-4">
       <div class="row g-2">
-        <div v-if="databaseStats.tweetsSaved > 0" class="col-12">
-          <div class="card text-center">
-            <div class="card-header">Tweets Saved</div>
-            <div class="card-body">
-              <h1>{{ formatStatsNumber(databaseStats.tweetsSaved) }}</h1>
-            </div>
-          </div>
-        </div>
-        <div v-if="databaseStats.tweetsDeleted > 0" class="col-12">
-          <div class="card text-center">
-            <div class="card-header">Tweets Deleted</div>
-            <div class="card-body">
-              <h1>{{ formatStatsNumber(databaseStats.tweetsDeleted) }}</h1>
-            </div>
-          </div>
-        </div>
-        <div v-if="databaseStats.tweetsSaved > 0" class="col-12">
-          <div class="card text-center">
-            <div class="card-header">
-              <div>
-                Migrated to
-                <i class="fa-brands fa-bluesky" />
-              </div>
-            </div>
-            <div class="card-body">
-              <h1>
-                {{ formatStatsNumber(databaseStats.tweetsMigratedToBluesky) }}
-              </h1>
-            </div>
-          </div>
-        </div>
-        <div v-if="databaseStats.retweetsSaved > 0" class="col-12">
-          <div class="card text-center">
-            <div class="card-header">Retweets Saved</div>
-            <div class="card-body">
-              <h1>{{ formatStatsNumber(databaseStats.retweetsSaved) }}</h1>
-            </div>
-          </div>
-        </div>
-        <div v-if="databaseStats.retweetsDeleted > 0" class="col-12">
-          <div class="card text-center">
-            <div class="card-header">Retweets Deleted</div>
-            <div class="card-body">
-              <h1>{{ formatStatsNumber(databaseStats.retweetsDeleted) }}</h1>
-            </div>
-          </div>
-        </div>
-        <div v-if="databaseStats.likesSaved > 0" class="col-12">
-          <div class="card text-center">
-            <div class="card-header">Likes Saved</div>
-            <div class="card-body">
-              <h1>{{ formatStatsNumber(databaseStats.likesSaved) }}</h1>
-            </div>
-          </div>
-        </div>
-        <div v-if="databaseStats.likesDeleted > 0" class="col-12">
-          <div class="card text-center">
-            <div class="card-header">Likes Deleted</div>
-            <div class="card-body">
-              <h1>{{ formatStatsNumber(databaseStats.likesDeleted) }}</h1>
-            </div>
-          </div>
-        </div>
-        <div v-if="databaseStats.bookmarksSaved > 0" class="col-12">
-          <div class="card text-center">
-            <div class="card-header">Bookmarks Saved</div>
-            <div class="card-body">
-              <h1>{{ formatStatsNumber(databaseStats.bookmarksSaved) }}</h1>
-            </div>
-          </div>
-        </div>
-        <div v-if="databaseStats.bookmarksDeleted > 0" class="col-12">
-          <div class="card text-center">
-            <div class="card-header">Bookmarks Deleted</div>
-            <div class="card-body">
-              <h1>{{ formatStatsNumber(databaseStats.bookmarksDeleted) }}</h1>
-            </div>
-          </div>
-        </div>
-        <div v-if="databaseStats.conversationsDeleted > 0" class="col-12">
-          <div class="card text-center">
-            <div class="card-header">Conversations Deleted</div>
-            <div class="card-body">
-              <h1>
-                {{ formatStatsNumber(databaseStats.conversationsDeleted) }}
-              </h1>
-            </div>
-          </div>
-        </div>
-        <div v-if="databaseStats.accountsUnfollowed > 0" class="col-12">
-          <div class="card text-center">
-            <div class="card-header">Accounts Unfollowed</div>
-            <div class="card-body">
-              <h1>{{ formatStatsNumber(databaseStats.accountsUnfollowed) }}</h1>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 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"
+        <SidebarCard
+          v-if="databaseStats.tweetsSaved > 0"
+          header="Tweets Saved"
+          :stat="databaseStats.tweetsSaved"
+        />
+        <SidebarCard
+          v-if="databaseStats.tweetsDeleted > 0"
+          header="Tweets Deleted"
+          :stat="databaseStats.tweetsDeleted"
+        />
+        <SidebarCard
+          v-if="databaseStats.tweetsMigratedToBluesky > 0"
+          header="<div>Migrated to <i class='fa-brands fa-bluesky' /></div>"
+          :stat="databaseStats.tweetsMigratedToBluesky"
+        />
+        <SidebarCard
+          v-if="databaseStats.retweetsSaved > 0"
+          header="Retweets Saved"
+          :stat="databaseStats.retweetsSaved"
+        />
+        <SidebarCard
+          v-if="databaseStats.retweetsDeleted > 0"
+          header="Retweets Deleted"
+          :stat="databaseStats.retweetsDeleted"
+        />
+        <SidebarCard
+          v-if="databaseStats.likesSaved > 0"
+          header="Likes Saved"
+          :stat="databaseStats.likesSaved"
+        />
+        <SidebarCard
+          v-if="databaseStats.likesDeleted > 0"
+          header="Likes Deleted"
+          :stat="databaseStats.likesDeleted"
+        />
+        <SidebarCard
+          v-if="databaseStats.bookmarksSaved > 0"
+          header="Bookmarks Saved"
+          :stat="databaseStats.bookmarksSaved"
+        />
+        <SidebarCard
+          v-if="databaseStats.bookmarksDeleted > 0"
+          header="Bookmarks Deleted"
+          :stat="databaseStats.bookmarksDeleted"
+        />
+        <SidebarCard
+          v-if="databaseStats.conversationsDeleted > 0"
+          header="Conversations Deleted"
+          :stat="databaseStats.conversationsDeleted"
+        />
+        <SidebarCard
+          v-if="databaseStats.accountsUnfollowed > 0"
+          header="Accounts Unfollowed"
+          :stat="databaseStats.accountsUnfollowed"
         />
-        <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>
 

From 49b2f404a08e9bfda2d1498b94f851b2f5f64a2c Mon Sep 17 00:00:00 2001
From: Saptak S <saptak013@gmail.com>
Date: Wed, 5 Nov 2025 19:28:51 +0530
Subject: [PATCH 3/5] Fixes linting

---
 .../src/views/facebook/wizard/FacebookWizardSidebar.vue    | 7 +------
 .../src/views/shared_components/DebugModeComponent.vue     | 1 -
 src/renderer/src/views/shared_components/SidebarCard.vue   | 1 -
 .../src/views/shared_components/StatusComponent.vue        | 2 --
 src/renderer/src/views/x/wizard/XWizardSidebar.vue         | 5 +----
 5 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/renderer/src/views/facebook/wizard/FacebookWizardSidebar.vue b/src/renderer/src/views/facebook/wizard/FacebookWizardSidebar.vue
index 7d9aba38..4c014fc3 100644
--- a/src/renderer/src/views/facebook/wizard/FacebookWizardSidebar.vue
+++ b/src/renderer/src/views/facebook/wizard/FacebookWizardSidebar.vue
@@ -17,8 +17,6 @@ const emit = defineEmits<{
   setState: [value: State];
   setDebugAutopauseEndOfStep: [value: boolean];
 }>();
-
-
 </script>
 
 <template>
@@ -49,10 +47,7 @@ const emit = defineEmits<{
       :account-type="model.account.type"
     />
 
-    <DebugModeComponent
-      :emit="emit"
-      :debug-state="State.Debug"
-    />
+    <DebugModeComponent :emit="emit" :debug-state="State.Debug" />
   </div>
 </template>
 
diff --git a/src/renderer/src/views/shared_components/DebugModeComponent.vue b/src/renderer/src/views/shared_components/DebugModeComponent.vue
index 190e4956..27199291 100644
--- a/src/renderer/src/views/shared_components/DebugModeComponent.vue
+++ b/src/renderer/src/views/shared_components/DebugModeComponent.vue
@@ -21,7 +21,6 @@ const enableDebugMode = async () => {
 onMounted(async () => {
   shouldOpenDevtools.value = await window.electron.shouldOpenDevtools();
 });
-
 </script>
 
 <template>
diff --git a/src/renderer/src/views/shared_components/SidebarCard.vue b/src/renderer/src/views/shared_components/SidebarCard.vue
index 092baf6b..624a84ca 100644
--- a/src/renderer/src/views/shared_components/SidebarCard.vue
+++ b/src/renderer/src/views/shared_components/SidebarCard.vue
@@ -12,7 +12,6 @@ function formatStatsNumber(num: number): string {
   }
   return num.toString();
 }
-
 </script>
 
 <template>
diff --git a/src/renderer/src/views/shared_components/StatusComponent.vue b/src/renderer/src/views/shared_components/StatusComponent.vue
index aaad03ee..a3907ef6 100644
--- a/src/renderer/src/views/shared_components/StatusComponent.vue
+++ b/src/renderer/src/views/shared_components/StatusComponent.vue
@@ -25,8 +25,6 @@ const getStatusIcon = (status: string) => {
   };
   return statusIcons[status] || "";
 };
-console.error("Am I even loaded?")
-console.error(props.jobs);
 </script>
 
 <template>
diff --git a/src/renderer/src/views/x/wizard/XWizardSidebar.vue b/src/renderer/src/views/x/wizard/XWizardSidebar.vue
index e628b4c8..c4302387 100644
--- a/src/renderer/src/views/x/wizard/XWizardSidebar.vue
+++ b/src/renderer/src/views/x/wizard/XWizardSidebar.vue
@@ -179,10 +179,7 @@ emitter?.on("account-updated", async () => {
       </div>
     </div>
 
-    <DebugModeComponent
-      :emit="emit"
-      :debug-state="State.Debug"
-    />
+    <DebugModeComponent :emit="emit" :debug-state="State.Debug" />
   </div>
 </template>
 

From 66e2bb7d25f2db9c6264172f5d497d3bab21118d Mon Sep 17 00:00:00 2001
From: Saptak S <saptak013@gmail.com>
Date: Wed, 5 Nov 2025 20:44:31 +0530
Subject: [PATCH 4/5] Ignore no-v-html warning on the specific line

---
 src/renderer/src/views/shared_components/SidebarCard.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/src/views/shared_components/SidebarCard.vue b/src/renderer/src/views/shared_components/SidebarCard.vue
index 624a84ca..64f6e2cd 100644
--- a/src/renderer/src/views/shared_components/SidebarCard.vue
+++ b/src/renderer/src/views/shared_components/SidebarCard.vue
@@ -17,6 +17,7 @@ function formatStatsNumber(num: number): string {
 <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>

From 0cb49784fea2fc8c3c4a8df9b6ed52a456f6d5ea Mon Sep 17 00:00:00 2001
From: Saptak S <saptak013@gmail.com>
Date: Wed, 5 Nov 2025 21:02:28 +0530
Subject: [PATCH 5/5] Fixes linting

---
 .../src/views/facebook/wizard/FacebookWizardSidebar.vue   | 1 -
 src/renderer/src/views/shared_components/SidebarCard.vue  | 2 +-
 .../src/views/shared_components/StatusComponent.vue       | 6 ++++--
 src/renderer/src/views/x/wizard/XWizardSidebar.vue        | 8 --------
 4 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/renderer/src/views/facebook/wizard/FacebookWizardSidebar.vue b/src/renderer/src/views/facebook/wizard/FacebookWizardSidebar.vue
index 4c014fc3..8ef1f65b 100644
--- a/src/renderer/src/views/facebook/wizard/FacebookWizardSidebar.vue
+++ b/src/renderer/src/views/facebook/wizard/FacebookWizardSidebar.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
 import {
   State,
   FacebookViewModel,
diff --git a/src/renderer/src/views/shared_components/SidebarCard.vue b/src/renderer/src/views/shared_components/SidebarCard.vue
index 64f6e2cd..200b7799 100644
--- a/src/renderer/src/views/shared_components/SidebarCard.vue
+++ b/src/renderer/src/views/shared_components/SidebarCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // Props
-const props = defineProps<{
+defineProps<{
   header: string;
   stat: number;
 }>();
diff --git a/src/renderer/src/views/shared_components/StatusComponent.vue b/src/renderer/src/views/shared_components/StatusComponent.vue
index a3907ef6..d06c9850 100644
--- a/src/renderer/src/views/shared_components/StatusComponent.vue
+++ b/src/renderer/src/views/shared_components/StatusComponent.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import type { FacebookJob } from "../../../../shared_types";
+import type { XJob } from "../../../../shared_types";
 import RunningIcon from "./RunningIcon.vue";
 
-const props = defineProps<{
-  jobs: [];
+defineProps<{
+  jobs: FacebookJob[] | XJob[];
   isPaused: boolean;
   clickingEnabled: boolean;
   getJobTypeText: Function;
diff --git a/src/renderer/src/views/x/wizard/XWizardSidebar.vue b/src/renderer/src/views/x/wizard/XWizardSidebar.vue
index c4302387..f5dbbe2d 100644
--- a/src/renderer/src/views/x/wizard/XWizardSidebar.vue
+++ b/src/renderer/src/views/x/wizard/XWizardSidebar.vue
@@ -35,14 +35,6 @@ const reloadUserStats = async () => {
   emit("setState", State.WizardPrestart);
 };
 
-// Util
-function formatStatsNumber(num: number): string {
-  if (num >= 1000) {
-    return (num / 1000).toFixed(1) + "k";
-  }
-  return num.toString();
-}
-
 // Keep databaseStats in sync
 const databaseStats = ref<XDatabaseStats>(emptyXDatabaseStats());
 emitter?.on(`x-update-database-stats-${props.model.account.id}`, async () => {