Team dropdown

src/components/AccountSidebar.astro

@@ -25,7 +25,7 @@ const sidebarLinks = [
     href: '/account/road-card',
     title: 'Card',
     id: 'road-card',
-    isNew: true,
+    isNew: false,
     icon: {
       glyph: 'badge',
       classes: 'h-4 w-4',

src/components/TeamDropdown/TeamDropdown.tsx

@@ -31,6 +31,24 @@ export function TeamDropdown() {
   const user = useAuth();
   const { teamId } = useTeamId();
 
+  const [shouldShowTeamsIndicator, setShouldShowTeamsIndicator] =
+    useState(false);
+
+  useEffect(() => {
+    // Show team dropdown "New" indicator to first 3 refreshes
+    const viewedTeamsCount = localStorage.getItem('viewedTeamsCount');
+    const viewedTeamsCountNumber = parseInt(viewedTeamsCount || '0', 10);
+    const shouldShowTeamIndicator = viewedTeamsCountNumber < 5;
+
+    setShouldShowTeamsIndicator(shouldShowTeamIndicator);
+    if (shouldShowTeamIndicator) {
+      localStorage.setItem(
+        'viewedTeamsCount',
+        (viewedTeamsCountNumber + 1).toString()
+      );
+    }
+  }, []);
+
   const teamList = useStore($teamList);
   const currentTeam = useStore($currentTeam);
 
@@ -78,21 +96,21 @@ export function TeamDropdown() {
     .filter((team) => team.status === 'invited')
     .map((team) => team._id);
 
-  if (
-    !user?.email.endsWith('@insightpartners.com') &&
-    !user?.email.endsWith('@roadmap.sh') &&
-    ![
-      'arikchangma@gmail.com',
-      'kamranahmed.se@gmail.com',
-      'stephen.chetcuti@gmail.com',
-    ].includes(user?.email!)
-  ) {
-    return null;
-  }
-
   return (
     <>
       <div className="relative mr-2">
+        <span className="mb-2 flex items-center justify-between text-xs uppercase text-gray-400">
+          <span>Choose Team</span>
+
+          {shouldShowTeamsIndicator && (
+            <span class="mr-1 inline-flex h-1 w-1 items-center justify-center font-medium text-blue-300">
+              <span class="relative flex items-center">
+                <span class="relative rounded-full bg-gray-200 p-1 text-xs" />
+                <span class="absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-gray-400 p-1 text-xs" />
+              </span>
+            </span>
+          )}
+        </span>
         <button
           className="flex w-full cursor-pointer items-center justify-between rounded border p-2 text-sm hover:bg-gray-100"
           onClick={() => setShowDropdown(!showDropdown)}