feat: ditch triplit, move to postgresql + drizzle orm

app/components/Message/TokenDetailsDropdown.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { useFloating, offset, flip, shift, autoUpdate } from '@floating-ui/vue';
+import { useFloating, offset, flip, shift, autoUpdate, hide } from '@floating-ui/vue';
 
 const tokenDetailsDropdownRef = ref<HTMLElement | null>(null);
 const { triggerElement, activeGeneration: generation, close, isOpen } = useTokenDropdown();
 
-const { floatingStyles } = useFloating(triggerElement, tokenDetailsDropdownRef, {
+const { floatingStyles, middlewareData } = useFloating(triggerElement, tokenDetailsDropdownRef, {
     placement: 'bottom-end',
     whileElementsMounted: autoUpdate,
     middleware: [
         offset(4),
         flip(),
         shift({ padding: 10 }),
+        hide(),
     ],
     transform: false,
 });
@@ -57,7 +58,12 @@ const formatNumber = (num: number | null | undefined) => {
             leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
 
             <div v-if="isOpen && generation && generation.tokens" v-click-outside="close" ref="tokenDetailsDropdownRef"
-                :style="floatingStyles"
+                :style="{
+                    ...floatingStyles,
+                    visibility: middlewareData.hide?.referenceHidden
+                        ? 'hidden'
+                        : 'visible',
+                }"
                 class="absolute z-50 flex flex-col min-w-[280px] bg-[var(--bg-surface)] rounded-md border border-[var(--color-border)] shadow-2xl text-[var(--text-secondary)] font-sans">
 
                 <!-- Output Details Section -->