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,12 +53,21 @@
         </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"
+          @click="compareDatabases"
         >
           <IconRenderer
             v-if="isLoading"
@@ -62,13 +80,13 @@
             icon-name="chart"
             svg-class="-ml-1 mr-3 h-5 w-5"
           />
-          Show Existing Data
+          Compare Databases
         </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"
-          @click="compareDatabases"
+          :disabled="isLoading || !comparison"
+          class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          @click="migrateAll"
         >
           <IconRenderer
             v-if="isLoading"
@@ -78,16 +96,18 @@
           />
           <IconRenderer
             v-else
-            icon-name="chart"
+            icon-name="check"
             svg-class="-ml-1 mr-3 h-5 w-5"
           />
-          Compare Databases
+          Migrate All (Recommended)
         </button>
 
+        <div class="w-full border-t border-gray-200 my-4"></div>
+
         <button
-          :disabled="isLoading || !comparison"
-          class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
-          @click="migrateAll"
+          :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"
@@ -97,14 +117,12 @@
           />
           <IconRenderer
             v-else
-            icon-name="check"
+            icon-name="chart"
             svg-class="-ml-1 mr-3 h-5 w-5"
           />
-          Migrate All (Recommended)
+          Show Previous Data
         </button>
 
-        <div class="w-full border-t border-gray-200 my-4"></div>
-
         <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>