FIX (mobile): Do not preselect card on mobile for DBs, notifiers and storanges

Author: RostislavDugin

frontend/src/features/databases/ui/DatabasesComponent.tsx

@@ -47,7 +47,7 @@ export const DatabasesComponent = ({ contentHeight, workspace, isCanManageDBs }:
         if (selectDatabaseId) {
           updateSelectedDatabaseId(selectDatabaseId);
         } else if (!selectedDatabaseId && !isSilent && !isMobile) {
-          // On desktop, auto-select a database; on mobile, keep it unselected
+          // On desktop, auto-select a database; on mobile, keep it unselected to show the list first
           const savedDatabaseId = localStorage.getItem(
             `${SELECTED_DATABASE_STORAGE_KEY}_${workspace.id}`,
           );

frontend/src/features/notifiers/ui/NotifiersComponent.tsx

@@ -47,7 +47,7 @@ export const NotifiersComponent = ({ contentHeight, workspace, isCanManageNotifi
         if (selectNotifierId) {
           updateSelectedNotifierId(selectNotifierId);
         } else if (!selectedNotifierId && !isSilent && !isMobile) {
-          // On desktop, auto-select a notifier; on mobile, keep it unselected
+          // On desktop, auto-select a notifier; on mobile, keep it unselected to show the list first
           const savedNotifierId = localStorage.getItem(
             `${SELECTED_NOTIFIER_STORAGE_KEY}_${workspace.id}`,
           );

frontend/src/features/storages/ui/StoragesComponent.tsx

@@ -34,15 +34,19 @@ export const StoragesComponent = ({ contentHeight, workspace, isCanManageStorage
     }
   };
 
-  const loadStorages = () => {
-    setIsLoading(true);
+  const loadStorages = (isSilent = false, selectStorageId?: string) => {
+    if (!isSilent) {
+      setIsLoading(true);
+    }
 
     storageApi
       .getStorages(workspace.id)
       .then((storages: Storage[]) => {
         setStorages(storages);
-        if (!selectedStorageId && !isMobile) {
-          // On desktop, auto-select a storage; on mobile, keep it unselected
+        if (selectStorageId) {
+          updateSelectedStorageId(selectStorageId);
+        } else if (!selectedStorageId && !isSilent && !isMobile) {
+          // On desktop, auto-select a storage; on mobile, keep it unselected to show the list first
           const savedStorageId = localStorage.getItem(
             `${SELECTED_STORAGE_STORAGE_KEY}_${workspace.id}`,
           );
@@ -154,8 +158,8 @@ export const StoragesComponent = ({ contentHeight, workspace, isCanManageStorage
             isShowName
             isShowClose={false}
             onClose={() => setIsShowAddStorage(false)}
-            onChanged={() => {
-              loadStorages();
+            onChanged={(storage) => {
+              loadStorages(false, storage.id);
               setIsShowAddStorage(false);
             }}
           />

frontend/src/shared/hooks/useIsMobile.tsx

@@ -7,14 +7,14 @@ import { useEffect, useState } from 'react';
  * @returns isMobile boolean
  */
 export function useIsMobile(): boolean {
-  const [isMobile, setIsMobile] = useState<boolean>(false);
+  // Initialize with actual value to avoid race conditions
+  const [isMobile, setIsMobile] = useState<boolean>(() => window.innerWidth <= 768);
 
   useEffect(() => {
     const updateIsMobile = () => {
       setIsMobile(window.innerWidth <= 768);
     };
 
-    updateIsMobile(); // Set initial value
     window.addEventListener('resize', updateIsMobile);
 
     return () => {