feat: update cloud backup UI

src/components/newtab/settings/SettingsCloudBackup.vue

@@ -8,7 +8,9 @@
         prepend-icon="riSearch2Line"
       />
       <ui-list class="mt-4">
-        <p class="mb-1 text-sm text-gray-600 dark:text-gray-200">Location</p>
+        <p class="mb-1 text-sm text-gray-600 dark:text-gray-200">
+          {{ t('settings.backupWorkflows.cloud.location') }}
+        </p>
         <ui-list-item
           v-for="location in ['local', 'cloud']"
           :key="location"
@@ -87,6 +89,9 @@
         </settings-backup-items>
       </template>
       <template v-else>
+        <p class="mb-2">
+          {{ t('settings.backupWorkflows.cloud.selectText') }}
+        </p>
         <settings-backup-items
           v-slot="{ workflow }"
           v-model="state.selectedWorkflows"

src/locales/en/newtab.json

@@ -54,6 +54,7 @@
       "invalidPassword": "Invalid password",
       "workflowsAdded": "{count} workflows have been added",
       "name": "Backup workflows",
+      "needSignin": "You need to sign in to your account first",
       "backup": {
         "button": "Backup",
         "encrypt": "Encrypt with password"
@@ -68,6 +69,7 @@
           "local": "Local",
           "cloud": "Cloud"
         },
+        "location": "Location",
         "delete": "Delete backup",
         "title": "Cloud Backup",
         "sync": "Sync",
@@ -90,6 +92,7 @@
     "browse": "Browse workflows",
     "name": "Workflow name",
     "rename": "Rename workflow",
+    "backupCloud": "Backup workflow to cloud",
     "add": "Add workflow",
     "clickToEnable": "Click to enable",
     "toggleSidebar": "Toggle sidebar",

src/newtab/pages/Workflows.vue

@@ -29,30 +29,40 @@
           </option>
         </ui-select>
       </div>
-      <ui-button
-        tag="a"
-        href="https://automa.site/workflows"
-        target="_blank"
-        class="inline-block relative"
-        @click="browseWorkflow"
-      >
-        <span
-          v-if="state.highlightBrowse"
-          class="flex h-3 w-3 absolute top-0 right-0 -mr-1 -mt-1"
+      <span v-tooltip:bottom.group="t('workflow.browse')">
+        <ui-button
+          icon
+          tag="a"
+          href="https://automa.site/workflows"
+          target="_blank"
+          class="inline-block relative"
+          @click="browseWorkflow"
         >
           <span
-            class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"
-          ></span>
-          <span
-            class="relative inline-flex rounded-full h-3 w-3 bg-blue-600"
-          ></span>
-        </span>
-        <v-remixicon name="riCompass3Line" class="mr-2 -ml-1" />
-        {{ t('workflow.browse') }}
-      </ui-button>
-      <ui-button @click="importWorkflow({ multiple: true })">
-        <v-remixicon name="riUploadLine" class="mr-2 -ml-1" />
-        {{ t('workflow.import') }}
+            v-if="state.highlightBrowse"
+            class="flex h-3 w-3 absolute top-0 right-0 -mr-1 -mt-1"
+          >
+            <span
+              class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"
+            ></span>
+            <span
+              class="relative inline-flex rounded-full h-3 w-3 bg-blue-600"
+            ></span>
+          </span>
+          <v-remixicon name="riCompass3Line" />
+        </ui-button>
+      </span>
+      <span v-tooltip:bottom.group="t('workflow.backupCloud')">
+        <ui-button tag="router-link" to="/backup" class="inline-block" icon>
+          <v-remixicon name="riUploadCloud2Line" />
+        </ui-button>
+      </span>
+      <ui-button
+        v-tooltip:bottom.group="t('workflow.import')"
+        icon
+        @click="importWorkflow({ multiple: true })"
+      >
+        <v-remixicon name="riUploadLine" />
       </ui-button>
       <div class="flex">
         <ui-button
@@ -212,7 +222,7 @@
               <template #footer-content>
                 <v-remixicon
                   v-if="sharedWorkflows[workflow.id]"
-                  v-tooltip="
+                  v-tooltip:bottom.group="
                     t('workflow.share.sharedAs', {
                       name: sharedWorkflows[workflow.id]?.name.slice(0, 64),
                     })
@@ -223,7 +233,7 @@
                 />
                 <v-remixicon
                   v-if="hostWorkflows[workflow.id]"
-                  v-tooltip="t('workflow.host.title')"
+                  v-tooltip:bottom.group="t('workflow.host.title')"
                   name="riBaseStationLine"
                   size="20"
                   class="ml-2"
@@ -303,6 +313,7 @@ import { useToast } from 'vue-toastification';
 import browser from 'webextension-polyfill';
 import { useDialog } from '@/composable/dialog';
 import { useShortcut } from '@/composable/shortcut';
+import { useGroupTooltip } from '@/composable/groupTooltip';
 import { sendMessage } from '@/utils/message';
 import { fetchApi } from '@/utils/api';
 import { exportWorkflow, importWorkflow } from '@/utils/workflow-data';
@@ -314,6 +325,7 @@ import { findTriggerBlock, isWhitespace } from '@/utils/helper';
 import SharedCard from '@/components/newtab/shared/SharedCard.vue';
 import Workflow from '@/models/workflow';
 
+useGroupTooltip();
 const { t } = useI18n();
 const toast = useToast();
 const store = useStore();

src/newtab/pages/settings/SettingsBackup.vue

@@ -1,41 +1,58 @@
 <template>
   <div class="max-w-xl">
-    <ui-card v-if="$store.state.user" class="mb-12">
+    <ui-card class="mb-12">
       <h2 class="font-semibold mb-2">
         {{ t('settings.backupWorkflows.cloud.title') }}
       </h2>
-      <div class="border dark:border-gray-700 p-4 rounded-lg flex items-center">
-        <span class="inline-block p-2 rounded-full bg-box-transparent">
-          <v-remixicon name="riUploadLine" />
-        </span>
-        <div class="flex-1 ml-4 leading-tight">
-          <p class="text-sm text-gray-600 dark:text-gray-200">
-            {{ t('settings.backupWorkflows.cloud.lastBackup') }}
-          </p>
-          <p>{{ formatDate(state.lastBackup) }}</p>
+      <template v-if="$store.state.user">
+        <div
+          class="border dark:border-gray-700 p-4 rounded-lg flex items-center"
+        >
+          <span class="inline-block p-2 rounded-full bg-box-transparent">
+            <v-remixicon name="riUploadLine" />
+          </span>
+          <div class="flex-1 ml-4 leading-tight">
+            <p class="text-sm text-gray-600 dark:text-gray-200">
+              {{ t('settings.backupWorkflows.cloud.lastBackup') }}
+            </p>
+            <p>{{ formatDate(state.lastBackup) }}</p>
+          </div>
+          <ui-button
+            :loading="backupState.loading"
+            @click="backupState.modal = true"
+          >
+            {{ t('settings.backupWorkflows.backup.button') }}
+          </ui-button>
         </div>
-        <ui-button
-          :loading="backupState.loading"
-          @click="backupState.modal = true"
+        <div
+          class="border dark:border-gray-700 p-4 rounded-lg flex items-center mt-2"
         >
-          {{ t('settings.backupWorkflows.backup.button') }}
-        </ui-button>
-      </div>
-      <div
-        class="border dark:border-gray-700 p-4 rounded-lg flex items-center mt-2"
-      >
-        <span class="inline-block p-2 rounded-full bg-box-transparent">
-          <v-remixicon name="riDownloadLine" />
-        </span>
-        <p class="flex-1 ml-4">
-          {{ t('settings.backupWorkflows.cloud.sync') }}
+          <span class="inline-block p-2 rounded-full bg-box-transparent">
+            <v-remixicon name="riDownloadLine" />
+          </span>
+          <p class="flex-1 ml-4">
+            {{ t('settings.backupWorkflows.cloud.sync') }}
+          </p>
+          <ui-button
+            :loading="state.loadingSync"
+            class="ml-2"
+            @click="syncBackupWorkflows"
+          >
+            {{ t('settings.backupWorkflows.cloud.sync') }}
+          </ui-button>
+        </div>
+      </template>
+      <div v-else class="text-center py-4">
+        <p>
+          {{ t('settings.backupWorkflows.needSignin') }}
         </p>
         <ui-button
-          :loading="state.loadingSync"
-          class="ml-2"
-          @click="syncBackupWorkflows"
+          tag="a"
+          href="https://automa.site/auth"
+          target="_blank"
+          class="mt-4 w-44 inline-block"
         >
-          {{ t('settings.backupWorkflows.cloud.sync') }}
+          {{ t('auth.signIn') }}
         </ui-button>
       </div>
       <p v-if="false">