autoimport with eslint now

.eslintrc.js

@@ -17,6 +17,7 @@ module.exports = {
     '@vue/eslint-config-typescript',
     'plugin:prettier-vue/recommended'
   ],
+  plugins: ['simple-import-sort'],
   rules: {
     'no-console': DEV_TOOL_ACTIVATED,
     'no-debugger': DEV_TOOL_ACTIVATED,
@@ -43,7 +44,9 @@ module.exports = {
           }
         ]
       }
-    ]
+    ],
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error'
   },
   overrides: [
     {

package.json

@@ -53,6 +53,7 @@
     "eslint": "^8.46.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier-vue": "^4.2.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-vue": "^9.16.1",
     "prettier": "^3.0.1",
     "sass": "^1.64.2",

src/assets/icons/offline.svg

@@ -1,8 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-wifi-off" width="30" height="30" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cloud-off" width="30" height="30" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-  <path d="M12 18l.01 0" />
+  <path d="M9.58 5.548c.24 -.11 .492 -.207 .752 -.286c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 .957 -.383 1.824 -1.003 2.454m-2.997 1.033h-11.343c-2.572 -.004 -4.657 -2.011 -4.657 -4.487c0 -2.475 2.085 -4.482 4.657 -4.482c.13 -.582 .37 -1.128 .7 -1.62" />
-  <path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
-  <path d="M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2" />
-  <path d="M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374" />
   <path d="M3 3l18 18" />
 </svg>

src/assets/icons/online.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-onedrive" width="30" height="30" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M18.456 10.45a6.45 6.45 0 0 0 -12 -2.151a4.857 4.857 0 0 0 -4.44 5.241a4.856 4.856 0 0 0 5.236 4.444h10.751a3.771 3.771 0 0 0 3.99 -3.54a3.772 3.772 0 0 0 -3.538 -3.992z" />
+</svg>

src/components/AuthorizeUser.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
-import { signIn } from '@/modules/user/service/signIn'
 import { onBeforeMount, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
+import { signIn } from '@/modules/user/service/signIn'
+
 const route = useRoute()
 const router = useRouter()
 const { saveCredentials } = useGitHubLogin()

src/components/FluxNote.vue

@@ -1,12 +1,4 @@
 <script lang="ts" setup>
-import LiteLoading from '@/components/LiteLoading.vue'
-import { useLinks } from '@/hooks/useLinks.hook'
-import { useMarkdown } from '@/hooks/useMarkdown.hook'
-import { useNote } from '@/hooks/useNote.hook'
-import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
-import { useVisitRepo } from '@/modules/history/hooks/useVisitRepo.hook'
-import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
-import { useUserSettings } from '@/modules/user/hooks/useUserSettings.hook'
 import {
   computed,
   defineAsyncComponent,
@@ -17,6 +9,15 @@ import {
   watch
 } from 'vue'
 
+import LiteLoading from '@/components/LiteLoading.vue'
+import { useLinks } from '@/hooks/useLinks.hook'
+import { useMarkdown } from '@/hooks/useMarkdown.hook'
+import { useNote } from '@/hooks/useNote.hook'
+import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import { useVisitRepo } from '@/modules/history/hooks/useVisitRepo.hook'
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+import { useUserSettings } from '@/modules/user/hooks/useUserSettings.hook'
+
 const HeaderNote = defineAsyncComponent(
   () => import('@/components/HeaderNote.vue')
 )
@@ -109,14 +110,19 @@ const focus = () => scrollToFocusedNote(undefined, true)
           >
             {{ repo }} </router-link
           >]
+        </h1>
+        <h4 class="subtitle is-4">
+          <em>{{ user }}</em> -
           <img
-            v-if="store.isReadmeOffline"
+            v-show="store.isReadmeOffline"
             src="@/assets/icons/offline.svg"
             alt="ofline"
           />
-        </h1>
+          <img
-        <h4 class="subtitle is-4">
+            v-show="!store.isReadmeOffline"
-          <em>{{ user }}</em>
+            src="@/assets/icons/online.svg"
+            alt="ofline"
+          />
         </h4>
       </div>
       <slot />
@@ -194,11 +200,8 @@ $header-height: 40px;
         text-align: center;
       }
 
-      .title {
+      img {
-        img {
+        vertical-align: middle;
-          position: absolute;
-          right: 0;
-        }
       }
     }
   }

src/components/FooterTranslation.vue

@@ -8,9 +8,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { locales } from '@/locales/message'
 import { useI18n } from 'vue-i18n'
 
+import { locales } from '@/locales/message'
+
 export default defineComponent({
   name: 'FooterTranslation',
   setup() {

src/components/LinkedNotes.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
+
 import { useBacklinks } from '@/hooks/useBacklinks.hook'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
-import { computed } from 'vue'
 
 const props = defineProps<{
   sha: string

src/components/NewVersion.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import LiteLoading from '@/components/LiteLoading.vue'
 import { useRegisterSW } from 'virtual:pwa-register/vue'
 import { ref } from 'vue'
 
+import LiteLoading from '@/components/LiteLoading.vue'
+
 const devMode = ref(import.meta.env.DEV)
 const isLoading = ref(false)
 const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW()

src/components/StackedNote.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { computed, defineAsyncComponent, nextTick, watch } from 'vue'
+
 import { useFile } from '@/hooks/useFile.hook'
 import { useImages } from '@/hooks/useImages.hook'
 import { useLinks } from '@/hooks/useLinks.hook'
@@ -8,7 +10,6 @@ import { useTitleNotes } from '@/hooks/useTitleNotes.hook'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { filenameToNoteTitle } from '@/utils/noteTitle'
 import { generateTweets } from '@/utils/twitter'
-import { computed, defineAsyncComponent, nextTick, watch } from 'vue'
 
 const LinkedNotes = defineAsyncComponent(
   () => import('@/components/LinkedNotes.vue')

src/components/WelcomeWorld.vue

@@ -102,12 +102,13 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue'
+
 import SignInGithub from '@/components/SignInGithub.vue'
 import { useForm } from '@/hooks/useForm.hook'
 import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
 import LastVisited from '@/modules/history/components/LastVisited.vue'
 import { useFavoriteRepos } from '@/modules/repo/hooks/useFavoriteRepos.hook'
-import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'WelcomeWorld',

src/data/data.ts

@@ -1,6 +1,7 @@
 import { nanoid } from 'nanoid'
 import indexedDb from 'pouchdb-adapter-indexeddb'
 import PouchDb from 'pouchdb-browser'
+
 import { DataType } from './DataType.enum'
 import { Model } from './models/Model'
 

src/hooks/useBacklinks.hook.ts

@@ -1,9 +1,10 @@
+import { useAsyncState } from '@vueuse/core'
+import { ComputedRef, onUnmounted, toValue } from 'vue'
+
 import { backlinkEventBus } from '@/bus/backlinkEventBus'
 import { data } from '@/data/data'
 import { DataType } from '@/data/DataType.enum'
 import { BacklinkNote } from '@/modules/note/models/BacklinkNote'
-import { useAsyncState } from '@vueuse/core'
-import { ComputedRef, onUnmounted, toValue } from 'vue'
 
 export const useBacklinks = (sha: string | ComputedRef<string>) => {
   sha = toValue(sha)

src/hooks/useComputeBacklinks.hook.ts

@@ -1,3 +1,5 @@
+import { watch } from 'vue'
+
 import { backlinkEventBus } from '@/bus/backlinkEventBus'
 import { data } from '@/data/data'
 import { DataType } from '@/data/DataType.enum'
@@ -9,7 +11,6 @@ import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { isExternalLink } from '@/utils/link'
 import { filenameToNoteTitle } from '@/utils/noteTitle'
 import { confirmMessage } from '@/utils/notif'
-import { watch } from 'vue'
 
 const isMarkdown = (filename?: string) => filename?.endsWith('.md') ?? false
 

src/hooks/useFile.hook.ts

@@ -1,8 +1,9 @@
+import { Ref, ref, toValue } from 'vue'
+
 import { useMarkdown } from '@/hooks/useMarkdown.hook'
 import { prepareNoteCache } from '@/modules/note/cache/prepareNoteCache'
 import { getFileContent } from '@/modules/repo/services/repo'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
-import { Ref, ref, toValue } from 'vue'
 
 export const useFile = (sha: Ref<string> | string, retrieveContent = true) => {
   const { render } = useMarkdown(toValue(sha))

src/hooks/useGitHubLogin.hook.ts

@@ -1,8 +1,8 @@
 import { computed, ref } from 'vue'
 
-import { confirmMessage } from '@/utils/notif'
-import { getAccessToken, saveAccessToken } from '@/modules/user/service/signIn'
 import { GithubToken } from '@/modules/user/interfaces/GithubToken'
+import { getAccessToken, saveAccessToken } from '@/modules/user/service/signIn'
+import { confirmMessage } from '@/utils/notif'
 
 const username = ref<string | null>(null)
 const accessToken = ref<string | null>(null)

src/hooks/useImages.hook.ts

@@ -1,7 +1,8 @@
+import { computed, watch } from 'vue'
+
 import { useFile } from '@/hooks/useFile.hook'
 import { resolvePath } from '@/modules/repo/services/resolvePath'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
-import { computed, watch } from 'vue'
 
 const SRC_PREFIX = 'data:image/jpeg;charset=utf-8;base64,'
 

src/hooks/useLinks.hook.ts

@@ -1,7 +1,8 @@
+import { ComputedRef, onUnmounted, Ref, toValue } from 'vue'
+
 import { noteEventBus } from '@/bus/noteEventBus'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { isExternalLink } from '@/utils/link'
-import { ComputedRef, onUnmounted, Ref, toValue } from 'vue'
 
 export const useLinks = (
   className: ComputedRef<string> | string,

src/hooks/useMarkdown.hook.ts

@@ -1,6 +1,3 @@
-import { decodeBase64ToUTF8 } from '@/utils/decodeBase64ToUTF8'
-import { html5Media } from '@/utils/markdown/markdown-html5-media'
-import { twitterPlugin } from '@/utils/markdown/markdown-it-twitter'
 import markdownItClass from '@toycode/markdown-it-class'
 import MarkdownIt from 'markdown-it'
 import blockEmbedPlugin from 'markdown-it-block-embed'
@@ -10,6 +7,10 @@ import markdownItIframe from 'markdown-it-iframe'
 import markdownItLatex from 'markdown-it-latex'
 import { Ref, toValue } from 'vue'
 
+import { decodeBase64ToUTF8 } from '@/utils/decodeBase64ToUTF8'
+import { html5Media } from '@/utils/markdown/markdown-html5-media'
+import { twitterPlugin } from '@/utils/markdown/markdown-it-twitter'
+
 const md = new MarkdownIt({
   typographer: true,
   quotes: ['«\xA0', '\xA0»', '‹\xA0', '\xA0›']

src/hooks/useNote.hook.ts

@@ -1,3 +1,5 @@
+import { computed, onMounted, onUnmounted, watch } from 'vue'
+
 import { noteEventBus } from '@/bus/noteEventBus'
 import { NOTE_WIDTH } from '@/constants/note-width'
 import { useOverlay } from '@/hooks/useOverlay.hook'
@@ -5,7 +7,6 @@ import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
 import { resolvePath } from '@/modules/repo/services/resolvePath'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { pathToNotePathTitle } from '@/utils/noteTitle'
-import { computed, onMounted, onUnmounted, watch } from 'vue'
 
 export const useNote = (containerClass: string) => {
   const store = useUserRepoStore()

src/hooks/useNoteOverlay.hook.ts

@@ -1,7 +1,8 @@
+import { computed, onMounted, Ref, ref, toValue } from 'vue'
+
 import { NOTE_WIDTH } from '@/constants/note-width'
 import { useOverlay } from '@/hooks/useOverlay.hook'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
-import { computed, onMounted, Ref, ref, toValue } from 'vue'
 
 const BOOKMARK_WIDTH = 2
 

src/hooks/useOverlay.hook.ts

@@ -1,5 +1,6 @@
-import { computed, ref } from 'vue'
 import { useEventListener, useWindowSize } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
 import { MOBILE_BREAKPOINT } from '@/constants/mobile'
 
 export const useOverlay = (listen = true) => {

src/hooks/useQueryStackedNotes.hook.ts

@@ -1,10 +1,11 @@
-import { NOTE_WIDTH } from '@/constants/note-width'
-import { useOverlay } from '@/hooks/useOverlay.hook'
-import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { useWindowSize } from '@vueuse/core'
 import { nextTick, readonly, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+import { NOTE_WIDTH } from '@/constants/note-width'
+import { useOverlay } from '@/hooks/useOverlay.hook'
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+
 const stackedNotes = ref<string[]>([])
 
 let initial = true

src/hooks/useRepos.hook.ts

@@ -1,6 +1,7 @@
-import { RepoBase } from '@/modules/repo/interfaces/RepoBase'
 import { useAsyncState } from '@vueuse/core'
+
 import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
+import { RepoBase } from '@/modules/repo/interfaces/RepoBase'
 import { getOctokit } from '@/modules/repo/services/octo'
 
 export const useRepos = () => {

src/hooks/useTitleNotes.hook.ts

@@ -1,8 +1,9 @@
+import { useTitle } from '@vueuse/core'
+import { computed, Ref, toValue, watch } from 'vue'
+
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
 import { useNotes } from '@/modules/note/hooks/useNotes'
 import { pathToNoteTitle } from '@/utils/noteTitle'
-import { useTitle } from '@vueuse/core'
-import { computed, Ref, toValue, watch } from 'vue'
 
 export const generateTitle = (titles: string[]) => titles.join(' | ')
 

src/main.ts

@@ -1,10 +1,13 @@
-import { messages } from '@/locales/message'
-import { router } from '@/router/router'
 import 'markdown-it-latex/dist/index.css'
 import 'notyf/notyf.min.css'
+
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
+
+import { messages } from '@/locales/message'
+import { router } from '@/router/router'
+
 import App from './App.vue'
 
 const i18n = createI18n({

src/modules/card/components/FlipCard.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
+
 import { Card } from '../models/Card'
 
 defineProps<{ card: Card }>()

src/modules/card/components/FlipCardList.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { computed, ref } from 'vue'
+
 import FlipCard from '@/modules/card/components/FlipCard.vue'
 import { Repetition } from '@/modules/card/hooks/useSpacedRepetitionCards'
-import { computed, ref } from 'vue'
 
 const props = defineProps<{ cards: Repetition[] }>()
 const emits = defineEmits<{

src/modules/card/hooks/useNeedReviewCards.ts

@@ -1,7 +1,8 @@
+import { useAsyncState } from '@vueuse/core'
+
 import { data } from '@/data/data'
 import { DataType } from '@/data/DataType.enum'
 import { RepetitionCard } from '@/modules/card/models/RepetitionCard'
-import { useAsyncState } from '@vueuse/core'
 
 export const useNeedReviewCards = () => {
   const { state: cardsToReview, isReady } = useAsyncState(async () => {

src/modules/card/hooks/useSpacedRepetitionCards.ts

@@ -1,5 +1,9 @@
 // https://npm.io/package/supermemo
 
+import { useAsyncState } from '@vueuse/core'
+import { addDays, isAfter } from 'date-fns'
+import { computed, nextTick, watch } from 'vue'
+
 import { data } from '@/data/data'
 import { DataType } from '@/data/DataType.enum'
 import { useFile } from '@/hooks/useFile.hook'
@@ -9,9 +13,6 @@ import { Card } from '@/modules/card/models/Card'
 import { RepetitionCard } from '@/modules/card/models/RepetitionCard'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { decodeBase64ToUTF8 } from '@/utils/decodeBase64ToUTF8'
-import { useAsyncState } from '@vueuse/core'
-import { addDays, isAfter } from 'date-fns'
-import { computed, nextTick, watch } from 'vue'
 
 const MAX_LEVEL = 8
 

src/modules/history/components/LastVisited.vue

@@ -24,9 +24,10 @@
 </template>
 
 <script lang="ts">
-import { useLastVisitedRepos } from '@/modules/history/hooks/useLastVisitedRepos.hook'
 import { defineComponent } from 'vue'
 
+import { useLastVisitedRepos } from '@/modules/history/hooks/useLastVisitedRepos.hook'
+
 export default defineComponent({
   name: 'LastVisited',
   setup() {

src/modules/history/hooks/useLastVisitedRepos.hook.ts

@@ -1,8 +1,9 @@
+import { useAsyncState } from '@vueuse/core'
+import { computed } from 'vue'
+
 import { data } from '@/data/data'
 import { DataType } from '@/data/DataType.enum'
 import { History } from '@/data/models/History'
-import { useAsyncState } from '@vueuse/core'
-import { computed } from 'vue'
 
 const HISTORY_ID = data.generateId(DataType.History, 'history')
 

src/modules/history/hooks/useVisitRepo.hook.ts

@@ -1,7 +1,8 @@
+import { Ref, toValue } from 'vue'
+
 import { data } from '@/data/data'
 import { DataType } from '@/data/DataType.enum'
 import { History } from '@/data/models/History'
-import { Ref, toValue } from 'vue'
 
 const HISTORY_ID = data.generateId(DataType.History, 'history')
 const MAX_REPO_HISTORY = 10

src/modules/note/hooks/useFolderNotes.ts

@@ -1,6 +1,7 @@
-import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { computed } from 'vue'
 
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+
 export const useFolderNotes = (folders: string[]) => {
   const store = useUserRepoStore()
 

src/modules/note/hooks/useNotes.ts

@@ -1,6 +1,7 @@
-import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { computed } from 'vue'
 
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+
 export const useNotes = () => {
   const store = useUserRepoStore()
 

src/modules/repo/hooks/useFavoriteRepos.hook.ts

@@ -1,10 +1,10 @@
 import { computed, onMounted, ref } from 'vue'
 
-import { DataType } from '@/data/DataType.enum'
-import { FavoriteRepo } from '@/modules/repo/models/FavoriteRepo'
-import { RepoBase } from '@/modules/repo/interfaces/RepoBase'
 import { data } from '@/data/data'
+import { DataType } from '@/data/DataType.enum'
 import { useRepos } from '@/hooks/useRepos.hook'
+import { RepoBase } from '@/modules/repo/interfaces/RepoBase'
+import { FavoriteRepo } from '@/modules/repo/models/FavoriteRepo'
 
 export const useFavoriteRepos = () => {
   const { repos } = useRepos()

src/modules/repo/hooks/useRepoList.hook.ts

@@ -1,7 +1,8 @@
-import { RepoBase } from '@/modules/repo/interfaces/RepoBase'
 import { computed } from 'vue'
-import { useFavoriteRepos } from '@/modules/repo/hooks/useFavoriteRepos.hook'
+
 import { useRepos } from '@/hooks/useRepos.hook'
+import { useFavoriteRepos } from '@/modules/repo/hooks/useFavoriteRepos.hook'
+import { RepoBase } from '@/modules/repo/interfaces/RepoBase'
 
 export const useRepoList = () => {
   const { savedFavoriteRepos, addFavorite, removeFavorite } = useFavoriteRepos()

src/modules/repo/services/octo.ts

@@ -1,6 +1,7 @@
-import { getAccessToken } from '@/modules/user/service/signIn'
 import { Octokit } from '@octokit/rest'
 
+import { getAccessToken } from '@/modules/user/service/signIn'
+
 export const getOctokit = async (): Promise<Octokit> => {
   const response = await getAccessToken()
 

src/modules/repo/services/resolvePath.spec.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+
 import { resolvePath } from './resolvePath'
 
 describe('resolve path service', () => {

src/modules/repo/store/userRepo.store.ts

@@ -1,3 +1,5 @@
+import { defineStore } from 'pinia'
+
 import { RepoFile } from '@/modules/repo/interfaces/RepoFile'
 import { UserSettings } from '@/modules/repo/interfaces/UserSettings'
 import {
@@ -7,7 +9,6 @@ import {
   getUserSettingsContent
 } from '@/modules/repo/services/repo'
 import { refreshToken } from '@/modules/user/service/signIn'
-import { defineStore } from 'pinia'
 
 interface State {
   user: string
@@ -48,9 +49,15 @@ export const useUserRepoStore = defineStore({
         getFiles(newUser, newRepo)
       ])
       this.readme = readme
-      this.isReadmeOffline = false
       this.files = files
 
+      // if the offline state is too quick,
+      // it gives more the impression of
+      // glitch.
+      setTimeout(() => {
+        this.isReadmeOffline = false
+      }, 500)
+
       this.userSettings = await getUserSettingsContent(newUser, newRepo, files)
     },
     resetUserRepo() {

src/modules/user/hooks/useUserSettings.hook.ts

@@ -1,6 +1,7 @@
-import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { watchEffect } from 'vue'
 
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+
 const DEFAULT_FONT_POLICY = "'Courier Prime', monospace"
 
 const LIGHT_FONT_COLOR = '#4a4a4a'

src/modules/user/service/signIn.ts

@@ -1,10 +1,11 @@
+import { Octokit } from '@octokit/rest'
+import { addMinutes, addSeconds, isBefore } from 'date-fns'
+
 import { data } from '@/data/data'
 import { DataType } from '@/data/DataType.enum'
 import { GithubAccessToken } from '@/data/models/GithubAccessToken'
 import { GithubToken } from '@/modules/user/interfaces/GithubToken'
 import { GithubTokenError } from '@/modules/user/interfaces/GithubTokenError'
-import { Octokit } from '@octokit/rest'
-import { addMinutes, addSeconds, isBefore } from 'date-fns'
 
 const AUTHENTICATION_SERVER = 'https://litenote.li212.fr'
 const personalTokenId = 'token'

src/router/router.ts

@@ -1,6 +1,7 @@
-import Home from '@/views/HomeApp.vue'
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
+import Home from '@/views/HomeApp.vue'
+
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/repo-list',

src/views/AboutApp.vue

@@ -23,9 +23,10 @@
 </template>
 
 <script lang="ts">
-import GoBack from '@/components/GoBack.vue'
 import { defineComponent } from 'vue'
 
+import GoBack from '@/components/GoBack.vue'
+
 export default defineComponent({
   components: { GoBack }
 })

src/views/DraftNotes.vue

@@ -7,9 +7,10 @@
 </template>
 
 <script lang="ts">
-import { useFolderNotes } from '@/modules/note/hooks/useFolderNotes'
 import { defineAsyncComponent, defineComponent } from 'vue'
 
+import { useFolderNotes } from '@/modules/note/hooks/useFolderNotes'
+
 const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
 
 const DRAFT_FOLDER = ['drafts', '_drafts']

src/views/FluxNoteView.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import FluxNote from '@/components/FluxNote.vue'
 import { useComputeBacklinks } from '@/hooks/useComputeBacklinks.hook'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
-import { computed } from 'vue'
 
 useQueryStackedNotes()
 useComputeBacklinks()

src/views/HistoricNotes.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { useNotes } from '@/modules/note/hooks/useNotes'
 import { defineAsyncComponent, ref } from 'vue'
 
+import { useNotes } from '@/modules/note/hooks/useNotes'
+
 const devMode = ref(import.meta.env.DEV)
 const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
 

src/views/NeedReviewCards.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import FluxNote from '@/components/FluxNote.vue'
 import { DataType } from '@/data/DataType.enum'
 import { useNeedReviewCards } from '@/modules/card/hooks/useNeedReviewCards'
-import { computed } from 'vue'
 
 defineProps<{
   user: string

src/views/RepoList.vue

@@ -77,11 +77,12 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue'
+
 import GoBack from '@/components/GoBack.vue'
 import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
 import { useRepos } from '@/hooks/useRepos.hook'
 import { useRepoList } from '@/modules/repo/hooks/useRepoList.hook'
-import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'RepoList',

src/views/ShareNotes.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { computed, defineAsyncComponent, onMounted } from 'vue'
+
 import { useFile } from '@/hooks/useFile.hook'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
-import { computed, defineAsyncComponent, onMounted } from 'vue'
 
 const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))