Add recent actions tab and log entry some styling, new icon

Author: H7GhosT

assets/icons/clipboard.svg

@@ -2,11 +2,12 @@ import {onCleanup} from 'solid-js';
 import {TextWithEntities} from '../../../../layer';
 import wrapEmojiText from '../../../../lib/richTextProcessor/wrapEmojiText';
 import defineSolidElement, {PassedProps} from '../../../../lib/solidjs/defineSolidElement';
-import {InputFieldTsx} from '../../../inputFieldTsx';
 import {InputFieldEmoji} from '../../../inputFieldEmoji';
+import {InputFieldTsx} from '../../../inputFieldTsx';
 
 if(import.meta.hot) import.meta.hot.accept();
 
+
 const MAX_FOLDER_NAME_LENGTH = 12;
 
 type Props = {

public/assets/fonts/tgico.svg

@@ -0,0 +1,59 @@
+import {createEffect, createResource, For} from 'solid-js';
+import {logger} from '../../../../lib/logger';
+import {useHotReloadGuard} from '../../../../lib/solidjs/hotReloadGuard';
+import {useSuperTab} from '../../../solidJsTabs/superTabProvider';
+import {type AppAdminRecentActionsTab} from '../../../solidJsTabs/tabs';
+import {LogEntry} from './logEntry';
+import {IconTsx} from '../../../iconTsx';
+
+const log = logger('AdminRecentActionsTab');
+
+const AdminRecentActionsTab = () => {
+  const {rootScope, PeerTitleTsx} = useHotReloadGuard();
+  const [tab] = useSuperTab<typeof AppAdminRecentActionsTab>();
+
+  const [logs] = createResource(async() => {
+    const startTime = performance.now();
+    const result = await rootScope.managers.appChatsManager.getAdminLogs({channelId: tab.payload.channelId})
+    const endTime = performance.now();
+
+    log(`getAdminLogs took ${endTime - startTime}ms`);
+
+    return result;
+  });
+
+  createEffect(() => {
+    console.log('logs :>> ', logs());
+  });
+
+  return (
+    <For each={logs() || []}>
+      {(log) => (
+        <div style={{padding: '6px 12px'}}>
+          <LogEntry
+            peerTitle={<PeerTitleTsx peerId={log.user_id.toPeerId()} />}
+            // peerTitle={'lsdfkj alsdfj alskdjf alskdjf alsdkfj alsdkfja lsdkjf asldfj'}
+            // message={'Chnaged the title from This to That and edited some messages'}
+            message={'Chnaged the title from This to That'}
+            date={new Date(log.date * 1000)}
+            icon='clipboard'
+            // expandableContent={<div>
+            // lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            // </div>}
+          />
+        </div>
+      )}
+    </For>
+  );
+};
+
+/**
+ * - cases for each log action type
+ * - infinite scroll fetching
+ * - dynamic virtual list
+ * - collapsing
+ * - filters
+ * - downloading log
+ */
+
+export default AdminRecentActionsTab;

public/assets/fonts/tgico.ttf

@@ -0,0 +1,67 @@
+.Container {
+  border-radius: 12px;
+  background-color: var(--surface-color);
+}
+
+.Header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  padding: 10px 12px;
+
+  --border-color: 0, 0, 0;
+  border-bottom: 1px solid var(--background-color);
+
+  :global(.night) & {
+    --border-color: 255, 255, 255;
+  }
+}
+
+.Group {
+  flex: 1;
+  min-width: 0; /* crucial – allows the item to shrink below its content width */
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.Icon {
+  display: flex;
+  font-size: 20px;
+  /* align-self: flex-start;
+  padding-top: 12px; */
+  /* color: var(--primary-color); */
+}
+
+.PeerTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 600;
+  white-space: nowrap;
+  font-size: 14px;
+  line-height: 1.2;
+  padding-top: 1px;
+}
+
+.Message {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  font-size: 14px;
+  color: var(--secondary-text-color);
+  line-height: 1.2;
+}
+
+.Date {
+  font-size: 13px;
+  line-height: 1;
+  /* opacity: 0.6; */
+  color: var(--secondary-text-color);
+}
+
+.ExpandableContent {
+  font-size: 16px;
+  padding: 8px 12px;
+}

public/assets/fonts/tgico.woff

@@ -0,0 +1,39 @@
+import {JSX} from 'solid-js';
+import {formatTime} from '../../../../helpers/date';
+import {IconTsx} from '../../../iconTsx';
+import styles from './logEntry.module.scss';
+
+type LogEntryProps = {
+  date: Date;
+  peerTitle: JSX.Element;
+  message: JSX.Element;
+  icon: Icon;
+
+  expanded?: boolean;
+  expandableContent?: JSX.Element;
+};
+
+export const LogEntry = (props: LogEntryProps) => {
+  const isExpandable = () => props.expandableContent !== undefined;
+
+  return (
+    <div class={styles.Container}>
+      <div class={styles.Header}>
+        <div class={styles.Icon}><IconTsx icon={props.icon} /></div>
+        <div class={styles.Group}>
+          <div class={styles.PeerTitle}>{props.peerTitle}</div>
+          <div class={styles.Message}>{props.message} adsf asdf asd sdf</div>
+        </div>
+        <div class={styles.Date}>{formatTime(props.date)}</div>
+      </div>
+      {/* {isExpandable() && (
+      )}*/}
+      <div class={styles.ExpandableContent}>
+        <div class={styles.ExpandableContentTitle}>
+          {props.message}
+        </div>
+        {props.expandableContent}
+      </div>
+    </div>
+  );
+};

src/components/sidebarLeft/tabs/editFolderInput/index.tsx

@@ -41,6 +41,7 @@ import PopupBoost from '../../popups/boost';
 import namedPromises from '../../../helpers/namedPromises';
 import apiManagerProxy from '../../../lib/mtproto/mtprotoworker';
 import {AppDirectMessagesTab} from '../../solidJsTabs';
+import {AppAdminRecentActionsTab} from '../../solidJsTabs/tabs';
 
 export default class AppEditChatTab extends SliderSuperTab {
   private chatNameInputField: InputField;
@@ -440,6 +441,19 @@ export default class AppEditChatTab extends SliderSuperTab {
         section.content.append(topicsRow.container);
       }
 
+      if(isAdmin) {
+        const recentActionsRow = new Row({
+          icon: 'clipboard',
+          titleLangKey: 'RecentActions',
+          clickable: () => {
+            this.slider.createTab(AppAdminRecentActionsTab).open({channelId: this.chatId});
+          },
+          listenerSetter: this.listenerSetter
+        });
+
+        section.content.append(recentActionsRow.container);
+      }
+
       section.caption.classList.toggle('hide', !section.caption.childElementCount);
 
       if(section.content.childElementCount) this.scrollable.append(section.container);

src/components/sidebarRight/tabs/adminRecentActions/index.tsx

@@ -42,7 +42,6 @@ export function scaffoldSolidJSTab<Payload = void>({
       this.dispose = render(() => (
         <SolidJSHotReloadGuardProvider>
           <PromiseCollector onCollect={promiseCollectorHelper.onCollect}>
-            {/* Providing other tabs here to avoid circular imports */}
             <SuperTabProvider self={this}>
               <Component />
             </SuperTabProvider>