Add hover state to note buttons

CHANGELOG.md

@@ -15,6 +15,7 @@
 - [x] Add new thread view
 - [x] Removed profile popover, click on a person's name to find mute and follow buttons
 - [x] Add configurable imgproxy url
+- [x] Show hover state on icon buttons
 
 # 0.2.35
 

ROADMAP.md

@@ -1,5 +1,6 @@
 # Current
 
+- [ ] Put profile image on top right with a profile-related menu
 - [ ] Re-work note media
   - [ ] Add webcam image/video capture
   - [ ] Show list of media that can be viewed/removed below post
@@ -22,6 +23,7 @@
 
 # Core
 
+- [ ] Put chat in window
 - [ ] Private groups
 - [ ] Superfollow?
 - [ ] Make joined status interoperable, and persistent across logins

src/app/shared/NoteActions.svelte

@@ -115,7 +115,7 @@
         "pointer-events-none opacity-50": disableActions,
       })}
       on:click={reply.start}>
-      <i class="fa fa-reply cursor-pointer" />
+      <i class="fa fa-reply cursor-pointer transition-transform hover:scale-110" />
       {$repliesCount}
     </button>
     <button
@@ -125,7 +125,7 @@
       })}
       on:click={() => (like ? deleteReaction(like) : react("+"))}>
       <i
-        class={cx("fa fa-heart cursor-pointer", {
+        class={cx("fa fa-heart cursor-pointer transition-transform hover:scale-110", {
           "fa-beat fa-beat-custom": like,
         })} />
       {$likesCount}
@@ -137,7 +137,7 @@
           "text-accent": zap,
         })}
         on:click={startZap}>
-        <i class="fa fa-bolt cursor-pointer" />
+        <i class="fa fa-bolt cursor-pointer transition-transform hover:scale-110" />
         {formatSats($zapsTotal)}
       </button>
     {/if}

src/app/shared/PersonName.svelte

@@ -4,19 +4,13 @@
   import {Directory, user} from "src/app/engine"
 
   export let pubkey
-  export let inert = false
 
   const profile = Directory.profiles.key(pubkey).derived(defaultTo({pubkey}))
   const following = user.followsSet.derived(s => s.has(pubkey))
 </script>
 
-<div
-  class={cx("flex items-center gap-2 group/PersonName", $$props.class)}>
-  <span class={cx({
-    "duration-600 transition-all border-b border-solid border-transparent group-hover/PersonName:border-gray-3": !inert,
-  })}>
-    {Directory.displayProfile($profile)}
-  </span>
+<div class={cx("flex items-center gap-2", $$props.class)}>
+  <span>{Directory.displayProfile($profile)}</span>
   {#if $following}
     <i class="fa fa-user-check text-xs text-accent" />
   {/if}

src/app/shared/PersonSummary.svelte

@@ -24,7 +24,7 @@
   <Anchor on:click={inert ? null : showDetail} class="flex gap-4">
     <PersonCircle size={14} {pubkey} />
     <div class="mr-16 flex flex-grow flex-col gap-1">
-      <PersonName inert class="text-lg" {pubkey} />
+      <PersonName class="text-lg" {pubkey} />
       <PersonHandle {pubkey} />
     </div>
   </Anchor>

src/app/views/ChatDetail.svelte

@@ -52,7 +52,7 @@
     }
   })
 
-  $: picture = Settings.imgproxy($channel.picture, {w: 48, h: 48})
+  $: picture = Settings.imgproxy($channel.picture, {w: 96, h: 96})
 
   document.title = $channel.name || "Coracle Chat"
 </script>

src/app/views/ChatListItem.svelte

@@ -11,7 +11,7 @@
   const enter = () => navigate(`/chat/${nip19.noteEncode(channel.id)}`)
   const join = () => user.joinChannel(channel.id)
   const leave = () => user.leaveChannel(channel.id)
-  const picture = Settings.imgproxy(channel.picture, {w: 56, h: 56})
+  const picture = Settings.imgproxy(channel.picture, {w: 112, h: 112})
 </script>
 
 <button

src/app/views/PersonDetail.svelte

@@ -55,7 +55,7 @@
     <div class="flex flex-grow flex-col gap-4">
       <div class="flex items-start justify-between gap-4">
         <div class="flex flex-grow flex-col gap-2">
-          <PersonName inert class="text-2xl" {pubkey} />
+          <PersonName class="text-2xl" {pubkey} />
           <PersonHandle {pubkey} />
         </div>
         <PersonActions {pubkey} />

src/partials/ImageCircle.svelte

@@ -5,7 +5,7 @@
   export let src: string
   export let size = 4
 
-  const url = Settings.imgproxy(src, {w: size * 4, h: size * 4})
+  const url = Settings.imgproxy(src, {w: size * 20, h: size * 20})
 </script>
 
 <div