Comprehensive analysis of code duplications across the tweb codebase: functions, styles, component patterns, and library-level code.

1. Helper/Utility Function Duplications
2. CSS/SCSS Style Duplications
3. Component Pattern Duplications
4. Library/Manager Layer Duplications
5. Cross-Cutting Duplications
6. Summary & Recommendations

Fix: Replace local versions with import noop from '@helpers/noop'.

Both use identical logic (k=1024, log calculation, decimals). Can be consolidated into one parameterized function.

Fix: Extend deepEqual with an optional tolerance parameter; import in mediaEditor/utils.ts.

Fix: Import from @helpers/object/isObject.

Common utility pattern with no shared helper. Should be extracted to @helpers/delay.ts.

Values differ by context, but having no central location for these makes them hard to discover.

Files analyzed: 243 SCSS files (135 in src/scss/, 108 in src/components/)

display: flex;
align-items: center;
justify-content: center;

No shared mixin exists. .position-center in _global.scss only handles absolute positioning.

Fix: Create @mixin flex-center().

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

A mixin exists (@mixin text-overflow() in src/scss/mixins/_textOverflow.scss) but is underutilized. Many files duplicate this inline.

Fix: Enforce usage of existing @mixin text-overflow().

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

.position-center utility class exists in _global.scss but is rarely used directly.

Fix: Create @mixin absolute-center() or enforce .position-center usage.

Fix: Create @mixin transition-opacity() and @mixin transition-transform().

width: 100%;
height: 100%;
/* or */
top: 0; left: 0; right: 0; bottom: 0;

Fix: Create @mixin full-fill().

Circular elements with border-radius: 50% appear 76 times. No shared mixin.

Heaviest files: _chatBubble.scss (17), _global.scss (17), _mediaViewer.scss (5).

.5rem vs 0.5rem used interchangeably — 15 vs 6 occurrences.

Every popup extending PopupElement sets up listeners identically:

this.listenerSetter.add(element)('click', callback);
this.addEventListener('show', () => { /* setup */ });
this.addEventListener('closeAfterTimeout', () => { /* cleanup */ });

44 popup subclasses all follow the same constructor → d()/construct() → show() flow.

const inputField = new InputField({label: 'Label', maxLength: 64, required: true});
inputField.validate = () => { /* ... */ };
this.listenerSetter.add(inputField.input)('input', onChange);

Heaviest files: paymentCard.ts (90), paymentShipping.ts (88), boostsViaGifts.tsx (50).

Fix: Create a FormPopup base class or form builder utility.

const div = document.createElement('div');
div.classList.add('class-name');
container.append(div, element);

Fix: Consider a small DOM builder utility or further migration to JSX.

promise.then(() => {
  this.hide();
}, (err: ApiError) => {
  if(err.type === 'ERROR_TYPE') {
    toastNew({langPackKey: 'ErrorMessage'});
  }
});

Fix: Create a shared handleApiError() utility.

const row = new Row({title: wrapEmojiText(text), clickable: true});
const media = row.createMedia('abitbigger');
const avatar = avatarNew({peerId, middleware, size: 32});
media.append(avatar.node);

Repeated avatar-in-row construction pattern.

const middleware = this.middlewareHelper.get();
// async operation
if(!middleware()) return;

Consistent but repetitive pattern across all async popup logic.

All follow similar structure: import media type → render with LazyLoadQueue → apply middleware → return element. Could benefit from a generic wrapMedia() factory.

Every manager's after() method calls:

this.apiUpdatesManager.addMultipleEventsListeners({
  updateXxx: this.onUpdateXxx,
  updateYyy: this.onUpdateYyy
});

Both managers have ~40 identical lines:

return Promise.all([
  this.appStateManager.getState(),
  this.appStoragesManager.loadStorage('entityType')
]).then(([state, {results, storage}]) => {
  this.storage = storage;
  this.saveApiEntities(results);
  this.peersStorage.addEventListener('peerNeeded', (peerId) => { ... });
  this.peersStorage.addEventListener('peerUnneeded', (peerId) => { ... });
});

Fix: Extract to a shared initializePeerStorage() base method.

private getXxxPromises: Map<Key, Promise<Value>> = new Map();

public getXxx(key: Key) {
  let promise = this.getXxxPromises.get(key);
  if(promise) return promise;
  promise = this.apiManager.invokeApi(...).then(result => {
    this.getXxxPromises.delete(key);
    return result;
  });
  this.getXxxPromises.set(key, promise);
  return promise;
}

Files: appEmojiManager.ts, appReactionsManager.ts, appMessagesManager.ts, appProfileManager.ts, and 26+ more.

Fix: Create a generic RequestDeduplicator<K, V> utility class.

return this.apiManager.invokeApiSingleProcess({
  method: 'some.method',
  params: {...},
  processResult: (result) => {
    this.appChatsManager.saveApiChats(result.chats, true);
    this.appUsersManager.saveApiUsers(result.users);
    // process specific data
  }
});

The saveApiChats + saveApiUsers pair is called in nearly every API result processor.

Fix: Create a wrapper that auto-saves chats/users from API results.

const [value, setValue] = createRoot(() => createSignal(initialValue));
rootScope.addEventListener('event', setValue);
if(rootScope.myId) {
  rootScope.managers.rootScope.getValue().then(setValue);
} else {
  rootScope.addEventListener('user_auth', () => {
    rootScope.managers.rootScope.getValue().then(setValue);
  });
}
export default function useValue() { return value; }

Files: src/stores/premium.ts, src/stores/appSettings.ts, src/stores/stars.ts.

Fix: Create a createAuthAwareStore() factory function.

private cache: {[id: string]: CachedType} = {};
private expiration: {[peerId: PeerId]: number} = {};

public get(id) {
  if(this.cache[id] && Date.now() < this.expiration[id.toPeerId()]) {
    return this.cache[id];
  }
  return this.fetchAndCache(id);
}

Fix: Create a CachedValue<T> utility with TTL support.

Many follow identical patterns (log + toast notification) with no shared handler.

Most common import in the codebase. While not reducible, access patterns like rootScope.managers.appXxxManager could be simplified with local destructuring or helper re-exports.

SECTION_ID, ACTION_TYPE_, and MESSAGE_ constants appear across 13+ files. Some could be centralized in src/config/.