fix active color

package-lock.json

@@ -47,8 +47,7 @@
         "marked": "^4.3.0",
         "shortid": "^2.2.16",
         "turndown": "^7.1.2",
-        "vue": "^3.3.4",
+        "vue": "^3.3.4"
-        "vue-virtual-scroller": "^2.0.0-beta.8"
       },
       "devDependencies": {
         "@capacitor/cli": "^5.0.4",
@@ -9131,11 +9130,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/mitt": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
-      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
-    },
     "node_modules/mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -12845,22 +12839,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/vue-observe-visibility": {
-      "version": "2.0.0-alpha.1",
-      "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz",
-      "integrity": "sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==",
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
-    "node_modules/vue-resize": {
-      "version": "2.0.0-alpha.1",
-      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
-      "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
@@ -12888,19 +12866,6 @@
         "typescript": "*"
       }
     },
-    "node_modules/vue-virtual-scroller": {
-      "version": "2.0.0-beta.8",
-      "resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-beta.8.tgz",
-      "integrity": "sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==",
-      "dependencies": {
-        "mitt": "^2.1.0",
-        "vue-observe-visibility": "^2.0.0-alpha.1",
-        "vue-resize": "^2.0.0-alpha.1"
-      },
-      "peerDependencies": {
-        "vue": "^3.2.0"
-      }
-    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -20189,11 +20154,6 @@
         "yallist": "^4.0.0"
       }
     },
-    "mitt": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
-      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
-    },
     "mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -22916,18 +22876,6 @@
         }
       }
     },
-    "vue-observe-visibility": {
-      "version": "2.0.0-alpha.1",
-      "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz",
-      "integrity": "sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==",
-      "requires": {}
-    },
-    "vue-resize": {
-      "version": "2.0.0-alpha.1",
-      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
-      "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
-      "requires": {}
-    },
     "vue-template-compiler": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
@@ -22949,16 +22897,6 @@
         "semver": "^7.3.8"
       }
     },
-    "vue-virtual-scroller": {
-      "version": "2.0.0-beta.8",
-      "resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-beta.8.tgz",
-      "integrity": "sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==",
-      "requires": {
-        "mitt": "^2.1.0",
-        "vue-observe-visibility": "^2.0.0-alpha.1",
-        "vue-resize": "^2.0.0-alpha.1"
-      }
-    },
     "wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",

package.json

@@ -54,8 +54,7 @@
     "marked": "^4.3.0",
     "shortid": "^2.2.16",
     "turndown": "^7.1.2",
-    "vue": "^3.3.4",
+    "vue": "^3.3.4"
-    "vue-virtual-scroller": "^2.0.0-beta.8"
   },
   "devDependencies": {
     "@capacitor/cli": "^5.0.4",

src/components/Note/NoteToolbar.vue

@@ -58,7 +58,12 @@ const openModal = async (open: () => void, modal: ModalOptions) => {
     <UIButtonGroup class="flex items-center" v-if="!props.note.isRoot">
       <UIModal v-for="confirmModal in confirmModals" :key="confirmModal.key">
         <template #activator="{ open }">
-          <UIButton size="sm" @click="openModal(open, confirmModal)" :join="true" @mousedown="vibrate">
+          <UIButton
+            size="sm"
+            @click="openModal(open, confirmModal)"
+            :join="true"
+            @mousedown="vibrate"
+          >
             <i :class="confirmModal.icon" />
           </UIButton>
         </template>

src/components/TopBar.vue

@@ -60,7 +60,7 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
           >
             <i class="fa-fw fa-solid fa-plus-circle scale-[115%]" />
           </UIButton>
-          <UIModal v-if="(initialized && !user)">
+          <UIModal v-if="initialized && !user">
             <template #activator="{ open }">
               <UIButton
                 size="sm"
@@ -101,7 +101,7 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
 }
 .topbar-button {
   &:active {
-    @apply border-white bg-white text-primary
+    @apply border-white bg-white text-primary;
   }
   @apply hover:border-white hover:bg-white hover:text-primary focus-visible:outline-white;
 }

src/components/ui/UIMenuItem.vue

@@ -16,7 +16,9 @@ const styleClass = computed(() => {
 </script>
 <template>
   <li :class="styleClass">
-    <span class="flex items-center" v-if="props.title"><slot></slot></span>
+    <span class="flex items-center" v-if="props.title">
+      <slot></slot>
+    </span>
     <a
       class="flex w-full rounded-md"
       :class="{ 'dui-disabled': props.disabled, 'dui-active': props.active }"
@@ -26,3 +28,8 @@ const styleClass = computed(() => {
     </a>
   </li>
 </template>
+<style scoped>
+.dui-active {
+  @apply bg-primary;
+}
+</style>

src/composables/useHaptics.ts

@@ -1,3 +1,3 @@
 import { Haptics, ImpactStyle } from '@capacitor/haptics'
 
-export const vibrate = () => Haptics.impact({ style: ImpactStyle.Light })
+export const vibrate = () => Haptics.impact({ style: ImpactStyle.Light })