update search results

src/components/Note/Autocomplete.vue

@@ -10,9 +10,9 @@ const emit = defineEmits<{
 }>()
 
 const results = computed<Note[]>(() => {
-  return (
-    props.autocompleteText ? findNotesByByTitle(props.autocompleteText) : notes.value
-  ).filter((note) => note.id !== activeNote.value?.id).slice(10)
+  return (props.autocompleteText ? findNotesByByTitle(props.autocompleteText) : notes.value)
+    .filter((note) => note.id !== activeNote.value?.id)
+    .slice(0, 10)
 })
 
 const activeResult = ref<Note>()
@@ -32,15 +32,13 @@ const handleKeypress = (event: { [key: string]: number }) => {
   const keyCode = event.keyCode
   const keyCodes = {
     cycle: [38, 40],
-    confirm: [13],
+    confirm: [13]
   }
   if (keyCodes.cycle.includes(keyCode)) {
     const direction = keyCode === 38 ? -1 : 1
     changeActiveResult(direction)
   } else if (keyCodes.confirm.includes(keyCode)) {
-    const contextedLink = activeResult.value
-      ? activeResult.value.title
-      : props.autocompleteText
+    const contextedLink = activeResult.value ? activeResult.value.title : props.autocompleteText
     emit('createLink', contextedLink)
   }
 }

src/components/Note/NoteEditor.vue

@@ -176,7 +176,7 @@ const createLink = (link: string) => {
       :autocomplete-text="autocompleteText"
       :style="autocompleteStyle"
       @create-link="createLink"
-      class="absolute w-[250px]"
+      class="absolute w-[300px]"
       :class="autocompleteReverse && 'flex-col-reverse'"
     />
   </div>

src/components/Search/SearchBar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { notes, findNotes, setActiveNote } from '@/composables/useNotes'
+import SearchResult from '@/components/Search/SearchResult.vue'
 
 const emit = defineEmits<{
   active: [active: boolean]
@@ -19,7 +20,8 @@ const results = computed<Note[]>(() => {
   return query.value ? findNotes(query.value) : notes.value
 })
 
-const goToNote = (note: Note) => {
+const goToNote = (note: Note, element?: HTMLElement) => {
+  console.log(element)
   setActiveNote(note.id)
   active.value = false
   if (queryElem.value) queryElem.value.blur()
@@ -40,12 +42,16 @@ const handleKeydown = (event: KeyboardEvent) => {
     if (index + 1 > results.value.length) index = index - results.value.length
     if (index < 0) index = results.value.length - 1
     activeResult.value = results.value[index]
+    const element = resultsRefs.value[index].$el
+    if (['ArrowUp', 'ArrowDown', 'Tab'].includes(code)) element.scrollIntoView({ block: 'nearest' })
   } else if (code === 'Enter' && activeResult.value) {
     goToNote(activeResult.value)
   } else if (code === 'Escape' && queryElem.value) {
     queryElem.value.blur()
   }
 }
+
+const resultsRefs = ref<InstanceType<typeof SearchResult>[]>([])
 </script>
 <template>
   <div id="search-container" class="relative h-full flex-grow">
@@ -62,16 +68,19 @@ const handleKeydown = (event: KeyboardEvent) => {
     />
     <div class="z-1000 dropdown absolute left-0 right-0 top-[100%]" v-if="active">
       <ul tabindex="0" class="menu mt-1 w-full rounded-md bg-base-100 p-2 text-black shadow">
-        <template v-if="results.length > 0">
-          <SearchResult
-            v-for="result in results"
-            :key="result.id"
-            :result="result"
-            :active-result="activeResult"
-            @go-to-note="() => goToNote(result)"
-          />
-        </template>
-        <li v-else><a>No notes found</a></li>
+        <div class="max-h-[320px] w-full overflow-y-scroll">
+          <template v-if="results.length > 0">
+            <SearchResult
+              v-for="result in results"
+              :key="result.id"
+              :result="result"
+              :active-result="activeResult"
+              @go-to-note="(element) => goToNote(result, element)"
+              ref="resultsRefs"
+            />
+          </template>
+          <li v-else><a>No notes found</a></li>
+        </div>
       </ul>
     </div>
   </div>

src/components/Search/SearchResult.vue

@@ -8,30 +8,27 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  goToNote: []
+  goToNote: [element: HTMLElement | null]
 }>()
 
-console.log(props.activeResult)
+const element = ref<HTMLElement | null>(null)
 </script>
 <template>
-  <li class="flex flex-row">
+  <li class="flex w-full flex-row" ref="element">
     <a
-      class="flex-grow items-center px-2 py-1"
-      @click.stop.prevent="() => emit('goToNote')"
+      class="items-center px-2 py-1 w-full"
+      @click.stop.prevent="() => emit('goToNote', element)"
       @mousedown.prevent
       :class="{
         disabled: activeNote?.id === result.id,
-        active: props.activeResult?.id === result.id,
+        active: props.activeResult?.id === result.id
       }"
     >
-      <span
-        class="badge-ghost badge badge-sm mr-0.5"
-        v-if="activeNote?.id === result.id"
-      >
+      <span class="badge-ghost badge badge-sm mr-0.5" v-if="activeNote?.id === result.id">
         current
       </span>
-      <span class="flex-grow">{{ result.title }}</span>
-      <span>{{ formatDate(result.modified) }}</span>
+      <span class="flex-grow overflow-hidden whitespace-nowrap">{{ result.title }}</span>
+      <span class="whitespace-nowrap">{{ formatDate(result.modified) }}</span>
     </a>
   </li>
 </template>

src/components/Skeleton/SkeletonTopBar.vue

@@ -1,18 +1,6 @@
 <template>
-  <div class="flex h-full w-full animate-pulse">
-    <div class="h-full w-full rounded bg-white/10"></div>
+  <div class="flex h-full w-full animate-pulse space-x-2">
+    <div class="h-full w-full rounded bg-white/10" />
+    <div class="h-full w-[44px] rounded bg-white/10" />
   </div>
-  <!-- <div class="flex animate-pulse space-x-4 max-w-sm">
-    <div class="h-10 w-10 rounded-full bg-primary"></div>
-    <div class="flex-1 space-y-6 py-1">
-      <div class="h-2 rounded bg-primary"></div>
-      <div class="space-y-3">
-        <div class="grid grid-cols-3 gap-4">
-          <div class="col-span-2 h-2 rounded bg-primary"></div>
-          <div class="col-span-1 h-2 rounded bg-primary"></div>
-        </div>
-        <div class="h-2 rounded bg-primary"></div>
-      </div>
-    </div>
-  </div> -->
 </template>

src/components/TopBar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { addNote, setActiveNote, rootNote } from '@/composables/useNotes'
-import { user, signOut as firebaseSignOut } from '@/composables/useFirebase'
+import { user } from '@/composables/useFirebase'
 import { initialized } from '@/composables/useFirebase'
 
 const loading = inject<boolean>('loading')
@@ -15,11 +15,6 @@ const emit = defineEmits<{
 
 const searchActive = ref<boolean>(false)
 
-const signOut = async (close: () => Promise<boolean>) => {
-  await firebaseSignOut()
-  close()
-}
-
 const authUI: any = inject('firebaseAuthUI')
 const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
 </script>
@@ -69,37 +64,7 @@ const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
               <button class="btn-sm btn" @click="close">Close</button>
             </template>
           </Modal>
-          <template v-else-if="user">
-            <div class="search-active-hide dropdown-end dropdown">
-              <label tabindex="0" class="btn-outline btn-sm btn py-1 text-white">
-                <i class="fa-fw fa-solid fa-user-gear" />
-              </label>
-              <ul
-                tabindex="0"
-                class="dropdown-content menu rounded-box menu-compact mt-1 w-52 bg-base-100 p-2 text-base-content shadow"
-              >
-                <Modal>
-                  <template #activator="{ open }">
-                    <li @click="open" class="text-base">
-                      <a>
-                        <i class="fa-fw fa-solid fa-right-from-bracket" />
-                        Sign out
-                      </a>
-                    </li>
-                  </template>
-                  <template #title>Sign out</template>
-                  <template #default>
-                    <p>Are you sure want to signout?</p>
-                    <p>Your synchronized notes can't be accessed until you sign-in again.</p>
-                  </template>
-                  <template #actions="{ close }">
-                    <button class="btn-sm btn" @click="close">Cancel</button>
-                    <button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>
-                  </template>
-                </Modal>
-              </ul>
-            </div>
-          </template>
+          <Settings v-else-if="user" />
         </template>
         <SkeletonTopBar v-else />
       </div>

src/components/TopBar/Settings.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { activeNotesSource, notesSources } from '@/composables/useNotes'
+import { signOut as firebaseSignOut } from '@/composables/useFirebase'
+const sourceLabels: { [source: string]: string } = {
+  local: 'Switch to local notes',
+  firebase: 'Switch to cloud notes'
+}
+const availableNoteSources = computed(() =>
+  Object.entries(notesSources.value)
+    .filter(([source, enabled]) => enabled && source !== activeNotesSource.value)
+    .map(([source]) => ({
+      source: source as keyof typeof notesSources.value,
+      label: sourceLabels[source]
+    }))
+)
+
+const signOut = async (close: () => Promise<boolean>) => {
+  await firebaseSignOut()
+  close()
+}
+
+const handleClick = (fn: (...args: any[]) => any) => {
+  ;(document.activeElement as HTMLElement)?.blur()
+  fn()
+}
+</script>
+<template>
+  <div class="search-active-hide dropdown-end dropdown">
+    <label tabindex="0" class="btn-outline btn-sm btn py-1 text-white">
+      <i class="fa-fw fa-solid fa-user-gear" />
+    </label>
+    <ul
+      tabindex="0"
+      class="dropdown-content menu rounded-box menu-compact mt-1 w-52 bg-base-100 p-2 text-base-content shadow"
+    >
+      <li
+        class="text-base"
+        v-for="{ source, label } in availableNoteSources"
+        :key="source"
+        @click="handleClick(() => (activeNotesSource = source))"
+      >
+        <a>
+          <i class="fa-fw fa-solid fa-database" />
+          {{ label }}
+        </a>
+      </li>
+      <Modal>
+        <template #activator="{ open }">
+          <li @click="open" class="text-base">
+            <a>
+              <i class="fa-fw fa-solid fa-right-from-bracket" />
+              Sign out
+            </a>
+          </li>
+        </template>
+        <template #title>Sign out</template>
+        <template #default>
+          <p>Are you sure want to signout?</p>
+          <p>Your synchronized notes can't be accessed until you sign-in again.</p>
+        </template>
+        <template #actions="{ close }">
+          <button class="btn-sm btn" @click="close">Cancel</button>
+          <button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>
+        </template>
+      </Modal>
+    </ul>
+  </div>
+</template>