From 8eff407a9cd9169cfae2b86aab13858e135f5edc Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Thu, 19 Jun 2025 09:54:09 -0600
Subject: [PATCH] IndexedDB migration: reorder the sections to accounts then
 settings then contacts

---
 src/views/DatabaseMigration.vue | 525 ++++++++++++++++----------------
 1 file changed, 264 insertions(+), 261 deletions(-)

diff --git a/src/views/DatabaseMigration.vue b/src/views/DatabaseMigration.vue
index 580497e449..c65719f6a5 100644
--- a/src/views/DatabaseMigration.vue
+++ b/src/views/DatabaseMigration.vue
@@ -246,22 +246,23 @@
       <div v-if="comparison" class="space-y-6">
         <!-- Summary Cards -->
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6">
+          <!-- Accounts Summary (moved first) -->
           <div class="bg-white overflow-hidden shadow rounded-lg">
             <div class="p-5">
               <div class="flex items-center">
                 <div class="flex-shrink-0">
                   <IconRenderer
-                    icon-name="chart"
-                    svg-class="h-6 w-6 text-blue-600"
+                    icon-name="lock"
+                    svg-class="h-6 w-6 text-orange-600"
                   />
                 </div>
                 <div class="ml-5 w-0 flex-1">
                   <dl>
                     <dt class="text-sm font-medium text-gray-500 truncate">
-                      Dexie Contacts
+                      Dexie Accounts
                     </dt>
                     <dd class="text-lg font-medium text-gray-900">
-                      {{ comparison.dexieContacts.length }}
+                      {{ comparison.dexieAccounts.length }}
                     </dd>
                   </dl>
                 </div>
@@ -275,16 +276,16 @@
                 <div class="flex-shrink-0">
                   <IconRenderer
                     icon-name="check"
-                    svg-class="h-6 w-6 text-green-600"
+                    svg-class="h-6 w-6 text-teal-600"
                   />
                 </div>
                 <div class="ml-5 w-0 flex-1">
                   <dl>
                     <dt class="text-sm font-medium text-gray-500 truncate">
-                      SQLite Contacts
+                      SQLite Accounts
                     </dt>
                     <dd class="text-lg font-medium text-gray-900">
-                      {{ comparison.sqliteContacts.length }}
+                      {{ comparison.sqliteAccounts.length }}
                     </dd>
                   </dl>
                 </div>
@@ -292,6 +293,7 @@
             </div>
           </div>
 
+          <!-- Settings Summary (second) -->
           <div class="bg-white overflow-hidden shadow rounded-lg">
             <div class="p-5">
               <div class="flex items-center">
@@ -338,22 +340,23 @@
             </div>
           </div>
 
+          <!-- Contacts Summary (last) -->
           <div class="bg-white overflow-hidden shadow rounded-lg">
             <div class="p-5">
               <div class="flex items-center">
                 <div class="flex-shrink-0">
                   <IconRenderer
-                    icon-name="lock"
-                    svg-class="h-6 w-6 text-orange-600"
+                    icon-name="chart"
+                    svg-class="h-6 w-6 text-blue-600"
                   />
                 </div>
                 <div class="ml-5 w-0 flex-1">
                   <dl>
                     <dt class="text-sm font-medium text-gray-500 truncate">
-                      Dexie Accounts
+                      Dexie Contacts
                     </dt>
                     <dd class="text-lg font-medium text-gray-900">
-                      {{ comparison.dexieAccounts.length }}
+                      {{ comparison.dexieContacts.length }}
                     </dd>
                   </dl>
                 </div>
@@ -367,16 +370,16 @@
                 <div class="flex-shrink-0">
                   <IconRenderer
                     icon-name="check"
-                    svg-class="h-6 w-6 text-teal-600"
+                    svg-class="h-6 w-6 text-green-600"
                   />
                 </div>
                 <div class="ml-5 w-0 flex-1">
                   <dl>
                     <dt class="text-sm font-medium text-gray-500 truncate">
-                      SQLite Accounts
+                      SQLite Contacts
                     </dt>
                     <dd class="text-lg font-medium text-gray-900">
-                      {{ comparison.sqliteAccounts.length }}
+                      {{ comparison.sqliteContacts.length }}
                     </dd>
                   </dl>
                 </div>
@@ -387,253 +390,7 @@
 
         <!-- Differences Section -->
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          <!-- Contacts Differences -->
-          <div class="bg-white shadow rounded-lg">
-            <div class="px-4 py-5 sm:p-6">
-              <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
-                Contact Differences
-              </h3>
-
-              <div class="space-y-4">
-                <div
-                  class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"
-                >
-                  <div class="flex items-center">
-                    <IconRenderer
-                      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>
-                  </div>
-                  <span class="text-sm font-bold text-blue-900">{{
-                    comparison.differences.contacts.added.length
-                  }}</span>
-                </div>
-
-                <div
-                  class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg"
-                >
-                  <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="edit"
-                      svg-class="h-5 w-5 text-yellow-600 mr-2"
-                    />
-                    <span class="text-sm font-medium text-yellow-900"
-                      >Modified</span
-                    >
-                  </div>
-                  <span class="text-sm font-bold text-yellow-900">{{
-                    comparison.differences.contacts.modified.length
-                  }}</span>
-                </div>
-
-                <div
-                  class="flex items-center justify-between p-3 bg-red-50 rounded-lg"
-                >
-                  <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="trash"
-                      svg-class="h-5 w-5 text-red-600 mr-2"
-                    />
-                    <span class="text-sm font-medium text-red-900"
-                      >Missing</span
-                    >
-                  </div>
-                  <span class="text-sm font-bold text-red-900">{{
-                    comparison.differences.contacts.missing.length
-                  }}</span>
-                </div>
-              </div>
-
-              <!-- Contact Details -->
-              <div
-                v-if="comparison.differences.contacts.added.length > 0"
-                class="mt-4"
-              >
-                <h4 class="text-sm font-medium text-gray-900 mb-2">
-                  Added Contacts ({{ comparison.differences.contacts.added.length }}):
-                </h4>
-                <div class="space-y-1">
-                  <div
-                    v-for="contact in comparison.differences.contacts.added"
-                    :key="contact.did"
-                    class="text-xs text-gray-600 bg-gray-50 p-2 rounded"
-                  >
-                    <div class="font-medium">{{ contact.name || '<empty>' }}</div>
-                    <div class="text-gray-500">{{ contact.did }}</div>
-                    <div class="text-gray-400">{{ contact.contactMethods?.length || 0 }} contact methods</div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Modified Contacts -->
-              <div
-                v-if="comparison.differences.contacts.modified.length > 0"
-                class="mt-4"
-              >
-                <h4 class="text-sm font-medium text-gray-900 mb-2">
-                  Modified Contacts ({{ comparison.differences.contacts.modified.length }}):
-                </h4>
-                <div class="space-y-1">
-                  <div
-                    v-for="contact in comparison.differences.contacts.modified"
-                    :key="contact.did"
-                    class="text-xs text-gray-600 bg-gray-50 p-2 rounded"
-                  >
-                    <div class="font-medium">{{ contact.name || '<empty>' }}</div>
-                    <div class="text-gray-500">{{ contact.did }}</div>
-                    <div class="text-gray-400">{{ contact.contactMethods?.length || 0 }} contact methods</div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Missing Contacts -->
-              <div
-                v-if="comparison.differences.contacts.missing.filter(c => c.did).length > 0"
-                class="mt-4"
-              >
-                <h4 class="text-sm font-medium text-gray-900 mb-2">
-                  Missing Contacts ({{ comparison.differences.contacts.missing.filter(c => c.did).length }}):
-                </h4>
-                <div class="space-y-1">
-                  <div
-                    v-for="contact in comparison.differences.contacts.missing.filter(c => c.did)"
-                    :key="contact.did"
-                    class="text-xs text-gray-600 bg-gray-50 p-2 rounded"
-                  >
-                    <div class="font-medium">{{ contact.name || '<empty>' }}</div>
-                    <div class="text-gray-500">{{ contact.did }}</div>
-                    <div class="text-gray-400">{{ contact.contactMethods?.length || 0 }} contact methods</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Settings Differences -->
-          <div class="bg-white shadow rounded-lg">
-            <div class="px-4 py-5 sm:p-6">
-              <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
-                Settings Differences
-              </h3>
-
-              <div class="space-y-4">
-                <div
-                  class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"
-                >
-                  <div class="flex items-center">
-                    <IconRenderer
-                      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>
-                  </div>
-                  <span class="text-sm font-bold text-blue-900">{{
-                    comparison.differences.settings.added.length
-                  }}</span>
-                </div>
-
-                <div
-                  class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg"
-                >
-                  <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="edit"
-                      svg-class="h-5 w-5 text-yellow-600 mr-2"
-                    />
-                    <span class="text-sm font-medium text-yellow-900"
-                      >Modified</span
-                    >
-                  </div>
-                  <span class="text-sm font-bold text-yellow-900">{{
-                    comparison.differences.settings.modified.length
-                  }}</span>
-                </div>
-
-                <div
-                  class="flex items-center justify-between p-3 bg-red-50 rounded-lg"
-                >
-                  <div class="flex items-center">
-                    <IconRenderer
-                      icon-name="trash"
-                      svg-class="h-5 w-5 text-red-600 mr-2"
-                    />
-                    <span class="text-sm font-medium text-red-900"
-                      >Missing</span
-                    >
-                  </div>
-                  <span class="text-sm font-bold text-red-900">{{
-                    comparison.differences.settings.missing.length
-                  }}</span>
-                </div>
-              </div>
-
-              <!-- Settings Details -->
-              <div
-                v-if="comparison.differences.settings.added.length > 0"
-                class="mt-4"
-              >
-                <h4 class="text-sm font-medium text-gray-900 mb-2">
-                  Added Settings ({{ comparison.differences.settings.added.length }}):
-                </h4>
-                <div class="space-y-1">
-                  <div
-                    v-for="setting in comparison.differences.settings.added"
-                    :key="setting.id"
-                    class="text-xs text-gray-600 bg-gray-50 p-2 rounded"
-                  >
-                    <div class="font-medium">{{ getSettingDisplayName(setting) }}</div>
-                    <div class="text-gray-500">ID: {{ setting.id }}</div>
-                    <div class="text-gray-400">Registered: {{ setting.isRegistered ? 'Yes' : 'No' }}</div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Modified Settings -->
-              <div
-                v-if="comparison.differences.settings.modified.length > 0"
-                class="mt-4"
-              >
-                <h4 class="text-sm font-medium text-gray-900 mb-2">
-                  Modified Settings ({{ comparison.differences.settings.modified.length }}):
-                </h4>
-                <div class="space-y-1">
-                  <div
-                    v-for="setting in comparison.differences.settings.modified"
-                    :key="setting.id"
-                    class="text-xs text-gray-600 bg-gray-50 p-2 rounded"
-                  >
-                    <div class="font-medium">{{ getSettingDisplayName(setting) }}</div>
-                    <div class="text-gray-500">ID: {{ setting.id }}</div>
-                    <div class="text-gray-400">Registered: {{ setting.isRegistered ? 'Yes' : 'No' }}</div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Missing Settings -->
-              <div
-                v-if="comparison.differences.settings.missing.filter(s => s.accountDid || s.activeDid).length > 0"
-                class="mt-4"
-              >
-                <h4 class="text-sm font-medium text-gray-900 mb-2">
-                  Missing Settings ({{ comparison.differences.settings.missing.filter(s => s.accountDid || s.activeDid).length }}):
-                </h4>
-                <div class="space-y-1">
-                  <div
-                    v-for="setting in comparison.differences.settings.missing.filter(s => s.accountDid || s.activeDid)"
-                    :key="setting.id"
-                    class="text-xs text-gray-600 bg-gray-50 p-2 rounded"
-                  >
-                    <div class="font-medium">{{ getSettingDisplayName(setting) }}</div>
-                    <div class="text-gray-500">ID: {{ setting.id }}</div>
-                    <div class="text-gray-400">Registered: {{ setting.isRegistered ? 'Yes' : 'No' }}</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Account Differences -->
+          <!-- Account Differences (moved first) -->
           <div class="bg-white shadow rounded-lg">
             <div class="px-4 py-5 sm:p-6">
               <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
@@ -761,6 +518,252 @@
               </div>
             </div>
           </div>
+
+          <!-- Settings Differences (second) -->
+          <div class="bg-white shadow rounded-lg">
+            <div class="px-4 py-5 sm:p-6">
+              <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
+                Settings Differences
+              </h3>
+
+              <div class="space-y-4">
+                <div
+                  class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"
+                >
+                  <div class="flex items-center">
+                    <IconRenderer
+                      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>
+                  </div>
+                  <span class="text-sm font-bold text-blue-900">{{
+                    comparison.differences.settings.added.length
+                  }}</span>
+                </div>
+
+                <div
+                  class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg"
+                >
+                  <div class="flex items-center">
+                    <IconRenderer
+                      icon-name="edit"
+                      svg-class="h-5 w-5 text-yellow-600 mr-2"
+                    />
+                    <span class="text-sm font-medium text-yellow-900"
+                      >Modified</span
+                    >
+                  </div>
+                  <span class="text-sm font-bold text-yellow-900">{{
+                    comparison.differences.settings.modified.length
+                  }}</span>
+                </div>
+
+                <div
+                  class="flex items-center justify-between p-3 bg-red-50 rounded-lg"
+                >
+                  <div class="flex items-center">
+                    <IconRenderer
+                      icon-name="trash"
+                      svg-class="h-5 w-5 text-red-600 mr-2"
+                    />
+                    <span class="text-sm font-medium text-red-900"
+                      >Missing</span
+                    >
+                  </div>
+                  <span class="text-sm font-bold text-red-900">{{
+                    comparison.differences.settings.missing.length
+                  }}</span>
+                </div>
+              </div>
+
+              <!-- Settings Details -->
+              <div
+                v-if="comparison.differences.settings.added.length > 0"
+                class="mt-4"
+              >
+                <h4 class="text-sm font-medium text-gray-900 mb-2">
+                  Added Settings ({{ comparison.differences.settings.added.length }}):
+                </h4>
+                <div class="space-y-1">
+                  <div
+                    v-for="setting in comparison.differences.settings.added"
+                    :key="setting.id"
+                    class="text-xs text-gray-600 bg-gray-50 p-2 rounded"
+                  >
+                    <div class="font-medium">{{ getSettingDisplayName(setting) }}</div>
+                    <div class="text-gray-500">ID: {{ setting.id }}</div>
+                    <div class="text-gray-400">Registered: {{ setting.isRegistered ? 'Yes' : 'No' }}</div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Modified Settings -->
+              <div
+                v-if="comparison.differences.settings.modified.length > 0"
+                class="mt-4"
+              >
+                <h4 class="text-sm font-medium text-gray-900 mb-2">
+                  Modified Settings ({{ comparison.differences.settings.modified.length }}):
+                </h4>
+                <div class="space-y-1">
+                  <div
+                    v-for="setting in comparison.differences.settings.modified"
+                    :key="setting.id"
+                    class="text-xs text-gray-600 bg-gray-50 p-2 rounded"
+                  >
+                    <div class="font-medium">{{ getSettingDisplayName(setting) }}</div>
+                    <div class="text-gray-500">ID: {{ setting.id }}</div>
+                    <div class="text-gray-400">Registered: {{ setting.isRegistered ? 'Yes' : 'No' }}</div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Missing Settings -->
+              <div
+                v-if="comparison.differences.settings.missing.filter(s => s.accountDid || s.activeDid).length > 0"
+                class="mt-4"
+              >
+                <h4 class="text-sm font-medium text-gray-900 mb-2">
+                  Missing Settings ({{ comparison.differences.settings.missing.filter(s => s.accountDid || s.activeDid).length }}):
+                </h4>
+                <div class="space-y-1">
+                  <div
+                    v-for="setting in comparison.differences.settings.missing.filter(s => s.accountDid || s.activeDid)"
+                    :key="setting.id"
+                    class="text-xs text-gray-600 bg-gray-50 p-2 rounded"
+                  >
+                    <div class="font-medium">{{ getSettingDisplayName(setting) }}</div>
+                    <div class="text-gray-500">ID: {{ setting.id }}</div>
+                    <div class="text-gray-400">Registered: {{ setting.isRegistered ? 'Yes' : 'No' }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Contacts Differences (last) -->
+          <div class="bg-white shadow rounded-lg">
+            <div class="px-4 py-5 sm:p-6">
+              <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
+                Contact Differences
+              </h3>
+
+              <div class="space-y-4">
+                <div
+                  class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"
+                >
+                  <div class="flex items-center">
+                    <IconRenderer
+                      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>
+                  </div>
+                  <span class="text-sm font-bold text-blue-900">{{
+                    comparison.differences.contacts.added.length
+                  }}</span>
+                </div>
+
+                <div
+                  class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg"
+                >
+                  <div class="flex items-center">
+                    <IconRenderer
+                      icon-name="edit"
+                      svg-class="h-5 w-5 text-yellow-600 mr-2"
+                    />
+                    <span class="text-sm font-medium text-yellow-900"
+                      >Modified</span
+                    >
+                  </div>
+                  <span class="text-sm font-bold text-yellow-900">{{
+                    comparison.differences.contacts.modified.length
+                  }}</span>
+                </div>
+
+                <div
+                  class="flex items-center justify-between p-3 bg-red-50 rounded-lg"
+                >
+                  <div class="flex items-center">
+                    <IconRenderer
+                      icon-name="trash"
+                      svg-class="h-5 w-5 text-red-600 mr-2"
+                    />
+                    <span class="text-sm font-medium text-red-900"
+                      >Missing</span
+                    >
+                  </div>
+                  <span class="text-sm font-bold text-red-900">{{
+                    comparison.differences.contacts.missing.length
+                  }}</span>
+                </div>
+              </div>
+
+              <!-- Contact Details -->
+              <div
+                v-if="comparison.differences.contacts.added.length > 0"
+                class="mt-4"
+              >
+                <h4 class="text-sm font-medium text-gray-900 mb-2">
+                  Added Contacts ({{ comparison.differences.contacts.added.length }}):
+                </h4>
+                <div class="space-y-1">
+                  <div
+                    v-for="contact in comparison.differences.contacts.added"
+                    :key="contact.did"
+                    class="text-xs text-gray-600 bg-gray-50 p-2 rounded"
+                  >
+                    <div class="font-medium">{{ contact.name || '<empty>' }}</div>
+                    <div class="text-gray-500">{{ contact.did }}</div>
+                    <div class="text-gray-400">{{ contact.contactMethods?.length || 0 }} contact methods</div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Modified Contacts -->
+              <div
+                v-if="comparison.differences.contacts.modified.length > 0"
+                class="mt-4"
+              >
+                <h4 class="text-sm font-medium text-gray-900 mb-2">
+                  Modified Contacts ({{ comparison.differences.contacts.modified.length }}):
+                </h4>
+                <div class="space-y-1">
+                  <div
+                    v-for="contact in comparison.differences.contacts.modified"
+                    :key="contact.did"
+                    class="text-xs text-gray-600 bg-gray-50 p-2 rounded"
+                  >
+                    <div class="font-medium">{{ contact.name || '<empty>' }}</div>
+                    <div class="text-gray-500">{{ contact.did }}</div>
+                    <div class="text-gray-400">{{ contact.contactMethods?.length || 0 }} contact methods</div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Missing Contacts -->
+              <div
+                v-if="comparison.differences.contacts.missing.filter(c => c.did).length > 0"
+                class="mt-4"
+              >
+                <h4 class="text-sm font-medium text-gray-900 mb-2">
+                  Missing Contacts ({{ comparison.differences.contacts.missing.filter(c => c.did).length }}):
+                </h4>
+                <div class="space-y-1">
+                  <div
+                    v-for="contact in comparison.differences.contacts.missing.filter(c => c.did)"
+                    :key="contact.did"
+                    class="text-xs text-gray-600 bg-gray-50 p-2 rounded"
+                  >
+                    <div class="font-medium">{{ contact.name || '<empty>' }}</div>
+                    <div class="text-gray-500">{{ contact.did }}</div>
+                    <div class="text-gray-400">{{ contact.contactMethods?.length || 0 }} contact methods</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>