feat: optimize monaco editor error notification

.changes/optimize-editor.md

@@ -0,0 +1,5 @@
+---
+"algohub": patch:feat
+---
+
+Optimize monaco editor error notification.

scripts/release-aur.mjs

@@ -24,7 +24,7 @@ license=('agplv3')
 depends=('cairo' 'desktop-file-utils' 'gdk-pixbuf2' 'glib2' 'gtk3' 'hicolor-icon-theme' 'libsoup' 'pango' 'webkit2gtk-4.1')
 options=('!strip' '!emptydirs')
 install=\${pkgname}.install
-source_x86_64=("<source_x86>")
+source_x86_64=("https://github.com/swpu-acm/algohub/releases/download/algohub-v\${pkgver//_/-}/algohub_\${pkgver//_/-}_amd64.deb")
 sha256sums_x86_64=('<sha256sums>')
 package() {
   tar -xz -f data.tar.gz -C "\${pkgdir}"
@@ -149,9 +149,10 @@ const releaseAur = defineCommand({
     const sha256sums = await generateSHA256(binaryPath);
     console.log(`SHA256 checksums: ${sha256sums}`);
 
-    const PKGBUILD = PKGBUILD_TEMPLATE.replaceAll("<source_x86>", url)
-      .replaceAll("<pkgver>", version.replaceAll("-", "_"))
-      .replaceAll("<sha256sums>", sha256sums);
+    const PKGBUILD = PKGBUILD_TEMPLATE.replaceAll(
+      "<pkgver>",
+      version.replaceAll("-", "_")
+    ).replaceAll("<sha256sums>", sha256sums);
     writeFileSync(path.resolve(basePath, "aur/PKGBUILD"), PKGBUILD);
 
     execSync("makepkg --printsrcinfo > .SRCINFO", {
@@ -163,8 +164,9 @@ const releaseAur = defineCommand({
     unlinkSync(binaryPath);
 
     // Setup Git repository
-    execSync("git -C aur add PKGBUILD .SRCINFO algohub.install", {
+    execSync("git add .", {
       stdio: "inherit",
+      cwd: "aur",
       env,
     });
     execSync(`git -C aur config user.name "苏向夜"`, { stdio: "inherit", env });

src/components/MonacoEditor.vue

@@ -91,16 +91,37 @@ const onChangeLanguage = (value: SelectChangeEvent) => {
         model && monaco.editor.setModelLanguage(model, value.value);
     }
 }
+
+type Severity = 'info' | "secondary" | 'warn' | 'error';
+
+const submitting = ref(false)
+const message = ref<{ text?: string, severity: Severity }>({ text: undefined, severity: 'info' })
+const onSubmit = () => {
+    if (!rawEditor.value) {
+        return
+    }
+    submitting.value = true
+    emit(
+        'submit',
+        rawEditor.value.getValue(),
+        language,
+        (text: string, severity: Severity) => {
+            submitting.value = false
+            message.value = { text, severity }
+        }
+    )
+}
 </script>
 
 <template>
     <div class="w-full h-full flex flex-col">
         <div class="flex flex-row m-[6px] justify-between">
             <Select v-model="language" @change="onChangeLanguage" :options="languageOptions" optionLabel="name"
-                optionValue="value" placeholder="Select a Language" />
-            <Button @click="emit('submit', rawEditor?.getValue(), language)" label="Submit" icon="pi pi-send"
-                size="small" severity="contrast" outlined></Button>
+                optionValue="value" placeholder="Select a Language"></Select>
+            <Button @click="onSubmit" label="Submit" icon="pi pi-send" size="small" severity="contrast" outlined
+                :loading="submitting"></Button>
         </div>
+        <Message size="small" v-if="message.text" :severity="message.severity">{{ message.text }}</Message>
         <div class="flex-1" ref="editorContainer"></div>
     </div>
 </template>

src/components/UniversalToolBar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useAccountStore, useThemeStore } from '@/scripts/store';
-import { useToast } from 'primevue';
+import { Avatar, Skeleton, useToast } from 'primevue';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -125,7 +125,7 @@ const toString = (value: any) => {
     <div class="bg-gray-100 dark:bg-zinc-900 flex flex-row items-center justify-between w-full py-3 px-5 flex-wrap"
         :class="{ 'border-b-[1.2px] border-zinc-300 dark:border-zinc-600 shadow-sm': separateBottom ?? true }">
         <div class="inline-flex justify-center items-center">
-            <img :src="themeStore.dark ? '/acm-light.png' : '/acm.png'" width="40"></img>
+            <img @click="router.push('/')" class="cursor-pointer" :src="themeStore.dark ? '/acm-light.png' : '/acm.png'" width="40"></img>
             <Breadcrumb v-if="path?.length" :model="path" class="!bg-transparent !p-0">
                 <template #item="{ item }">
                     <Button v-if="item.link" v-ripple @click="router.push(item.link)" :icon="item.icon"
@@ -166,8 +166,10 @@ const toString = (value: any) => {
             <Avatar v-if="accountStore.isLoggedIn && accountStore.avatarUrl" @click="isShowUserPanel = !isShowUserPanel"
                 :image="accountStore.avatarUrl" class="!cursor-pointer" shape="circle">
             </Avatar>
-            <Avatar v-else-if="accountStore.isLoggedIn" @click="isShowUserPanel = !isShowUserPanel"
-                class="!cursor-pointer" shape="circle" :label="accountStore.account.username![0]"></Avatar>
+            <Avatar v-else-if="accountStore.isLoggedIn && accountStore.account?.username"
+                @click="isShowUserPanel = !isShowUserPanel" class="!cursor-pointer" shape="circle"
+                :label="accountStore.account.username[0]"></Avatar>
+            <Skeleton v-else shape="circle" size="2em"></Skeleton>
         </div>
     </div>
 </template>

src/scripts/store.ts

@@ -77,7 +77,7 @@ export const useAccountStore = defineStore(
     const account = ref<Account>({});
 
     const isLoggedIn = computed(() =>
-      Boolean(account.value !== null && account.value.token)
+      Boolean(account.value !== null && (account.value.token?.length ?? 0) > 0)
     );
 
     const auth = computed<Credentials | undefined>(() => {

src/views/account/[id].vue

@@ -109,7 +109,7 @@ onMounted(async () => {
                                 </div>
                             </div>
                             <span class="my-1">{{ profile.signature }}</span>
-                            <Button class="my-4" size="small" v-if="accountStore.account.username === profile.username"
+                            <Button class="my-4" size="small" v-if="accountStore.account?.username === profile.username"
                                 label="Edit Profile" severity="secondary" disabled fluid></Button>
                             <div class="flex flex-col gap-2 my-2">
                                 <div class="inline-flex items-center gap-2">

src/views/problem/[id].vue

@@ -38,19 +38,22 @@ const formatProblem = (problem: ProblemDetail) => {
 
 const code = ref('');
 const language = ref(Language.Rust);
-const onSubmit = async (code: string, lang: Language) => {
+const onSubmit = async (code: string, lang: Language, finish: (text: string, severity: string) => void) => {
     if (!code) {
-        return toast.add({ severity: 'error', summary: 'Error', detail: 'Please enter your code.' });
+        return finish('Code submission should not be a blank.', 'error')
+    }
+    if (!problem.value) {
+        return finish('Failed to access problem data.', 'error')
     }
     const res = await api.submitCode(id, {
         auth: accountStore.auth!,
         lang,
         code,
     });
     if (!res.success) {
-        return toast.add({ severity: 'error', summary: 'Error', detail: res.message });
+        return finish(res.message, 'error');
     }
-    toast.add({ severity: 'success', summary: 'Success', detail: 'Your code has been submitted successfully.' });
+    finish('Code submitted', 'success');
 }
 
 const path = ref<{ label?: string, link?: string }[]>([]);