mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
64 lines
3.2 KiB
Plaintext
64 lines
3.2 KiB
Plaintext
<%# Shared dropdown template for @-mention content linking %>
|
|
<%# This partial provides the categorized dropdown UI used across the application %>
|
|
|
|
<!-- Dropdown for content suggestions -->
|
|
<div x-show="showDropdown"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
class="linkables-dropdown-container absolute w-96 bg-white rounded-lg shadow-lg border border-gray-200"
|
|
:style="`top: ${dropdownPosition.top}px; left: ${dropdownPosition.left}px; z-index: 9999;`">
|
|
<div class="linkables-dropdown max-h-96 overflow-y-auto">
|
|
<!-- Categorized sections -->
|
|
<template x-for="(group, groupIndex) in groupedResults" :key="group.type">
|
|
<div class="content-type-section">
|
|
<!-- Section Header -->
|
|
<div class="sticky top-0 bg-gray-50 border-b border-gray-200 px-4 py-2 z-10">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-2">
|
|
<span class="font-medium text-gray-700 text-sm" x-text="group.type"></span>
|
|
<span class="text-xs text-gray-500" x-text="`(${group.totalCount})`"></span>
|
|
</div>
|
|
<button x-show="group.hasMore && !group.isExpanded"
|
|
@click="toggleSection(group.type)"
|
|
class="text-xs text-blue-600 hover:text-blue-700 font-medium transition-colors cursor-pointer">
|
|
<span x-text="`+${group.totalCount - group.items.length} more`"></span>
|
|
</button>
|
|
<button x-show="group.isExpanded && group.hasMore"
|
|
@click="toggleSection(group.type)"
|
|
class="text-xs text-gray-500 hover:text-gray-700 font-medium transition-colors cursor-pointer">
|
|
Show less
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section Items -->
|
|
<template x-for="(item, itemIndex) in group.items" :key="item.value">
|
|
<div @click="selectItem(item)"
|
|
@mousedown.prevent
|
|
:class="{ 'bg-blue-50': filteredResults.indexOf(item) === selectedIndex }"
|
|
class="px-4 py-3 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0 transition-colors">
|
|
<div class="flex items-center space-x-3">
|
|
<div :class="[getIconColorClass(item.color), getBackgroundColor(item.color)]"
|
|
class="flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center">
|
|
<i class="material-icons text-sm" x-text="item.icon"></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="font-medium text-gray-900 truncate" x-text="item.name"></div>
|
|
<div class="text-xs text-gray-500" x-text="item.type"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Empty state -->
|
|
<div x-show="groupedResults.length === 0" class="px-4 py-3 text-gray-500 text-sm">
|
|
No matching content found
|
|
</div>
|
|
</div>
|
|
</div> |