Merge branch 'main' into feat/rebuild-mute-unmute-rooms

domw30 · domw30 · commit 5f6042ef6f7d · 2025-02-28T10:00:13.000Z
diff --git a/.github/workflows/version-increment.yml b/.github/workflows/version-increment.yml
@@ -0,0 +1,69 @@
+name: Increment Version
+
+on:
+  workflow_dispatch:
+    inputs:
+      version_increment:
+        description: 'Version number to increment'
+        required: true
+        default: 'patch'
+        type: 'choice'
+        options:
+          - patch
+          - minor
+          - major
+
+jobs:
+  increment-version:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Configure Git
+        run: |
+          git config user.name "${{ github.actor }}"
+          git config user.email "${{ github.actor }}@users.noreply.github.com"
+          echo "Configured Git as user: ${{ github.actor }}"
+
+      - name: Increment version
+        id: version
+        run: |
+          # Get current version
+          CURRENT_VERSION=$(node -p "require('./package.json').version")
+          echo "Current version: $CURRENT_VERSION"
+          echo "current_version=$CURRENT_VERSION" >> $GITHUB_OUTPUT
+
+          # Increment version based on input
+          npm version ${{ github.event.inputs.version_increment }} --no-git-tag-version
+
+          # Get new version
+          NEW_VERSION=$(node -p "require('./package.json').version")
+          echo "New version: $NEW_VERSION"
+          echo "new_version=$NEW_VERSION" >> $GITHUB_OUTPUT
+
+          # Create branch name
+          BRANCH_NAME="version-bump-$NEW_VERSION"
+          echo "branch_name=$BRANCH_NAME" >> $GITHUB_OUTPUT
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v5
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          commit-message: 'chore: bump ${{ github.event.inputs.version_increment }} (`${{ steps.version.outputs.current_version }}` -> `${{ steps.version.outputs.new_version }}`)'
+          title: 'chore: bump ${{ github.event.inputs.version_increment }} (`${{ steps.version.outputs.current_version }}` -> `${{ steps.version.outputs.new_version }}`)'
+          body: |
+            This PR bumps the version from `${{ steps.version.outputs.current_version }}` to `${{ steps.version.outputs.new_version }}`.
+
+            Automated version increment via GitHub Actions.
+          branch: ${{ steps.version.outputs.branch_name }}
+          base: main
+          delete-branch: true
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ZERO",
-  "version": "1.283.0",
+  "version": "1.286.0",
   "private": true,
   "main": "./public/electron.js",
   "engines": {
diff --git a/src/components/app-bar/index.tsx b/src/components/app-bar/index.tsx
@@ -26,10 +26,59 @@ interface State {
 
 export class AppBar extends React.Component<Properties, State> {
   state = { isModalOpen: false };
+  containerRef = React.createRef<HTMLDivElement>();
+  mouseLeaveHandler: ((event: MouseEvent) => void) | null = null;
+
+  componentWillUnmount() {
+    // Remove listener to prevent memory leaks
+    this.removeMouseLeaveListener();
+  }
 
   openModal = () => this.setState({ isModalOpen: true });
   closeModal = () => this.setState({ isModalOpen: false });
 
+  /**
+   * Removes the mouseleave listener from the container.
+   * @dev mouse listener needs to be removed so we don't add multiple listeners.
+   */
+  removeMouseLeaveListener = () => {
+    if (this.containerRef.current && this.mouseLeaveHandler) {
+      this.containerRef.current.removeEventListener('mouseleave', this.mouseLeaveHandler);
+      this.mouseLeaveHandler = null;
+    }
+  };
+
+  /**
+   * 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 = () => {
+    const container = this.containerRef.current;
+    if (!container) return;
+
+    // Add the no-hover class to prevent expansion
+    container.classList.add('no-hover');
+
+    // Force a reflow to ensure the width change happens immediately (prevent animation glitches)
+    container.getBoundingClientRect();
+
+    this.removeMouseLeaveListener();
+
+    this.mouseLeaveHandler = () => {
+      if (this.containerRef.current) {
+        this.containerRef.current.classList.remove('no-hover');
+        this.removeMouseLeaveListener();
+      }
+    };
+
+    container.addEventListener('mouseleave', this.mouseLeaveHandler);
+  };
+
   renderNotificationIcon = () => {
     const { hasUnreadNotifications, hasUnreadHighlights } = this.props;
 
@@ -53,26 +102,46 @@ export class AppBar extends React.Component<Properties, State> {
     return (
       <>
         <div {...cn('')}>
-          <LegacyPanel {...cn('container')}>
-            <AppLink Icon={IconHome} isActive={isActive('home')} label='Home' to='/home' />
+          <LegacyPanel {...cn('container')} ref={this.containerRef}>
+            <AppLink
+              Icon={IconHome}
+              isActive={isActive('home')}
+              label='Home'
+              to='/home'
+              onLinkClick={this.unhoverContainer}
+            />
             <AppLink
               Icon={IconMessageSquare2}
               isActive={isActive('conversation')}
               label='Messenger'
               to='/conversation'
+              onLinkClick={this.unhoverContainer}
             />
             {featureFlags.enableFeedApp && (
-              <AppLink Icon={IconSlashes} isActive={isActive('feed')} label='Channels' to='/feed' />
+              <AppLink
+                Icon={IconSlashes}
+                isActive={isActive('feed')}
+                label='Channels'
+                to='/feed'
+                onLinkClick={this.unhoverContainer}
+              />
             )}
             {featureFlags.enableNotificationsApp && (
               <AppLink
                 Icon={this.renderNotificationIcon}
                 isActive={isActive('notifications')}
                 label='Notifications'
                 to='/notifications'
+                onLinkClick={this.unhoverContainer}
               />
             )}
-            <AppLink Icon={IconGlobe3} isActive={isActive('explorer')} label='Explorer' to='/explorer' />
+            <AppLink
+              Icon={IconGlobe3}
+              isActive={isActive('explorer')}
+              label='Explorer'
+              to='/explorer'
+              onLinkClick={this.unhoverContainer}
+            />
             <div {...cn('link')} title='More Apps'>
               <WorldPanelItem Icon={IconDotsGrid} label='More Apps' isActive={false} onClick={this.openModal} />
               <span>More Apps</span>
@@ -90,11 +159,18 @@ interface AppLinkProps {
   isActive: boolean;
   label: string;
   to: string;
+  onLinkClick?: () => void;
 }
 
-const AppLink = ({ Icon, isActive, to, label }: AppLinkProps) => {
+const AppLink = ({ Icon, isActive, to, label, onLinkClick }: AppLinkProps) => {
+  const handleClick = () => {
+    if (!isActive && onLinkClick) {
+      onLinkClick();
+    }
+  };
+
   return (
-    <Link title={label} {...cn('link')} to={!isActive && to}>
+    <Link title={label} {...cn('link')} to={!isActive ? to : undefined} onClick={handleClick}>
       <WorldPanelItem Icon={Icon} label={label} isActive={isActive} />
       <span data-active={isActive ? '' : null}>{label}</span>
     </Link>
diff --git a/src/components/app-bar/index.vitest.tsx b/src/components/app-bar/index.vitest.tsx
@@ -1,9 +1,18 @@
 import { vi } from 'vitest';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 
 import { AppBar, Properties } from '.';
 
+vi.mock('react-router-dom', () => ({
+  Link: ({ children, onClick, to, ...props }: any) => (
+    <a onClick={onClick} to={to} {...props}>
+      {children}
+    </a>
+  ),
+  MemoryRouter: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
 vi.mock('@zero-tech/zui/icons', () => ({
   IconHome: 'IconHome',
   IconSlashes: 'IconSlashes',
@@ -13,6 +22,7 @@ vi.mock('@zero-tech/zui/icons', () => ({
   IconList: 'IconList',
   IconBell1: 'IconBell1',
 }));
+
 vi.mock('./more-apps-modal', () => ({
   MoreAppsModal: () => <div data-testid='more-apps-modal' />,
 }));
@@ -45,15 +55,69 @@ 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 the no-hover class when an AppLink is clicked', () => {
+      const { getByText, getByTestId } = renderComponent({});
+
+      const link = getByText('Home');
+      const panel = getByTestId('legacy-panel');
+
+      fireEvent.click(link);
+
+      expect(panel.classList.contains('no-hover')).toBe(true);
+    });
+
+    it('should remove the no-hover class when the mouse leaves the container', () => {
+      const { getByText, getByTestId } = renderComponent({});
+
+      const link = getByText('Home');
+      const panel = getByTestId('legacy-panel');
+
+      fireEvent.click(link);
+      expect(panel.classList.contains('no-hover')).toBe(true);
+
+      fireEvent.mouseLeave(panel);
+      expect(panel.classList.contains('no-hover')).toBe(false);
+    });
+
+    it('should maintain the no-hover class when the mouse moves within the container after clicking', () => {
+      const { getByText, getByTestId } = renderComponent({});
+
+      const link = getByText('Home');
+      const panel = getByTestId('legacy-panel');
+
+      fireEvent.click(link);
+      expect(panel.classList.contains('no-hover')).toBe(true);
+
+      fireEvent.mouseMove(panel);
+      expect(panel.classList.contains('no-hover')).toBe(true);
+    });
+
+    it('should allow hovering again after the mouse leaves and re-enters the container', () => {
+      const { getByText, getByTestId } = renderComponent({});
+
+      const link = getByText('Home');
+      const panel = getByTestId('legacy-panel');
+
+      fireEvent.click(link);
+
+      fireEvent.mouseLeave(panel);
+      expect(panel.classList.contains('no-hover')).toBe(false);
+
+      fireEvent.mouseEnter(panel);
+      expect(panel.classList.contains('no-hover')).toBe(false);
+    });
+  });
 });
diff --git a/src/components/app-bar/styles.scss b/src/components/app-bar/styles.scss
@@ -38,14 +38,25 @@ $width: 46px;
     backdrop-filter: blur(30px);
     list-style: none;
     transition: width 0.15s ease-in-out;
-  }
 
-  &:hover &__container {
-    width: calc(200px);
+    &:hover {
+      width: calc(200px);
+    }
+
+    &.no-hover {
+      width: $width !important;
+      transition: width 0.15s ease-in-out;
+
+      &:hover {
+        width: $width !important;
+      }
+    }
   }
 
   &__notification-icon-wrapper {
     position: relative;
+    width: 22px;
+    height: 22px;
   }
 
   &__notification-icon {
@@ -90,7 +101,7 @@ $width: 46px;
 
     span {
       position: absolute;
-      left: 34px; // 30px icon + 4px padding
+      left: 46px; // 30px icon + 16px padding
       top: 50%;
       transform: translateY(-50%);
 
diff --git a/src/components/layout/panel/index.tsx b/src/components/layout/panel/index.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, forwardRef, Ref } from 'react';
 
 import cn from 'classnames';
 
@@ -10,9 +10,15 @@ export interface PanelProps {
   toggleSidekick?: () => void;
 }
 
-export const LegacyPanel = ({ children, className }: PanelProps) => {
-  return <div className={cn(styles.Legacy, className)}>{children}</div>;
-};
+export const LegacyPanel = forwardRef(({ children, className }: PanelProps, ref: Ref<HTMLDivElement>) => {
+  return (
+    <div ref={ref} className={cn(styles.Legacy, className)} data-testid='legacy-panel'>
+      {children}
+    </div>
+  );
+});
+
+LegacyPanel.displayName = 'LegacyPanel';
 
 export const Panel = ({ children, className }: PanelProps) => {
   return <div className={cn(styles.Panel, className)}>{children}</div>;

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ZERO",`
`3`		`- "version": "1.283.0",`
	`3`	`+ "version": "1.286.0",`
`4`	`4`	`"private": true,`
`5`	`5`	`"main": "./public/electron.js",`
`6`	`6`	`"engines": {`