reorders 'Rename' above 'Hide' in menu popovers, adds debounce to sidebar animation (#3001)

* reorders 'Rename' above 'Hide' in menu popovers

* release notes

* adds debounce to sidebar animation

* bump debounce time

* release notes

* release notes

* Update debounce import

* Update index.tsx

* Update index.tsx

* Update index.tsx

* Update index.tsx

* Update index.tsx

* Update index.tsx

* Update index.tsx

* Update index.tsx

* removes event listener on titlebar, changes margins

packages/desktop-client/src/components/Titlebar.tsx

@@ -416,11 +416,6 @@ export function Titlebar({ style }: TitlebarProps) {
               sidebar.setHidden(false);
             }
           }}
-          onPointerLeave={e => {
-            if (e.pointerType === 'mouse') {
-              sidebar.setHidden(true);
-            }
-          }}
           onPointerUp={e => {
             if (e.pointerType !== 'mouse') {
               sidebar.setHidden(!sidebar.hidden);

packages/desktop-client/src/components/budget/SidebarCategory.tsx

@@ -106,11 +106,11 @@ export function SidebarCategory({
               setMenuOpen(false);
             }}
             items={[
+              { name: 'rename', text: 'Rename' },
               !categoryGroup?.hidden && {
                 name: 'toggle-visibility',
                 text: category.hidden ? 'Show' : 'Hide',
               },
-              { name: 'rename', text: 'Rename' },
               { name: 'delete', text: 'Delete' },
             ]}
           />

packages/desktop-client/src/components/budget/SidebarGroup.tsx

@@ -127,11 +127,11 @@ export function SidebarGroup({
                 }}
                 items={[
                   { name: 'add-category', text: 'Add category' },
+                  { name: 'rename', text: 'Rename' },
                   !group.is_income && {
                     name: 'toggle-visibility',
                     text: group.hidden ? 'Show' : 'Hide',
                   },
-                  { name: 'rename', text: 'Rename' },
                   onDelete && { name: 'delete', text: 'Delete' },
                 ]}
               />

packages/desktop-client/src/components/sidebar/index.tsx

 import React from 'react';
 
+import { useDebounceCallback } from 'usehooks-ts';
+
 import { useGlobalPref } from '../../hooks/useGlobalPref';
 import { useResponsive } from '../../ResponsiveProvider';
 import { View } from '../common/View';
@@ -14,25 +16,30 @@ export function FloatableSidebar() {
   const { isNarrowWidth } = useResponsive();
 
   const sidebarShouldFloat = floatingSidebar || sidebar.alwaysFloats;
+  const debouncedHideSidebar = useDebounceCallback(
+    () => sidebar.setHidden(true),
+    350,
+  );
 
   return isNarrowWidth ? null : (
     <View
       onMouseOver={
         sidebarShouldFloat
           ? e => {
+              debouncedHideSidebar.cancel();
               e.stopPropagation();
               sidebar.setHidden(false);
             }
           : undefined
       }
       onMouseLeave={
-        sidebarShouldFloat ? () => sidebar.setHidden(true) : undefined
+        sidebarShouldFloat ? () => debouncedHideSidebar() : undefined
       }
       style={{
         position: sidebarShouldFloat ? 'absolute' : undefined,
-        top: 12,
+        top: 8,
         // If not floating, the -50 takes into account the transform below
-        bottom: sidebarShouldFloat ? 12 : -50,
+        bottom: sidebarShouldFloat ? 8 : -50,
         zIndex: 1001,
         borderRadius: sidebarShouldFloat ? '0 6px 6px 0' : 0,
         overflow: 'hidden',
@@ -40,7 +47,7 @@ export function FloatableSidebar() {
           !sidebarShouldFloat || sidebar.hidden
             ? 'none'
             : '0 15px 30px 0 rgba(0,0,0,0.25), 0 3px 15px 0 rgba(0,0,0,.5)',
-        transform: `translateY(${!sidebarShouldFloat ? -12 : 0}px)
+        transform: `translateY(${!sidebarShouldFloat ? -8 : 0}px)
                       translateX(${
                         sidebarShouldFloat && sidebar.hidden ? '-100' : '0'
                       }%)`,

upcoming-release-notes/3001.md

+---
+category: Bugfix
+authors: [YusefOuda]
+---
+
+Moves "Rename" to first item in Category + Category Group menus. Adds debounce to sidebar animation.