Bug fixes + Save status

resources/js/components/SaveStatusIcon.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { useResumesStore } from '@/stores/resume';
+import { computed, ref, watch } from 'vue';
+import { CloudCheck, LoaderCircle, CircleAlert } from 'lucide-vue-next';
+
+const resumeStore = useResumesStore();
+
+const DISAPPEAR_DELAY = 5000;
+
+const isSaving = computed(() => resumeStore.isSaving);
+
+const error = ref<string | null>(null);
+watch(() => resumeStore.savingError, (newError) => {
+    error.value = newError;
+    if (newError) {
+        showSaved.value = false;
+    }
+});
+
+const showSaved = ref(false);
+let showSavedTimeout: ReturnType<typeof setTimeout>;
+watch(isSaving, (newIsSaving: boolean) => {
+    if (!newIsSaving && !error.value) {
+        if (showSavedTimeout) {
+            clearTimeout(showSavedTimeout);
+        }
+        showSaved.value = true;
+        showSavedTimeout = setTimeout(() => {
+            showSaved.value = false;
+        }, DISAPPEAR_DELAY);
+    } else {
+        showSaved.value = false;
+    }
+});
+</script>
+
+<template>
+    <div class="flex justify-between gap-2 items-center p-3 h-4">
+        <p class="text-red-400">{{ error }}</p>
+        <Transition mode="out-in" appear>
+            <CircleAlert class="w-4 h-4 text-red-500" v-if="error"/>
+            <LoaderCircle class="w-4 h-4 animate-spin" v-else-if="isSaving"/>
+            <CloudCheck class="w-4 h-4" v-else-if="showSaved" title="Sauvegardé"/>
+        </Transition>
+    </div>
+</template>
+
+<style lang="css" scoped>
+    .v-enter-active,
+    .v-leave-active {
+    transition: opacity 0.3s ease;
+    }
+
+    .v-enter-from,
+    .v-leave-to {
+    opacity: 0;
+    }
+</style>