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.

Author: shweta2101

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

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>