pinafore/routes/_components/dialog/PostPrivacyDialog.html

<ModalDialog :label :shown :closed :title background="var(--main-bg)">
  <ul class="post-privacy">
    {{#each postPrivacyOptions as option}}
      <li class="post-privacy-item">
        <button class="post-privacy-button" on:click="onClick(option)">
          <svg>
            <use xlink:href="{{option.icon}}" />
          </svg>
          <span>
            {{option.label}}
          </span>
          <svg class="{{isSelected(option, postPrivacy) ? '' : 'hidden'}}"
               aria-hidden="{{!isSelected(option, postPrivacy)}}">
            <use xlink:href="#fa-check" />
          </svg>
        </button>
      </li>
    {{/each}}
  </ul>
</ModalDialog>
<style>
  .post-privacy {
    list-style: none;
    width: 100%;
    border: 1px solid var(--settings-list-item-border);
    box-sizing: border-box;
    min-width: 300px;
    max-width: calc(100vw - 20px);
  }
  .post-privacy-item {
    border: 1px solid var(--settings-list-item-border);
    font-size: 1.3em;
    display: flex;
  }
  .post-privacy-item svg {
    width: 24px;
    height: 24px;
    fill: var(--svg-fill);
  }
  .post-privacy-button {
    flex: 1;
    padding: 20px;
    background: var(--settings-list-item-bg);
    border: none;
    margin: 0;
    display: flex;
    flex-direction: row;
  }
  .post-privacy-button span {
    flex: 1;
  }
  .post-privacy-button:hover {
    background: var(--settings-list-item-bg-hover);
  }
  .post-privacy-button:active {
    background: var(--settings-list-item-bg-active);
  }
</style>
<script>
  import ModalDialog from './ModalDialog.html'
  import { store } from '../../_store/store'
  import { POST_PRIVACY_OPTIONS } from '../../_static/statuses'
  import { setPostPrivacy } from '../../_actions/postPrivacy'

  export default {
    components: {
      ModalDialog
    },
    store: () => store,
    data: () => ({
      postPrivacyOptions: POST_PRIVACY_OPTIONS
    }),
    helpers: {
      isSelected: (option, postPrivacy) => postPrivacy.key === option.key
    },
    methods: {
      async show() {
        this.set({shown: true})
      },
      onClick(option) {
        setPostPrivacy(this.get('realm'), option.key)
        this.set({closed: true})
      }
    },
    computed: {
      composeData: ($currentComposeData, realm) => $currentComposeData[realm] || {},
      postPrivacy: (postPrivacyKey) => {
        return POST_PRIVACY_OPTIONS.find(_ => _.key === postPrivacyKey)
      },
      postPrivacyKey: (composeData, $currentVerifyCredentials) => {
        return composeData.postPrivacy || $currentVerifyCredentials.source.privacy
      }
    }
  }
</script>