<:Head> <title>Pinafore – Community</title> </:Head> <Layout page='community'> {{#if $isUserLoggedIn}} <div class="community-page"> <h2 class="community-header"> Timelines </h2> <PageList label="Timelines"> <PageListItem href="/local" label="Local Timeline" icon="#fa-users" pinnable="true" /> <PageListItem href="/federated" label="Federated Timeline" icon="#fa-globe" pinnable="true" /> <PageListItem href="/favorites" label="Favorites" icon="#fa-star" pinnable="true" /> </PageList> {{#if $lists.length}} <h2 class="community-header"> Lists </h2> <PageList label="Lists"> {{#each $lists as list}} <PageListItem href="/lists/{{list.id}}" label="{{list.title}}" icon="#fa-bars" pinnable="true" /> {{/each}} </PageList> {{/if}} <h2 class="community-header"> Instance settings </h2> <PageList label="Instance settings"> <PageListItem href="/muted" label="Muted users" icon="#fa-volume-off" /> <PageListItem href="/blocked" label="Blocked users" icon="#fa-ban" /> <PageListItem href="/pinned" label="Pinned toots" icon="#fa-thumb-tack" /> </PageList> </div> {{else}} <HiddenFromSSR> <FreeTextLayout> <h1>Community</h1> <p>Community options appear here when logged in.</p> </FreeTextLayout> </HiddenFromSSR> {{/if}} </Layout> <style> .community-page { margin: 20px; } @media (max-width: 767px) { .community-page { margin: 20px 10px; } } </style> <script> import Layout from '../_components/Layout.html' import FreeTextLayout from '../_components/FreeTextLayout.html' import { store } from '../_store/store.js' import HiddenFromSSR from '../_components/HiddenFromSSR' import PageList from './_components/PageList.html' import PageListItem from './_components/PageListItem.html' import { updateLists } from '../_actions/lists' export default { async oncreate() { await updateLists() }, store: () => store, components: { Layout, FreeTextLayout, HiddenFromSSR, PageList, PageListItem } }; </script>