feat: add session switching to the root action menu (#3925)

* feat: add session switching to the root action menu

* minor fixes

* stylistic consistency

* capitalize account section

* minor fix

app/actions/definitions/teams.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import styled from "styled-components";
+import { createAction } from "~/actions";
+import { loadSessionsFromCookie } from "~/hooks/useSessions";
+
+export const changeTeam = createAction({
+  name: ({ t }) => t("Switch team"),
+  placeholder: ({ t }) => t("Select a team"),
+  keywords: "change workspace organization",
+  section: "Account",
+  visible: ({ currentTeamId }) => {
+    const sessions = loadSessionsFromCookie();
+    const otherSessions = sessions.filter(
+      (session) => session.teamId !== currentTeamId
+    );
+    return otherSessions.length > 0;
+  },
+  children: ({ currentTeamId }) => {
+    const sessions = loadSessionsFromCookie();
+    const otherSessions = sessions.filter(
+      (session) => session.teamId !== currentTeamId
+    );
+
+    return otherSessions.map((session) => ({
+      id: session.url,
+      name: session.name,
+      section: "Account",
+      icon: <Logo alt={session.name} src={session.logoUrl} />,
+      perform: () => (window.location.href = session.url),
+    }));
+  },
+});
+
+const Logo = styled("img")`
+  border-radius: 2px;
+  width: 24px;
+  height: 24px;
+`;
+
+export const rootTeamActions = [changeTeam];

app/actions/root.ts

@@ -3,6 +3,7 @@ import { rootDeveloperActions } from "./definitions/developer";
 import { rootDocumentActions } from "./definitions/documents";
 import { rootNavigationActions } from "./definitions/navigation";
 import { rootSettingsActions } from "./definitions/settings";
+import { rootTeamActions } from "./definitions/teams";
 import { rootUserActions } from "./definitions/users";
 
 export default [
@@ -12,4 +13,5 @@ export default [
   ...rootNavigationActions,
   ...rootSettingsActions,
   ...rootDeveloperActions,
+  ...rootTeamActions,
 ];