IndexedDB migration: extract IndexedDB code away from the ongoing SQLite migrations

src/views/DatabaseMigration.vue

@@ -10,6 +10,15 @@
         </p>
       </div>
 
+      <div class="mt-4">
+        <a
+          class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          href="/"
+        >
+          Take me back to the home page
+        </a>
+      </div>
+
       <div class="mt-4">
         <!-- Migration Options -->
         <div class="bg-white shadow rounded-lg">
@@ -44,27 +53,17 @@
         </div>
       </div>
 
+      <div class="mt-4">
+        <h3
+          v-if="comparison && (comparison.sqliteAccounts.length > 1 || comparison.sqliteSettings.length > 1 || comparison.sqliteContacts.length > 0)"
+          class="text-lg leading-6 font-medium text-red-900 mb-4"
+        >
+          Beware: you have unexpected existing data in the SQLite database that will be overwritten. You should talk with Trent.
+        </h3>
+      </div>
+
       <!-- Action Buttons -->
       <div class="mt-4 mb-8 flex flex-wrap gap-4">
-        <button
-          :disabled="isLoading"
-          class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
-          @click="displayDatabases"
-        >
-          <IconRenderer
-            v-if="isLoading"
-            icon-name="spinner"
-            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-            fill="currentColor"
-          />
-          <IconRenderer
-            v-else
-            icon-name="chart"
-            svg-class="-ml-1 mr-3 h-5 w-5"
-          />
-          Show Existing Data
-        </button>
-
         <button
           :disabled="isLoading"
           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
@@ -105,6 +104,25 @@
 
         <div class="w-full border-t border-gray-200 my-4"></div>
 
+        <button
+          :disabled="isLoading"
+          class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          @click="displayDatabases"
+        >
+          <IconRenderer
+            v-if="isLoading"
+            icon-name="spinner"
+            svg-class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+            fill="currentColor"
+          />
+          <IconRenderer
+            v-else
+            icon-name="chart"
+            svg-class="-ml-1 mr-3 h-5 w-5"
+          />
+          Show Previous Data
+        </button>
+
         <button
           :disabled="isLoading || !comparison"
           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
@@ -406,7 +424,7 @@
                       icon-name="plusCircle"
                       svg-class="h-5 w-5 text-blue-600 mr-2"
                     />
-                    <span class="text-sm font-medium text-blue-900">Added</span>
+                    <span class="text-sm font-medium text-blue-900">Add</span>
                   </div>
                   <span class="text-sm font-bold text-blue-900">{{
                     comparison.differences.accounts.added.length
@@ -454,7 +472,7 @@
                 class="mt-4"
               >
                 <h4 class="text-sm font-medium text-gray-900 mb-2">
-                  Added Accounts ({{ comparison.differences.accounts.added.length }}):
+                  Add Accounts ({{ comparison.differences.accounts.added.length }}):
                 </h4>
                 <div class="space-y-1">
                   <div
@@ -535,7 +553,7 @@
                       icon-name="plusCircle"
                       svg-class="h-5 w-5 text-blue-600 mr-2"
                     />
-                    <span class="text-sm font-medium text-blue-900">Added</span>
+                    <span class="text-sm font-medium text-blue-900">Add</span>
                   </div>
                   <span class="text-sm font-bold text-blue-900">{{
                     comparison.differences.settings.added.length
@@ -583,7 +601,7 @@
                 class="mt-4"
               >
                 <h4 class="text-sm font-medium text-gray-900 mb-2">
-                  Added Settings ({{ comparison.differences.settings.added.length }}):
+                  Add Settings ({{ comparison.differences.settings.added.length }}):
                 </h4>
                 <div class="space-y-1">
                   <div
@@ -658,7 +676,7 @@
                       icon-name="plusCircle"
                       svg-class="h-5 w-5 text-blue-600 mr-2"
                     />
-                    <span class="text-sm font-medium text-blue-900">Added</span>
+                    <span class="text-sm font-medium text-blue-900">Add</span>
                   </div>
                   <span class="text-sm font-bold text-blue-900">{{
                     comparison.differences.contacts.added.length
@@ -706,7 +724,7 @@
                 class="mt-4"
               >
                 <h4 class="text-sm font-medium text-gray-900 mb-2">
-                  Added Contacts ({{ comparison.differences.contacts.added.length }}):
+                  Add Contacts ({{ comparison.differences.contacts.added.length }}):
                 </h4>
                 <div class="space-y-1">
                   <div
@@ -799,7 +817,7 @@ import {
   getDexieAccounts,
   getDexieSettings,
   getDexieContacts,
-} from "../services/migrationService";
+} from "../services/indexedDBMigrationService";
 import { logger } from "../utils/logger";
 
 /**

src/views/StartView.vue

@@ -85,13 +85,12 @@
 
         <!-- Database Migration Section -->
         <div class="mt-8 pt-6 border-t border-gray-200">
-          <p class="text-center text-lg font-light mb-4">Database Tools</p>
           <div class="flex justify-center">
             <router-link
               :to="{ name: 'database-migration' }"
               class="block w-fit text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
             >
-              Database Migration
+              Migrate My Old Data
             </router-link>
           </div>
         </div>