feat: ditch triplit, move to postgresql + drizzle orm
This commit is contained in:
@@ -1,14 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, nextTick } from 'vue';
|
||||
import { useFloating, offset, flip, shift, autoUpdate, size } from '@floating-ui/vue';
|
||||
import type { Entity } from '@triplit/client';
|
||||
import type schema from '#triplit/schema';
|
||||
import type { ModelWithProvider, ProviderWithModels } from '~/composables/useModels';
|
||||
import { useFloating, offset, flip, shift, autoUpdate, size, hide } from '@floating-ui/vue';
|
||||
import type { Model, ModelWithProvider, Provider, ProviderWithModels } from '~/composables/useModels';
|
||||
import { sortByReleaseDate } from '~/utils/sort';
|
||||
import RowVirtualizerFixed from './RowVirtualizerFixed.vue';
|
||||
|
||||
const { openDialog } = useDialog();
|
||||
const { allModels } = useModels();
|
||||
const { allModels } = await useModels();
|
||||
const { addShortcut } = useKeyboardShortcuts();
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -28,7 +26,7 @@ const virtualizerRef = ref<InstanceType<typeof RowVirtualizerFixed> | null>(null
|
||||
const navigatingWithKeyboard = ref(false);
|
||||
const focusedOptionId = ref<string | null>(null);
|
||||
|
||||
const { floatingStyles, placement } = useFloating(dropdownButton, dropdownContent, {
|
||||
const { floatingStyles, placement, middlewareData } = useFloating(dropdownButton, dropdownContent, {
|
||||
placement: 'bottom-start',
|
||||
whileElementsMounted: autoUpdate,
|
||||
middleware: [
|
||||
@@ -43,6 +41,7 @@ const { floatingStyles, placement } = useFloating(dropdownButton, dropdownConten
|
||||
},
|
||||
padding: 10,
|
||||
}),
|
||||
hide()
|
||||
],
|
||||
transform: false,
|
||||
});
|
||||
@@ -65,8 +64,8 @@ const filteredProviders = computed(() => {
|
||||
|
||||
const flatOptions = computed(() => {
|
||||
type FlatItem =
|
||||
| { type: 'header'; id: string; provider: Entity<typeof schema, 'providers'> }
|
||||
| { type: 'model'; id: string; model: Entity<typeof schema, 'models'>; provider: Entity<typeof schema, 'providers'> };
|
||||
| { type: 'header'; id: string; provider: Provider }
|
||||
| { type: 'model'; id: string; model: Model; provider: Provider };
|
||||
|
||||
const options: FlatItem[] = [];
|
||||
for (const provider of filteredProviders.value) {
|
||||
@@ -102,7 +101,7 @@ const scrollFocusedIntoView = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const selectModel = (model: Entity<typeof schema, 'models'>, provider: Entity<typeof schema, 'providers'>) => {
|
||||
const selectModel = (model: Model, provider: Provider) => {
|
||||
selectedModel.value = { ...model, provider };
|
||||
closeDropdown();
|
||||
};
|
||||
@@ -212,11 +211,11 @@ onUnmounted(() => {
|
||||
|
||||
<template>
|
||||
<div role="button" @click="toggleDropdown()" ref="dropdownButton"
|
||||
class="cursor-pointer flex items-center w-fit select-none gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors duration-200"
|
||||
class="cursor-pointer flex items-center min-w-0 select-none gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors duration-200"
|
||||
:class="[
|
||||
isOpen
|
||||
? 'bg-[var(--color-hover)] text-[var(--text-primary)]'
|
||||
: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--color-hover)]',
|
||||
: 'text-[var(--text-secondary)] @hover:text-[var(--text-primary)] @hover:bg-[var(--color-hover)]',
|
||||
]">
|
||||
<ModelIcon v-if="selectedModel" class="text-white" :avatar="true" variant="color"
|
||||
:model-id="selectedModel.externalId" size="22" />
|
||||
@@ -236,8 +235,12 @@ onUnmounted(() => {
|
||||
<KeepAlive>
|
||||
<div v-if="isOpen" v-click-outside="closeDropdown" ref="dropdownContent" role="listbox"
|
||||
aria-label="Select model"
|
||||
:aria-activedescendant="focusedOptionId ? `model-option-${focusedOptionId}` : undefined"
|
||||
:style="floatingStyles"
|
||||
:aria-activedescendant="focusedOptionId ? `model-option-${focusedOptionId}` : undefined" :style="{
|
||||
...floatingStyles,
|
||||
visibility: middlewareData.hide?.referenceHidden
|
||||
? 'hidden'
|
||||
: 'visible',
|
||||
}"
|
||||
class="fixed z-100 w-full max-w-[420px] min-w-[280px] flex flex-col rounded-xl border border-[var(--color-border)] bg-[var(--bg-surface)] shadow-lg overflow-hidden"
|
||||
:class="transformOrigin">
|
||||
|
||||
@@ -259,14 +262,14 @@ onUnmounted(() => {
|
||||
<template v-else>
|
||||
<RowVirtualizerFixed ref="virtualizerRef" :items="flatOptions" key-field="id"
|
||||
:scroll-element="scrollContainerRef" :item-size="42" :overscan="10">
|
||||
<template v-slot="{ item, index }">
|
||||
<template v-slot="{ item }">
|
||||
<template v-if="item.type === 'header'">
|
||||
<div
|
||||
class="px-4 py-1.5 text-[13px] h-10.5 items-end font-medium text-[var(--text-secondary)] case-capital tracking-wider flex justify-between">
|
||||
{{ item.provider.name }}
|
||||
<button
|
||||
@click="closeDropdown(); openDialog(DialogType.Settings, undefined, { page: 'providers', params: item.provider.id })"
|
||||
class="flex h-5 w-5 items-center justify-center hover:bg-[var(--color-hover)] rounded transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
class="flex h-5 w-5 items-center justify-center @hover:bg-[var(--color-hover)] rounded transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="i-mynaui-cog-four text-4"></span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -275,7 +278,7 @@ onUnmounted(() => {
|
||||
<button :id="`model-option-${item.model.id}`" role="option"
|
||||
:aria-selected="focusedOptionId === item.model.id"
|
||||
@click="selectModel(item.model, item.provider)"
|
||||
class="text-white w-full h-10.5 px-4 py-2 flex items-center justify-between hover:bg-[var(--color-hover)] transition-colors duration-150"
|
||||
class="text-white w-full h-10.5 px-4 py-2 flex items-center justify-between @hover:bg-[var(--color-hover)] transition-colors duration-150"
|
||||
:class="{
|
||||
'bg-[var(--color-hover)]': selectedModel?.id === item.model.id,
|
||||
'ring-2 ring-inset ring-[var(--color-accent)]': focusedOptionId === item.model.id && navigatingWithKeyboard
|
||||
@@ -290,7 +293,7 @@ onUnmounted(() => {
|
||||
|
||||
<div class="p-1 border-t border-[var(--color-border)]">
|
||||
<button
|
||||
class="flex w-full items-center gap-2 px-3 py-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150"
|
||||
class="flex w-full items-center gap-2 px-3 py-2 text-sm text-[var(--text-secondary)] @hover:text-[var(--text-primary)] @hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150"
|
||||
@click="closeDropdown(); openDialog(DialogType.Settings, undefined, { page: 'providers' });">
|
||||
<span class="i-mynaui-cog-four text-4.5"></span>
|
||||
<span>Manage Providers</span>
|
||||
|
||||
Reference in New Issue
Block a user