From 0a293ca354a03df6486a3170d3c9b54c8d812637 Mon Sep 17 00:00:00 2001
From: Jonathan Staab <shtaab@gmail.com>
Date: Tue, 28 Feb 2023 09:18:03 -0600
Subject: [PATCH] Tweak side nav buttons, profile detail buttons

---
 package-lock.json                    |   2 +-
 package.json                         |   2 +-
 src/views/SideNav.svelte             |  24 +++---
 src/views/person/PersonDetail.svelte | 114 +++++++++++++++++++++------
 4 files changed, 103 insertions(+), 39 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bdb134ae..d27befb9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "qr-scanner": "^1.4.2",
         "qrcode": "^1.5.1",
         "ramda": "^0.28.0",
+        "svelte": "^3.55.1",
         "svelte-check": "^3.0.3",
         "svelte-link-preview": "^0.3.3",
         "svelte-loading-spinners": "^0.3.4",
@@ -43,7 +44,6 @@
         "eslint": "^8.33.0",
         "eslint-plugin-svelte3": "^4.0.0",
         "postcss": "^8.4.19",
-        "svelte": "^3.52.0",
         "tailwindcss": "^3.2.4",
         "typescript": "^4.9.5",
         "vite": "^3.2.3",
diff --git a/package.json b/package.json
index 29ee6341..112d7c5a 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
     "eslint": "^8.33.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "postcss": "^8.4.19",
-    "svelte": "^3.52.0",
     "tailwindcss": "^3.2.4",
     "typescript": "^4.9.5",
     "vite": "^3.2.3",
@@ -43,6 +42,7 @@
     "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.1",
     "ramda": "^0.28.0",
+    "svelte": "^3.55.1",
     "svelte-check": "^3.0.3",
     "svelte-link-preview": "^0.3.3",
     "svelte-loading-spinners": "^0.3.4",
diff --git a/src/views/SideNav.svelte b/src/views/SideNav.svelte
index 23802b96..46e1e50f 100644
--- a/src/views/SideNav.svelte
+++ b/src/views/SideNav.svelte
@@ -38,7 +38,7 @@
   </li>
   <li class="cursor-pointer relative">
     <a class="block px-4 py-2 hover:bg-accent transition-all" href="/alerts">
-      <i class="fa-solid fa-bell mr-2" /> Alerts
+      <i class="fa fa-inbox mr-2" /> Inbox
       {#if $newAlerts}
       <div class="w-2 h-2 rounded bg-accent absolute top-3 left-6" />
       {/if}
@@ -47,18 +47,18 @@
   {/if}
   <li class="cursor-pointer">
     <a class="block px-4 py-2 hover:bg-accent transition-all" href="/search/people">
-      <i class="fa-solid fa-search mr-2" /> Search
+      <i class="fa fa-search mr-2" /> Search
     </a>
   </li>
   <li class="cursor-pointer">
     <a class="block px-4 py-2 hover:bg-accent transition-all" href="/notes/follows">
-      <i class="fa-solid fa-tag mr-2" /> Notes
+      <i class="fa fa-rss mr-2" /> Feed
     </a>
   </li>
   {#if $profile}
   <li class="cursor-pointer relative">
     <a class="block px-4 py-2 hover:bg-accent transition-all" href="/messages">
-      <i class="fa-solid fa-envelope mr-2" /> Messages
+      <i class="fa fa-envelope mr-2" /> Messages
       {#if $newDirectMessages}
       <div class="w-2 h-2 rounded bg-accent absolute top-2 left-7" />
       {/if}
@@ -66,7 +66,7 @@
   </li>
   <li class="cursor-pointer relative">
     <a class="block px-4 py-2 hover:bg-accent transition-all" href="/chat">
-      <i class="fa-solid fa-comment mr-2" /> Chat
+      <i class="fa fa-comment mr-2" /> Chat
       {#if $newChatMessages}
       <div class="w-2 h-2 rounded bg-accent absolute top-2 left-7" />
       {/if}
@@ -76,7 +76,7 @@
   <li class="h-px mx-3 my-4 bg-medium" />
   <li class="cursor-pointer relative">
     <a class="block px-4 py-2 hover:bg-accent transition-all" href="/relays">
-      <i class="fa-solid fa-server mr-2" /> Relays
+      <i class="fa fa-server mr-2" /> Relays
       {#if $slowConnections.length > 0}
       <div class="w-2 h-2 rounded bg-accent absolute top-2 left-8" />
       {/if}
@@ -85,30 +85,30 @@
   {#if $profile}
   <li class="cursor-pointer">
     <a class="block px-4 py-2 hover:bg-accent transition-all" href="/keys">
-      <i class="fa-solid fa-key mr-2" /> Keys
+      <i class="fa fa-key mr-2" /> Keys
     </a>
   </li>
   <li class="cursor-pointer">
     <a class="block px-4 py-2 hover:bg-accent transition-all" href="/settings">
-      <i class="fa-solid fa-gear mr-2" /> Settings
+      <i class="fa fa-gear mr-2" /> Settings
     </a>
   </li>
   <li class="cursor-pointer">
     <a class="block px-4 py-2 hover:bg-accent transition-all" href="/logout">
-      <i class="fa-solid fa-right-from-bracket mr-2" /> Logout
+      <i class="fa fa-right-from-bracket mr-2" /> Logout
     </a>
   </li>
   {:else}
   <li class="cursor-pointer">
     <a class="block px-4 py-2 hover:bg-accent transition-all" href="/login">
-      <i class="fa-solid fa-right-to-bracket mr-2" /> Login
+      <i class="fa fa-right-to-bracket mr-2" /> Login
     </a>
   </li>
   {/if}
   {#if import.meta.env.VITE_SHOW_DEBUG_ROUTE === 'true'}
   <li class="cursor-pointer">
     <a class="block px-4 py-2 hover:bg-accent transition-all" href="/debug">
-      <i class="fa-solid fa-bug mr-2" /> Debug
+      <i class="fa fa-bug mr-2" /> Debug
     </a>
   </li>
   {/if}
@@ -116,7 +116,7 @@
   <li
     class="cursor-pointer px-4 py-2 hover:bg-accent transition-all"
     on:click={install}>
-    <i class="fa-solid fa-rocket mr-2" /> Install
+    <i class="fa fa-rocket mr-2" /> Install
   </li>
   {/if}
 </ul>
diff --git a/src/views/person/PersonDetail.svelte b/src/views/person/PersonDetail.svelte
index b923b3e7..a95ff88c 100644
--- a/src/views/person/PersonDetail.svelte
+++ b/src/views/person/PersonDetail.svelte
@@ -2,7 +2,7 @@
   import {last} from 'ramda'
   import {onMount} from 'svelte'
   import {tweened} from 'svelte/motion'
-  import {fly} from 'svelte/transition'
+  import {fly, fade} from 'svelte/transition'
   import {navigate} from 'svelte-routing'
   import {log} from 'src/util/logger'
   import {renderContent} from 'src/util/html'
@@ -35,6 +35,7 @@
   let followersCount = tweened(0, {interpolate, duration: 1000})
   let person = database.getPersonWithFallback(pubkey)
   let loading = true
+  let showActions = false
 
   $: following = $petnamePubkeys.includes(pubkey)
 
@@ -70,6 +71,16 @@
     })
   })
 
+  const toggleActions = () => {
+    showActions = !showActions
+  }
+
+  const makeGetTransition = () => {
+    let i = 0
+
+    return () => ({y: 20, delay: i++ * 30})
+  }
+
   const setActiveTab = tab => navigate(routes.person(pubkey, tab))
 
   const showFollows = () => {
@@ -101,6 +112,8 @@
   }
 </script>
 
+<svelte:window on:click={() => { showActions = false }} />
+
 <div
   class="absolute w-full h-64"
   style="z-index: -1;
@@ -110,12 +123,12 @@
           url('{person.kind0?.banner}')" />
 
 <Content>
-  <div class="flex gap-4" in:fly={{y: 20}}>
+  <div class="flex gap-4">
     <div
       class="overflow-hidden w-16 h-16 sm:w-32 sm:h-32 rounded-full bg-cover bg-center shrink-0 border border-solid border-white"
       style="background-image: url({person.kind0?.picture})" />
     <div class="flex flex-col gap-4 flex-grow">
-      <div class="flex justify-between items-center gap-4">
+      <div class="flex justify-between items-start gap-4">
         <div class="flex-grow flex flex-col gap-2">
           <div class="flex items-center gap-2">
             <h1 class="text-2xl">{displayPerson(person)}</h1>
@@ -127,29 +140,80 @@
           </div>
           {/if}
         </div>
-        <div class="whitespace-nowrap flex gap-3 items-center flex-wrap">
-          {#if user.getPubkey() === pubkey && $canPublish}
-          <Anchor href="/profile"><i class="fa-solid fa-edit" /> Edit profile</Anchor>
-          {:else if $canPublish}
-            <Anchor type="button-circle" on:click={openAdvanced}>
-              <i class="fa fa-sliders" />
-            </Anchor>
-            <Anchor type="button-circle" href={`/messages/${npub}`}>
-              <i class="fa fa-envelope" />
-            </Anchor>
+        <div class="whitespace-nowrap flex gap-3 flex-wrap relative">
+          <div on:click|stopPropagation={toggleActions} class="px-5 py-2 cursor-pointer">
+            <i class="fa fa-ellipsis-vertical" />
+          </div>
+          {#if showActions}
+          {@const getTransition = makeGetTransition()}
+          <div class="absolute top-0 right-0 mt-12 flex flex-col gap-2 opacity-90">
+            <div
+              class="absolute inset-0 bg-black rounded-full"
+              style="filter: blur(15px)"
+              transition:fade />
+            <div
+              class="flex gap-2 justify-end items-center z-10 cursor-pointer"
+              transition:fly={getTransition()}
+              on:click={share}>
+              <div class="text-light">Share</div>
+              <Anchor type="button-circle">
+                <i class="fa fa-share-nodes" />
+              </Anchor>
+            </div>
+            {#if following}
+            <div
+              class="flex gap-2 justify-end items-center z-10 cursor-pointer"
+              transition:fly={getTransition()}
+              on:click={unfollow}>
+              <div class="text-light">Unfollow</div>
+              <Anchor type="button-circle">
+                <i class="fa fa-user-minus" />
+              </Anchor>
+            </div>
+            {:else if user.getPubkey() !== pubkey}
+            <div
+              class="flex gap-2 justify-end items-center z-10 cursor-pointer"
+              transition:fly={getTransition()}
+              on:click={follow}>
+              <div class="text-light">Follow</div>
+              <Anchor type="button-circle">
+                <i class="fa fa-user-plus" />
+              </Anchor>
+            </div>
+            {/if}
+            {#if $canPublish}
+            <div
+              class="flex gap-2 justify-end items-center z-10 cursor-pointer"
+              transition:fly={getTransition()}
+              on:click={() => navigate(`/messages/${npub}`)}>
+              <div class="text-light">Message</div>
+              <Anchor type="button-circle">
+                <i class="fa fa-envelope" />
+              </Anchor>
+            </div>
+            <div
+              class="flex gap-2 justify-end items-center z-10 cursor-pointer"
+              transition:fly={getTransition()}
+              on:click={openAdvanced}>
+              <div class="text-light">Advanced</div>
+              <Anchor type="button-circle">
+                <i class="fa fa-sliders" />
+              </Anchor>
+            </div>
+            {/if}
+            {#if user.getPubkey() === pubkey}
+            <div
+              class="flex gap-2 justify-end items-center z-10 cursor-pointer"
+              transition:fly={getTransition()}
+              on:click={() => navigate("/profile")}>
+              <div class="text-light">Edit</div>
+              <Anchor type="button-circle">
+                <i class="fa fa-edit" />
+              </Anchor>
+            </div>
+            {/if}
+          </div>
           {/if}
-          {#if following}
-          <Anchor type="button-circle" on:click={unfollow}>
-            <i class="fa fa-user-minus" />
-          </Anchor>
-          {:else if user.getPubkey() !== pubkey}
-          <Anchor type="button-circle" on:click={follow}>
-            <i class="fa fa-user-plus" />
-          </Anchor>
-          {/if}
-          <Anchor type="button-circle" on:click={share}>
-            <i class="fa fa-share-nodes" />
-          </Anchor>
         </div>
       </div>
       <p>{@html renderContent(person?.kind0?.about || '')}</p>