Remove "account" dropdown', add notifications dropdown (#3365)

* Move theme + logout to the side nav, and a few refactors for sanity

- items in the side nav can now expose an `onClick` instead of just a `to`
- renamed the "activeTo" side nav item option to "displayAsActiveWhenThisRouteIsMatched" to increase my understanding
- the theme hook now exposes a currentlyVisibleTheme value which is either "dark" or "light", as opposed to the existing theme value which can also be "system" – at some point we should probably make the toggle function toggle through all 3 possible values, but I'll settle for this incremental improvement for now

* Don't redirect to the invite screen unless we have to – otherwise, just show a notification

* Refetch invites every 1 minute, resource limits every 2

* make the notifications button a perfect circle

* Make notification text more likely to be readable

- notification dropdown wider
- move more important text earlier in the notification message
- kill some passive voice in the process
- put notification message in title so you can see it on hover

* Use shadcn button for notifications

* Change the syntax of the resourceLabels map slightly

For slightly nicer type-checking warnings

* Move the logout mutation into the user universe

* Move the logout button to the bottom of the navbar next to "help"

* move all settings options up to the top level

also make the theme button not stand out so much

* merge detritus

* Add an onboarding notification

if the user has one tenant and no workflows and no api keys, show them a notification that redirects them to the onboarding screen

* Put a short title into the top nav

* Get cypress tests working again

07 isn't relevant now, its case is covered by 05 and 08

* A few more references to "User Menu"

* settings items aren't nested any more

* mm lint:fix

* fix: import

* fix: tenant invite type

* fix: remove overview tab from left sidebar

* fix: notification styling, don't show if no notifications exist

* fix: react query devtools z index

* fix: icon position

* fix: drive by fixing some react errors in the console

* fix: remove no notifs state, since we just hide the icon

* fix: some cypress tests

* fix: more cy tests

---------

Co-authored-by: mrkaye97 <mrkaye97@gmail.com>

Author: TehShrike

frontend/app/cypress/e2e/auth/01-login.cy.ts

@@ -33,16 +33,6 @@ describe('auth: login', () => {
       }
     });
     cy.location('pathname', { timeout: 30000 }).should('include', '/tenants/');
-    cy.get('button[aria-label="User Menu"]').filter(':visible').first().click();
-    // `data-cy="user-name"` exists in both the trigger and the dropdown content; scope to the open menu.
-    cy.get('[role="menu"]')
-      .filter(':visible')
-      .first()
-      .within(() => {
-        cy.get('[data-cy="user-name"]')
-          .filter(':visible')
-          .first()
-          .should('have.text', seededUsers.owner.name);
-      });
+    cy.get('[data-cy="v1-sidebar"]', { timeout: 30000 }).should('be.visible');
   });
 });

frontend/app/cypress/e2e/auth/02-logout.cy.ts

@@ -3,13 +3,7 @@ describe('auth: logout', () => {
     // Some environments don't have an "admin" seeded user; "owner" is sufficient to validate logout.
     cy.login('owner');
     cy.visit('/');
-    cy.get('button[aria-label="User Menu"]')
-      .filter(':visible')
-      .should('be.visible')
-      .first()
-      .click();
-    // Menu item includes a keyboard shortcut, so match by substring.
-    cy.contains('[role="menuitem"]', 'Log out').filter(':visible').click();
+    cy.contains('button', 'Logout').filter(':visible').first().click();
     cy.location('pathname').should('include', '/auth/login');
   });
 });

frontend/app/cypress/e2e/auth/05-tenant-invite-accept.cy.ts

@@ -78,12 +78,7 @@ describe('Tenant Invite: accept', () => {
         });
       });
 
-    cy.get('button[aria-label="User Menu"]')
-      .filter(':visible')
-      .should('be.visible')
-      .first()
-      .click();
-    cy.contains('[role="menuitem"]', 'Log out').filter(':visible').click();
+    cy.contains('button', 'Logout').filter(':visible').first().click();
 
     cy.location('pathname').should('include', '/auth/login');
     cy.get('input#email').type(seededUsers.member.email);
@@ -96,6 +91,19 @@ describe('Tenant Invite: accept', () => {
           .should('be.enabled')
           .click();
       });
+    cy.location('pathname', { timeout: 30000 }).should(
+      'match',
+      /\/tenants\/.+/,
+    );
+
+    // Open the notification dropdown and click the tenant invite notification
+    cy.get('[data-cy="notifications-button"]', { timeout: 10000 })
+      .filter(':visible')
+      .first()
+      .click();
+    cy.contains(`Tenant invite: ${tenant2Name}`).first().click();
+
+    // Should be on the invites page now
     cy.location('pathname', { timeout: 5000 }).should(
       'eq',
       '/onboarding/invites',
@@ -104,15 +112,14 @@ describe('Tenant Invite: accept', () => {
     // Find the specific invite and accept it
     cy.contains(`invited to join the ${tenant2Name} tenant`).should('exist');
 
-    // Step 4: Accept the invite - register intercept before clicking
+    // Accept the invite
     cy.intercept('POST', '/api/v1/users/invites/accept').as('acceptInvite');
     cy.contains(`invited to join the ${tenant2Name} tenant`)
       .parent()
       .contains('button', 'Accept')
       .should('exist')
       .click();
 
-    // Wait for the accept API call to complete
     cy.wait('@acceptInvite').its('response.statusCode').should('eq', 200);
 
     // Wait for the accepted invite card to be removed from the DOM before
@@ -141,7 +148,7 @@ describe('Tenant Invite: accept', () => {
     };
     declineAll();
 
-    // Step 5: Verify redirect to the tenant page (no infinite loop)
+    // Verify redirect to the tenant page
     cy.location('pathname', { timeout: 5000 }).should(
       'match',
       /\/tenants\/[^/]+/,

frontend/app/cypress/e2e/auth/06-tenant-switching.cy.ts

@@ -127,13 +127,7 @@ describe('Tenants: switching', () => {
       .filter(':visible')
       .first()
       .should('contain.text', tenant2Name);
-    cy.get('button[aria-label="User Menu"]')
-      .filter(':visible')
-      .should('be.visible')
-      .first()
-      .click();
-    // Menu item includes a keyboard shortcut, so match by substring.
-    cy.contains('[role="menuitem"]', 'Log out').filter(':visible').click();
+    cy.contains('button', 'Logout').filter(':visible').first().click();
 
     cy.login('member');
     cy.visit('/');

frontend/app/cypress/e2e/auth/07-create-tenant-invites-redirect.cy.ts

@@ -75,12 +75,7 @@ describe('Tenant Invite: decline', () => {
       });
 
     // Step 3: Logout
-    cy.get('button[aria-label="User Menu"]')
-      .filter(':visible')
-      .should('be.visible')
-      .first()
-      .click();
-    cy.contains('[role="menuitem"]', 'Log out').filter(':visible').click();
+    cy.contains('button', 'Logout').filter(':visible').first().click();
     cy.location('pathname').should('include', '/auth/login');
 
     // Step 4: Login as member (who has pending invite)
@@ -95,7 +90,23 @@ describe('Tenant Invite: decline', () => {
           .click();
       });
 
-    // Should be redirected to invites page
+    // Wait for navigation after sign in
+    cy.location('pathname', { timeout: 30000 }).should(
+      'match',
+      /\/tenants\/.+/,
+    );
+
+    // Open the notification dropdown and click the tenant invite notification
+    cy.get('[data-cy="notifications-button"]', { timeout: 10000 })
+      .filter(':visible')
+      .first()
+      .click();
+    cy.contains(`Tenant invite: ${tenantName}`)
+      .filter(':visible')
+      .first()
+      .click();
+
+    // Should be on the invites page now
     cy.location('pathname', { timeout: 5000 }).should(
       'eq',
       '/onboarding/invites',
@@ -106,19 +117,25 @@ describe('Tenant Invite: decline', () => {
       'be.visible',
     );
 
-    // Step 5: Decline the invite - register intercept before clicking
-    cy.intercept('POST', '/api/v1/users/invites/reject').as('rejectInvite');
-    cy.contains(`invited to join the ${tenantName} tenant`)
-      .parent()
-      .contains('button', 'Decline')
-      .should('be.visible')
-      .click();
-
-    // Wait for the reject API call to complete
-    cy.wait('@rejectInvite').its('response.statusCode').should('eq', 200);
+    // Step 5: Decline all invites
+    const declineAll = (remaining = 20) => {
+      cy.get('body').then(($body) => {
+        if (
+          remaining > 0 &&
+          $body.find('button:contains("Decline")').length > 0
+        ) {
+          cy.intercept('POST', '/api/v1/users/invites/reject').as(
+            'rejectInvite',
+          );
+          cy.contains('button', 'Decline').click({ force: true });
+          cy.wait('@rejectInvite');
+          declineAll(remaining - 1);
+        }
+      });
+    };
+    declineAll();
 
     // Step 6: Verify redirect away from invites page
-    // User should be redirected to authenticated route (which may further redirect)
     cy.location('pathname', { timeout: 10000 }).should(
       'not.eq',
       '/onboarding/invites',

frontend/app/cypress/e2e/auth/08-tenant-invite-decline.cy.ts

@@ -1,7 +1,10 @@
 describe('v1 sidebar: resize + collapse', () => {
   const DEFAULT_EXPANDED_WIDTH = 200;
 
-  const visitAuthed = (viewport: { width: number; height: number }) => {
+  const visitAuthed = (
+    viewport: { width: number; height: number },
+    opts?: { requireVisibleSidebar?: boolean },
+  ) => {
     cy.viewport(viewport.width, viewport.height);
     cy.login('owner');
 
@@ -14,9 +17,16 @@ describe('v1 sidebar: resize + collapse', () => {
       },
     });
 
-    cy.get('button[aria-label="User Menu"]', { timeout: 30000 }).should(
-      'be.visible',
-    );
+    if (opts?.requireVisibleSidebar !== false) {
+      if (viewport.width < 768) {
+        cy.get('button[aria-label="Toggle sidebar"]', { timeout: 30000 })
+          .should('be.visible')
+          .click();
+      }
+
+      cy.get('[data-cy="v1-sidebar"]', { timeout: 30000 }).should('be.visible');
+    }
+
     cy.location('pathname', { timeout: 30000 }).should(
       'match',
       /\/tenants\/.+/,
@@ -30,17 +40,14 @@ describe('v1 sidebar: resize + collapse', () => {
   };
 
   const waitForShell = () => {
-    cy.get('button[aria-label="User Menu"]', { timeout: 30000 }).should(
-      'be.visible',
-    );
-    cy.get('[data-cy="v1-sidebar"]').should('be.visible');
+    cy.get('[data-cy="v1-sidebar"]', { timeout: 30000 }).should('be.visible');
   };
 
   it('navbar: sidebar toggle button is only visible on mobile', () => {
     visitAuthed({ width: 1280, height: 800 });
     cy.get('button[aria-label="Toggle sidebar"]').should('not.be.visible');
 
-    visitAuthed({ width: 375, height: 667 });
+    visitAuthed({ width: 375, height: 667 }, { requireVisibleSidebar: false });
     cy.get('button[aria-label="Toggle sidebar"]').should('be.visible');
   });
 
@@ -189,21 +196,19 @@ describe('v1 sidebar: resize + collapse', () => {
     expectSidebarWidthStyle(56);
   });
 
-  it('collapsed: settings flyout renders and has a visible panel background', () => {
+  it('collapsed: settings items are always visible without a flyout', () => {
     visitAuthed({ width: 1280, height: 800 });
 
     // Collapse.
     cy.get('[data-cy="v1-sidebar-resize-handle"]').click({ force: true });
+    expectSidebarWidthStyle(56);
 
-    // Open settings flyout.
-    cy.get('button[aria-label="General"]').click({ force: true });
-    cy.get('[role="menu"]').filter(':visible').first().as('settingsMenu');
-    cy.get('@settingsMenu').contains('Overview').should('be.visible');
-
-    // Content should have the bg-secondary class (explicit panel surface).
-    cy.get('@settingsMenu')
-      .invoke('attr', 'class')
-      // UI uses popover surfaces; accept either explicit secondary surface or popover surface.
-      .should('match', /\bbg-(secondary|popover)\b/);
+    // Settings items exist directly — no flyout needed.
+    cy.get('button[aria-label="API Tokens"]')
+      .scrollIntoView()
+      .should('be.visible');
+    cy.get('button[aria-label="Members"]')
+      .scrollIntoView()
+      .should('be.visible');
   });
 });