pinafore/routes/_pages/settings/instances/index.html

<SettingsLayout page='settings/instances' label="Instances">
  <h1>Instances</h1>

  {#if $isUserLoggedIn}
  <p>Instances you've logged in to:</p>
  <SettingsList label="Instances">
    {#each $loggedInInstancesAsList as instance}
      <SettingsListItem offsetForIcon={instance.name !== $currentInstance}
                        icon={instance.name === $currentInstance ? '#fa-star' : ''}
                        href="/settings/instances/{instance.name}"
                        label={instance.name}
                        ariaLabel="{instance.name} {instance.name === $currentInstance ? '(current instance)' : ''}" />
    {/each}
  </SettingsList>
  <p><a href="/settings/instances/add">Add another instance</a></p>
  {:else}
  <p>You're not logged in to any instances.</p>
  <p><a href="/settings/instances/add">Log in to an instance</a> to start using Pinafore.</p>
  {/if}
</SettingsLayout>
<script>
  import { store } from '../../../_store/store'
  import SettingsLayout from '../../../_components/settings/SettingsLayout.html'
  import SettingsList from '../../../_components/settings/SettingsList.html'
  import SettingsListItem from '../../../_components/settings/SettingsListItem.html'

  export default {
    components: {
      SettingsLayout,
      SettingsList,
      SettingsListItem
    },
    store: () => store
  }
</script>