+ {isFoldersSidebarShown &&
}
(
(global, { isMobile }): Complete => {
const tabState = selectTabState(global);
+ const { tabsPosition } = selectSharedSettings(global);
+
return {
shouldSkipHistoryAnimations: tabState.shouldSkipHistoryAnimations,
uiReadyState: tabState.uiReadyState,
isRightColumnShown: selectIsRightColumnShown(global, isMobile),
leftColumnWidth: global.leftColumnWidth,
+ isFoldersSidebarShown: tabsPosition === TABS_POSITION_LEFT && !isMobile && selectAreFoldersPresent(global),
};
},
)(UiLoader);
diff --git a/src/components/left/LeftColumn.scss b/src/components/left/LeftColumn.scss
index c469e4c7b..a0ccd7c9a 100644
--- a/src/components/left/LeftColumn.scss
+++ b/src/components/left/LeftColumn.scss
@@ -28,12 +28,7 @@
}
.SearchInput {
- max-width: calc(100% - 3.25rem);
margin-left: 0.625rem;
-
- @media (max-width: 600px) {
- max-width: calc(100% - 3rem);
- }
}
.Button.smaller {
@@ -45,19 +40,8 @@
}
}
- body.is-tauri.is-macos #Main:not(.is-fullscreen) &:not(#TopicListHeader) {
- justify-content: space-between;
- padding: 0.5rem 0.5rem 0.5rem var(--window-controls-width);
-
- .SearchInput {
- max-width: calc(100% - 2.75rem);
- margin-left: 0.5rem;
- }
-
- .Menu.main-menu .bubble {
- --offset-y: 100%;
- --offset-x: -4.125rem;
- }
+ body.is-tauri.is-macos #Main:not(.is-fullscreen):not(.tabs-sidebar-visible) &:not(#TopicListHeader) {
+ padding-left: var(--window-controls-width);
}
@media (max-width: 600px) {
diff --git a/src/components/left/LeftColumn.tsx b/src/components/left/LeftColumn.tsx
index 837bbf42b..db7950ce2 100644
--- a/src/components/left/LeftColumn.tsx
+++ b/src/components/left/LeftColumn.tsx
@@ -38,6 +38,7 @@ import './LeftColumn.scss';
interface OwnProps {
ref: ElementRef;
+ isFoldersSidebarShown: boolean;
}
type StateProps = {
@@ -96,6 +97,7 @@ function LeftColumn({
archiveSettings,
isArchivedStoryRibbonShown,
isAccountFrozen,
+ isFoldersSidebarShown,
}: OwnProps & StateProps) {
const {
setGlobalSearchQuery,
@@ -541,6 +543,7 @@ function LeftColumn({
isForumPanelOpen={isForumPanelOpen}
onTopicSearch={handleTopicSearch}
isAccountFrozen={isAccountFrozen}
+ isFoldersSidebarShown={isFoldersSidebarShown}
/>
);
}
diff --git a/src/components/left/main/Archive.module.scss b/src/components/left/main/Archive.module.scss
index 39d430e60..7c93da824 100644
--- a/src/components/left/main/Archive.module.scss
+++ b/src/components/left/main/Archive.module.scss
@@ -14,6 +14,10 @@
display: none;
}
+ &.no-margin-top {
+ margin-top: 0 !important;
+ }
+
&:hover {
opacity: 0.85;
}
diff --git a/src/components/left/main/Archive.tsx b/src/components/left/main/Archive.tsx
index 24ab54145..f29f372ff 100644
--- a/src/components/left/main/Archive.tsx
+++ b/src/components/left/main/Archive.tsx
@@ -26,6 +26,7 @@ type OwnProps = {
archiveSettings: GlobalState['archiveSettings'];
onDragEnter?: NoneToVoidFunction;
onClick?: NoneToVoidFunction;
+ isFoldersSidebarShown?: boolean;
};
const PREVIEW_SLICE = 5;
@@ -40,6 +41,7 @@ const Archive: FC = ({
archiveSettings,
onDragEnter,
onClick,
+ isFoldersSidebarShown,
}) => {
const { updateArchiveSettings } = getActions();
const lang = useLang();
@@ -158,6 +160,7 @@ const Archive: FC = ({
className={buildClassName(
styles.root,
archiveSettings.isMinimized && styles.minimized,
+ isFoldersSidebarShown && archiveSettings.isMinimized && styles.noMarginTop,
'chat-item-clickable',
'chat-item-archive',
)}
diff --git a/src/components/left/main/Chat.tsx b/src/components/left/main/Chat.tsx
index e1ce015ce..d1ba75ea7 100644
--- a/src/components/left/main/Chat.tsx
+++ b/src/components/left/main/Chat.tsx
@@ -99,6 +99,7 @@ type OwnProps = {
onDragEnter?: (chatId: string) => void;
onDragLeave?: NoneToVoidFunction;
onReorderAnimationEnd?: NoneToVoidFunction;
+ isFoldersSidebarShown?: boolean;
};
type StateProps = {
@@ -176,6 +177,7 @@ const Chat: FC = ({
areTagsEnabled,
withTags,
onReorderAnimationEnd,
+ isFoldersSidebarShown,
}) => {
const {
openChat,
@@ -491,6 +493,7 @@ const Chat: FC = ({
itemClassName="chat-tag"
orderedFolderIds={tagFolderIds}
chatFoldersById={chatFoldersById}
+ isFoldersSidebarShown={isFoldersSidebarShown}
/>
)}
diff --git a/src/components/left/main/ChatFolders.tsx b/src/components/left/main/ChatFolders.tsx
index 50337e72d..df1a266d3 100644
--- a/src/components/left/main/ChatFolders.tsx
+++ b/src/components/left/main/ChatFolders.tsx
@@ -1,32 +1,24 @@
import type { FC } from '@teact';
-import { memo, useEffect, useMemo, useRef } from '@teact';
-import { getActions, getGlobal, withGlobal } from '../../../global';
+import { memo, useEffect, useRef } from '@teact';
+import { getActions, withGlobal } from '../../../global';
import type { ApiChatFolder, ApiChatlistExportedInvite, ApiSession } from '../../../api/types';
import type { GlobalState } from '../../../global/types';
import type { FolderEditDispatch } from '../../../hooks/reducers/useFoldersReducer';
import type { AnimationLevel } from '../../../types';
-import type { MenuItemContextAction } from '../../ui/ListItem';
-import type { TabWithProperties } from '../../ui/TabList';
-import { SettingsScreens } from '../../../types';
import { ALL_FOLDER_ID } from '../../../config';
-import { selectCanShareFolder, selectIsCurrentUserFrozen, selectTabState } from '../../../global/selectors';
+import { selectIsCurrentUserFrozen, selectTabState } from '../../../global/selectors';
import { selectCurrentLimit } from '../../../global/selectors/limits';
import { selectSharedSettings } from '../../../global/selectors/sharedState';
import { IS_TOUCH_ENV } from '../../../util/browser/windowEnvironment';
import buildClassName from '../../../util/buildClassName';
import captureEscKeyListener from '../../../util/captureEscKeyListener';
import { captureEvents, SwipeDirection } from '../../../util/captureEvents';
-import { MEMO_EMPTY_ARRAY } from '../../../util/memo';
import { resolveTransitionName } from '../../../util/resolveTransitionName';
-import { renderTextWithEntities } from '../../common/helpers/renderTextWithEntities';
import useDerivedState from '../../../hooks/useDerivedState';
-import {
- useFolderManagerForUnreadChatsByFolder,
- useFolderManagerForUnreadCounters,
-} from '../../../hooks/useFolderManager';
+import useFolderTabs from '../../../hooks/useFolderTabs';
import useHistoryBack from '../../../hooks/useHistoryBack';
import useLang from '../../../hooks/useLang';
import useLastCallback from '../../../hooks/useLastCallback';
@@ -41,6 +33,7 @@ type OwnProps = {
foldersDispatch: FolderEditDispatch;
shouldHideFolderTabs?: boolean;
isForumPanelOpen?: boolean;
+ isFoldersSidebarShown?: boolean;
};
type StateProps = {
@@ -85,17 +78,12 @@ const ChatFolders: FC
= ({
isStoryRibbonShown,
sessions,
isAccountFrozen,
+ isFoldersSidebarShown,
}) => {
const {
loadChatFolders,
setActiveChatFolder,
openChat,
- openShareChatFolderModal,
- openDeleteChatFolderModal,
- openEditChatFolder,
- openLimitReachedModal,
- markChatMessagesRead,
- openSettingsScreen,
} = getActions();
const transitionRef = useRef();
@@ -118,149 +106,27 @@ const ChatFolders: FC = ({
const isStoryRibbonClosing = useDerivedState(getIsStoryRibbonClosing);
const scrollToTop = useLastCallback(() => {
- const activeList = ref.current?.querySelector('.chat-list.Transition_slide-active');
+ const activeList = ref.current?.querySelector('#LeftColumn .chat-list.Transition_slide-active');
activeList?.scrollTo({
top: 0,
behavior: 'smooth',
});
});
- const allChatsFolder: ApiChatFolder = useMemo(() => {
- return {
- id: ALL_FOLDER_ID,
- title: { text: orderedFolderIds?.[0] === ALL_FOLDER_ID ? lang('FilterAllChatsShort') : lang('FilterAllChats') },
- includedChatIds: MEMO_EMPTY_ARRAY,
- excludedChatIds: MEMO_EMPTY_ARRAY,
- } satisfies ApiChatFolder;
- }, [orderedFolderIds, lang]);
-
- const displayedFolders = useMemo(() => {
- return orderedFolderIds
- ? orderedFolderIds.map((id) => {
- if (id === ALL_FOLDER_ID) {
- return allChatsFolder;
- }
-
- return chatFoldersById[id] || {};
- }).filter(Boolean)
- : undefined;
- }, [chatFoldersById, allChatsFolder, orderedFolderIds]);
+ const { displayedFolders, folderTabs } = useFolderTabs({
+ sidebarMode: false,
+ orderedFolderIds,
+ chatFoldersById,
+ maxFolders,
+ maxChatLists,
+ folderInvitesById,
+ maxFolderInvites,
+ });
const allChatsFolderIndex = displayedFolders?.findIndex((folder) => folder.id === ALL_FOLDER_ID);
const isInAllChatsFolder = allChatsFolderIndex === activeChatFolder;
const isInFirstFolder = FIRST_FOLDER_INDEX === activeChatFolder;
- const folderUnreadChatsCountersById = useFolderManagerForUnreadChatsByFolder();
- const handleReadAllChats = useLastCallback((folderId: number) => {
- const unreadChatIds = folderUnreadChatsCountersById[folderId];
- if (!unreadChatIds?.length) return;
-
- unreadChatIds.forEach((chatId) => {
- markChatMessagesRead({ id: chatId });
- });
- });
-
- const folderCountersById = useFolderManagerForUnreadCounters();
- const folderTabs = useMemo(() => {
- if (!displayedFolders || !displayedFolders.length) {
- return undefined;
- }
-
- return displayedFolders.map((folder, i) => {
- const { id, title } = folder;
- const isBlocked = id !== ALL_FOLDER_ID && i > maxFolders - 1;
- const canShareFolder = selectCanShareFolder(getGlobal(), id);
- const contextActions: MenuItemContextAction[] = [];
-
- if (canShareFolder) {
- contextActions.push({
- title: lang('FilterShare'),
- icon: 'link',
- handler: () => {
- const chatListCount = Object.values(chatFoldersById).reduce((acc, el) => acc + (el.isChatList ? 1 : 0), 0);
- if (chatListCount >= maxChatLists && !folder.isChatList) {
- openLimitReachedModal({
- limit: 'chatlistJoined',
- });
- return;
- }
-
- // Greater amount can be after premium downgrade
- if (folderInvitesById[id]?.length >= maxFolderInvites) {
- openLimitReachedModal({
- limit: 'chatlistInvites',
- });
- return;
- }
-
- openShareChatFolderModal({
- folderId: id,
- });
- },
- });
- }
-
- if (id === ALL_FOLDER_ID) {
- contextActions.push({
- title: lang('FilterEditFolders'),
- icon: 'edit',
- handler: () => {
- openSettingsScreen({ screen: SettingsScreens.Folders });
- },
- });
-
- if (folderUnreadChatsCountersById[id]?.length) {
- contextActions.push({
- title: lang('ChatListMarkAllAsRead'),
- icon: 'readchats',
- handler: () => handleReadAllChats(folder.id),
- });
- }
- } else {
- contextActions.push({
- title: lang('EditFolder'),
- icon: 'edit',
- handler: () => {
- openEditChatFolder({ folderId: id });
- },
- });
-
- if (folderUnreadChatsCountersById[id]?.length) {
- contextActions.push({
- title: lang('ChatListMarkAllAsRead'),
- icon: 'readchats',
- handler: () => handleReadAllChats(folder.id),
- });
- }
-
- contextActions.push({
- title: lang('FilterMenuDelete'),
- icon: 'delete',
- destructive: true,
- handler: () => {
- openDeleteChatFolderModal({ folderId: id });
- },
- });
- }
-
- return {
- id,
- title: renderTextWithEntities({
- text: title.text,
- entities: title.entities,
- noCustomEmojiPlayback: folder.noTitleAnimations,
- }),
- badgeCount: folderCountersById[id]?.chatsCount,
- isBadgeActive: Boolean(folderCountersById[id]?.notificationsCount),
- isBlocked,
- contextActions: contextActions?.length ? contextActions : undefined,
- } satisfies TabWithProperties;
- });
- }, [
- displayedFolders, maxFolders, folderCountersById, lang, chatFoldersById, maxChatLists, folderInvitesById,
- maxFolderInvites, folderUnreadChatsCountersById, openSettingsScreen,
- ]);
-
const handleSwitchTab = useLastCallback((index: number) => {
setActiveChatFolder({ activeChatFolder: index }, { forceOnHeavyAnimation: true });
if (activeChatFolder === index) {
@@ -368,6 +234,7 @@ const ChatFolders: FC = ({
archiveSettings={archiveSettings}
sessions={sessions}
isAccountFrozen={isAccountFrozen}
+ isFoldersSidebarShown={isFoldersSidebarShown}
isStoryRibbonShown={isStoryRibbonShown}
withTags
/>
@@ -381,12 +248,13 @@ const ChatFolders: FC = ({
ref={ref}
className={buildClassName(
'ChatFolders',
- shouldRenderFolders && shouldHideFolderTabs && 'ChatFolders--tabs-hidden',
+ shouldRenderFolders && shouldHideFolderTabs && !isFoldersSidebarShown && 'ChatFolders--tabs-hidden',
shouldRenderStoryRibbon && 'with-story-ribbon',
+ isFoldersSidebarShown && 'ChatFolders--tabs-sidebar-shown',
)}
>
{shouldRenderStoryRibbon && }
- {shouldRenderFolders ? (
+ {shouldRenderFolders && !isFoldersSidebarShown ? (
= ({
isAccountFrozen,
isMainList,
withTags,
+ isFoldersSidebarShown,
isStoryRibbonShown,
foldersDispatch,
}) => {
@@ -234,6 +236,7 @@ const ChatList: FC = ({
onDragEnter={handleChatDragEnter}
onDragLeave={onDragLeave}
withTags={withTags}
+ isFoldersSidebarShown={isFoldersSidebarShown}
/>
);
});
@@ -269,6 +272,7 @@ const ChatList: FC = ({
archiveSettings={archiveSettings}
onClick={handleArchivedClick}
onDragEnter={handleArchivedDragEnter}
+ isFoldersSidebarShown={isFoldersSidebarShown}
/>
)}
{viewportIds?.length ? (
diff --git a/src/components/left/main/ChatTags.tsx b/src/components/left/main/ChatTags.tsx
index 883d3dc72..17689afa8 100644
--- a/src/components/left/main/ChatTags.tsx
+++ b/src/components/left/main/ChatTags.tsx
@@ -1,6 +1,6 @@
-import { memo } from '../../../lib/teact/teact';
+import { memo, useCallback } from '@teact';
-import type { ApiChatFolder } from '../../../api/types';
+import { type ApiChatFolder, ApiMessageEntityTypes } from '../../../api/types';
import buildClassName from '../../../util/buildClassName';
import { REM } from '../../common/helpers/mediaDimensions';
@@ -16,12 +16,14 @@ const CUSTOM_EMOJI_SIZE = 0.875 * REM;
type OwnProps = {
orderedFolderIds?: number[];
chatFoldersById?: Record;
+ isFoldersSidebarShown?: boolean;
itemClassName?: string;
};
const ChatTags = ({
orderedFolderIds,
chatFoldersById,
+ isFoldersSidebarShown,
itemClassName,
}: OwnProps) => {
if (!orderedFolderIds) {
@@ -31,6 +33,31 @@ const ChatTags = ({
const visibleFolderIds = orderedFolderIds.slice(0, MAX_VISIBLE_TAGS);
const remainingCount = orderedFolderIds.length - visibleFolderIds.length;
+ const getFolderTitle = useCallback((folder: ApiChatFolder) => {
+ let text = folder.title.text;
+ let entities = folder.title.entities;
+
+ if (isFoldersSidebarShown) {
+ const currentCustomEmoji = folder.title.entities?.find(
+ (entity) => entity.type === ApiMessageEntityTypes.CustomEmoji && entity.offset === 0);
+ if (currentCustomEmoji) {
+ const { offset, length } = currentCustomEmoji;
+
+ text = folder.title.text.replace(folder.title.text.substring(offset, offset + length), '');
+ entities = folder.title.entities?.filter((entity) => entity.offset !== offset).map((entity) => ({
+ ...entity,
+ offset: entity.offset - length,
+ }));
+ }
+ }
+ return renderTextWithEntities({
+ text,
+ entities,
+ noCustomEmojiPlayback: folder.noTitleAnimations,
+ emojiSize: CUSTOM_EMOJI_SIZE,
+ });
+ }, [isFoldersSidebarShown]);
+
return (
{visibleFolderIds.map((folderId) => {
@@ -44,12 +71,7 @@ const ChatTags = ({
itemClassName,
)}
>
- {renderTextWithEntities({
- text: folder.title.text,
- entities: folder.title.entities,
- noCustomEmojiPlayback: folder.noTitleAnimations,
- emojiSize: CUSTOM_EMOJI_SIZE,
- })}
+ {getFolderTitle(folder)}
);
})}
diff --git a/src/components/left/main/LeftMain.scss b/src/components/left/main/LeftMain.scss
index 2351799f2..ef9477894 100644
--- a/src/components/left/main/LeftMain.scss
+++ b/src/components/left/main/LeftMain.scss
@@ -47,6 +47,10 @@
opacity: 0.25;
}
+ &--tabs-sidebar-shown .chat-list {
+ padding-top: 0;
+ }
+
.Tab {
flex: 0 0 auto;
}
diff --git a/src/components/left/main/LeftMain.tsx b/src/components/left/main/LeftMain.tsx
index 84b0caef5..63c8699a9 100644
--- a/src/components/left/main/LeftMain.tsx
+++ b/src/components/left/main/LeftMain.tsx
@@ -44,6 +44,7 @@ type OwnProps = {
onTopicSearch: NoneToVoidFunction;
isAccountFrozen?: boolean;
onReset: () => void;
+ isFoldersSidebarShown?: boolean;
};
const TRANSITION_RENDER_COUNT = Object.keys(LeftColumnContent).length / 2;
@@ -66,8 +67,9 @@ const LeftMain: FC = ({
onReset,
onTopicSearch,
isAccountFrozen,
+ isFoldersSidebarShown,
}) => {
- const { closeForumPanel, openLeftColumnContent } = getActions();
+ const { openLeftColumnContent } = getActions();
const [isNewChatButtonShown, setIsNewChatButtonShown] = useState(IS_TOUCH_ENV);
const [tauriUpdate, setTauriUpdate] = useState();
const [isTauriUpdateDownloading, setIsTauriUpdateDownloading] = useState(false);
@@ -109,19 +111,10 @@ const LeftMain: FC = ({
}, BUTTON_CLOSE_DELAY_MS);
});
- const handleSelectSettings = useLastCallback(() => {
- openLeftColumnContent({ contentKey: LeftColumnContent.Settings });
- });
-
const handleSelectContacts = useLastCallback(() => {
openLeftColumnContent({ contentKey: LeftColumnContent.Contacts });
});
- const handleSelectArchived = useLastCallback(() => {
- openLeftColumnContent({ contentKey: LeftColumnContent.Archived });
- closeForumPanel();
- });
-
const handleUpdateClick = useLastCallback(async () => {
if (tauriUpdate) {
try {
@@ -198,12 +191,10 @@ const LeftMain: FC = ({
content={content}
contactsFilter={contactsFilter}
onSearchQuery={onSearchQuery}
- onSelectSettings={handleSelectSettings}
- onSelectContacts={handleSelectContacts}
- onSelectArchived={handleSelectArchived}
onReset={onReset}
shouldSkipTransition={shouldSkipTransition}
isClosingSearch={isClosingSearch}
+ isFoldersSidebarShown={isFoldersSidebarShown}
/>
= ({
shouldHideFolderTabs={isForumPanelVisible}
foldersDispatch={foldersDispatch}
isForumPanelOpen={isForumPanelVisible}
+ isFoldersSidebarShown={isFoldersSidebarShown}
/>
);
case LeftColumnContent.GlobalSearch:
diff --git a/src/components/left/main/LeftMainHeader.scss b/src/components/left/main/LeftMainHeader.scss
index c424b31d1..daadb1de9 100644
--- a/src/components/left/main/LeftMainHeader.scss
+++ b/src/components/left/main/LeftMainHeader.scss
@@ -3,6 +3,12 @@
#LeftMainHeader {
position: relative;
+ .main-menu {
+ width: 2.5rem;
+ /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
+ transition: width var(--layer-transition);
+ }
+
.DropdownMenuFiller {
width: 2.5rem;
height: 2.5rem;
@@ -85,6 +91,29 @@
}
}
+ .hide-menu-button {
+ overflow: hidden;
+ width: 0;
+ visibility: hidden;
+ .animated-menu-icon {
+ &::before {
+ transform: rotate(45deg) scaleX(0.75) translate(0.375rem, -0.1875rem);
+ }
+
+ &::after {
+ transform: rotate(-45deg) scaleX(0.75) translate(0.375rem, 0.1875rem);
+ }
+ }
+ }
+
+ .forum-search-button {
+ margin-left: 0.75rem;
+ }
+
+ .SearchInput--no-left-margin {
+ margin-left: 0;
+ }
+
.MenuItem .Toggle {
margin-inline-start: auto;
}
@@ -106,11 +135,7 @@
.extra-spacing {
position: relative;
- margin-left: 0.8125rem;
-
- body.is-tauri.is-macos #Main:not(.is-fullscreen) & {
- margin-left: 0.5rem;
- }
+ margin-left: 0.5rem;
}
.StatusButton {
diff --git a/src/components/left/main/LeftMainHeader.tsx b/src/components/left/main/LeftMainHeader.tsx
index f700a1f0d..908404c0d 100644
--- a/src/components/left/main/LeftMainHeader.tsx
+++ b/src/components/left/main/LeftMainHeader.tsx
@@ -8,15 +8,11 @@ import type { GlobalState } from '../../../global/types';
import type { ThemeKey } from '../../../types';
import { LeftColumnContent, SettingsScreens } from '../../../types';
-import {
- APP_NAME,
- DEBUG,
- IS_BETA,
-} from '../../../config';
import {
selectCanSetPasscode,
selectCurrentMessageList,
selectIsCurrentUserPremium,
+ selectIsForumPanelOpen,
selectTabState,
selectTheme,
} from '../../../global/selectors';
@@ -29,23 +25,19 @@ import { formatDateToString } from '../../../util/dates/dateFormat';
import useAppLayout from '../../../hooks/useAppLayout';
import useConnectionStatus from '../../../hooks/useConnectionStatus';
-import useFlag from '../../../hooks/useFlag';
import { useHotkeys } from '../../../hooks/useHotkeys';
import useLang from '../../../hooks/useLang';
import useLastCallback from '../../../hooks/useLastCallback';
import useOldLang from '../../../hooks/useOldLang';
-import { useFullscreenStatus } from '../../../hooks/window/useFullscreen';
-import useLeftHeaderButtonRtlForumTransition from './hooks/useLeftHeaderButtonRtlForumTransition';
import Icon from '../../common/icons/Icon';
+import MainMenuDropdown from '../../common/MainMenuDropdown';
import PeerChip from '../../common/PeerChip';
import StoryToggler from '../../story/StoryToggler';
import Button from '../../ui/Button';
-import DropdownMenu from '../../ui/DropdownMenu';
import SearchInput from '../../ui/SearchInput';
import ShowTransition from '../../ui/ShowTransition';
import ConnectionStatusOverlay from '../ConnectionStatusOverlay';
-import LeftSideMenuItems from './LeftSideMenuItems';
import StatusButton from './StatusButton';
import './LeftMainHeader.scss';
@@ -56,33 +48,32 @@ type OwnProps = {
contactsFilter: string;
isClosingSearch?: boolean;
shouldSkipTransition?: boolean;
+ isFoldersSidebarShown?: boolean;
onSearchQuery: (query: string) => void;
- onSelectSettings: NoneToVoidFunction;
- onSelectContacts: NoneToVoidFunction;
- onSelectArchived: NoneToVoidFunction;
onReset: NoneToVoidFunction;
};
-type StateProps =
- {
- searchQuery?: string;
- isLoading: boolean;
- globalSearchChatId?: string;
- searchDate?: number;
- theme: ThemeKey;
- isMessageListOpen: boolean;
- isCurrentUserPremium?: boolean;
- isConnectionStatusMinimized?: boolean;
- areChatsLoaded?: boolean;
- hasPasscode?: boolean;
- canSetPasscode?: boolean;
- }
- & Pick;
+type StateProps = {
+ searchQuery?: string;
+ isLoading: boolean;
+ globalSearchChatId?: string;
+ searchDate?: number;
+ theme: ThemeKey;
+ isMessageListOpen: boolean;
+ isCurrentUserPremium?: boolean;
+ isConnectionStatusMinimized?: boolean;
+ areChatsLoaded?: boolean;
+ hasPasscode?: boolean;
+ canSetPasscode?: boolean;
+ isForumPanelOpen?: boolean;
+} & Pick;
const CLEAR_DATE_SEARCH_PARAM = { date: undefined };
const CLEAR_CHAT_SEARCH_PARAM = { id: undefined };
-const LeftMainHeader: FC = ({
+const IS_WITH_WINDOW_BUTTONS = IS_TAURI && IS_MAC_OS;
+
+const LeftMainHeader = ({
shouldHideSearch,
content,
contactsFilter,
@@ -102,12 +93,11 @@ const LeftMainHeader: FC = ({
areChatsLoaded,
hasPasscode,
canSetPasscode,
+ isFoldersSidebarShown,
+ isForumPanelOpen,
onSearchQuery,
- onSelectSettings,
- onSelectContacts,
- onSelectArchived,
onReset,
-}) => {
+}: OwnProps & StateProps) => {
const {
setGlobalSearchDate,
setSharedSettingOption,
@@ -115,17 +105,18 @@ const LeftMainHeader: FC = ({
lockScreen,
openSettingsScreen,
searchMessagesGlobal,
+ closeForumPanel,
} = getActions();
const oldLang = useOldLang();
const lang = useLang();
const { isMobile } = useAppLayout();
- const [isBotMenuOpen, markBotMenuOpen, unmarkBotMenuOpen] = useFlag();
-
const areContactsVisible = content === LeftColumnContent.Contacts;
const hasMenu = content === LeftColumnContent.ChatList;
+ const isSearchButton = isForumPanelOpen && isFoldersSidebarShown && !IS_WITH_WINDOW_BUTTONS;
+
const selectedSearchDate = useMemo(() => {
return searchDate
? formatDateToString(new Date(searchDate * 1000))
@@ -151,6 +142,10 @@ const LeftMainHeader: FC = ({
}
});
+ const handleForumSearchClick = useLastCallback(() => {
+ closeForumPanel();
+ });
+
useHotkeys(useMemo(() => (canSetPasscode ? {
'Ctrl+Shift+L': handleLockScreenHotkey,
'Alt+Shift+L': handleLockScreenHotkey,
@@ -165,20 +160,24 @@ const LeftMainHeader: FC = ({
ripple={hasMenu && !isMobile}
size="smaller"
color="translucent"
- className={isOpen ? 'active' : ''}
+ className={buildClassName(isOpen && 'active')}
- onClick={hasMenu ? onTrigger : () => onReset()}
- ariaLabel={hasMenu ? oldLang('AccDescrOpenMenu2') : 'Return to chat list'}
+ onClick={isSearchButton ? handleForumSearchClick : hasMenu ? onTrigger : () => onReset()}
+ ariaLabel={hasMenu ? lang('AriaLabelOpenMenu') : lang('AriaLabelBackChatList')}
>
-
+ ) : (
+
)}
- />
);
- }, [hasMenu, isMobile, oldLang, onReset, shouldSkipTransition]);
+ }, [hasMenu, isSearchButton, isMobile, lang, onReset, shouldSkipTransition]);
const handleSearchFocus = useLastCallback(() => {
if (!searchQuery) {
@@ -215,16 +214,6 @@ const LeftMainHeader: FC = ({
? lang('SearchFriends')
: lang('Search');
- const versionString = IS_BETA ? `${APP_VERSION} Beta (${APP_REVISION})` : (DEBUG ? APP_REVISION : APP_VERSION);
-
- const isFullscreen = useFullscreenStatus();
-
- // Disable dropdown menu RTL animation for resize
- const {
- shouldDisableDropdownMenuTransitionRef,
- handleDropdownMenuTransitionEnd,
- } = useLeftHeaderButtonRtlForumTransition(shouldHideSearch);
-
const withStoryToggler = !isSearchFocused && !selectedSearchDate && !globalSearchChatId && !areContactsVisible;
const searchContent = useMemo(() => {
@@ -256,53 +245,28 @@ const LeftMainHeader: FC = ({
);
}, [globalSearchChatId, selectedSearchDate]);
- const version = useMemo(() => {
- let fullVersion = '';
- if (IS_TAURI && window.tauri.version) {
- fullVersion = `Tauri ${window.tauri.version} | `;
- }
-
- fullVersion += `${APP_NAME} ${versionString}`;
-
- return fullVersion;
- }, [versionString]);
-
return (
{lang.isRtl &&
}
-
-
-
+ />
(
connectionState, isSyncing, isFetchingDifference,
} = global;
const { isConnectionStatusMinimized } = selectSharedSettings(global);
+ const isForumPanelOpen = selectIsForumPanelOpen(global);
return {
searchQuery,
@@ -380,6 +345,7 @@ export default memo(withGlobal(
areChatsLoaded: Boolean(global.chats.listIds.active),
hasPasscode: Boolean(global.passcode.hasPasscode),
canSetPasscode: selectCanSetPasscode(global),
+ isForumPanelOpen,
};
},
)(LeftMainHeader));
diff --git a/src/components/left/settings/folders/FolderIconPickerMenu.tsx b/src/components/left/settings/folders/FolderIconPickerMenu.tsx
new file mode 100644
index 000000000..5a51df7a3
--- /dev/null
+++ b/src/components/left/settings/folders/FolderIconPickerMenu.tsx
@@ -0,0 +1,58 @@
+import { memo, useCallback } from '@teact';
+
+import type { ApiSticker } from '../../../../api/types';
+
+import { folderIconMap } from '../../../../util/folderIconMap';
+
+import CustomEmojiPicker from '../../../common/CustomEmojiPicker';
+import Icon from '../../../common/icons/Icon';
+import Menu from '../../../ui/Menu';
+
+export type OwnProps = {
+ isOpen: boolean;
+ onEmojiSelect: (emoji: string | ApiSticker) => void;
+ onClose: () => void;
+};
+
+const FolderIconPickerMenu = ({
+ isOpen,
+ onEmojiSelect,
+ onClose,
+}: OwnProps) => {
+ const handleEmojiSelect = useCallback((sticker: string | ApiSticker) => {
+ onEmojiSelect(sticker);
+ onClose();
+ }, [onClose, onEmojiSelect]);
+
+ return (
+
+ );
+};
+
+export default memo(FolderIconPickerMenu);
diff --git a/src/components/left/settings/folders/SettingsFolders.scss b/src/components/left/settings/folders/SettingsFolders.scss
index 1d7b54c10..7865332a0 100644
--- a/src/components/left/settings/folders/SettingsFolders.scss
+++ b/src/components/left/settings/folders/SettingsFolders.scss
@@ -99,7 +99,7 @@
}
.settings-sortable-item .Button {
- margin-right: -1rem;
+ margin-inline-end: -1rem;
&:hover,
&:active {
background-color: transparent !important;
@@ -148,7 +148,7 @@
}
.color-picker-item {
- cursor: pointer;
+ cursor: var(--custom-cursor, pointer);
flex-shrink: 0;
@@ -214,7 +214,7 @@
.settings-folders-color-circle {
position: absolute;
top: 50%;
- right: 2.5rem;
+ inset-inline-end: 2.5rem;
transform: translateY(-50%);
width: 1.25rem;
@@ -223,3 +223,42 @@
background-color: var(--accent-color);
}
+
+.settings-folders-input-container {
+ position: relative;
+ display: flex;
+ align-items: center;
+ align-self: stretch;
+}
+
+.settings-folders-input-with-icon .form-control {
+ padding-inline-end: 3rem;
+}
+
+.settings-folders-icon-picker {
+ --custom-emoji-size: 2rem;
+
+ position: absolute;
+ inset-inline-end: 0.5rem;
+ font-size: 2rem;
+ color: var(--color-text-secondary);
+}
+
+.settings-folders-icon-picker-button {
+ cursor: var(--custom-cursor, pointer);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.settings-folders-icon-picker-menu .bubble {
+ --offset-y: 16rem !important;
+ --offset-x: 6rem;
+}
+
+.settings-folders-icon-picker-menu-folders {
+ display: flex;
+ justify-content: space-between;
+ border-bottom: 1px solid var(--color-borders);
+ color: var(--color-text-secondary);
+}
diff --git a/src/components/left/settings/folders/SettingsFolders.tsx b/src/components/left/settings/folders/SettingsFolders.tsx
index 87b57620a..0e7ef2aed 100644
--- a/src/components/left/settings/folders/SettingsFolders.tsx
+++ b/src/components/left/settings/folders/SettingsFolders.tsx
@@ -7,6 +7,7 @@ import type { FolderEditDispatch, FoldersState } from '../../../../hooks/reducer
import { SettingsScreens } from '../../../../types';
import { selectChatFilters } from '../../../../hooks/reducers/useFoldersReducer';
+import useAppLayout from '../../../../hooks/useAppLayout';
import SettingsFoldersChatFilters from './SettingsFoldersChatFilters';
import SettingsFoldersEdit, { ERROR_NO_CHATS, ERROR_NO_TITLE } from './SettingsFoldersEdit';
@@ -34,6 +35,8 @@ const SettingsFolders: FC = ({
isActive,
onReset,
}) => {
+ const { isMobile } = useAppLayout();
+
const {
openShareChatFolderModal,
editChatFolder,
@@ -164,6 +167,7 @@ const SettingsFolders: FC = ({
SettingsScreens.FoldersExcludedChats,
].includes(shownScreen)}
onReset={onReset}
+ isMobile={isMobile}
/>
);
case SettingsScreens.FoldersCreateFolder:
@@ -186,6 +190,7 @@ const SettingsFolders: FC = ({
isOnlyInvites={currentScreen === SettingsScreens.FoldersEditFolderInvites}
onBack={onReset}
onSaveFolder={handleSaveFolder}
+ isMobile={isMobile}
/>
);
case SettingsScreens.FoldersIncludedChats:
diff --git a/src/components/left/settings/folders/SettingsFoldersEdit.tsx b/src/components/left/settings/folders/SettingsFoldersEdit.tsx
index 06225119b..867b54e10 100644
--- a/src/components/left/settings/folders/SettingsFoldersEdit.tsx
+++ b/src/components/left/settings/folders/SettingsFoldersEdit.tsx
@@ -5,14 +5,20 @@ import {
} from '../../../../lib/teact/teact';
import { getActions, getGlobal, withGlobal } from '../../../../global';
-import type { ApiChatlistExportedInvite } from '../../../../api/types';
import type {
FolderEditDispatch,
FoldersState,
} from '../../../../hooks/reducers/useFoldersReducer';
+import {
+ type ApiChatlistExportedInvite,
+ type ApiMessageEntity,
+ type ApiMessageEntityCustomEmoji,
+ ApiMessageEntityTypes,
+ type ApiSticker,
+} from '../../../../api/types';
import { FOLDER_TITLE_MAX_LENGTH, STICKER_SIZE_FOLDER_SETTINGS } from '../../../../config';
-import { selectCanShareFolder, selectIsCurrentUserPremium } from '../../../../global/selectors';
+import { selectCanShareFolder, selectCustomEmoji, selectIsCurrentUserPremium } from '../../../../global/selectors';
import { selectCurrentLimit } from '../../../../global/selectors/limits';
import buildClassName from '../../../../util/buildClassName';
import { isUserId } from '../../../../util/entities/ids';
@@ -24,16 +30,19 @@ import { renderTextWithEntities } from '../../../common/helpers/renderTextWithEn
import { selectChatFilters } from '../../../../hooks/reducers/useFoldersReducer';
import useHistoryBack from '../../../../hooks/useHistoryBack';
+import useLastCallback from '../../../../hooks/useLastCallback';
import useOldLang from '../../../../hooks/useOldLang';
import { getPeerColorClass } from '../../../../hooks/usePeerColor';
import AnimatedIconWithPreview from '../../../common/AnimatedIconWithPreview';
+import FolderIcon from '../../../common/FolderIcon';
import GroupChatInfo from '../../../common/GroupChatInfo';
import Icon from '../../../common/icons/Icon';
import PrivateChatInfo from '../../../common/PrivateChatInfo';
import FloatingActionButton from '../../../ui/FloatingActionButton';
import InputText from '../../../ui/InputText';
import ListItem from '../../../ui/ListItem';
+import FolderIconPickerMenu from './FolderIconPickerMenu';
type OwnProps = {
state: FoldersState;
@@ -47,6 +56,7 @@ type OwnProps = {
onReset: () => void;
onBack: () => void;
onSaveFolder: (cb?: VoidFunction) => void;
+ isMobile?: boolean;
};
type StateProps = {
@@ -69,6 +79,8 @@ const FOLDER_COLORS = [0, 1, 2, 3, 4, 5, 6];
export const ERROR_NO_TITLE = 'Please provide a title for this folder.';
export const ERROR_NO_CHATS = 'ChatList.Filter.Error.Empty';
+const DEFAULT_FOLDER_ICON = '🗂';
+
const SettingsFoldersEdit: FC = ({
state,
dispatch,
@@ -89,6 +101,7 @@ const SettingsFoldersEdit: FC = ({
chatListCount,
onSaveFolder,
isCurrentUserPremium,
+ isMobile,
}) => {
const {
loadChatlistInvites,
@@ -102,6 +115,7 @@ const SettingsFoldersEdit: FC = ({
const [isIncludedChatsListExpanded, setIsIncludedChatsListExpanded] = useState(false);
const [isExcludedChatsListExpanded, setIsExcludedChatsListExpanded] = useState(false);
+ const [isIconPickerMenuOpen, setIsIconPickerMenuOpen] = useState(false);
useEffect(() => {
if (isRemoved) {
@@ -159,10 +173,65 @@ const SettingsFoldersEdit: FC = ({
onBack,
});
+ const currentCustomEmoji = useMemo(() => state.folder.title.entities?.find(
+ (entity): entity is ApiMessageEntityCustomEmoji =>
+ entity.type === ApiMessageEntityTypes.CustomEmoji && entity.offset === 0,
+ ), [state.folder.title]);
+
+ const folderTitleMaxLength = useMemo(() => {
+ return FOLDER_TITLE_MAX_LENGTH - (currentCustomEmoji ? currentCustomEmoji.length : 0);
+ }, [currentCustomEmoji]);
+
+ const setEmoticon = useCallback((_emoticon: string | ApiSticker) => {
+ let text = state.folder.title.text;
+ const entities: ApiMessageEntity[] = [];
+ let emoticon = DEFAULT_FOLDER_ICON;
+ if (currentCustomEmoji) {
+ const { offset, length } = currentCustomEmoji;
+ text = text.replace(text.substring(offset, offset + length), '');
+ }
+ if (typeof _emoticon === 'string') {
+ emoticon = _emoticon;
+ } else {
+ const { id, emoji } = _emoticon;
+
+ entities.push({
+ type: ApiMessageEntityTypes.CustomEmoji,
+ documentId: id,
+ offset: 0,
+ length: emoji?.length || 2,
+ });
+ if (emoji) {
+ text = `${emoji}${text}`;
+ emoticon = emoji;
+ if (text.length > folderTitleMaxLength) {
+ text = text.slice(0, folderTitleMaxLength);
+ }
+ }
+ }
+
+ dispatch({ type: 'setEmoticon', payload: emoticon });
+ dispatch({ type: 'setTitle', payload: {
+ text,
+ entities,
+ } });
+ }, [dispatch, currentCustomEmoji, state.folder.title, folderTitleMaxLength]);
+
const handleChange = useCallback((event: React.ChangeEvent) => {
const { currentTarget } = event;
- dispatch({ type: 'setTitle', payload: currentTarget.value.trim() });
- }, [dispatch]);
+
+ let title = currentTarget.value;
+
+ if (currentCustomEmoji) {
+ const { emoji } = selectCustomEmoji(getGlobal(), currentCustomEmoji.documentId);
+ title = `${emoji}${title}`;
+ }
+
+ dispatch({ type: 'setTitle', payload: {
+ text: title,
+ entities: currentCustomEmoji ? [currentCustomEmoji] : [],
+ } });
+ }, [dispatch, currentCustomEmoji]);
const handleSubmit = useCallback(() => {
dispatch({ type: 'setIsLoading', payload: true });
@@ -287,6 +356,27 @@ const SettingsFoldersEdit: FC = ({
);
}
+ const handleEmojiSelect = useLastCallback((emoji: string | ApiSticker) => {
+ setEmoticon(emoji);
+ });
+
+ const handleIconPickerClose = useLastCallback(() => {
+ setIsIconPickerMenuOpen(false);
+ });
+
+ const handleIconPickerOpen = useLastCallback(() => {
+ setIsIconPickerMenuOpen(true);
+ });
+
+ const titleText = useMemo(() => {
+ let title = state.folder.title.text;
+ if (currentCustomEmoji) {
+ const { offset, length } = currentCustomEmoji;
+ title = title.substring(offset + length, title.length);
+ }
+ return title;
+ }, [state.folder.title.text, currentCustomEmoji]);
+
return (
@@ -303,15 +393,36 @@ const SettingsFoldersEdit: FC
= ({
{lang('FilterIncludeInfo')}
)}
+
+
-
+ {!isMobile && (
+
+ )}
+
{!isOnlyInvites && (
diff --git a/src/components/left/settings/folders/SettingsFoldersMain.tsx b/src/components/left/settings/folders/SettingsFoldersMain.tsx
index e90bb3484..39dbb04fa 100644
--- a/src/components/left/settings/folders/SettingsFoldersMain.tsx
+++ b/src/components/left/settings/folders/SettingsFoldersMain.tsx
@@ -5,6 +5,7 @@ import {
import { getActions, withGlobal } from '../../../../global';
import type { ApiChatFolder } from '../../../../api/types';
+import type { TabsPosition } from '../../../../types';
import { ALL_FOLDER_ID, STICKER_SIZE_FOLDER_SETTINGS } from '../../../../config';
import { getFolderDescriptionText } from '../../../../global/helpers';
@@ -20,6 +21,7 @@ import { renderTextWithEntities } from '../../../common/helpers/renderTextWithEn
import { useFolderManagerForChatsCount } from '../../../../hooks/useFolderManager';
import useHistoryBack from '../../../../hooks/useHistoryBack';
import useLang from '../../../../hooks/useLang';
+import useLastCallback from '../../../../hooks/useLastCallback';
import { getPeerColorClass } from '../../../../hooks/usePeerColor';
import usePreviousDeprecated from '../../../../hooks/usePreviousDeprecated';
@@ -30,12 +32,14 @@ import Checkbox from '../../../ui/Checkbox';
import Draggable from '../../../ui/Draggable';
import ListItem from '../../../ui/ListItem';
import Loading from '../../../ui/Loading';
+import RadioGroup from '../../../ui/RadioGroup';
type OwnProps = {
isActive?: boolean;
onCreateFolder: () => void;
onEditFolder: (folder: ApiChatFolder) => void;
onReset: () => void;
+ isMobile?: boolean;
};
type StateProps = {
@@ -45,6 +49,7 @@ type StateProps = {
maxFolders: number;
isPremium?: boolean;
areTagsEnabled?: boolean;
+ tabsPosition: TabsPosition;
};
type SortState = {
@@ -67,6 +72,8 @@ const SettingsFoldersMain: FC
= ({
recommendedChatFolders,
maxFolders,
areTagsEnabled,
+ tabsPosition,
+ isMobile,
}) => {
const {
loadRecommendedChatFolders,
@@ -76,6 +83,7 @@ const SettingsFoldersMain: FC = ({
sortChatFolders,
toggleDialogFilterTags,
openPremiumModal,
+ setSharedSettingOption,
} = getActions();
const [state, setState] = useState({
@@ -207,6 +215,10 @@ const SettingsFoldersMain: FC = ({
});
}, [sortChatFolders]);
+ const handleTabsPositionChange = useLastCallback((value: string) => {
+ setSharedSettingOption({ tabsPosition: value as TabsPosition });
+ });
+
const canCreateNewFolder = useMemo(() => {
return !isPremium || Object.keys(foldersById).length < maxFolders - 1;
}, [foldersById, isPremium, maxFolders]);
@@ -411,6 +423,24 @@ const SettingsFoldersMain: FC = ({
{!isPremium && }
+ {!isMobile && (
+
+
{lang('TabsPosition')}
+
+
+
+ )}
);
};
@@ -431,6 +461,7 @@ export default memo(withGlobal(
recommendedChatFolders,
maxFolders: selectCurrentLimit(global, 'dialogFilters'),
areTagsEnabled,
+ tabsPosition: global.sharedState.settings.tabsPosition,
};
},
)(SettingsFoldersMain));
diff --git a/src/components/main/FoldersSidebar.module.scss b/src/components/main/FoldersSidebar.module.scss
new file mode 100644
index 000000000..7522d105a
--- /dev/null
+++ b/src/components/main/FoldersSidebar.module.scss
@@ -0,0 +1,94 @@
+.root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+
+ width: var(--tabs-sidebar-width);
+ height: 100%;
+
+ background-color: var(--color-background-sidebar);
+
+ :global {
+ .Menu .bubble {
+ --offset-y: 3.5rem;
+ --offset-x: 1rem;
+
+ overflow-y: auto;
+ min-width: 17rem;
+ max-height: calc(100 * var(--vh) - 3.5rem);
+ }
+ .MenuItem .Toggle {
+ margin-inline-start: auto;
+ }
+
+ .MenuItem.compact .Toggle {
+ transform: scale(0.75);
+ margin-inline-end: -0.125rem;
+ }
+
+ .MenuItem.compact .Switcher {
+ transform: scale(0.75);
+ }
+ .account-menu-item {
+ --custom-emoji-size: 1rem;
+
+ &-test {
+ position: absolute;
+ z-index: 1;
+ bottom: 0.0625rem;
+ left: 2.875rem;
+
+ font-size: 0.5rem;
+ font-weight: var(--font-weight-medium);
+ color: var(--color-text-secondary);
+ }
+
+ .account-avatar {
+ margin-inline: 0.375rem 1.125rem;
+ }
+
+ .fullName {
+ margin: 0;
+ padding-top: 0.1875rem;
+ font-size: 1em;
+ line-height: 1;
+ }
+ }
+ }
+}
+
+.tabs {
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+
+ padding-inline: 0;
+
+ font-size: 0.625rem;
+ line-height: 0.75rem;
+
+ background-color: var(--color-background-sidebar);
+}
+
+.icon {
+ font-size: 1.5rem;
+ color: var(--color-text-secondary);
+}
+
+.menuButton {
+ width: var(--tabs-sidebar-width);
+ height: 3.5rem;
+ border-radius: 0;
+}
+
+.divider {
+ width: 100%;
+ height: 1px;
+ background-color: var(--color-interactive-buffered);
+}
+
+.hideMenuButton {
+ visibility: hidden;
+}
diff --git a/src/components/main/FoldersSidebar.tsx b/src/components/main/FoldersSidebar.tsx
new file mode 100644
index 000000000..128aa7ae2
--- /dev/null
+++ b/src/components/main/FoldersSidebar.tsx
@@ -0,0 +1,206 @@
+import { memo, useEffect, useMemo, useRef } from '@teact';
+import { getActions, withGlobal } from '../../global';
+
+import type { ApiChatFolder, ApiChatlistExportedInvite, ApiMessageEntityCustomEmoji } from '../../api/types';
+import { LeftColumnContent, SettingsScreens } from '../../types';
+
+import { selectTabState } from '../../global/selectors';
+import { selectCurrentLimit } from '../../global/selectors/limits';
+import { IS_TAURI } from '../../util/browser/globalEnvironment';
+import { IS_MAC_OS } from '../../util/browser/windowEnvironment';
+import buildClassName from '../../util/buildClassName';
+
+import useFolderTabs from '../../hooks/useFolderTabs';
+import useLang from '../../hooks/useLang';
+import useLastCallback from '../../hooks/useLastCallback';
+import useScrolledState from '../../hooks/useScrolledState';
+
+import FolderIcon from '../common/FolderIcon';
+import Icon from '../common/icons/Icon';
+import MainMenuDropdown from '../common/MainMenuDropdown';
+import Button from '../ui/Button';
+import Folder from '../ui/Folder';
+
+import styles from './FoldersSidebar.module.scss';
+
+type StateProps = {
+ chatFoldersById: Record;
+ folderInvitesById: Record;
+ orderedFolderIds?: number[];
+ activeChatFolder: number;
+ maxFolders: number;
+ maxChatLists: number;
+ maxFolderInvites: number;
+};
+
+type OwnProps = {
+ isActive: boolean;
+};
+
+const FIRST_FOLDER_INDEX = 0;
+
+const FoldersSidebar = ({
+ chatFoldersById,
+ orderedFolderIds,
+ activeChatFolder,
+ maxFolders,
+ maxChatLists,
+ folderInvitesById,
+ maxFolderInvites,
+ isActive,
+}: OwnProps & StateProps) => {
+ const {
+ loadChatFolders,
+ setActiveChatFolder,
+ openLeftColumnContent,
+ openSettingsScreen,
+ } = getActions();
+
+ const tabsRef = useRef();
+
+ useEffect(() => {
+ loadChatFolders();
+ }, []);
+
+ const scrollChatListToTop = useLastCallback(() => {
+ const activeList = document.querySelector('#LeftColumn .chat-list.Transition_slide-active');
+ activeList?.scrollTo({
+ top: 0,
+ behavior: 'smooth',
+ });
+ });
+
+ const { folderTabs } = useFolderTabs({
+ sidebarMode: true,
+ orderedFolderIds,
+ chatFoldersById,
+ maxFolders,
+ maxChatLists,
+ folderInvitesById,
+ maxFolderInvites,
+ });
+
+ const {
+ handleScroll,
+ isAtBeginning,
+ isAtEnd,
+ } = useScrolledState();
+
+ const lang = useLang();
+
+ const handleSwitchTab = useLastCallback((index: number) => {
+ openLeftColumnContent({ contentKey: LeftColumnContent.ChatList });
+ openSettingsScreen({ screen: undefined });
+ setActiveChatFolder({ activeChatFolder: index }, { forceOnHeavyAnimation: true });
+ if (activeChatFolder === index) {
+ scrollChatListToTop();
+ }
+
+ tabsRef.current?.children[index]?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ });
+
+ const handleSettingsClick = useLastCallback(() => {
+ openLeftColumnContent({ contentKey: LeftColumnContent.Settings });
+ openSettingsScreen({ screen: SettingsScreens.Folders });
+ });
+
+ // Prevent `activeTab` pointing at non-existing folder after update
+ useEffect(() => {
+ if (!folderTabs?.length) {
+ return;
+ }
+
+ if (activeChatFolder >= folderTabs.length) {
+ setActiveChatFolder({ activeChatFolder: FIRST_FOLDER_INDEX });
+ }
+ }, [activeChatFolder, folderTabs, setActiveChatFolder]);
+
+ const MainButton = useMemo(() => {
+ return ({ onTrigger, isOpen }: { onTrigger: () => void; isOpen?: boolean }) => (
+
+ );
+ }, [lang]);
+
+ if (!isActive) {
+ return undefined;
+ }
+
+ return (
+
+ );
+};
+
+export default memo(withGlobal(
+ (global): StateProps => {
+ const {
+ chatFolders: {
+ byId: chatFoldersById,
+ orderedIds: orderedFolderIds,
+ invites: folderInvitesById,
+ },
+ } = global;
+ const { activeChatFolder } = selectTabState(global);
+
+ return {
+ chatFoldersById,
+ folderInvitesById,
+ orderedFolderIds,
+ activeChatFolder,
+ maxFolders: selectCurrentLimit(global, 'dialogFilters'),
+ maxFolderInvites: selectCurrentLimit(global, 'chatlistInvites'),
+ maxChatLists: selectCurrentLimit(global, 'chatlistJoined'),
+ };
+ },
+)(FoldersSidebar));
diff --git a/src/components/main/Main.scss b/src/components/main/Main.scss
index f01cdb497..8c873cb09 100644
--- a/src/components/main/Main.scss
+++ b/src/components/main/Main.scss
@@ -3,6 +3,10 @@
height: 100%;
text-align: left;
+ &.tabs-sidebar-visible {
+ grid-template-columns: auto auto 1fr;
+ }
+
@media (min-width: 1276px) {
position: relative;
}
@@ -212,3 +216,12 @@
}
}
}
+
+@media (max-width: 925px) {
+ .tabs-sidebar-visible {
+ #LeftColumn {
+ left: var(--tabs-sidebar-width) !important;
+ width: 21.5rem !important;
+ }
+ }
+}
diff --git a/src/components/main/Main.tsx b/src/components/main/Main.tsx
index 041d379a2..21d079e3f 100644
--- a/src/components/main/Main.tsx
+++ b/src/components/main/Main.tsx
@@ -11,9 +11,10 @@ import { getActions, getGlobal, withGlobal } from '../../global';
import type { ApiChatFolder, ApiLimitTypeWithModal, ApiUser } from '../../api/types';
import type { TabState } from '../../global/types';
-import { BASE_EMOJI_KEYWORD_LANG, DEBUG, INACTIVE_MARKER } from '../../config';
+import { BASE_EMOJI_KEYWORD_LANG, DEBUG, INACTIVE_MARKER, TABS_POSITION_LEFT } from '../../config';
import { requestNextMutation } from '../../lib/fasterdom/fasterdom';
import {
+ selectAreFoldersPresent,
selectCanAnimateInterface,
selectChatFolder,
selectChatMessage,
@@ -79,6 +80,7 @@ import DeleteFolderDialog from './DeleteFolderDialog.async';
import Dialogs from './Dialogs.async';
import DownloadManager from './DownloadManager';
import DraftRecipientPicker from './DraftRecipientPicker.async';
+import FoldersSidebar from './FoldersSidebar';
import ForwardRecipientPicker from './ForwardRecipientPicker.async';
import GameModal from './GameModal';
import HistoryCalendar from './HistoryCalendar.async';
@@ -145,6 +147,7 @@ type StateProps = {
isSynced?: boolean;
isAccountFrozen?: boolean;
isAppConfigLoaded?: boolean;
+ isFoldersSidebarShown: boolean;
};
const APP_OUTDATED_TIMEOUT_MS = 5 * 60 * 1000; // 5 min
@@ -199,6 +202,7 @@ const Main = ({
currentUserId,
isAccountFrozen,
isAppConfigLoaded,
+ isFoldersSidebarShown,
}: OwnProps & StateProps) => {
const {
initMain,
@@ -518,6 +522,7 @@ const Main = ({
isNarrowMessageList && 'narrow-message-list',
shouldSkipHistoryAnimations && 'history-animation-disabled',
isFullscreen && 'is-fullscreen',
+ isFoldersSidebarShown && 'tabs-sidebar-visible',
);
const handleBlur = useLastCallback(() => {
@@ -549,7 +554,8 @@ const Main = ({
return (
-
+
+
@@ -637,7 +643,7 @@ export default memo(withGlobal
(
deleteFolderDialogModal,
} = selectTabState(global);
- const { wasTimeFormatSetManually } = selectSharedSettings(global);
+ const { wasTimeFormatSetManually, tabsPosition } = selectSharedSettings(global);
const gameMessage = openedGame && selectChatMessage(global, openedGame.chatId, openedGame.messageId);
const gameTitle = gameMessage?.content.game?.title;
@@ -694,6 +700,7 @@ export default memo(withGlobal(
isSynced: global.isSynced,
isAccountFrozen,
isAppConfigLoaded: global.isAppConfigLoaded,
+ isFoldersSidebarShown: tabsPosition === TABS_POSITION_LEFT && !isMobile && selectAreFoldersPresent(global),
};
},
)(Main));
diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx
index 74ee4db7a..340fae4ef 100644
--- a/src/components/middle/MessageList.tsx
+++ b/src/components/middle/MessageList.tsx
@@ -491,6 +491,7 @@ const MessageList = ({
});
} else {
clearTimeout(scrollSnapDisabledTimerRef.current);
+ scrollSnapDisabledTimerRef.current = undefined;
requestMutation(() => {
removeExtraClass(container, BOTTOM_SNAP_CLASS);
});
@@ -512,7 +513,10 @@ const MessageList = ({
updateStickyDates(container);
}
- updateBottomSnapClass();
+ // Check if scroll should be snapped, but only if there's no new message animation in progress
+ if (scrollSnapDisabledTimerRef.current === undefined) {
+ updateBottomSnapClass();
+ }
runDebouncedForScroll(() => {
const global = getGlobal();
@@ -658,12 +662,14 @@ const MessageList = ({
if (wasMessageAdded) {
clearTimeout(scrollSnapDisabledTimerRef.current);
+ scrollSnapDisabledTimerRef.current = undefined;
removeExtraClass(container, BOTTOM_SNAP_CLASS);
scrollSnapDisabledTimerRef.current = window.setTimeout(() => {
requestMutation(() => {
addExtraClass(container, BOTTOM_SNAP_CLASS);
+ scrollSnapDisabledTimerRef.current = undefined;
});
}, MESSAGE_ANIMATION_DURATION);
}
diff --git a/src/components/modals/paidReaction/PaidReactionModal.tsx b/src/components/modals/paidReaction/PaidReactionModal.tsx
index d000443bd..e290de7b0 100644
--- a/src/components/modals/paidReaction/PaidReactionModal.tsx
+++ b/src/components/modals/paidReaction/PaidReactionModal.tsx
@@ -208,7 +208,7 @@ const PaidReactionModal = ({
color="translucent"
className={buildClassName(styles.sendAsPeerMenuButton, isOpen ? 'active' : '')}
onClick={onTrigger}
- ariaLabel={lang('AccDescrOpenMenu2')}
+ ariaLabel={lang('AriaLabelOpenMenu')}
>
= ({
color="translucent"
className={isOpen ? 'active' : ''}
onClick={onTrigger}
- ariaLabel={lang('AccDescrOpenMenu2')}
+ ariaLabel={lang('AriaLabelOpenMenu')}
>
diff --git a/src/components/story/Story.tsx b/src/components/story/Story.tsx
index f10d23da4..a7374af70 100644
--- a/src/components/story/Story.tsx
+++ b/src/components/story/Story.tsx
@@ -571,13 +571,13 @@ function Story({
color="translucent-white"
onClick={onTrigger}
className={buildClassName(styles.button, isOpen && 'active')}
- ariaLabel={oldLang('AccDescrOpenMenu2')}
+ ariaLabel={lang('AriaLabelOpenMenu')}
>
);
};
- }, [isMobile, oldLang]);
+ }, [isMobile, lang]);
function renderStoriesTabs() {
return (
diff --git a/src/components/story/helpers/ribbonAnimation.ts b/src/components/story/helpers/ribbonAnimation.ts
index 2155082bd..b07815e42 100644
--- a/src/components/story/helpers/ribbonAnimation.ts
+++ b/src/components/story/helpers/ribbonAnimation.ts
@@ -19,7 +19,7 @@ export function animateOpening(isArchived?: boolean) {
cancelDelayedCallbacks();
const {
- container, toggler, leftMainHeader, ribbonPeers, toggleAvatars,
+ container, toggler, leftMainHeader, ribbonPeers, toggleAvatars, sidebar,
} = getHTMLElements(isArchived);
if (!toggler || !toggleAvatars || !ribbonPeers || !container || !leftMainHeader) {
@@ -28,6 +28,7 @@ export function animateOpening(isArchived?: boolean) {
const { bottom: headerBottom, right: headerRight } = leftMainHeader.getBoundingClientRect();
const toTop = headerBottom + RIBBON_OFFSET;
+ const sidebarWidth = sidebar ? sidebar.getBoundingClientRect().width : 0;
// Toggle avatars are in the reverse order
const lastToggleAvatar = toggleAvatars[0];
@@ -57,10 +58,11 @@ export function animateOpening(isArchived?: boolean) {
width: fromWidth,
} = toggleAvatar.getBoundingClientRect();
- const {
- left: toLeft,
- width: toWidth,
- } = peer.getBoundingClientRect();
+ fromLeft -= sidebarWidth;
+
+ const peerBounds = peer.getBoundingClientRect();
+ const toLeft = peerBounds.left - sidebarWidth;
+ const toWidth = peerBounds.width;
if (toLeft > headerRight) {
return;
@@ -164,13 +166,14 @@ export function animateClosing(isArchived?: boolean) {
toggleAvatars,
ribbonPeers,
leftMainHeader,
+ sidebar,
} = getHTMLElements(isArchived);
if (!toggler || !toggleAvatars || !ribbonPeers || !container || !leftMainHeader) {
return;
}
const { right: headerRight } = leftMainHeader.getBoundingClientRect();
-
+ const sidebarWidth = sidebar ? sidebar.getBoundingClientRect().width : 0;
// Toggle avatars are in the reverse order
const lastToggleAvatar = toggleAvatars[0];
const firstToggleAvatar = toggleAvatars[toggleAvatars.length - 1];
@@ -192,11 +195,11 @@ export function animateClosing(isArchived?: boolean) {
if (!toggleAvatar) return;
- const {
- top: fromTop,
- left: fromLeft,
- width: fromWidth,
- } = peer.getBoundingClientRect();
+ const peerBounds = peer.getBoundingClientRect();
+
+ const fromTop = peerBounds.top;
+ const fromLeft = peerBounds.left - sidebarWidth;
+ const fromWidth = peerBounds.width;
let {
left: toLeft,
@@ -204,6 +207,8 @@ export function animateClosing(isArchived?: boolean) {
top: toTop,
} = toggleAvatar.getBoundingClientRect();
+ toLeft -= sidebarWidth;
+
if (fromLeft > headerRight) {
return;
}
@@ -306,6 +311,7 @@ function getHTMLElements(isArchived?: boolean) {
const leftMainHeader = container.querySelector('.left-header');
const ribbonPeers = ribbon?.querySelectorAll(`.${ribbonStyles.peer}`);
const toggleAvatars = toggler?.querySelectorAll('.Avatar');
+ const sidebar = document.getElementById('FoldersSidebar');
return {
container,
@@ -313,6 +319,7 @@ function getHTMLElements(isArchived?: boolean) {
leftMainHeader,
ribbonPeers,
toggleAvatars,
+ sidebar,
};
}
diff --git a/src/components/ui/Folder.module.scss b/src/components/ui/Folder.module.scss
new file mode 100644
index 000000000..a448412a4
--- /dev/null
+++ b/src/components/ui/Folder.module.scss
@@ -0,0 +1,115 @@
+.folder {
+ cursor: var(--custom-cursor, pointer);
+
+ position: relative;
+
+ display: flex;
+ flex-direction: column;
+ flex-shrink: 0;
+ gap: 0.375rem;
+ align-items: center;
+ justify-content: center;
+
+ width: var(--tabs-sidebar-width);
+ min-height: 4.5rem;
+ padding-right: 0.25rem;
+ padding-left: 0.375rem;
+ border-radius: 0;
+
+ &::before {
+ content: '';
+
+ position: absolute;
+ top: 0.625rem;
+ bottom: 0.625rem;
+ left: 0;
+ transform: translateX(-0.375rem) scaleY(0.5);
+
+ width: 0.3125rem;
+ border-start-end-radius: var(--border-radius-default);
+ border-end-end-radius: var(--border-radius-default);
+
+ background: var(--color-primary);
+
+ transition: transform var(--layer-transition);
+
+ body.no-page-transitions & {
+ transition: none;
+ }
+ }
+
+ .inner {
+ --emoji-size: 0.75rem;
+ --custom-emoji-size: 0.75rem;
+
+ font-size: 0.625rem;
+ }
+
+ .title {
+ overflow: hidden;
+
+ font-weight: var(--font-weight-medium);
+ color: var(--color-text-secondary);
+ text-align: center;
+ overflow-wrap: anywhere;
+ }
+
+ .icon {
+ --emoji-size: 2rem;
+ --custom-emoji-size: 2rem;
+
+ position: relative;
+ font-size: 2.25rem; // Font icons are smaller than custom emojis
+ color: var(--color-text-secondary);
+ }
+
+ .badge {
+ position: absolute;
+ z-index: 1;
+ top: -0.25rem;
+ left: 1.25rem;
+
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+
+ padding: 0.125rem 0.375rem;
+ border: 2px solid var(--color-background-sidebar);
+ border-radius: 0.75rem;
+
+ font-size: 0.75rem;
+ font-weight: var(--font-weight-semibold);
+ line-height: normal;
+ color: var(--color-white);
+
+ background: var(--color-text-secondary);
+
+ &-active {
+ color: var(--color-white);
+ background: var(--color-primary);
+ }
+ }
+
+ .blocked {
+ vertical-align: middle;
+ }
+
+ &:hover {
+ background: var(--color-interactive-element-hover);
+ }
+
+ &.active {
+ &::before {
+ transform: translateX(0) scaleY(1);
+ }
+
+ .icon, .title {
+ color: var(--color-primary);
+ }
+
+ .badge {
+ color: var(--color-white);
+ background: var(--color-primary);
+ }
+ }
+}
diff --git a/src/components/ui/Folder.tsx b/src/components/ui/Folder.tsx
new file mode 100644
index 000000000..fa9b5ad92
--- /dev/null
+++ b/src/components/ui/Folder.tsx
@@ -0,0 +1,131 @@
+import type { TeactNode } from '../../lib/teact/teact';
+import { useRef } from '../../lib/teact/teact';
+
+import type { MenuItemContextAction } from './ListItem';
+
+import { MouseButton } from '../../util/browser/windowEnvironment';
+import buildClassName from '../../util/buildClassName';
+
+import useContextMenuHandlers from '../../hooks/useContextMenuHandlers';
+import { useFastClick } from '../../hooks/useFastClick';
+import useLastCallback from '../../hooks/useLastCallback';
+
+import Icon from '../common/icons/Icon';
+import Menu from './Menu';
+import MenuItem from './MenuItem';
+import MenuSeparator from './MenuSeparator';
+
+import styles from './Folder.module.scss';
+
+type OwnProps = {
+ className?: string;
+ title: TeactNode;
+ isActive?: boolean;
+ isBlocked?: boolean;
+ badgeCount?: number;
+ isBadgeActive?: boolean;
+ contextActions?: MenuItemContextAction[];
+ contextRootElementSelector?: string;
+ icon?: TeactNode;
+ clickArg?: number;
+ onClick?: (arg: number) => void;
+};
+
+const Folder = ({
+ className,
+ title,
+ isActive,
+ isBlocked,
+ badgeCount,
+ isBadgeActive,
+ contextActions,
+ contextRootElementSelector,
+ icon,
+ clickArg,
+ onClick,
+}: OwnProps) => {
+ const folderRef = useRef();
+
+ const {
+ contextMenuAnchor, handleContextMenu, handleBeforeContextMenu, handleContextMenuClose,
+ handleContextMenuHide, isContextMenuOpen,
+ } = useContextMenuHandlers(folderRef, !contextActions);
+
+ const { handleClick, handleMouseDown } = useFastClick((e: React.MouseEvent) => {
+ if (contextActions && (e.button === MouseButton.Secondary || !onClick)) {
+ handleBeforeContextMenu(e);
+ }
+
+ if (e.type === 'mousedown' && e.button !== MouseButton.Main) {
+ return;
+ }
+
+ onClick?.(clickArg!);
+ });
+
+ const getTriggerElement = useLastCallback(() => folderRef.current);
+ const getRootElement = useLastCallback(
+ () => (contextRootElementSelector ? folderRef.current!.closest(contextRootElementSelector) : document.body),
+ );
+ const getMenuElement = useLastCallback(
+ () => document.querySelector(`.${styles.contextMenu} .bubble`),
+ );
+ const getLayout = useLastCallback(() => ({ withPortal: true }));
+
+ return (
+
+
+ {icon}
+ {Boolean(badgeCount) && (
+ {badgeCount}
+ )}
+
+
+
+ {isBlocked && }
+ {title}
+
+
+
+ {contextActions && contextMenuAnchor !== undefined && (
+
+ )}
+