add feature: scroll into comment

src/lib/components/CommentSection.svelte

@@ -2,9 +2,10 @@
 
   import {getImageURL, formatDate} from '$lib/utils';
   import toast from 'svelte-french-toast';
-  import { userRegion, commentAdded, commentIdDeleted, screenWidth, replyCommentClicked, editCommentClicked } from '$lib/store';
+  import { userRegion, commentAdded, commentIdDeleted, screenWidth, replyCommentClicked, editCommentClicked, scrollToComment } from '$lib/store';
   import TextEditor from '$lib/components/TextEditor.svelte';
   import { marked } from 'marked';
+  import { tick } from 'svelte';
   
   export let moderators
   export let comment;
@@ -18,6 +19,7 @@ export let upvoteCounter;
 export let downvoteCounter;
 export let userAlreadyVoted;
 
+
 if (userAlreadyVoted) {
   upvoteButtonClicked = comment?.expand['alreadyVoted(comment)']?.find(item => item?.user === data?.user?.id)?.type === 'upvote';
   downvoteButtonClicked = comment?.expand['alreadyVoted(comment)']?.find(item => item?.user === data?.user?.id)?.type === 'downvote';
@@ -254,6 +256,18 @@ const handleDownvote = async (event) => {
   $replyCommentClicked[comment?.id] = false
   $editCommentClicked[comment?.id] = false
 
+
+  $: if ($scrollToComment?.length !== 0 && typeof window !== 'undefined') {
+    // Wait for the DOM to update
+    tick().then(() => {
+      const commentElement = document.getElementById($scrollToComment);
+      if (commentElement) {
+        commentElement.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: "center"});
+      }
+    });
+  }
+
+
   /*
   $: {
     if($commentAdded?.length !== 0) {
@@ -309,10 +323,10 @@ const handleDownvote = async (event) => {
   
   
         </div>
-        <div class="text-md text-slate-400 mb-1 pl-7 pt-3 whitespace-pre-wrap w-11/12">
+        <div class="text-md text-slate-400 mb-1 pl-5 pt-3 whitespace-pre-wrap w-11/12 sm:w-5/6 ">
   
             
-            <div class="text-sm text-[#D7DADC] whitespace-pre-line {repeatedCharacters(comment?.comment) === true ? 'break-all' : ''}">
+            <div id={comment?.id} class="text-sm text-[#D7DADC] rounded-lg {comment?.id === $scrollToComment ? 'pt-3 pl-3 pr-3 mb-5 bg-[#31304D]' : ''} whitespace-pre-line {repeatedCharacters(comment?.comment) === true ? 'break-all' : ''}">
               {#if !$editCommentClicked[comment?.id]}
               {@html addClassesToHtml(marked(comment?.comment))}
               {:else}

src/lib/store.ts

@@ -32,6 +32,7 @@ export const secFilingsClicked = writable(<boolean>(false));
 export const discordMembers = writable(<Number> (308));
 
 export const newAvatar = writable(<string> (""));
+
 export const displayCompanyName = writable(<string> (""));
 export const currentPrice = writable(<number> (0));
 export const currentPortfolioPrice = writable(<number> (0));
@@ -89,6 +90,7 @@ export const commentIdDeleted = writable(<string> (""));
 export const postIdDeleted = writable(<string> (""));
 export const commentAdded = writable(<string> (""));
 export const commentUpdated = writable(<string> (""));
+export const scrollToComment = writable(<string> (""));
 
 
 export const searchBarData = writable([]);

src/routes/+page.svelte

@@ -120,7 +120,7 @@ onMount( async() => {
 
 
 
-  <div class=" m-auto flex flex-wrap flex-col justify-center items-center md:flex-row">
+  <div class=" m-auto flex flex-wrap flex-col justify-center items-center md:flex-row px-5">
     <!--Left Col-->
 
     
@@ -415,7 +415,7 @@ onMount( async() => {
             </td>
 
             <td class="text-white border-b border-[#202020]">
-              {item?.name?.length > 30 ? item?.name?.slice(0,30) + "..." : item?.name}
+              {item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
             </td>
             
 
@@ -561,7 +561,7 @@ onMount( async() => {
             </td>
             
             <td class="text-white border-b border-[#202020]">
-              {item?.name?.length > 30 ? item?.name?.slice(0,30) + "..." : item?.name}
+              {item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
             </td>
     
       

src/routes/community/post/[postId]/+page.svelte

@@ -9,7 +9,7 @@ import VideoPlayer from '$lib/components/VideoPlayer.svelte';
 
 
 import { onMount, onDestroy } from 'svelte';
-import {userRegion, screenWidth, postIdDeleted, setCache, getCache, tagList, numberOfUnreadNotification, commentAdded, commentUpdated, commentIdDeleted } from '$lib/store';
+import {userRegion, screenWidth, scrollToComment, postIdDeleted, setCache, getCache, tagList, numberOfUnreadNotification, commentAdded, commentUpdated, commentIdDeleted } from '$lib/store';
 import { goto, afterNavigate } from '$app/navigation';
 import { base } from '$app/paths'
 
@@ -354,9 +354,9 @@ function closePost(event) {
 
 
 onDestroy( () => {
-
     $commentAdded = '';
     $commentIdDeleted = '';
+    $scrollToComment = '';
 })
 
 

src/routes/notifications/+page.svelte

@@ -4,7 +4,7 @@
 	import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
 
     import { onMount } from 'svelte';
-    import {userRegion, screenWidth, numberOfUnreadNotification} from '$lib/store';
+    import {userRegion, screenWidth, numberOfUnreadNotification, scrollToComment } from '$lib/store';
 
     export let data;
     export let form;
@@ -62,6 +62,12 @@ if (notificationIdList.length !== 0)
 
 }
 
+function goToPost(item) {
+  if (item?.comment && item?.notifyType === 'vote') {
+    $scrollToComment = item?.comment;
+  }
+  goto("/community/post/"+item?.post)
+}
 
 async function infiniteHandler({ detail: { loaded, complete } }) 
 {
@@ -136,7 +142,7 @@ onMount(async () => {
          <div class="flex flex-col items-start w-full text-white">
          {#each notificationList as item}
            <!-- svelte-ignore a11y-click-events-have-key-events -->
-           <div on:click={()=> goto("/community/post/"+item?.post)} class="hover:bg-[#2B2B2B] p-3 mb-3 ml-1 text-gray-200 w-full {!item?.readed ? 'bg-[#F9AB00] bg-opacity-[0.1]' : ''} cursor-pointer">
+           <div on:click={()=> goToPost(item)} class="hover:bg-[#2B2B2B] p-3 mb-3 ml-1 text-gray-200 w-full {!item?.readed ? 'bg-[#F9AB00] bg-opacity-[0.1]' : ''} cursor-pointer">
             <div class="flex flex-row items-center w-full">
 
             <!-- svelte-ignore a11y-label-has-associated-control -->