This commit is contained in:
Timothy Jaeryang Baek 2025-09-14 10:11:17 +02:00
parent 8753c2ff51
commit c923461882
3 changed files with 60 additions and 50 deletions

View file

@ -119,7 +119,7 @@
</div> </div>
{/if} {/if}
{:else} {:else}
<div class="py-5"> <div class="py-4.5">
<Spinner /> <Spinner />
</div> </div>
{/if} {/if}

View file

@ -9,11 +9,13 @@
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import Database from '$lib/components/icons/Database.svelte'; import Database from '$lib/components/icons/Database.svelte';
import DocumentPage from '$lib/components/icons/DocumentPage.svelte'; import DocumentPage from '$lib/components/icons/DocumentPage.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
export let onSelect = (e) => {}; export let onSelect = (e) => {};
let loaded = false;
let items = []; let items = [];
let selectedIdx = 0; let selectedIdx = 0;
@ -99,55 +101,63 @@
); );
await tick(); await tick();
loaded = true;
}); });
</script> </script>
<div class="flex flex-col gap-0.5"> {#if loaded}
{#each items as item, idx} <div class="flex flex-col gap-0.5">
<button {#each items as item, idx}
class=" px-2.5 py-1 rounded-xl w-full text-left flex justify-between items-center text-sm {idx === <button
selectedIdx class=" px-2.5 py-1 rounded-xl w-full text-left flex justify-between items-center text-sm {idx ===
? ' bg-gray-50 dark:bg-gray-800 dark:text-gray-100 selected-command-option-button' selectedIdx
: ''}" ? ' bg-gray-50 dark:bg-gray-800 dark:text-gray-100 selected-command-option-button'
type="button" : ''}"
on:click={() => { type="button"
console.log(item); on:click={() => {
onSelect(item); console.log(item);
}} onSelect(item);
on:mousemove={() => { }}
selectedIdx = idx; on:mousemove={() => {
}} selectedIdx = idx;
on:mouseleave={() => { }}
if (idx === 0) { on:mouseleave={() => {
selectedIdx = -1; if (idx === 0) {
} selectedIdx = -1;
}} }
data-selected={idx === selectedIdx} }}
> data-selected={idx === selectedIdx}
<div class=" text-black dark:text-gray-100 flex items-center gap-1"> >
<Tooltip <div class=" text-black dark:text-gray-100 flex items-center gap-1">
content={item?.legacy <Tooltip
? $i18n.t('Legacy') content={item?.legacy
: item?.type === 'file' ? $i18n.t('Legacy')
? $i18n.t('File') : item?.type === 'file'
: item?.type === 'collection' ? $i18n.t('File')
? $i18n.t('Collection') : item?.type === 'collection'
: ''} ? $i18n.t('Collection')
placement="top" : ''}
> placement="top"
{#if item?.type === 'collection'} >
<Database className="size-4" /> {#if item?.type === 'collection'}
{:else} <Database className="size-4" />
<DocumentPage className="size-4" /> {:else}
{/if} <DocumentPage className="size-4" />
</Tooltip> {/if}
</Tooltip>
<Tooltip content={item.description || decodeString(item?.name)} placement="top-start"> <Tooltip content={item.description || decodeString(item?.name)} placement="top-start">
<div class="line-clamp-1 flex-1"> <div class="line-clamp-1 flex-1">
{decodeString(item?.name)} {decodeString(item?.name)}
</div> </div>
</Tooltip> </Tooltip>
</div> </div>
</button> </button>
{/each} {/each}
</div> </div>
{:else}
<div class="py-4.5">
<Spinner />
</div>
{/if}

View file

@ -122,7 +122,7 @@
</div> </div>
{/if} {/if}
{:else} {:else}
<div class="py-5"> <div class="py-4.5">
<Spinner /> <Spinner />
</div> </div>
{/if} {/if}