enh: auto tag feedback

This commit is contained in:
Timothy J. Baek
2024-10-23 20:18:51 -07:00
parent 73ab84efe6
commit 076f9fd9c0
9 changed files with 132 additions and 52 deletions

View File

@@ -1,28 +1,26 @@
<script lang="ts">
import TagInput from './Tags/TagInput.svelte';
import TagList from './Tags/TagList.svelte';
import { getContext } from 'svelte';
import { getContext, createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
const i18n = getContext('i18n');
export let tags = [];
export let deleteTag: Function;
export let addTag: Function;
</script>
<div class="flex flex-row flex-wrap gap-1 line-clamp-1">
<TagList
{tags}
on:delete={(e) => {
deleteTag(e.detail);
dispatch('delete', e.detail);
}}
/>
<TagInput
label={tags.length == 0 ? $i18n.t('Add Tags') : ''}
on:add={(e) => {
addTag(e.detail);
dispatch('add', e.detail);
}}
/>
</div>

View File

@@ -11,12 +11,12 @@
{#each tags as tag}
<Tooltip content={tag.name}>
<div
class="relative group px-1.5 py-[0.2px] gap-0.5 flex justify-between h-fit max-h-fit w-fit items-center rounded-full bg-gray-500/20 text-gray-700 dark:text-gray-200 transition cursor-pointer"
class="relative group/tags px-1.5 py-[0.2px] gap-0.5 flex justify-between h-fit max-h-fit w-fit items-center rounded-full bg-gray-500/20 text-gray-700 dark:text-gray-200 transition cursor-pointer"
>
<div class=" text-[0.7rem] font-medium self-center line-clamp-1 w-fit">
{tag.name}
</div>
<div class="absolute invisible right-0.5 group-hover:visible transition">
<div class="absolute invisible right-0.5 group-hover/tags:visible transition">
<button
class="rounded-full border bg-white dark:bg-gray-700 h-full flex self-center cursor-pointer"
on:click={() => {