Frontend: Fixed props handling in the bookmarks column and added dynamic updating of MkAvatars

fe_calckey/frontend/client/src/components/MkAvatars.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import * as os from "@/os";
 import { User } from "calckey-js/built/entities";
 
@@ -21,6 +21,15 @@ onMounted(async () => {
     users.value = await os.api("users/show", {
         userIds: props.userIds,
     });
+
+    watch(
+        () => props.userIds,
+        async (userIds) => {
+            users.value = await os.api("users/show", {
+                userIds,
+            });
+        }
+    );
 });
 </script>
 

fe_calckey/frontend/client/src/ui/deck/bookmarks-column.vue

@@ -10,7 +10,7 @@
             ><span style="margin-left: 8px">{{ column.name }}</span>
         </template>
 
-        <MkAvatars :key="userList" :userIds="userList" />
+        <MkAvatars :userIds="userList" />
     </XColumn>
 </template>
 
@@ -35,34 +35,32 @@ const emit = defineEmits<{
 
 const userList = ref<User["id"][]>([]);
 
-async function fetchUserList() {
+async function fetchUserList(id: string | null) {
+    if (id === null) {
+        userList.value = [];
+        return;
+    }
+
     userList.value = (
         await os.api("users/lists/show", {
-            listId: props.column.listId!,
+            listId: id,
         })
     ).userIds;
 }
 
-watch($$(props.column.listId), () => {
-    if (props.column.listId == null) {
-        return;
-    }
+onMounted(async () => {
+    watch(
+        () => props.column.listId,
+        (id) => fetchUserList(id ?? null)
+    );
 
-    fetchUserList();
+    await fetchUserList(props.column.listId ?? null);
 });
 
 if (props.column.listId == null) {
     setList();
 }
 
-onMounted(() => {
-    if (props.column.listId == null) {
-        return;
-    }
-
-    fetchUserList();
-});
-
 async function setList() {
     const lists = await os.api("users/lists/list");
     const { canceled, result: list } = await os.select({