Private search fixes:

Sender avatar & name
Fix highlight active color
Added date pick button

src/components/appSearch.ts

@@ -8,13 +8,15 @@ import appDialogsManager from "../lib/appManagers/appDialogsManager";
 import Scrollable from "./scrollable";
 import appMessagesManager from "../lib/appManagers/appMessagesManager";
 import InputSearch from "./inputSearch";
+import replaceContent from "../helpers/dom/replaceContent";
+import { i18n, LangPackKey } from "../lib/langPack";
 
 export class SearchGroup {
   container: HTMLDivElement;
   nameEl: HTMLDivElement;
   list: HTMLUListElement;
 
-  constructor(public name: string, public type: string, private clearable = true, className?: string, clickable = true, public autonomous = true, public onFound?: () => void) {
+  constructor(public name: LangPackKey | boolean, public type: string, private clearable = true, className?: string, clickable = true, public autonomous = true, public onFound?: () => void) {
     this.list = appDialogsManager.createChatList();
     this.container = document.createElement('div');
     if(className) this.container.className = className;
@@ -22,7 +24,9 @@ export class SearchGroup {
     if(name) {
       this.nameEl = document.createElement('div');
       this.nameEl.classList.add('search-group__name');
-      this.nameEl.innerText = name;
+      if(typeof(name) === 'string') {
+        this.nameEl.append(i18n(name));
+      }
       this.container.append(this.nameEl);
     }
     
@@ -128,15 +132,9 @@ export default class AppSearch {
     this.searchPromise = null;
   }
 
-  public beginSearch(peerId?: number, threadId?: number) {
+  public beginSearch(peerId = 0, threadId = 0) {
-    if(peerId) {
     this.peerId = peerId;
-    }
-
-    if(threadId) {
     this.threadId = threadId;
-    }
-    
     this.searchInput.input.focus();
   }
 
@@ -181,12 +179,19 @@ export default class AppSearch {
       const searchGroup = this.searchGroups.messages;
 
       history.forEach((message) => {
+        const peerId = this.peerId ? message.fromId : message.peerId;
         const {dialog, dom} = appDialogsManager.addDialogNew({
-          dialog: message.peerId, 
+          dialog: peerId, 
           container: this.scrollable/* searchGroup.list */, 
           drawStatus: false,
-          avatarSize: 54
+          avatarSize: 54,
+          meAsSaved: false
         });
+
+        if(message.peerId !== peerId) {
+          dom.listEl.dataset.peerId = '' + message.peerId;
+        }
+
         appDialogsManager.setLastMessage(dialog, message, dom, query);
       });
 
@@ -201,6 +206,11 @@ export default class AppSearch {
       
       if(this.foundCount === -1) {
         this.foundCount = count;
+
+        if(searchGroup.nameEl) {
+          replaceContent(searchGroup.nameEl, i18n(count ? 'Chat.Search.MessagesFound' : 'Chat.Search.NoMessagesFound', [count]));
+        }
+        
         this.onSearch && this.onSearch(this.foundCount);
       }
     }).catch(err => {

src/components/appSearchSuper..ts

@@ -184,7 +184,7 @@ export default class AppSearchSuper {
 
     // * construct end
 
-    this.searchGroupMedia = new SearchGroup('', 'messages', true);
+    this.searchGroupMedia = new SearchGroup(false, 'messages', true);
 
     this.scrollable.onScrolledBottom = () => {
       if(this.mediaTab.contentTab && this.mediaTab.contentTab.childElementCount/* && false */) {

src/components/chat/search.ts

@@ -13,6 +13,8 @@ import type Chat from "./chat";
 import findUpTag from "../../helpers/dom/findUpTag";
 import { cancelEvent } from "../../helpers/dom/cancelEvent";
 import whichChild from "../../helpers/dom/whichChild";
+import replaceContent from "../../helpers/dom/replaceContent";
+import { i18n } from "../../lib/langPack";
 
 export default class ChatSearch {
   private element: HTMLElement;
@@ -63,7 +65,7 @@ export default class ChatSearch {
     this.results = document.createElement('div');
     this.results.classList.add('chat-search-results', 'chatlist-container');
 
-    this.searchGroup = new SearchGroup('', 'messages', undefined, '', false);
+    this.searchGroup = new SearchGroup(false, 'messages', undefined, '', false);
     this.searchGroup.list.addEventListener('click', this.onResultsClick);
 
     this.appSearch = new AppSearch(this.results, this.inputSearch, {
@@ -72,7 +74,7 @@ export default class ChatSearch {
       this.foundCount = count;
 
       if(!this.foundCount) {
-        this.foundCountEl.innerText = this.inputSearch.value ? 'No results' : '';
+        this.foundCountEl.replaceWith(this.inputSearch.value ? i18n('NoResult') : '');
         this.results.classList.remove('active');
         this.chat.bubbles.bubblesContainer.classList.remove('search-results-active');
         this.upBtn.setAttribute('disabled', 'true');
@@ -159,7 +161,7 @@ export default class ChatSearch {
     const res = this.chat.setPeer(peerId, lastMsgId);
     this.setPeerPromise = ((res instanceof Promise ? res : Promise.resolve(res)) as Promise<any>).then(() => {
       this.selectedIndex = index;
-      this.foundCountEl.innerText = `${index + 1} of ${this.foundCount}`;
+      replaceContent(this.foundCountEl, i18n('Of', [index + 1, this.foundCount]));
 
       const renderedCount = this.searchGroup.list.childElementCount;
       if(this.selectedIndex >= (renderedCount - 6)) {

src/components/chat/topbar.ts

@@ -243,7 +243,7 @@ export default class ChatTopbar {
           tab = new AppPrivateSearchTab(this.appSidebarRight);
         }
 
-        tab.open(this.peerId, this.chat.threadId);
+        tab.open(this.peerId, this.chat.threadId, this.chat.bubbles.onDatePick);
       }
     }, {listenerSetter: this.listenerSetter});
   }

src/components/sidebarLeft/index.ts

@@ -251,10 +251,10 @@ export class AppSidebarLeft extends SidebarSlider {
     };
 
     this.searchGroups = {
-      contacts: new SearchGroup('Chats', 'contacts', undefined, undefined, undefined, undefined, close),
+      contacts: new SearchGroup('Search.Chats', 'contacts', undefined, undefined, undefined, undefined, close),
-      globalContacts: new SearchGroup('Global Search', 'contacts', undefined, undefined, undefined, undefined, close),
+      globalContacts: new SearchGroup('Search.Global', 'contacts', undefined, undefined, undefined, undefined, close),
-      messages: new SearchGroup('Messages', 'messages'),
+      messages: new SearchGroup('Search.Messages', 'messages'),
-      people: new SearchGroup('', 'contacts', true, 'search-group-people', true, false, close),
+      people: new SearchGroup(false, 'contacts', true, 'search-group-people', true, false, close),
       recent: new SearchGroup('Recent', 'contacts', true, 'search-group-recent', true, true, close)
     };
 

src/components/sidebarLeft/tabs/newGroup.ts

@@ -10,7 +10,6 @@ import appChatsManager from "../../../lib/appManagers/appChatsManager";
 import appDialogsManager from "../../../lib/appManagers/appDialogsManager";
 import appUsersManager from "../../../lib/appManagers/appUsersManager";
 import { SearchGroup } from "../../appSearch";
-import Button from "../../button";
 import InputField from "../../inputField";
 import { SliderSuperTab } from "../../slider";
 import AvatarEdit from "../../avatarEdit";
@@ -18,7 +17,7 @@ import { i18n } from "../../../lib/langPack";
 import ButtonCorner from "../../buttonCorner";
 
 export default class AppNewGroupTab extends SliderSuperTab {
-  private searchGroup = new SearchGroup(' ', 'contacts', true, 'new-group-members disable-hover', false);
+  private searchGroup = new SearchGroup(true, 'contacts', true, 'new-group-members disable-hover', false);
   private avatarEdit: AvatarEdit;
   private uploadAvatar: () => Promise<InputFile> = null;
   private userIds: number[];

src/components/sidebarRight/tabs/search.ts

@@ -4,17 +4,22 @@
  * https://github.com/morethanwords/tweb/blob/master/LICENSE
  */
 
-import appSidebarRight, { AppSidebarRight } from "..";
+import appSidebarRight from "..";
+import { attachClickEvent } from "../../../helpers/dom/clickEvent";
 import AppSearch, { SearchGroup } from "../../appSearch";
+import ButtonIcon from "../../buttonIcon";
 import InputSearch from "../../inputSearch";
+import PopupDatePicker from "../../popups/datePicker";
 import { SliderSuperTab } from "../../slider";
 
 export default class AppPrivateSearchTab extends SliderSuperTab {
   private inputSearch: InputSearch;
   private appSearch: AppSearch;
+  private btnPickDate: HTMLElement;
 
   private peerId = 0;
   private threadId = 0;
+  private onDatePick: (timestamp: number) => void;
 
   onOpenAfterTimeout() {
     this.appSearch.beginSearch(this.peerId, this.threadId);
@@ -26,15 +31,18 @@ export default class AppPrivateSearchTab extends SliderSuperTab {
     this.inputSearch = new InputSearch('Search');
     this.title.replaceWith(this.inputSearch.container);
 
+    this.btnPickDate = ButtonIcon('calendar sidebar-header-right');
+    this.header.append(this.btnPickDate);
+
     const c = document.createElement('div');
     c.classList.add('chatlist-container');
     this.scrollable.container.replaceWith(c);
     this.appSearch = new AppSearch(c, this.inputSearch, {
-      messages: new SearchGroup('Private Search', 'messages')
+      messages: new SearchGroup('Chat.Search.PrivateSearch', 'messages')
     });
   }
 
-  open(peerId: number, threadId?: number) {
+  open(peerId: number, threadId?: number, onDatePick?: AppPrivateSearchTab['onDatePick']) {
     const ret = super.open();
     if(this.init) {
       this.init();
@@ -48,6 +56,14 @@ export default class AppPrivateSearchTab extends SliderSuperTab {
 
     this.peerId = peerId;
     this.threadId = threadId;
+    this.onDatePick = onDatePick;
+
+    this.btnPickDate.classList.toggle('hide', !this.onDatePick);
+    if(this.onDatePick) {
+      attachClickEvent(this.btnPickDate, () => {
+        new PopupDatePicker(new Date(), this.onDatePick).show();
+      });
+    }
     
     appSidebarRight.toggleSidebar(true);
     return ret;

src/config/app.ts

@@ -13,7 +13,7 @@ const App = {
   id: 1025907,
   hash: '452b0359b988148995f22ff0f4229750',
   version: '0.5.3',
-  langPackVersion: '0.1.7',
+  langPackVersion: '0.1.8',
   langPack: 'macos',
   langPackCode: 'en',
   domains: [] as string[],

src/lang.ts

@@ -37,6 +37,12 @@ const lang = {
     "other_value": "%d Messages"
   },
   "Chat.Selection.LimitToast": "Max selection count reached.",
+  "Chat.Search.MessagesFound": {
+    "one_value": "%d message found",
+    "other_value": "%d messages found",
+  },
+  "Chat.Search.NoMessagesFound": "No messages found",
+  "Chat.Search.PrivateSearch": "Private Search",
   //"Saved": "Saved",
   "General.Keyboard": "Keyboard",
   "General.SendShortcut.Enter": "Send by Enter",
@@ -78,6 +84,9 @@ const lang = {
   "Link.Available": "Link is available",
   "Link.Taken": "Link is already taken",
   "Link.Invalid": "Link is invalid",
+  "Search.Chats": "Chats",
+  "Search.Global": "Global Search",
+  "Search.Messages": "Messages",
   "StickersTab.SearchPlaceholder": "Search Stickers",
   "ForwardedFrom": "Forwarded from %s",
   "Popup.Avatar.Title": "Drag to Reposition",
@@ -418,6 +427,9 @@ const lang = {
   "MessageScheduleSend": "Send Now",
   "MessageScheduleEditTime": "Reschedule",
   "YouLeft": "You left this group",
+  "Recent": "Recent",
+  "Of": "%1$d of %2$d",
+  "NoResult": "No results",
 
   // * macos
   "AccountSettings.Filters": "Chat Folders",

src/scss/partials/_chatlist.scss

@@ -195,7 +195,8 @@ ul.chatlist {
         .tgico-chatspinned:before,
         //.user-title:after,
         .user-title,
-        .message-status {
+        .message-status,
+        .text-highlight {
           color: #fff;
         }
 

src/scss/partials/_sidebar.scss

@@ -36,6 +36,10 @@
     .btn-icon + .btn-icon {
       margin-left: .5rem;
     }
+
+    &-right {
+      flex: 0 0 auto;
+    }
   }
 
   &-close-button {