fix: syncing status

Author: DIYgod

src/components/Notes.vue

@@ -1,8 +1,10 @@
 <template>
     <el-card class="relative border-0 hover:bg-gray-100" shadow="never">
         <div class="flex flex-row">
-            <div class="w-10 h-10 mr-3"><img class="rounded-full" :src="profile.avatars?.[0]" /></div>
-            <div>
+            <div class="w-10 h-10 mr-3" v-if="profile.avatars?.[0]">
+                <img class="rounded-full" :src="profile.avatars?.[0]" />
+            </div>
+            <div class="flex-1">
                 <div class="mb-1">
                     <span class="font-bold align-middle">{{ profile.name || profile.username }}</span>
                     <span class="text-gray-500 ml-1 align-middle" v-if="profile.username">@{{ profile.username }}</span>

src/components/SyncStatus.vue

@@ -33,6 +33,10 @@ const props = defineProps({
         type: Function,
         required: true,
     },
+    link: {
+        type: String,
+        required: true,
+    },
 });
 
 const note = ref<Note>();
@@ -57,8 +61,34 @@ const syncOrRedirect = async (e: any) => {
 
 const init = async () => {
     note.value = await props.getNote();
-    loading.value = false;
+    if (loadingNotice.value !== 'Syncing...') {
+        loading.value = false;
+    }
 };
 
 init();
+
+async function setStatus(status: string) {
+    switch (status) {
+        case 'syncing':
+            loading.value = true;
+            loadingNotice.value = 'Syncing...';
+            break;
+        case 'synced':
+            loadingNotice.value = 'Loading...';
+            init();
+            break;
+    }
+}
+
+if (!(<any>window).cssc) {
+    (<any>window).cssc = {};
+}
+if (!(<any>window).cssc.updateSyncing) {
+    (<any>window).cssc.updateSyncing = {};
+}
+(<any>window).cssc.updateSyncing[props.link] = setStatus;
+if ((<any>window).cssc.syncing === props.link) {
+    setStatus('syncing');
+}
 </script>

src/content-script/hooks/twitter.ts

@@ -117,6 +117,13 @@ class TwitterHook {
     }
 
     private async sync(note: NoteInput, attachmentUrls?: string[]) {
+        if (!(<any>window).cssc) {
+            (<any>window).cssc = {};
+        }
+        const url = note.related_urls?.[0];
+        (<any>window).cssc.syncing = url;
+        (<any>window).cssc.updateSyncing?.[url || '']?.('syncing');
+
         const settings = await getSettings();
         const handle = settings.handle;
         const syncing = settings.syncing;
@@ -157,13 +164,19 @@ class TwitterHook {
                 } catch (e) {
                     this.main.xlog('error', 'Failed to post note.', e);
                     ElMessage.error('CrossSync encountered a problem: Unidata failed to post note.');
+
+                    (<any>window).cssc.syncing = null;
+                    (<any>window).cssc.updateSyncing?.[url || '']?.('synced');
                 }
             } else {
                 this.main.xlog('info', `Failed to get Unidata Instance.`);
                 ElMessage.error('CrossSync encountered a problem: Unidata instance is not ready.');
             }
 
             notice?.close();
+
+            (<any>window).cssc.syncing = null;
+            (<any>window).cssc.updateSyncing?.[url || '']?.('synced');
         }
     }
 
@@ -281,6 +294,7 @@ class TwitterHook {
                         ),
                     ].filter((url) => !!url) as string[];
                     const syncStatus = createApp(SyncStatus, {
+                        link: link,
                         getNote: async () => {
                             if (this.noteCache.has(link)) {
                                 return this.noteCache.get(link);