From c6481d4668cb751501d1b7fc1892565bb7889017 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 4 Nov 2024 14:57:22 +0700
Subject: [PATCH] ui: remove redundant animation (#3938)

---
 web/containers/Layout/RibbonPanel/index.tsx        | 11 ++---------
 .../SettingLeftPanel/SettingItem/index.tsx         | 14 +++++---------
 web/screens/Thread/ThreadLeftPanel/index.tsx       | 11 +++--------
 3 files changed, 10 insertions(+), 26 deletions(-)

diff --git a/web/containers/Layout/RibbonPanel/index.tsx b/web/containers/Layout/RibbonPanel/index.tsx
index ee00b2237..13116dc16 100644
--- a/web/containers/Layout/RibbonPanel/index.tsx
+++ b/web/containers/Layout/RibbonPanel/index.tsx
@@ -1,5 +1,4 @@
 import { Tooltip, useMediaQuery } from '@janhq/joi'
-import { motion as m } from 'framer-motion'
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 import {
   MessageCircleIcon,
@@ -109,19 +108,13 @@ export default function RibbonPanel() {
                   <div
                     data-testid={menu.name}
                     className={twMerge(
-                      'relative flex w-full flex-shrink-0 cursor-pointer items-center justify-center text-[hsla(var(--ribbon-panel-icon))] ',
+                      'relative flex w-full flex-shrink-0 cursor-pointer items-center justify-center rounded-md p-1.5 text-[hsla(var(--ribbon-panel-icon))]',
                       isActive &&
-                        'z-10 text-[hsla(var(--ribbon-panel-icon-active))]'
+                        'z-10 bg-[hsla(var(--ribbon-panel-icon-active-bg))] text-[hsla(var(--ribbon-panel-icon-active))]'
                     )}
                   >
                     {menu.icon}
                   </div>
-                  {isActive && (
-                    <m.div
-                      className="absolute inset-0 left-0 h-full w-full rounded-md bg-[hsla(var(--ribbon-panel-icon-active-bg))]"
-                      layoutId="active-state-menu"
-                    />
-                  )}
                 </div>
               }
               content={
diff --git a/web/screens/Settings/SettingLeftPanel/SettingItem/index.tsx b/web/screens/Settings/SettingLeftPanel/SettingItem/index.tsx
index 505a2cf40..b8c1994c5 100644
--- a/web/screens/Settings/SettingLeftPanel/SettingItem/index.tsx
+++ b/web/screens/Settings/SettingLeftPanel/SettingItem/index.tsx
@@ -1,6 +1,5 @@
 import { useCallback } from 'react'
 
-import { motion as m } from 'framer-motion'
 import { useAtom } from 'jotai'
 
 import { twMerge } from 'tailwind-merge'
@@ -22,23 +21,20 @@ const SettingItem = ({ name, setting }: Props) => {
 
   return (
     <div
-      className="relative my-0.5 block cursor-pointer rounded-lg px-2 py-1.5 hover:bg-[hsla(var(--left-panel-menu-hover))]"
+      className={twMerge(
+        'relative my-0.5 block cursor-pointer rounded-lg px-2 py-1.5 hover:bg-[hsla(var(--left-panel-menu-hover))]',
+        isActive && 'rounded-lg bg-[hsla(var(--left-panel-icon-active-bg))]'
+      )}
       onClick={onSettingItemClick}
     >
       <span
         className={twMerge(
-          'font-medium capitalize text-[hsla(var(--left-panel-menu))]',
+          'p-1.5 font-medium capitalize text-[hsla(var(--left-panel-menu))]',
           isActive && 'relative z-10 text-[hsla(var(--left-panel-menu-active))]'
         )}
       >
         {name}
       </span>
-      {isActive && (
-        <m.div
-          className="absolute inset-0 -left-0.5 h-full w-[calc(100%+4px)] rounded-lg bg-[hsla(var(--left-panel-icon-active-bg))]"
-          layoutId="active-static-menu"
-        />
-      )}
     </div>
   )
 }
diff --git a/web/screens/Thread/ThreadLeftPanel/index.tsx b/web/screens/Thread/ThreadLeftPanel/index.tsx
index 67bc5db0c..aca21c8a2 100644
--- a/web/screens/Thread/ThreadLeftPanel/index.tsx
+++ b/web/screens/Thread/ThreadLeftPanel/index.tsx
@@ -3,7 +3,6 @@ import { useCallback, useEffect, useState } from 'react'
 import { Thread } from '@janhq/core'
 
 import { Button } from '@janhq/joi'
-import { motion as m } from 'framer-motion'
 import { useAtomValue, useSetAtom } from 'jotai'
 import {
   GalleryHorizontalEndIcon,
@@ -118,7 +117,9 @@ const ThreadLeftPanel = () => {
             <div
               key={thread.id}
               className={twMerge(
-                `group/message relative mb-1 flex cursor-pointer flex-col transition-all hover:rounded-lg hover:bg-[hsla(var(--left-panel-menu-hover))]`
+                `group/message relative mb-1 flex cursor-pointer flex-col transition-all hover:rounded-lg hover:bg-[hsla(var(--left-panel-menu-hover))]`,
+                activeThreadId === thread.id &&
+                  'rounded-lg bg-[hsla(var(--left-panel-icon-active-bg))]'
               )}
               onClick={() => {
                 onThreadClick(thread)
@@ -208,12 +209,6 @@ const ThreadLeftPanel = () => {
                   </div>
                 </div>
               </div>
-              {activeThreadId === thread.id && (
-                <m.div
-                  className="absolute inset-0 left-0 h-full w-full rounded-lg bg-[hsla(var(--left-panel-icon-active-bg))]"
-                  layoutId="active-thread"
-                />
-              )}
             </div>
           ))}
         </div>