Settings / Folders: Move "done" button from header to FAB (#3080)

src/components/left/settings/Settings.tsx

@@ -186,11 +186,6 @@ const Settings: FC<OwnProps> = ({
     currentScreen, onReset, onScreenSelect,
   ]);
 
-  const handleSaveFilter = useCallback(() => {
-    foldersDispatch({ type: 'saveFilters' });
-    handleReset();
-  }, [foldersDispatch, handleReset]);
-
   function renderCurrentSectionContent(isScreenActive: boolean, screen: SettingsScreens) {
     const privacyAllowScreens: Record<number, boolean> = {
       [SettingsScreens.PrivacyPhoneNumber]: PRIVACY_PHONE_NUMBER_SCREENS.includes(screen),
@@ -459,7 +454,6 @@ const Settings: FC<OwnProps> = ({
         <SettingsHeader
           currentScreen={currentScreen}
           onReset={handleReset}
-          onSaveFilter={handleSaveFilter}
           onScreenSelect={onScreenSelect}
           editedFolderId={foldersState.folderId}
         />

src/components/left/settings/SettingsHeader.tsx

@@ -19,7 +19,6 @@ type OwnProps = {
   currentScreen: SettingsScreens;
   editedFolderId?: number;
   onReset: () => void;
-  onSaveFilter: () => void;
   onScreenSelect: (screen: SettingsScreens) => void;
 };
 
@@ -27,7 +26,6 @@ const SettingsHeader: FC<OwnProps> = ({
   currentScreen,
   editedFolderId,
   onReset,
-  onSaveFilter,
   onScreenSelect,
 }) => {
   const {
@@ -227,27 +225,14 @@ const SettingsHeader: FC<OwnProps> = ({
       case SettingsScreens.FoldersExcludedChats:
       case SettingsScreens.FoldersExcludedChatsFromChatList:
         return (
-          <div className="settings-main-header">
-            {(currentScreen === SettingsScreens.FoldersIncludedChats
-              || currentScreen === SettingsScreens.FoldersIncludedChatsFromChatList) ? (
-                <h3>{lang('FilterInclude')}</h3>
-              ) : (
-                <h3>{lang('FilterExclude')}</h3>
-              )}
-
-            <Button
-              round
-              size="smaller"
-              color="translucent"
-              className="color-primary"
-              onClick={onSaveFilter}
-              ariaLabel={lang('AutoDeleteConfirm')}
-            >
-              <i className="icon icon-check" />
-            </Button>
-          </div>
+          <h3>
+            {lang(
+              currentScreen === SettingsScreens.FoldersIncludedChats
+                  || currentScreen === SettingsScreens.FoldersIncludedChatsFromChatList
+                ? 'FilterInclude' : 'FilterExclude',
+            )}
+          </h3>
         );
-
       default:
         return (
           <div className="settings-main-header">

src/components/left/settings/folders/SettingsFolders.tsx

@@ -66,6 +66,11 @@ const SettingsFolders: FC<OwnProps> = ({
     currentScreen, onReset, onScreenSelect,
   ]);
 
+  const handleSaveFilter = useCallback(() => {
+    dispatch({ type: 'saveFilters' });
+    handleReset();
+  }, [dispatch, handleReset]);
+
   const handleCreateFolder = useCallback(() => {
     dispatch({ type: 'reset' });
     onScreenSelect(SettingsScreens.FoldersCreateFolder);
@@ -144,6 +149,7 @@ const SettingsFolders: FC<OwnProps> = ({
           state={state}
           dispatch={dispatch}
           onReset={handleReset}
+          onSaveFilter={handleSaveFilter}
           isActive={isActive}
         />
       );
@@ -155,6 +161,7 @@ const SettingsFolders: FC<OwnProps> = ({
           state={state}
           dispatch={dispatch}
           onReset={handleReset}
+          onSaveFilter={handleSaveFilter}
           isActive={isActive}
         />
       );

src/components/left/settings/folders/SettingsFoldersChatFilters.tsx

@@ -25,7 +25,8 @@ type OwnProps = {
   state: FoldersState;
   dispatch: FolderEditDispatch;
   isActive?: boolean;
-  onReset: () => void;
+  onReset: VoidFunction;
+  onSaveFilter: VoidFunction;
 };
 
 const SettingsFoldersChatFilters: FC<OwnProps> = ({
@@ -34,6 +35,7 @@ const SettingsFoldersChatFilters: FC<OwnProps> = ({
   dispatch,
   isActive,
   onReset,
+  onSaveFilter,
 }) => {
   const { chatFilter } = state;
   const { selectedChatIds, selectedChatTypes } = selectChatFilters(state, mode, true);
@@ -122,6 +124,8 @@ const SettingsFoldersChatFilters: FC<OwnProps> = ({
       onSelectedIdsChange={handleSelectedIdsChange}
       onSelectedChatTypesChange={handleSelectedChatTypesChange}
       onFilterChange={handleFilterChange}
+      onSaveFilter={onSaveFilter}
+      isActive={isActive}
     />
   );
 };

src/components/left/settings/folders/SettingsFoldersChatsPicker.tsx

@@ -1,6 +1,6 @@
 import type { FC } from '../../../../lib/teact/teact';
 import React, {
-  useCallback, useRef, useEffect, memo,
+  useCallback, useRef, useEffect, memo, useState,
 } from '../../../../lib/teact/teact';
 import { requestMutation } from '../../../../lib/fasterdom/fasterdom';
 import { getActions, withGlobal } from '../../../../global';
@@ -24,6 +24,7 @@ import GroupChatInfo from '../../../common/GroupChatInfo';
 import PickerSelectedItem from '../../../common/PickerSelectedItem';
 import InfiniteScroll from '../../../ui/InfiniteScroll';
 import Loading from '../../../ui/Loading';
+import FloatingActionButton from '../../../ui/FloatingActionButton';
 
 import '../../../common/Picker.scss';
 import './SettingsFoldersChatsPicker.scss';
@@ -38,6 +39,8 @@ type OwnProps = {
   onSelectedIdsChange: (ids: string[]) => void;
   onSelectedChatTypesChange: (types: string[]) => void;
   onFilterChange: (value: string) => void;
+  onSaveFilter: VoidFunction;
+  isActive?: boolean;
 };
 
 // Focus slows down animation, also it breaks transition layout in Chrome
@@ -61,12 +64,21 @@ const SettingsFoldersChatsPicker: FC<OwnProps & StateProps> = ({
   onSelectedChatTypesChange,
   onFilterChange,
   maxChats,
+  onSaveFilter,
+  isActive,
 }) => {
   const { openLimitReachedModal } = getActions();
   // eslint-disable-next-line no-null/no-null
   const inputRef = useRef<HTMLInputElement>(null);
   const chatTypes = mode === 'included' ? INCLUDED_CHAT_TYPES : EXCLUDED_CHAT_TYPES;
   const shouldMinimize = selectedIds.length + selectedChatTypes.length > MAX_FULL_ITEMS;
+  const [isTouched, setIsTouched] = useState(false);
+
+  useEffect(() => {
+    if (!isActive) {
+      setIsTouched(false);
+    }
+  }, [isActive]);
 
   useEffect(() => {
     setTimeout(() => {
@@ -89,6 +101,7 @@ const SettingsFoldersChatsPicker: FC<OwnProps & StateProps> = ({
       }
       newSelectedIds.push(id);
     }
+    setIsTouched(true);
     onSelectedIdsChange(newSelectedIds);
   }, [selectedIds, onSelectedIdsChange, maxChats, mode, openLimitReachedModal]);
 
@@ -99,6 +112,7 @@ const SettingsFoldersChatsPicker: FC<OwnProps & StateProps> = ({
     } else {
       newSelectedChatTypes.push(key);
     }
+    setIsTouched(true);
     onSelectedChatTypesChange(newSelectedChatTypes);
   }, [selectedChatTypes, onSelectedChatTypesChange]);
 
@@ -225,6 +239,14 @@ const SettingsFoldersChatsPicker: FC<OwnProps & StateProps> = ({
           <Loading key="loading" />
         )}
       </InfiniteScroll>
+
+      <FloatingActionButton
+        isShown={isTouched}
+        onClick={onSaveFilter}
+        ariaLabel={lang('Save')}
+      >
+        <i className="icon icon-check" />
+      </FloatingActionButton>
     </div>
   );
 };