fix ts

Author: SaraVieira

packages/app/src/app/pages/Dashboard/Sidebar/index.tsx

@@ -24,11 +24,11 @@ import {
 } from '@codesandbox/components';
 import css from '@styled-system/css';
 import merge from 'deepmerge';
+import { WorkspaceSelect } from 'app/components/WorkspaceSelect';
 import { ContextMenu } from './ContextMenu';
 import { DashboardBaseFolder, PageTypes } from '../types';
 import { Position } from '../Components/Selection';
 import { SIDEBAR_WIDTH } from './constants';
-import { WorkspaceSwitcher } from './WorkspaceSwitcher';
 import { DragItemType, useDrop } from '../utils/dnd';
 
 const SidebarContext = React.createContext(null);
@@ -47,13 +47,21 @@ export const Sidebar: React.FC<SidebarProps> = ({
   ...props
 }) => {
   const { state, actions } = useOvermind();
-  const [activeAccount, setActiveAccount] = useState<{
-    username: string | null;
-    avatarUrl: string | null;
-  }>({
-    username: null,
-    avatarUrl: null,
-  });
+  const [activeAccount, setActiveAccount] = useState<
+    | {
+        type: 'user';
+        id: string;
+        username: string;
+        avatarUrl: string;
+      }
+    | {
+        type: 'team';
+        id: string;
+        name: string;
+        avatarUrl: string;
+      }
+    | null
+  >(null);
   const { dashboard, user, activeTeam } = state;
 
   React.useEffect(() => {
@@ -65,18 +73,22 @@ export const Sidebar: React.FC<SidebarProps> = ({
       const team = dashboard.teams.find(({ id }) => id === state.activeTeam);
 
       if (team)
-        setActiveAccount({ username: team.name, avatarUrl: team.avatarUrl });
+        setActiveAccount({
+          type: 'team',
+          id: team.id,
+          name: team.name,
+          avatarUrl: team.avatarUrl,
+        });
     } else if (user) {
       setActiveAccount({
+        type: 'user',
+        id: user.id,
         username: user.username,
         avatarUrl: user.avatarUrl,
       });
     }
   }, [state.activeTeam, state.activeTeamInfo, dashboard.teams, user]);
 
-  const inTeamContext =
-    activeAccount && user && activeAccount.username !== user.username;
-
   const folders = dashboard.allCollections || [];
 
   // context menu for folders
@@ -128,11 +140,40 @@ export const Sidebar: React.FC<SidebarProps> = ({
         })}
       >
         <List>
-          <ListItem gap={2} css={css({ paddingX: 0, height: 10 })}>
-            <WorkspaceSwitcher
-              activeAccount={activeAccount}
-              inTeamContext={inTeamContext}
-            />
+          <ListItem
+            css={css({
+              paddingX: 0,
+              height: 10,
+              borderBottom: '1px solid',
+              borderColor: 'sideBar.border',
+            })}
+          >
+            {activeAccount && (
+              <WorkspaceSelect
+                onSelect={workspace => {
+                  actions.setActiveTeam({
+                    id: workspace.type === 'user' ? null : workspace.id,
+                  });
+                }}
+                activeAccount={activeAccount}
+              />
+            )}
+            <Link
+              css={css({ height: '100%' })}
+              as={RouterLink}
+              to={dashboardUrls.settings(state.activeTeam)}
+            >
+              <IconButton
+                name="gear"
+                size={8}
+                title="Settings"
+                css={css({
+                  width: 8,
+                  height: '100%',
+                  borderRadius: 0,
+                })}
+              />
+            </Link>
           </ListItem>
           <RowItem
             name="Home"