Repository: Infisical/infisical
File: frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx (TypeScript)

Code before:
        fullAccountPath = `${path}/${account?.name}`;
      }

      accessAwsIam(account, fullAccountPath);
    } else {
      handlePopUpOpen("accessAccount", account);
    }
  }

  return (
    <div className="flex flex-col gap-4">
      <div className="flex gap-2">
        <ProjectPermissionCan I={ProjectPermissionActions.Read} a={ProjectPermissionSub.PamFolders}>
          {(isAllowed) =>
            isAllowed && (
              <AccountViewToggle
                value={accountView}
                onChange={(e) => {
                  setPage(1);
                  setFilter({ resourceIds: [] });
                  setAccountView(e);

                  // Reset perPage to appropriate default for the view
                  const newPerPage = e === PamAccountView.Flat ? 12 : 10;
                  setPerPage(newPerPage);
                  setUserTablePreference("pamAccountsTable", PreferenceKey.PerPage, newPerPage);

                  navigate({
                    search: (prev) => ({
                      ...prev,
                      accountView: e === PamAccountView.Flat ? undefined : e,
                      accountPath: e === PamAccountView.Flat ? "/" : prev.accountPath
                    })
                  });
                }}
              />
            )
          }
        </ProjectPermissionCan>
        <Input
          value={search}
          onChange={(e) => {
            const newSearch = e.target.value;
            setSearch(newSearch);
            navigate({
              search: (prev) => ({ ...prev, search: newSearch || undefined }),
              replace: true
            });
          }}
          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
          placeholder="Search accounts..."

Review comment (refactor):
I would remove this and just use the same page size options for both views, otherwise user stored default page sizes will be reset when changing view, and reloads could result in a table size being used for the card view

Code after:
        fullAccountPath = `${path}/${account?.name}`;
      }

      accessAwsIam(account, fullAccountPath);
    } else {
      handlePopUpOpen("accessAccount", account);
    }
  }

  return (
    <div className="flex flex-col gap-4">
      <div className="flex gap-2">
        <ProjectPermissionCan I={ProjectPermissionActions.Read} a={ProjectPermissionSub.PamFolders}>
          {(isAllowed) =>
            isAllowed && (
              <AccountViewToggle
                value={accountView}
                onChange={(e) => {
                  setPage(1);
                  setFilter({ resourceIds: [] });
                  setAccountView(e);
                  navigate({
                    search: (prev) => ({
                      ...prev,
                      accountView: e === PamAccountView.Flat ? undefined : e,
                      accountPath: e === PamAccountView.Flat ? "/" : prev.accountPath
                    })
                  });
                }}
              />
            )
          }
        </ProjectPermissionCan>
        <Input
          value={search}
          onChange={(e) => {
            const newSearch = e.target.value;
            setSearch(newSearch);
            navigate({
              search: (prev) => ({ ...prev, search: newSearch || undefined }),
              replace: true
            });
          }}
          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
          placeholder="Search accounts..."
          className="flex-1"
        />
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <IconButton
              ariaLabel="Filter accounts"