contexted link highlight + adjust prettier

src/components/Note.vue

@@ -32,12 +32,14 @@ const references = computed<Note[]>(() => {
 </script>
 <template>
   <div class="flex flex-col">
-    <h1 class="mb-2 flex items-center rounded-md font-semibold text-3xl hover:bg-gray-200">
+    <h1
+      class="mb-2 flex items-center rounded-md text-3xl font-semibold hover:bg-gray-200"
+    >
       <i
         class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
         v-if="props.note.isRoot"
-      ></i
-      ><input
+      ></i>
+      <input
         type="text"
         class="flex-1 bg-transparent py-1 outline-none"
         v-model="noteTitle"
@@ -52,25 +54,23 @@ const references = computed<Note[]>(() => {
       <div class="card-body px-3 py-3">
         <ul class="menu rounded-md">
           <li class="menu-title !opacity-100">
-            <span class="card-title text-secondary"
-              >References
+            <span class="card-title text-secondary">
+              References
               <div class="badge-outline badge">{{ references.length }}</div>
             </span>
           </li>
           <li v-for="reference in references">
-            <a class="rounded-md" @click="activeNote = reference"
-              ><i class="far fa-file-alt fa-fw" />{{ reference.title }}</a
-            >
+            <a class="rounded-md" @click="activeNote = reference">
+              <i class="far fa-file-alt fa-fw" />
+              {{ reference.title }}
+            </a>
           </li>
         </ul>
       </div>
     </div>
     <hr class="my-3" />
     <div class="flex text-sm text-secondary">
-      <span
-        >{{ note.wordCount }}
-        {{ note.wordCount === 1 ? 'word' : 'words' }}</span
-      >
+      <span>{{ note.wordCount }} {{ note.wordCount === 1 ? 'word' : 'words' }}</span>
       <span class="ml-auto">Last modified {{ formatDate(note.modified) }}</span>
     </div>
   </div>

src/components/SearchBar.vue

@@ -28,9 +28,7 @@ const activeResult = ref<Note>()
 const handleKeydown = (event: KeyboardEvent) => {
   const code = event.code
   if (['ArrowUp', 'ArrowDown', 'Tab'].includes(code)) {
-    let index = results.value.findIndex(
-      (note) => note.id === activeResult.value?.id
-    )
+    let index = results.value.findIndex((note) => note.id === activeResult.value?.id)
     if (['ArrowDown', 'Tab'].includes(code)) {
       index++
     } else if (['ArrowUp'].includes(code)) {
@@ -59,19 +57,12 @@ const handleKeydown = (event: KeyboardEvent) => {
       ref="queryElem"
       @keydown="handleKeydown"
     />
-    <div
-      class="z-1000 dropdown absolute left-0 right-0 top-[100%]"
-      v-if="active"
-    >
+    <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"
       >
-        <li
-          v-for="result in results"
-          v-if="results.length > 0"
-          class="flex flex-row"
-        >
+        <li v-for="result in results" v-if="results.length > 0" class="flex flex-row">
           <a
             class="flex-1 items-center px-2 py-1"
             @click.stop.prevent="() => goToNote(result)"
@@ -84,11 +75,12 @@ const handleKeydown = (event: KeyboardEvent) => {
             <span
               class="badge-ghost badge badge-sm mr-0.5"
               v-if="activeNote?.id === result.id"
-              >current</span
             >
-            <span class="flex-1">{{ result.title }} </span>
-            <span>{{ formatDate(result.modified) }}</span></a
-          >
+              current
+            </span>
+            <span class="flex-1">{{ result.title }}</span>
+            <span>{{ formatDate(result.modified) }}</span>
+          </a>
         </li>
         <li v-else><a>No notes found</a></li>
       </ul>

src/components/SideBar.vue

@@ -20,11 +20,9 @@ const emit = defineEmits<{
     <SideBarMenu>
       <template #header>Root note</template>
       <template #items>
-        <SideBarMenuItem
-          icon="fas fa-fw fa-home"
-          @click="activeNote = rootNote"
-          >{{ rootNote?.title }}</SideBarMenuItem
-        >
+        <SideBarMenuItem icon="fas fa-fw fa-home" @click="activeNote = rootNote">
+          {{ rootNote?.title }}
+        </SideBarMenuItem>
       </template>
     </SideBarMenu>
     <SideBarMenu>
@@ -35,21 +33,24 @@ const emit = defineEmits<{
           :icon="viewMode.icon"
           :active="viewMode.name === activeViewMode.name"
           @click="emit('setViewMode', viewMode)"
-          >{{ viewMode.name }}</SideBarMenuItem
         >
+          {{ viewMode.name }}
+        </SideBarMenuItem>
       </template>
     </SideBarMenu>
     <SideBarMenu>
-      <template #header
-        ><i class="far fa-clock fa-fw mr-2" />Recent notes</template
-      >
+      <template #header>
+        <i class="far fa-clock fa-fw mr-2" />
+        Recent notes
+      </template>
       <template #items>
         <SideBarMenuItem
           v-for="note in notes"
           icon="far fa-file-alt fa-fw"
           @click="activeNote = note"
-          >{{ note.title }}</SideBarMenuItem
         >
+          {{ note.title }}
+        </SideBarMenuItem>
       </template>
     </SideBarMenu>
   </div>

src/components/SideBar/SideBarMenuItem.vue

@@ -9,6 +9,7 @@ const props = defineProps<{
     class="mt-1 block w-full cursor-pointer rounded hover:bg-gray-200 active:bg-primary active:text-primary-content"
     :class="props.active ? 'font-bold text-primary' : 'text-secondary'"
   >
-    <i :class="props.icon" class="mr-2" v-if="props.icon"></i><slot></slot>
+    <i :class="props.icon" class="mr-2" v-if="props.icon"></i>
+    <slot></slot>
   </a>
 </template>

src/components/TopBar.vue

@@ -13,13 +13,8 @@ const emit = defineEmits<{
 </script>
 <template>
   <div class="absolute left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
-    <div
-      class="w-in mx-auto flex w-full max-w-app items-center py-2.5 text-white"
-    >
-      <div
-        class="flex pl-3"
-        :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'"
-      >
+    <div class="w-in mx-auto flex w-full max-w-app items-center py-2.5 text-white">
+      <div class="flex pl-3" :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'">
         <Hamburger
           :side-bar-collapsed="props.sideBarCollapsed"
           @toggle-side-bar="emit('toggleSideBar')"
@@ -38,9 +33,7 @@ const emit = defineEmits<{
         >
           <i class="fas fa-plus-circle text-[1.1rem]" />
         </button>
-        <button class="btn-outline btn-sm btn h-full text-white">
-          Sign in
-        </button>
+        <button class="btn-outline btn-sm btn h-full text-white">Sign in</button>
       </div>
     </div>
   </div>