From a87d39e9363add04cf5f0a9e539303c18e124f4e Mon Sep 17 00:00:00 2001
From: Brett <12437916+colbr@users.noreply.github.com>
Date: Thu, 27 Feb 2025 13:21:12 +1100
Subject: [PATCH] refactor: tighten code

---
 src/components/app-bar/index.tsx        | 36 ++++++++++++++-----------
 src/components/app-bar/index.vitest.tsx | 16 +++++------
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/components/app-bar/index.tsx b/src/components/app-bar/index.tsx
index 0edb3d21d..7b32f014d 100644
--- a/src/components/app-bar/index.tsx
+++ b/src/components/app-bar/index.tsx
@@ -49,28 +49,34 @@ export class AppBar extends React.Component<Properties, State> {
   };
 
   /**
-   * Unhovers the container, and prevents another hover occuring until the mouse
+   * Unhovers the container and prevents another hover occurring until the mouse
    * leaves the container.
+   *
+   * This method:
+   * 1. Adds the 'no-hover' class to prevent expansion
+   * 2. Forces a reflow to ensure immediate width change
+   * 3. Sets up a one-time mouseleave listener to restore hover functionality
    */
   unhoverContainer = () => {
-    if (this.containerRef.current) {
-      this.containerRef.current.classList.add('no-hover');
+    const container = this.containerRef.current;
+    if (!container) return;
 
-      // Force a reflow to ensure the width change happens immediately
-      this.containerRef.current.getBoundingClientRect();
+    // Add the no-hover class to prevent expansion
+    container.classList.add('no-hover');
 
-      // Ensure we aren't adding multiple listeners
-      this.removeMouseLeaveListener();
+    // Force a reflow to ensure the width change happens immediately (prevent animation glitches)
+    container.getBoundingClientRect();
 
-      this.mouseLeaveHandler = (_event: MouseEvent) => {
-        if (this.containerRef.current) {
-          this.containerRef.current.classList.remove('no-hover');
-          this.removeMouseLeaveListener();
-        }
-      };
+    this.removeMouseLeaveListener();
 
-      this.containerRef.current.addEventListener('mouseleave', this.mouseLeaveHandler);
-    }
+    this.mouseLeaveHandler = () => {
+      if (this.containerRef.current) {
+        this.containerRef.current.classList.remove('no-hover');
+        this.removeMouseLeaveListener();
+      }
+    };
+
+    container.addEventListener('mouseleave', this.mouseLeaveHandler);
   };
 
   renderNotificationIcon = () => {
diff --git a/src/components/app-bar/index.vitest.tsx b/src/components/app-bar/index.vitest.tsx
index f9c18226d..c39fc28d0 100644
--- a/src/components/app-bar/index.vitest.tsx
+++ b/src/components/app-bar/index.vitest.tsx
@@ -55,20 +55,20 @@ describe(AppBar, () => {
     vi.clearAllMocks();
   });
 
-  describe('active app', () => {
-    it('should make conversation icon active when active app is conversation', () => {
+  describe('Active App State', () => {
+    it('should set the Messenger icon as active when activeApp is "conversation"', () => {
       renderComponent({ activeApp: 'conversation' });
       expect(mockWorldPanelItem).toHaveBeenCalledWith(expect.objectContaining({ label: 'Messenger', isActive: true }));
     });
 
-    it('should not make conversation icon active when active app is anything else', () => {
+    it('should not set the Messenger icon as active when activeApp is something else', () => {
       renderComponent({ activeApp: 'foo' });
       expect(mockWorldPanelItem).toHaveBeenCalledWith(expect.objectContaining({ label: 'Messenger', isActive: false }));
     });
   });
 
-  describe('unhover functionality', () => {
-    it('should add no-hover class when AppLink is clicked', () => {
+  describe('Unhover Functionality', () => {
+    it('should add the no-hover class when an AppLink is clicked', () => {
       const { getByText, getByTestId } = renderComponent({});
 
       const link = getByText('Home');
@@ -79,7 +79,7 @@ describe(AppBar, () => {
       expect(panel.classList.contains('no-hover')).toBe(true);
     });
 
-    it('should remove no-hover class when mouse leaves container', () => {
+    it('should remove the no-hover class when the mouse leaves the container', () => {
       const { getByText, getByTestId } = renderComponent({});
 
       const link = getByText('Home');
@@ -92,7 +92,7 @@ describe(AppBar, () => {
       expect(panel.classList.contains('no-hover')).toBe(false);
     });
 
-    it('should keep no-hover class when mouse moves within container after click', () => {
+    it('should maintain the no-hover class when the mouse moves within the container after clicking', () => {
       const { getByText, getByTestId } = renderComponent({});
 
       const link = getByText('Home');
@@ -105,7 +105,7 @@ describe(AppBar, () => {
       expect(panel.classList.contains('no-hover')).toBe(true);
     });
 
-    it('should allow hover again after mouse leaves and re-enters', () => {
+    it('should allow hovering again after the mouse leaves and re-enters the container', () => {
       const { getByText, getByTestId } = renderComponent({});
 
       const link = getByText('Home');