Performance enhancements galore! New themining system
This is once again a huge commit, but its mostly performance improvements along with some bug fixes and refactoring. It also includes changes to the theming systems. I'm still not 100% happy with the theming system, but its better than before. Model fetching has been dramatically improved! Nearly all the important computation and pre-processing has been moved to the server. This has also somehow fixed the way model details are loaded, which was causing many models to be missing their details despite models.dev having them. The markdown renderer has once again been changed, but I'm mostly certain that this is the last time major changes will be made to it. The renderer is not spamming components, bloating memory usage, and its not using a bug prone custom written chunking system. There's also a lot more that I haven't mentioned and honestly forgot. I need to get better commit hygiene tbh.
This commit is contained in:
@@ -10,6 +10,9 @@ const { user, signOut } = useAuth();
|
||||
// particular)
|
||||
const cachedUser = ref(user.value);
|
||||
|
||||
const dropdownRef = ref<HTMLDivElement | null>(null);
|
||||
const dropdownOpen = ref(false);
|
||||
|
||||
watch(user, () => {
|
||||
if (user.value === null) return;
|
||||
|
||||
@@ -20,8 +23,6 @@ const { toggle: toggleSettings } = useSettings();
|
||||
|
||||
const { isHovered } = useSidenavContext();
|
||||
|
||||
const profileOpen = ref(false);
|
||||
|
||||
const handleLogout = async () => {
|
||||
await signOut();
|
||||
assert('disconnect' in triplit);
|
||||
@@ -30,41 +31,62 @@ const handleLogout = async () => {
|
||||
await navigateTo('/auth/login');
|
||||
};
|
||||
|
||||
const profileItems: DropdownItem[] = [
|
||||
{ label: 'Settings', icon: 'mynaui:cog-four', onClick: toggleSettings },
|
||||
{
|
||||
label: 'Log out',
|
||||
icon: 'mynaui:logout',
|
||||
divider: true,
|
||||
onClick: handleLogout,
|
||||
},
|
||||
];
|
||||
useClickOutside(dropdownRef, () => {
|
||||
dropdownOpen.value = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="flex items-center justify-between overflow-hidden">
|
||||
<Dropdown class="overflow-hidden" v-model="profileOpen" :items="profileItems" placement="left"
|
||||
<header ref="dropdownRef" class="flex items-center justify-between overflow-hidden">
|
||||
<button @click="dropdownOpen = !dropdownOpen"
|
||||
class="flex gap-1 pr-1 items-center hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<div
|
||||
:class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', user?.image ? '' : 'border border-[var(--color-border)]']">
|
||||
<img v-if="cachedUser?.image" :src="cachedUser.image" class="w-full h-full object-cover" />
|
||||
<Icon v-else name="mynaui:user" class="w-4 h-4 text-[var(--text-secondary)]" />
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
|
||||
{{ cachedUser?.name }}
|
||||
</span>
|
||||
<div :class="['transform-origin-left-center flex-shrink-0 w-4 h-4 text-[var(--text-secondary)] transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] overflow-hidden transform-origin-center-left',
|
||||
isHovered ? 'opacity-100 scale-100' : 'opacity-0 scale-40'
|
||||
]">
|
||||
<Icon class="text-4 transition-transform duration-250 ease-in-out"
|
||||
:class="dropdownOpen ? 'rotate-180' : ''" name="mynaui:chevron-down" />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<Transition enter-active-class="transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
enter-from-class="opacity-0 scale-95" enter-to-class="opacity-100 scale-100"
|
||||
leave-active-class="transition-all 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="dropdownOpen"
|
||||
class="w-full top-full text-sm mt-1 absolute z-50 bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 flex flex-col gap-2">
|
||||
<button @click="dropdownOpen = false; toggleSettings()"
|
||||
class="text-left px-3 py-1.5 items-center gap-1 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<Icon name="mynaui:cog-four" class="text-4.5" />
|
||||
<span>Settings</span>
|
||||
</button>
|
||||
<hr class="border-t border-[var(--color-border)]" />
|
||||
<button @click="handleLogout"
|
||||
class="text-left px-3 py-1.5 items-center gap-1 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<Icon name="mynaui:logout" class="text-4.5" />
|
||||
<span>Log out</span>
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
|
||||
<!-- <Dropdown class="overflow-hidden" v-model="profileOpen" :items="profileItems" placement="left"
|
||||
verticality="descending" width="100%">
|
||||
<template #trigger="{ toggle }">
|
||||
<button aria-label="open user dropdown"
|
||||
class="flex items-center gap-1.5 pr-2 rounded-xl hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] cursor-pointer transition-colors max-w-full"
|
||||
class="flex items-center gap-1.5 pr-2 rounded-xl hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] cursor-pointer transition-colors max-w-full"
|
||||
@click="toggle">
|
||||
<div
|
||||
:class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--color-neutral)] flex items-center justify-center', user?.image ? '' : 'border border-[var(--color-highlight-high)]']">
|
||||
<img v-if="cachedUser?.image" :src="cachedUser.image" class="w-full h-full object-cover" />
|
||||
<Icon v-else name="mynaui:user" class="w-4 h-4 text-[var(--color-muted)]" />
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-medium text-ellipsis overflow-hidden text-[var(--color-text)] whitespace-nowrap">{{
|
||||
cachedUser?.name
|
||||
}}</span>
|
||||
<div :class="['transform-origin-left-center flex-shrink-0 w-4 h-4 text-[var(--color-muted)] transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] overflow-hidden transform-origin-center-left',
|
||||
isHovered ? 'opacity-100 scale-100' : 'opacity-0 scale-40'
|
||||
]">
|
||||
<Icon class="text-4" name="mynaui:chevron-down" />
|
||||
</div>
|
||||
|
||||
</button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</Dropdown> -->
|
||||
</header>
|
||||
</template>
|
||||
@@ -1,20 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
import type { DropdownItem } from '~/types/dropdown';
|
||||
|
||||
const route = useRoute();
|
||||
const { agents, getAgent, unsubscribe: unsubscribeAgents } = await useAgents();
|
||||
const { openDropdown, dropdownState, closeDropdown } = useDropdown();
|
||||
|
||||
const activeAgent = computed(() => getAgent(route.params.id as string));
|
||||
|
||||
const { isHovered } = useSidenavContext();
|
||||
const { isHovered, sidebarWidth } = useSidenavContext();
|
||||
|
||||
onUnmounted(() => {
|
||||
unsubscribeAgents?.();
|
||||
});
|
||||
|
||||
const agentDropdownOpen = ref(false);
|
||||
const toggleDropdown = (e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
|
||||
const agentItems: DropdownItem[] = [];
|
||||
if (dropdownState.open) {
|
||||
closeDropdown();
|
||||
return;
|
||||
}
|
||||
|
||||
const itemsFactory = () => {
|
||||
const items = [];
|
||||
for (const agent of agents.value || []) {
|
||||
items.push({
|
||||
label: agent.name,
|
||||
icon: 'mynaui:check-hexagon',
|
||||
active: activeAgent.value?.id === agent.id,
|
||||
onClick: () => navigateTo(`/agent/${agent.id}`)
|
||||
});
|
||||
}
|
||||
return items;
|
||||
};
|
||||
|
||||
openDropdown(e, itemsFactory, { verticality: 'descending', placement: 'center', maxWidth: '200px' });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -22,41 +41,61 @@ const agentItems: DropdownItem[] = [];
|
||||
<div :style="isHovered ? 'width: 32px;' : 'width: 0px;'"
|
||||
:class="['flex flex-shrink-0 transform-origin-left-center items-center overflow-hidden transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]', isHovered ? 'opacity-100 scale-100' : 'opacity-0 scale-95']">
|
||||
<NuxtLink to="/"
|
||||
class="flex hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] rounded-lg decoration-none transition-inherit text-[var(--color-muted)] p-1.5">
|
||||
class="flex hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg decoration-none transition-inherit text-[var(--text-secondary)] p-1.5">
|
||||
<Icon name="mynaui:chevron-left" class="w-4.5 h-4.5" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<Dropdown class="overflow-hidden" v-model="agentDropdownOpen" :items="agentItems" placement="center"
|
||||
width="calc(80% - 1rem)">
|
||||
<button
|
||||
class="max-w-full transition duration-200 pr-2 cursor-pointer hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg"
|
||||
@click="toggleDropdown">
|
||||
<div class="pointer-events-none flex items-center gap-1.5 max-w-full">
|
||||
<div
|
||||
:class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', activeAgent?.imageUrl ? '' : 'border border-[var(--color-border)]']">
|
||||
<img v-if="activeAgent?.imageUrl" :src="activeAgent.imageUrl" class="w-full h-full object-cover" />
|
||||
<Icon v-else name="mynaui:check-hexagon" class="w-4 h-4 text-[var(--color-accent)]" />
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
|
||||
{{ activeAgent?.name }}
|
||||
</span>
|
||||
<div class="w-4 h-4 text-[var(--text-secondary)]">
|
||||
<Icon
|
||||
class="text-4 transform-origin-center-left duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transition-all"
|
||||
name="mynaui:chevron-up-down" />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<!-- <Dropdown class="overflow-hidden" v-model="agentDropdownOpen" placement="center" width="calc(80% - 1rem)">
|
||||
<template #trigger="{ toggle }">
|
||||
<button
|
||||
class="flex max-w-full gap-1.5 pr-2 items-center cursor-pointer hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] rounded-lg"
|
||||
class="flex max-w-full transition duration-200 gap-1.5 pr-2 items-center cursor-pointer hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg"
|
||||
@click="toggle">
|
||||
<div
|
||||
:class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--color-neutral)] flex items-center justify-center', activeAgent?.imageUrl ? '' : 'border border-[var(--color-highlight-high)]']">
|
||||
:class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', activeAgent?.imageUrl ? '' : 'border border-[var(--color-border)]']">
|
||||
<img v-if="activeAgent?.imageUrl" :src="activeAgent.imageUrl"
|
||||
class="w-full h-full object-cover" />
|
||||
<Icon v-else name="mynaui:check-hexagon" class="w-4 h-4 text-[var(--color-accent)]" />
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-medium text-ellipsis overflow-hidden text-[var(--color-text)] whitespace-nowrap">
|
||||
class="text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
|
||||
{{ activeAgent?.name }}
|
||||
</span>
|
||||
<div class="w-4 h-4 text-[var(--color-muted)]">
|
||||
<div class="w-4 h-4 text-[var(--text-secondary)]">
|
||||
<Icon
|
||||
class="text-4 transform-origin-center-left duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transition-all"
|
||||
name="mynaui:chevron-up-down" />
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
<template #content>
|
||||
<template #content>
|
||||
<div class="flex flex-col gap-1.5 max-h-[calc(2.25rem*4+0.375rem*3)] overflow-y-auto">
|
||||
<SidenavItem draggable="false" v-for="agent in agents" :to="`/agent/${agent.id}`" :name="agent.name"
|
||||
class="whitespace-nowrap" icon="mynaui:check-hexagon" :key="agent.id"
|
||||
:active="activeAgent?.id === agent.id" />
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</Dropdown> -->
|
||||
</header>
|
||||
</template>
|
||||
@@ -9,11 +9,11 @@ const props = defineProps<{
|
||||
|
||||
<template>
|
||||
<NuxtLink v-if="props.to" v-bind="$attrs" :to="props.to" :aria-label="props.name" :class="[
|
||||
'decoration-none text-[var(--color-muted)] flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9',
|
||||
'decoration-none text-[var(--text-secondary)] flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9',
|
||||
props.icon ? 'px-1' : 'px-2',
|
||||
props.active
|
||||
? 'text-[var(--color-text)] bg-[var(--color-highlight)] hover:bg-[var(--color-highlight-high)] focus-visible:bg-[var(--color-highlight-high)]'
|
||||
: 'hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)]'
|
||||
? 'text-[var(--text-primary)] bg-[var(--color-hover)]'
|
||||
: 'hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)]'
|
||||
]">
|
||||
<div class="flex items-center gap-2 max-w-full flex-1">
|
||||
<div v-if="props.icon" class="h-7 w-7 flex items-center justify-center">
|
||||
@@ -30,8 +30,8 @@ const props = defineProps<{
|
||||
'flex justify-between items-center shrink-0 px-1 rounded-lg transition-colors cursor-pointer h-9',
|
||||
props.icon ? 'px-1' : 'px-2',
|
||||
props.active
|
||||
? 'text-[var(--color-text)] bg-[var(--color-highlight)] hover:bg-[var(--color-highlight-high)] focus-visible:bg-[var(--color-highlight-high)]'
|
||||
: 'hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)]'
|
||||
? 'text-[var(--text-primary)] bg-[var(--color-hover)]'
|
||||
: 'hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)]'
|
||||
]">
|
||||
<div class="flex items-center gap-2 max-w-full flex-1">
|
||||
<div v-if="props.icon" class="h-7 w-7 flex items-center justify-center">
|
||||
|
||||
+176
-137
@@ -1,9 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { assert } from '~~/utils/assert';
|
||||
|
||||
const route = useRoute();
|
||||
const topicsListRef = ref<HTMLElement | null>(null);
|
||||
const topicsListHeight = ref('auto');
|
||||
const topicsListOpacity = ref(1);
|
||||
const topicsListScale = ref(1);
|
||||
const { openDropdown, dropdownState, closeDropdown } = useDropdown();
|
||||
const { getAgent, unsubscribe: unsubscribeAgents } = await useAgents();
|
||||
|
||||
const triplit = useTriplitClient();
|
||||
@@ -12,97 +11,88 @@ const activeAgent = computed(() => getAgent(route.params.id as string));
|
||||
|
||||
const topics = computed(() => {
|
||||
if (activeAgent.value === undefined) return [];
|
||||
// return the todos but sorted and in a new array do not add messages or anything to the object, JUST SORT IT
|
||||
return activeAgent.value.topics
|
||||
.map((topic) => topic)
|
||||
.sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime())
|
||||
.reverse();
|
||||
});
|
||||
|
||||
const routeParts = computed(() => {
|
||||
return route.path.replace('/agent/', '').split('/');
|
||||
});
|
||||
|
||||
if (routeParts.value.length < 1) navigateTo('/');
|
||||
|
||||
const pageInfo = computed(() => {
|
||||
// `/agent/agent_[uuid]` or `/agent/agent_[uuid]/topic/...`
|
||||
if (route.path.startsWith('/agent/') && !route.path.includes('/profile')) {
|
||||
return 'conversation';
|
||||
}
|
||||
|
||||
// `/agent/agent_[uuid]/profile`
|
||||
if (route.path.endsWith('/profile')) {
|
||||
return 'agent-profile';
|
||||
}
|
||||
return activeAgent.value.topics;
|
||||
});
|
||||
|
||||
const topicsOpen = ref(true);
|
||||
|
||||
function easeInOutQuad(x: number): number {
|
||||
return x < 0.5 ? 2 * x * x : 1 - (-2 * x + 2) ** 2 / 2;
|
||||
}
|
||||
|
||||
const toggleAgentsList = () => {
|
||||
if (!topicsListRef.value) return;
|
||||
const animationLength = 200;
|
||||
let animationStart: number | null = null;
|
||||
|
||||
let startHeight: number;
|
||||
const startOpacity = topicsListOpacity.value;
|
||||
const startScale = topicsListScale.value;
|
||||
if (topicsListHeight.value === 'auto') {
|
||||
startHeight = topicsListRef.value.clientHeight;
|
||||
} else {
|
||||
startHeight = Number(topicsListHeight.value.replace('px', ''));
|
||||
}
|
||||
|
||||
const targetHeight = topicsOpen.value ? 0 : topicsListRef.value.scrollHeight;
|
||||
const targetOpacity = topicsOpen.value ? 0 : 1;
|
||||
const targetScale = topicsOpen.value ? 0.95 : 1;
|
||||
topicsOpen.value = !topicsOpen.value;
|
||||
|
||||
const animate = (timestamp: number) => {
|
||||
if (!animationStart) animationStart = timestamp;
|
||||
|
||||
const elapsed = timestamp - animationStart;
|
||||
const progress = Math.min(elapsed / animationLength, 1);
|
||||
|
||||
const currentHeight = startHeight + (targetHeight - startHeight) * easeInOutQuad(progress);
|
||||
const currentOpacity = startOpacity + (targetOpacity - startOpacity) * easeInOutQuad(progress);
|
||||
const currentScale = startScale + (targetScale - startScale) * easeInOutQuad(progress);
|
||||
|
||||
topicsListOpacity.value = currentOpacity;
|
||||
topicsListScale.value = currentScale;
|
||||
topicsListHeight.value = `${currentHeight}px`;
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(animate);
|
||||
} else {
|
||||
if (topicsOpen.value) {
|
||||
topicsListHeight.value = 'auto';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
let activeAutoRenames = reactive(new Map<string, string>());
|
||||
|
||||
const autoRenameTopic = async (topicId: string) => {
|
||||
const { setPage } = useSettings();
|
||||
const { autoRename } = useChat(route.params.id as string);
|
||||
const { autoRename, AutoRenameError } = useChat(route.params.id as string);
|
||||
|
||||
const firstMessage = await triplit.fetchOne(triplit.query('messages').Where('topicId', '=', topicId).Order('createdAt', 'ASC').Limit(1));
|
||||
if (!firstMessage) return;
|
||||
|
||||
const success = await autoRename(topicId, firstMessage.content);
|
||||
if (!success) {
|
||||
setPage('systemAssistants');
|
||||
const res = await autoRename(topicId, firstMessage.content);
|
||||
if (res.ok) {
|
||||
activeAutoRenames.set(topicId, res.data);
|
||||
return;
|
||||
}
|
||||
|
||||
switch (res.error) {
|
||||
case AutoRenameError.NoModelSelected:
|
||||
case AutoRenameError.ModelDisabled:
|
||||
case AutoRenameError.AutoRenameDisabled: {
|
||||
setPage('systemAssistants');
|
||||
} break;
|
||||
case AutoRenameError.NoModelFound:
|
||||
case AutoRenameError.DatabaseOperationFailed:
|
||||
case AutoRenameError.FailedToGenerate:
|
||||
case AutoRenameError.FailedToDecryptProviderApiKey: {
|
||||
console.error('Failed to auto-rename:', res.error);
|
||||
|
||||
await triplit.update('topics', topicId, {
|
||||
renaming: false,
|
||||
});
|
||||
|
||||
assert('flush' in triplit);
|
||||
await triplit.flush();
|
||||
} break;
|
||||
}
|
||||
}
|
||||
|
||||
const renameTopic = (topicId: string) => {
|
||||
console.log('renameTopic', topicId);
|
||||
const cancelAutoRename = async (topicId: string) => {
|
||||
await triplit.update('topics', topicId, {
|
||||
renaming: false,
|
||||
});
|
||||
|
||||
const renameId = activeAutoRenames.get(topicId);
|
||||
if (!renameId) return;
|
||||
|
||||
await $fetch(`/api/topic/auto-rename/cancel/${renameId}`, {
|
||||
method: 'POST',
|
||||
});
|
||||
|
||||
activeAutoRenames.delete(topicId);
|
||||
}
|
||||
|
||||
const renameTopicId = ref<string | null>(null);
|
||||
const newTopicName = ref('');
|
||||
|
||||
const startRename = (topicId: string, currentName: string) => {
|
||||
renameTopicId.value = topicId;
|
||||
newTopicName.value = currentName;
|
||||
nextTick(() => {
|
||||
const input = document.getElementById('topic-rename-input') as HTMLInputElement | null;
|
||||
if (input) {
|
||||
input.focus();
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
const saveRename = async () => {
|
||||
if (renameTopicId.value && newTopicName.value.trim()) {
|
||||
await triplit.update('topics', renameTopicId.value, {
|
||||
name: newTopicName.value.trim()
|
||||
});
|
||||
}
|
||||
cancelRename();
|
||||
};
|
||||
|
||||
const cancelRename = () => {
|
||||
renameTopicId.value = null;
|
||||
newTopicName.value = '';
|
||||
};
|
||||
|
||||
const deleteTopic = async (topicId: string) => {
|
||||
@@ -118,6 +108,70 @@ const deleteTopic = async (topicId: string) => {
|
||||
// TODO: deeply delete all messages, generations, and message_parts in the topic
|
||||
};
|
||||
|
||||
const handleNavClick = (e: MouseEvent) => {
|
||||
const trigger = (e.target as HTMLElement).closest('[data-action]') as HTMLElement | null;
|
||||
if (!trigger) return;
|
||||
|
||||
const topicId = trigger.dataset.topicId || (trigger.closest('[data-topic-id]') as HTMLElement | null)?.dataset.topicId;
|
||||
if (!topicId) return;
|
||||
|
||||
const action = trigger.dataset.action;
|
||||
if (action === 'navigate') {
|
||||
if (e.metaKey || e.ctrlKey || e.shiftKey) return;
|
||||
|
||||
e.preventDefault();
|
||||
return navigateTo(`/agent/${route.params.id}/topic/${topicId}`);
|
||||
}
|
||||
|
||||
if (action === 'toggle-dropdown') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (dropdownState.open) {
|
||||
closeDropdown();
|
||||
return;
|
||||
}
|
||||
|
||||
const itemsFactory = () => {
|
||||
const items = [];
|
||||
const isRenaming = activeAutoRenames.has(topicId) && topics.value?.find(t => t.id === topicId)?.renaming;
|
||||
|
||||
if (isRenaming) {
|
||||
items.push({
|
||||
label: 'Cancel Auto Rename',
|
||||
onClick: () => cancelAutoRename(topicId)
|
||||
});
|
||||
} else {
|
||||
items.push({
|
||||
label: 'Auto Rename',
|
||||
onClick: () => autoRenameTopic(topicId)
|
||||
});
|
||||
}
|
||||
|
||||
items.push({
|
||||
label: 'Rename',
|
||||
disabled: isRenaming ?? false,
|
||||
onClick: () => startRename(topicId, topics.value?.find(t => t.id === topicId)?.name || '')
|
||||
});
|
||||
|
||||
items.push({
|
||||
label: 'Delete',
|
||||
danger: true,
|
||||
onClick: () => deleteTopic(topicId)
|
||||
});
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
openDropdown(e, itemsFactory, { minWidth: '120px', placement: 'right' });
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// simply preload the topic page
|
||||
preloadRouteComponents(`/agent/${route.params.id}/topic/42`);
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
unsubscribeAgents?.();
|
||||
});
|
||||
@@ -128,69 +182,54 @@ onUnmounted(() => {
|
||||
|
||||
<!-- Agent Info Link -->
|
||||
<div class="mt-2 flex flex-col">
|
||||
<SidenavItem :to="`/agent/${routeParts[0]}/profile`" name="Agent Info" icon="mynaui:info-square"
|
||||
:active="pageInfo === 'agent-profile'" />
|
||||
<SidenavItem :to="`/agent/${route.params.id}/profile`" name="Agent Info" icon="mynaui:info-square"
|
||||
:active="route.path.endsWith('/profile')" />
|
||||
|
||||
<!-- Topics Section -->
|
||||
<button @click="toggleAgentsList"
|
||||
class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg bg-transparent hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] transition-colors w-full text-left">
|
||||
<button @click="topicsOpen = !topicsOpen"
|
||||
class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg bg-transparent hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors w-full text-left">
|
||||
<span class="text-sm font-medium">Topics</span>
|
||||
<Icon name="mynaui:chevron-down" :class="['w-4 h-4', topicsOpen ? '' : '-rotate-90']" />
|
||||
</button>
|
||||
|
||||
<div ref="topicsListRef" :inert="!topicsOpen" :class="{ 'overflow-y-hidden': !topicsOpen }"
|
||||
:style="{ height: topicsListHeight, opacity: topicsListOpacity, transform: `scale(${topicsListScale})` }"
|
||||
class="mt-1 gap-1 flex flex-col transform-origin-center-top">
|
||||
<NuxtLink v-if="activeAgent?.topics !== undefined" v-for="topic in topics"
|
||||
:to="`/agent/${activeAgent.id}/topic/${topic.id}`" :aria-label="topic.name" :class="[
|
||||
'group relative decoration-none text-[var(--color-muted)] flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9',
|
||||
'px-2',
|
||||
topic.id === route.params.topicId
|
||||
? 'text-[var(--color-text)] bg-[var(--color-highlight)] hover:bg-[var(--color-highlight-high)] focus-visible:bg-[var(--color-highlight-high)]'
|
||||
: 'hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)]'
|
||||
]">
|
||||
<div class="flex items-center gap-2 max-w-full flex-1">
|
||||
<div v-if="!topic.renaming" class="flex justify-between items-center w-full">
|
||||
<span class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{{ topic.name }}
|
||||
</span>
|
||||
<Collapsible :is-open="topicsOpen">
|
||||
<div @click="handleNavClick"
|
||||
class="mt-1 gap-1 flex flex-col transform-origin-center-top [content-visibility:auto] [contain-intrinsic-size:0_36px]">
|
||||
<a v-for="topic in topics" :key="topic.id" data-action="navigate" :data-topic-id="topic.id"
|
||||
:href="`/agent/${route.params.id}/topic/${topic.id}`" :aria-label="topic.name" :class="[
|
||||
'group relative decoration-none flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9',
|
||||
'px-2',
|
||||
topic.id === route.params.topicId
|
||||
? 'text-[var(--text-primary)] bg-[var(--color-hover)]'
|
||||
: 'text-[var(--text-secondary)] hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)]'
|
||||
]">
|
||||
<div class="flex items-center gap-2 max-w-full flex-1">
|
||||
<div class="flex justify-between items-center w-full">
|
||||
<input v-if="renameTopicId === topic.id && !topic.renaming" id="topic-rename-input"
|
||||
v-model="newTopicName" @keydown.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" />
|
||||
<div v-else-if="topic.renaming" class="flex w-full">
|
||||
<Icon name="svg-spinners:3-dots-fade" class="text-6" />
|
||||
</div>
|
||||
<span v-else
|
||||
class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{{ topic.name }}
|
||||
</span>
|
||||
|
||||
<Dropdown class="shrink-0 text-[var(--color-text)]" verticality="descending"
|
||||
placement="right">
|
||||
<template #trigger="{ toggle }">
|
||||
<div dots @click.prevent="toggle"
|
||||
class="opacity-0 group-hover:opacity-100 p-1 flex items-center justify-center rounded-md hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
|
||||
viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ -->
|
||||
<path fill="currentColor"
|
||||
d="M7 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0" />
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
<template #content="{ toggle }">
|
||||
<div class="shadow-lg rounded p-1 flex flex-col min-w-[120px] gap-1">
|
||||
<button @click.prevent="autoRenameTopic(topic.id); toggle()"
|
||||
class="text-left px-3 py-1.5 text-sm hover:bg-[var(--color-highlight)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
Auto Rename
|
||||
</button>
|
||||
<button @click.prevent="renameTopic(topic.id); toggle()"
|
||||
class="text-left px-3 py-1.5 text-sm hover:bg-[var(--color-highlight)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
Rename
|
||||
</button>
|
||||
<button @click.prevent="deleteTopic(topic.id); toggle()"
|
||||
class="text-left px-3 py-1.5 text-sm text-red-600 hover:bg-red-600/20 rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
<div data-action="toggle-dropdown"
|
||||
class="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-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<svg class="pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="18"
|
||||
height="18" viewBox="0 0 24 24">
|
||||
<path fill="currentColor"
|
||||
d="M7 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0m7 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex w-full">
|
||||
<Icon name="svg-spinners:3-dots-fade" class="text-6" />
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
@@ -1,107 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
const { agents, unsubscribe: unsubscribeAgents, createAgent } = await useAgents();
|
||||
const agentsListRef = ref<HTMLElement | null>(null);
|
||||
const { agents, unsubscribe, createAgent } = await useAgents();
|
||||
const agentsOpen = ref(true);
|
||||
const agentsListHeight = ref('auto');
|
||||
const agentsListOpacity = ref(1);
|
||||
const agentsListScale = ref(1);
|
||||
const creatingAgent = ref(false);
|
||||
|
||||
function easeInOutQuad(x: number): number {
|
||||
return x < 0.5 ? 2 * x * x : 1 - (-2 * x + 2) ** 2 / 2;
|
||||
}
|
||||
|
||||
const toggleAgentsList = () => {
|
||||
if (!agentsListRef.value) return;
|
||||
const animationLength = 200;
|
||||
let animationStart: number | null = null;
|
||||
|
||||
let startHeight: number;
|
||||
const startOpacity = agentsListOpacity.value;
|
||||
const startScale = agentsListScale.value;
|
||||
if (agentsListHeight.value === 'auto') {
|
||||
startHeight = agentsListRef.value.clientHeight;
|
||||
} else {
|
||||
startHeight = Number(agentsListHeight.value.replace('px', ''));
|
||||
}
|
||||
|
||||
const targetHeight = agentsOpen.value ? 0 : agentsListRef.value.scrollHeight;
|
||||
const targetOpacity = agentsOpen.value ? 0 : 1;
|
||||
const targetScale = agentsOpen.value ? 0.95 : 1;
|
||||
agentsOpen.value = !agentsOpen.value;
|
||||
|
||||
const animate = (timestamp: number) => {
|
||||
if (!animationStart) animationStart = timestamp;
|
||||
|
||||
const elapsed = timestamp - animationStart;
|
||||
const progress = Math.min(elapsed / animationLength, 1);
|
||||
|
||||
const currentHeight = startHeight + (targetHeight - startHeight) * easeInOutQuad(progress);
|
||||
const currentOpacity = startOpacity + (targetOpacity - startOpacity) * easeInOutQuad(progress);
|
||||
const currentScale = startScale + (targetScale - startScale) * easeInOutQuad(progress);
|
||||
|
||||
agentsListOpacity.value = currentOpacity;
|
||||
agentsListScale.value = currentScale;
|
||||
agentsListHeight.value = `${currentHeight}px`;
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(animate);
|
||||
} else {
|
||||
if (agentsOpen.value) {
|
||||
agentsListHeight.value = 'auto';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
const newAgent = async () => {
|
||||
const triplit = useTriplitClient();
|
||||
const { user } = useAuth();
|
||||
|
||||
if (!user.value) throw new Error('User not logged in');
|
||||
|
||||
const agent = await createAgent();
|
||||
if (!agent) throw new Error('Failed to create agent');
|
||||
|
||||
return navigateTo(`/agent/${agent.id}`);
|
||||
creatingAgent.value = true;
|
||||
try {
|
||||
const agent = await createAgent();
|
||||
if (agent) return navigateTo(`/agent/${agent.id}`);
|
||||
} finally {
|
||||
creatingAgent.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
unsubscribeAgents?.();
|
||||
});
|
||||
onUnmounted(() => unsubscribe?.());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="flex flex-col gap-1">
|
||||
<SidenavItem name="Search" icon="mynaui:search" />
|
||||
<SidenavItem to="/" :active="true" name="Home" icon="mynaui:home" />
|
||||
<SidenavItem to="/" name="Home" icon="mynaui:home" />
|
||||
|
||||
<!-- Agents Section -->
|
||||
<!-- Header Toggle -->
|
||||
<button
|
||||
class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg bg-transparent hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] transition-colors w-full text-left"
|
||||
@click="toggleAgentsList()">
|
||||
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>
|
||||
<Icon name="mynaui:chevron-down"
|
||||
:class="['w-4 h-4 transition-transform duration-250 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transform-origin-center', agentsOpen ? '' : '-rotate-90']" />
|
||||
<Icon name="mynaui:chevron-down" class="w-4 h-4 transition-transform duration-200"
|
||||
:class="{ '-rotate-90': !agentsOpen }" />
|
||||
</button>
|
||||
|
||||
<div ref="agentsListRef" :inert="!agentsOpen"
|
||||
:style="{ height: agentsListHeight, opacity: agentsListOpacity, transform: `scale(${agentsListScale})` }"
|
||||
class="mt-1 gap-1 flex flex-col transform-origin-center-top overflow-y-hidden">
|
||||
<button @click="newAgent" :disabled="creatingAgent"
|
||||
class="flex items-center gap-2 px-1 h-9 shrink-0 rounded-lg text-sm text-[var(--color-muted)] bg-transparent hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] transition-colors disabled:opacity-50 w-full">
|
||||
<div class="h-7 w-7 flex items-center justify-center">
|
||||
<Icon v-if="creatingAgent" class="text-4.5" name="svg-spinners:ring-resize" />
|
||||
<Icon v-else class="text-4.5" name="mynaui:plus" />
|
||||
</div>
|
||||
<span>New Agent</span>
|
||||
</button>
|
||||
<!-- Animated Section -->
|
||||
<Collapsible :is-open="agentsOpen">
|
||||
<div class="mt-1 gap-1 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">
|
||||
<div class="h-7 w-7 flex items-center justify-center">
|
||||
<Icon v-if="creatingAgent" class="text-4.5" name="svg-spinners:ring-resize" />
|
||||
<Icon v-else class="text-4.5" name="mynaui:plus" />
|
||||
</div>
|
||||
<span>New Agent</span>
|
||||
</button>
|
||||
|
||||
<SidenavItem
|
||||
v-for="agent in agents?.map((agent) => agent)?.sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime())"
|
||||
:to="`/agent/${agent.id}`" :key="agent.id" :name="agent.name" icon="mynaui:check-hexagon" />
|
||||
</div>
|
||||
<SidenavItem v-for="agent in agents" :key="agent.id" :to="`/agent/${agent.id}`" :name="agent.name"
|
||||
icon="mynaui:check-hexagon" />
|
||||
</div>
|
||||
</Collapsible>
|
||||
</nav>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -68,15 +68,18 @@ const onResizeEnd = () => {
|
||||
|
||||
let resizeAnimationFrame: number | null = null;
|
||||
|
||||
const trackInteractionMouse = () => trackInteraction('mouse');
|
||||
const trackInteractionKeyboard = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Tab') trackInteraction('keyboard');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('mousemove', onResizeMove);
|
||||
document.addEventListener('mouseup', onResizeEnd);
|
||||
|
||||
// NEW: Track global interactions
|
||||
document.addEventListener('mousedown', () => trackInteraction('mouse'));
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Tab') trackInteraction('keyboard');
|
||||
});
|
||||
document.addEventListener('mousedown', trackInteractionMouse);
|
||||
document.addEventListener('keydown', trackInteractionKeyboard);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
@@ -84,10 +87,8 @@ onUnmounted(() => {
|
||||
document.removeEventListener('mouseup', onResizeEnd);
|
||||
|
||||
// NEW: Cleanup listeners
|
||||
document.removeEventListener('mousedown', () => trackInteraction('mouse'));
|
||||
document.removeEventListener('keydown', (e) => {
|
||||
if (e.key === 'Tab') trackInteraction('keyboard');
|
||||
});
|
||||
document.removeEventListener('mousedown', trackInteractionMouse);
|
||||
document.removeEventListener('keydown', trackInteractionKeyboard);
|
||||
});
|
||||
|
||||
const navKind = computed(() => {
|
||||
@@ -100,9 +101,9 @@ const navKind = computed(() => {
|
||||
<template>
|
||||
<div class="relative">
|
||||
<aside ref="sidenavRef" :class="[
|
||||
'sidenav',
|
||||
open ? 'sidenav--open' : 'sidenav--closed',
|
||||
isResizing ? 'sidenav--resizing' : ''
|
||||
'h-full max-w-fit background-[var(--bg-base)] overflow-hidden will-change-width text-[var(--text-secondary)] select-none transition-[width,margin] duration-250 ease-[cubic-bezier(0.5,_1,_0.89,_1)]',
|
||||
open ? 'w-full mr-2' : 'w-0 mr-0',
|
||||
isResizing ? 'transition-none' : ''
|
||||
]" :style="open ? { width: `${sidebarWidth}px` } : {}" @mouseenter="isMouseOver = true"
|
||||
@mouseleave="isMouseOver = false" @focusin="isFocused = true" @focusout="onFocusOut">
|
||||
<div :style="{ minWidth: `${sidebarWidth}px` }" class="flex flex-col h-full justify-between">
|
||||
@@ -113,11 +114,11 @@ const navKind = computed(() => {
|
||||
<SidenavHeader v-if="navKind === 'home'" />
|
||||
<SidenavHeaderAgent v-else-if="navKind === 'agent'" />
|
||||
|
||||
<div class="flex items-center justify-end text-[var(--color-muted)] gap-0.5">
|
||||
<div class="flex items-center justify-end text-[var(--text-secondary)] gap-0.5">
|
||||
<div :style="isHovering ? 'width: 32px;' : 'width: 0px;'"
|
||||
:class="['flex-shrink-0 overflow-hidden rounded-lg transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transform-origin-center-right']">
|
||||
<button aria-label="close sidebar" @click="closeSidebar" :class="[
|
||||
'flex text-5 h-8 w-8 items-center justify-center hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] bg-transparent transition-inherit',
|
||||
'flex text-5 h-8 w-8 items-center justify-center hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] bg-transparent transition-inherit',
|
||||
]">
|
||||
<Icon name="mynaui:panel-left-close"
|
||||
:class="['transition-inherit transform-origin-right-center', isHovering ? 'opacity-100 scale-100' : 'opacity-0 scale-95']" />
|
||||
@@ -125,7 +126,7 @@ const navKind = computed(() => {
|
||||
</div>
|
||||
<div v-if="navKind === 'agent'" class="flex-shrink-0 overflow-hidden rounded-lg">
|
||||
<NuxtLink aria-label="Start a new topic" :to="`/agent/${route.params.id}`" :class="[
|
||||
'flex text-5 h-8 w-8 items-center justify-center hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] bg-transparent text-inherit',
|
||||
'flex text-5 h-8 w-8 items-center justify-center hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] bg-transparent text-inherit',
|
||||
]">
|
||||
<Icon name="mynaui:book-plus" />
|
||||
</NuxtLink>
|
||||
@@ -134,7 +135,8 @@ const navKind = computed(() => {
|
||||
</div>
|
||||
|
||||
<!-- Main Menu -->
|
||||
<div class="max-h-full h-full overflow-auto" style="scrollbar-width: thin;">
|
||||
<div
|
||||
class="max-h-full h-full overflow-auto [scrollbar-color:#888_transparent] [scrollbar-width:thin] [scrollbar-gutter:stable]">
|
||||
<SidenavNavHome v-if="navKind === 'home'" />
|
||||
<SidenavNavAgent v-else-if="navKind === 'agent'" />
|
||||
</div>
|
||||
@@ -143,12 +145,11 @@ const navKind = computed(() => {
|
||||
<div class="flex justify-between pt-2">
|
||||
<div class="flex">
|
||||
<button @click="toggleSettings()"
|
||||
class="flex items-center justify-center h-7 w-7 cursor-pointer hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] rounded-lg transition-colors text-[var(--color-muted)] active:text-[var(--color-text)]">
|
||||
<Icon name="mynaui:cog-four" class="text-4" />
|
||||
class="flex items-center justify-center h-7 w-7 cursor-pointer hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors text-[var(--text-secondary)] active:text-[var(--text-primary)]">
|
||||
<Icon name="mynaui:cog-four" class="text-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Theme Switcher -->
|
||||
<div class="flex justify-end gap-1">
|
||||
<ThemeSwitcher />
|
||||
</div>
|
||||
@@ -161,31 +162,3 @@ const navKind = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidenav {
|
||||
height: 100%;
|
||||
max-width: fit-content;
|
||||
background: var(--color-base);
|
||||
overflow: hidden;
|
||||
will-change: width;
|
||||
color: var(--color-muted);
|
||||
user-select: none;
|
||||
transition: width 250ms cubic-bezier(0, 0.55, 0.45, 1),
|
||||
margin 250ms cubic-bezier(0, 0.55, 0.45, 1);
|
||||
}
|
||||
|
||||
.sidenav--open {
|
||||
width: 100%;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.sidenav--closed {
|
||||
width: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.sidenav--resizing {
|
||||
transition: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user