diff --git a/apps/web/src/routes/(app)/settings/+page.svelte b/apps/web/src/routes/(app)/settings/+page.svelte index 37bc2e0..e0dc28f 100644 --- a/apps/web/src/routes/(app)/settings/+page.svelte +++ b/apps/web/src/routes/(app)/settings/+page.svelte @@ -9,6 +9,15 @@ import ImageCropper from '$lib/components/ImageCropper.svelte'; import ThemeToggle from '$lib/components/ThemeToggle.svelte'; import SyncConflictsPanel from '$lib/components/SyncConflictsPanel.svelte'; + import TagChip from '$lib/components/TagChip.svelte'; + import { + tags as tagsStore, + loadTags, + renameTag, + recolorTag, + deleteTag + } from '$lib/stores/tags'; + import type { ItemTag, ItemTagColor } from '@colectivo/types'; import { languageTag, setLanguageTag } from '$lib/paraglide/runtime'; import * as m from '$lib/paraglide/messages'; import type { ThemePreference } from '$lib/theme'; @@ -43,8 +52,54 @@ onMount(async () => { await loadProfile(); + if ($currentCollective) { + await loadTags($currentCollective.id); + } }); + // Inline edit state for the tag list (one row at a time). + let editingTagId = $state(null); + let editingTagName = $state(''); + const TAG_COLORS: ItemTagColor[] = [ + 'slate', + 'red', + 'amber', + 'green', + 'sky', + 'indigo', + 'pink', + 'stone' + ]; + + function startEditTag(tag: ItemTag) { + editingTagId = tag.id; + editingTagName = tag.name; + } + + async function commitEditTag() { + const id = editingTagId; + const next = editingTagName.trim(); + editingTagId = null; + editingTagName = ''; + if (id && next) { + await renameTag(id, next); + } + } + + function cancelEditTag() { + editingTagId = null; + editingTagName = ''; + } + + async function handleRecolor(tag: ItemTag, color: ItemTagColor) { + if (tag.color === color) return; + await recolorTag(tag.id, color); + } + + async function handleDeleteTag(id: string) { + await deleteTag(id); + } + async function loadProfile() { if (!$currentUser) return; @@ -397,6 +452,68 @@ {/if} + +
+

+ {m.settings_tags_section()} +

+ {#if $tagsStore.length === 0} +

{m.settings_tags_empty()}

+ {:else} + + {/if} +
+