diff --git a/src/components/CreatePost/CreatePost.vue b/src/components/CreatePost/CreatePost.vue
deleted file mode 100644
index 58ca038..0000000
--- a/src/components/CreatePost/CreatePost.vue
+++ /dev/null
@@ -1,1212 +0,0 @@
-<template>
-  <div class="create-post">
-    <div class="create-post-avatar">
-      <BaseUserAvatar :pubkey="$store.state.keys.pub" />
-    </div>
-
-    <div class="create-post-content">
-      <div
-        v-if="replyMode === 'quote' || replyMode === 'repost'"
-        class="reposts flex column q-px-sm q-py-xs"
-        :class="replyMode === 'quote' ? 'q-mb-sm' : ''"
-        :clickable="false"
-      >
-        <BasePost
-          :event="event"
-          :clickable="false"
-          :is-embeded="true"
-          :reply-depth="-1"
-        />
-      </div>
-
-      <div
-        v-if="messageMode === 'reply' && event"
-        :clickable="false"
-        class="embeded-message q-px-sm q-py-xs"
-      >
-        <div class="relative-position">
-          <q-btn icon="close" flat dense @click.stop="$emit('clear-event')" size="xs" class="absolute-top-right z-top"/>
-        </div>
-        <BaseMessage
-          v-if="event"
-          :event="event"
-          :clickable="false"
-          :is-embeded="true"
-        />
-      </div>
-
-      <div
-        v-show="replyMode !== 'repost'"
-        class="relative-position full-width"
-        style="gap: 5px;"
-        @click.stop
-      >
-        <q-list
-          id="tribute-wrapper"
-          class="overflow-auto flex row z-top"
-          style="max-height: 70vh"
-          @click.stop="focusInput"
-        />
-        <div class="input-area">
-          <span id="input-placeholder"> {{ placeholderText }}</span>
-          <div v-show='!longForm' id="input-readonly-highlight" contenteditable="true" spellcheck="false"></div>
-          <div
-            id="input-editable"
-            :contenteditable="!sending && !mentionsUpdating"
-            :style='mentionsUpdating ? "opacity: .7;" : ""'
-            @input='updateText'
-            @keypress.delete='updateText'
-            @focus='textareaFocus'
-            @blur='textareaBlur'
-            @keypress.ctrl.enter="send"
-            @click.stop='updateText'
-            @touchstart.stop
-            @mousedown.stop
-          >
-          </div>
-          <div id="input-readonly" contenteditable="true" spellcheck="false"></div>
-          <div v-if='mentionsUpdating' class='absolute-top full-width row justify-center q-my-md'>
-            <q-spinner-orbit color="accent" size='md'/>
-          </div>
-        </div>
-      </div>
-
-      <div style='font-size: .9rem;'>
-        <div v-if='links.length' class='q-pl-xs'>
-          <div class='text-secondary'>links added</div>
-          <ul dense style='font-size: .8rem; font-weight: 300;'>
-            <li v-for='(link, index) in links' :key='index' class='flex row justify-between no-wrap' dense>
-              <div class='col-11' style='overflow-x: auto'>
-              <strong>{{ linkName(link) }}</strong>
-              <span>{{ link.url }}</span>
-              </div>
-              <q-btn icon="remove_circle" clickable @click.stop='removeLink(index)' flat color="negative" size='xs' class='no-padding'/>
-            </li>
-          </ul>
-        </div>
-      </div>
-
-      <div class='flex justify-between' :class='toolSelected ? "column" : "row"' @click.stop>
-        <div class='flex row justify-between'>
-          <q-btn-toggle
-            v-show='replyMode !== "repost"'
-            v-model='toolSelected'
-            class='flex'
-            dense
-            unelevated
-            toggle-color=''
-            toggle-text-color='accent'
-            :class='toolSelected ? "column" : "row"'
-            :options="[
-              {value: 'emoji', slot: 'emoji'},
-              {value: 'link', slot: 'link'},
-              {value: 'help', slot: 'help'},
-              ]"
-          >
-            <template #emoji>
-              <q-btn
-                unelevated
-                class='no-padding button-emoji'
-                dense
-                size='sm'
-                @click.stop='toggleTool("emoji")'
-              >
-                <q-icon>
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"/><path d="M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"/></svg>
-                </q-icon>
-                <q-tooltip>
-                  add emoji
-                </q-tooltip>
-              </q-btn>
-            </template>
-            <template #link>
-              <q-btn
-                unelevated
-                class='no-padding button-link'
-                dense
-                size='sm'
-                @click.stop='toggleTool("link")'
-              >
-                <q-icon name='add_link' size='sm'/>
-                <!-- </q-icon> -->
-                <q-tooltip>
-                  add link
-                </q-tooltip>
-              </q-btn>
-            </template>
-            <template #help>
-              <q-btn
-                unelevated
-                class='no-padding button-link'
-                dense
-                size='sm'
-                @click.stop='toggleTool("help")'
-              >
-                <q-icon name='help' size='xs'/>
-                <!-- </q-icon> -->
-                <q-tooltip>
-                  how to mention users and posts
-                </q-tooltip>
-              </q-btn>
-            </template>
-            <!-- <template #image>
-              <q-btn
-                unelevated
-                class='no-padding button-image'
-                dense
-                flat
-                size='sm'
-                icon='image'
-                @click.stop='toggleTool("image")'
-              />
-            </template> -->
-          </q-btn-toggle>
-          <q-item v-if='toolSelected' class='col toolbox no-padding' ref='toolbox'>
-            <q-separator vertical color='accent' size='1px'/>
-            <q-tab-panels
-              v-model="toolSelected"
-              class='no-padding full-width'
-            >
-              <q-tab-panel name="emoji" class='no-padding' @click.stop>
-                <BaseEmojiPicker
-                  @emoji-selected='insertEmoji'
-                  :per-line='emojiPerRow'
-                  class='full-width'
-                />
-              </q-tab-panel>
-              <q-tab-panel name="link" class='q-pa-xs' @click.stop>
-                <BaseLinkForm
-                  :links='links'
-                  @link-added='addLink'
-                />
-              </q-tab-panel>
-              <q-tab-panel name="help" class='q-pa-xs' @click.stop>
-                <div>
-                  <span class='text-bold'>{{ "to mention a user: "}}</span>
-                  {{ "type "}}
-                  <code>{{`"@"`}}</code>
-                  {{ " and select user from menu that pops up or paste in "}}
-                  <code>{{`"@<pubkey-id>"`}}</code>
-                </div>
-                <!-- <br> -->
-                <div>
-                  <span class='text-bold'>{{ "to mention a post: "}}</span>
-                  {{ "paste in "}}
-                  <code>{{`"&<event-id>"`}}</code>
-                </div>
-              </q-tab-panel>
-            </q-tab-panels>
-          </q-item>
-        </div>
-        <q-btn-group class='flex items-center' unelevated>
-          <q-btn
-            v-if='toolSelected'
-            icon="close"
-            unelevated
-            class='col button-close'
-            dense
-            @click.stop='closeTools'
-          >
-            <q-tooltip>
-              cancel
-            </q-tooltip>
-          </q-btn>
-
-          <!-- <div v-if='charLeft() <= 0'>
-            <input type="checkbox" id="long-form-checkbox" name="long-form-checkbox">
-            <label for="long-form-checkbox">long form</label>
-          </div> -->
-
-          <!-- <q-checkbox v-if='charLeft() <= 0' v-model="shortLong" label="long form" color="primary" size='xs'/> -->
-          <!-- <q-btn-toggle
-            v-model="shortLong"
-            outline
-            toggle-color="primary"
-            color="white"
-            text-color="primary"
-            :options="[
-              {icon: 'short_text', value: 'short'},
-              {icon: 'article', value: 'long'}
-            ]"
-          /> -->
-          <div v-if='text && !messageMode' class='char-left-label'>
-            <span v-if='(charLeft() <= 0) && !longForm' class='over-limit'>{{ charLeft() }}</span>
-            <q-circular-progress
-              v-if='charLeft() > 0'
-              :show-value='charLeft() <= 25'
-              :value='((text.length % charLimit) / charLimit) * 100'
-              :size="charLeft() <= 25 ? '1.5rem' : '1.2rem'"
-              font-size='.6rem'
-              :thickness="charLeft() <= 25 ? .2 : .1"
-              :color="charLeft() <= 25 ? 'warning' : 'secondary'"
-              track-color='transparent'
-              class="no-padding"
-              instant-feedback
-            >
-              {{ charLeft() }}
-            </q-circular-progress>
-          </div>
-          <q-btn-toggle
-            v-if='!messageMode && (charLeft() <= 0)'
-            v-model="longForm"
-            unelevated
-            dense
-            toggle-color="primary"
-            style='border: 1px solid var(--q-primary)'
-            text-color="primary"
-            class='q-ml-md'
-            :options="[
-              {value: false, slot: 'short'},
-              {value: true, slot: 'long'}
-            ]"
-          >
-            <template #short>
-              <q-icon name='short_text' size='xs' :style='longForm ? "" : "color: var(--q-background"'/>
-              <q-tooltip>
-                short form post
-              </q-tooltip>
-            </template>
-            <template #long>
-              <q-icon name='format_align_left' size='xs' :style='longForm ? "color: var(--q-background" : ""'/>
-              <q-tooltip>
-                long form post
-              </q-tooltip>
-            </template>
-          </q-btn-toggle>
-          <q-btn
-            flat
-            unelevated
-            color="primary"
-            type="submit"
-            @click.stop='send'
-            :disable='!textValid()'
-          >
-            <q-icon name="send" :style='"transform: translateX(" + sendIconTranslation + "px);"'/>
-          </q-btn>
-        </q-btn-group>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { colors } from 'quasar'
-const { getPaletteColor } = colors
-import helpersMixin from 'src/utils/mixin'
-import {getPubKeyTagWithRelay, getEventIdTagWithRelay, shorten} from 'src/utils/helpers'
-import {cleanEvent} from 'src/utils/event'
-import BaseEmojiPicker from 'components/BaseEmojiPicker.vue'
-import BaseLinkForm from 'components/BaseLinkForm.vue'
-import BaseMessage from 'components/BaseMessage.vue'
-import BaseUserAvatar from 'components/BaseUserAvatar.vue'
-import {publish} from 'src/query'
-
-// import { ref } from 'vue'
-
-export default {
-  name: 'CreatePost',
-  mixins: [helpersMixin],
-  emits: ['sent', 'resized', 'clear-event'],
-  components: {
-    BaseUserAvatar,
-    BaseEmojiPicker,
-    BaseLinkForm,
-    BaseMessage,
-  },
-
-  props: {
-    messageMode: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    replyMode: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    event: {
-      type: Object,
-      required: false,
-      default: null
-    },
-    autoFocus: {
-      type: Boolean,
-      default: true
-    }
-  },
-
-  data() {
-    return {
-      text: '',
-      charLimit: 280,
-      sending: false,
-      toolSelected: '',
-      sendIconTranslation: 0,
-      tags: [],
-      mentionsUpdating: false,
-      focusInput() {
-        setTimeout(async () => {
-          await this.$nextTick()
-          this.textarea.focus()
-        }, 1)
-      },
-      trigger: 1,
-      links: [],
-      textareaRange: null,
-      // shortLong: 'short',
-      longForm: false,
-    }
-  },
-
-  watch: {
-    text(curr, prev) {
-      this.updateMentionsTags()
-    },
-    replyMode(curr, prev) {
-      if (curr !== prev) {
-        this.$emit('resized')
-        this.focusInput()
-      }
-    },
-    messageMode(curr, prev) {
-      if (curr !== prev) {
-        this.$emit('resized')
-        this.focusInput()
-      }
-    },
-  },
-
-  computed: {
-    postEntry() {
-      return this.$refs.postEntry.$el
-    },
-    textarea() {
-      return this.postEntry.querySelector('#input-editable')
-    },
-    readonlyTextarea() {
-      return this.postEntry.querySelector('#input-readonly')
-    },
-    readonlyHighlightTextarea() {
-      return this.postEntry.querySelector('#input-readonly-highlight')
-    },
-    placeholder() {
-      return this.postEntry.querySelector('#input-placeholder')
-    },
-    profileMentionsProvider() {
-      return this.createMentionsProvider()
-    },
-    postEntryWidth() {
-      return this.$refs.postEntry?.$el?.clientWidth
-    },
-    toolboxWidth() {
-      if (this.toolSelected) return this.$refs.toolbox?.$el?.clientWidth
-      return 0
-    },
-    emojiPerRow() {
-      if (this.toolboxWidth) return Math.floor((this.toolboxWidth - 10) / 25)
-      return 0
-    },
-    label() {
-      if (this.messageMode === 'reply') return "What's your reply?"
-      else if (this.messageMode) return "What's your message?"
-      else if (this.replyMode) {
-        if (this.replyMode === 'reply') return "What's your reply?"
-        else if (this.replyMode === 'quote') return "What's your thought?"
-      }
-      return "What's happening?"
-    },
-    placeholderText() {
-      if (this.text.length) return ''
-      else if (this.messageMode === 'reply') return 'Reply to message'
-      else if (this.messageMode) return "What's your message?"
-      else if (this.replyMode) {
-        if (this.replyMode === 'reply') return "What's your reply?"
-        else if (this.replyMode === 'quote') return "What's your thought on this?"
-      }
-      return "What's happening?"
-    },
-    textareaMentions() {
-      return this.mentions()
-    },
-    hashtags() {
-      if (this.text.length === 0) return []
-      const hashtagRegex = /#(?<i>[\w]{1,63})/g
-      let matches = this.text.matchAll(hashtagRegex)
-      let hashtags = []
-      for (let match of matches) {
-        hashtags.push(match.groups.i.toLowerCase())
-      }
-      return hashtags
-    },
-    caretRange() {
-      const isSupported = typeof window.getSelection !== 'undefined'
-      if (isSupported && this.trigger) {
-        const sel = window.getSelection()
-        if (sel.rangeCount !== 0) {
-          const range = sel.getRangeAt(0)
-          return range
-        }
-      }
-      return null
-    },
-  },
-
-  mounted() {
-    if (!this.messageMode) this.profileMentionsProvider.attach(this.textarea)
-    if (this.autoFocus) this.focusInput()
-    this.$emit('resized')
-  },
-
-  activated() {
-    // if (this.autoFocus) this.focusInput()
-  },
-
-  beforeUnmount() {
-    if (!this.messageMode) this.profileMentionsProvider.detach(this.textarea)
-    this.reset()
-    this.$emit('resized')
-  },
-
-  methods: {
-    updateText(e) {
-      this.trigger++
-      // if (e) this.text = e.target.textContent
-      // else this.text = this.textarea.textContent
-      this.text = this.textarea.textContent
-      this.textareaRange = this.caretRange
-      this.updateReadonlyInput()
-      if (!this.messageMode) this.updateReadonlyHightlightInput()
-    },
-
-    async send() {
-      if (!this.textValid()) {
-        console.log('text not valid')
-        return
-      }
-      if (this.sending) {
-        console.log('send already in progress')
-        return
-      }
-      this.toolSelected = ''
-      this.sending = true
-      this.animateSendIcon()
-      await this.extractMentions(this.textarea, this.tags)
-      let event
-      if (this.replyMode) event = await this.sendReply()
-      else if (this.messageMode) event = await this.sendMessage()
-      else event = await this.sendPost()
-      if (event) {
-        if (!this.messageMode) this.interpolateEventMentions(event)
-        this.reset()
-        this.$emit('sent', event)
-        if (!this.replyMode && !this.messageMode) this.toEvent(event.id)
-      }
-      this.sending = false
-    },
-
-    async sendPost() {
-      let tags = Object.values(this.mentions()).map(mention => mention.tag)
-      // let mentions = Object.assign({}, this.mentions())
-      let text = await this.formatMentionsForPublishing(tags)
-      // let text = this.formatMentionsForPublishing(this.text, tags, mentions)
-      this.appendHashtags(tags)
-      text = this.appendLinks(text)
-
-      // let tags = this.tags.map(([...v]) => [...v])
-      // console.log('sendPost:', tags, this.tags, text)
-      let event = await this.$store.dispatch('sendPost', {message: text, tags})
-      if (event) {
-        return event
-      }
-    },
-
-    async sendReply() {
-      // build tags
-      // let tags = []
-      if (this.replyMode === 'repost' && this.text) this.textarea.innerHTML = ''
-
-      // save copy of mentions and remove for now
-      // let mentions = Object.assign({}, this.mentions())
-      let tags = []
-      let textarea = this.textarea.cloneNode(true)
-
-      // remove invalid tags and/or not p/e
-      let usableTags = this.event.tags.filter(
-        ([t, v]) => (t === 'p' || t === 'e') && v
-      ).map(([...values]) => { return [...values] })
-
-      // add last 4 pubkeys mentioned
-      let pubkeys = usableTags.filter(([t, v]) => t === 'p').map(([_, v]) => v)
-      // console.log('pubkeys: ', pubkeys)
-      for (let i = 0; i < Math.min(4, pubkeys.length); i++) {
-        tags.push(await getPubKeyTagWithRelay(pubkeys[pubkeys.length - 1 - i]))
-      }
-      // plus the author of the note being replied to, if not present already
-      if (!tags.find(([_, v]) => v === this.event.pubkey)) {
-        tags.push(await getPubKeyTagWithRelay(this.event.pubkey))
-      }
-      // remove ourselves
-      tags = tags.filter(([_, v]) => v !== this.$store.state.keys.pub)
-        // console.log('tags: ', tags)
-      // add quoted/reposted event
-      if (this.replyMode === 'quote' || this.replyMode === 'repost') {
-        // if quote or repost, only tag this event and add mention to text
-        let last = await getEventIdTagWithRelay(this.event.id, 'mention')
-        tags.push(last)
-        // text += ` #[${tags.length - 1}]`
-        textarea.append(` #[${tags.length - 1}]`)
-      } else {
-        // add the first and the last events being replied to
-        let first = usableTags.find(([t, _, __, marker]) => t === 'e' && marker === 'root') || usableTags.find((tag) => tag[0] === 'e' && !tag[3])
-        if (!first && usableTags.filter(([t, _, __, marker]) => t === 'e' && marker === 'reply').length === 1)
-          first = usableTags.find(([t, _, __, marker]) => t === 'e' && marker === 'reply')
-        if (first) {
-          tags.push(await getEventIdTagWithRelay(first[1], 'root'))
-          tags.push(await getEventIdTagWithRelay(this.event.id, 'reply'))
-        } else {
-          tags.push(await getEventIdTagWithRelay(this.event.id, 'root'))
-        }
-      }
-
-      // let text = this.textarea.innerText
-      // let text = await this.formatMentionsForPublishing(tags)
-      let text = await this.formatMentionsForPublishing(tags, true, textarea)
-      this.appendHashtags(tags)
-      text = this.appendLinks(text)
-      // console.log('sendReply', {
-      //   message: text,
-      //   tags: tags
-      // })
-      publish(cleanEvent(this.event))
-      return await this.$store.dispatch('sendPost', {
-        message: text,
-        tags: tags
-      })
-    },
-
-    async sendMessage() {
-      let now = Math.round(Date.now() / 1000)
-      // let mentions = Object.assign({}, this.mentions())
-      let tags = []
-      // add the pubkey of the person we are messaging
-      if (!tags.find(([_, v]) => v === this.$route.params.pubkey)) {
-          tags.push(['p', this.$route.params.pubkey])
-      }
-      if (this.event && !tags.find(([_, v]) => v === this.event.id)) {
-          tags.push(await getEventIdTagWithRelay(this.event.id, 'mention'))
-          // tags.push(['e', this.event.id])
-      }
-      // this.tags = this.tags.filter(([_, v]) => v !== this.$store.state.keys.pub)
-      // let text = this.formatMentionsForPublishing(text, tags, mentions)
-      let text = await this.formatMentionsForPublishing(tags, false)
-      text = this.appendLinks(text)
-
-      // console.log('sendChatMessage', {
-      //   now,
-      //   pubkey: this.$route.params.pubkey,
-      //   text,
-      //   tags
-      // })
-      return await this.$store.dispatch('sendChatMessage', {
-        now,
-        pubkey: this.$route.params.pubkey,
-        text,
-        tags
-      })
-    },
-
-    // async extractMentions(text, tags) {
-    async extractMentions(el, tags) {
-      // const mentionRegex = /\B@(?<p>[a-f0-9]{64})\b/g
-      // const mentionRegex = /@((?<t>[a-z]{1}):{1})?(?<p>[a-f0-9]{64})\b/g
-      const mentionRegex = /(?<t>[@&]{1})(?<v>[a-f0-9]{64})\b/g
-      const textNodeTreeWalker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false)
-      let tagIndexMap = {}
-      let node = textNodeTreeWalker.nextNode()
-      while (node) {
-        let text = node.textContent
-        for (let match of text.matchAll(mentionRegex)) {
-          let type = null
-          if (match.groups.t === '&') type = 'e'
-          else if (match.groups.t === '@') type = 'p'
-          else return
-          let value = match.groups.v
-          let tagEntries = Object.entries(tags)
-          let idx = tagEntries
-            .map(([_, tag]) => tag)
-            .findIndex(([t, v]) => t === type && v === value)
-          if (idx !== -1) {
-            tagIndexMap[value] = tagEntries[idx][0]
-          } else {
-            if (type === 'e') {
-              let mention = `event${shorten(value)}`
-              tags[mention] = ['e', value]
-              tagIndexMap[value] = mention
-            } else {
-              let mention = `@${this.$store.getters.displayName(value)}`
-              tags[mention] = await getPubKeyTagWithRelay(value)
-              tagIndexMap[value] = mention
-            }
-          }
-        }
-
-        text = text.replace(
-          mentionRegex,
-          (_, __, value) => tagIndexMap[value]
-        )
-
-        node.textContent = text
-        node = textNodeTreeWalker.nextNode()
-      }
-    },
-
-
-    mentions(el = this.textarea) {
-      if (this.text.length === 0) return {}
-
-      let mentions = {}
-      const textNodeTreeWalker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false)
-      let node = textNodeTreeWalker.nextNode()
-      let nodeCnt = 0
-      while (node) {
-        for (let [key, tag] of Object.entries(this.tags)) {
-          const mentionAnchorRegex = new RegExp(`(?<i>${key})\\b`, 'g')
-          let matches = node.textContent.matchAll(mentionAnchorRegex)
-          for (let match of matches) {
-            if (this.tags[match.groups.i]) mentions[nodeCnt + '.' + match.index + '_' + match.groups.i] = {
-              el: node,
-              pos: match.index,
-              tag: Array.from(tag),
-              length: match.groups.i.length,
-            }
-          }
-        }
-        node = textNodeTreeWalker.nextNode()
-        nodeCnt++
-      }
-      return mentions
-    },
-
-    async formatMentionsForPublishing(tags, parseProfile = true, textarea = this.textarea.cloneNode(true)) {
-      // let textarea = this.textarea.cloneNode(true)
-      let mentions = this.mentions(textarea)
-      let last = { el: null, offset: null}
-      for (let key in mentions) {
-        let mention = mentions[key]
-        let idx = tags.findIndex(([t, v]) => t === mention.tag[0] && v === mention.tag[1])
-        // console.log('idx', idx)
-        if (idx === -1) {
-          let tag
-          if (mention.tag[0] === 'p' && parseProfile) tag = await getPubKeyTagWithRelay(mention.tag[1])
-          else if (mention.tag[0] === 'e') tag = await getEventIdTagWithRelay(mention.tag[1], 'mention')
-          if (tag) {
-            tags.push(tag)
-            idx = tags.length - 1
-          }
-        }
-        if (last.el && last.el !== mention.el) last.offset = 0
-        let offset = (last.el && last.el === mention.el) ? last.offset : 0
-        let range = new Range()
-        range.setStart(mention.el, mention.pos + offset)
-        range.setEnd(mention.el, mention.pos + mention.length + offset)
-        let newText = (mention.tag[0] === 'p' && !parseProfile) ? `@${mention.tag[1]}` : `#[${idx}]`
-        this.insertText(newText, range)
-        last = {
-          el: mention.el,
-          offset: newText.length - mention.length + last.offset || 0
-        }
-        // if (mention.tag[0] === 'p' && !parseProfile) {
-        //   this.insertText(`@${mention.tag[1]}`, range)
-        // } else this.insertText(`#[${idx}]`, range)
-      }
-      textarea.style.maxHeight = '0'
-      this.postEntry.appendChild(textarea)
-      let text = textarea.innerText
-      textarea.remove()
-      return text
-    },
-
-    async updateMentionsTags() {
-      this.trigger++
-      let { start } = this.startEndOfRange()
-      const mentionRegex = /(?<t>[@&]{1})(?<p>[a-f0-9]{64})/g
-      if (this.text.toLowerCase().match(mentionRegex)) {
-        this.mentionsUpdating = true
-        await this.extractMentions(this.textarea, this.tags)
-        if (start.el.nodeName === '#text' && start.pos > start.el.length)
-          this.setCaret(start.el, start.el.length)
-        else this.setCaret(start.el, start.pos)
-        this.updateText()
-        this.mentionsUpdating = false
-      }
-    },
-
-    startEndOfRange(range = this.caretRange) {
-      return {
-        start: {el: range.startContainer, pos: range.startOffset},
-        end: {el: range.endContainer, pos: range.endOffset}
-      }
-    },
-
-    insertText(insertedText, range = this.textareaRange) {
-      let { start, end } = this.startEndOfRange(range)
-      let text = start.el.textContent.slice(0, start.pos) + insertedText + end.el.textContent.slice(end.pos)
-      // let nextSibling = end.el.nextSibling
-      // while (nextSibling?.nodeName === '#text') {
-      //   text = text + nextSibling.textContent
-      //   let newNextSibling = nextSibling.nextSibling
-      //   nextSibling.remove()
-      //   nextSibling = newNextSibling
-      // }
-      if (!range.isCollapsed) {
-        range.deleteContents()
-        if (end.el !== start.el) end.el.remove()
-      }
-      if (start.el.nodeName === '#text') {
-        start.el.textContent = text
-        this.setCaret(start.el, start.pos + insertedText.length)
-      } else {
-        let textNode = document.createTextNode(text)
-        start.el.insertBefore(textNode, start.el.firstChild)
-        this.setCaret(textNode, insertedText.length)
-      }
-      this.updateText()
-    },
-
-    insertEmoji(emoji) {
-      this.trigger++
-      this.insertText(emoji.native)
-    },
-
-    animateSendIcon() {
-      let interval = setInterval(() => {
-        if (!this.sending) {
-          clearInterval(interval)
-          this.sendIconTranslation = 0
-          return
-        }
-        this.sendIconTranslation += 3
-        if (this.sendIconTranslation > 50) this.sendIconTranslation -= (this.postEntryWidth + 40)
-      }, 50)
-    },
-
-    closeTools() {
-      this.toolSelected = ''
-    },
-
-    toggleTool(tool) {
-      this.updateText()
-      if (this.toolSelected === tool) this.closeTools()
-      else this.toolSelected = tool
-    },
-
-    reset() {
-      this.closeTools()
-      this.text = ''
-      this.textarea.innerHTML = ''
-      this.readonlyTextarea.innerHTML = ''
-      this.readonlyHighlightTextarea.innerHTML = ''
-      this.tags = []
-      this.links = []
-      this.focusInput()
-    },
-
-    appendHashtags(tags) {
-      for (let hashtag of this.hashtags) {
-        if (!tags.find(([_, v]) => v === hashtag)) {
-          tags.push(['t', hashtag.toLowerCase()])
-        }
-      }
-    },
-
-    appendLinks(text) {
-      for (let link of this.links) {
-        if (link.name) text = text + `\n[${link.name}](${link.url})`
-        else text = text + `\n${link.url}`
-      }
-      return text
-    },
-
-    setCaret(el, pos) {
-      const isSupported = typeof window.getSelection !== 'undefined'
-      if (isSupported && el) {
-        const sel = window.getSelection()
-        const range = document.createRange()
-        sel.removeAllRanges()
-        range.selectNodeContents(el)
-        range.collapse(true)
-        // range.setEnd(el, 0)
-        range.setStart(el, pos)
-        sel.addRange(range)
-        this.focusInput()
-      }
-    },
-
-    addLink(link) {
-      this.links.push(link)
-    },
-
-    linkName(link) {
-      if (link.name) return `${link.name}: `
-      return ''
-    },
-
-    removeLink(index) {
-      this.links.splice(index, 1)
-    },
-
-    textareaFocus(e) {
-      const placeholder = this.placeholder
-      placeholder.style.opacity = '.3'
-    },
-
-    textareaBlur(e) {
-      const placeholder = this.placeholder
-      placeholder.style.opacity = '.6'
-    },
-
-    colorText(text) {
-      let span = document.createElement('span')
-      span.innerHTML = text
-      span.style.color = getPaletteColor('secondary')
-      return span
-    },
-
-    updateReadonlyInput() {
-      // update user and event text coloring
-      let readonlyTextareaHtml = this.textarea.innerHTML
-      let mentions = Object.assign({}, this.mentions())
-      for (let key in mentions) {
-        let [_, mentionText] = key.split('_')
-          const mentionAnchorRegex = new RegExp(`(?<i>${mentionText})\\b`, 'g')
-          readonlyTextareaHtml = readonlyTextareaHtml.replaceAll(
-            mentionAnchorRegex,
-            (_, value) => this.colorText(mentionText).outerHTML
-          )
-        }
-      this.readonlyTextarea.innerHTML = readonlyTextareaHtml
-    },
-
-    updateReadonlyHightlightInput() {
-      // update over char limit highlighting
-      if (this.overCharLimit()) {
-        this.readonlyHighlightTextarea.innerHTML = this.textarea.innerHTML
-        let { el, pos } = this.charPos(this.charLimit, this.readonlyHighlightTextarea)
-        let midword = el.length && el.length > pos
-        let highlightRange = new Range()
-        highlightRange.setStart(el, pos)
-        highlightRange.setEndAfter(this.readonlyHighlightTextarea.lastChild)
-        let highlightFragment = highlightRange.extractContents()
-        let htmlContent = [].map.call(highlightFragment.childNodes, (child, index) => {
-          if (index === 0 && midword) {
-            if (child.nodeName === '#text') return child.textContent
-            else return child.innerHTML
-          }
-          let span = document.createElement('span')
-          span.style.background = getPaletteColor('negative')
-          span.style.opacity = '.6'
-          span.innerHTML = child.innerHTML
-          child.innerHTML = span.outerHTML
-          return child.outerHTML
-        }).join('')
-
-        let span = document.createElement('span')
-        span.innerHTML = htmlContent
-        span.style.background = getPaletteColor('negative')
-        span.style.opacity = '.6'
-        let range = new Range()
-        range.setStart(el, pos)
-        range.collapse(true)
-        range.insertNode(span)
-      } else this.readonlyHighlightTextarea.innerHTML = ''
-    },
-
-    charPos(char, el = this.textarea) {
-    // Loop through all child nodes
-      for (var node of el.childNodes) {
-        if (node.nodeType === 3) { // we have a text node
-          if (node.length >= char) {
-              return { el: node, pos: char, char: -1 }
-          } else {
-              char -= node.length
-          }
-        } else {
-            let result = this.charPos(char, node)
-            if (result.char === -1) {
-                return result // no need to finish the for loop
-            } else char = result.char
-        }
-      }
-      return { char } // needed because of recursion stuff
-    },
-
-    // handlePaste(e) {
-    //   let clipboardData = e.clipboardData || e.originalEvent.clipboardData || window.clipboardData
-    //   let pastedText = clipboardData.getData('text/plain') || clipboardData.getData('Text')
-    //   let pastedTextNew = this.extractUrls(pastedText)
-    //   // console.log('pastedText', pastedText, 'pastedTextNew', pastedTextNew)
-    //   if (pastedText !== pastedTextNew) {
-    //     e.preventDefault()
-    //     this.trigger++
-    //     this.insertText(pastedTextNew)
-    //   }
-    // },
-
-    extractUrls(text) {
-      // eslint-disable-next-line no-useless-escape
-      // const urlRegex = /(?:(?:https?|ftp):\/\/|\b(?:[a-z\d]+\.))(?:(?:[^\s()<>]+|\((?:[^\s()<>]+|(?:\([^\s()<>]+\)))?\))+(?:\((?:[^\s()<>]+|(?:\(?:[^\s()<>]+\)))?\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))?/ig
-      const urlRegex = /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i
-
-      text = text.replace(
-        urlRegex,
-        (url) => {
-          this.addLink({ url })
-          return ''
-        }
-      )
-
-      return text
-    },
-    charLeft() {
-      return this.charLimit - this.text.length
-    },
-    overCharLimit() {
-      return this.charLeft() < 0
-    },
-    textValid() {
-      if (this.replyMode === 'repost') return true
-      if (this.links.length) return true
-      if (!this.text.length) return false
-      if (this.messageMode) return true
-      if (this.longForm) return true
-      if (this.overCharLimit()) return false
-      return true
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-@import "assets/theme/colors.scss";
-
-.create-post {
-  padding: 10px 1rem 0;
-  display: flex;
-  width: 100%;
-  border-bottom: $border-dark;
-  &-avatar {
-  }
-  &-content {
-    margin-left: 12px;
-    width: 100%;
-    .tweet-section {
-      width: 100%;
-      textarea {
-        appearance: none;
-        -webkit-appearance: none;
-        display: block;
-        padding: 12px;
-        font-size: 1.5rem;
-        resize: vertical;
-        background-color: transparent;
-        border: none;
-        width: 100%;
-        min-height: 5rem;
-        max-height: 10rem;
-        border-radius: 5px;
-        color: #fff;
-        &:focus {
-          border: none;
-          outline: none;
-        }
-      }
-      &-images {
-        display: flex;
-        padding: 1rem;
-        .image-container {
-          & + .image-container {
-            margin-left: 15px;
-          }
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          position: relative;
-          flex-grow: 1;
-          img {
-            width: 100%;
-          }
-          .close-button {
-            position: absolute;
-            background-color: rgba($color: $color-dark-gray, $alpha: 0.3);
-            top: 0;
-            right: 0;
-            cursor: pointer;
-            margin-top: 10px;
-            margin-right: 10px;
-            width: 2rem;
-            height: 2rem;
-            border-radius: 999px;
-            padding: 7px;
-            svg {
-              width: 100%;
-              height: 100%;
-              fill: #fff;
-            }
-          }
-        }
-      }
-    }
-    .controls {
-      border-top: $border-dark;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 10px 0;
-      &-media {
-        display: flex;
-        gap: 4px;
-        &-item {
-          width: 32px;
-          height: 32px;
-          border-radius: 999px;
-          cursor:pointer;
-          padding: 5px;
-          svg {
-            width: 100%;
-            fill: $color-primary
-          }
-          &:hover {
-            background-color: rgba($color: $color-primary, $alpha: 0.3);
-          }
-        }
-      }
-      &-submit {
-        button {
-          cursor: pointer;
-          background-color: $color-primary;
-          color: #fff;
-          font-weight: bold;
-          padding: 10px 16px;
-          outline: none;
-          border: none;
-          border-radius: 9999px;
-          &:disabled{
-            cursor: no-drop;
-            background-color: rgba($color: $color-primary, $alpha: 0.3);
-            color: rgba($color: #fff, $alpha: 0.3);
-          }
-        }
-      }
-    }
-  }
-}
-
-
-ul, li {
-  padding: 0;
-  margin: 0;
-}
-.post-entry-form {
-  overflow: visible;
-  display: flex;
-  flex-direction: column;
-}
-
-.char-left-label {
-}
-.over-limit {
-  font-size: .9rem;
-  line-height: .8rem;
-  color: $negative;
-}
-.toolbox {
-}
-.button-image,
-.button-emoji,
-.button-link,
-.button-close {
-  opacity: .6;
-}
-.button-image:hover,
-.button-emoji:hover,
-.button-link:hover,
-.button-close:hover {
-  opacity: 1;
-}
-
-
-.input-area {
-  position: relative;
-  overflow-y: auto;
-  font-size: 1rem;
-  outline: none;
-  border: none;
-  display: block;
-  //margin: .3rem 0 0;
-}
-.input-area::-webkit-scrollbar {
-  width: 0px;
-}
-.input-area #input-placeholder {
-  position: absolute;
-  pointer-events: none;
-  opacity: .5;
-  outline: none;
-  border: none;
-}
-.input-area #input-editable,
-.input-area #input-readonly,
-.input-area #input-readonly-highlight {
-  outline: none;
-  border: none;
-  min-height: 3rem;
-  width: 100%;
-  word-wrap: break-word;
-  word-break: break-word;
-}
-.input-area #input-editable {
-  display: block;
-  opacity: .99;
-  cursor: text;
-}
-.input-area #input-readonly {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 3;
-  color: transparent;
-  background: transparent;
-  pointer-events: none;
-}
-.input-area #input-readonly-highlight {
-  position: absolute;
-  top: 0;
-  left: 0;
-  color: transparent;
-  background: transparent;
-  pointer-events: none;
-}
-.q-tab-panel {
-  background: var(--q-background);
-}
-</style>
-
-<style lang='scss'>
-#tribute-wrapper ul {
-  list-style-type: none;
-}
-#tribute-wrapper .tribute-container {
-  width: 100%;
-}
-#tribute-wrapper .tribute-container .highlight {
-  background: rgba(0, 0, 0, 0.1);
-}
-.body--dark #tribute-wrapper .tribute-container .highlight {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-</style>
-
-
diff --git a/src/components/TheKeyInitializationDialog.vue b/src/components/TheKeyInitializationDialog.vue
deleted file mode 100644
index 930a590..0000000
--- a/src/components/TheKeyInitializationDialog.vue
+++ /dev/null
@@ -1,365 +0,0 @@
-<template>
-  <!-- <q-dialog persistent> -->
-  <!-- <div v-if="showKeyInitialization"> -->
-    <q-card class='relative-position full-width'>
-      <q-btn icon='close' size='md' flat round class='absolute-top-right z-top' @click='$emit("look-around")'/>
-      <h1 class="text-h6 q-pr-md">welcome to hamstr</h1>
-      <q-expansion-item
-        dense
-        expand-icon='help'
-        expanded-icon='expand_less'
-        class="intro no-padding full-width items-center"
-        header-class='items-center'
-      >
-        <template #header>
-          <span class='full-width'>click here to learn about Nostr, your keys, and how to use hamstr</span>
-        </template>
-        <BaseInformation/>
-        <span style='padding: .2rem 0 0 .2rem;'>note: after login this same information can be found in
-        the <strong>faq</strong> section at the bottom of the settings page</span>
-      </q-expansion-item>
-      <h2 class="text-subtitle2 q-pr-md">enter your key</h2>
-      <q-form @submit="proceed">
-        <q-card-section class="key-entry no-padding">
-          <q-btn-group spread unelevated>
-            <q-btn
-              size="sm"
-              color="primary"
-              label="public key"
-              :outline="!watchOnly"
-              :text-color="!watchOnly ? '' : 'dark'"
-              value="true"
-              @click="watchOnly = true"
-              :disable='isBech32Sec'
-            />
-            <q-btn
-              size="sm"
-              color="primary"
-              label="private key"
-              :outline="watchOnly"
-              :text-color="watchOnly ? '' : 'dark'"
-              value="false"
-              @click="watchOnly = false"
-              :disable='isBech32Pub'
-            />
-          </q-btn-group>
-          <q-input
-            v-model="key"
-            ref="keyInput"
-            bottom-slots
-            outlined
-            :label="watchOnly ? 'enter public key' : 'enter private key'"
-            dense
-          >
-            <template #hint>
-              <p v-if="!key && watchOnly">
-                entering public key means you will need to enter private key
-                each time you post content (either manually or by Nostr browser
-                extension)
-              </p>
-              <p v-if="!key && !watchOnly">
-                entering private key means hamstr will automatically sign with
-                your private key each time you post content
-              </p>
-              <p v-if="key && !isKeyValid">not a valid key</p>
-              <p v-if="isKeyValid">key is valid</p>
-            </template>
-            <template #append>
-              <q-btn
-                v-if="!isKeyValid"
-                size="sm"
-                color="primary"
-                outline
-                @click="generate"
-              >
-                generate keys
-              </q-btn>
-              <q-btn
-                v-if="hasExtension && !isKeyValid"
-                size="sm"
-                color="primary"
-                outline
-                @click="getFromExtension"
-              >
-                use public key from extension
-              </q-btn>
-              <q-btn
-                type="submit"
-                unelevated
-                size="sm"
-                color="positive"
-                :label="isKeyValid ? 'proceed' : ''"
-                icon-right="login"
-                style='color: var(--q-background) !important;'
-                @click="proceed"
-                :disabled="!isKeyValid"
-              ></q-btn>
-            </template>
-          </q-input>
-        </q-card-section>
-      <!-- <div v-if='isBech32Key(key)'>
-      {{ hexKey }}
-      </div> -->
-      </q-form>
-      <q-expansion-item
-        v-if='isKeyValid'
-        dense
-        dense-toggle
-        default-opened
-        id='bootstrap-relays'
-      >
-        <template #header>
-          <div class='full-width flex row no-wrap items-center'>
-            <h2 class="text-subtitle2 q-pr-md">enter bootstrap relays (optional)</h2>
-            <q-icon name='info'>
-              <q-tooltip>
-              the selected relays below will be queried to load your user profile, follows, and relay data from Nostr network.
-              please ensure the list of selected relays includes relays you publish your Nostr data to, otherwise hamstr may
-              not be able to find your data.
-              </q-tooltip>
-            </q-icon>
-          </div>
-        </template>
-        <div class='flex row justify-between no-wrap items-end' >
-          <span>selected relays</span>
-          <div class='flex row items-end' id='new-relay-input'>
-            <q-input v-model='newRelay' placeholder='add a relay...' input-style='padding: 0; width: 10rem;' @keypress.enter='addNewRelay' dense borderless/>
-            <q-btn icon='add' color='positive' size='sm' flat dense @click.stop='addNewRelay'/>
-          </div>
-        </div>
-        <BaseSelectMultiple>
-          <template #selected>
-            <pre class='relay-list' style='border: 1px solid var(--q-primary);'>
-              <li
-                v-for='(relay, index) in Object.keys(selectedRelays)'
-                :key='index + "-" + relay'
-                class='relay-item'
-                @click.stop='delete selectedRelays[relay]'
-              >
-                <div class='flex row justify-between no-wrap'>
-                  <span style='overflow: auto;'>{{relay}}</span>
-                  <q-icon name='remove' size='xs' color='negative'/>
-                </div>
-              </li>
-            </pre>
-          </template>
-          <template #options>
-            <div style='max-height: 6.75rem;'>
-            <pre class='relay-list' >
-              <li
-                v-for='(relay, index) in optionalRelays'
-                :key='index + "-" + relay'
-                class='relay-item'
-                @click.stop='selectedRelays[relay]={read: true, write:false}'
-              >
-                <div class='flex row justify-between no-wrap'>
-                  <span style='overflow: auto;'>{{relay}}</span>
-                  <q-icon name='add' size='xs' color='positive' flat/>
-                </div>
-              </li>
-            </pre>
-            </div>
-          </template>
-        </BaseSelectMultiple>
-      </q-expansion-item>
-      <div style='min-height: 1rem;'/>
-    </q-card>
-  <!-- </div> -->
-  <!-- </q-dialog> -->
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-import helpersMixin from '../utils/mixin'
-import { validateWords } from 'nostr-tools/nip06'
-import { generatePrivateKey } from 'nostr-tools'
-import { decode } from 'bech32-buffer'
-import BaseSelectMultiple from 'components/BaseSelectMultiple.vue'
-import BaseInformation from 'components/BaseInformation.vue'
-
-export default defineComponent({
-  name: 'TheKeyInitializationDialog',
-  mixins: [helpersMixin],
-  emits: ['look-around'],
-
-  components: {
-    BaseSelectMultiple,
-    BaseInformation,
-  },
-
-  setup() {
-    return {
-      focusKeyInput() {
-        this.$refs.keyInput.focus()
-      },
-    }
-  },
-
-  data() {
-    return {
-      watchOnly: false,
-      key: null,
-      hasExtension: false,
-      selectedRelays: this.$store.state.defaultRelays,
-      newRelay: '',
-    }
-  },
-
-  computed: {
-    icon() {
-      return document.getElementById('icon').href
-    },
-
-    // showKeyInitialization() {
-    //   if (['profile', 'event', 'hashtag', 'feed'].includes(this.$route.name)) return false
-    //   return true
-    // },
-
-    isKeyKey() {
-      if (this.isKey(this.hexKey)) return true
-      return false
-    },
-
-    isKeyValid() {
-      if (this.isKeyKey) return true
-      if (validateWords(this.key?.toLowerCase())) return true
-      return false
-    },
-
-    isKeyInvalid() {
-      return !this.isKeyValid
-    },
-
-    hexKey() {
-      // npub1xtscya34g58tk0z605fvr788k263gsu6cy9x0mhnm87echrgufzsevkk5s
-      // nsec1xtscya34g58tk0z605fvr788k263gsu6cy9x0mhnm87echrgufzs46ahj9
-      // 32e1827635450ebb3c5a7d12c1f8e7b2b514439ac10a67eef3d9fd9c5c68e245
-      if (this.isBech32Key(this.key)) {
-        return this.bech32ToHex(this.key)
-      }
-      return this.key?.toLowerCase()
-    },
-
-    isBech32Pub() {
-      if (this.isBech32Key(this.key)) {
-        let { prefix } = decode(this.key.toLowerCase())
-        return prefix === 'npub'
-      }
-      return false
-    },
-
-    isBech32Sec() {
-      if (this.isBech32Key(this.key)) {
-        let { prefix } = decode(this.key.toLowerCase())
-        return prefix === 'nsec'
-      }
-      return false
-    },
-
-    optionalRelays() {
-      let options = this.$store.state.optionalRelaysList.filter(relay => {
-        if (this.newRelay.length && !relay.toLowerCase().includes(this.newRelay.toLowerCase())) return false
-        if (this.selectedRelays[relay]) return false
-        return true
-      })
-      return options
-    }
-  },
-
-  async created() {
-    if (!this.$store.state.keys.pub) {
-      // keys not set up, offer the option to try to get a pubkey from window.nostr
-      setTimeout(() => {
-        if (window.nostr) {
-          this.hasExtension = true
-        }
-      }, 1000)
-    }
-  },
-
-  methods: {
-    async getFromExtension() {
-      try {
-        this.key = await window.nostr.getPublicKey()
-        this.watchOnly = true
-        this.focusKeyInput()
-      } catch (err) {
-        this.$q.notify({
-          message: `Failed to get a public key from a Nostr extension: ${err}`,
-          color: 'warning',
-        })
-      }
-    },
-
-    generate() {
-      this.key = generatePrivateKey()
-      this.watchOnly = false
-      this.focusKeyInput()
-    },
-
-    proceed() {
-      let key = this.hexKey
-
-      var keys = {}
-      if (validateWords(key)) {
-        keys.mnemonic = key
-      } else if (this.isKey(key)) {
-        if (this.watchOnly) keys.pub = key
-        else keys.priv = key
-      } else {
-        console.warn('Proceed called with invalid key', key)
-      }
-
-      this.$store.commit('setDefaultRelays', this.selectedRelays)
-      this.$store.dispatch('initKeys', keys)
-      this.$store.dispatch('launch')
-      this.initializeKeys = false
-      this.$router.push({
-        name: 'settings',
-        params: { initUser: true },
-      })
-    },
-
-    addNewRelay() {
-      if (this.newRelay && this.newRelay.length) this.selectedRelays[this.newRelay] = {read: true, write: false}
-      this.newRelay = ''
-    }
-  },
-})
-</script>
-
-<style lang='css' scoped>
-.q-card {
-  background: var(--q-background);
-  padding: 1rem;
-}
-</style>
-
-<style lang='css'>
-.relay-list {
-  column-width: 15rem;
-  column-gap: .5rem;
-  width: 100%;
-  min-height: 1px;
-  font-size: .8rem;
-  white-space: nowrap;
-  padding: 0 .5rem;
-  border-radius: .5rem;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-.relay-item {
-  overflow: auto;
-}
-#new-relay-input {
-   background: rgba(0, 0, 0, 0.05);
-   border-radius: .3rem;
-   padding: 0 0 0 .5rem;
-}
-.body--dark #new-relay-input {
-   background: rgba(255, 255, 255, 0.08);
-}
-#new-relay-input .q-field--dense .q-field__control {
-  height: 1.4rem !important;
-}
-</style>
diff --git a/src/components/TheToolbar.vue b/src/components/TheToolbar.vue
deleted file mode 100644
index 446b49b..0000000
--- a/src/components/TheToolbar.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <q-toolbar>
-        <q-btn dense flat round icon='menu' @click='toggleLeftDrawer' />
-        <q-toolbar-title class='flex justify-center'>hamstr</q-toolbar-title>
-        <q-btn dense flat round icon='groups' @click='toggleRightDrawer' />
-      </q-toolbar>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  name: 'TheToolbar',
-
-  setup() {
-    const leftDrawerOpen = ref(false)
-    const rightDrawerOpen = ref(false)
-
-    return {
-      leftDrawerOpen,
-      rightDrawerOpen,
-      toggleLeftDrawer() {
-        leftDrawerOpen.value = !leftDrawerOpen.value
-      },
-      toggleRightDrawer() {
-        rightDrawerOpen.value = !rightDrawerOpen.value
-      },
-    }
-  }
-})
-</script>
diff --git a/src/components/TheUserMenu.vue b/src/components/TheUserMenu.vue
deleted file mode 100644
index 9d9efa0..0000000
--- a/src/components/TheUserMenu.vue
+++ /dev/null
@@ -1,291 +0,0 @@
-<template>
-  <q-list
-    :class='compactMode ? "flex row no-wrap justify-around items-center full-width" : "text-right"'
-    :dense='compactMode'
-  >
-    <q-item
-      v-if='$store.state.keys.pub'
-      class='col no-padding flex items-center'
-      :class="compactMode ? 'justify-center' : 'justify-end'"
-      clickable
-      @click='toProfile($store.state.keys.pub)'
-    >
-      <BaseUserCard
-        v-if='!compactMode'
-        :pubkey='$store.state.keys.pub'
-        :align-right='true'
-        :wrap='true'
-        class='gt-sm'
-      />
-      <BaseUserAvatar
-        v-if='!compactMode'
-        :pubkey="$store.state.keys.pub"
-        :align-right='true'
-        :show-verified='true'
-        size='lg'
-        class='q-mr-sm lt-md'
-      />
-      <BaseUserAvatar
-        v-if='$store.state.keys.pub && compactMode'
-        :pubkey="$store.state.keys.pub"
-        :align-right='true'
-        size='1.5rem'
-      />
-    </q-item>
-    <!-- <q-separator v-if='!compactMode' color='accent' spaced/> -->
-    <div v-if='!compactMode' style='min-height: 1rem;'/>
-    <q-item
-      v-for='item in filteredUserMenuItems'
-      clickable
-      class='menu-item'
-      :dense='compactMode'
-      :style='compactMode ? "" : "min-height: 2.75rem;"'
-      :active="($route.name === item.title || $route.path.split('/')[1] === item.title)"
-      active-class=''
-      @click='(event) => handleClick(event, item)'
-      :key='item.title'
-      :class="(($route.name === item.title || $route.path.split('/')[1] === item.title) ? 'menu-item-active text-accent ' : '') +
-        (compactMode ? 'no-margin no-padding col' : 'self-end q-px-none')"
-    >
-      <q-item-section v-if='!compactMode' class='gt-sm text-uppercase' style='font-size: 1rem;'>
-        <div>
-          {{ $t(item.title) }}
-        </div>
-      </q-item-section>
-
-      <q-item-section
-        v-if="item.icon && !compactMode"
-        avatar
-        class="relative-position no-padding"
-        style="min-width: 2.5rem;"
-      >
-        <q-icon outline :name="item.icon"/>
-        <!-- <q-badge
-          v-if="item.badge && $store.getters[item.badge]"
-          color="secondary"
-          floating
-          class='q-mr-md text-bold'
-          outline
-        >
-          {{ $store.getters[item.badge] }}
-        </q-badge> -->
-        <q-badge
-          v-if="item.title === 'notifications' && $store.state.unreadNotifications"
-          color="secondary"
-          floating
-          class='q-mr-md text-bold'
-          outline
-        >
-          {{ $store.state.unreadNotifications }}
-        </q-badge>
-        <q-badge
-          v-if="item.title === 'messages' && $store.getters.unreadChats"
-          color="secondary"
-          floating
-          class='q-mr-md text-bold'
-          outline
-        >
-          {{ $store.getters.unreadChats }}
-        </q-badge>
-      </q-item-section>
-
-      <div
-        v-if="item.icon && compactMode"
-        avatar
-        class="q-mx-auto no-padding relative-position"
-      >
-        <q-icon :name="item.icon" size='sm'/>
-        <q-badge
-          v-if="item.badge && $store.getters[item.badge]"
-          color="secondary"
-          floating
-          rounded
-          style='margin-top: .2rem; margin-left: .1rem;'
-        />
-      </div>
-    </q-item>
-    <!-- <q-separator v-if='!compactMode' color='accent' spaced/> -->
-    <div v-if='!compactMode' style='min-height: 1rem;'/>
-      <div
-        color="primary"
-        class='flex '
-        :class='compactMode ? "col justify-center" : "q-my-md justify-end"'
-      >
-        <BaseButtonPost
-          v-if='$store.state.keys.pub'
-          :is-open='posting'
-          :verbose='true'
-          @open="$emit('toggle-post-entry')"
-          :outline='!compactMode'
-          :flat='compactMode'
-          color='primary'
-          :size='compactMode ? "sm" : "lg"'
-          :class='compactMode ? "" : "q-px-sm"'
-        />
-        <BaseButtonSetUser
-          v-if='!$store.state.keys.pub'
-          @click='(event) => handleClick(event, {title: "set-user"})'
-          :verbose='true'
-          :outline='!compactMode'
-          :flat='compactMode'
-          color='primary'
-          :size='compactMode ? "sm" : "lg"'
-          :class='compactMode ? "" : "q-px-sm"'
-        />
-      </div>
-    <!-- <q-dialog
-      v-model='post'
-      seamless
-      position='bottom'
-      transition-show='slide-up'
-      transition-hide='slide-down'
-    >
-      <q-card unelevated class='flex column no-wrap post-entry relative-position'
-      >
-        <div class='absolute-top-right'>
-          <q-btn class='z-top' icon="close" flat dense v-close-popup/>
-        </div>
-        <BasePostEntry class='q-pa-md' @sent='post = false'/>
-        <div class='compact-user-menu-space'/>
-      </q-card>
-    </q-dialog> -->
-    <!-- <input type='color' /> -->
-  </q-list>
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-import helpersMixin from '../utils/mixin'
-import BaseUserCard from 'components/BaseUserCard.vue'
-import BaseButtonPost from 'components/BaseButtonPost.vue'
-import BaseButtonSetUser from 'components/BaseButtonSetUser.vue'
-
-export default defineComponent({
-  name: 'TheUserMenu',
-  mixins: [helpersMixin],
-  emits: ['toggle-post-entry', 'scroll-to-rect', 'set-user'],
-  props: {
-    iconMode: {
-      type: Boolean,
-      default: false
-    },
-    compactMode: {
-      type: Boolean,
-      default: false,
-    },
-    showCompactModeItems: {
-      type: Boolean,
-      default: false
-    },
-    posting: {
-      type: Boolean,
-      required: true
-    }
-  },
-
-  data() {
-    return {
-      // isOpen: this.posting,
-      // position: 'bottom',
-      userMenuItems: [
-        {
-          title: 'feed',
-          icon: 'newspaper',
-          to: '/',
-          match: 'feed',
-        },
-        {
-          title: 'notifications',
-          badge: 'unreadNotifications',
-          icon: 'notifications',
-          to: '/notifications',
-          match: 'notifications',
-        },
-        {
-          title: 'messages',
-          badge: 'unreadChats',
-          icon: 'mail_lock',
-          to: '/messages/inbox',
-          match: 'messages',
-        },
-        {
-          title: 'settings',
-          icon: 'settings',
-          to: '/settings',
-          match: 'settings',
-        },
-        {
-          title: 'follow',
-          icon: 'search',
-          to: '/follow',
-          match: 'follow',
-          compactMenuOnly: true,
-        },
-      ],
-    }
-  },
-
-  components: {
-    BaseUserCard,
-    BaseButtonPost,
-    BaseButtonSetUser,
-  },
-
-  computed: {
-    filteredUserMenuItems() {
-      if (!this.$store.state.keys.pub) return this.userMenuItems.filter(item => item.title === 'feed')
-      if (!this.compactMode && !this.showCompactModeItems) return this.userMenuItems.filter(item => !item.compactMenuOnly)
-      return this.userMenuItems
-    },
-    // isOpen() {
-    //   return this.posting
-    // }
-  },
-
-  methods: {
-    handleClick(event, item) {
-      if (item.title === 'set-user') {
-        this.$emit('scroll-to-rect', {top: 0})
-        this.$emit('set-user')
-        return
-      }
-      if (item.title === 'feed' && this.$route.name === 'feed') {
-        event.preventDefault()
-        this.$emit('scroll-to-rect', {top: 0})
-      } else this.$router.push(item.to)
-    }
-  }
-})
-</script>
-
-<style lang='css' scoped>
-.q-item {
-  transition: all .2s ease-in-out
-}
-.menu-item {
- letter-spacing: .1rem;
- opacity: .7;
-}
-.menu-item:hover {
-  opacity: 1;
-  font-weight: bold;
-}
-.menu-item-active {
-  color: var(--q-accent);
-  opacity: 1;
-  font-weight: bold;
-}
-.q-dialog .post-entry {
-  width: 600px;
-  overflow: auto;
-}
-.compact-user-menu-space {
-  height: 2rem;
-}
-
-@media screen and (min-width: 700px) {
-  .compact-user-menu-space {
-    display: none;
-  }
-}
-</style>
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
deleted file mode 100644
index 8cd772a..0000000
--- a/src/pages/IndexPage.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <q-page class="flex column justify-center items-center">
-    <img
-      alt="astral logo"
-      src="~assets/astral-logo.svg"
-      style="width: 200px; height: 200px;"
-    >
-    <TheKeyInitializationDialog v-if='!$store.state.keys.pub' />
-  </q-page>
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-import TheKeyInitializationDialog from 'components/TheKeyInitializationDialog.vue'
-
-export default defineComponent({
-  name: 'IndexPage',
-  components: {
-    TheKeyInitializationDialog,
-  },
-})
-</script>
-
-<style lang='css' scoped>
-/*.q-page {
-  background-image: url("~assets/astral-logo.svg");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-}*/
-</style>