fix(layout): fix layout for import book item in grid fit mode (#2554)

apps/readest-app/src/app/library/components/BookItem.tsx

@@ -54,6 +54,7 @@ const BookItem: React.FC<BookItemProps> = ({
         'book-item flex',
         mode === 'grid' && 'h-full flex-col justify-end',
         mode === 'list' && 'h-28 flex-row gap-4 overflow-hidden',
+        mode === 'list' ? 'library-list-item' : 'library-grid-item',
         appService?.hasContextMenu ? 'cursor-pointer' : '',
       )}
       onClick={(e) => e.stopPropagation()}

apps/readest-app/src/app/library/components/Bookshelf.tsx

@@ -11,6 +11,7 @@ import { useAutoFocus } from '@/hooks/useAutoFocus';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useLibraryStore } from '@/store/libraryStore';
 import { useTranslation } from '@/hooks/useTranslation';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import { navigateToLibrary, navigateToReader, showReaderWindow } from '@/utils/nav';
 import { createBookFilter, createBookSorter } from '../utils/libraryUtils';
 import { formatTitle } from '@/utils/book';
@@ -73,6 +74,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
   );
   const [coverFit, setCoverFit] = useState(searchParams?.get('cover') || settings.libraryCoverFit);
   const isImportingBook = useRef(false);
+  const iconSize15 = useResponsiveSize(15);
 
   const { setCurrentBookshelf, setLibrary } = useLibraryStore();
   const { setSelectedBooks, getSelectedBooks, toggleSelectedBook } = useLibraryStore();
@@ -354,7 +356,17 @@ const Bookshelf: React.FC<BookshelfProps> = ({
           />
         ))}
         {viewMode === 'grid' && currentBookshelfItems.length > 0 && (
-          <div className={clsx('mx-0 my-2 sm:mx-4 sm:my-4')}>
+          <div
+            className={clsx('mx-0 my-2 sm:mx-4 sm:my-4')}
+            style={
+              coverFit === 'fit' && viewMode === 'grid'
+                ? {
+                    display: 'flex',
+                    paddingBottom: `${iconSize15 + 24}px`,
+                  }
+                : undefined
+            }
+          >
             <button
               aria-label={_('Import Books')}
               className={clsx(

apps/readest-app/src/app/library/components/BookshelfItem.tsx

@@ -20,8 +20,6 @@ import { md5Fingerprint } from '@/utils/md5';
 import BookItem from './BookItem';
 import GroupItem from './GroupItem';
 
-export type BookshelfItem = Book | BooksGroup;
-
 export const generateBookshelfItems = (
   books: Book[],
   parentGroupName: string,
@@ -76,7 +74,7 @@ export const generateBookshelfItems = (
 
 interface BookshelfItemProps {
   mode: LibraryViewModeType;
-  item: BookshelfItem;
+  item: Book | BooksGroup;
   coverFit: LibraryCoverFitType;
   isSelectMode: boolean;
   itemSelected: boolean;

apps/readest-app/src/app/library/components/GroupItem.tsx

@@ -101,7 +101,7 @@ const GroupItem: React.FC<GroupItemProps> = ({ mode, group, isSelectMode, groupS
         className={clsx(
           'relative flex overflow-hidden',
           mode === 'grid' && 'bg-base-100 aspect-[28/41] items-center justify-center shadow-md',
-          mode === 'list' && 'h-32 items-center justify-start gap-4 py-2',
+          mode === 'list' && 'items-center justify-start gap-4 py-2',
         )}
       >
         <div
@@ -115,6 +115,7 @@ const GroupItem: React.FC<GroupItemProps> = ({ mode, group, isSelectMode, groupS
             className={clsx(
               mode === 'grid' && 'grid w-full grid-cols-2 grid-rows-2 gap-1 overflow-hidden',
               mode === 'list' && 'flex h-28 gap-2 overflow-x-auto overflow-y-hidden',
+              mode === 'list' ? 'library-list-item' : 'library-grid-item',
             )}
             style={
               mode === 'list'

apps/readest-app/src/components/settings/MiscPanel.tsx

@@ -7,14 +7,15 @@ import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useResetViewSettings } from '@/hooks/useResetSettings';
 import { SettingsPanelPanelProp } from './SettingsDialog';
-import { getStyles } from '@/utils/style';
+import { saveViewSettings } from '@/helpers/settings';
 import { validateCSS, formatCSS } from '@/utils/css';
+import { getStyles } from '@/utils/style';
 
 type CSSType = 'book' | 'reader';
 
 const MiscPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset }) => {
   const _ = useTranslation();
-  const { appService } = useEnv();
+  const { appService, envConfig } = useEnv();
   const { settings, isSettingsGlobal, setSettings } = useSettingsStore();
   const { getView, getViewSettings, setViewSettings } = useReaderStore();
   const viewSettings = getViewSettings(bookKey) || settings.globalViewSettings;
@@ -107,6 +108,14 @@ const MiscPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset
 
     setViewSettings(bookKey, { ...viewSettings });
     getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings));
+    saveViewSettings(
+      envConfig,
+      bookKey,
+      type === 'book' ? 'userStylesheet' : 'userUIStylesheet',
+      formattedCSS,
+      false,
+      false,
+    );
   };
 
   const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {