plspace/src/routes/Compose.svelte

<script lang="ts">
  /** A full-page composer, reachable from the nav and from "Send Message". */
  import { useAppServices } from '$lib/app-services'
  import Module from '$components/common/Module.svelte'
  import Composer from '$components/blog/Composer.svelte'

  interface Props {
    /** Handle to address the entry to, from `?to=`. */
    to?: string
  }

  let { to }: Props = $props()

  const { router, session } = useAppServices()
  const prefill = $derived(to ? `@${to.replace(/^@/, '')} ` : '')
</script>

<div class="page compose-page">
  <h1 class="page-title">{to ? 'Send a Message' : 'Post a Blog Entry'}</h1>
  {#if to}
    <p class="page-subtitle">
      Addressed to <a href={`#/@${to.replace(/^@/, '')}`}>@{to.replace(/^@/, '')}</a>. Set the
      audience to <em>Mentioned people only</em> to keep it private.
    </p>
  {/if}

  <div class="layout--single">
    <Module title={to ? 'New message' : 'New entry'}>
      {#key to}
        <Composer
          initialText={prefill}
          initialVisibility={to ? 'direct' : 'public'}
          placeholder={to ? 'Say something…' : 'What are you up to?'}
          submitLabel={to ? 'Send' : 'Post Entry'}
          onposted={(status) => router.go(`#/blog/${status.id}`)}
        />
      {/key}
    </Module>

    {#if !session.signedIn}
      <p class="notice"><a href="#/login">Sign in</a> to post.</p>
    {/if}
  </div>
</div>