Minor UI fixes

rsconcept/frontend/src/components/DataTable/index.tsx

@@ -190,7 +190,7 @@ export default function DataTable<TData extends RowData>({
     </tfoot>
   </table>}
   
-  {enablePagination && 
+  {!isEmpty && enablePagination && 
   <PaginationTools
     table={tableImpl}
     paginationOptions={paginationOptions}

rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx

@@ -1,10 +1,9 @@
-import { useCallback, useLayoutEffect, useState } from 'react';
+import { useCallback, useLayoutEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { MagnifyingGlassIcon } from '../../components/Icons';
 import { useAuth } from '../../context/AuthContext';
 import { useConceptNavigation } from '../../context/NagivationContext';
-import useLocalStorage from '../../hooks/useLocalStorage';
 import { ILibraryFilter } from '../../models/miscelanious';
 import { LibraryFilterStrategy } from '../../models/miscelanious';
 import PickerStrategy from './PickerStrategy';
@@ -25,16 +24,17 @@ interface SearchPanelProps {
   total: number
   filtered: number
   setFilter: React.Dispatch<React.SetStateAction<ILibraryFilter>>
+  query: string
+  setQuery: React.Dispatch<React.SetStateAction<string>>
+  strategy: LibraryFilterStrategy
+  setStrategy: React.Dispatch<React.SetStateAction<LibraryFilterStrategy>>
 }
 
-function SearchPanel({ total, filtered, setFilter }: SearchPanelProps) {
+function SearchPanel({ total, filtered, query, setQuery, strategy, setStrategy, setFilter }: SearchPanelProps) {
   const { navigateTo } = useConceptNavigation();
   const search = useLocation().search;
   const { user } = useAuth();
 
-  const [query, setQuery] = useState('');
-  const [strategy, setStrategy] = useLocalStorage<LibraryFilterStrategy>('search_strategy', LibraryFilterStrategy.MANUAL);
-
   function handleChangeQuery(event: React.ChangeEvent<HTMLInputElement>) {
     const newQuery = event.target.value;
     setQuery(newQuery);
@@ -76,7 +76,7 @@ function SearchPanel({ total, filtered, setFilter }: SearchPanelProps) {
           {filtered} из {total}
         </span>
       </div>
-      <div className='flex items-center justify-center w-full pr-[10rem]'>
+      <div className='flex items-center justify-center w-full ml-8'>
         <PickerStrategy
           value={strategy}
           onChange={handleChangeStrategy}

rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx

@@ -15,12 +15,12 @@ import { prefixes } from '../../utils/constants';
 
 interface ViewLibraryProps {
   items: ILibraryItem[]
-  cleanQuery: () => void
+  resetQuery: () => void
 }
 
 const columnHelper = createColumnHelper<ILibraryItem>();
 
-function ViewLibrary({ items, cleanQuery }: ViewLibraryProps) {
+function ViewLibrary({ items, resetQuery: cleanQuery }: ViewLibraryProps) {
   const { navigateTo } = useConceptNavigation();
   const intl = useIntl();
   const { user } = useAuth();
@@ -42,7 +42,7 @@ function ViewLibrary({ items, cleanQuery }: ViewLibraryProps) {
         const item = props.row.original;
         return (<>
           <div
-            className='flex items-center justify-start gap-1'
+            className='flex items-center justify-start gap-1 min-w-[2.75rem]'
             id={`${prefixes.library_list}${item.id}`}
           >
             {user && user.subscriptions.includes(item.id) && <p title='Отслеживаемая'><EyeIcon size={3}/></p>}
@@ -83,10 +83,10 @@ function ViewLibrary({ items, cleanQuery }: ViewLibraryProps) {
     columnHelper.accessor('time_update', {
       id: 'time_update',
       header: 'Обновлена',
-      size: 220,
-      minSize: 220,
-      maxSize: 220,
-      cell: props => new Date(props.cell.getValue()).toLocaleString(intl.locale),
+      size: 150,
+      minSize: 150,
+      maxSize: 150,
+      cell: props => <div className='text-sm min-w-[8.25rem]'>{new Date(props.cell.getValue()).toLocaleString(intl.locale)}</div>,
       enableSorting: true,
       sortingFn: 'datetime',
       sortDescFirst: true
@@ -95,6 +95,7 @@ function ViewLibrary({ items, cleanQuery }: ViewLibraryProps) {
   
   return (
     <div>
+      {items.length > 0 &&
       <div className='relative w-full'>
       <div className='absolute top-[-0.125rem] left-0 flex gap-1 ml-3 z-pop'>
         <div id='library-help' className='py-2'>
@@ -106,38 +107,35 @@ function ViewLibrary({ items, cleanQuery }: ViewLibraryProps) {
           </div>
         </ConceptTooltip>
       </div>
-      </div>
-    <DataTable
-      columns={columns}
-      data={items}
-
-      noDataComponent={
-      <div className='flex flex-col gap-4 justify-center p-2 text-center min-h-[10rem]'>
-        <p><b>Список схем пуст</b></p>
-        <p>
-          <TextURL text='Создать схему' href='/rsform-create'/>
-          <span> | </span>
-          <TextURL text='Все схемы' href='/library'/>
-          <span> | </span>
-          <span className='cursor-pointer hover:underline text-url' onClick={cleanQuery}>
-            <b>Очистить фильтр</b>
-          </span>
-        </p>
       </div>}
+      <DataTable
+        columns={columns}
+        data={items}
 
-      onRowClicked={openRSForm}
+        noDataComponent={
+        <div className='flex flex-col gap-4 justify-center p-2 text-center min-h-[6rem]'>
+          <p>Список схем пуст</p>
+          <p className='flex justify-center gap-4'>
+            <TextURL text='Создать схему' href='/rsform-create'/>
+            <span className='cursor-pointer hover:underline text-url' onClick={cleanQuery}>
+              Очистить фильтр
+            </span>
+          </p>
+        </div>}
         
-      enableSorting
-      initialSorting={{
-        id: 'time_update',
-        desc: true
-      }}
+        onRowClicked={openRSForm}
 
-      enablePagination
-      paginationPerPage={itemsPerPage}
-      onChangePaginationOption={setItemsPerPage}
-      paginationOptions={[10, 20, 30, 50, 100]}
-    />
+        enableSorting
+        initialSorting={{
+          id: 'time_update',
+          desc: true
+        }}
+
+        enablePagination
+        paginationPerPage={itemsPerPage}
+        onChangePaginationOption={setItemsPerPage}
+        paginationOptions={[10, 20, 30, 50, 100]}
+      />
     </div>
   );
 }

rsconcept/frontend/src/pages/LibraryPage/index.tsx

@@ -1,11 +1,12 @@
-import { useLayoutEffect, useState } from 'react';
+import { useCallback, useLayoutEffect, useState } from 'react';
 
 import BackendError from '../../components/BackendError'
 import { ConceptLoader } from '../../components/Common/ConceptLoader'
 import { useLibrary } from '../../context/LibraryContext';
 import { useConceptTheme } from '../../context/ThemeContext';
+import useLocalStorage from '../../hooks/useLocalStorage';
 import { ILibraryItem } from '../../models/library';
-import { ILibraryFilter } from '../../models/miscelanious';
+import { ILibraryFilter, LibraryFilterStrategy } from '../../models/miscelanious';
 import SearchPanel from './SearchPanel';
 import ViewLibrary from './ViewLibrary';
 
@@ -16,6 +17,9 @@ function LibraryPage() {
   const [ filter, setFilter ] = useState<ILibraryFilter>({});
   const [ items, setItems ] = useState<ILibraryItem[]>([]);
 
+  const [query, setQuery] = useState('');
+  const [strategy, setStrategy] = useLocalStorage<LibraryFilterStrategy>('search_strategy', LibraryFilterStrategy.MANUAL);
+
   useLayoutEffect(
   () => {
     setShowScroll(true);
@@ -27,6 +31,13 @@ function LibraryPage() {
     setItems(library.filter(filter));
   }, [library, filter, filter.query]);
 
+  const resetQuery = useCallback(
+  () => {
+    setQuery('');
+    setStrategy(LibraryFilterStrategy.MANUAL);
+    setFilter({});
+  }, [setStrategy])
+
   return (
     <div className='w-full'>
       { library.loading && <ConceptLoader /> }
@@ -34,12 +45,16 @@ function LibraryPage() {
       { !library.loading && library.items && 
       <div className='flex flex-col w-full'>
         <SearchPanel
+          query={query}
+          setQuery={setQuery}
+          strategy={strategy}
+          setStrategy={setStrategy}
           total={library.items.length ?? 0}
           filtered={items.length}
           setFilter={setFilter}
         />
         <ViewLibrary
-          cleanQuery={() => setFilter({})}
+          resetQuery={resetQuery}
           items={items} 
         />
       </div>

rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx

@@ -49,7 +49,7 @@ function UserTabs() {
           </div>   
         </div>
         {subscriptions.length > 0 && showSubs &&
-        <div className='flex flex-col w-full gap-2 pl-4'>
+        <div className='flex flex-col w-full gap-6 pl-4'>
           <h1>Отслеживаемые схемы</h1>
           <ViewSubscriptions items={subscriptions} />
         </div>}

rsconcept/frontend/src/pages/UserProfilePage/ViewSubscriptions.tsx

@@ -38,10 +38,10 @@ function ViewSubscriptions({items}: ViewSubscriptionsProps) {
     columnHelper.accessor('time_update', {
       id: 'time_update',
       header: 'Обновлена',
-      minSize: 200,
-      size: 200,
-      maxSize: 200,
-      cell: props => new Date(props.cell.getValue()).toLocaleString(intl.locale),
+      minSize: 150,
+      size: 150,
+      maxSize: 150,
+      cell: props => <div className='min-w-[8.25rem]'>{new Date(props.cell.getValue()).toLocaleString(intl.locale)}</div>,
       enableSorting: true
     })
   ], [intl]);