From f61d360ee77279edf881d5872876839124d3aa70 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Tue, 25 Jul 2023 21:49:21 +0600
Subject: [PATCH 01/11] Add select roadmap modal (#4253)

* wip: roadmap selector modal

* wip

* fix: typo

* fix: prettier

* chore: close icon
---
 src/components/CreateTeam/RoadmapSelector.tsx |  75 +++++++-----
 .../CreateTeam/SelectRoadmapModal.tsx         | 114 ++++++++++++++++++
 src/icons/plus-white.svg                      |   1 +
 3 files changed, 160 insertions(+), 30 deletions(-)
 create mode 100644 src/components/CreateTeam/SelectRoadmapModal.tsx
 create mode 100644 src/icons/plus-white.svg

diff --git a/src/components/CreateTeam/RoadmapSelector.tsx b/src/components/CreateTeam/RoadmapSelector.tsx
index bec08ff38..96860b062 100644
--- a/src/components/CreateTeam/RoadmapSelector.tsx
+++ b/src/components/CreateTeam/RoadmapSelector.tsx
@@ -1,11 +1,12 @@
 import { useEffect, useState } from 'preact/hooks';
-import { SearchSelector } from '../SearchSelector';
 import { httpGet, httpPut } from '../../lib/http';
 import type { PageType } from '../CommandMenu/CommandMenu';
-import SearchIcon from '../../icons/search.svg';
+import PlusIcon from '../../icons/plus.svg';
+import PlusWhiteIcon from '../../icons/plus-white.svg';
 import { pageProgressMessage } from '../../stores/page';
 import type { TeamDocument } from './CreateTeamForm';
 import { UpdateTeamResourceModal } from './UpdateTeamResourceModal';
+import { SelectRoadmapModal } from './SelectRoadmapModal';
 
 export type TeamResourceConfig = {
   resourceId: string;
@@ -22,6 +23,7 @@ type RoadmapSelectorProps = {
 export function RoadmapSelector(props: RoadmapSelectorProps) {
   const { team, teamResourceConfig = [], setTeamResourceConfig } = props;
 
+  const [showSelectRoadmapModal, setShowSelectRoadmapModal] = useState(false);
   const [allRoadmaps, setAllRoadmaps] = useState<PageType[]>([]);
   const [changingRoadmapId, setChangingRoadmapId] = useState<string>('');
   const [error, setError] = useState<string>('');
@@ -126,42 +128,42 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
           }
         />
       )}
-
-      <SearchSelector
-        placeholder={`Search Roadmaps ..`}
-        onSelect={(option) => {
-          const roadmapId = option.value;
-          addTeamResource(roadmapId).finally(() => {
-            pageProgressMessage.set('');
-          });
-        }}
-        options={allRoadmaps
-          .filter((roadmap) => {
-            return !teamResourceConfig
-              .map((c) => c.resourceId)
-              .includes(roadmap.id);
-          })
-          .map((roadmap) => ({
-            value: roadmap.id,
-            label: roadmap.title,
-          }))}
-        searchInputId={'roadmap-input'}
-        inputClassName="mt-2 block w-full rounded-md border px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
-      />
+      {showSelectRoadmapModal && (
+        <SelectRoadmapModal
+          onClose={() => setShowSelectRoadmapModal(false)}
+          teamResourceConfig={teamResourceConfig}
+          allRoadmaps={allRoadmaps}
+          teamId={team?._id!}
+          onRoadmapAdd={(roadmapId) => {
+            addTeamResource(roadmapId).finally(() => {
+              pageProgressMessage.set('');
+            });
+          }}
+          onRoadmapRemove={(roadmapId) => {
+            onRemove(roadmapId).finally(() => {});
+          }}
+        />
+      )}
 
       {!teamResourceConfig.length && (
         <div className="mt-4 rounded-md border px-4 py-12 text-center text-sm text-gray-700">
-          <img
-            alt={'search'}
-            src={SearchIcon}
-            className={'mx-auto mb-5 h-[42px] w-[42px] opacity-10'}
-          />
           <span className="block text-lg font-semibold text-black">
             No roadmaps selected.
           </span>
           <p className={'text-sm text-gray-400'}>
-            Please search and add roadmaps from above
+            Please search and add roadmaps from below
           </p>
+          <div className="mt-4 flex justify-center">
+            <button
+              className="group flex items-center justify-center gap-2 rounded-md bg-black px-4 py-2 transition-opacity hover:opacity-70"
+              onClick={() => setShowSelectRoadmapModal(true)}
+            >
+              <img alt="add" src={PlusWhiteIcon} className="h-5 w-5" />
+              <span className="text-sm text-white focus:outline-none">
+                Add Roadmaps
+              </span>
+            </button>
+          </div>
         </div>
       )}
 
@@ -214,6 +216,19 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
               </div>
             );
           })}
+          <button
+            className="group flex min-h-[110px] flex-col items-center justify-center rounded-md border border-dashed border-gray-300 px-8 transition-colors hover:border-gray-600 hover:bg-gray-50"
+            onClick={() => setShowSelectRoadmapModal(true)}
+          >
+            <img
+              alt="add"
+              src={PlusIcon}
+              className="mb-1 h-6 w-6 opacity-20 transition-opacity group-hover:opacity-100"
+            />
+            <span className="text-sm text-gray-400 transition-colors focus:outline-none group-hover:text-black">
+              Add Roadmaps
+            </span>
+          </button>
         </div>
       )}
     </div>
diff --git a/src/components/CreateTeam/SelectRoadmapModal.tsx b/src/components/CreateTeam/SelectRoadmapModal.tsx
new file mode 100644
index 000000000..27fd56d71
--- /dev/null
+++ b/src/components/CreateTeam/SelectRoadmapModal.tsx
@@ -0,0 +1,114 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { useKeydown } from '../../hooks/use-keydown';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import type { PageType } from '../CommandMenu/CommandMenu';
+import { useToast } from '../../hooks/use-toast';
+import type { TeamResourceConfig } from './RoadmapSelector';
+import CloseIcon from '../../icons/close.svg';
+
+export type SelectRoadmapModalProps = {
+  teamId: string;
+  allRoadmaps: PageType[];
+  onClose: () => void;
+  teamResourceConfig: TeamResourceConfig;
+  onRoadmapAdd: (roadmapId: string) => void;
+  onRoadmapRemove: (roadmapId: string) => void;
+};
+
+export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
+  const {
+    onClose,
+    allRoadmaps,
+    onRoadmapAdd,
+    onRoadmapRemove,
+    teamResourceConfig,
+  } = props;
+  const toast = useToast();
+  const popupBodyEl = useRef<HTMLDivElement>(null);
+
+  const [searchResults, setSearchResults] = useState<PageType[]>(allRoadmaps);
+  const [searchText, setSearchText] = useState('');
+
+  useKeydown('Escape', () => {
+    onClose();
+  });
+
+  useOutsideClick(popupBodyEl, () => {
+    onClose();
+  });
+
+  useEffect(() => {
+    if (searchText.length === 0) {
+      setSearchResults(allRoadmaps);
+      return;
+    }
+
+    const searchResults = allRoadmaps.filter((roadmap) => {
+      return (
+        roadmap.title.toLowerCase().includes(searchText.toLowerCase()) ||
+        roadmap.id.toLowerCase().includes(searchText.toLowerCase())
+      );
+    });
+    setSearchResults(searchResults);
+  }, [searchText, allRoadmaps]);
+
+  return (
+    <div class="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
+      <div class="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto">
+        <div
+          ref={popupBodyEl}
+          class="popup-body relative mt-4 overflow-hidden rounded-lg bg-white shadow"
+        >
+          <button
+            type="button"
+            className="popup-close absolute right-2.5 top-3 ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900"
+            onClick={onClose}
+          >
+            <img src={CloseIcon} className="h-4 w-4" />
+            <span class="sr-only">Close modal</span>
+          </button>
+          <input
+            type="text"
+            placeholder="Search roadmaps"
+            className="block w-full px-4 py-3 outline-none placeholder:text-gray-400"
+            value={searchText}
+            onInput={(e) => setSearchText((e.target as HTMLInputElement).value)}
+          />
+          <div className="min-h-[200px]">
+            <div className="flex flex-wrap items-center gap-2.5 border-t p-4">
+              {searchResults.map((roadmap) => {
+                const isSelected = teamResourceConfig.find(
+                  (r) => r.resourceId === roadmap.id
+                );
+                return (
+                  <div
+                    className={`flex items-center rounded-md border ${
+                      isSelected && 'bg-gray-100'
+                    }`}
+                  >
+                    <span className="px-4">{roadmap.title}</span>
+                    <button
+                      className="flex h-8 w-8 items-center justify-center border-l p-1 leading-none hover:bg-gray-100"
+                      onClick={() => {
+                        if (isSelected) {
+                          onRoadmapRemove(roadmap.id);
+                        } else {
+                          onRoadmapAdd(roadmap.id);
+                        }
+                      }}
+                    >
+                      {isSelected ? '-' : '+'}
+                    </button>
+                  </div>
+                );
+              })}
+              {searchResults.length === 0 && (
+                <div className="text-gray-400">No roadmaps found</div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/icons/plus-white.svg b/src/icons/plus-white.svg
new file mode 100644
index 000000000..4986ebc4b
--- /dev/null
+++ b/src/icons/plus-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-plus-2"><path d="M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4"/><polyline points="14 2 14 8 20 8"/><path d="M3 15h6"/><path d="M6 12v6"/></svg>

From 8c7fb8cab52468e86c69b93850fe4e5e005be7ae Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 25 Jul 2023 16:51:34 +0100
Subject: [PATCH 02/11] Copy change

---
 src/components/CreateTeam/Step0.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CreateTeam/Step0.tsx b/src/components/CreateTeam/Step0.tsx
index cec4e78fa..16ad19114 100644
--- a/src/components/CreateTeam/Step0.tsx
+++ b/src/components/CreateTeam/Step0.tsx
@@ -87,10 +87,10 @@ export function Step0(props: Step0Props) {
                 validTeamType.value === selectedTeamType ? 'opacity-100' : ''
               }`}
             />
-            <span className="mb-1.5 block text-2xl font-bold">
+            <span className="mb-2 block text-2xl font-bold">
               {validTeamType.label}
             </span>
-            <span className="text-sm text-gray-500">
+            <span className="text-sm text-gray-500 leading-[21px]">
               {validTeamType.description}
             </span>
           </button>

From 3182e2a5993ee69683f9c7fbf7e09469197cefe4 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Tue, 25 Jul 2023 22:36:49 +0600
Subject: [PATCH 03/11] Show current user progress first (#4255)

* wip: progress sorting

* chore: show current user progress first

* fix: team guard

* fix: user progress sort
---
 src/components/TeamDropdown/TeamDropdown.tsx     |  5 ++---
 .../TeamProgress/MemberProgressItem.tsx          |  2 +-
 src/components/TeamProgress/TeamProgressPage.tsx | 16 ++++++++++------
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/TeamDropdown/TeamDropdown.tsx b/src/components/TeamDropdown/TeamDropdown.tsx
index 5fccaa30a..a4124ef7d 100644
--- a/src/components/TeamDropdown/TeamDropdown.tsx
+++ b/src/components/TeamDropdown/TeamDropdown.tsx
@@ -101,9 +101,8 @@ export function TeamDropdown() {
             <img
               src={
                 selectedAvatar
-                  ? `${
-                      import.meta.env.PUBLIC_AVATAR_BASE_URL
-                    }/${selectedAvatar}`
+                  ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL
+                  }/${selectedAvatar}`
                   : '/images/default-avatar.png'
               }
               alt=""
diff --git a/src/components/TeamProgress/MemberProgressItem.tsx b/src/components/TeamProgress/MemberProgressItem.tsx
index 99d5a1c53..4c65f7703 100644
--- a/src/components/TeamProgress/MemberProgressItem.tsx
+++ b/src/components/TeamProgress/MemberProgressItem.tsx
@@ -60,7 +60,7 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
                 >
                   <span className="relative z-10 flex items-center justify-between text-sm">
                     <span className="inline-grid">
-                    <span className={'truncate'}>{progress.resourceTitle}</span>
+                      <span className={'truncate'}>{progress.resourceTitle}</span>
                     </span>
                     <span className="text-xs text-gray-400 shrink-0 ml-1.5">
                       {progress.done} / {progress.total}
diff --git a/src/components/TeamProgress/TeamProgressPage.tsx b/src/components/TeamProgress/TeamProgressPage.tsx
index 51188d101..0ab12507a 100644
--- a/src/components/TeamProgress/TeamProgressPage.tsx
+++ b/src/components/TeamProgress/TeamProgressPage.tsx
@@ -10,6 +10,7 @@ import { GroupRoadmapItem } from './GroupRoadmapItem';
 import { setUrlParams } from '../../lib/browser';
 import { getUrlParams } from '../../lib/browser';
 import { $toastMessage } from '../../stores/toast';
+import { useAuth } from '../../hooks/use-auth';
 
 export type UserProgress = {
   resourceTitle: string;
@@ -55,6 +56,7 @@ export function TeamProgressPage() {
   const [isLoading, setIsLoading] = useState(true);
   const toast = useToast();
   const currentTeam = useStore($currentTeam);
+  const user = useAuth();
 
   const [teamMembers, setTeamMembers] = useState<TeamMember[]>([]);
   const [selectedGrouping, setSelectedGrouping] = useState<
@@ -70,7 +72,10 @@ export function TeamProgressPage() {
       return;
     }
 
-    setTeamMembers(response);
+    const currentUserProgress = response.find((member) => member.email === user?.email)
+    const otherUserProgresses = response.filter(member => member.email !== user?.email);
+    const allUserProgresses = currentUserProgress ? [currentUserProgress, ...otherUserProgresses] : otherUserProgresses;
+    setTeamMembers(allUserProgresses);
   }
 
   useEffect(() => {
@@ -134,11 +139,10 @@ export function TeamProgressPage() {
       <div className="flex items-center gap-2">
         {groupingTypes.map((grouping) => (
           <button
-            className={`rounded-md border p-1 px-2 text-sm ${
-              selectedGrouping === grouping.value
-                ? ' border-gray-400 bg-gray-200 '
-                : ''
-            }`}
+            className={`rounded-md border p-1 px-2 text-sm ${selectedGrouping === grouping.value
+              ? ' border-gray-400 bg-gray-200 '
+              : ''
+              }`}
             onClick={() => setSelectedGrouping(grouping.value)}
           >
             {grouping.label}

From 0addc56123818aba26e921dcd9367bc940ac743f Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 25 Jul 2023 18:24:10 +0100
Subject: [PATCH 04/11] Update the select roadmaps modal

---
 src/components/CommandMenu/CommandMenu.tsx    |  1 +
 src/components/CreateTeam/RoadmapSelector.tsx | 69 +++++++-------
 .../CreateTeam/SelectRoadmapModal.tsx         | 94 +++++++++++++------
 .../CreateTeam/SelectRoadmapModalItem.tsx     | 34 +++++++
 src/components/CreateTeam/Step2.tsx           |  5 +-
 src/pages/pages.json.ts                       |  3 +
 6 files changed, 141 insertions(+), 65 deletions(-)
 create mode 100644 src/components/CreateTeam/SelectRoadmapModalItem.tsx

diff --git a/src/components/CommandMenu/CommandMenu.tsx b/src/components/CommandMenu/CommandMenu.tsx
index 522134de8..f380ad8bf 100644
--- a/src/components/CommandMenu/CommandMenu.tsx
+++ b/src/components/CommandMenu/CommandMenu.tsx
@@ -18,6 +18,7 @@ export type PageType = {
   group: string;
   icon?: string;
   isProtected?: boolean;
+  metadata?: Record<string, any>;
 };
 
 const defaultPages: PageType[] = [
diff --git a/src/components/CreateTeam/RoadmapSelector.tsx b/src/components/CreateTeam/RoadmapSelector.tsx
index 96860b062..5eeb2a0d1 100644
--- a/src/components/CreateTeam/RoadmapSelector.tsx
+++ b/src/components/CreateTeam/RoadmapSelector.tsx
@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'preact/hooks';
 import { httpGet, httpPut } from '../../lib/http';
 import type { PageType } from '../CommandMenu/CommandMenu';
-import PlusIcon from '../../icons/plus.svg';
-import PlusWhiteIcon from '../../icons/plus-white.svg';
+import ChevronDownIcon from '../../icons/chevron-down.svg';
 import { pageProgressMessage } from '../../stores/page';
 import type { TeamDocument } from './CreateTeamForm';
 import { UpdateTeamResourceModal } from './UpdateTeamResourceModal';
@@ -145,26 +144,41 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
         />
       )}
 
-      {!teamResourceConfig.length && (
-        <div className="mt-4 rounded-md border px-4 py-12 text-center text-sm text-gray-700">
-          <span className="block text-lg font-semibold text-black">
-            No roadmaps selected.
-          </span>
-          <p className={'text-sm text-gray-400'}>
-            Please search and add roadmaps from below
-          </p>
-          <div className="mt-4 flex justify-center">
-            <button
-              className="group flex items-center justify-center gap-2 rounded-md bg-black px-4 py-2 transition-opacity hover:opacity-70"
-              onClick={() => setShowSelectRoadmapModal(true)}
-            >
-              <img alt="add" src={PlusWhiteIcon} className="h-5 w-5" />
-              <span className="text-sm text-white focus:outline-none">
-                Add Roadmaps
-              </span>
-            </button>
+      <div
+        className="mt-3 flex cursor-text items-center justify-between rounded-md border border-gray-300 px-3 py-2.5 hover:border-gray-400/50 hover:bg-gray-50"
+        role="button"
+        onClick={() => {
+          setShowSelectRoadmapModal(true);
+        }}
+      >
+        {teamResourceConfig.length > 0 && (
+          <div className="flex flex-col">
+            <p className="mb-1.5 text-base font-medium text-gray-800">
+              {teamResourceConfig.length} roadmaps selected
+            </p>
+            <p className="text-sm text-gray-400">
+              Click to add or change selection
+            </p>
           </div>
-        </div>
+        )}
+
+        {!teamResourceConfig.length && (
+          <div className="flex flex-col">
+            <p className="text-base text-gray-400">Click to select roadmaps</p>
+          </div>
+        )}
+
+        <img
+          alt={'roadmap'}
+          src={ChevronDownIcon}
+          className={'relative top-[1px] h-[17px] w-[17px] opacity-40'}
+        />
+      </div>
+
+      {!teamResourceConfig.length && (
+        <p className={'mb-3 mt-2 text-base text-gray-400'}>
+          No roadmaps selected.
+        </p>
       )}
 
       {teamResourceConfig.length > 0 && (
@@ -216,19 +230,6 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
               </div>
             );
           })}
-          <button
-            className="group flex min-h-[110px] flex-col items-center justify-center rounded-md border border-dashed border-gray-300 px-8 transition-colors hover:border-gray-600 hover:bg-gray-50"
-            onClick={() => setShowSelectRoadmapModal(true)}
-          >
-            <img
-              alt="add"
-              src={PlusIcon}
-              className="mb-1 h-6 w-6 opacity-20 transition-opacity group-hover:opacity-100"
-            />
-            <span className="text-sm text-gray-400 transition-colors focus:outline-none group-hover:text-black">
-              Add Roadmaps
-            </span>
-          </button>
         </div>
       )}
     </div>
diff --git a/src/components/CreateTeam/SelectRoadmapModal.tsx b/src/components/CreateTeam/SelectRoadmapModal.tsx
index 27fd56d71..cf4a33856 100644
--- a/src/components/CreateTeam/SelectRoadmapModal.tsx
+++ b/src/components/CreateTeam/SelectRoadmapModal.tsx
@@ -2,9 +2,9 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 import { useKeydown } from '../../hooks/use-keydown';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import type { PageType } from '../CommandMenu/CommandMenu';
-import { useToast } from '../../hooks/use-toast';
 import type { TeamResourceConfig } from './RoadmapSelector';
 import CloseIcon from '../../icons/close.svg';
+import { SelectRoadmapModalItem } from './SelectRoadmapModalItem';
 
 export type SelectRoadmapModalProps = {
   teamId: string;
@@ -23,8 +23,8 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
     onRoadmapRemove,
     teamResourceConfig,
   } = props;
-  const toast = useToast();
   const popupBodyEl = useRef<HTMLDivElement>(null);
+  const searchInputEl = useRef<HTMLInputElement>(null);
 
   const [searchResults, setSearchResults] = useState<PageType[]>(allRoadmaps);
   const [searchText, setSearchText] = useState('');
@@ -37,6 +37,14 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
     onClose();
   });
 
+  useEffect(() => {
+    if (!searchInputEl.current) {
+      return;
+    }
+
+    searchInputEl.current.focus();
+  }, [searchInputEl]);
+
   useEffect(() => {
     if (searchText.length === 0) {
       setSearchResults(allRoadmaps);
@@ -52,43 +60,54 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
     setSearchResults(searchResults);
   }, [searchText, allRoadmaps]);
 
+  const roleBasedRoadmaps = searchResults.filter((roadmap) =>
+    roadmap?.metadata?.tags?.includes('role-roadmap')
+  );
+  const skillBasedRoadmaps = searchResults.filter((roadmap) =>
+    roadmap?.metadata?.tags?.includes('skill-roadmap')
+  );
+
   return (
     <div class="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
-      <div class="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto">
+      <div class="relative mx-auto h-full w-full max-w-2xl p-4 md:h-auto">
         <div
           ref={popupBodyEl}
           class="popup-body relative mt-4 overflow-hidden rounded-lg bg-white shadow"
         >
           <button
             type="button"
-            className="popup-close absolute right-2.5 top-3 ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900"
+            className="popup-close absolute right-2.5 top-3 ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-100 hover:text-gray-900"
             onClick={onClose}
           >
-            <img src={CloseIcon} className="h-4 w-4" />
+            <img alt={'close'} src={CloseIcon} className="h-4 w-4" />
             <span class="sr-only">Close modal</span>
           </button>
           <input
+            ref={searchInputEl}
             type="text"
             placeholder="Search roadmaps"
-            className="block w-full px-4 py-3 outline-none placeholder:text-gray-400"
+            className="block w-full border-b px-5 pb-3.5 pt-4 outline-none placeholder:text-gray-400"
             value={searchText}
             onInput={(e) => setSearchText((e.target as HTMLInputElement).value)}
           />
-          <div className="min-h-[200px]">
-            <div className="flex flex-wrap items-center gap-2.5 border-t p-4">
-              {searchResults.map((roadmap) => {
-                const isSelected = teamResourceConfig.find(
-                  (r) => r.resourceId === roadmap.id
-                );
-                return (
-                  <div
-                    className={`flex items-center rounded-md border ${
-                      isSelected && 'bg-gray-100'
-                    }`}
-                  >
-                    <span className="px-4">{roadmap.title}</span>
-                    <button
-                      className="flex h-8 w-8 items-center justify-center border-l p-1 leading-none hover:bg-gray-100"
+          <div className="min-h-[200px] p-4">
+            <span className="block pb-3 text-xs uppercase text-gray-400">
+              Role Based Roadmaps
+            </span>
+            {roleBasedRoadmaps.length === 0 && (
+              <p className="mb-1 flex h-full items-start text-sm italic text-gray-400"></p>
+            )}
+            {roleBasedRoadmaps.length > 0 && (
+              <div className="mb-5 flex flex-wrap items-center gap-2">
+                {roleBasedRoadmaps.map((roadmap) => {
+                  const isSelected = !!teamResourceConfig.find(
+                    (r) => r.resourceId === roadmap.id
+                  );
+
+                  return (
+                    <SelectRoadmapModalItem
+                      title={roadmap.title}
+                      isSelected={isSelected}
                       onClick={() => {
                         if (isSelected) {
                           onRoadmapRemove(roadmap.id);
@@ -96,15 +115,34 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
                           onRoadmapAdd(roadmap.id);
                         }
                       }}
-                    >
-                      {isSelected ? '-' : '+'}
-                    </button>
-                  </div>
+                    />
+                  );
+                })}
+              </div>
+            )}
+            <span className="block pb-3 text-xs uppercase text-gray-400">
+              Skill Based Roadmaps
+            </span>
+            <div className="flex flex-wrap items-center gap-2">
+              {skillBasedRoadmaps.map((roadmap) => {
+                const isSelected = !!teamResourceConfig.find(
+                  (r) => r.resourceId === roadmap.id
+                );
+
+                return (
+                  <SelectRoadmapModalItem
+                    title={roadmap.title}
+                    isSelected={isSelected}
+                    onClick={() => {
+                      if (isSelected) {
+                        onRoadmapRemove(roadmap.id);
+                      } else {
+                        onRoadmapAdd(roadmap.id);
+                      }
+                    }}
+                  />
                 );
               })}
-              {searchResults.length === 0 && (
-                <div className="text-gray-400">No roadmaps found</div>
-              )}
             </div>
           </div>
         </div>
diff --git a/src/components/CreateTeam/SelectRoadmapModalItem.tsx b/src/components/CreateTeam/SelectRoadmapModalItem.tsx
new file mode 100644
index 000000000..e2a579e94
--- /dev/null
+++ b/src/components/CreateTeam/SelectRoadmapModalItem.tsx
@@ -0,0 +1,34 @@
+import type { SelectRoadmapModalProps } from './SelectRoadmapModal';
+
+type SelectRoadmapModalItemProps = {
+  title: string;
+  isSelected: boolean;
+  onClick: () => void;
+};
+
+export function SelectRoadmapModalItem(props: SelectRoadmapModalItemProps) {
+  const { isSelected, onClick, title } = props;
+  return (
+    <button
+      className={`group flex min-h-[35px] items-stretch overflow-hidden rounded-md text-sm ${
+        !isSelected
+          ? 'border border-gray-300 hover:bg-gray-100'
+          : 'bg-black text-white transition-colors hover:bg-gray-700'
+      }`}
+      onClick={onClick}
+    >
+      <span className="flex items-center px-3">{title}</span>
+      {isSelected && (
+        <span className="flex items-center bg-gray-700 px-3 text-xs text-white transition-colors">
+          &times;
+        </span>
+      )}
+
+      {!isSelected && (
+        <span className="flex items-center bg-gray-100 px-2.5 text-xs text-gray-500">
+          +
+        </span>
+      )}
+    </button>
+  );
+}
diff --git a/src/components/CreateTeam/Step2.tsx b/src/components/CreateTeam/Step2.tsx
index 723456cd8..1e7c37141 100644
--- a/src/components/CreateTeam/Step2.tsx
+++ b/src/components/CreateTeam/Step2.tsx
@@ -17,10 +17,9 @@ export function Step2(props: Step2Props) {
     <>
       <div className="mt-4 flex w-full flex-col">
         <div className="mb-1 mt-2">
-          <h2 className="mb-2 text-2xl font-bold">Select Roadmaps</h2>
+          <h2 className="mb-1.5 text-2xl font-bold">Select Roadmaps</h2>
           <p className="text-sm text-gray-700">
-            Picks the roadmaps to be made available to your team for tracking.
-            You can always add more later.
+            You can always add and customize your roadmaps later.
           </p>
         </div>
 
diff --git a/src/pages/pages.json.ts b/src/pages/pages.json.ts
index 49146fb76..ef972fbe1 100644
--- a/src/pages/pages.json.ts
+++ b/src/pages/pages.json.ts
@@ -16,6 +16,9 @@ export async function get() {
         url: `/${roadmap.id}`,
         title: roadmap.frontmatter.briefTitle,
         group: 'Roadmaps',
+        metadata: {
+          tags: roadmap.frontmatter.tags,
+        },
       })),
       ...bestPractices.map((bestPractice) => ({
         id: bestPractice.id,

From 5cf286a7535c43022b7abb17201ceae2ef54c089 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 25 Jul 2023 18:32:43 +0100
Subject: [PATCH 05/11] Update team sizes and copy

---
 src/components/CreateTeam/Step1.tsx | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/CreateTeam/Step1.tsx b/src/components/CreateTeam/Step1.tsx
index 2be5b7138..2df45c47d 100644
--- a/src/components/CreateTeam/Step1.tsx
+++ b/src/components/CreateTeam/Step1.tsx
@@ -5,10 +5,12 @@ import type { TeamDocument } from './CreateTeamForm';
 import { NextButton } from './NextButton';
 
 export const validTeamSizes = [
-  '0-1',
-  '2-10',
-  '11-50',
-  '51-200',
+  '1-5',
+  '6-10',
+  '11-25',
+  '26-50',
+  '51-100',
+  '101-200',
   '201-500',
   '501-1000',
   '1000+',
@@ -134,7 +136,7 @@ export function Step1(props: Step1Props) {
           autofocus={true}
           id="name"
           className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
-          placeholder="roadmap.sh"
+          placeholder="Roadmap Inc."
           disabled={isLoading}
           required
           value={name}
@@ -167,7 +169,7 @@ export function Step1(props: Step1Props) {
       {selectedTeamType === 'company' && (
         <div className="mt-4 flex w-full flex-col">
           <label for="website" className="text-sm leading-none text-slate-500">
-            LinkedIn URL
+            Company LinkedIn URL
           </label>
           <input
             type="url"
@@ -206,7 +208,7 @@ export function Step1(props: Step1Props) {
             for="team-size"
             className='text-sm leading-none text-slate-500 after:text-red-400 after:content-["*"]'
           >
-            Company Size
+            Tech Team Size
           </label>
           <select
             name="team-size"
@@ -229,6 +231,12 @@ export function Step1(props: Step1Props) {
         </div>
       )}
 
+      {error && (
+        <div className="mt-4 flex w-full flex-col">
+          <span className="text-sm text-red-500">{error}</span>
+        </div>
+      )}
+
       <div className="mt-4 flex flex-row items-center justify-between gap-2">
         <button
           type="button"

From 5d3202e065b7aacdf4e8b049de165e8e40c7935d Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 25 Jul 2023 18:56:40 +0100
Subject: [PATCH 06/11] Add skip button for teams

---
 src/components/CreateTeam/Step2.tsx          | 35 ++++++++++++++------
 src/components/TeamDropdown/TeamDropdown.tsx |  6 ----
 src/components/TeamSidebar.tsx               | 28 +++++++++++-----
 3 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/src/components/CreateTeam/Step2.tsx b/src/components/CreateTeam/Step2.tsx
index 1e7c37141..c629020b7 100644
--- a/src/components/CreateTeam/Step2.tsx
+++ b/src/components/CreateTeam/Step2.tsx
@@ -41,17 +41,30 @@ export function Step2(props: Step2Props) {
           <span className="mr-1">&larr;</span>
           Previous Step
         </button>
-        <button
-          type="submit"
-          disabled={teamResourceConfig.length === 0}
-          onClick={onNext}
-          className={
-            'rounded-md border bg-black px-4 py-2 text-white disabled:opacity-50'
-          }
-        >
-          Next Step
-          <span className="ml-1">&rarr;</span>
-        </button>
+        <div className={'flex gap-2'}>
+          {teamResourceConfig.length === 0 && (
+            <button
+              type="button"
+              onClick={onNext}
+              className={
+                'rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black'
+              }
+            >
+              Skip for Now
+            </button>
+          )}
+          <button
+            type="submit"
+            disabled={teamResourceConfig.length === 0}
+            onClick={onNext}
+            className={
+              'rounded-md border bg-black px-4 py-2 text-white disabled:opacity-50'
+            }
+          >
+            Next Step
+            <span className="ml-1">&rarr;</span>
+          </button>
+        </div>
       </div>
     </>
   );
diff --git a/src/components/TeamDropdown/TeamDropdown.tsx b/src/components/TeamDropdown/TeamDropdown.tsx
index a4124ef7d..2fed4df15 100644
--- a/src/components/TeamDropdown/TeamDropdown.tsx
+++ b/src/components/TeamDropdown/TeamDropdown.tsx
@@ -155,12 +155,6 @@ export function TeamDropdown() {
                         Invite
                       </span>
                     )}
-
-                    {team.roadmaps.length === 0 && (
-                      <span className="flex rounded-md bg-gray-500 px-2 text-xs text-white">
-                        Draft
-                      </span>
-                    )}
                   </a>
                 </li>
               );
diff --git a/src/components/TeamSidebar.tsx b/src/components/TeamSidebar.tsx
index aa370cab2..7c26a4238 100644
--- a/src/components/TeamSidebar.tsx
+++ b/src/components/TeamSidebar.tsx
@@ -8,13 +8,14 @@ import MapIcon from '../icons/map.svg';
 import GroupIcon from '../icons/group.svg';
 import { useState } from 'preact/hooks';
 import { useStore } from '@nanostores/preact';
-import { $canManageCurrentTeam } from '../stores/team';
+import { $canManageCurrentTeam, $currentTeam } from '../stores/team';
+import { WarningIcon } from './ReactIcons/WarningIcon';
 
 export const TeamSidebar: FunctionalComponent<{
   activePageId: string;
 }> = ({ activePageId, children }) => {
   const [menuShown, setMenuShown] = useState(false);
-  const canManageCurrentTeam = useStore($canManageCurrentTeam);
+  const currentTeam = useStore($currentTeam);
 
   const { teamId } = useTeamId();
 
@@ -30,6 +31,7 @@ export const TeamSidebar: FunctionalComponent<{
       href: `/team/roadmaps?t=${teamId}`,
       id: 'roadmaps',
       icon: MapIcon,
+      hasWarning: currentTeam?.roadmaps?.length === 0,
     },
     {
       title: 'Members',
@@ -120,13 +122,21 @@ export const TeamSidebar: FunctionalComponent<{
                           : 'border-r-transparent text-gray-500 hover:border-r-gray-300'
                       }`}
                     >
-                      <span class="flex flex-grow items-center">
-                        <img
-                          alt="menu icon"
-                          src={sidebarLink.icon}
-                          className="mr-2 h-4 w-4"
-                        />
-                        {sidebarLink.title}
+                      <span class="flex flex-grow items-center justify-between">
+                        <span className="flex">
+                          <img
+                            alt="menu icon"
+                            src={sidebarLink.icon}
+                            className="mr-2 h-4 w-4"
+                          />
+                          {sidebarLink.title}
+                        </span>
+                        {sidebarLink.hasWarning && (
+                          <span class="relative mr-1 flex items-center">
+                            <span class="relative rounded-full bg-red-200 p-1 text-xs" />
+                            <span class="absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-red-400 p-1 text-xs" />
+                          </span>
+                        )}
                       </span>
                     </a>
                   </li>

From 5bc33cb5276b873ae889e168bc5a37935cd61861 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 25 Jul 2023 20:05:47 +0100
Subject: [PATCH 07/11] Member progress item sorting

---
 src/components/TeamDropdown/TeamDropdown.tsx  |  4 +--
 .../TeamMembers/TeamMembersPage.tsx           |  4 +--
 .../TeamProgress/MemberProgressItem.tsx       | 27 ++++++++++++-----
 .../TeamProgress/TeamProgressPage.tsx         | 30 +++++++++++++------
 4 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/src/components/TeamDropdown/TeamDropdown.tsx b/src/components/TeamDropdown/TeamDropdown.tsx
index 2fed4df15..bd191db74 100644
--- a/src/components/TeamDropdown/TeamDropdown.tsx
+++ b/src/components/TeamDropdown/TeamDropdown.tsx
@@ -95,7 +95,7 @@ export function TeamDropdown() {
             {pendingTeamIds.length}
           </span>
         )}
-        <div className="flex items-center gap-2">
+        <div className="inline-grid grid-cols-[16px_auto] items-center gap-1.5 mr-1.5">
           {isLoading && <Spinner className="h-4 w-4" isDualRing={false} />}
           {!isLoading && (
             <img
@@ -149,7 +149,7 @@ export function TeamDropdown() {
                     className="flex w-full cursor-pointer items-center gap-2 rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                     href={`${pageLink}`}
                   >
-                    <span className="flex-grow truncate">{team.name}</span>
+                    <span className="flex-grow min-w-0 truncate">{team.name}</span>
                     {pendingTeamIds.includes(team._id) && (
                       <span className="flex rounded-md bg-red-500 px-2 text-xs text-white">
                         Invite
diff --git a/src/components/TeamMembers/TeamMembersPage.tsx b/src/components/TeamMembers/TeamMembersPage.tsx
index 67276ba88..9133de018 100644
--- a/src/components/TeamMembers/TeamMembersPage.tsx
+++ b/src/components/TeamMembers/TeamMembersPage.tsx
@@ -163,8 +163,8 @@ export function TeamMembersPage() {
                       <MemberRoleBadge role={member.role} />
                     </span>
                     <div className="flex items-center">
-                      <h3 className="flex items-center font-medium">
-                        {member.name}
+                      <h3 className="inline-grid grid-cols-[auto_auto] items-center font-medium">
+                        <span className="truncate">{member.name}</span>
                         {member.userId === user?.id && (
                           <span className="ml-2 hidden text-xs font-normal text-blue-500 sm:inline">
                             You
diff --git a/src/components/TeamProgress/MemberProgressItem.tsx b/src/components/TeamProgress/MemberProgressItem.tsx
index 4c65f7703..9942fca23 100644
--- a/src/components/TeamProgress/MemberProgressItem.tsx
+++ b/src/components/TeamProgress/MemberProgressItem.tsx
@@ -5,9 +5,10 @@ import { MemberProgressModal } from './MemberProgressModal';
 type MemberProgressItemProps = {
   teamId: string;
   member: TeamMember;
+  isMyProgress?: boolean;
 };
 export function MemberProgressItem(props: MemberProgressItemProps) {
-  const { member, teamId } = props;
+  const { member, teamId, isMyProgress = false } = props;
 
   const memberProgress = member?.progress?.sort((a, b) => {
     return b.done - a.done;
@@ -31,10 +32,10 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
       )}
 
       <div
-        className="flex h-full min-h-[270px] flex-col rounded-md border"
+        className={`flex h-full min-h-[270px] flex-col overflow-hidden rounded-md border`}
         key={member._id}
       >
-        <div className="flex items-center gap-3 border-b p-3">
+        <div className={`relative flex items-center gap-3 border-b p-3`}>
           <img
             src={
               member.avatar
@@ -44,8 +45,18 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
             alt={member.name || ''}
             className="h-8 w-8 rounded-full"
           />
-          <div className="inline-grid">
-            <h3 className="truncate font-medium">{member.name}</h3>
+          <div className="inline-grid w-full">
+            {!isMyProgress && (
+              <h3 className="truncate font-medium">{member.name}</h3>
+            )}
+            {isMyProgress && (
+              <div className="inline-grid grid-cols-[auto,32px] items-center gap-1.5">
+                <h3 className="truncate font-medium">{member.name}</h3>
+                <span className="rounded-md bg-red-500 text-center py-0.5 text-xs text-white">
+                  You
+                </span>
+              </div>
+            )}
             <p className="truncate text-sm text-gray-500">{member.email}</p>
           </div>
         </div>
@@ -60,9 +71,11 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
                 >
                   <span className="relative z-10 flex items-center justify-between text-sm">
                     <span className="inline-grid">
-                      <span className={'truncate'}>{progress.resourceTitle}</span>
+                      <span className={'truncate'}>
+                        {progress.resourceTitle}
+                      </span>
                     </span>
-                    <span className="text-xs text-gray-400 shrink-0 ml-1.5">
+                    <span className="ml-1.5 shrink-0 text-xs text-gray-400">
                       {progress.done} / {progress.total}
                     </span>
                   </span>
diff --git a/src/components/TeamProgress/TeamProgressPage.tsx b/src/components/TeamProgress/TeamProgressPage.tsx
index 0ab12507a..14aa1a69f 100644
--- a/src/components/TeamProgress/TeamProgressPage.tsx
+++ b/src/components/TeamProgress/TeamProgressPage.tsx
@@ -72,10 +72,17 @@ export function TeamProgressPage() {
       return;
     }
 
-    const currentUserProgress = response.find((member) => member.email === user?.email)
-    const otherUserProgresses = response.filter(member => member.email !== user?.email);
-    const allUserProgresses = currentUserProgress ? [currentUserProgress, ...otherUserProgresses] : otherUserProgresses;
-    setTeamMembers(allUserProgresses);
+    setTeamMembers(
+      response.sort((a, b) => {
+        if (a.email === user?.email) {
+          return -1;
+        }
+        if (b.email === user?.email) {
+          return 1;
+        }
+        return 0;
+      })
+    );
   }
 
   useEffect(() => {
@@ -139,10 +146,11 @@ export function TeamProgressPage() {
       <div className="flex items-center gap-2">
         {groupingTypes.map((grouping) => (
           <button
-            className={`rounded-md border p-1 px-2 text-sm ${selectedGrouping === grouping.value
-              ? ' border-gray-400 bg-gray-200 '
-              : ''
-              }`}
+            className={`rounded-md border p-1 px-2 text-sm ${
+              selectedGrouping === grouping.value
+                ? ' border-gray-400 bg-gray-200 '
+                : ''
+            }`}
             onClick={() => setSelectedGrouping(grouping.value)}
           >
             {grouping.label}
@@ -163,7 +171,11 @@ export function TeamProgressPage() {
         {selectedGrouping === 'member' && (
           <div className="grid gap-4 sm:grid-cols-2">
             {teamMembers.map((member) => (
-              <MemberProgressItem teamId={teamId} member={member} />
+              <MemberProgressItem
+                teamId={teamId}
+                member={member}
+                isMyProgress={member?.email === user?.email}
+              />
             ))}
           </div>
         )}

From 36cd03f14fabae248bdd0bd24c24f59d33c8ee1f Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 25 Jul 2023 20:50:40 +0100
Subject: [PATCH 08/11] Use the same add roadmap modal

---
 src/components/CreateTeam/RoadmapSelector.tsx |  26 ++--
 src/components/CreateTeam/Step2.tsx           |  37 ++----
 src/components/TeamDropdown/TeamDropdown.tsx  |   4 -
 src/components/TeamRoadmaps.tsx               | 114 +++++++++++++-----
 src/components/Toast.tsx                      |   2 +-
 5 files changed, 112 insertions(+), 71 deletions(-)

diff --git a/src/components/CreateTeam/RoadmapSelector.tsx b/src/components/CreateTeam/RoadmapSelector.tsx
index 5eeb2a0d1..0dc617a97 100644
--- a/src/components/CreateTeam/RoadmapSelector.tsx
+++ b/src/components/CreateTeam/RoadmapSelector.tsx
@@ -14,13 +14,13 @@ export type TeamResourceConfig = {
 }[];
 
 type RoadmapSelectorProps = {
-  team: TeamDocument;
+  teamId: string;
   teamResourceConfig: TeamResourceConfig;
   setTeamResourceConfig: (config: TeamResourceConfig) => void;
 };
 
 export function RoadmapSelector(props: RoadmapSelectorProps) {
-  const { team, teamResourceConfig = [], setTeamResourceConfig } = props;
+  const { teamId, teamResourceConfig = [], setTeamResourceConfig } = props;
 
   const [showSelectRoadmapModal, setShowSelectRoadmapModal] = useState(false);
   const [allRoadmaps, setAllRoadmaps] = useState<PageType[]>([]);
@@ -51,15 +51,15 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
   }
 
   async function deleteResource(roadmapId: string) {
-    if (!team?._id) {
+    if (!teamId) {
       return;
     }
 
     pageProgressMessage.set(`Deleting resource`);
     const { error, response } = await httpPut<TeamResourceConfig>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-delete-team-resource-config/${
-        team._id
-      }`,
+      `${
+        import.meta.env.PUBLIC_API_URL
+      }/v1-delete-team-resource-config/${teamId}`,
       {
         resourceId: roadmapId,
         resourceType: 'roadmap',
@@ -83,17 +83,17 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
   }
 
   async function addTeamResource(roadmapId: string) {
-    if (!team?._id) {
+    if (!teamId) {
       return;
     }
 
     pageProgressMessage.set(`Adding roadmap to team`);
     const { error, response } = await httpPut<TeamResourceConfig>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-update-team-resource-config/${
-        team._id
-      }`,
+      `${
+        import.meta.env.PUBLIC_API_URL
+      }/v1-update-team-resource-config/${teamId}`,
       {
-        teamId: team._id,
+        teamId: teamId,
         resourceId: roadmapId,
         resourceType: 'roadmap',
         removed: [],
@@ -119,7 +119,7 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
           onClose={() => setChangingRoadmapId('')}
           resourceId={changingRoadmapId}
           resourceType={'roadmap'}
-          teamId={team?._id!}
+          teamId={teamId}
           setTeamResourceConfig={setTeamResourceConfig}
           defaultRemovedItems={
             teamResourceConfig.find((c) => c.resourceId === changingRoadmapId)
@@ -132,7 +132,7 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
           onClose={() => setShowSelectRoadmapModal(false)}
           teamResourceConfig={teamResourceConfig}
           allRoadmaps={allRoadmaps}
-          teamId={team?._id!}
+          teamId={teamId}
           onRoadmapAdd={(roadmapId) => {
             addTeamResource(roadmapId).finally(() => {
               pageProgressMessage.set('');
diff --git a/src/components/CreateTeam/Step2.tsx b/src/components/CreateTeam/Step2.tsx
index c629020b7..71b1aa600 100644
--- a/src/components/CreateTeam/Step2.tsx
+++ b/src/components/CreateTeam/Step2.tsx
@@ -24,7 +24,7 @@ export function Step2(props: Step2Props) {
         </div>
 
         <RoadmapSelector
-          team={team}
+          teamId={team._id!}
           teamResourceConfig={teamResourceConfig}
           setTeamResourceConfig={setTeamResourceConfig}
         />
@@ -41,30 +41,17 @@ export function Step2(props: Step2Props) {
           <span className="mr-1">&larr;</span>
           Previous Step
         </button>
-        <div className={'flex gap-2'}>
-          {teamResourceConfig.length === 0 && (
-            <button
-              type="button"
-              onClick={onNext}
-              className={
-                'rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black'
-              }
-            >
-              Skip for Now
-            </button>
-          )}
-          <button
-            type="submit"
-            disabled={teamResourceConfig.length === 0}
-            onClick={onNext}
-            className={
-              'rounded-md border bg-black px-4 py-2 text-white disabled:opacity-50'
-            }
-          >
-            Next Step
-            <span className="ml-1">&rarr;</span>
-          </button>
-        </div>
+        <button
+          type="submit"
+          disabled={teamResourceConfig.length === 0}
+          onClick={onNext}
+          className={
+            'rounded-md border bg-black px-4 py-2 text-white disabled:opacity-50'
+          }
+        >
+          Next Step
+          <span className="ml-1">&rarr;</span>
+        </button>
       </div>
     </>
   );
diff --git a/src/components/TeamDropdown/TeamDropdown.tsx b/src/components/TeamDropdown/TeamDropdown.tsx
index bd191db74..dce18d218 100644
--- a/src/components/TeamDropdown/TeamDropdown.tsx
+++ b/src/components/TeamDropdown/TeamDropdown.tsx
@@ -139,10 +139,6 @@ export function TeamDropdown() {
                 pageLink = `/team/progress?t=${team._id}`;
               }
 
-              if (team.roadmaps.length === 0) {
-                pageLink = `/team/new?t=${team._id}&s=2`;
-              }
-
               return (
                 <li>
                   <a
diff --git a/src/components/TeamRoadmaps.tsx b/src/components/TeamRoadmaps.tsx
index c27b4282f..880994b3f 100644
--- a/src/components/TeamRoadmaps.tsx
+++ b/src/components/TeamRoadmaps.tsx
@@ -5,13 +5,14 @@ import type { TeamResourceConfig } from './CreateTeam/RoadmapSelector';
 import { httpGet, httpPut } from '../lib/http';
 import { pageProgressMessage } from '../stores/page';
 import ExternalLinkIcon from '../icons/external-link.svg';
+import RoadmapIcon from '../icons/roadmap.svg';
 import PlusIcon from '../icons/plus.svg';
 import type { PageType } from './CommandMenu/CommandMenu';
 import { UpdateTeamResourceModal } from './CreateTeam/UpdateTeamResourceModal';
-import { AddTeamRoadmap } from './AddTeamRoadmap';
 import { useStore } from '@nanostores/preact';
 import { $canManageCurrentTeam } from '../stores/team';
-import {useToast} from "../hooks/use-toast";
+import { useToast } from '../hooks/use-toast';
+import { SelectRoadmapModal } from './CreateTeam/SelectRoadmapModal';
 
 export function TeamRoadmaps() {
   const { t: teamId } = getUrlParams();
@@ -20,6 +21,7 @@ export function TeamRoadmaps() {
 
   const toast = useToast();
 
+  const [isLoading, setIsLoading] = useState(true);
   const [removingRoadmapId, setRemovingRoadmapId] = useState<string>('');
   const [isAddingRoadmap, setIsAddingRoadmap] = useState(false);
   const [changingRoadmapId, setChangingRoadmapId] = useState<string>('');
@@ -83,12 +85,14 @@ export function TeamRoadmaps() {
       return;
     }
 
+    setIsLoading(true);
     Promise.all([
       loadTeam(teamId),
       loadTeamResourceConfig(teamId),
       loadAllRoadmaps(),
     ]).finally(() => {
       pageProgressMessage.set('');
+      setIsLoading(false);
     });
   }, [teamId]);
 
@@ -97,6 +101,7 @@ export function TeamRoadmaps() {
       return;
     }
 
+    toast.loading('Deleting roadmap');
     pageProgressMessage.set(`Deleting roadmap from team`);
     const { error, response } = await httpPut<TeamResourceConfig>(
       `${import.meta.env.PUBLIC_API_URL}/v1-delete-team-resource-config/${
@@ -117,6 +122,35 @@ export function TeamRoadmaps() {
     setResourceConfigs(response);
   }
 
+  async function onAdd(roadmapId: string) {
+    if (!teamId) {
+      return;
+    }
+
+    toast.loading('Adding roadmap');
+    pageProgressMessage.set('Adding roadmap');
+    setIsLoading(true);
+    const { error, response } = await httpPut<TeamResourceConfig>(
+      `${
+        import.meta.env.PUBLIC_API_URL
+      }/v1-update-team-resource-config/${teamId}`,
+      {
+        teamId: teamId,
+        resourceId: roadmapId,
+        resourceType: 'roadmap',
+        removed: [],
+      }
+    );
+
+    if (error || !response) {
+      toast.error(error?.message || 'Error adding roadmap');
+      return;
+    }
+
+    setResourceConfigs(response);
+    toast.success('Roadmap added');
+  }
+
   async function onRemove(resourceId: string) {
     pageProgressMessage.set('Removing roadmap');
 
@@ -129,26 +163,56 @@ export function TeamRoadmaps() {
     return null;
   }
 
+  const addRoadmapModal = isAddingRoadmap && (
+    <SelectRoadmapModal
+      onClose={() => setIsAddingRoadmap(false)}
+      teamResourceConfig={resourceConfigs}
+      allRoadmaps={allRoadmaps}
+      teamId={teamId}
+      onRoadmapAdd={(roadmapId) => {
+        onAdd(roadmapId).finally(() => {
+          pageProgressMessage.set('');
+        });
+      }}
+      onRoadmapRemove={(roadmapId) => {
+        if (confirm('Are you sure you want to remove this roadmap?')) {
+          onRemove(roadmapId).finally(() => {});
+        }
+      }}
+    />
+  );
+
+  if (resourceConfigs.length === 0 && !isLoading) {
+    return (
+      <div className="flex flex-col items-center p-4 py-20">
+        {addRoadmapModal}
+        <img
+          alt="roadmap"
+          src={RoadmapIcon}
+          className="mb-4 h-24 w-24 opacity-10"
+        />
+        <h3 className="mb-1 text-2xl font-bold text-gray-900">No roadmaps</h3>
+        <p className="text-base text-gray-500">
+          {canManageCurrentTeam
+            ? 'Add a roadmap to start tracking your team'
+            : 'Ask your team admin to add some roadmaps'}
+        </p>
+
+        {canManageCurrentTeam && (
+          <button
+            className="mt-4 rounded-lg bg-black px-4 py-2 font-medium text-white hover:bg-gray-900"
+            onClick={() => setIsAddingRoadmap(true)}
+          >
+            Add roadmap
+          </button>
+        )}
+      </div>
+    );
+  }
+
   return (
     <div>
-      {isAddingRoadmap && (
-        <AddTeamRoadmap
-          onMakeChanges={(roadmapId) => {
-            setChangingRoadmapId(roadmapId);
-            setIsAddingRoadmap(false);
-          }}
-          teamId={team?._id!}
-          setResourceConfigs={setResourceConfigs}
-          allRoadmaps={allRoadmaps}
-          availableRoadmaps={allRoadmaps.filter((r) => {
-            const isAlreadyAdded = resourceConfigs.find(
-              (c) => c.resourceId === r.id
-            );
-            return !isAlreadyAdded;
-          })}
-          onClose={() => setIsAddingRoadmap(false)}
-        />
-      )}
+      {addRoadmapModal}
       <div className={'grid grid-cols-1 gap-3 sm:grid-cols-2'}>
         {changingRoadmapId && (
           <UpdateTeamResourceModal
@@ -198,8 +262,8 @@ export function TeamRoadmaps() {
                 )}
               </div>
 
-              { canManageCurrentTeam && (
-                <div className={'flex w-full justify-between pt-2 pb-3 px-3'}>
+              {canManageCurrentTeam && (
+                <div className={'flex w-full justify-between px-3 pb-3 pt-2'}>
                   <button
                     type="button"
                     className={
@@ -219,13 +283,7 @@ export function TeamRoadmaps() {
                       className={
                         'text-xs text-red-500 underline hover:text-black focus:outline-none disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-red-500'
                       }
-                      disabled={resourceConfigs.length === 1}
                       onClick={() => setRemovingRoadmapId(resourceId)}
-                      title={
-                        resourceConfigs.length === 1
-                          ? 'You must have at least one roadmap.'
-                          : 'Delete roadmap from team'
-                      }
                     >
                       Remove
                     </button>
diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
index 9fdfd44df..a5b844a5d 100644
--- a/src/components/Toast.tsx
+++ b/src/components/Toast.tsx
@@ -37,7 +37,7 @@ export function Toaster(props: Props) {
       onClick={() => {
         $toastMessage.set(undefined);
       }}
-      className={`fixed bottom-5 left-1/2 max-w-[300px] animate-fade-slide-up min-w-[300px] sm:min-w-[auto] z-50`}
+      className={`fixed bottom-5 left-1/2 z-50 min-w-[300px] max-w-[300px] animate-fade-slide-up sm:min-w-[auto]`}
     >
       <div
         className={`flex -translate-x-1/2 transform cursor-pointer items-center gap-2 rounded-md border border-gray-200 bg-white py-3 pl-4 pr-5 text-black shadow-md hover:bg-gray-50`}

From 7aca57c3e4343d60b6fb24543e594a2d8e071132 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 25 Jul 2023 21:34:00 +0100
Subject: [PATCH 09/11] Team roadmaps listing page

---
 src/components/CreateTeam/NotDropdown.tsx     | 47 +++++++++++++++++++
 src/components/CreateTeam/RoadmapSelector.tsx | 37 ++++-----------
 src/components/TeamRoadmaps.tsx               | 13 +++++
 src/icons/plus-white.svg                      |  1 -
 4 files changed, 69 insertions(+), 29 deletions(-)
 create mode 100644 src/components/CreateTeam/NotDropdown.tsx
 delete mode 100644 src/icons/plus-white.svg

diff --git a/src/components/CreateTeam/NotDropdown.tsx b/src/components/CreateTeam/NotDropdown.tsx
new file mode 100644
index 000000000..cac0a35ca
--- /dev/null
+++ b/src/components/CreateTeam/NotDropdown.tsx
@@ -0,0 +1,47 @@
+import ChevronDownIcon from '../../icons/chevron-down.svg';
+
+type NotDropdownProps = {
+  onClick: () => void;
+  selectedCount: number;
+  singularName: string;
+  pluralName: string;
+};
+
+export function NotDropdown(props: NotDropdownProps) {
+  const { onClick, selectedCount, singularName, pluralName } = props;
+
+  const singularOrPlural = selectedCount === 1 ? singularName : pluralName;
+
+  return (
+    <div
+      className="flex cursor-text items-center justify-between rounded-md border border-gray-300 px-3 py-2.5 hover:border-gray-400/50 hover:bg-gray-50"
+      role="button"
+      onClick={onClick}
+    >
+      {selectedCount > 0 && (
+        <div className="flex flex-col">
+          <p className="mb-1.5 text-base font-medium text-gray-800">
+            {selectedCount} {singularOrPlural} selected
+          </p>
+          <p className="text-sm text-gray-400">
+            Click to add or change selection
+          </p>
+        </div>
+      )}
+
+      {selectedCount === 0 && (
+        <div className="flex flex-col">
+          <p className="text-base text-gray-400">
+            Click to select {pluralName}
+          </p>
+        </div>
+      )}
+
+      <img
+        alt={singularName}
+        src={ChevronDownIcon}
+        className={'relative top-[1px] h-[17px] w-[17px] opacity-40'}
+      />
+    </div>
+  );
+}
diff --git a/src/components/CreateTeam/RoadmapSelector.tsx b/src/components/CreateTeam/RoadmapSelector.tsx
index 0dc617a97..5e278de1e 100644
--- a/src/components/CreateTeam/RoadmapSelector.tsx
+++ b/src/components/CreateTeam/RoadmapSelector.tsx
@@ -6,6 +6,7 @@ import { pageProgressMessage } from '../../stores/page';
 import type { TeamDocument } from './CreateTeamForm';
 import { UpdateTeamResourceModal } from './UpdateTeamResourceModal';
 import { SelectRoadmapModal } from './SelectRoadmapModal';
+import { NotDropdown } from './NotDropdown';
 
 export type TeamResourceConfig = {
   resourceId: string;
@@ -144,34 +145,14 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
         />
       )}
 
-      <div
-        className="mt-3 flex cursor-text items-center justify-between rounded-md border border-gray-300 px-3 py-2.5 hover:border-gray-400/50 hover:bg-gray-50"
-        role="button"
-        onClick={() => {
-          setShowSelectRoadmapModal(true);
-        }}
-      >
-        {teamResourceConfig.length > 0 && (
-          <div className="flex flex-col">
-            <p className="mb-1.5 text-base font-medium text-gray-800">
-              {teamResourceConfig.length} roadmaps selected
-            </p>
-            <p className="text-sm text-gray-400">
-              Click to add or change selection
-            </p>
-          </div>
-        )}
-
-        {!teamResourceConfig.length && (
-          <div className="flex flex-col">
-            <p className="text-base text-gray-400">Click to select roadmaps</p>
-          </div>
-        )}
-
-        <img
-          alt={'roadmap'}
-          src={ChevronDownIcon}
-          className={'relative top-[1px] h-[17px] w-[17px] opacity-40'}
+      <div className="mt-3">
+        <NotDropdown
+          onClick={() => {
+            setShowSelectRoadmapModal(true);
+          }}
+          selectedCount={teamResourceConfig.length}
+          singularName={'roadmap'}
+          pluralName={'roadmaps'}
         />
       </div>
 
diff --git a/src/components/TeamRoadmaps.tsx b/src/components/TeamRoadmaps.tsx
index 880994b3f..7122ada30 100644
--- a/src/components/TeamRoadmaps.tsx
+++ b/src/components/TeamRoadmaps.tsx
@@ -213,6 +213,19 @@ export function TeamRoadmaps() {
   return (
     <div>
       {addRoadmapModal}
+      <div className="mb-3 flex items-center justify-between">
+        <span className={'text-gray-400'}>
+          {resourceConfigs.length} roadmap(s) selected
+        </span>
+        {canManageCurrentTeam && (
+          <button
+            className="flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium text-gray-500 underline hover:bg-gray-100 hover:text-gray-900"
+            onClick={() => setIsAddingRoadmap(true)}
+          >
+            Add / Remove Roadmaps
+          </button>
+        )}
+      </div>
       <div className={'grid grid-cols-1 gap-3 sm:grid-cols-2'}>
         {changingRoadmapId && (
           <UpdateTeamResourceModal
diff --git a/src/icons/plus-white.svg b/src/icons/plus-white.svg
deleted file mode 100644
index 4986ebc4b..000000000
--- a/src/icons/plus-white.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-plus-2"><path d="M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4"/><polyline points="14 2 14 8 20 8"/><path d="M3 15h6"/><path d="M6 12v6"/></svg>

From 076b866430828d1b983be8f04d564f6904562e07 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 26 Jul 2023 15:24:29 +0100
Subject: [PATCH 10/11] Personal progress indicator in teams

---
 .../TeamProgress/GroupRoadmapItem.tsx         | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/TeamProgress/GroupRoadmapItem.tsx b/src/components/TeamProgress/GroupRoadmapItem.tsx
index 17975ffc8..f81c9815b 100644
--- a/src/components/TeamProgress/GroupRoadmapItem.tsx
+++ b/src/components/TeamProgress/GroupRoadmapItem.tsx
@@ -3,6 +3,7 @@ import type { GroupByRoadmap, TeamMember } from './TeamProgressPage';
 import { MemberProgressModal } from './MemberProgressModal';
 import { getUrlParams } from '../../lib/browser';
 import ExternalLinkIcon from '../../icons/external-link.svg';
+import { useAuth } from '../../hooks/use-auth';
 
 type GroupRoadmapItemProps = {
   roadmap: GroupByRoadmap;
@@ -11,6 +12,7 @@ type GroupRoadmapItemProps = {
 export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
   const { members, resourceTitle, resourceId } = props.roadmap;
   const { t: teamId } = getUrlParams();
+  const user = useAuth();
 
   const [showAll, setShowAll] = useState(false);
   const [detailResourceId, setDetailResourceId] = useState<string | null>(null);
@@ -49,10 +51,15 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
         </div>
         <div className="relative flex grow flex-col space-y-2 p-3">
           {(showAll ? members : members.slice(0, 4)).map((member) => {
-            if (!member.progress) return null;
+            const isMyProgress = user?.email === member?.member?.email;
+
+            if (!member.progress) {
+              return null;
+            }
+
             return (
               <button
-                className="group relative w-full overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none"
+                className={`group relative w-full overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none`}
                 key={member?.member._id}
                 onClick={() => {
                   setDetailResourceId(member?.progress?.resourceId!);
@@ -60,7 +67,7 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
                 }}
               >
                 <span className="relative z-10 flex items-center justify-between gap-1 text-sm">
-                  <span className="inline-grid grid-cols-[20px_auto] gap-2">
+                  <span className="inline-grid grid-cols-[20px_auto] gap-3">
                     <img
                       src={
                         member.member.avatar
@@ -72,7 +79,14 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
                       alt={member.member.name || ''}
                       className="h-5 w-5 shrink-0 rounded-full"
                     />
-                    <span className="truncate">{member?.member?.name}</span>
+                    <span className="inline-grid grid-cols-[auto,32px] items-center">
+                      <span className="truncate mr-[5px]">{member?.member?.name}</span>
+                      {isMyProgress && (
+                        <span className="rounded-md bg-red-500 py-0.25 text-center text-[11px] text-white mr-[5px]">
+                          You
+                        </span>
+                      )}
+                    </span>
                   </span>
                   <span className="shrink-0 text-xs text-gray-400">
                     {member?.progress?.done} / {member?.progress?.total}

From 14f9ad953077b4873bace2e3b31ba9ff8290f94d Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 26 Jul 2023 15:41:39 +0100
Subject: [PATCH 11/11] Highlight user personal progress

---
 src/components/TeamProgress/GroupRoadmapItem.tsx   | 9 ++-------
 src/components/TeamProgress/MemberProgressItem.tsx | 2 +-
 src/components/TeamProgress/TeamProgressPage.tsx   | 4 +---
 3 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/components/TeamProgress/GroupRoadmapItem.tsx b/src/components/TeamProgress/GroupRoadmapItem.tsx
index f81c9815b..5bf208b6d 100644
--- a/src/components/TeamProgress/GroupRoadmapItem.tsx
+++ b/src/components/TeamProgress/GroupRoadmapItem.tsx
@@ -59,7 +59,7 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
 
             return (
               <button
-                className={`group relative w-full overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none`}
+                className={`group relative w-full overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none ${isMyProgress ? 'border-green-500 hover:border-green-600' : ''}`}
                 key={member?.member._id}
                 onClick={() => {
                   setDetailResourceId(member?.progress?.resourceId!);
@@ -81,11 +81,6 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
                     />
                     <span className="inline-grid grid-cols-[auto,32px] items-center">
                       <span className="truncate mr-[5px]">{member?.member?.name}</span>
-                      {isMyProgress && (
-                        <span className="rounded-md bg-red-500 py-0.25 text-center text-[11px] text-white mr-[5px]">
-                          You
-                        </span>
-                      )}
                     </span>
                   </span>
                   <span className="shrink-0 text-xs text-gray-400">
@@ -93,7 +88,7 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
                   </span>
                 </span>
                 <span
-                  className="absolute inset-0 bg-gray-100 group-hover:bg-gray-200"
+                  className={`absolute inset-0 ${isMyProgress ? 'bg-green-100 group-hover:bg-green-200' : 'bg-gray-100 group-hover:bg-gray-200'}`}
                   style={{
                     width: `${
                       (member?.progress?.done / member?.progress?.total) * 100
diff --git a/src/components/TeamProgress/MemberProgressItem.tsx b/src/components/TeamProgress/MemberProgressItem.tsx
index 9942fca23..d0931ed17 100644
--- a/src/components/TeamProgress/MemberProgressItem.tsx
+++ b/src/components/TeamProgress/MemberProgressItem.tsx
@@ -52,7 +52,7 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
             {isMyProgress && (
               <div className="inline-grid grid-cols-[auto,32px] items-center gap-1.5">
                 <h3 className="truncate font-medium">{member.name}</h3>
-                <span className="rounded-md bg-red-500 text-center py-0.5 text-xs text-white">
+                <span className="rounded-md bg-red-500 py-0.5 px-1 text-xs text-white">
                   You
                 </span>
               </div>
diff --git a/src/components/TeamProgress/TeamProgressPage.tsx b/src/components/TeamProgress/TeamProgressPage.tsx
index 14aa1a69f..af827c23d 100644
--- a/src/components/TeamProgress/TeamProgressPage.tsx
+++ b/src/components/TeamProgress/TeamProgressPage.tsx
@@ -7,9 +7,7 @@ import { useToast } from '../../hooks/use-toast';
 import { useStore } from '@nanostores/preact';
 import { $currentTeam } from '../../stores/team';
 import { GroupRoadmapItem } from './GroupRoadmapItem';
-import { setUrlParams } from '../../lib/browser';
-import { getUrlParams } from '../../lib/browser';
-import { $toastMessage } from '../../stores/toast';
+import { getUrlParams, setUrlParams } from '../../lib/browser';
 import { useAuth } from '../../hooks/use-auth';
 
 export type UserProgress = {