* Fix UserAvatar / UserName click-through

* Feed scroll to highlight (somewhat broken)
* Mobile layout optimizations

src/components/BaseUserAvatar.vue

@@ -1,7 +1,7 @@
 <template>
   <q-avatar
     :size="size"
-    @click.stop="clickable && toProfile(pubkey)"
+    @click="clickable && toProfile(pubkey)"
     class="relative-position"
     :class="{'cursor-pointer': clickable}"
   >

src/components/BaseUserName.vue

@@ -3,7 +3,7 @@
     class="username"
     :class="{'two-line': wrap, clickable}"
   >
-    <a @click.stop="clickable && toProfile(pubkey)">
+    <a @click="clickable && toProfile(pubkey)">
       <span
         v-if="$store.getters.name(pubkey)"
         class="name"

src/components/MainMenu/MenuItem.vue

@@ -44,7 +44,7 @@ export default {
       default: true
     }
   },
-  emits: ['mobile-menu-close'],
+  emits: ['click'],
 }
 </script>
 

src/components/PageHeader.vue

@@ -7,18 +7,25 @@
     >
       <base-icon icon="back" />
     </div>
-    <h2>{{ title || titleFromRoute() || 'Home' }}</h2>
-    <span v-if="subline">{{ subline }}</span>
+    <div :class="{'profile-info': !!subline}">
+      <h2>{{ title || titleFromRoute() || 'Home' }}</h2>
+      <span v-if="subline">{{ subline }}</span>
+    </div>
+    <div class="logo">
+      <Logo />
+    </div>
   </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue'
 import BaseIcon from 'components/BaseIcon/index.vue'
+import Logo from 'components/Logo.vue'
 
 export default defineComponent({
   name: 'PageHeader',
   components: {
+    Logo,
     BaseIcon
   },
   props: {
@@ -45,7 +52,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import 'assets/theme/colors.scss';
+@import "assets/theme/colors.scss";
+@import "assets/variables.scss";
 
 .page-header {
   padding: 1rem;
@@ -86,5 +94,24 @@ export default defineComponent({
       font-size: 12px;
     }
   }
+  .logo {
+    display: none;
+  }
+}
+
+@media screen and (max-width: $phone) {
+  .page-header {
+    .logo {
+      display: block;
+      position: absolute;
+      height: 36px;
+      width: 36px;
+      left: calc(50% - 18px);
+      svg {
+        height: inherit;
+        width: inherit;
+      }
+    }
+  }
 }
 </style>

src/components/Post/ListPost.vue

@@ -8,7 +8,7 @@
       <div class="connector-top">
         <div v-if="connectorTop" class="connector-line"></div>
       </div>
-      <BaseUserAvatar :pubkey="post.author" />
+      <BaseUserAvatar :pubkey="post.author" @click.stop />
       <div class="connector-bottom">
         <div v-if="connectorBottom" class="connector-line"></div>
       </div>
@@ -16,7 +16,7 @@
     <div class="post-content">
       <div class="post-content-header">
         <p>
-          <BaseUserName :pubkey="post.author" />
+          <BaseUserName :pubkey="post.author" @click.stop />
           <span>&#183;</span>
           <span class="created-at">{{ moment(post.createdAt).fromNow() }}</span>
         </p>

src/layouts/MainLayout.vue

@@ -11,29 +11,10 @@
         <q-page-container ref="pageContainer">
           <router-view v-slot="{ Component }">
             <keep-alive :include="['Feed', 'Messages', 'Notifications']">
-              <component :is="Component" :key="$route.path" :looking-around="lookingAround" @scroll-to-rect="scrollToRect" @reply-event="setReplyEvent"/>
+              <component :is="Component" :key="$route.path" @scroll-to-rect="scrollToRect" />
             </keep-alive>
           </router-view>
         </q-page-container>
-
-        <!-- <div v-if="postEntryOpen || messageMode" id="post-entry" unelevated class="gt-xs flex column align-self relative-position"> -->
-        <div v-if="($q.screen.width >= 600) && postEntryOpen" id="post-entry" unelevated class="gt-xs flex column align-self relative-position">
-          <!-- <q-separator color="primary"/> -->
-          <!-- <q-btn v-if="!messageMode" icon="close" flat dense @click="togglePostEntry" class="self-end" style="position: absolute; top: 0; right: 0; z-index: 1;"/> -->
-          <q-btn icon="close" flat dense @click="togglePostEntry" class="self-end" style="position: absolute; top: 0; right: 0; z-index: 1;"/>
-            <!-- :message-mode="messageMode" -->
-          <BasePostEntry
-            :event="replyEvent"
-            @clear-event="replyEvent=null"
-            @sent="togglePostEntry"
-            class="q-px-md q-pt-sm"
-          />
-        </div>
-
-        <div id="bottom-drawer-placeholder" />
-        <!-- <div id="bottom-post-entry-placeholder" />
-        <div id="bottom-message-entry-placeholder" />
-        <div id="bottom-menu-placeholder" /> -->
       </div>
 
       <div class="layout-sidebar">
@@ -105,8 +86,7 @@ export default defineComponent({
 
   computed: {
     scrollingContainer() {
-      if (this.$q.screen.width < 600) return window
-      return this.$refs.pageContainer?.$el
+      return window
     },
     messageMode() {
       if (this.$route.name === 'messages') {
@@ -116,7 +96,6 @@ export default defineComponent({
     }
   },
 
-  // beforeCreate() {
   created() {
     this.loadPreferences()
   },
@@ -170,26 +149,9 @@ export default defineComponent({
       setVerticalScrollPosition(this.scrollingContainer, 0, 500)
     },
 
-    back() {
-      this.$router.go(-1)
-    },
-
-    forward() {
-      this.$router.go(1)
-    },
-
-    moveFab(ev) {
-      this.draggingFab = ev.isFirst !== true && ev.isFinal !== true
-
-      this.fabPos = [
-        this.fabPos[0] - ev.delta.x,
-        this.fabPos[1] + ev.delta.y
-      ]
-    },
-
     scrollToRect(rect) {
-      let offset = Math.max(rect.top, 0)
-      setVerticalScrollPosition(this.scrollingContainer, offset, 500)
+      let offset = Math.max(rect.top, 0) - 78
+      setVerticalScrollPosition(this.scrollingContainer, offset, 0)
     },
 
     async launch() {

src/pages/Feed.vue

@@ -2,7 +2,7 @@
   <q-page>
     <PageHeader />
 
-    <PostEditor v-if="$store.getters.isSignedIn" />
+    <PostEditor class="post-editor" v-if="$store.getters.isSignedIn" />
 
     <div class="tabs">
       <q-tabs
@@ -260,6 +260,7 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
 @import "assets/theme/colors.scss";
+@import "assets/variables.scss";
 
 .tabs {
   border-top: $border-dark;
@@ -292,4 +293,10 @@ export default defineComponent({
   }
 }
 
+@media screen and (max-width: $phone) {
+  .post-editor {
+    display: none;
+  }
+}
+
 </style>

src/pages/Thread.vue

@@ -14,7 +14,7 @@
       />
     </div>
 
-    <q-item ref="main" class='no-padding column'>
+    <q-item ref="main" class="no-padding column">
       <HeroPost
         v-if="event"
         :event="event"
@@ -26,7 +26,6 @@
       <div v-else>
         {{ $t('event') }} {{ $route.params.eventId }}
       </div>
-<!--      <BaseRelayList v-if="event?.seen_on?.length" :event='event' class='q-px-sm'/>-->
     </q-item>
 
     <div v-if="childrenThreadsFiltered.length">
@@ -34,20 +33,20 @@
         <Thread :events="thread" @add-event='processChildEvent'/>
       </div>
     </div>
-    <div style='min-height: 30vh;'/>
+
+    <div style="min-height: 70vh;" />
   </q-page>
 </template>
 
 <script>
-import { defineComponent, nextTick } from 'vue'
+import {defineComponent} from 'vue'
+import {createMetaMixin, scroll} from 'quasar'
+import PageHeader from 'components/PageHeader.vue'
+import Thread from 'components/Post/Thread.vue'
+import HeroPost from 'components/Post/HeroPost.vue'
 import {dbStreamEvent, dbStreamTagKind} from '../query'
 import helpersMixin from '../utils/mixin'
 import {addToThread} from '../utils/threads'
-//import BaseRelayList from 'components/BaseRelayList.vue'
-import PageHeader from 'components/PageHeader.vue'
-import { createMetaMixin } from 'quasar'
-import Thread from 'components/Post/Thread.vue'
-import HeroPost from 'components/Post/HeroPost.vue'
 
 const metaData = {
   // sets document title
@@ -69,7 +68,6 @@ export default defineComponent({
     HeroPost,
     Thread,
     PageHeader,
-    //BaseRelayList
   },
 
   data() {
@@ -120,7 +118,7 @@ export default defineComponent({
         }
         this.useProfile(event.pubkey)
       }, true)
-      this.subAncestorsChildren()
+      await this.subAncestorsChildren()
     },
 
     stop() {
@@ -168,13 +166,14 @@ export default defineComponent({
         let prevAncestor = event
         while (prevAncestor) {
           this.ancestors = [prevAncestor].concat(this.ancestors)
-          this.scrollToMainEvent()
           this.useProfile(prevAncestor.pubkey)
           currAncestor = prevAncestor
           prevAncestorId = currAncestor.interpolated.replyEvents[currAncestor.interpolated.replyEvents.length - 1]
           prevAncestor = this.ancestorsSeen.get(prevAncestorId)
         }
       }
+
+      this.scrollToMainEvent()
     },
 
     processChildEvent(event) {
@@ -188,10 +187,10 @@ export default defineComponent({
     },
 
     scrollToMainEvent() {
-      nextTick(() => {
-        let mainRect = this.$refs.main?.$el.getBoundingClientRect()
-        this.$emit('scroll-to-rect', mainRect)
-      })
+      setTimeout(() => {
+        const offset = this.$refs.main?.$el.getBoundingClientRect().top - 78
+        scroll.setVerticalScrollPosition(document.scrollingElement, offset, 0)
+      }, 500)
     },
 
     addEventAncestors(event) {