src/database/db.ts

@@ -11,6 +11,12 @@ import type {
 
 export interface LocalList extends List {
   pendingSync?: boolean
+  // Stable identity for this list on this client, independent of `id`.
+  // `id` starts out as a client-generated placeholder and gets swapped for
+  // the server-assigned one once "createList" syncs (see remapListId) -
+  // clientId never changes, so UI code that needs a stable key across that
+  // swap (e.g. <TransitionGroup>'s :key) can use it instead of `id`.
+  clientId?: string
 }
 
 export interface LocalListItem extends ListItem {

src/stores/lists.ts

@@ -147,8 +147,10 @@ export const useListsStore = defineStore('lists', () => {
 
   async function createList(name: string): Promise<LocalList> {
     const now = new Date().toISOString()
+    const id = generateId()
     const localList: LocalList = {
-      id: generateId(),
+      id,
+      clientId: id,
       name,
       created_at: now,
       modified_at: now,
@@ -538,7 +540,11 @@ export const useListsStore = defineStore('lists', () => {
       for (const serverList of serverLists) {
         const existingList = localById.get(serverList.id)
         if (!existingList || !existingList.pendingSync) {
-          toPut.push({ ...serverList, pendingSync: false })
+          toPut.push({
+            ...serverList,
+            pendingSync: false,
+            clientId: existingList?.clientId ?? serverList.id,
+          })
         }
       }
       if (toPut.length > 0) {

src/views/ListsView.vue

@@ -110,7 +110,7 @@ async function handleCreateList() {
     <TransitionGroup v-if="displayedLists.length > 0" tag="ul" name="list-reorder" class="lists">
       <li
         v-for="list in displayedLists"
-        :key="list.id"
+        :key="list.clientId ?? list.id"
         :ref="(el) => setItemRef(list.id, el as Element | null)"
         class="list-row"
         :class="{ 'no-transition': isPointerActive && draggingId === list.id }"