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

Author: shweta2101

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
+    }
   }
 })
 

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) {