zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

streaming, markdown, model selecting, and lots more

Browse Source
This commit is contained in:
Zoe
2026-02-02 23:16:06 -06:00
parent 8c28946703
commit d5a5945c03
114 changed files with 6109 additions and 2938 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Sidenav/index.vue
+73 -52
View File
@@ -1,93 +1,105 @@
<script setup lang="ts">
const { close: closeSidebar, open, sidebarWidth, resize, saveWidth } = useSidebar()
const route = useRoute()
const { close: closeSidebar, open, sidebarWidth, resize, saveWidth } = useSidebar();
const route = useRoute();
const isResizing = ref(false)
const startX = ref(0)
const initialWidth = ref(0)
const isResizing = ref(false);
const startX = ref(0);
const initialWidth = ref(0);
const closeSidenavRef = ref<HTMLElement | null>(null)
const sidenavRef = ref<HTMLElement | null>(null);
const closeSidenavRef = ref<HTMLElement | null>(null);
const { toggle: toggleSettings } = useSettings();
const onResizeStart = (event: MouseEvent) => {
isResizing.value = true
startX.value = event.clientX
initialWidth.value = sidebarWidth.value
document.body.style.cursor = 'col-resize'
document.body.style.userSelect = 'none'
}
isResizing.value = true;
startX.value = event.clientX;
initialWidth.value = sidebarWidth.value;
document.body.style.cursor = 'col-resize';
document.body.style.userSelect = 'none';
};
const onResizeMove = (event: MouseEvent) => {
if (!isResizing.value) return
if (!isResizing.value) return;
if (resizeAnimationFrame) return;
resizeAnimationFrame = requestAnimationFrame(() => {
const deltaX = event.clientX - startX.value
const newWidth = initialWidth.value + deltaX
resize(newWidth)
resizeAnimationFrame = null
})
}
const deltaX = event.clientX - startX.value;
const newWidth = initialWidth.value + deltaX;
resize(newWidth);
resizeAnimationFrame = null;
});
};
const onResizeEnd = () => {
if (!isResizing.value) return
if (!isResizing.value) return;
isResizing.value = false
document.body.style.cursor = ''
document.body.style.userSelect = ''
saveWidth()
}
isResizing.value = false;
document.body.style.cursor = '';
document.body.style.userSelect = '';
saveWidth();
};
let resizeAnimationFrame: number | null = null
let resizeAnimationFrame: number | null = null;
onMounted(() => {
document.addEventListener('mousemove', onResizeMove)
document.addEventListener('mouseup', onResizeEnd)
document.addEventListener('mousemove', onResizeMove);
document.addEventListener('mouseup', onResizeEnd);
watch(hovering, (value) => {
if (!closeSidenavRef.value) return;
if (value) {
const width = closeSidenavRef.value!.scrollWidth
closeSidenavRef.value!.style.width = `${width}px`
const width = closeSidenavRef.value.scrollWidth;
closeSidenavRef.value.style.width = `${width}px`;
} else {
closeSidenavRef.value!.style.width = '0'
closeSidenavRef.value.style.width = '0';
}
})
})
});
});
onUnmounted(() => {
document.removeEventListener('mousemove', onResizeMove)
document.removeEventListener('mouseup', onResizeEnd)
})
document.removeEventListener('mousemove', onResizeMove);
document.removeEventListener('mouseup', onResizeEnd);
});
const hovering = ref(false)
const hovering = ref(false);
const navKind = computed(() => {
if (route.path === '/') return 'home'
if (route.path.startsWith('/agent/')) return 'agent'
return null
})
if (route.path === '/') return 'home';
if (route.path.startsWith('/agent/')) return 'agent';
return null;
});
const onFocusOut = (e: FocusEvent) => {
const isMovingOutside = sidenavRef.value && !sidenavRef.value.contains(e.relatedTarget as Node);
if (isMovingOutside) {
hovering.value = false;
}
};
</script>
<template>
<div class="relative">
<aside :class="[
'h-full max-w-fit bg-[var(--color-base)] overflow-hidden will-change-width text-[var(--color-subtle)] select-none',
<aside ref="sidenavRef" :class="[
'h-full max-w-fit bg-[var(--color-base)] overflow-hidden will-change-width text-[var(--color-muted)] select-none',
open ? 'w-full mr-2' : 'w-0 mr-0',
isResizing ? '' : 'transition-[width,margin] duration-250 ease-[cubic-bezier(0,0.55,0.45,1)]'
]" :style="open ? { width: `${sidebarWidth}px` } : {}" @mouseenter="hovering = true"
@mouseleave="hovering = false">
@mouseleave="hovering = false" @focusin="hovering = true" @focusout="onFocusOut">
<div :style="{ minWidth: `${sidebarWidth}px` }" class="flex flex-col h-full justify-between">
<div class="flex flex-col">
<div class="flex flex-col h-full max-h-full overflow-y-hidden">
<!-- Header -->
<div class="relative flex flex-row gap-2 justify-between items-center mb-1.5">
<SidenavHeader v-if="navKind === 'home'" v-model="hovering" />
<SidenavHeaderAgent v-else-if="navKind === 'agent'" v-model="hovering" />
<div class="flex items-center justify-end text-[var(--color-subtle)] gap-0.5">
<div class="flex items-center justify-end text-[var(--color-muted)] gap-0.5">
<div ref="closeSidenavRef" style="width: 0;"
: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="[
'text-5 p-1.5 hover:bg-[var(--color-highlight)] bg-transparent transition-inherit',
'flex text-5 h-8 w-8 items-center justify-center hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] scale-100 bg-transparent transition-inherit',
]">
<Icon name="mynaui:panel-left-close"
:class="['transition-inherit', hovering ? 'opacity-100 scale-100' : 'opacity-0 scale-95']" />
@@ -95,7 +107,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 p-1.5 hover:bg-[var(--color-highlight)] bg-transparent text-inherit',
'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',
]">
<Icon name="mynaui:book-plus" />
</NuxtLink>
@@ -104,15 +116,24 @@ const navKind = computed(() => {
</div>
<!-- Main Menu -->
<div class="max-h-full overflow-auto">
<div class="max-h-full h-full overflow-auto" style="scrollbar-width: thin;">
<SidenavNavHome v-if="navKind === 'home'" />
<SidenavNavAgent v-else-if="navKind === 'agent'" />
</div>
</div>
<!-- Theme Switcher -->
<div class="flex justify-end">
<ThemeSwitcher />
<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" />
</button>
</div>
<!-- Theme Switcher -->
<div class="flex justify-end gap-1">
<ThemeSwitcher />
</div>
</div>
</div>