From 01a558a1f15d167d73f1c6b2679af08c5e333957 Mon Sep 17 00:00:00 2001
From: shweta2101 <shwethap@vindago.in>
Date: Thu, 7 May 2026 10:56:40 +0530
Subject: [PATCH 01/11] Enhance project group picker and persist selection

Refactor ProjectGroupPicker UI and behavior: rebuild dropdown markup/CSS, show result counts and a scroll-to-load hint, add debounced input and click-to-open behavior, change infinite-scroll trigger to 80% of list height, and make hasMore/totalCount reactive. Improve selection logic to prefer current model or first item and avoid unnecessary reloads when unfiltered results are present.

Persist selection across sessions: add localStorage getters/setters for selected project group and workspace, restore them on mount, and save updates via watchers; add a min-width for the picker in dashboard styles.

API/client changes: clear stored selection keys on logout and update TdeiUserClient.getMyProjectGroups to return { items, total }, accept a sort_by param, and parse X-Total-Count for total results (with fallback on parse errors). These changes support accurate pagination and the new picker UI.
---
 components/ProjectGroupPicker.vue | 162 ++++++++++++++++++++++--------
 pages/dashboard.vue               |  25 ++++-
 services/tdei.ts                  |  12 ++-
 3 files changed, 148 insertions(+), 51 deletions(-)

diff --git a/components/ProjectGroupPicker.vue b/components/ProjectGroupPicker.vue
index 549bfcb..e2b7891 100644
--- a/components/ProjectGroupPicker.vue
+++ b/components/ProjectGroupPicker.vue
@@ -7,37 +7,56 @@
       :disabled="props.disabled"
       placeholder="Search project groups..."
       @focus="onFocus"
+      @click="onInputClick"
+      @input="onInput"
       @keydown="onKeydown"
     />
-    <ul
+    <div
       v-if="isOpen"
-      ref="listRef"
-      class="list-group position-absolute w-100 mt-1 shadow bg-white"
-      style="z-index: 1000; max-height: 250px; overflow-y: auto;"
-      @scroll="onScroll"
+      class="pg-dropdown position-absolute w-100 mt-1"
       @mousedown.prevent
     >
-      <li
-        v-if="projectGroups.length === 0 && !loading"
-        class="list-group-item text-muted"
+      <div class="pg-header">
+        <span v-if="projectGroups.length > 0" class="pg-count">
+          <template v-if="totalCount !== null">
+            Showing {{ projectGroups.length }} of {{ totalCount }} project groups
+            <span v-if="hasMore && !loading" class="pg-scroll-hint">&#183; Scroll to continue loading</span>
+          </template>
+          <template v-else-if="!hasMore">Showing all {{ projectGroups.length }} project group{{ projectGroups.length !== 1 ? 's' : '' }}</template>
+          <template v-else>
+            Showing {{ projectGroups.length }} results
+            <span v-if="!loading" class="pg-scroll-hint">&#183; Scroll to continue loading</span>
+          </template>
+        </span>
+        <span v-if="loading" class="spinner-border spinner-border-sm ms-auto" role="status" aria-hidden="true"></span>
+      </div>
+      <div
+        class="pg-list-wrap"
+        :class="{ 'pg-has-more': hasMore && !loading }"
+        ref="listRef"
+        @scroll="onScroll"
       >
-        No project groups found.
-      </li>
-      <li
-        v-for="(pg, index) in projectGroups"
-        :key="pg.id"
-        :id="'pg-item-' + index"
-        class="list-group-item list-group-item-action cursor-pointer"
-        :class="{ highlighted: activeIndex === index, 'fw-bold': model === pg.id }"
-        @click="selectGroup(pg.id)"
-        @mouseenter="activeIndex = index"
-      >
-        {{ pg.name }}
-      </li>
-      <li v-if="loading" class="list-group-item text-center">
-        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-      </li>
-    </ul>
+        <ul class="list-group list-group-flush">
+          <li
+            v-if="projectGroups.length === 0 && !loading"
+            class="list-group-item text-muted"
+          >
+            No project groups found.
+          </li>
+          <li
+            v-for="(pg, index) in projectGroups"
+            :key="pg.id"
+            :id="'pg-item-' + index"
+            class="list-group-item list-group-item-action cursor-pointer"
+            :class="{ highlighted: activeIndex === index, 'fw-bold': model === pg.id }"
+            @click="selectGroup(pg.id)"
+            @mouseenter="activeIndex = index"
+          >
+            {{ pg.name }}
+          </li>
+        </ul>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -55,14 +74,16 @@ const isOpen = ref(false)
 const projectGroups = ref<{ id: string; name: string }[]>([])
 const selectedGroupName = ref('')
 const loading = ref(false)
+const totalCount = ref<number | null>(null)
 const pickerRef = ref<HTMLElement | null>(null)
 const listRef = ref<HTMLElement | null>(null)
 const activeIndex = ref(-1)
 
 let pageNo = 1
-let hasMore = true
+const hasMore = ref(true)
 let pendingReset = false
 const pageSize = 10
+let hasUnfilteredResults = false
 
 const loadGroups = async (reset = false) => {
   if (loading.value) {
@@ -72,11 +93,12 @@ const loadGroups = async (reset = false) => {
 
   if (reset) {
     pageNo = 1
-    hasMore = true
+    hasMore.value = true
     projectGroups.value = []
     activeIndex.value = -1
+    totalCount.value = null
   }
-  if (!hasMore) return
+  if (!hasMore.value) return
 
   loading.value = true
   try {
@@ -85,12 +107,16 @@ const loadGroups = async (reset = false) => {
     if (query === selectedGroupName.value) {
       query = ''
     }
+    if (reset) {
+      hasUnfilteredResults = query === ''
+    }
 
-    const newGroups = await tdeiUserClient.getMyProjectGroups(pageNo, query, pageSize)
+    const { items: newGroups, total } = await tdeiUserClient.getMyProjectGroups(pageNo, query, pageSize)
+    if (total !== null) totalCount.value = total
     projectGroups.value.push(...newGroups)
 
     if (newGroups.length < pageSize) {
-      hasMore = false
+      hasMore.value = false
     } else {
       pageNo++
     }
@@ -108,14 +134,25 @@ const loadGroups = async (reset = false) => {
 }
 
 let timeoutId: ReturnType<typeof setTimeout>
-watch(searchText, (newVal, oldVal) => {
-  if (!isOpen.value) return
 
+const onInputClick = () => {
+  if (!isOpen.value) {
+    isOpen.value = true
+    if (!hasUnfilteredResults || projectGroups.value.length === 0) {
+      loadGroups(true)
+    }
+  }
+}
+
+const onInput = () => {
+  if (!isOpen.value) {
+    isOpen.value = true
+  }
   clearTimeout(timeoutId)
   timeoutId = setTimeout(() => {
     loadGroups(true)
   }, 300)
-})
+}
 
 watch(model, (newId) => {
   const pg = projectGroups.value.find(p => p.id === newId)
@@ -127,7 +164,7 @@ watch(model, (newId) => {
 
 const onScroll = (e: Event) => {
   const target = e.target as HTMLElement
-  if (target.scrollTop + target.clientHeight >= target.scrollHeight - 10) {
+  if (target.scrollTop + target.clientHeight >= target.scrollHeight * 0.8) {
     loadGroups()
   }
 }
@@ -144,7 +181,9 @@ const selectGroup = (id: string) => {
 
 const onFocus = (e: Event) => {
   isOpen.value = true
-  loadGroups(true)
+  if (!hasUnfilteredResults || projectGroups.value.length === 0) {
+    loadGroups(true)
+  }
   const target = e.target as HTMLInputElement
   if (target) {
     target.select()
@@ -229,14 +268,11 @@ onMounted(async () => {
   await loadGroups(true)
 
   if (projectGroups.value.length > 0) {
-    if (!model.value) {
-      model.value = projectGroups.value[0]?.id
-    }
     const selected = projectGroups.value.find(pg => pg.id === model.value)
-    if (selected) {
-      searchText.value = selected.name
-      selectedGroupName.value = selected.name
-    }
+    const effective = selected ?? projectGroups.value[0]!
+    model.value = effective.id
+    searchText.value = effective.name
+    selectedGroupName.value = effective.name
   }
 })
 
@@ -249,8 +285,48 @@ onUnmounted(() => {
 .cursor-pointer {
   cursor: pointer;
 }
+.pg-dropdown {
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  z-index: 1000;
+}
+.pg-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 12px;
+  border-bottom: 1px solid #e9ecef;
+  background: #f8f9fa;
+  min-height: 30px;
+}
+.pg-count {
+  font-size: 0.74rem;
+  color: #6c757d;
+  flex: 1;
+}
+.pg-scroll-hint {
+  color: #0d6efd;
+}
+.pg-list-wrap {
+  position: relative;
+  max-height: 220px;
+  overflow-y: auto;
+}
+.pg-list-wrap.pg-has-more::after {
+  content: '';
+  display: block;
+  position: sticky;
+  bottom: 0;
+  height: 44px;
+  margin-top: -44px;
+  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.95));
+  pointer-events: none;
+}
 .list-group-item.highlighted {
-  background-color: rgba(13, 110, 253, 0.25);
+  background-color: rgba(13, 110, 253, 0.15);
   color: inherit;
 }
 </style>
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index f4cc716..123ce2e 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -44,8 +44,22 @@
 </template>
 
 <script lang="ts">
-let lastProjectGroupId: string;
-let lastWorkspaceId: number;
+const STORAGE_KEY_PROJECT_GROUP = 'tdei-selected-project-group';
+const STORAGE_KEY_WORKSPACE = 'tdei-selected-workspace';
+
+function getLastProjectGroupId(): string | null {
+  return localStorage.getItem(STORAGE_KEY_PROJECT_GROUP);
+}
+function setLastProjectGroupId(id: string) {
+  localStorage.setItem(STORAGE_KEY_PROJECT_GROUP, id);
+}
+function getLastWorkspaceId(): number | null {
+  const v = localStorage.getItem(STORAGE_KEY_WORKSPACE);
+  return v ? Number(v) : null;
+}
+function setLastWorkspaceId(id: number) {
+  localStorage.setItem(STORAGE_KEY_WORKSPACE, String(id));
+}
 </script>
 
 <script setup lang="ts">
@@ -68,8 +82,8 @@ for (const w of workspaces) {
 }
 
 onMounted(() => {
-  watch(currentWorkspace, (val) => { lastWorkspaceId = val.id });
-  watch(currentProjectGroup, (val) => { lastProjectGroupId = val });
+  watch(currentWorkspace, (val) => { if (val?.id) setLastWorkspaceId(val.id) });
+  watch(currentProjectGroup, (val) => { if (val) setLastProjectGroupId(val) });
   watch(currentWorkspaces, onCurrentWorkspacesChange);
 
   autoSelectPreferredView();
@@ -88,6 +102,7 @@ function autoSelectPreferredView() {
     }
   }
 
+  const lastWorkspaceId = getLastWorkspaceId();
   if (lastWorkspaceId) {
     const workspace = workspaces.find(w => w.id === lastWorkspaceId);
 
@@ -98,6 +113,7 @@ function autoSelectPreferredView() {
     }
   }
 
+  const lastProjectGroupId = getLastProjectGroupId();
   if (lastProjectGroupId) {
     currentProjectGroup.value = lastProjectGroupId;
   }
@@ -141,6 +157,7 @@ async function selectWorkspace(workspace) {
 
   .project-group-picker {
     width: auto;
+    min-width: 300px;
     border-color: transparent;
     border-left-color: $border-color;
     margin-right: auto;
diff --git a/services/tdei.ts b/services/tdei.ts
index 5f66305..a2629c6 100644
--- a/services/tdei.ts
+++ b/services/tdei.ts
@@ -123,6 +123,8 @@ export class TdeiAuthStore {
     this.refreshExpiresAt = new Date(0);
 
     localStorage.removeItem(this._storageKey);
+    localStorage.removeItem('tdei-selected-project-group');
+    localStorage.removeItem('tdei-selected-workspace');
   }
 }
 
@@ -457,8 +459,8 @@ export class TdeiUserClient extends BaseHttpClient implements ICancelableClient
     return new TdeiClient(this._baseUrl, this.#auth, signal ?? this._abortSignal);
   }
 
-  async getMyProjectGroups(pageNo: number = 1, searchText: string = '', pageSize: number = 10): Promise<TdeiProjectGroup[]> {
-    let url = `project-group-roles/${this.#auth.subject}?page_size=${pageSize}&page_no=${pageNo}`;
+  async getMyProjectGroups(pageNo: number = 1, searchText: string = '', pageSize: number = 10, sortBy: 'name' | 'created_at' = 'name'): Promise<{ items: TdeiProjectGroup[], total: number | null }> {
+    let url = `project-group-roles/${this.#auth.subject}?page_size=${pageSize}&page_no=${pageNo}&sort_by=${sortBy}`;
     if (searchText) {
       url += `&searchText=${encodeURIComponent(searchText)}`;
     }
@@ -466,11 +468,13 @@ export class TdeiUserClient extends BaseHttpClient implements ICancelableClient
     const response = await this._get(url);
 
     try {
+      const totalHeader = response.headers.get('X-Total-Count');
+      const total = totalHeader !== null ? parseInt(totalHeader, 10) : null;
       const items = (await response.json() as TdeiProjectGroupApiResponse[]) ?? [];
-      return items.map(p => ({ id: p.tdei_project_group_id, name: p.project_group_name }));
+      return { items: items.map(p => ({ id: p.tdei_project_group_id, name: p.project_group_name })), total };
     } catch (e) {
       console.warn('getMyProjectGroups: failed to parse API response', e);
-      return [];
+      return { items: [], total: null };
     }
   }
 

From dd590703ac14d2e37e6748aea27d8a8b9b149177 Mon Sep 17 00:00:00 2001
From: shweta2101 <shwethap@vindago.in>
Date: Fri, 8 May 2026 15:39:53 +0530
Subject: [PATCH 02/11] fix: retain selected project group and workspace per
 tab on reload

- Init currentProjectGroup synchronously from sessionStorage (was ref(null),
  causing a race where the picker defaulted to page-1 first group before
  onMounted ran)
- Store and restore the project group name alongside its ID so the picker
  input field shows the correct name for page-2+ groups (which aren't in
  the first API response)
- Add nameModel (v-model:name) to ProjectGroupPicker and emit it on selection
- Switch all dashboard storage from localStorage to sessionStorage so each
  browser tab maintains its own independent selection that survives reloads
---
 components/ProjectGroupPicker.vue | 24 ++++++++++++++++++------
 pages/dashboard.vue               | 26 ++++++++++++++++----------
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/components/ProjectGroupPicker.vue b/components/ProjectGroupPicker.vue
index e2b7891..145dc4a 100644
--- a/components/ProjectGroupPicker.vue
+++ b/components/ProjectGroupPicker.vue
@@ -19,12 +19,12 @@
       <div class="pg-header">
         <span v-if="projectGroups.length > 0" class="pg-count">
           <template v-if="totalCount !== null">
-            Showing {{ projectGroups.length }} of {{ totalCount }} project groups
+            Showing first {{ projectGroups.length }} of {{ totalCount }} project groups
             <span v-if="hasMore && !loading" class="pg-scroll-hint">&#183; Scroll to continue loading</span>
           </template>
           <template v-else-if="!hasMore">Showing all {{ projectGroups.length }} project group{{ projectGroups.length !== 1 ? 's' : '' }}</template>
           <template v-else>
-            Showing {{ projectGroups.length }} results
+            Showing first {{ projectGroups.length }} results
             <span v-if="!loading" class="pg-scroll-hint">&#183; Scroll to continue loading</span>
           </template>
         </span>
@@ -69,6 +69,7 @@ const props = withDefaults(defineProps<{ disabled?: boolean }>(), {
 })
 
 const model = defineModel({ required: true })
+const nameModel = defineModel('name', { default: '' })
 const searchText = ref('')
 const isOpen = ref(false)
 const projectGroups = ref<{ id: string; name: string }[]>([])
@@ -176,6 +177,7 @@ const selectGroup = (id: string) => {
   if (pg) {
     searchText.value = pg.name
     selectedGroupName.value = pg.name
+    nameModel.value = pg.name
   }
 }
 
@@ -269,10 +271,20 @@ onMounted(async () => {
 
   if (projectGroups.value.length > 0) {
     const selected = projectGroups.value.find(pg => pg.id === model.value)
-    const effective = selected ?? projectGroups.value[0]!
-    model.value = effective.id
-    searchText.value = effective.name
-    selectedGroupName.value = effective.name
+    if (selected) {
+      searchText.value = selected.name
+      selectedGroupName.value = selected.name
+    } else if (model.value && nameModel.value) {
+      // Group is beyond page 1 — use the cached name for display
+      searchText.value = nameModel.value
+      selectedGroupName.value = nameModel.value
+    } else if (!model.value) {
+      const first = projectGroups.value[0]!
+      model.value = first.id
+      searchText.value = first.name
+      selectedGroupName.value = first.name
+      nameModel.value = first.name
+    }
   }
 })
 
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 123ce2e..83b2d39 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -4,7 +4,7 @@
         <h2 class="visually-hidden">My Workspaces</h2>
 
         <label for="ws_project_group_picker">Project Group</label>
-        <project-group-picker v-model="currentProjectGroup" id="ws_project_group_picker" />
+        <project-group-picker v-model="currentProjectGroup" v-model:name="currentProjectGroupName" id="ws_project_group_picker" />
 
         <nuxt-link class="btn btn-primary flex-shrink-0" to="/workspace/create">
           <app-icon variant="add" size="24" />
@@ -45,20 +45,27 @@
 
 <script lang="ts">
 const STORAGE_KEY_PROJECT_GROUP = 'tdei-selected-project-group';
+const STORAGE_KEY_PROJECT_GROUP_NAME = 'tdei-selected-project-group-name';
 const STORAGE_KEY_WORKSPACE = 'tdei-selected-workspace';
 
 function getLastProjectGroupId(): string | null {
-  return localStorage.getItem(STORAGE_KEY_PROJECT_GROUP);
+  return sessionStorage.getItem(STORAGE_KEY_PROJECT_GROUP);
 }
 function setLastProjectGroupId(id: string) {
-  localStorage.setItem(STORAGE_KEY_PROJECT_GROUP, id);
+  sessionStorage.setItem(STORAGE_KEY_PROJECT_GROUP, id);
+}
+function getLastProjectGroupName(): string | null {
+  return sessionStorage.getItem(STORAGE_KEY_PROJECT_GROUP_NAME);
+}
+function setLastProjectGroupName(name: string) {
+  sessionStorage.setItem(STORAGE_KEY_PROJECT_GROUP_NAME, name);
 }
 function getLastWorkspaceId(): number | null {
-  const v = localStorage.getItem(STORAGE_KEY_WORKSPACE);
+  const v = sessionStorage.getItem(STORAGE_KEY_WORKSPACE);
   return v ? Number(v) : null;
 }
 function setLastWorkspaceId(id: number) {
-  localStorage.setItem(STORAGE_KEY_WORKSPACE, String(id));
+  sessionStorage.setItem(STORAGE_KEY_WORKSPACE, String(id));
 }
 </script>
 
@@ -71,7 +78,8 @@ const route = useRoute();
 const workspaces = (await workspacesClient.getMyWorkspaces()).sort(compareWorkspaceCreatedAtDesc);
 const workspacesByProjectGroup = Map.groupBy(workspaces, w => w.tdeiProjectGroupId);
 
-const currentProjectGroup = ref(null);
+const currentProjectGroup = ref(getLastProjectGroupId());
+const currentProjectGroupName = ref(getLastProjectGroupName());
 const currentWorkspace = ref({});
 const currentWorkspaces = computed(() => workspacesByProjectGroup.get(currentProjectGroup.value));
 
@@ -84,6 +92,7 @@ for (const w of workspaces) {
 onMounted(() => {
   watch(currentWorkspace, (val) => { if (val?.id) setLastWorkspaceId(val.id) });
   watch(currentProjectGroup, (val) => { if (val) setLastProjectGroupId(val) });
+  watch(currentProjectGroupName, (val) => { if (val) setLastProjectGroupName(val) });
   watch(currentWorkspaces, onCurrentWorkspacesChange);
 
   autoSelectPreferredView();
@@ -113,10 +122,7 @@ function autoSelectPreferredView() {
     }
   }
 
-  const lastProjectGroupId = getLastProjectGroupId();
-  if (lastProjectGroupId) {
-    currentProjectGroup.value = lastProjectGroupId;
-  }
+  // currentProjectGroup is already initialized from localStorage synchronously
 }
 
 async function onCurrentWorkspacesChange(val) {

From 2440434a0d5c8f59ea14bc24d68aad44d0fa674d Mon Sep 17 00:00:00 2001
From: shweta2101 <shwethap@vindago.in>
Date: Fri, 8 May 2026 15:42:46 +0530
Subject: [PATCH 03/11] fix: update nameModel in watch(model) and fix stale
 comment

---
 components/ProjectGroupPicker.vue | 1 +
 pages/dashboard.vue               | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/ProjectGroupPicker.vue b/components/ProjectGroupPicker.vue
index 145dc4a..341f0a2 100644
--- a/components/ProjectGroupPicker.vue
+++ b/components/ProjectGroupPicker.vue
@@ -160,6 +160,7 @@ watch(model, (newId) => {
   if (pg && !isOpen.value) {
     searchText.value = pg.name
     selectedGroupName.value = pg.name
+    nameModel.value = pg.name
   }
 })
 
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 83b2d39..e276ad0 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -122,7 +122,7 @@ function autoSelectPreferredView() {
     }
   }
 
-  // currentProjectGroup is already initialized from localStorage synchronously
+  // currentProjectGroup is already initialized from sessionStorage synchronously
 }
 
 async function onCurrentWorkspacesChange(val) {

From f97df64bcadfdb385a654d2c989b85ff740fce7e Mon Sep 17 00:00:00 2001
From: shweta2101 <shwethap@vindago.in>
Date: Fri, 8 May 2026 20:19:59 +0530
Subject: [PATCH 04/11] Simplify close handlers using nullish coalescing

Replace duplicated conditional logic in onKeydown and handleClickOutside with optional chaining and nullish coalescing. Compute name = pg?.name ?? selectedGroupName.value, assign it to searchText, and only update selectedGroupName when a matching project group exists. This makes the code more concise and preserves the previously selected group name instead of clearing searchText when no matching group is found.
---
 components/ProjectGroupPicker.vue | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/components/ProjectGroupPicker.vue b/components/ProjectGroupPicker.vue
index 341f0a2..b4b50db 100644
--- a/components/ProjectGroupPicker.vue
+++ b/components/ProjectGroupPicker.vue
@@ -242,12 +242,9 @@ const onKeydown = (e: KeyboardEvent) => {
     e.preventDefault()
     isOpen.value = false
     const pg = projectGroups.value.find(p => p.id === model.value)
-    if (pg) {
-      searchText.value = pg.name
-      selectedGroupName.value = pg.name
-    } else {
-      searchText.value = ''
-    }
+    const name = pg?.name ?? selectedGroupName.value
+    searchText.value = name
+    if (pg) selectedGroupName.value = name
   }
 }
 
@@ -256,12 +253,9 @@ const handleClickOutside = (event: MouseEvent) => {
     if (isOpen.value) {
       isOpen.value = false
       const pg = projectGroups.value.find(p => p.id === model.value)
-      if (pg) {
-        searchText.value = pg.name
-        selectedGroupName.value = pg.name
-      } else {
-        searchText.value = ''
-      }
+      const name = pg?.name ?? selectedGroupName.value
+      searchText.value = name
+      if (pg) selectedGroupName.value = name
     }
   }
 }

From d41d407375336ef47de7d1643a759a5d2528b3b6 Mon Sep 17 00:00:00 2001
From: shweta2101 <shwethap@vindago.in>
Date: Mon, 11 May 2026 13:46:13 +0530
Subject: [PATCH 05/11] Clear timeout; fix storage and header parsing

Clear the pending timeout on ProjectGroupPicker unmount to avoid leaked timers. Switch saved project/group keys removal from localStorage to sessionStorage and also remove the project-group-name key to fully clear auth selection. Harden parsing of the X-Total-Count response header: treat invalid/NaN parses as null to avoid returning an incorrect numeric value.
---
 components/ProjectGroupPicker.vue | 1 +
 services/tdei.ts                  | 8 +++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/ProjectGroupPicker.vue b/components/ProjectGroupPicker.vue
index b4b50db..b25407b 100644
--- a/components/ProjectGroupPicker.vue
+++ b/components/ProjectGroupPicker.vue
@@ -285,6 +285,7 @@ onMounted(async () => {
 
 onUnmounted(() => {
   document.removeEventListener('mousedown', handleClickOutside)
+  clearTimeout(timeoutId)
 })
 </script>
 
diff --git a/services/tdei.ts b/services/tdei.ts
index a2629c6..c5f0ed5 100644
--- a/services/tdei.ts
+++ b/services/tdei.ts
@@ -123,8 +123,9 @@ export class TdeiAuthStore {
     this.refreshExpiresAt = new Date(0);
 
     localStorage.removeItem(this._storageKey);
-    localStorage.removeItem('tdei-selected-project-group');
-    localStorage.removeItem('tdei-selected-workspace');
+    sessionStorage.removeItem('tdei-selected-project-group');
+    sessionStorage.removeItem('tdei-selected-project-group-name');
+    sessionStorage.removeItem('tdei-selected-workspace');
   }
 }
 
@@ -469,7 +470,8 @@ export class TdeiUserClient extends BaseHttpClient implements ICancelableClient
 
     try {
       const totalHeader = response.headers.get('X-Total-Count');
-      const total = totalHeader !== null ? parseInt(totalHeader, 10) : null;
+      const totalParsed = totalHeader !== null ? parseInt(totalHeader, 10) : NaN;
+      const total = Number.isNaN(totalParsed) ? null : totalParsed;
       const items = (await response.json() as TdeiProjectGroupApiResponse[]) ?? [];
       return { items: items.map(p => ({ id: p.tdei_project_group_id, name: p.project_group_name })), total };
     } catch (e) {

From 1d09094bad7121dcf8efe38c3539b164c451f7b4 Mon Sep 17 00:00:00 2001
From: shweta2101 <shwethap@vindago.in>
Date: Mon, 11 May 2026 15:38:08 +0530
Subject: [PATCH 06/11] Show cached group name; safe sessionStorage access

Add applyCachedName() to ProjectGroupPicker and use it on mount/selection to display a cached project group name immediately while the groups API call completes, removing duplicated assignments. In pages/dashboard, wrap sessionStorage access with typeof window checks and try/catch blocks so reads/writes are no-ops in SSR or when storage access throws (silently fail). This prevents runtime errors in server-side rendering or environments with disabled/blocked storage.
---
 components/ProjectGroupPicker.vue | 14 ++++++++++--
 pages/dashboard.vue               | 38 +++++++++++++++++++++++++------
 2 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/components/ProjectGroupPicker.vue b/components/ProjectGroupPicker.vue
index b25407b..326e023 100644
--- a/components/ProjectGroupPicker.vue
+++ b/components/ProjectGroupPicker.vue
@@ -248,6 +248,11 @@ const onKeydown = (e: KeyboardEvent) => {
   }
 }
 
+const applyCachedName = () => {
+  searchText.value = nameModel.value
+  selectedGroupName.value = nameModel.value
+}
+
 const handleClickOutside = (event: MouseEvent) => {
   if (pickerRef.value && !pickerRef.value.contains(event.target as Node)) {
     if (isOpen.value) {
@@ -262,6 +267,12 @@ const handleClickOutside = (event: MouseEvent) => {
 
 onMounted(async () => {
   document.addEventListener('mousedown', handleClickOutside)
+
+  // Show cached name immediately before the API call completes
+  if (model.value && nameModel.value) {
+    applyCachedName()
+  }
+
   await loadGroups(true)
 
   if (projectGroups.value.length > 0) {
@@ -271,8 +282,7 @@ onMounted(async () => {
       selectedGroupName.value = selected.name
     } else if (model.value && nameModel.value) {
       // Group is beyond page 1 — use the cached name for display
-      searchText.value = nameModel.value
-      selectedGroupName.value = nameModel.value
+      applyCachedName()
     } else if (!model.value) {
       const first = projectGroups.value[0]!
       model.value = first.id
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index e276ad0..f88adb7 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -49,23 +49,47 @@ const STORAGE_KEY_PROJECT_GROUP_NAME = 'tdei-selected-project-group-name';
 const STORAGE_KEY_WORKSPACE = 'tdei-selected-workspace';
 
 function getLastProjectGroupId(): string | null {
-  return sessionStorage.getItem(STORAGE_KEY_PROJECT_GROUP);
+  if (typeof window === 'undefined') return null;
+  try {
+    return sessionStorage.getItem(STORAGE_KEY_PROJECT_GROUP);
+  } catch {
+    return null;
+  }
 }
 function setLastProjectGroupId(id: string) {
-  sessionStorage.setItem(STORAGE_KEY_PROJECT_GROUP, id);
+  if (typeof window === 'undefined') return;
+  try {
+    sessionStorage.setItem(STORAGE_KEY_PROJECT_GROUP, id);
+  } catch { /* silently fail */ }
 }
 function getLastProjectGroupName(): string | null {
-  return sessionStorage.getItem(STORAGE_KEY_PROJECT_GROUP_NAME);
+  if (typeof window === 'undefined') return null;
+  try {
+    return sessionStorage.getItem(STORAGE_KEY_PROJECT_GROUP_NAME);
+  } catch {
+    return null;
+  }
 }
 function setLastProjectGroupName(name: string) {
-  sessionStorage.setItem(STORAGE_KEY_PROJECT_GROUP_NAME, name);
+  if (typeof window === 'undefined') return;
+  try {
+    sessionStorage.setItem(STORAGE_KEY_PROJECT_GROUP_NAME, name);
+  } catch { /* silently fail */ }
 }
 function getLastWorkspaceId(): number | null {
-  const v = sessionStorage.getItem(STORAGE_KEY_WORKSPACE);
-  return v ? Number(v) : null;
+  if (typeof window === 'undefined') return null;
+  try {
+    const v = sessionStorage.getItem(STORAGE_KEY_WORKSPACE);
+    return v ? Number(v) : null;
+  } catch {
+    return null;
+  }
 }
 function setLastWorkspaceId(id: number) {
-  sessionStorage.setItem(STORAGE_KEY_WORKSPACE, String(id));
+  if (typeof window === 'undefined') return;
+  try {
+    sessionStorage.setItem(STORAGE_KEY_WORKSPACE, String(id));
+  } catch { /* silently fail */ }
 }
 </script>
 

From e6efe84515fecf44fd2a5d8a8920dcab31964758 Mon Sep 17 00:00:00 2001
From: shweta2101 <shwethap@vindago.in>
Date: Wed, 13 May 2026 19:57:44 +0530
Subject: [PATCH 07/11] Populate missing group name and null-safe IDs

ProjectGroupPicker: when a model ID is present but the group name is not cached, paginate through groups until the matching group is found and populate searchText, selectedGroupName, and nameModel so the UI shows the correct name. tdei.vue: make assignment of projectGroupId and tdeiRecordId null-safe by using optional chaining and null coalescing to avoid errors when nested fields are missing.
---
 components/ProjectGroupPicker.vue | 12 ++++++++++++
 pages/workspace/create/tdei.vue   |  6 +++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/components/ProjectGroupPicker.vue b/components/ProjectGroupPicker.vue
index 326e023..b14daf3 100644
--- a/components/ProjectGroupPicker.vue
+++ b/components/ProjectGroupPicker.vue
@@ -283,6 +283,18 @@ onMounted(async () => {
     } else if (model.value && nameModel.value) {
       // Group is beyond page 1 — use the cached name for display
       applyCachedName()
+    } else if (model.value) {
+      // model is set but name is unknown — paginate until the group is found
+      while (hasMore.value) {
+        await loadGroups()
+        const found = projectGroups.value.find(pg => pg.id === model.value)
+        if (found) {
+          searchText.value = found.name
+          selectedGroupName.value = found.name
+          nameModel.value = found.name
+          break
+        }
+      }
     } else if (!model.value) {
       const first = projectGroups.value[0]!
       model.value = first.id
diff --git a/pages/workspace/create/tdei.vue b/pages/workspace/create/tdei.vue
index acf0428..6557fbd 100644
--- a/pages/workspace/create/tdei.vue
+++ b/pages/workspace/create/tdei.vue
@@ -180,9 +180,9 @@ async function getDatasetInfo(id: string | null) {
 
   await nextTick();
 
-  workspaceTitle.value = record.metadata?.dataset_detail?.name ?? '';
-  projectGroupId.value = record.project_group.tdei_project_group_id;
-  tdeiRecordId.value = record.tdei_dataset_id;
+  workspaceTitle.value = record.metadata?.dataset_detail?.name ?? ''
+  projectGroupId.value = record.project_group?.tdei_project_group_id ?? null
+  tdeiRecordId.value = record.tdei_dataset_id ?? null
 
   initMap();
 }

From 3f113c4c195ec3fd6909c87c511c7676d9c18ba3 Mon Sep 17 00:00:00 2001
From: shweta2101 <shwethap@vindago.in>
Date: Thu, 14 May 2026 12:01:24 +0530
Subject: [PATCH 08/11] Cache project group name; use undefined total

Add sessionStorage caching for selected project group (stores {id,name}) and wire ProjectGroupPicker to read/write the cached name so the UI can show a name immediately even when the group isn't on page 1. Remove the separate nameModel/v-model:name usage in dashboard and consolidate storage to the single JSON key. Change getMyProjectGroups to use an optional total (undefined instead of null) and update callers accordingly. Other updates: persist cached name on selection, simplify input open logic, switch ProjectGroupPicker styles to SCSS and theme variables, clear the removed storage key from auth sign-out, and add dataset validation/error display in workspace/create/tdei.vue when dataset metadata is incomplete.
---
 components/ProjectGroupPicker.vue | 64 +++++++++++++++++++++----------
 pages/dashboard.vue               | 55 ++++++++------------------
 pages/workspace/create/tdei.vue   | 28 ++++++++++----
 services/tdei.ts                  |  7 ++--
 4 files changed, 82 insertions(+), 72 deletions(-)

diff --git a/components/ProjectGroupPicker.vue b/components/ProjectGroupPicker.vue
index b14daf3..c49f8be 100644
--- a/components/ProjectGroupPicker.vue
+++ b/components/ProjectGroupPicker.vue
@@ -18,7 +18,7 @@
     >
       <div class="pg-header">
         <span v-if="projectGroups.length > 0" class="pg-count">
-          <template v-if="totalCount !== null">
+          <template v-if="totalCount !== undefined">
             Showing first {{ projectGroups.length }} of {{ totalCount }} project groups
             <span v-if="hasMore && !loading" class="pg-scroll-hint">&#183; Scroll to continue loading</span>
           </template>
@@ -60,6 +60,29 @@
   </div>
 </template>
 
+<script lang="ts">
+const STORAGE_KEY_PROJECT_GROUP = 'tdei-selected-project-group'
+
+function loadCachedName(id: string): string | undefined {
+  if (typeof window === 'undefined') return undefined
+  try {
+    const raw = sessionStorage.getItem(STORAGE_KEY_PROJECT_GROUP)
+    if (!raw) return undefined
+    const stored = JSON.parse(raw) as { id: string; name: string }
+    return stored.id === id ? stored.name : undefined
+  } catch {
+    return undefined
+  }
+}
+
+function persistCachedName(id: string, name: string) {
+  if (typeof window === 'undefined') return
+  try {
+    sessionStorage.setItem(STORAGE_KEY_PROJECT_GROUP, JSON.stringify({ id, name }))
+  } catch { /* silently fail */ }
+}
+</script>
+
 <script setup lang="ts">
 import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import { tdeiUserClient } from '~/services/index'
@@ -69,13 +92,12 @@ const props = withDefaults(defineProps<{ disabled?: boolean }>(), {
 })
 
 const model = defineModel({ required: true })
-const nameModel = defineModel('name', { default: '' })
 const searchText = ref('')
 const isOpen = ref(false)
 const projectGroups = ref<{ id: string; name: string }[]>([])
 const selectedGroupName = ref('')
 const loading = ref(false)
-const totalCount = ref<number | null>(null)
+const totalCount = ref<number | undefined>(undefined)
 const pickerRef = ref<HTMLElement | null>(null)
 const listRef = ref<HTMLElement | null>(null)
 const activeIndex = ref(-1)
@@ -97,7 +119,7 @@ const loadGroups = async (reset = false) => {
     hasMore.value = true
     projectGroups.value = []
     activeIndex.value = -1
-    totalCount.value = null
+    totalCount.value = undefined
   }
   if (!hasMore.value) return
 
@@ -113,8 +135,10 @@ const loadGroups = async (reset = false) => {
     }
 
     const { items: newGroups, total } = await tdeiUserClient.getMyProjectGroups(pageNo, query, pageSize)
-    if (total !== null) totalCount.value = total
+    if (total !== undefined) totalCount.value = total
     projectGroups.value.push(...newGroups)
+    const selected = newGroups.find(g => g.id === model.value)
+    if (selected) persistCachedName(selected.id, selected.name)
 
     if (newGroups.length < pageSize) {
       hasMore.value = false
@@ -146,9 +170,7 @@ const onInputClick = () => {
 }
 
 const onInput = () => {
-  if (!isOpen.value) {
-    isOpen.value = true
-  }
+  isOpen.value = true
   clearTimeout(timeoutId)
   timeoutId = setTimeout(() => {
     loadGroups(true)
@@ -160,7 +182,6 @@ watch(model, (newId) => {
   if (pg && !isOpen.value) {
     searchText.value = pg.name
     selectedGroupName.value = pg.name
-    nameModel.value = pg.name
   }
 })
 
@@ -178,7 +199,7 @@ const selectGroup = (id: string) => {
   if (pg) {
     searchText.value = pg.name
     selectedGroupName.value = pg.name
-    nameModel.value = pg.name
+    persistCachedName(pg.id, pg.name)
   }
 }
 
@@ -249,8 +270,9 @@ const onKeydown = (e: KeyboardEvent) => {
 }
 
 const applyCachedName = () => {
-  searchText.value = nameModel.value
-  selectedGroupName.value = nameModel.value
+  const cached = loadCachedName(model.value as string) ?? ''
+  searchText.value = cached
+  selectedGroupName.value = cached
 }
 
 const handleClickOutside = (event: MouseEvent) => {
@@ -269,7 +291,7 @@ onMounted(async () => {
   document.addEventListener('mousedown', handleClickOutside)
 
   // Show cached name immediately before the API call completes
-  if (model.value && nameModel.value) {
+  if (model.value && loadCachedName(model.value as string)) {
     applyCachedName()
   }
 
@@ -280,7 +302,7 @@ onMounted(async () => {
     if (selected) {
       searchText.value = selected.name
       selectedGroupName.value = selected.name
-    } else if (model.value && nameModel.value) {
+    } else if (model.value && loadCachedName(model.value as string)) {
       // Group is beyond page 1 — use the cached name for display
       applyCachedName()
     } else if (model.value) {
@@ -291,7 +313,6 @@ onMounted(async () => {
         if (found) {
           searchText.value = found.name
           selectedGroupName.value = found.name
-          nameModel.value = found.name
           break
         }
       }
@@ -300,7 +321,6 @@ onMounted(async () => {
       model.value = first.id
       searchText.value = first.name
       selectedGroupName.value = first.name
-      nameModel.value = first.name
     }
   }
 })
@@ -311,7 +331,9 @@ onUnmounted(() => {
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+@import "assets/scss/theme.scss";
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -328,17 +350,17 @@ onUnmounted(() => {
   align-items: center;
   gap: 8px;
   padding: 5px 12px;
-  border-bottom: 1px solid #e9ecef;
-  background: #f8f9fa;
+  border-bottom: 1px solid $gray-200;
+  background: $gray-100;
   min-height: 30px;
 }
 .pg-count {
   font-size: 0.74rem;
-  color: #6c757d;
+  color: $gray-600;
   flex: 1;
 }
 .pg-scroll-hint {
-  color: #0d6efd;
+  color: $primary;
 }
 .pg-list-wrap {
   position: relative;
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index f88adb7..2aa7056 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -4,7 +4,7 @@
         <h2 class="visually-hidden">My Workspaces</h2>
 
         <label for="ws_project_group_picker">Project Group</label>
-        <project-group-picker v-model="currentProjectGroup" v-model:name="currentProjectGroupName" id="ws_project_group_picker" />
+        <project-group-picker v-model="currentProjectGroup" id="ws_project_group_picker" />
 
         <nuxt-link class="btn btn-primary flex-shrink-0" to="/workspace/create">
           <app-icon variant="add" size="24" />
@@ -45,37 +45,19 @@
 
 <script lang="ts">
 const STORAGE_KEY_PROJECT_GROUP = 'tdei-selected-project-group';
-const STORAGE_KEY_PROJECT_GROUP_NAME = 'tdei-selected-project-group-name';
 const STORAGE_KEY_WORKSPACE = 'tdei-selected-workspace';
 
 function getLastProjectGroupId(): string | null {
   if (typeof window === 'undefined') return null;
   try {
-    return sessionStorage.getItem(STORAGE_KEY_PROJECT_GROUP);
+    const raw = sessionStorage.getItem(STORAGE_KEY_PROJECT_GROUP);
+    if (!raw) return null;
+    const stored = JSON.parse(raw) as { id: string; name: string };
+    return stored.id ?? null;
   } catch {
     return null;
   }
 }
-function setLastProjectGroupId(id: string) {
-  if (typeof window === 'undefined') return;
-  try {
-    sessionStorage.setItem(STORAGE_KEY_PROJECT_GROUP, id);
-  } catch { /* silently fail */ }
-}
-function getLastProjectGroupName(): string | null {
-  if (typeof window === 'undefined') return null;
-  try {
-    return sessionStorage.getItem(STORAGE_KEY_PROJECT_GROUP_NAME);
-  } catch {
-    return null;
-  }
-}
-function setLastProjectGroupName(name: string) {
-  if (typeof window === 'undefined') return;
-  try {
-    sessionStorage.setItem(STORAGE_KEY_PROJECT_GROUP_NAME, name);
-  } catch { /* silently fail */ }
-}
 function getLastWorkspaceId(): number | null {
   if (typeof window === 'undefined') return null;
   try {
@@ -103,7 +85,6 @@ const workspaces = (await workspacesClient.getMyWorkspaces()).sort(compareWorksp
 const workspacesByProjectGroup = Map.groupBy(workspaces, w => w.tdeiProjectGroupId);
 
 const currentProjectGroup = ref(getLastProjectGroupId());
-const currentProjectGroupName = ref(getLastProjectGroupName());
 const currentWorkspace = ref({});
 const currentWorkspaces = computed(() => workspacesByProjectGroup.get(currentProjectGroup.value));
 
@@ -115,8 +96,6 @@ for (const w of workspaces) {
 
 onMounted(() => {
   watch(currentWorkspace, (val) => { if (val?.id) setLastWorkspaceId(val.id) });
-  watch(currentProjectGroup, (val) => { if (val) setLastProjectGroupId(val) });
-  watch(currentProjectGroupName, (val) => { if (val) setLastProjectGroupName(val) });
   watch(currentWorkspaces, onCurrentWorkspacesChange);
 
   autoSelectPreferredView();
@@ -186,21 +165,19 @@ async function selectWorkspace(workspace) {
   }
 
   .project-group-picker {
-    width: auto;
-    min-width: 300px;
-    border-color: transparent;
-    border-left-color: $border-color;
-    margin-right: auto;
-
-    &:hover {
-      border-color: $border-color;
-    }
+    width: 100%;
+    border-color: $border-color;
+    margin-right: 1rem;
 
-    @include media-breakpoint-down(md) {
-      & {
-        width: 100%;
+    @include media-breakpoint-up(md) {
+      width: auto;
+      min-width: 300px;
+      border-color: transparent;
+      border-left-color: $border-color;
+      margin-right: auto;
+
+      &:hover {
         border-color: $border-color;
-        margin-right: 1rem;
       }
     }
   }
diff --git a/pages/workspace/create/tdei.vue b/pages/workspace/create/tdei.vue
index 6557fbd..1db82ef 100644
--- a/pages/workspace/create/tdei.vue
+++ b/pages/workspace/create/tdei.vue
@@ -38,6 +38,9 @@
                 required
               />
             </label>
+            <div v-if="datasetError" class="alert alert-danger py-2" role="alert">
+              {{ datasetError }}
+            </div>
           </div><!-- .card-body -->
 
           <div class="card-footer">
@@ -140,21 +143,25 @@ const importer = new TdeiImporter(workspacesClient, tdeiClient, osmClient, conte
 
 const loading = reactive(new LoadingContext());
 const route = useRoute();
-const tdeiRecordId = ref(null);
-const record = reactive({});
-const map = ref({});
+const tdeiRecordId = ref<string | null>(null);
+const record = reactive<Record<string, any>>({});
+const map = ref<any>({});
 const workspaceTitle = ref('');
-const projectGroupId = ref(null);
+const projectGroupId = ref<string | null>(null);
+const datasetError = ref<string | null>(null);
 
 watch(tdeiRecordId, (val) => getDatasetInfo(val));
 
 const complete = computed(() =>
   workspaceTitle.value.trim().length > 0
-    && projectGroupId.value !== null
-    && tdeiRecordId !== null
+  && projectGroupId.value !== null
+  && tdeiRecordId.value !== null
+  && datasetError.value === null,
 );
 
 async function getDatasetInfo(id: string | null) {
+  datasetError.value = null
+
   if (id === null) {
     for (const prop in record) {
       record[prop] = '';
@@ -180,9 +187,14 @@ async function getDatasetInfo(id: string | null) {
 
   await nextTick();
 
+  if (!record.project_group?.tdei_project_group_id || !record.tdei_dataset_id) {
+    datasetError.value = 'The selected dataset returned incomplete data. Please try a different dataset or contact support.'
+    return
+  }
+
   workspaceTitle.value = record.metadata?.dataset_detail?.name ?? ''
-  projectGroupId.value = record.project_group?.tdei_project_group_id ?? null
-  tdeiRecordId.value = record.tdei_dataset_id ?? null
+  projectGroupId.value = record.project_group.tdei_project_group_id
+  tdeiRecordId.value = record.tdei_dataset_id
 
   initMap();
 }
diff --git a/services/tdei.ts b/services/tdei.ts
index c5f0ed5..f625b5b 100644
--- a/services/tdei.ts
+++ b/services/tdei.ts
@@ -124,7 +124,6 @@ export class TdeiAuthStore {
 
     localStorage.removeItem(this._storageKey);
     sessionStorage.removeItem('tdei-selected-project-group');
-    sessionStorage.removeItem('tdei-selected-project-group-name');
     sessionStorage.removeItem('tdei-selected-workspace');
   }
 }
@@ -460,7 +459,7 @@ export class TdeiUserClient extends BaseHttpClient implements ICancelableClient
     return new TdeiClient(this._baseUrl, this.#auth, signal ?? this._abortSignal);
   }
 
-  async getMyProjectGroups(pageNo: number = 1, searchText: string = '', pageSize: number = 10, sortBy: 'name' | 'created_at' = 'name'): Promise<{ items: TdeiProjectGroup[], total: number | null }> {
+  async getMyProjectGroups(pageNo: number = 1, searchText: string = '', pageSize: number = 10, sortBy: 'name' | 'created_at' = 'name'): Promise<{ items: TdeiProjectGroup[], total?: number }> {
     let url = `project-group-roles/${this.#auth.subject}?page_size=${pageSize}&page_no=${pageNo}&sort_by=${sortBy}`;
     if (searchText) {
       url += `&searchText=${encodeURIComponent(searchText)}`;
@@ -471,12 +470,12 @@ export class TdeiUserClient extends BaseHttpClient implements ICancelableClient
     try {
       const totalHeader = response.headers.get('X-Total-Count');
       const totalParsed = totalHeader !== null ? parseInt(totalHeader, 10) : NaN;
-      const total = Number.isNaN(totalParsed) ? null : totalParsed;
+      const total = Number.isNaN(totalParsed) ? undefined : totalParsed;
       const items = (await response.json() as TdeiProjectGroupApiResponse[]) ?? [];
       return { items: items.map(p => ({ id: p.tdei_project_group_id, name: p.project_group_name })), total };
     } catch (e) {
       console.warn('getMyProjectGroups: failed to parse API response', e);
-      return { items: [], total: null };
+      return { items: [] };
     }
   }
 

From 408cb8f5c88b2ed09fe5ba9b3cdc404541be312e Mon Sep 17 00:00:00 2001
From: shweta2101 <shwethap@vindago.in>
Date: Thu, 14 May 2026 12:13:19 +0530
Subject: [PATCH 09/11] Extract closeDropdown; close on focusout

Refactor dropdown closing logic by extracting repeated code into a closeDropdown() helper. Use this helper from the Escape key handler and the outside-click handler to reduce duplication. Add an @focusout handler (onFocusOut) on the root element to close the dropdown when focus moves outside the picker (checks relatedTarget), ensuring consistent behavior for focus-based dismissals.
---
 components/ProjectGroupPicker.vue | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/components/ProjectGroupPicker.vue b/components/ProjectGroupPicker.vue
index c49f8be..18e05c4 100644
--- a/components/ProjectGroupPicker.vue
+++ b/components/ProjectGroupPicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="position-relative project-group-picker" ref="pickerRef">
+  <div class="position-relative project-group-picker" ref="pickerRef" @focusout="onFocusOut">
     <input
       v-model="searchText"
       type="text"
@@ -261,11 +261,7 @@ const onKeydown = (e: KeyboardEvent) => {
     }
   } else if (e.key === 'Escape') {
     e.preventDefault()
-    isOpen.value = false
-    const pg = projectGroups.value.find(p => p.id === model.value)
-    const name = pg?.name ?? selectedGroupName.value
-    searchText.value = name
-    if (pg) selectedGroupName.value = name
+    closeDropdown()
   }
 }
 
@@ -275,15 +271,23 @@ const applyCachedName = () => {
   selectedGroupName.value = cached
 }
 
+const closeDropdown = () => {
+  isOpen.value = false
+  const pg = projectGroups.value.find(p => p.id === model.value)
+  const name = pg?.name ?? selectedGroupName.value
+  searchText.value = name
+  if (pg) selectedGroupName.value = name
+}
+
 const handleClickOutside = (event: MouseEvent) => {
   if (pickerRef.value && !pickerRef.value.contains(event.target as Node)) {
-    if (isOpen.value) {
-      isOpen.value = false
-      const pg = projectGroups.value.find(p => p.id === model.value)
-      const name = pg?.name ?? selectedGroupName.value
-      searchText.value = name
-      if (pg) selectedGroupName.value = name
-    }
+    if (isOpen.value) closeDropdown()
+  }
+}
+
+const onFocusOut = (e: FocusEvent) => {
+  if (!pickerRef.value?.contains(e.relatedTarget as Node)) {
+    if (isOpen.value) closeDropdown()
   }
 }
 

From dfb8b0828dfb924670117e9f586ddd336f2d7859 Mon Sep 17 00:00:00 2001
From: Cy Rossignol <cy@rossignols.me>
Date: Mon, 18 May 2026 11:36:46 -0700
Subject: [PATCH 10/11] Remove redundant blur handler

The focusout event handler covers this interaction.
---
 components/ProjectGroupPicker.vue | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/components/ProjectGroupPicker.vue b/components/ProjectGroupPicker.vue
index 18e05c4..82cec25 100644
--- a/components/ProjectGroupPicker.vue
+++ b/components/ProjectGroupPicker.vue
@@ -279,12 +279,6 @@ const closeDropdown = () => {
   if (pg) selectedGroupName.value = name
 }
 
-const handleClickOutside = (event: MouseEvent) => {
-  if (pickerRef.value && !pickerRef.value.contains(event.target as Node)) {
-    if (isOpen.value) closeDropdown()
-  }
-}
-
 const onFocusOut = (e: FocusEvent) => {
   if (!pickerRef.value?.contains(e.relatedTarget as Node)) {
     if (isOpen.value) closeDropdown()
@@ -292,8 +286,6 @@ const onFocusOut = (e: FocusEvent) => {
 }
 
 onMounted(async () => {
-  document.addEventListener('mousedown', handleClickOutside)
-
   // Show cached name immediately before the API call completes
   if (model.value && loadCachedName(model.value as string)) {
     applyCachedName()
@@ -330,7 +322,6 @@ onMounted(async () => {
 })
 
 onUnmounted(() => {
-  document.removeEventListener('mousedown', handleClickOutside)
   clearTimeout(timeoutId)
 })
 </script>

From dca4efea2d4c47bd2e0e9bf615da36ba9f5f144b Mon Sep 17 00:00:00 2001
From: Cy Rossignol <cy@rossignols.me>
Date: Mon, 18 May 2026 11:55:10 -0700
Subject: [PATCH 11/11] Fix detected text contrast issue

---
 components/ProjectGroupPicker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/ProjectGroupPicker.vue b/components/ProjectGroupPicker.vue
index 82cec25..14a3367 100644
--- a/components/ProjectGroupPicker.vue
+++ b/components/ProjectGroupPicker.vue
@@ -351,7 +351,7 @@ onUnmounted(() => {
 }
 .pg-count {
   font-size: 0.74rem;
-  color: $gray-600;
+  color: $gray-700;
   flex: 1;
 }
 .pg-scroll-hint {