pl-fe: fix user index page

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/pages/dashboard/user-index.tsx

@@ -3,6 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import ScrollableList from 'pl-fe/components/scrollable-list';
 import Column from 'pl-fe/components/ui/column';
+import Stack from 'pl-fe/components/ui/stack';
 import AccountContainer from 'pl-fe/containers/account-container';
 import { adminUsersRoute } from 'pl-fe/features/ui/router';
 import { useAdminAccounts } from 'pl-fe/queries/admin/use-accounts';
@@ -26,20 +27,22 @@ const UserIndexPage: React.FC = () => {
 
   return (
     <Column label={intl.formatMessage(messages.heading)}>
-      <SearchInput />
-      <ScrollableList
-        scrollKey='userIndex'
-        hasMore={hasNextPage}
-        isLoading={isFetching}
-        showLoading={isPending}
-        onLoadMore={() => fetchNextPage({ cancelRefetch: false })}
-        emptyMessageText={<FormattedMessage id='admin.user_index.empty' defaultMessage='No users found.' />}
-        itemClassName='pb-4'
-      >
-        {(accountIds || []).map(id =>
-          <AccountContainer key={id} id={id} withDate />,
-        )}
-      </ScrollableList>
+      <Stack space={2}>
+        <SearchInput query={query} />
+        <ScrollableList
+          scrollKey='userIndex'
+          hasMore={hasNextPage}
+          isLoading={isFetching}
+          showLoading={isPending}
+          onLoadMore={() => fetchNextPage({ cancelRefetch: false })}
+          emptyMessageText={<FormattedMessage id='admin.user_index.empty' defaultMessage='No users found.' />}
+          itemClassName='pb-4'
+        >
+          {(accountIds || []).map(id =>
+            <AccountContainer key={id} id={id} withDate />,
+          )}
+        </ScrollableList>
+      </Stack>
     </Column>
   );
 };

packages/pl-fe/src/pages/search/search.tsx

@@ -1,5 +1,6 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
+import clsx from 'clsx';
 import React, { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
@@ -28,11 +29,12 @@ const messages = defineMessages({
 });
 
 interface ISearchInput {
+  className?: string;
   placeholder?: string;
+  query?: string;
 }
 
-const SearchInput: React.FC<ISearchInput> = ({ placeholder }) => {
-  const { q: query } = searchRoute.useSearch();
+const SearchInput: React.FC<ISearchInput> = ({ className, placeholder, query }) => {
   const navigate = useNavigate({ from: searchRoute.fullPath });
   const [value, setValue] = useState(query || '');
 
@@ -73,7 +75,7 @@ const SearchInput: React.FC<ISearchInput> = ({ placeholder }) => {
 
   return (
     <div
-      className='sticky top-[74px] z-10 w-full bg-white/90 backdrop-blur backdrop-saturate-200 black:bg-black/75 dark:bg-primary-900/90'
+      className={clsx('z-10 w-full bg-white/90 backdrop-blur backdrop-saturate-200 black:bg-black/75 dark:bg-primary-900/90', className)}
     >
       <label htmlFor='search' className='sr-only'>{placeholder || intl.formatMessage(messages.placeholder)}</label>
 
@@ -190,10 +192,12 @@ const SearchResults = () => {
 const SearchPage = () => {
   const intl = useIntl();
 
+  const { q: query } = searchRoute.useSearch();
+
   return (
     <Column label={intl.formatMessage(messages.heading)}>
       <div className='space-y-4'>
-        <SearchInput />
+        <SearchInput className='sticky top-[74px]' query={query} />
         <SearchResults />
       </div>
     </Column>