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

Performance enhancements galore! New themining system

Browse Source 
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:
Zoe
2026-02-19 23:44:23 -06:00
parent 32a4f7f95d
commit 59bb7fbc12
85 changed files with 3523 additions and 2039 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Dropdown.vue
+20 -86
View File
@@ -1,97 +1,31 @@
<script setup lang="ts">
import type { DropdownItem } from '~/types/dropdown';
<script setup>
import { useDropdown } from '~/composables/useDropdown';
const { dropdownState, closeDropdown } = useDropdown();
const menuRef = ref(null);
interface Props {
items?: DropdownItem[];
placement?: 'right' | 'left' | 'center';
verticality?: 'asscending' | 'descending';
width?: string;
}
const currentItems = computed(() => dropdownState.itemsFactory?.());
const props = withDefaults(defineProps<Props>(), {
placement: 'right',
verticality: 'descending',
width: 'auto',
});
const emit = defineEmits<(e: 'select', item: DropdownItem) => void>();
const triggerRef = ref<HTMLElement | null>(null);
const isOpen = defineModel<boolean>({ required: false });
const toggle = () => {
isOpen.value = !isOpen.value;
};
const select = (item: DropdownItem) => {
if (item.disabled || item.divider) return;
emit('select', item);
isOpen.value = false;
};
const placementClasses = computed(() => {
let classes = '';
switch (props.placement) {
case 'right':
classes += 'right-0 ';
break;
case 'left':
classes += 'left-0 ';
break;
case 'center':
classes += 'left-1/2 -translate-x-1/2 ';
break;
default:
classes += 'left-0 ';
break;
}
switch (props.verticality) {
case 'asscending':
classes += 'bottom-full mb-1.5';
break;
case 'descending':
classes += 'top-full mt-1.5';
break;
}
return classes;
});
useClickOutside(triggerRef, () => {
isOpen.value = false;
});
useClickOutside(menuRef, closeDropdown);
</script>
<template>
<div ref="triggerRef" :class="$attrs.class">
<slot name="trigger" :toggle="toggle" :is-open="isOpen"></slot>
<Teleport to="body">
<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="isOpen" :class="[
'absolute z-50 bg-[var(--color-neutral)] border border-[var(--color-highlight)] rounded-xl p-1.5 flex flex-col gap-1',
placementClasses
]" :style="{ width: width !== 'auto' ? width : undefined }">
<template v-for="(item, index) in items" :key="index">
<div v-if="item.divider" class="h-px bg-[var(--color-highlight)] my-1" />
<button @click="select(item); item.onClick && item.onClick()" :disabled="item.disabled"
class="bg-transparent w-full flex items-center gap-2 px-3 py-2 rounded-lg transition-colors text-left"
:class="[
item.disabled
? 'opacity-50 cursor-not-allowed'
: 'hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] cursor-pointer'
]">
<Icon v-if="item.icon" :name="item.icon" class="w-4 h-4 flex-shrink-0" />
<span class="text-sm whitespace-nowrap">{{ item.label }}</span>
<slot name="item-after" :item="item"></slot>
</button>
</template>
<slot name="content" :toggle="toggle"></slot>
<div v-if="dropdownState.open" ref="menuRef"
:style="{ top: `${dropdownState.y}px`, left: `${dropdownState.x}px`, width: dropdownState.options?.width || 'auto', minWidth: dropdownState.options?.minWidth || 'auto', maxWidth: dropdownState.options?.maxWidth || 'auto', transform: `translate(${dropdownState.options?.placement === 'right' ? '-100%' : dropdownState.options?.placement === 'center' ? '-50%' : '0'}, ${dropdownState.options?.verticality === 'ascending' ? 'calc(-100% - 0.25rem)' : '0.25rem'})` }"
class="flex flex-col gap-1 fixed z-[100] bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-lg p-1.5 shadow-xl">
<!-- Render your items based on activeMenu.content -->
<button v-for="item in currentItems" @click="item.onClick(); closeDropdown()" :disabled="item.disabled"
class="disabled:opacity-50 disabled:cursor-not-allowed items-center gap-1 text-left px-3 py-1.5 text-sm hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
:class="{ 'text-red-600 hover:bg-red-600/20': item.danger, 'text-primary bg-[var(--color-hover)]': item.active }">
<Icon v-if="item.icon" :name="item.icon" class="w-4 h-4 flex-shrink-0" />
<span class="text-sm whitespace-nowrap text-ellipsis max-w-full overflow-hidden">{{ item.label
}}</span>
</button>
</div>
</Transition>
</div>
</template>
</Teleport>
</template>