flotilla/src/app/components/PinEdit.svelte

<script lang="ts">
  import PinForm, {type PinFormValues} from "@app/components/PinForm.svelte"
  import {createPin, referenceToPin, pinToReference, type PublishedPin} from "@app/pinboards"

  type Props = {
    url: string
    pin: PublishedPin
  }

  const {url, pin}: Props = $props()

  const submit = async ({title, topics, value, content}: PinFormValues) => {
    const params = referenceToPin(value)

    if (!params) return "Please enter a valid URL or nostr link."

    // Reuse the pin's identifier and boards so its addressable event is replaced.
    return createPin(url, {
      ...params,
      identifier: pin.identifier,
      boards: pin.boards,
      title,
      topics,
      description: content,
    })
  }
</script>

<PinForm
  {url}
  heading="Edit Link"
  action="Save changes"
  successMessage="Link updated!"
  values={{
    title: pin.title,
    topics: pin.topics,
    value: pinToReference(pin),
    content: pin.description,
  }}
  {submit} />