feat: ditch triplit, move to postgresql + drizzle orm

app/components/Dropdown.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useFloating, offset, flip, shift, autoUpdate, type Placement } from '@floating-ui/vue';
+import { useFloating, offset, flip, shift, autoUpdate, type Placement, hide } from '@floating-ui/vue';
 
 const props = defineProps<{
     placement?: Placement;
@@ -8,7 +8,7 @@ const props = defineProps<{
 }>();
 
 const isOpen = ref(false);
-const triggerRef = ref(null);
+const triggerRef = ref<HTMLElement | null>(null);
 const dropdownRef = ref(null);
 
 const setTriggerRef = (el: any) => {
@@ -18,10 +18,10 @@ const setTriggerRef = (el: any) => {
     }
 };
 
-const { floatingStyles, placement } = useFloating(triggerRef, dropdownRef, {
+const { floatingStyles, placement, middlewareData } = useFloating(triggerRef, dropdownRef, {
     placement: props.placement ?? 'bottom-start',
     whileElementsMounted: autoUpdate,
-    middleware: [offset(6), flip(), shift({ padding: 10 })],
+    middleware: [offset(6), flip(), shift({ padding: 10 }), hide()],
     transform: false,
 });
 
@@ -55,8 +55,12 @@ defineExpose({ close });
             enter-from-class="opacity-0 scale-95" enter-to-class="opacity-100 scale-100"
             leave-active-class="transition-[opacity,transform] duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
             leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
-            <div v-if="isOpen" ref="dropdownRef" :style="floatingStyles" class="fixed z-9999"
-                :class="[dropdownClass, transformOrigin]">
+            <div v-if="isOpen" ref="dropdownRef" :style="{
+                ...floatingStyles,
+                visibility: middlewareData.hide?.referenceHidden
+                    ? 'hidden'
+                    : 'visible',
+            }" class="fixed z-9999" :class="[dropdownClass, transformOrigin]">
                 <div v-click-outside="close"
                     class="bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 shadow-xl flex flex-col gap-1">
                     <slot name="dropdown" :close="close" />