feat: add voting animations, close #155

package.json

@@ -1,6 +1,6 @@
 {
   "name": "photon-lemmy",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "private": true,
   "scripts": {
     "dev": "vite dev",

src/lib/components/lemmy/post/PostFeed.svelte

@@ -8,6 +8,7 @@
   import { fly } from 'svelte/transition'
 
   export let posts: PostView[]
+  export let community: boolean = false
 </script>
 
 <div
@@ -40,7 +41,7 @@
             delay: index < 4 ? index * 100 : 0,
           }}
         >
-          <Post view={$userSettings.view} bind:post />
+          <Post hideCommunity={community} view={$userSettings.view} bind:post />
         </div>
       {/if}
     {/each}

src/lib/components/lemmy/post/PostVote.svelte

@@ -1,18 +1,31 @@
 <script lang="ts">
   import FormattedNumber from '$lib/components/util/FormattedNumber.svelte'
   import type { Post } from 'lemmy-js-client'
-  import { ChevronDown, ChevronUp, Icon } from 'svelte-hero-icons'
+  import { ChevronDown, ChevronUp, Icon, Key } from 'svelte-hero-icons'
   import { profile } from '$lib/auth.js'
   import { vote as voteItem } from '$lib/lemmy/contentview.js'
-  import { Button } from 'mono-svelte'
+  import { Button, toast } from 'mono-svelte'
   import { site } from '$lib/lemmy.js'
+  import { fly } from 'svelte/transition'
 
   export let post: Post
   export let vote: number = 0
   export let score: number
 
+  let oldScore = score
+
   const voteColor = (vote: number, border: boolean = false) =>
     vote == 1 ? `!text-blue-500` : vote == -1 ? `!text-red-500` : ''
+
+  const castVote = async (newVote: number) => {
+    if (!$profile?.jwt) {
+      toast({ content: 'You must be logged in to vote.', type: 'warning' })
+      return
+    }
+    oldScore = score
+    vote = newVote
+    score = await voteItem(post, newVote, $profile.jwt)
+  }
 </script>
 
 <slot {vote} {score}>
@@ -23,35 +36,35 @@
     <Button
       aria-label="Upvote"
       class={vote == 1 ? voteColor(vote) : ''}
-      on:click={async () => {
-        if (!$profile?.jwt) return
-        vote = vote == 1 ? 0 : 1
-        score = await voteItem(post, vote, $profile.jwt)
-      }}
+      on:click={async () => castVote(vote == 1 ? 0 : 1)}
       size="square-sm"
       color="tertiary"
       alignment="center"
     >
       <Icon src={ChevronUp} mini size="18" />
     </Button>
     <span
-      class="font-medium transition-colors duration-200 {voteColor(vote)}"
+      class="font-medium transition-colors duration-200 grid {voteColor(vote)}"
       class:hidden={$profile?.user?.local_user_view.local_user.show_scores ==
         false}
     >
-      <FormattedNumber number={score} />
+      {#key score}
+        <span
+          in:fly={{ y: score > oldScore ? 4 : -4, duration: 200 }}
+          out:fly={{ y: score > oldScore ? -4 : 4, duration: 200 }}
+          style="grid-column: 1; grid-row: 1;"
+        >
+          <FormattedNumber number={score} />
+        </span>
+      {/key}
     </span>
     <Button
       aria-label="Downvote"
       class="{vote == -1 ? voteColor(vote) : ''} {$site?.site_view.local_site
         .enable_downvotes
         ? ''
         : 'pointer-events-none opacity-50'}"
-      on:click={async () => {
-        if (!$profile?.jwt) return
-        vote = vote == -1 ? 0 : -1
-        score = await voteItem(post, vote, $profile.jwt)
-      }}
+      on:click={async () => castVote(vote == -1 ? 0 : -1)}
       size="square-sm"
       color="tertiary"
     >

src/routes/c/[name]/+page.svelte

@@ -81,7 +81,7 @@
         </Button>
       </div>
     </div>
-    <PostFeed posts={data.posts.posts} />
+    <PostFeed community={true} posts={data.posts.posts} />
 
     <Pageination
       page={data.page}