diff --git a/src/lib/components/party/Party.svelte b/src/lib/components/party/Party.svelte index 1e9696da..63dd6af5 100644 --- a/src/lib/components/party/Party.svelte +++ b/src/lib/components/party/Party.svelte @@ -409,7 +409,13 @@ function openDescriptionPanel() { openDescriptionSidebar({ title: party.name || '(untitled party)', - description: party.description + description: party.description, + canEdit: canEdit(), + partyId: party.id, + partyShortcode: party.shortcode, + onSave: async (description) => { + await updatePartyDetails({ description }) + } }) } @@ -418,6 +424,7 @@ const initialValues: PartyEditValues = { name: party.name ?? '', + description: party.description ?? null, fullAuto: party.fullAuto ?? false, autoGuard: party.autoGuard ?? false, autoSummon: party.autoSummon ?? false, @@ -437,6 +444,7 @@ onSave: async (values) => { await updatePartyDetails({ name: values.name, + description: values.description, fullAuto: values.fullAuto, autoGuard: values.autoGuard, autoSummon: values.autoSummon, diff --git a/src/lib/components/party/info/DescriptionTile.svelte b/src/lib/components/party/info/DescriptionTile.svelte index 4689ec58..ff25c03c 100644 --- a/src/lib/components/party/info/DescriptionTile.svelte +++ b/src/lib/components/party/info/DescriptionTile.svelte @@ -21,8 +21,15 @@ menu?: Snippet } - let { name, description, user, canEdit = false, onOpenDescription, onOpenEdit, menu }: Props = - $props() + let { + name, + description, + user, + canEdit = false, + onOpenDescription, + onOpenEdit, + menu + }: Props = $props() const avatarSrc = $derived(getAvatarSrc(user?.avatar?.picture)) const avatarSrcSet = $derived(getAvatarSrcSet(user?.avatar?.picture)) @@ -30,40 +37,40 @@
-
-

{name || '(untitled party)'}

-
- {#if canEdit} - - {/if} - {#if menu} - {@render menu()} - {/if} -
-
- - - {#if user} - -
- {#if user.avatar?.picture} - {`Avatar - {:else} - +
+
+

{name || '(untitled party)'}

+
+ {#if canEdit} + + {/if} + {#if menu} + {@render menu()} {/if}
- {user.username} - - {/if} +
+ + + {#if user} + +
+ {#if user.avatar?.picture} + {`Avatar + {:else} + + {/if} +
+ {user.username} + + {/if} +
+ {/snippet} + + + + setHeading(1)} + > + + Heading 1 + + setHeading(2)} + > + + Heading 2 + + setHeading(3)} + > + + Heading 3 + + + + Paragraph + + + + + +
+ + + + + + + + + + +
+ + + + +
+ + + + + +
+ + diff --git a/src/lib/components/sidebar/EditDescriptionPane.svelte b/src/lib/components/sidebar/EditDescriptionPane.svelte new file mode 100644 index 00000000..83c71837 --- /dev/null +++ b/src/lib/components/sidebar/EditDescriptionPane.svelte @@ -0,0 +1,404 @@ + + +
+ +
+
+ +
+ + + {#if styleDropdownOpen} + + +
e.stopPropagation()}> + + + + +
+ {/if} +
+ +
+ + + + + + + + + + +
+ + + + +
+ + + + + +
+
+ +
+ +
+
+ + + (styleDropdownOpen = false)} /> + + diff --git a/src/lib/components/sidebar/PartyEditSidebar.svelte b/src/lib/components/sidebar/PartyEditSidebar.svelte index 367f52e6..19714fc8 100644 --- a/src/lib/components/sidebar/PartyEditSidebar.svelte +++ b/src/lib/components/sidebar/PartyEditSidebar.svelte @@ -13,6 +13,7 @@ import YouTubeUrlInput from '$lib/components/party/edit/YouTubeUrlInput.svelte' import MetricField from '$lib/components/party/edit/MetricField.svelte' import EditRaidPane from '$lib/components/sidebar/EditRaidPane.svelte' + import EditDescriptionPane from '$lib/components/sidebar/EditDescriptionPane.svelte' import { sidebar } from '$lib/stores/sidebar.svelte' import { usePaneStack } from '$lib/stores/paneStack.svelte' import { untrack } from 'svelte' @@ -22,6 +23,7 @@ export interface PartyEditValues { name: string + description: string | null fullAuto: boolean autoGuard: boolean autoSummon: boolean @@ -64,6 +66,7 @@ let videoUrl = $state(initialValues.videoUrl) let raid = $state(initialValues.raid) let raidId = $state(initialValues.raidId) + let description = $state(initialValues.description) // Check if any values have changed const hasChanges = $derived( @@ -77,13 +80,15 @@ chainCount !== initialValues.chainCount || summonCount !== initialValues.summonCount || videoUrl !== initialValues.videoUrl || - raidId !== initialValues.raidId + raidId !== initialValues.raidId || + description !== initialValues.description ) // Expose save function for sidebar action button export function save() { const values: PartyEditValues = { name, + description, fullAuto, autoGuard, autoSummon, @@ -185,6 +190,39 @@ } paneStack.pop() } + + function getDescriptionPreview(desc: string | null): string { + if (!desc) return '' + try { + const parsed = JSON.parse(desc) + // Extract plain text from TipTap JSON + const extractText = (node: { type?: string; text?: string; content?: unknown[] }): string => { + if (node.text) return node.text + if (node.content) return node.content.map(extractText).join('') + return '' + } + return extractText(parsed).slice(0, 50) || '' + } catch { + // Legacy plain text + return desc.slice(0, 50) + } + } + + function openDescriptionPane() { + paneStack.push({ + id: 'edit-description', + title: 'Edit Description', + component: EditDescriptionPane, + props: { + description, + onSave: (content: string) => { + description = content + paneStack.pop() + } + }, + scrollable: false + }) + }
@@ -199,6 +237,21 @@
+ + + {#snippet children()} + + {/snippet} + + + {#snippet children()} @@ -272,7 +325,8 @@ padding: 0 $unit-2x; } - .raid-select-button { + .raid-select-button, + .description-select-button { display: flex; align-items: center; gap: $unit; @@ -283,7 +337,8 @@ text-align: left; } - .raid-name { + .raid-name, + .description-preview { font-size: $font-regular; font-weight: $medium; color: var(--text-secondary); diff --git a/src/lib/features/description/openDescriptionSidebar.svelte.ts b/src/lib/features/description/openDescriptionSidebar.svelte.ts index b304ea0f..70f1d9bf 100644 --- a/src/lib/features/description/openDescriptionSidebar.svelte.ts +++ b/src/lib/features/description/openDescriptionSidebar.svelte.ts @@ -4,13 +4,21 @@ import DescriptionSidebar from '$lib/components/sidebar/DescriptionSidebar.svelt interface DescriptionSidebarOptions { title?: string | undefined description?: string | undefined + canEdit?: boolean | undefined + partyId?: string | undefined + partyShortcode?: string | undefined + onSave?: ((description: string) => Promise) | undefined } export function openDescriptionSidebar(options: DescriptionSidebarOptions) { - const { title, description } = options + const { title, description, canEdit, partyId, partyShortcode, onSave } = options sidebar.openWithComponent(title ?? '', DescriptionSidebar, { - description + description, + canEdit, + partyId, + partyShortcode, + onSave }) }