Add sign-in buttons to main menu and sidebar

src/components/BaseButtonLoadMore.vue

@@ -36,8 +36,9 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .load-more button {
   width: 100%;
+  padding: 1rem 0;
 }
 </style>

src/components/MainMenu/MainMenu.vue

@@ -45,6 +45,10 @@
     </div>
 
     <ProfilePopup v-if="$store.getters.isSignedIn" />
+    <div v-else class="sign-in" @click="signIn">
+      <q-icon class="icon" name="login" size="sm" />
+      <div class="label">Log in</div>
+    </div>
 
     <div
       class="mobile-close-menu-button"
@@ -89,6 +93,10 @@ export default {
     createPost() {
       this.$emit('mobile-menu-close')
       this.$store.dispatch('createPost')
+    },
+    signIn() {
+      this.$emit('mobile-menu-close')
+      this.$store.dispatch('signIn', {}).catch(() => {})
     }
   }
 }
@@ -149,6 +157,26 @@ menu {
   .mobile-close-menu-button {
     display: none;
   }
+  .sign-in {
+    display: flex;
+    align-items: center;
+    margin: 0 1rem 1rem;
+    padding: 1rem;
+    cursor: pointer;
+    border-radius: 999px;
+    transition: 120ms ease-in-out;
+    &:hover {
+      background-color: rgba($color: $color-dark-gray, $alpha: 0.3);
+    }
+    .icon {
+      padding: 2px;
+    }
+    .label {
+      margin-left: 20px;
+      font-weight: bold;
+      font-size: 1.2em;
+    }
+  }
 }
 
 @media screen and (max-width: $tablet) and (min-width: $phone) {
@@ -167,6 +195,11 @@ menu {
         fill: #fff;
       }
     }
+    .sign-in {
+      .label {
+        display: none;
+      }
+    }
   }
 }
 

src/components/MainMenu/ProfilePopup.vue

@@ -34,7 +34,7 @@
         </div>
         <hr class="popup-spacing">
         <div class="popup-body">
-          <div class="popup-body-item" @click="$store.dispatch('signIn').catch(() => {})" v-close-popup>
+          <div class="popup-body-item" @click="$store.dispatch('signIn', {}).catch(() => {})" v-close-popup>
             <p>Add an account</p>
           </div>
           <hr class="popup-spacing">
@@ -96,15 +96,15 @@ export default {
   margin-bottom: 1rem;
   margin-right: 1rem;
   padding: .5rem 1rem;
-  cursor: pointer !important;
+  cursor: pointer;
   border-radius: 999px;
   transition: 120ms ease-in-out;
+  &:hover {
+    background-color: rgba($color: $color-dark-gray, $alpha: 0.3);
+  }
   &-wrapper {
     position: relative;
   }
-  &:hover {
-    background-color: rgba($color: $color-primary, $alpha: 0.3);
-  }
   &-pic {
     padding: 2px;
     img {

src/components/PageHeader.vue

@@ -63,7 +63,7 @@ export default defineComponent({
   position: sticky;
   top: 0;
   background-color: $color-bg;
-  z-index: 1001;
+  z-index: 500;
   h2 {
     line-height: 50px;
     margin: 0;

src/components/Sidebar/WelcomeBox.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="welcome" v-if="!$store.getters.isSignedIn">
+    <div class="welcome-header">
+      <h3>New to Nostr?</h3>
+    </div>
+    <div class="welcome-content">
+      <button class="btn btn-primary" @click="signUp">Create Account</button>
+      <button class="btn" @click="signIn">Log in</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WelcomeBox',
+  methods: {
+    signUp() {
+      this.$store.dispatch('signIn', {fragment: 'sign-up'}).catch(() => {})
+    },
+    signIn() {
+      this.$store.dispatch('signIn', {fragment: 'sign-in'}).catch(() => {})
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "assets/theme/colors.scss";
+
+.welcome {
+  background-color: rgba($color: $color-dark-gray, $alpha: 0.1);
+  border-radius: 1rem;
+  margin-bottom: 1rem;
+  &-header {
+    padding: 1rem;
+    h3 {
+      margin: 0;
+      font-size: 1.4rem;
+      color: #fff;
+    }
+  }
+  &-content {
+    border-top: $border-dark;
+    padding: 1rem;
+    button {
+      width: 100%;
+      padding: .5rem;
+      &:first-child {
+        margin-bottom: 1rem;
+      }
+    }
+  }
+}
+
+</style>

src/components/SignIn/SignInDialog.vue

@@ -1,8 +1,24 @@
 <template>
-  <q-dialog v-model="$store.state.signInDialogOpen" @hide="onClose">
+  <q-dialog v-model="$store.state.signInDialogOpen" @before-show="updateFragment" @hide="onClose">
     <div class="sign-in-dialog">
-      <q-btn v-if="fragment === 'welcome'" icon="close" size="md" flat round class="icon" v-close-popup />
-      <q-btn v-else-if="fragment !== 'complete'" icon="arrow_back" size="md" flat round class="icon" @click="fragment = 'welcome'" />
+      <q-btn
+        v-if="showClose"
+        icon="close"
+        size="md"
+        class="icon"
+        flat
+        round
+        v-close-popup
+      />
+      <q-btn
+        v-if="showBack"
+        @click="fragment = 'welcome'"
+        icon="arrow_back"
+        size="md"
+        class="icon"
+        flat
+        round
+      />
 
       <div class="logo">
         <BaseUserAvatar v-if="pubkey" :pubkey="pubkey" />
@@ -57,6 +73,16 @@ export default {
     return {
       fragment: 'welcome',
       pubkey: null,
+      backAllowed: true,
+    }
+  },
+  computed: {
+    showClose() {
+      return this.fragment === 'welcome'
+        || (this.fragment !== 'complete' && !this.backAllowed)
+    },
+    showBack() {
+      return this.fragment !== 'complete' && !this.showClose
     }
   },
   methods: {
@@ -81,6 +107,10 @@ export default {
       this.pubkey = pubkey
       this.fragment = 'complete'
     },
+    updateFragment() {
+      this.fragment = this.$store.state.signInDialogFragment || 'welcome'
+      this.backAllowed = this.fragment === 'welcome'
+    }
   },
 }
 </script>

src/components/Trends/index.vue

@@ -47,7 +47,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'assets/theme/colors.scss';
+@import "assets/theme/colors.scss";
 
 .trends {
   background-color: rgba($color: $color-dark-gray, $alpha: 0.1);
@@ -58,7 +58,7 @@ export default {
     padding: 1rem;
     h3 {
       margin: 0;
-      font-size: 1.5rem;
+      font-size: 1.4rem;
       color: #fff;
     }
   }

src/layouts/MainLayout.vue

@@ -3,7 +3,7 @@
     <div class="layout" @click="mobileMenuOpen = false">
       <div class="layout-menu">
         <div class="layout-menu-fixed" :class="{active: mobileMenuOpen}">
-          <MainMenu @click.stop @mobile-menu-close="mobileMenuOpen = false" />
+          <MainMenu @click.stop @mobile-menu-close="mobileMenuOpen = false" hide-items-requiring-sign-in />
         </div>
       </div>
 
@@ -20,6 +20,7 @@
       <div class="layout-sidebar">
         <div class="layout-sidebar-fixed">
           <SearchBox />
+          <WelcomeBox />
           <Trends />
         </div>
       </div>
@@ -48,11 +49,13 @@ import Trends from 'components/Trends/index.vue'
 import BaseIcon from 'components/BaseIcon/index.vue'
 import SignInDialog from 'components/SignIn/SignInDialog.vue'
 import CreatePostDialog from 'components/CreatePost/CreatePostDialog.vue'
+import WelcomeBox from 'components/Sidebar/WelcomeBox.vue'
 import { setCssVar, getCssVar } from 'quasar'
 
 export default defineComponent({
   name: 'MainLayout',
   components: {
+    WelcomeBox,
     CreatePostDialog,
     SignInDialog,
     BaseIcon,

src/pages/Feed.vue

@@ -268,7 +268,7 @@ export default defineComponent({
   position: sticky;
   top: 78px;
   background-color: $color-bg;
-  z-index: 1001;
+  z-index: 500;
 }
 
 .q-page::-webkit-scrollbar {
@@ -280,11 +280,6 @@ export default defineComponent({
 }
 
 .feed {
-  > .load-more {
-    button {
-      padding: 1rem 0;
-    }
-  }
   > .load-more:first-child {
     border-bottom: $border-dark;
   }

src/store/actions.js

@@ -444,10 +444,10 @@ export async function useNip05(store, {metadata}) {
 
 // --------
 
-export async function signIn(store) {
+export async function signIn(store, {fragment}) {
   return new Promise((resolve, reject) => {
     console.assert(!store.state.signInDialogOpen)
-    store.commit('openSignInDialog', {resolve, reject})
+    store.commit('openSignInDialog', {resolve, reject, fragment})
   })
 }
 

src/store/mutations.js

@@ -173,15 +173,17 @@ export function setUnreadMessages(state, {peer, count}) {
   state.unreadMessages[peer] = count
 }
 
-export function openSignInDialog(state, {resolve, reject}) {
+export function openSignInDialog(state, {resolve, reject, fragment}) {
   state.signInSuccess = resolve
   state.signInFailure = reject
+  state.signInDialogFragment = fragment
   state.signInDialogOpen = true
 }
 
 export function dismissSignInDialog(state) {
   state.signInSuccess = null
   state.signInFailure = null
+  state.signInDialogFragment = null
   state.signInDialogOpen = false
 }
 

src/store/state.js

@@ -102,6 +102,7 @@ export default function () {
     accounts: LocalStorage.getItem('accounts') || {}, // { pubkey: { secret } }
 
     signInDialogOpen: false,
+    signInDialogFragment: null,
     signInSuccess: null,
     signInFailure: null,