Make "show new notes" button fixed position

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.2.17
+
+- [x] Make "show new notes" button fixed position
+- [x] Gray out buttons that don't work when logged in with pubkey
+
 ## 0.2.16
 
 - [x] Add search by nip05 (@fiatjaf)

ROADMAP.md

@@ -1,9 +1,7 @@
 # Current
 
-- [ ] Gray out messages tab when using pubkey login
 - [ ] Collapse relaycard and relaycardsimple?
 - [ ] Create my own version of nostr.how and extension explanation
-- [ ] Make new notes thing on feeds fixed position
 
 - [ ] Review sampleRelays, seems like we shouldn't be shuffling
 - [ ] Go over onboarding process, suggest some good relays for newcomers

src/routes/PersonDetail.svelte

@@ -46,13 +46,13 @@
     if (showActions) {
       actions.push({onClick: share, label: "Share", icon: "share-nodes"})
 
-      if (following) {
-        actions.push({onClick: unfollow, label: "Unfollow", icon: "user-minus"})
-      } else if (user.getPubkey() !== pubkey) {
-        actions.push({onClick: follow, label: "Follow", icon: "user-plus"})
-      }
-
       if ($canPublish) {
+        if (following) {
+          actions.push({onClick: unfollow, label: "Unfollow", icon: "user-minus"})
+        } else if (user.getPubkey() !== pubkey) {
+          actions.push({onClick: follow, label: "Follow", icon: "user-plus"})
+        }
+
         actions.push({
           onClick: () => navigate(`/messages/${npub}`),
           label: "Message",

src/views/SideNav.svelte

@@ -73,7 +73,11 @@
         {/if}
       </a>
     </li>
-    <li class="relative cursor-pointer">
+    <li
+      class={cx("relative", {
+        "cursor-pointer": $canPublish,
+        "pointer-events-none opacity-75": !$canPublish,
+      })}>
       <a class="block px-4 py-2 transition-all hover:bg-accent" href="/chat">
         <i class="fa fa-comment mr-2" /> Chat
         {#if $newChatMessages}

src/views/feed/Feed.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {partition, always, propEq, uniqBy, sortBy, prop} from "ramda"
-  import {slide} from "svelte/transition"
+  import {fly} from "svelte/transition"
   import {quantify} from "hurdak/lib/hurdak"
   import {createScroller, now, Cursor} from "src/util/misc"
   import {asDisplayEvent, mergeFilter} from "src/util/nostr"
@@ -30,8 +30,9 @@
   const loadBufferedNotes = () => {
     // Drop notes at the end if there are a lot
     notes = uniqBy(prop("id"), notesBuffer.concat(notes).slice(0, maxNotes))
-
     notesBuffer = []
+
+    document.body.scrollIntoView({behavior: "smooth"})
   }
 
   const onChunk = async newNotes => {
@@ -117,12 +118,14 @@
 
 <Content size="inherit" class="pt-6">
   {#if notesBuffer.length > 0}
-    <button
-      in:slide
-      class="cursor-pointer text-center text-light underline"
-      on:click={loadBufferedNotes}>
-      Load {quantify(notesBuffer.length, "new note")}
-    </button>
+    <div class="fixed left-0 top-0 z-10 mt-20 flex w-full justify-center">
+      <button
+        in:fly={{y: 20}}
+        class="cursor-pointer rounded-full border border-solid border-accentl bg-accent py-2 px-4 text-center shadow-lg transition-colors hover:bg-accentl"
+        on:click={loadBufferedNotes}>
+        Load {quantify(notesBuffer.length, "new note")}
+      </button>
+    </div>
   {/if}
 
   <div class="flex flex-col gap-4">

src/views/notes/Note.svelte

@@ -54,7 +54,7 @@
   let visibleNotes = []
   let showRelays = false
 
-  const {profile} = user
+  const {profile, canPublish} = user
   const timestamp = formatTimestamp(note.created_at)
   const borderColor = invertColors ? "medium" : "dark"
   const links = extractUrls(note.content)
@@ -395,7 +395,10 @@
               {/if}
             </div>
             <div class="flex justify-between text-light">
-              <div class="flex">
+              <div
+                class={cx("flex", {
+                  "pointer-events-none opacity-75": !$canPublish,
+                })}>
                 <button class="w-16 text-left" on:click|stopPropagation={startReply}>
                   <i class="fa fa-reply cursor-pointer" />
                   {$repliesCount}

tailwind.config.cjs

@@ -15,6 +15,7 @@ module.exports = {
       black: "#0f0f0e",
       white: "#FFFCF2",
       accent: "#EB5E28",
+      accentl: "#EE7648",
       light: "#CCC5B9",
       shimmer: "#544e46",
       medium: "#403D39",