cache all notes

src/modules/note/components/CacheAllNote.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useOfflineNote } from '@/hooks/useOfflineNote.hook'
+
+const { cacheAllNotes, isLoading, totalOfNotes, noteCompleted } =
+  useOfflineNote()
+
+const confirmBeforeCachingAllNotes = () => {
+  confirm('Do you want to cache all notes?')
+  cacheAllNotes()
+}
+</script>
+
+<template>
+  <div v-if="isLoading" class="cache-all-notes">
+    <div>{{ noteCompleted }}/{{ totalOfNotes }}</div>
+    <progress
+      :value="noteCompleted"
+      class="progress"
+      :max="totalOfNotes"
+    ></progress>
+  </div>
+  <button v-else class="button" @click="() => confirmBeforeCachingAllNotes()">
+    cache all notes
+  </button>
+</template>
+
+<style scoped lang="scss">
+.cache-all-notes {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+</style>