feat: ditch triplit, move to postgresql + drizzle orm
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
<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';
|
||||
import type { DialogType } from '~/composables/useDialog';
|
||||
|
||||
const { openDialog } = useDialog();
|
||||
const { agents, createAgent } = useAgents();
|
||||
const { agents, createAgent, deleteAgent, updateAgent } = await useAgents();
|
||||
const agentsOpen = ref(true);
|
||||
const creatingAgent = ref(false);
|
||||
|
||||
@@ -12,21 +12,13 @@ const dropdownTrigger = ref<HTMLElement | null>(null);
|
||||
const dropdownContent = ref(null);
|
||||
const activeMenuAgentId = ref<string | null>(null);
|
||||
|
||||
const triplit = useTriplitClient();
|
||||
|
||||
const navRef = ref<HTMLElement | null>(null);
|
||||
const toggleAgentsList = () => {
|
||||
agentsOpen.value = !agentsOpen.value;
|
||||
};
|
||||
|
||||
const newAgent = async () => {
|
||||
creatingAgent.value = true;
|
||||
try {
|
||||
const agent = await createAgent();
|
||||
return navigateTo(`/agent/${agent.id}`);
|
||||
} finally {
|
||||
creatingAgent.value = false;
|
||||
}
|
||||
await createAgent();
|
||||
};
|
||||
|
||||
const renameAgentId = ref<string | null>(null);
|
||||
@@ -44,11 +36,7 @@ const startRename = (agentId: string, currentName: string) => {
|
||||
};
|
||||
|
||||
const saveRename = async () => {
|
||||
if (renameAgentId.value && newAgentName.value.trim()) {
|
||||
await triplit.update('agents', renameAgentId.value, {
|
||||
name: newAgentName.value.trim()
|
||||
});
|
||||
}
|
||||
updateAgent(renameAgentId.value!, { name: newAgentName.value.trim() });
|
||||
cancelRename();
|
||||
};
|
||||
|
||||
@@ -57,14 +45,10 @@ const cancelRename = () => {
|
||||
newAgentName.value = '';
|
||||
};
|
||||
|
||||
const deleteAgent = async (agentId: string) => {
|
||||
await triplit.delete('agents', agentId);
|
||||
}
|
||||
|
||||
const { floatingStyles, placement } = useFloating(dropdownTrigger, dropdownContent, {
|
||||
const { floatingStyles, placement, middlewareData } = useFloating(dropdownTrigger, dropdownContent, {
|
||||
placement: 'bottom-end',
|
||||
whileElementsMounted: autoUpdate,
|
||||
middleware: [offset(6), flip(), shift({ padding: 10 })],
|
||||
middleware: [offset(6), flip(), shift({ padding: 10 }), hide()],
|
||||
transform: false,
|
||||
});
|
||||
|
||||
@@ -81,7 +65,7 @@ const closeDropdown = () => {
|
||||
};
|
||||
|
||||
const menuAgent = computed(() =>
|
||||
agents.value.find(t => t.id === activeMenuAgentId.value)
|
||||
agents.value.find(a => a.id === activeMenuAgentId.value)
|
||||
);
|
||||
|
||||
const handleNavClick = (e: MouseEvent) => {
|
||||
@@ -121,12 +105,21 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<nav ref="navRef" class="flex flex-col gap-1 overflow-auto">
|
||||
<SidenavItem @click="openDialog(DialogType.QuickSwitcher)" name="Search" icon="i-mynaui-search" />
|
||||
<SidenavItem @click="openDialog(DialogType.QuickSwitcher)" name="Search" icon="i-mynaui-search">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="flex bg-[var(--bg-container)] px-1 rounded border border-[var(--color-border)]">
|
||||
<kbd class="font-mono text-[10px] case-capital">ctrl</kbd>
|
||||
</span>
|
||||
<span class="flex bg-[var(--bg-container)] px-1 rounded border border-[var(--color-border)]">
|
||||
<kbd class="font-mono text-[10px] case-capital">k</kbd>
|
||||
</span>
|
||||
</div>
|
||||
</SidenavItem>
|
||||
<SidenavItem to="/" name="Home" icon="i-mynaui-home" />
|
||||
|
||||
<!-- Header Toggle -->
|
||||
<button
|
||||
class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg hover:bg-[var(--color-hover)] transition-colors w-full"
|
||||
class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg @hover:bg-[var(--color-hover)] transition-colors w-full"
|
||||
@click="toggleAgentsList">
|
||||
<span class="text-sm">Agents</span>
|
||||
<span
|
||||
@@ -138,7 +131,7 @@ onMounted(() => {
|
||||
<Collapsible :is-open="agentsOpen">
|
||||
<div class="flex flex-col transform-origin-top pt-1 pb-1 px-1">
|
||||
<button @click="newAgent" :disabled="creatingAgent"
|
||||
class="flex items-center gap-2 px-1 h-9 shrink-0 rounded-lg text-sm text-[var(--text-secondary)] hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50 w-full">
|
||||
class="disabled:cursor-wait flex items-center gap-2 px-1 h-9 shrink-0 rounded-lg text-sm text-[var(--text-secondary)] @hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50 w-full">
|
||||
<div class="h-7 w-7 flex items-center justify-center">
|
||||
<span v-if="creatingAgent" class="i-svg-spinners-ring-resize text-4.5"></span>
|
||||
<span v-else class="i-mynaui-plus text-4.5"></span>
|
||||
@@ -152,9 +145,10 @@ onMounted(() => {
|
||||
<template v-slot="{ item: agent }">
|
||||
<a data-action="navigate" :data-agent-id="agent.id" :href="`/agent/${agent.id}`"
|
||||
:aria-label="agent.name"
|
||||
class="mt-1 group px-2 decoration-none flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9 text-[var(--text-secondary)] hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] focus:text-[var(--text-primary)]">
|
||||
class="mt-1 group px-2 decoration-none flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9 text-[var(--text-secondary)] @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] focus:text-[var(--text-primary)]">
|
||||
<input v-if="renameAgentId === agent.id" id="agent-rename-input" v-model="newAgentName"
|
||||
@keydown.stop.enter="saveRename" @keydown.escape="cancelRename" @blur="saveRename"
|
||||
@keydown.prevent.enter="saveRename" @keydown.escape="cancelRename"
|
||||
@blur="saveRename"
|
||||
class="flex-1 bg-transparent border-none outline-none text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
|
||||
<span v-else
|
||||
class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
@@ -162,7 +156,7 @@ onMounted(() => {
|
||||
</span>
|
||||
|
||||
<div data-action="toggle-dropdown"
|
||||
class="text-[var(--text-secondary)] shrink-0 opacity-0 group-hover:opacity-100 p-1 flex items-center justify-center rounded-md hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
class="text-[var(--text-secondary)] shrink-0 opacity-0 group-hover:opacity-100 p-1 flex items-center justify-center rounded-md @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="pointer-events-none h-4.5 w-4.5 i-tabler-dots"></span>
|
||||
</div>
|
||||
</a>
|
||||
@@ -179,21 +173,25 @@ onMounted(() => {
|
||||
leave-active-class="transition-[opacity,transform] duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
leave-from-class="opacity-100 scale-100 translate-y-0"
|
||||
leave-to-class="opacity-0 scale-95 translate-y-1">
|
||||
<div v-if="dropdownOpen" ref="dropdownContent" :style="floatingStyles" class="fixed z-15"
|
||||
:class="transformOrigin">
|
||||
<div v-if="dropdownOpen" ref="dropdownContent" :style="{
|
||||
...floatingStyles,
|
||||
visibility: middlewareData.hide?.referenceHidden
|
||||
? 'hidden'
|
||||
: 'visible',
|
||||
}" class="fixed z-15" :class="transformOrigin">
|
||||
<div v-click-outside="closeDropdown"
|
||||
class="bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 shadow-xl flex flex-col gap-1 min-w-40">
|
||||
|
||||
<template v-if="menuAgent">
|
||||
<button @click="startRename(menuAgent.id, menuAgent.name); closeDropdown()"
|
||||
class="text-left px-3 py-1.5 text-sm rounded-lg hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50">
|
||||
class="text-left px-3 py-1.5 text-sm rounded-lg @hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50">
|
||||
Rename
|
||||
</button>
|
||||
|
||||
<div class="h-px bg-[var(--color-border)] my-1" />
|
||||
|
||||
<button @click="deleteAgent(menuAgent.id); closeDropdown()"
|
||||
class="text-left px-3 py-1.5 text-sm rounded-lg hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50 text-red-500">
|
||||
class="text-left px-3 py-1.5 text-sm rounded-lg @hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50 text-red-500">
|
||||
Delete
|
||||
</button>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user