feat: auto delete workflow logs

src/locales/en/newtab.json

@@ -37,6 +37,14 @@
         "description": "Add an arrow at the end of the line"
       }
     },
+    "deleteLog": {
+      "title": "Auto delete workflow logs",
+      "after": "Delete after",
+      "deleteAfter": {
+        "never": "Never",
+        "days": "{day} days"
+      }
+    },
     "language": {
       "label": "Language",
       "helpTranslate": "Can't find your language? Help translate.",

src/newtab/App.vue

@@ -59,6 +59,7 @@ import browser from 'webextension-polyfill';
 import { useTheme } from '@/composable/theme';
 import { loadLocaleMessages, setI18nLanguage } from '@/lib/vue-i18n';
 import { fetchApi, getSharedWorkflows, getUserWorkflows } from '@/utils/api';
+import dayjs from '@/lib/dayjs';
 import Log from '@/models/log';
 import Workflow from '@/models/workflow';
 import AppSidebar from '@/components/newtab/app/AppSidebar.vue';
@@ -182,6 +183,17 @@ async function fetchUserData() {
     console.error(error);
   }
 }
+function autoDeleteLogs() {
+  const deleteAfter = store.state.settings.deleteLogAfter;
+
+  if (deleteAfter === 'never') return;
+
+  Log.delete(({ endedAt }) => {
+    const diff = dayjs().diff(dayjs(endedAt), 'day');
+
+    return diff >= deleteAfter;
+  });
+}
 function handleStorageChanged(change) {
   if (change.logs && Log.all().length !== change.logs.newValue.length) {
     Log.insertOrUpdate({
@@ -223,6 +235,8 @@ window.addEventListener('beforeunload', () => {
 
     await fetchUserData();
     await syncHostWorkflow();
+
+    autoDeleteLogs();
   } catch (error) {
     retrieved.value = true;
     console.error(error);

src/newtab/pages/settings/SettingsIndex.vue

@@ -54,6 +54,28 @@
       {{ t('settings.language.reloadPage') }}
     </p>
   </div>
+  <div id="delete-logs" class="mt-12">
+    <p class="font-semibold mb-1">
+      {{ t('settings.deleteLog.title') }}
+    </p>
+    <ui-select
+      label="Delete after"
+      class="w-80"
+      :model-value="settings.deleteLogAfter"
+      @change="
+        updateSetting('deleteLogAfter', $event === 'never' ? 'never' : +$event)
+      "
+    >
+      <option v-for="day in deleteLogDays" :key="day" :value="day">
+        <template v-if="typeof day === 'string'">
+          {{ t('settings.deleteLog.deleteAfter.never') }}
+        </template>
+        <template v-else>
+          {{ t('settings.deleteLog.deleteAfter.days', { day }) }}
+        </template>
+      </option>
+    </ui-select>
+  </div>
 </template>
 <script setup>
 import { computed, ref } from 'vue';
@@ -63,6 +85,8 @@ import browser from 'webextension-polyfill';
 import { useTheme } from '@/composable/theme';
 import { supportLocales } from '@/utils/shared';
 
+const deleteLogDays = ['never', 7, 14, 30, 60, 120];
+
 const { t } = useI18n();
 const store = useStore();
 const theme = useTheme();

src/store/index.js

@@ -21,6 +21,7 @@ const store = createStore({
     workflowHosts: {},
     settings: {
       locale: 'en',
+      deleteLogAfter: 30,
       editor: {
         arrow: false,
         disableCurvature: false,