run prettier

src/ckeditor/CKEditor.ts

@@ -24,7 +24,7 @@ export default defineComponent({
 
   model: {
     prop: 'modelValue',
-    event: 'update:modelValue',
+    event: 'update:modelValue'
   },
 
   props: {
@@ -32,28 +32,28 @@ export default defineComponent({
       type: Function as unknown as PropType<{
         create(...args: any): Promise<Editor>
       }>,
-      required: true,
+      required: true
     },
     config: {
       type: Object as PropType<EditorConfig>,
-      default: () => ({}),
+      default: () => ({})
     },
     modelValue: {
       type: String,
-      default: '',
+      default: ''
     },
     tagName: {
       type: String,
-      default: 'div',
+      default: 'div'
     },
     disabled: {
       type: Boolean,
-      default: false,
+      default: false
     },
     disableTwoWayDataBinding: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
 
   emits: [
@@ -66,7 +66,7 @@ export default defineComponent({
     'click',
     'editorReady',
     'contextedLinkAutocomplete',
-    'contextedKeypress',
+    'contextedKeypress'
   ],
 
   data(): CKEditorComponentData {
@@ -74,7 +74,7 @@ export default defineComponent({
       // Don't define it in #props because it produces a warning.
       // https://v3.vuejs.org/guide/component-props.html#one-way-data-flow
       instance: null,
-      lastEditorData: null,
+      lastEditorData: null
     }
   },
 
@@ -114,7 +114,7 @@ export default defineComponent({
       } else {
         this.instance!.disableReadOnlyMode(SAMPLE_READ_ONLY_LOCK_ID)
       }
-    },
+    }
   },
 
   created() {
@@ -124,9 +124,7 @@ export default defineComponent({
       const [major] = CKEDITOR_VERSION.split('.').map(Number)
 
       if (major < 37) {
-        console.warn(
-          'The <CKEditor> component requires using CKEditor 5 in version 37 or higher.'
-        )
+        console.warn('The <CKEditor> component requires using CKEditor 5 in version 37 or higher.')
       }
     } else {
       console.warn('Cannot find the "CKEDITOR_VERSION" in the "window" scope.')
@@ -233,10 +231,10 @@ export default defineComponent({
       editor.model.document.on('contextedKeypress', (_, eventData) => {
         this.$emit('contextedKeypress', eventData)
       })
-    },
+    }
   },
 
   render() {
     return h(this.tagName)
-  },
+  }
 })

src/components/Auth.vue

@@ -43,5 +43,8 @@ onMounted(() => ui.start('#auth', uiConfig))
 </script>
 <template>
   <div id="auth" v-show="!props.authenticating"></div>
-  <progress v-show="props.authenticating" class="dui-progress dui-progress-primary w-full"></progress>
+  <progress
+    v-show="props.authenticating"
+    class="dui-progress dui-progress-primary w-full"
+  ></progress>
 </template>

src/components/Search/SearchResult.vue

@@ -21,8 +21,10 @@ const element = ref<HTMLElement | null>(null)
     :disabled="activeNote?.id === result.id"
     :active="props.activeResult?.id === result.id"
   >
-    <UIBadge size="sm" variant="ghost" class="mr-0.5" v-if="activeNote?.id === result.id">current</UIBadge>
-    <span class="truncate flex-grow">{{ result.title }}</span>
+    <UIBadge size="sm" variant="ghost" class="mr-0.5" v-if="activeNote?.id === result.id">
+      current
+    </UIBadge>
+    <span class="flex-grow truncate">{{ result.title }}</span>
     <span class="whitespace-nowrap">{{ formatDate(result.modified) }}</span>
   </UIMenuItem>
 </template>

src/components/SideBar/SideBarMenuItem.vue

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

src/components/Skeleton/SkeletonNote.vue

@@ -5,21 +5,21 @@
       <div class="h-[2.25rem] flex-grow rounded bg-secondary"></div>
     </div>
     <div class="flex flex-grow flex-col gap-2">
-      <div class="h-[1.25rem] my-1 w-full rounded bg-secondary"></div>
-      <div class="h-[1.25rem] my-1 w-full rounded bg-secondary"></div>
-      <div class="h-[1.25rem] my-1 w-5/12 rounded bg-secondary"></div>
+      <div class="my-1 h-[1.25rem] w-full rounded bg-secondary"></div>
+      <div class="my-1 h-[1.25rem] w-full rounded bg-secondary"></div>
+      <div class="my-1 h-[1.25rem] w-5/12 rounded bg-secondary"></div>
       <div class="mt-2 h-[2rem] w-full rounded bg-secondary"></div>
-      <div class="h-[1.25rem] my-1 w-full rounded bg-secondary"></div>
-      <div class="h-[1.25rem] my-1 w-4/6 rounded bg-secondary"></div>
-      <div class="ml-8 h-[1.25rem] my-1 w-5/12 rounded bg-secondary"></div>
-      <div class="ml-8 h-[1.25rem] my-1 w-7/12 rounded bg-secondary"></div>
-      <div class="ml-8 h-[1.25rem] my-1 w-6/12 rounded bg-secondary"></div>
-      <div class="h-[1.25rem] my-1 w-full rounded bg-secondary"></div>
+      <div class="my-1 h-[1.25rem] w-full rounded bg-secondary"></div>
+      <div class="my-1 h-[1.25rem] w-4/6 rounded bg-secondary"></div>
+      <div class="my-1 ml-8 h-[1.25rem] w-5/12 rounded bg-secondary"></div>
+      <div class="my-1 ml-8 h-[1.25rem] w-7/12 rounded bg-secondary"></div>
+      <div class="my-1 ml-8 h-[1.25rem] w-6/12 rounded bg-secondary"></div>
+      <div class="my-1 h-[1.25rem] w-full rounded bg-secondary"></div>
     </div>
     <hr class="my-3" />
     <div class="flex gap-2">
       <div class="h-[1.25rem] w-2/12 rounded bg-secondary"></div>
-      <div class="h-[1.25rem] w-4/12 rounded bg-secondary ml-auto"></div>
+      <div class="ml-auto h-[1.25rem] w-4/12 rounded bg-secondary"></div>
     </div>
   </div>
 </template>

src/components/Skeleton/SkeletonSidebarItem.vue

@@ -8,7 +8,7 @@ const props = withDefaults(
 </script>
 <template>
   <div class="flex w-full animate-pulse flex-col">
-    <div class="h-[1.35rem] w-full rounded bg-secondary mt-1" v-for="i in props.n" :key="i"></div>
+    <div class="mt-1 h-[1.35rem] w-full rounded bg-secondary" v-for="i in props.n" :key="i"></div>
   </div>
 </template>
 <style scoped>

src/components/TopBar.vue

@@ -30,10 +30,7 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
 }
 </script>
 <template>
-  <div
-    class="z-[500] flex items-end bg-primary"
-    :class="searchActive && 'search-active'"
-  >
+  <div class="z-[500] flex items-end bg-primary" :class="searchActive && 'search-active'">
     <div
       class="mx-auto flex w-full max-w-app items-center py-2.5 text-white"
       :style="{ height: `${props.height}px` }"
@@ -93,7 +90,12 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
 #logo {
   @apply cursor-pointer transition-all duration-200 hover:text-primary;
 }
-#logo:hover {
+@media (hover: hover) and (pointer: fine) {
+  #logo:hover {
+    text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white;
+  }
+}
+#logo:active {
   text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white;
 }
 .topbar-button {

src/components/TopBar/Settings.vue

@@ -5,12 +5,7 @@ import { OnClickOutside } from '@vueuse/components'
   <OnClickOutside>
     <UIDropdown class="search-active-hide">
       <template #activator>
-        <UIButton
-          :dropdown="true"
-          size="sm"
-          variant="outline"
-          class="topbar-button text-white"
-        >
+        <UIButton :dropdown="true" size="sm" variant="outline" class="topbar-button text-white">
           <i class="fa-fw fa-solid fa-user-gear" />
         </UIButton>
       </template>

src/components/ViewModes/ListView.vue

@@ -30,7 +30,7 @@ const deleteSelectedNotes = (closeModal: () => void) => {
 }
 </script>
 <template>
-  <div class="flex flex-col gap-2 w-full">
+  <div class="flex w-full flex-col gap-2">
     <div class="flex items-center gap-2">
       <div class="flex items-center">
         <span class="whitespace-nowrap">
@@ -63,7 +63,7 @@ const deleteSelectedNotes = (closeModal: () => void) => {
     <div class="overflow-x-auto">
       <UITable size="md" class="w-full">
         <thead>
-          <tr class="text-sm bg-base-200 text-base-content">
+          <tr class="bg-base-200 text-sm text-base-content">
             <th class="w-[48px]"></th>
             <th>Note title</th>
             <th class="w-[75px]">Words</th>

src/components/ui/UIDropdown.vue

@@ -3,7 +3,7 @@
     <slot name="activator" tabindex="0"></slot>
     <ul
       tabindex="0"
-      class="dui-dropdown-content dui-menu dui-menu-compact rounded-box mt-1 w-52 bg-base-100 p-2 text-base-content shadow"
+      class="dui-menu-compact dui-dropdown-content dui-menu rounded-box mt-1 w-52 bg-base-100 p-2 text-base-content shadow"
     >
       <slot name="items"></slot>
     </ul>

src/components/ui/UIMenuItem.vue

@@ -18,7 +18,7 @@ const styleClass = computed(() => {
   <li :class="styleClass">
     <span class="flex items-center" v-if="props.title"><slot></slot></span>
     <a
-      class="w-full rounded-md flex"
+      class="flex w-full rounded-md"
       :class="{ 'dui-disabled': props.disabled, 'dui-active': props.active }"
       v-else
     >

src/components/ui/UIModal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
+import { Haptics, ImpactStyle } from '@capacitor/haptics'
 
 const props = withDefaults(
   defineProps<{
@@ -18,7 +19,12 @@ const props = withDefaults(
 const show = ref<boolean>(false)
 watch(
   () => props.open,
-  () => (show.value = props.open),
+  () => {
+    if (show.value) {
+      Haptics.impact({ style: ImpactStyle.Light })
+    }
+    show.value = props.open
+  },
   { immediate: true }
 )
 

src/components/ui/UITable.vue

@@ -8,10 +8,10 @@ const props = withDefaults(defineProps<Props>(), {
 
 const styleClass = computed(() => {
   const sizeVariants = {
-    'xs': 'dui-table-xs',
-    'sm': 'dui-table-sm',
-    'md': 'dui-table-md',
-    'lg': 'dui-table-lg',
+    xs: 'dui-table-xs',
+    sm: 'dui-table-sm',
+    md: 'dui-table-md',
+    lg: 'dui-table-lg'
   }
   const sizeClass = sizeVariants[props.size]
   return [sizeClass]

src/composables/useViewMode.ts

@@ -1,6 +1,6 @@
 export const viewModes: ViewMode[] = [
   { name: 'Note', icon: 'fas fa-sticky-note fa-fw' },
   { name: 'List', icon: 'fas fa-list fa-fw' },
-  { name: 'Mindmap', icon: 'fas fa-project-diagram fa-fw' },
+  { name: 'Mindmap', icon: 'fas fa-project-diagram fa-fw' }
 ]
 export const activeViewMode = ref<ViewMode>(viewModes[0])

src/utils/defaultNotes.ts

@@ -9,16 +9,16 @@ export const defaultNotes: BaseNote[] = [
 *   Create a new note by typing words between [[brackets]]
 *   Click on **Mindmap mode** in the menu left to visualize your notes
 \n
-Let's get started!`,
+Let's get started!`
   },
   {
     title: 'brackets',
     content: `If you type square brackets around text a link is created automatically. Like magic!`,
     isRoot: false
-  },
+  }
 ].map((note) => ({
   id: shortid.generate(),
   created: new Date().getTime(),
   modified: new Date().getTime(),
-  ...note,
+  ...note
 }))

src/utils/helpers.ts

@@ -1,11 +1,9 @@
 import { formatDistance, format, isToday } from 'date-fns'
 
 export const formatDate = (date: Date | number): string => {
-  const dateToFormat = ['number', 'string'].includes(typeof date)
-    ? new Date(date)
-    : date
+  const dateToFormat = ['number', 'string'].includes(typeof date) ? new Date(date) : date
   const dateDistanceInWords = formatDistance(dateToFormat, new Date()) + ' ago'
-  return isToday(date) ? dateDistanceInWords : format(date, 'd MMMM \'at\' HH:mm ')
+  return isToday(date) ? dateDistanceInWords : format(date, "d MMMM 'at' HH:mm ")
 }
 
 export const getAllMatches = (regex: RegExp, input: string): RegExpExecArray[] => {
@@ -19,4 +17,4 @@ export const getAllMatches = (regex: RegExp, input: string): RegExpExecArray[] =
   return matches
 }
 
-export const windowIsMobile = () =>  window.innerWidth < 640
+export const windowIsMobile = () => window.innerWidth < 640

src/utils/markdown.ts

@@ -31,7 +31,7 @@ export function htmlToMd(htmlText: string): string {
     // [/\]/g, '\\]'],
     [/^>/g, '\\>'],
     [/_/g, '\\_'],
-    [/^(\d+)\. /g, '$1\\. '],
+    [/^(\d+)\. /g, '$1\\. ']
   ]
   turndown.escape = (string) =>
     escapes.reduce((accumulator, escape) => {

tailwind.config.ts

@@ -8,6 +8,9 @@ const secondary = colors.gray[500]
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  future: {
+    hoverOnlyWhenSupported: true
+  },
   theme: {
     extend: {
       colors: {
@@ -35,10 +38,10 @@ export default {
     themes: [
       {
         contexted: {
-          ...require("daisyui/src/theming/themes")["[data-theme=light]"],
+          ...require('daisyui/src/theming/themes')['[data-theme=light]'],
           primary,
           secondary,
-          "--btn-text-case": "uppercase", // set default text transform for buttons
+          '--btn-text-case': 'uppercase' // set default text transform for buttons
           // accent: '#37CDBE',
           // neutral: '#F7F7F7',
           // 'base-100': '#FFFFFF',